10.24 充电大屏暂修改

main
shilei 22 hours ago
parent dd8c82d6bb
commit c5b2ea0dc2

@ -33,10 +33,10 @@
</div> </div>
<div> <div>
工作状态: 工作状态:
<el-tag type="success" v-if="item.f_WorkState == '0'"></el-tag> <el-tag type="success" v-if="item.tmsStatus == '0'"></el-tag>
<el-tag type="info" v-else-if="item.f_WorkState == '1'">制冷模式</el-tag> <el-tag type="info" v-else-if="item.tmsStatus == '1'">制冷模式</el-tag>
<el-tag type="warning" v-else-if="item.f_WorkState == '2'">制热模式</el-tag> <el-tag type="warning" v-else-if="item.tmsStatus == '2'">制热模式</el-tag>
<el-tag type="info" v-else></el-tag> <el-tag type="info" v-else-if="item.tmsStatus == '3'">自循环模式</el-tag>
</div> </div>
<div class="right_line_span"> <div class="right_line_span">
<span>出水温度: {{ item.getOutTemperature }} °C</span> <span>出水温度: {{ item.getOutTemperature }} °C</span>
@ -63,7 +63,7 @@ onMounted(async () => {
const handleQuery = async () => { const handleQuery = async () => {
var res = await getAPI(SysChargeMonitorApi).apiGetWhaterCoolListGet(); var res = await getAPI(SysChargeMonitorApi).apiGetWhaterCoolListGet();
console.log(res, 'res'); // console.log(res, 'res');
info_list.value = res.data.data; info_list.value = res.data.data;
}; };
</script> </script>

@ -352,3 +352,13 @@
.right_demo > div:last-child { .right_demo > div:last-child {
flex: 1; flex: 1;
} }
.left_titzz {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.public_flex_co {
flex: 1;
display: flex;
align-items: center;
}

@ -317,9 +317,7 @@
.swapper_order { .swapper_order {
height: 250px; height: 250px;
margin-top: 30px; margin-top: 30px;
// height: calc(100% - 45px);
color: #fff; color: #fff;
// display: flex;
flex-direction: column; flex-direction: column;
>div { >div {
@ -449,8 +447,20 @@
.right_demo { .right_demo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// padding: 10px;
// box-sizing: border-box;
>div:last-child { >div:last-child {
flex: 1; flex: 1;
} }
}
.left_titzz {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.public_flex_co {
flex: 1;
display: flex;
align-items: center;
} }

@ -3,43 +3,34 @@
<div class="contents"> <div class="contents">
<!-- 左边 --> <!-- 左边 -->
<div style="width: 26%"> <div style="width: 26%">
<div style="background-color: #28353f; height: 100%; border-radius: 8px; padding-top: 10px"> <div style="background-color: #28353f; height: 100%; border-radius: 8px; padding: 10px; box-sizing: border-box">
<span style="color: #fff; font-size: 26px; font-weight: 900; padding-left: 20px">紫金换电站控制平台</span> <span style="color: #fff; font-size: 26px; font-weight: 900">紫金换电站控制平台</span>
<div class="swapper_order"> <div class="swapper_order">
<div> <div>
<el-icon color="#fff"><House /></el-icon> <el-icon color="#fff"><House /></el-icon>
<span class="mini_title">站点信息</span> <span class="mini_title">站点信息</span>
</div> </div>
<div style="color: #fff"> <div style="color: #fff">
<div class="left_titzz" style="display: flex"> <div class="left_titzz">
<span> <span>
<img :src="logoImage" alt="Logo" style="width: 110px; height: 80px; margin-top: 10px" /> <img :src="logoImage" alt="Logo" style="width: 110px; height: 80px; margin-top: 10px" />
<!-- <el-image :src="imgs_url" style="width: 150px; height: 80px; margin-top: 10px" :alt="$t('message.stop.swapStationImage')" /> --> <!-- <el-image :src="imgs_url" style="width: 150px; height: 80px; margin-top: 10px" :alt="$t('message.stop.swapStationImage')" /> -->
</span> </span>
<span style="font-family: UnidreamLED; margin-left: 10%; margin-top: 6%"> <span style="font-family: UnidreamLED">
<div>运输重卡换电站</div> <div>运输重卡换电站</div>
<div style="display: flex; margin-top: 20px; margin-left: -15%"> <div style="display: flex; align-items: center; margin-top: 20px">
<div v-if="info.stationStatus == 1" style="width: 15px; height: 15px; border-radius: 50%; background-color: aqua"></div> <div v-if="info.stationStatus == 1" style="width: 15px; height: 15px; border-radius: 50%; background-color: aqua"></div>
<div v-else style="width: 15px; height: 15px; border-radius: 50%; background-color: gray"></div> <div v-else style="width: 15px; height: 15px; border-radius: 50%; background-color: gray"></div>
<div style="margin-left: 5%">正常</div> <div style="margin-left: 5px">正常</div>
<div style="margin-left: 10%"> <div style="margin-left: 20px">
<div v-if="info.stationStatus == 2 || info.stationStatus == 3 || info.stationStatus == 4" style="width: 15px; height: 15px; border-radius: 50%; background-color: aqua"></div> <div v-if="info.stationStatus == 2 || info.stationStatus == 3 || info.stationStatus == 4" style="width: 15px; height: 15px; border-radius: 50%; background-color: aqua"></div>
<div v-else style="width: 15px; height: 15px; border-radius: 50%; background-color: gray"></div> <div v-else style="width: 15px; height: 15px; border-radius: 50%; background-color: gray"></div>
</div> </div>
<div style="margin-left: 5px">停运</div>
<div style="margin-left: 5%">停运</div>
</div> </div>
</span> </span>
</div> </div>
<div style="margin-top: 20px">
<span>联系方式:</span>
<span>{{ info.contactWay ? info.contactWay : '--' }}</span>
</div>
<div style="margin-top: 20px">
<span>营业时间:</span>
<span>{{ info.operatetionetime ? info.operatetionstime : '--' }}{{ info.operatetionetime ? info.operatetionetime : '--' }}</span>
</div>
</div> </div>
</div> </div>
<div class="swapper_order" style="height: 200px"> <div class="swapper_order" style="height: 200px">
@ -47,29 +38,36 @@
<el-icon color="#fff"><TakeawayBox /></el-icon> <el-icon color="#fff"><TakeawayBox /></el-icon>
<span class="mini_title">月度数据</span> <span class="mini_title">月度数据</span>
</div> </div>
<div style="display: flex; margin-left: 20px"> <div style="display: flex">
<el-icon color="#48b3d2" size="40px"><Connection /></el-icon> <div class="public_flex_co">
<div style="margin-left: 5px"> <el-icon color="#48b3d2" size="40px"><Connection /></el-icon>
<div class="color_blue">{{ monthData.swapCount ? monthData.swapCount : 0 }}</div> <div style="margin-left: 5px">
<div>换电总量/</div> <div class="color_blue">{{ monthData.swapCount ? monthData.swapCount : 0 }}</div>
<div>换电总量/</div>
</div>
</div> </div>
<el-icon color="#48b3d2" size="40px" style="margin-left: 20px"><Guide /></el-icon> <div class="public_flex_co">
<div style="margin-left: 5px"> <el-icon color="#48b3d2" size="40px" style="margin-left: 20px"><Guide /></el-icon>
<div class="color_blue">{{ monthData.chargeFrequency ? monthData.chargeFrequency : 0 }}</div> <div style="margin-left: 5px">
<div class="color_blue">{{ monthData.chargeFrequency ? monthData.chargeFrequency : 0 }}</div>
<div>充电总量/</div> <div>充电总量/</div>
</div>
</div> </div>
</div> </div>
<div style="display: flex; margin-left: 20px"> <div style="display: flex">
<el-icon color="#48b3d2" size="40px"><Van /></el-icon> <div class="public_flex_co">
<div style="margin-left: 5px"> <el-icon color="#48b3d2" size="40px"><Van /></el-icon>
<div class="color_blue">{{ monthData.vehicleCount ? monthData.vehicleCount : 0 }}</div> <div style="margin-left: 5px">
<div>服务车辆/</div> <div class="color_blue">{{ monthData.vehicleCount ? monthData.vehicleCount : 0 }}</div>
<div>服务车辆/</div>
</div>
</div> </div>
<el-icon color="#48b3d2" size="40px" style="margin-left: 20px"><Files /></el-icon> <div class="public_flex_co">
<div style="margin-left: 5px"> <el-icon color="#48b3d2" size="40px" style="margin-left: 20px"><Files /></el-icon>
<div class="color_blue">{{ monthData.chargeCount ? monthData.chargeCount : 0 }}</div> <div style="margin-left: 5px">
<div>充电总量kWH</div> <div class="color_blue">{{ monthData.chargeCount ? monthData.chargeCount : 0 }}</div>
<div>充电总量KWH</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -79,7 +77,7 @@
<span class="mini_title">今日数据</span> <span class="mini_title">今日数据</span>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<div style="display: flex"> <div class="public_flex_co">
<el-icon color="#48b3d2" size="40px"><Connection /></el-icon> <el-icon color="#48b3d2" size="40px"><Connection /></el-icon>
<div> <div>
<div class="color_blue">{{ monthData.daySwapCount ? monthData.daySwapCount : 0 }}</div> <div class="color_blue">{{ monthData.daySwapCount ? monthData.daySwapCount : 0 }}</div>
@ -87,11 +85,11 @@
<div>换电总量/</div> <div>换电总量/</div>
</div> </div>
</div> </div>
<div style="display: flex"> <div class="public_flex_co">
<el-icon color="#48b3d2" size="40px"><Guide /></el-icon> <el-icon color="#48b3d2" size="40px"><Guide /></el-icon>
<div> <div>
<div class="color_blue">{{ monthData.dayChargeCount ? monthData.dayChargeCount : 0 }}</div> <div class="color_blue">{{ monthData.dayChargeCount ? monthData.dayChargeCount : 0 }}</div>
<div>换电总量kwh</div> <div>换电总量KWH</div>
</div> </div>
</div> </div>
</div> </div>
@ -101,7 +99,7 @@
<!-- 右边 --> <!-- 右边 -->
<div style="flex: 1; margin-left: 10px" class="right_demo"> <div style="flex: 1; margin-left: 10px" class="right_demo">
<div style="background-color: #28353f; border-radius: 8px"> <div style="background-color: #28353f; border-radius: 8px">
<div style="height: 100%; padding-top: 10px"> <div style="height: 100%; padding: 10px">
<el-icon color="#fff"><DataLine /></el-icon> <el-icon color="#fff"><DataLine /></el-icon>
<span class="mini_title">月换电详情</span> <span class="mini_title">月换电详情</span>
<myEcharts style="height: 250px" /> <myEcharts style="height: 250px" />
@ -124,7 +122,7 @@
<!-- --> <!-- -->
<span scope="col" style="font-size: 13px">充电状态</span> <span scope="col" style="font-size: 13px">充电状态</span>
<span scope="col" style="font-size: 13px">充电总时长/h</span> <span scope="col" style="font-size: 13px">充电总时长/h</span>
<span scope="col" style="font-size: 13px">充电总量/kwh</span> <span scope="col" style="font-size: 13px">充电总量/KWH</span>
<span scope="col" style="font-size: 13px">电池编号</span> <span scope="col" style="font-size: 13px">电池编号</span>
<span scope="col" style="font-size: 13px">SOC(%)</span> <span scope="col" style="font-size: 13px">SOC(%)</span>
<span scope="col" style="font-size: 13px; border-right: unset">换电状态</span> <span scope="col" style="font-size: 13px; border-right: unset">换电状态</span>
@ -221,7 +219,7 @@ const handleQuery = async () => {
// / // /
const getchargerInfo = async () => { const getchargerInfo = async () => {
var res = await getAPI(SysHomePageApi).apiGetChargerInfoListGET(); var res = await getAPI(SysHomePageApi).apiGetChargerInfoListGET();
console.log(res,'res'); console.log(res, 'res');
monthData.swapCount = res.data.data.swapCount; monthData.swapCount = res.data.data.swapCount;
monthData.chargeFrequency = res.data.data.chargeFrequency; monthData.chargeFrequency = res.data.data.chargeFrequency;

@ -61,13 +61,14 @@
<el-tag v-if="scope.row.swapResult === 2"> </el-tag> <el-tag v-if="scope.row.swapResult === 2"> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="upBatterySocStart1" label="左仓满电池充电前soc" align="center" show-overflow-tooltip width="150" />
<el-table-column prop="upBatterySocStart2" label="右仓满电池充电前soc" align="center" show-overflow-tooltip width="150" />
<el-table-column prop="upBatterySocEnd1" label="左仓充电后soc" align="center" show-overflow-tooltip width="150" />
<el-table-column prop="upBatterySocEnd2" label="右仓充电后soc" align="center" show-overflow-tooltip width="150" />
<el-table-column prop="upBatteryElectric1" label="左仓充电电量" align="center" show-overflow-tooltip width="150" />
<el-table-column prop="upBatteryElectric2" label="右仓充电电量" align="center" show-overflow-tooltip width="150" />
<el-table-column prop="failReason" label="失败原因" align="center" show-overflow-tooltip /> <el-table-column prop="failReason" label="失败原因" align="center" show-overflow-tooltip />
<!-- <el-table-column prop="cloudReportStatus" label="上传云平台状态" align="center" show-overflow-tooltip>
<template #default="scope">
<el-tag v-if="scope.row.cloudReportStatus === 0" type="danger"> </el-tag>
<el-tag v-if="scope.row.cloudReportStatus === 1"> </el-tag>
</template>
</el-table-column> -->
<el-table-column label="操作" width="250" fixed="right" align="center" show-overflow-tooltip> <el-table-column label="操作" width="250" fixed="right" align="center" show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
<!-- <el-button icon="ele-Edit" size="small" text type="primary" @click="uploadcloud(scope.row)" v-if="scope.row.cloudReportStatus == 0 && scope.row.swapResult == 1 && scope.row.reportCloudNum < 100"> </el-button> --> <!-- <el-button icon="ele-Edit" size="small" text type="primary" @click="uploadcloud(scope.row)" v-if="scope.row.cloudReportStatus == 0 && scope.row.swapResult == 1 && scope.row.reportCloudNum < 100"> </el-button> -->

Loading…
Cancel
Save