parent
e6b7571e14
commit
213534dd7f
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 6.9 KiB |
@ -1,321 +1,446 @@
|
||||
<template>
|
||||
<div id="content" style="height: calc(100vh - 150px); display: flex; flex-direction: column">
|
||||
<!-- 上下 -->
|
||||
<div class="tops_content">
|
||||
<div class="electricity_status">
|
||||
<div class="div_shadowing">
|
||||
<span>{{ $t('message.homepage.stepName') }}:</span>
|
||||
<span class="block_spans"> {{ bmsSwapSts.stepName }} </span>
|
||||
</div>
|
||||
<div class="bottom_status div_shadowing">
|
||||
<div>
|
||||
<span style="font-size: 20px; font-weight: 700">{{ char_nums_obj.chargeTodayCount }}</span>
|
||||
<span style="font-size: 12px; text-align: center">{{ $t('message.homepage.chargeTodayCount') }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="font-size: 20px; font-weight: 700">{{ char_nums_obj.swapTodayElectricity }}</span>
|
||||
<span style="font-size: 12px; text-align: center">{{ $t('message.homepage.swapTodayElectricity') }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="font-size: 20px; font-weight: 700">{{ char_nums_obj.swapTodayCount }}</span>
|
||||
<span style="font-size: 12px; text-align: center">{{ $t('message.homepage.swapTodayCount') }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="font-size: 20px; font-weight: 700">{{ char_nums_obj.swapTotalCount }}</span>
|
||||
<span style="font-size: 12px; text-align: center">{{ $t('message.homepage.swapTotalCount') }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="font-size: 20px; font-weight: 700">{{ char_nums_obj.swapMonthElectricity }}</span>
|
||||
<span style="font-size: 12px; text-align: center">{{ $t('message.homepage.swapMonthElectricity') }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="font-size: 20px; font-weight: 700">{{ char_nums_obj.chargeTotalCount }}</span>
|
||||
<span style="font-size: 12px; text-align: center">{{ $t('message.homepage.chargeTotalCount') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="electricity_imgs">
|
||||
<div class="bg_imgs">
|
||||
<!-- <img src="../../../assets/imgs/9.png" class="position_imgs1" /> -->
|
||||
<!-- <div v-for="(item, index) in img_list" :key="index">
|
||||
<div :class="item.offectleft" style="position: absolute">
|
||||
<span class="posi_imgs_soc">soc: {{ item.soc }}%</span>
|
||||
<img :src="item.url" style="filter: grayscale(100%)" v-if="item.exists == 0" />
|
||||
<img :src="item.url_A" v-if="item.exists == 1 && item.chargeStatus == 0" />
|
||||
<img :src="item.url_A" v-if="item.exists == 1 && item.chargeStatus == 2" />
|
||||
<img :src="item.url_A" v-if="item.exists == 1 && item.chargeStatus == 3" />
|
||||
<img :src="item.url_A" v-if="item.exists == 1 && item.chargeStatus == 4" />
|
||||
<img :src="item.url" v-if="item.exists == 1 && item.chargeStatus == 1" />
|
||||
</div> -->
|
||||
<!-- <div
|
||||
:class="item.offectleft"
|
||||
:style="{
|
||||
'background-image': item.url,
|
||||
width: '85px',
|
||||
height: '70px',
|
||||
}"
|
||||
></div> -->
|
||||
<!-- </div> -->
|
||||
<!-- <el-popover title="电池数据" width="50" v-for="(item, index) in img_list" :key="index" :visible="vistrue" :placement="index > 3 ? 'bottom' : 'top'">
|
||||
<div class="popover_in">
|
||||
<div style="flex: 1">
|
||||
<div class="item_pop">
|
||||
<span>电池状态:</span>
|
||||
<el-tag v-if="item.chargeStatus == 0" type="info">未知</el-tag>
|
||||
<el-tag v-else-if="item.chargeStatus == 1" type="success">正在充电</el-tag>
|
||||
<el-tag v-else-if="item.chargeStatus == 2" type="info">无电池</el-tag>
|
||||
<el-tag v-else-if="item.chargeStatus == 3" type="danger">禁用</el-tag>
|
||||
<el-tag v-else-if="item.chargeStatus == 4" type="warning">充电停止</el-tag>
|
||||
<div id="contents" style="display: flex; flex-direction: column">
|
||||
<el-row :gutter="12" style="margin-left: 5px">
|
||||
<!-- 左边 -->
|
||||
<el-col :span="6" style="margin-top: 20px">
|
||||
<el-card style="background-color: #28353f; border: #28353f">
|
||||
<div class="xxxx">
|
||||
<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;">
|
||||
<span>
|
||||
<img :src="logoImage" alt="Logo" style="width: 150px; 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%" >
|
||||
<div>运输重卡换电站</div>
|
||||
<div style="display: flex; margin-top: 20px;margin-left: -15%;" >
|
||||
<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 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>
|
||||
</span>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<span>联系方式:</span>
|
||||
<span>{{ info.contactWay ? info.contactWay : '--'}}</span>
|
||||
</div>
|
||||
<div class="item_pop">
|
||||
<span>电池SOC:</span>
|
||||
<span>{{ item.soc }}%</span>
|
||||
<div style="margin-top: 20px">
|
||||
<span>营业时间:</span>
|
||||
<span>{{ info.operatetionetime ? info.operatetionstime : '--' }}——{{info.operatetionetime ? info.operatetionetime : '--'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #reference>
|
||||
<div class="swapper_order" style="height: 200px;">
|
||||
<div>
|
||||
<el-icon color="#fff"><TakeawayBox /></el-icon>
|
||||
<span class="mini_title">月度数据</span>
|
||||
</div>
|
||||
<div style="display: flex; margin-left: 20px">
|
||||
<el-icon color="#48b3d2" size="40px"><Connection /></el-icon>
|
||||
<div style="margin-left: 5px">
|
||||
<div>{{ monthData.swapCount ? monthData.swapCount : 0 }}</div>
|
||||
<div>换电总量/次</div>
|
||||
</div>
|
||||
<el-icon color="#48b3d2" size="40px" style="margin-left: 20px"><Guide /></el-icon>
|
||||
<div style="margin-left: 5px">
|
||||
<div>{{ monthData.chargeFrequency ? monthData.chargeFrequency : 0 }}</div>
|
||||
|
||||
</template>
|
||||
</el-popover> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 下 -->
|
||||
<div class="bottom_tips">
|
||||
<div class="div_shadowing">
|
||||
<img src="../../../assets/imgs/故障提示.png" />
|
||||
<span class="tips_font">{{ $t('message.homepage.error_Total') }}</span>
|
||||
<span class="tips_font" style="font-size: 25px; color: black">{{ error_Total }}</span>
|
||||
</div>
|
||||
<div class="left_icons div_shadowing">
|
||||
<div>
|
||||
<img src="../../../assets/imgs/电池总数.png" />
|
||||
<div class="flex_public">
|
||||
<span class="tips_font"> {{ $t('message.homepage.btyTotalCount') }} </span>
|
||||
<span class="tips_font" style="font-size: 25px; color: black">{{ batter_status.btyTotalCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../../assets/imgs/满电数量.png" />
|
||||
<div class="flex_public">
|
||||
<span class="tips_font"> {{ $t('message.homepage.canSwapCount') }} </span>
|
||||
<span class="tips_font" style="font-size: 25px; color: black">{{ batter_status.canSwapCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../../assets/imgs/充电中.png" />
|
||||
<div class="flex_public">
|
||||
<span class="tips_font"> {{ $t('message.homepage.chargingCount') }} </span>
|
||||
<span class="tips_font" style="font-size: 25px; color: black">{{ batter_status.chargingCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<img src="../../../assets/imgs/故障电池.png" />
|
||||
<div class="flex_public">
|
||||
<span class="tips_font">故障电池</span>
|
||||
<span class="tips_font" style="font-size: 25px; color: black">{{ batter_status.f_fault_batt_count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../../../assets/imgs/电池维护中.png" />
|
||||
<div class="flex_public">
|
||||
<span class="tips_font">维护中电池</span>
|
||||
<span class="tips_font" style="font-size: 25px; color: black">{{ batter_status.f_bty_other_count }}</span>
|
||||
<div>充电总量/次</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-left: 20px">
|
||||
<el-icon color="#48b3d2" size="40px"><Van /></el-icon>
|
||||
<div style="margin-left: 5px">
|
||||
<div>{{ monthData.vehicleCount ? monthData.vehicleCount : 0 }}</div>
|
||||
<div>服务车辆/辆</div>
|
||||
</div>
|
||||
<el-icon color="#48b3d2" size="40px" style="margin-left: 20px"><Files /></el-icon>
|
||||
<div style="margin-left: 5px">
|
||||
<div>{{ monthData.chargeCount ? monthData.chargeCount : 0 }}</div>
|
||||
<div>充电总量kWH</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swapper_order1" >
|
||||
<div>
|
||||
<el-icon color="#fff"><Calendar /></el-icon>
|
||||
<span class="mini_title">今日数据</span>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div style="display: flex">
|
||||
<el-icon color="#48b3d2" size="40px"><Connection /></el-icon>
|
||||
<div>
|
||||
<div>{{monthData.daySwapCount ? monthData.daySwapCount : 0}}</div>
|
||||
|
||||
<div>换电总量/次</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<el-icon color="#48b3d2" size="40px"><Guide /></el-icon>
|
||||
<div>
|
||||
<div>{{ monthData.dayChargeCount ? monthData.dayChargeCount : 0 }}</div>
|
||||
<div>换电总量kwh</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="swapper_order">
|
||||
<div>
|
||||
<el-icon color="#fff"><OfficeBuilding /></el-icon>
|
||||
<span class="mini_title">系统通讯</span>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div style="width: 15px; height: 15px; border-radius: 50%; background-color: aqua"></div>
|
||||
<div>换电机构</div>
|
||||
<div style="width: 15px; height: 15px; border-radius: 50%; background-color: aqua"></div>
|
||||
<div>充电桩主站</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<!-- 右边 -->
|
||||
<el-col :span="18">
|
||||
<el-row :gutter="24" style="margin-top: 20px">
|
||||
<el-col :span="24">
|
||||
<el-card style="background-color: #28353f; border: #28353f">
|
||||
<div style="height: 100%">
|
||||
<el-icon color="#fff"><DataLine /></el-icon>
|
||||
<span class="mini_title">月换电详情</span>
|
||||
|
||||
<myEcharts style="height: 250px" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="24" style="margin-top: 20px">
|
||||
<el-col :span="24">
|
||||
<el-card style="background-color: #28353f; border: #28353f">
|
||||
<div>
|
||||
<el-icon color="#fff"><House /></el-icon>
|
||||
<span class="mini_title">仓位信息</span>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<!-- <div> -->
|
||||
<div style="height: calc(100vh - 590px);">
|
||||
<div class="tops_title">
|
||||
<span scope="col" style="font-size: 13px">仓位</span>
|
||||
<span scope="col" style="font-size: 13px">充电桩编号</span>
|
||||
<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">充电总量/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>
|
||||
</div>
|
||||
|
||||
<div class="eq_box_table">
|
||||
<!-- <div class="left_titles">
|
||||
<div style="height: 12.5%">01</div>
|
||||
<div style="height: 12.5%">02</div>
|
||||
<div style="height: 12.5%">03</div>
|
||||
<div style="height: 12.5%">04</div>
|
||||
<div style="height: 12.5%">05</div>
|
||||
<div style="height: 12.5%">06</div>
|
||||
<div style="height: 12.5%">07</div>
|
||||
<div style="height: 12.5%">08</div>
|
||||
</div> -->
|
||||
<div class="main_content">
|
||||
<div v-for="index in zzlist.dataList" :key="index" class="item_box">
|
||||
<span>{{ index.no }}</span>
|
||||
<span>{{ index.chargerNo }}</span>
|
||||
<span>{{ index.chargeConnectFlag }}</span>
|
||||
<span>{{ index.chargeStatus }} </span>
|
||||
<span>{{ index.chargingTime }} </span>
|
||||
<span>{{ index.onceElectricCharge }} </span>
|
||||
<span>{{ index.batteryNo }} </span>
|
||||
<span>{{ index.soc }} </span>
|
||||
<span>{{ index.canSwapFlag }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import logoImage from '/@/assets/img/nxylogomini.png'
|
||||
import { getAPI } from '/@/utils/axios-utils';
|
||||
import { SysMonitorApi, SysChargeMonitorApi, SysEquipAlarmLogApi } from '/@/api-services/api';
|
||||
import home_imgs from '/@/assets/imgs/A1.png';
|
||||
import home_imgs_A1 from '/@/assets/imgs/9.png';
|
||||
import home_imgs_2 from '/@/assets/imgs/3.png';
|
||||
import home_imgs_3 from '/@/assets/imgs/5.png';
|
||||
import home_imgs_4 from '/@/assets/imgs/7.png';
|
||||
import home_imgs_5 from '/@/assets/imgs/2.png';
|
||||
import home_imgs_6 from '/@/assets/imgs/4.png';
|
||||
import home_imgs_7 from '/@/assets/imgs/6.png';
|
||||
import home_imgs_8 from '/@/assets/imgs/8.png';
|
||||
import home_imgs_A2 from '/@/assets/imgs/A3_black.png';
|
||||
import home_imgs_A3 from '/@/assets/imgs/A5_black.png';
|
||||
import home_imgs_A4 from '/@/assets/imgs/A7_black.png';
|
||||
import home_imgs_A5 from '/@/assets/imgs/A2_black.png';
|
||||
import home_imgs_A6 from '/@/assets/imgs/A4_black.png';
|
||||
import home_imgs_A7 from '/@/assets/imgs/A6_black.png';
|
||||
import home_imgs_A8 from '/@/assets/imgs/A8_black.png';
|
||||
import { SysHomePageApi } from '/@/api-services/api';
|
||||
import myEcharts from './component/myEcharts.vue';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
// 站点信息
|
||||
import { SysSideBasisApi } from '/@/api-services/api';
|
||||
const { t } = useI18n();
|
||||
|
||||
const bmsSwapSts = ref({
|
||||
stepName: '空闲',
|
||||
});
|
||||
const vistrue = ref(false);
|
||||
const char_nums_obj = ref({
|
||||
chargeTotalCount: 0,
|
||||
chargeTodayCount: 0,
|
||||
swapTotalCount: 0,
|
||||
swapTodayCount: 0,
|
||||
swapTodayElectricity: 0,
|
||||
swapMonthElectricity: 0,
|
||||
// const dataList = ref([
|
||||
// { name: 111111, number: '已连接', completeNumber1: '充电完成', completeNumber2: 23, completeNumber3: '10744.88', completeNumber4: '23456712', completeNumber5: '95', completeNumber6: '换电完成' },
|
||||
// { name: 111111, number: '已连接', completeNumber1: '充电完成', completeNumber2: 23, completeNumber3: '10744.88', completeNumber4: '23456712', completeNumber5: '95', completeNumber6: '换电完成' },
|
||||
// { name: 111111, number: '已连接', completeNumber1: '充电完成', completeNumber2: 23, completeNumber3: '10744.88', completeNumber4: '23456712', completeNumber5: '95', completeNumber6: '换电完成' },
|
||||
// { name: 111111, number: '已连接', completeNumber1: '充电完成', completeNumber2: 23, completeNumber3: '10744.88', completeNumber4: '23456712', completeNumber5: '95', completeNumber6: '换电完成' },
|
||||
// { name: 111111, number: '已连接', completeNumber1: '充电完成', completeNumber2: 23, completeNumber3: '10744.88', completeNumber4: '23456712', completeNumber5: '95', completeNumber6: '换电完成' },
|
||||
// { name: 111111, number: '已连接', completeNumber1: '充电完成', completeNumber2: 23, completeNumber3: '10744.88', completeNumber4: '23456712', completeNumber5: '95', completeNumber6: '换电完成' },
|
||||
// { name: 111111, number: '已连接', completeNumber1: '充电完成', completeNumber2: 23, completeNumber3: '10744.88', completeNumber4: '23456712', completeNumber5: '95', completeNumber6: '换电完成' },
|
||||
// { name: 111111, number: '已连接', completeNumber1: '充电完成', completeNumber2: 23, completeNumber3: '10744.88', completeNumber4: '23456712', completeNumber5: '95', completeNumber6: '换电完成' },
|
||||
// ]);
|
||||
|
||||
onMounted(async () => {
|
||||
handleQuery();
|
||||
getchargerInfo();
|
||||
getchargerList();
|
||||
// setTimeout(() => {
|
||||
|
||||
// vistrue.value = true;
|
||||
// }, 1000);
|
||||
});
|
||||
const img_list = ref([
|
||||
{
|
||||
soc: 20,
|
||||
exists: 0,
|
||||
offectleft: 'position_imgs1',
|
||||
offecttop: '0',
|
||||
chargeStatus: 0,
|
||||
url: home_imgs,
|
||||
url_A: home_imgs_A1,
|
||||
},
|
||||
{
|
||||
soc: 20,
|
||||
exists: 0,
|
||||
offectleft: 'position_imgs2',
|
||||
offecttop: '0',
|
||||
chargeStatus: 0,
|
||||
url: home_imgs_2,
|
||||
url_A: home_imgs_A2,
|
||||
},
|
||||
{
|
||||
soc: 20,
|
||||
exists: 0,
|
||||
offectleft: 'position_imgs3',
|
||||
offecttop: '0',
|
||||
chargeStatus: 0,
|
||||
url: home_imgs_3,
|
||||
url_A: home_imgs_A3,
|
||||
},
|
||||
{
|
||||
soc: 20,
|
||||
exists: 0,
|
||||
offectleft: 'position_imgs4',
|
||||
offecttop: '0',
|
||||
chargeStatus: 0,
|
||||
url: home_imgs_4,
|
||||
url_A: home_imgs_A4,
|
||||
},
|
||||
{
|
||||
soc: 20,
|
||||
exists: 0,
|
||||
offectleft: 'position_imgs5',
|
||||
offecttop: '860px',
|
||||
chargeStatus: 0,
|
||||
url: home_imgs_5,
|
||||
url_A: home_imgs_A5,
|
||||
},
|
||||
{
|
||||
soc: 20,
|
||||
exists: 0,
|
||||
offectleft: 'position_imgs6',
|
||||
offecttop: '765px',
|
||||
chargeStatus: 0,
|
||||
url: home_imgs_6,
|
||||
url_A: home_imgs_A6,
|
||||
},
|
||||
{
|
||||
soc: 20,
|
||||
exists: 0,
|
||||
offectleft: 'position_imgs7',
|
||||
offecttop: '669px',
|
||||
chargeStatus: 0,
|
||||
url: home_imgs_7,
|
||||
url_A: home_imgs_A7,
|
||||
},
|
||||
{
|
||||
soc: 20,
|
||||
exists: 0,
|
||||
offectleft: 'position_imgs8',
|
||||
offecttop: '0',
|
||||
chargeStatus: 0,
|
||||
url: home_imgs_8,
|
||||
url_A: home_imgs_A8,
|
||||
},
|
||||
]);
|
||||
const tableData_center = ref([]);
|
||||
const batter_status = ref({
|
||||
btyTotalCount: 0,
|
||||
canSwapCount: 0,
|
||||
chargingCount: 0,
|
||||
const zzlist = reactive({
|
||||
dataList:[],
|
||||
}
|
||||
|
||||
)
|
||||
const imgs_url = ref();
|
||||
// 站点信息
|
||||
const info = ref({
|
||||
// stationNo: null,
|
||||
// stationName: null,
|
||||
// stationType: null,
|
||||
// stationSn: null,
|
||||
// stationSn: null,
|
||||
// stationLocation: null,
|
||||
// longitude: null,
|
||||
// latitude: null,
|
||||
// areaName: null,
|
||||
// areaCode: null,
|
||||
// operatetionstime: null,
|
||||
|
||||
// sevstatus: null,
|
||||
// stationStatus: null,
|
||||
// launchTime: null,
|
||||
// principal: null,
|
||||
contactWay: null,
|
||||
operatetionstime:null,
|
||||
operatetionetime: null,
|
||||
cover:'/20240701/146.png'
|
||||
// stationSftVer: null,
|
||||
// socialCreditCode: null,
|
||||
// supplierCode: null,
|
||||
// stationVersion: null,
|
||||
// hardwareVersion: null,
|
||||
// stationCompany: null,
|
||||
});
|
||||
const error_Total = ref(0);
|
||||
onMounted(async () => {
|
||||
getswapstatus();
|
||||
getbattery_data();
|
||||
handle_char_count();
|
||||
handle_BatteryStatusInfo();
|
||||
handleQuery_error();
|
||||
setTimeout(() => {
|
||||
vistrue.value = true;
|
||||
}, 1000);
|
||||
const monthData = reactive({
|
||||
swapCount:null,
|
||||
chargeFrequency:null,
|
||||
vehicleCount:null,
|
||||
chargeCount:null,
|
||||
daySwapCount:null,
|
||||
dayChargeCount:null,
|
||||
});
|
||||
const handle_BatteryStatusInfo = async () => {
|
||||
const response = await getAPI(SysChargeMonitorApi).apiBatteryStatusInfoGet();
|
||||
batter_status.value = response.data?.data;
|
||||
};
|
||||
// const = reactive([]);
|
||||
|
||||
// 查询操作
|
||||
const handleQuery_error = async () => {
|
||||
let comm = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
var res = await getAPI(SysEquipAlarmLogApi).apiQueryEquipAlarmPagePost(comm);
|
||||
// console.log(res, '故障');
|
||||
error_Total.value = res.data.data?.toTal;
|
||||
};
|
||||
const getbinlist = ref([
|
||||
|
||||
]);
|
||||
|
||||
// 站点信息
|
||||
const handleQuery = async () => {
|
||||
const response = await getAPI(SysSideBasisApi).apiStationBaseInfoPost();
|
||||
console.log(response, 'response');
|
||||
info.value = response.data?.data;
|
||||
imgs_url.value = response.data?.data.cover;
|
||||
|
||||
const handle_char_count = async () => {
|
||||
const response = await getAPI(SysChargeMonitorApi).apiGetSwapAndChargingCountData();
|
||||
char_nums_obj.value = response.data.data;
|
||||
};
|
||||
|
||||
// 获取数据
|
||||
const getswapstatus = async () => {
|
||||
var response = await getAPI(SysMonitorApi).apiGetSwapMonitorDataPost();
|
||||
if (response.data.data.stateInfo.length > 0) {
|
||||
bmsSwapSts.value = response.data.data.stateInfo[response.data.data.stateInfo.length - 1];
|
||||
}
|
||||
// bmsSwapSts.value = response.data.data?.tboxInfo.bmsSwapSts;
|
||||
// 获取月/日
|
||||
const getchargerInfo = async () => {
|
||||
var res = await getAPI(SysHomePageApi).apiGetChargerInfoListGET();
|
||||
|
||||
// console.log(res, 'res');
|
||||
|
||||
monthData.swapCount = res.data.data.swapCount
|
||||
monthData.chargeFrequency = res.data.data.chargeFrequency
|
||||
monthData.vehicleCount = res.data.data.vehicleCount
|
||||
monthData.chargeCount = res.data.data.chargeCount
|
||||
monthData.daySwapCount = res.data.data.daySwapCount
|
||||
monthData.dayChargeCount = res.data.data.dayChargeCount
|
||||
|
||||
// monthData.push(res.data.data)
|
||||
};
|
||||
const getbattery_data = async () => {
|
||||
var response = await getAPI(SysChargeMonitorApi).apiGetChargMonitorChargBinData();
|
||||
// img_list.value = response.data.data;
|
||||
let str = response.data.data;
|
||||
// console.log(str,'str');
|
||||
img_list.value[0].soc = str[0].soc;
|
||||
img_list.value[0].exists = str[0].exists;
|
||||
img_list.value[0].chargeStatus = str[0].chargeStatus;
|
||||
img_list.value[1].soc = str[2].soc;
|
||||
img_list.value[1].exists = str[2].exists;
|
||||
img_list.value[1].chargeStatus = str[2].chargeStatus;
|
||||
img_list.value[2].soc = str[4].soc;
|
||||
img_list.value[2].exists = str[4].exists;
|
||||
img_list.value[2].chargeStatus = str[4].chargeStatus;
|
||||
img_list.value[3].soc = str[6].soc;
|
||||
img_list.value[3].exists = str[6].exists;
|
||||
img_list.value[3].chargeStatus = str[6].chargeStatus;
|
||||
img_list.value[4].soc = str[1].soc;
|
||||
img_list.value[4].exists = str[1].exists;
|
||||
img_list.value[4].chargeStatus = str[1].chargeStatus;
|
||||
img_list.value[5].soc = str[3].soc;
|
||||
img_list.value[5].exists = str[3].exists;
|
||||
img_list.value[5].chargeStatus = str[3].chargeStatus;
|
||||
img_list.value[6].soc = str[5].soc;
|
||||
img_list.value[6].exists = str[5].exists;
|
||||
img_list.value[6].chargeStatus = str[5].chargeStatus;
|
||||
img_list.value[7].soc = str[7].soc;
|
||||
img_list.value[7].exists = str[7].exists;
|
||||
img_list.value[7].chargeStatus = str[7].chargeStatus;
|
||||
// 仓列表
|
||||
const getchargerList = async () => {
|
||||
var response = await getAPI(SysHomePageApi).apiGetChargMonitorChargBinData();
|
||||
let alllist = response.data?.data;
|
||||
zzlist.dataList = [...alllist]
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url(./index.less);
|
||||
@import url('./index.less');
|
||||
:deep(.el-dialog__title) {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-loading-spinner) {
|
||||
top: 30%;
|
||||
}
|
||||
.el-card {
|
||||
margin-left: 5px;
|
||||
}
|
||||
:deep(.my-label) {
|
||||
background: var(--el-color-success-light-9) !important;
|
||||
}
|
||||
:deep(.my-content) {
|
||||
background: var(--el-color-danger-light-9);
|
||||
}
|
||||
:deep(.el-step__icon-inner) {
|
||||
font-size: 19px !important;
|
||||
}
|
||||
// zz
|
||||
.mini_title {
|
||||
color: #fff;
|
||||
font-size: large;
|
||||
margin-left: 10px;
|
||||
}
|
||||
//
|
||||
.swapper_order {
|
||||
height: 250px;
|
||||
margin-top: 30px;
|
||||
// height: calc(100% - 45px);
|
||||
color: #fff;
|
||||
// display: flex;
|
||||
flex-direction: column;
|
||||
> div {
|
||||
margin-top: 30px;
|
||||
> div {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
// >div {
|
||||
// width: 100%;
|
||||
// flex: 1;
|
||||
// margin-top: 10px;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// justify-content: space-evenly;
|
||||
// align-items: flex-start;
|
||||
|
||||
// span:last-child {
|
||||
// color: #fff;
|
||||
// font-size: 14px;
|
||||
// font-weight: 600;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.swapper_order1 {
|
||||
height: calc(100vh - 755px);
|
||||
margin-top: 30px;
|
||||
|
||||
color: #fff;
|
||||
// display: flex;
|
||||
flex-direction: column;
|
||||
> div {
|
||||
margin-top: 30px;
|
||||
> div {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
//
|
||||
.tops_title {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 35px;
|
||||
border: 1px solid #fff;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
// flex: 1;
|
||||
width: 11.11%;
|
||||
text-align: center;
|
||||
// border: 1px solid #fff;
|
||||
// border-top: 1px solid #fff;
|
||||
border-right: 1px solid #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.eq_box_table {
|
||||
height: calc(100% - 35px);
|
||||
display: flex;
|
||||
color: #fff;
|
||||
.left_titles {
|
||||
width: 11.2%;
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// border-left: 1px solid #fff;
|
||||
// border-right: 1px solid #fff;
|
||||
// box-sizing: border-box;
|
||||
> div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid #fff;
|
||||
border-top: unset;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.main_content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> div {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
height: 11.11%;
|
||||
border: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border-left: 1px solid #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
span:last-child {
|
||||
border-right: 1px solid #fff;
|
||||
}
|
||||
span:first-child {
|
||||
border-left: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue