eaXing
/
eaxing_back_dark_web
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

9.20 首页

Browse Source
main
zz 1 month ago
parent e6b7571e14
commit 213534dd7f
7 changed files with 2475 additions and 297 deletions
Show Stats Download Patch File Download Diff File

2
public/config.js
Unescape View File

@ -4,5 +4,5 @@ window.__env__ = {
"VITE_OPEN_CDN": "false",
"VITE_PUBLIC_PATH": "",
"VITE_SM_PUBLIC_KEY": "0484C7466D950E120E5ECE5DD85D0C90EAA85081A3A2BD7C57AE6DC822EFCCBD66620C67B0103FC8DD280E36C3B282977B722AAEC3C56518EDCEBAFB72C5A05312",
"VITE_API_URL": "http://192.168.2.7:5036"
"VITE_API_URL": "http://192.168.2.7:5034"
}

1
src/api-services/api.ts
Unescape View File

@ -74,4 +74,5 @@ export * from './apis/sys-battery-log-api';
export * from './apis/sys-equip-alarm-log-api';
export * from './apis/sys-equipinfo-api';
export * from './apis/sys-bty-mode-info-api';
export * from './apis/sys-homepage-api';

1727
src/api-services/apis/sys-homepage-api.ts
View File

File diff suppressed because it is too large Load Diff

BIN
src/assets/img/nxylogomini.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

319
src/views/home/homepage/component/myEcharts.vue
Unescape View File

@ -0,0 +1,319 @@
<template>
<div class="sys-tenant-container">
<!-- <el-card class="full-table" shadow="hover" style="margin-top: 5px"> -->
<div id="charts_content_one" ref="homeLineRef"></div>
<!-- </el-card> -->
</div>
</template>
<script lang="ts" setup name="sysTenant">
import { onMounted, reactive, ref, markRaw, nextTick, onActivated, watch } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { SysHomePageApi } from '/@/api-services/api';
import { getAPI } from '/@/utils/axios-utils';
import { SysEmeterTotalEnergyApi } from '/@/api-services/api';
import { storeToRefs } from 'pinia';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import * as echarts from 'echarts';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const storesTagsViewRoutes = useTagsViewRoutes();
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
const tableRef = ref<RefType>();
const state = reactive({
loading: false,
loading_Eme: false,
selectlist: [] as EmptyObjectType[],
tenantData: [] as any,
tenantData_Eme: [] as any,
queryParams: {
code: undefined,
},
tableParams: {
pageNum: 1,
pageSize: 10,
},
total: 0 as any,
editTenantTitle: '',
seven_x_data: [] as any,
seven_y_data_emeterEnergy: [] as any,
seven_y_data_emeterEnergy_EQM: [] as any,
});
const homeLineRef = ref();
onMounted(async () => {
handleQuery();
getswapstatus();
initEchartsResize();
});
// 由于页面缓存原因，keep-alive
onActivated(() => {
initEchartsResizeFun();
});
watch(
() => isTagsViewCurrenFull,
() => {
initEchartsResizeFun();
}
);
// 批量设置 echarts resize
const initEchartsResize = () => {
window.addEventListener('resize', initEchartsResizeFun);
};
// 批量设置 echarts resize
const initEchartsResizeFun = () => {
nextTick(() => {
for (let i = 0; i < state_chart.myCharts.length; i++) {
setTimeout(() => {
state_chart.myCharts[i].resize();
}, i * 1000);
}
});
};
const lists = reactive({
daylist: [] as any,
countlist: [] as any,
chargeCountlist: [] as any,
})
// 获取数据
const getswapstatus = async () => {
var response = await getAPI(SysHomePageApi).apiGetHomePagelinePost();
let alllist = response.data?.data || [];
// console.log(alllist.day,"xxxxxxxx")
// if (response.data.data.length > 0) {
let day =[];
let count = [];
let chargeCount = []
for (var i = 0; i < alllist.length; i++) {
day.push(alllist[i].day)
count.push(alllist[i].count)
chargeCount.push(alllist[i].chargeCount)
}
lists.daylist = [...day]
lists.countlist = [...count]
lists.chargeCountlist= [...chargeCount]
nextTick(() => {
initLineChart();
});
};
// 查询操作
const handleQuery = async () => {
state.loading_Eme = true;
var res = await getAPI(SysEmeterTotalEnergyApi).apiTEgEmeterTotalEnergyValuePageGet();
// console.log(res,"res")
state.loading_Eme = false;
let str_emeterEnergy = res.data.data?.emeterEnergy || [];
let str_emeterEnergy_EQM = res.data.data?.emeterEnergyChange || [];
state.tenantData_Eme = [...str_emeterEnergy, ...str_emeterEnergy_EQM];
let x_data: any[] = [];
let emeterEnergy_y_data: any[] = [];
let emeterEnergy_y_data_EQN: any[] = [];
if (str_emeterEnergy.length > str_emeterEnergy_EQM.length) {
for (var i = 0; i < str_emeterEnergy.length; i++) {
// let uploadTime = new RegExp('00:00:00');
x_data.push(str_emeterEnergy[i].code);
emeterEnergy_y_data.push(str_emeterEnergy[i].value);
for (var j = 0; j < str_emeterEnergy_EQM.length; j++) {
if (str_emeterEnergy[i].code == str_emeterEnergy_EQM[j].code) {
emeterEnergy_y_data_EQN.push(str_emeterEnergy_EQM[j].value);
} else {
emeterEnergy_y_data_EQN.push(0);
}
}
}
} else {
foofat: for (var i = 0; i < str_emeterEnergy_EQM.length; i++) {
// let uploadTime = new RegExp('00:00:00');
x_data.push(str_emeterEnergy_EQM[i].code);
emeterEnergy_y_data_EQN.push(str_emeterEnergy_EQM[i].value);
foo: for (var j = 0; j < str_emeterEnergy.length; j++) {
if (str_emeterEnergy_EQM[i].code == str_emeterEnergy[j].code) {
// console.log(str_emeterEnergy_EQM[i].code, 'str_emeterEnergy_EQM[i].code');
// console.log(str_emeterEnergy[j].code, 'str_emeterEnergy[j].code');
// console.log(str_emeterEnergy[j].value, 'str_emeterEnergy[j].value');
emeterEnergy_y_data.push(str_emeterEnergy[j].value);
// return;
break foo;
}
}
}
}
state.seven_x_data = x_data;
state.seven_y_data_emeterEnergy = emeterEnergy_y_data;
state.seven_y_data_emeterEnergy_EQM = emeterEnergy_y_data_EQN;
nextTick(() => {
initLineChart();
});
};
const state_chart = reactive({
homeChartOne: null as any,
homeChartTwo: null,
myCharts: [] as any,
theme: '',
});
// 折线图
const initLineChart = () => {
state_chart.homeChartOne = markRaw(echarts.init(homeLineRef.value, state_chart.theme));
const option = {
backgroundColor: '',
grid: { top: 70, right: 60, bottom: 30, left: 40 },
tooltip: {
trigger: 'axis',
},
legend: {
data: [ '换电数量', '充电电量'],
right: 0,
textStyle: {
color: "#fff"
}
},
// legend: { data: [ '直流', '交流'],
// right: 0 },
xAxis: {
// data:[1,2,3,4,5,6,7,8],
data: lists.daylist,
// data: state.seven_x_data,
axisLine: { //这是x轴文字颜色
lineStyle: {
color: "#fff",
}
}
},
yAxis: [
{
type: 'value',
name: '换电数量',
axisLine: { //这是x轴文字颜色
lineStyle: {
color: "#fff",
},
axisLabel: {
formatter: '{value} 次'
}
},
splitLine: { show: true, lineStyle: { type: 'dashed', color: '#7bc9dc' } },
},
{
type: 'value',
name: '充电电量',
axisLine: { //这是x轴文字颜色
lineStyle: {
color: "#fff",
},
axisLabel: {
formatter: '{value} kwh'
}
},
},
],
series: [
{
name:'换电数量',
// name: "直流",
type: 'bar',
symbolSize: 6,
symbol: 'circle',
smooth: true,
// data: [1,2,3,4,5,6,7,8],
// data: state.seven_y_data_emeterEnergy,
data: lists.countlist,
lineStyle: { color: '#00ffff' },
itemStyle: { color: '#00ffff', borderColor: '#00ffff' },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#00ffffb3' },
{ offset: 1, color: '#00ffff03' },
]),
},
label: {
show: true,
position: 'top',
},
},
{
name: '充电电量',
// name: '交流',
type: 'line',
symbolSize: 6,
symbol: 'circle',
smooth: true,
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value:any) {
return value + ' kwh';
}
},
// data: [1,2,3,4,5,6,7,8,],
data: lists.chargeCountlist,
// data: state.seven_y_data_emeterEnergy_EQM,
lineStyle: { color: '#f4eea1' },
itemStyle: { color: '#f4eea1', borderColor: '#f4eea1' },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#f4eea1b3' },
{ offset: 1, color: '#f4eea103' },
]),
},
emphasis: {
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{ offset: 0, color: '#9E87FF' },
{ offset: 0.4, color: '#9E87FF' },
{ offset: 0.5, color: '#fff' },
{ offset: 0.7, color: '#fff' },
{ offset: 0.8, color: '#fff' },
{ offset: 1, color: '#fff' },
],
},
borderColor: '#9E87FF',
borderWidth: 2,
},
},
label: {
show: true,
position: 'top',
},
},
],
};
state_chart.homeChartOne.setOption(option);
state_chart.myCharts.push(state_chart.homeChartOne);
};
</script>
<style lang="less" scoped>
#charts_content_one {
width: 100%;
height: 100%;
}
</style>

713
src/views/home/homepage/index.vue
Unescape View File

@ -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>
</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 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>
<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 handle_char_count = async () => {
const response = await getAPI(SysChargeMonitorApi).apiGetSwapAndChargingCountData();
char_nums_obj.value = response.data.data;
// 站点信息
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 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);
</style>
@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>

10
src/views/home/swapping/index.less
Unescape View File

@ -4,7 +4,13 @@
box-sizing: border-box;
padding: 10px;
}
.contents{
height: calc(100vh - 90px);
// padding: 10px 0;
box-sizing: border-box;
padding: 10px;
color: white;
}
.title_header {
background: #28353f;
height: 120px;
@ -74,7 +80,7 @@
.bot_maininfo {
height: calc(100% - 340px);
height: 100%;
margin-top: 10px;
.el-col {

Write Preview
Loading…
Cancel
Save