|
|
|
@ -3,43 +3,34 @@
|
|
|
|
|
<div class="contents">
|
|
|
|
|
<!-- 左边 -->
|
|
|
|
|
<div style="width: 26%">
|
|
|
|
|
<div style="background-color: #28353f; height: 100%; border-radius: 8px; padding-top: 10px">
|
|
|
|
|
<span style="color: #fff; font-size: 26px; font-weight: 900; padding-left: 20px">紫金换电站控制平台</span>
|
|
|
|
|
<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">紫金换电站控制平台</span>
|
|
|
|
|
<div class="swapper_order">
|
|
|
|
|
<div>
|
|
|
|
|
<el-icon color="#fff"><House /></el-icon>
|
|
|
|
|
<span class="mini_title">站点信息</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="color: #fff">
|
|
|
|
|
<div class="left_titzz" style="display: flex">
|
|
|
|
|
<div class="left_titzz">
|
|
|
|
|
<span>
|
|
|
|
|
<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')" /> -->
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span style="font-family: UnidreamLED; margin-left: 10%; margin-top: 6%">
|
|
|
|
|
<span style="font-family: UnidreamLED">
|
|
|
|
|
<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-else style="width: 15px; height: 15px; border-radius: 50%; background-color: gray"></div>
|
|
|
|
|
<div style="margin-left: 5%">正常</div>
|
|
|
|
|
<div style="margin-left: 10%">
|
|
|
|
|
<div style="margin-left: 5px">正常</div>
|
|
|
|
|
<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-else style="width: 15px; height: 15px; border-radius: 50%; background-color: gray"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="margin-left: 5%">停运</div>
|
|
|
|
|
<div style="margin-left: 5px">停运</div>
|
|
|
|
|
</div>
|
|
|
|
|
</span>
|
|
|
|
|
</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 class="swapper_order" style="height: 200px">
|
|
|
|
@ -47,29 +38,36 @@
|
|
|
|
|
<el-icon color="#fff"><TakeawayBox /></el-icon>
|
|
|
|
|
<span class="mini_title">月度数据</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; margin-left: 20px">
|
|
|
|
|
<div style="display: flex">
|
|
|
|
|
<div class="public_flex_co">
|
|
|
|
|
<el-icon color="#48b3d2" size="40px"><Connection /></el-icon>
|
|
|
|
|
<div style="margin-left: 5px">
|
|
|
|
|
<div class="color_blue">{{ monthData.swapCount ? monthData.swapCount : 0 }}</div>
|
|
|
|
|
<div>换电总量/次</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="public_flex_co">
|
|
|
|
|
<el-icon color="#48b3d2" size="40px" style="margin-left: 20px"><Guide /></el-icon>
|
|
|
|
|
<div style="margin-left: 5px">
|
|
|
|
|
<div class="color_blue">{{ monthData.chargeFrequency ? monthData.chargeFrequency : 0 }}</div>
|
|
|
|
|
|
|
|
|
|
<div>充电总量/次</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex; margin-left: 20px">
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex">
|
|
|
|
|
<div class="public_flex_co">
|
|
|
|
|
<el-icon color="#48b3d2" size="40px"><Van /></el-icon>
|
|
|
|
|
<div style="margin-left: 5px">
|
|
|
|
|
<div class="color_blue">{{ monthData.vehicleCount ? monthData.vehicleCount : 0 }}</div>
|
|
|
|
|
<div>服务车辆/辆</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="public_flex_co">
|
|
|
|
|
<el-icon color="#48b3d2" size="40px" style="margin-left: 20px"><Files /></el-icon>
|
|
|
|
|
<div style="margin-left: 5px">
|
|
|
|
|
<div class="color_blue">{{ monthData.chargeCount ? monthData.chargeCount : 0 }}</div>
|
|
|
|
|
<div>充电总量kWH</div>
|
|
|
|
|
<div>充电总量KWH</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -79,7 +77,7 @@
|
|
|
|
|
<span class="mini_title">今日数据</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex">
|
|
|
|
|
<div style="display: flex">
|
|
|
|
|
<div class="public_flex_co">
|
|
|
|
|
<el-icon color="#48b3d2" size="40px"><Connection /></el-icon>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="color_blue">{{ monthData.daySwapCount ? monthData.daySwapCount : 0 }}</div>
|
|
|
|
@ -87,11 +85,11 @@
|
|
|
|
|
<div>换电总量/次</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex">
|
|
|
|
|
<div class="public_flex_co">
|
|
|
|
|
<el-icon color="#48b3d2" size="40px"><Guide /></el-icon>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="color_blue">{{ monthData.dayChargeCount ? monthData.dayChargeCount : 0 }}</div>
|
|
|
|
|
<div>换电总量kwh</div>
|
|
|
|
|
<div>换电总量KWH</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -101,7 +99,7 @@
|
|
|
|
|
<!-- 右边 -->
|
|
|
|
|
<div style="flex: 1; margin-left: 10px" class="right_demo">
|
|
|
|
|
<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>
|
|
|
|
|
<span class="mini_title">月换电详情</span>
|
|
|
|
|
<myEcharts style="height: 250px" />
|
|
|
|
@ -124,7 +122,7 @@
|
|
|
|
|
<!-- -->
|
|
|
|
|
<span scope="col" style="font-size: 13px">充电状态</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">SOC(%)</span>
|
|
|
|
|
<span scope="col" style="font-size: 13px; border-right: unset">换电状态</span>
|
|
|
|
@ -221,7 +219,7 @@ const handleQuery = async () => {
|
|
|
|
|
// 获取月/日
|
|
|
|
|
const getchargerInfo = async () => {
|
|
|
|
|
var res = await getAPI(SysHomePageApi).apiGetChargerInfoListGET();
|
|
|
|
|
console.log(res,'res');
|
|
|
|
|
console.log(res, 'res');
|
|
|
|
|
|
|
|
|
|
monthData.swapCount = res.data.data.swapCount;
|
|
|
|
|
monthData.chargeFrequency = res.data.data.chargeFrequency;
|
|
|
|
|