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

9.20 首页

Browse Source
main
zz 2 months 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_OPEN_CDN": "false",
"VITE_PUBLIC_PATH": "", "VITE_PUBLIC_PATH": "",
"VITE_SM_PUBLIC_KEY": "0484C7466D950E120E5ECE5DD85D0C90EAA85081A3A2BD7C57AE6DC822EFCCBD66620C67B0103FC8DD280E36C3B282977B722AAEC3C56518EDCEBAFB72C5A05312", "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-equip-alarm-log-api';
export * from './apis/sys-equipinfo-api'; export * from './apis/sys-equipinfo-api';
export * from './apis/sys-bty-mode-info-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> <template>
<div id="content" style="height: calc(100vh - 150px); display: flex; flex-direction: column"> <div id="contents" style="display: flex; flex-direction: column">
<!-- 上下 --> <el-row :gutter="12" style="margin-left: 5px">
<div class="tops_content"> <!-- 左边 -->
<div class="electricity_status"> <el-col :span="6" style="margin-top: 20px">
<div class="div_shadowing"> <el-card style="background-color: #28353f; border: #28353f">
<span>{{ $t('message.homepage.stepName') }}:</span> <div class="xxxx">
<span class="block_spans"> {{ bmsSwapSts.stepName }} </span> <div class="swapper_order">
</div> <div>
<div class="bottom_status div_shadowing"> <el-icon color="#fff"><House /></el-icon>
<div> <span class="mini_title">站点信息</span>
<span style="font-size: 20px; font-weight: 700">{{ char_nums_obj.chargeTodayCount }}</span> </div>
<span style="font-size: 12px; text-align: center">{{ $t('message.homepage.chargeTodayCount') }}</span> <div style="color: #fff">
</div> <div class="left_titzz" style="display: flex;">
<div> <span>
<span style="font-size: 20px; font-weight: 700">{{ char_nums_obj.swapTodayElectricity }}</span> <img :src="logoImage" alt="Logo" style="width: 150px; height: 80px; margin-top: 10px" />
<span style="font-size: 12px; text-align: center">{{ $t('message.homepage.swapTodayElectricity') }}</span>
</div> <!-- <el-image :src="imgs_url" style="width: 150px; height: 80px; margin-top: 10px" :alt="$t('message.stop.swapStationImage')" /> -->
<div> </span>
<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> <span style="font-family: UnidreamLED;margin-left: 10%;margin-top: 6%" >
</div> <div>运输重卡换电站</div>
<div> <div style="display: flex; margin-top: 20px;margin-left: -15%;" >
<span style="font-size: 20px; font-weight: 700">{{ char_nums_obj.swapTotalCount }}</span> <div v-if="info.stationStatus == 1" style="width: 15px; height: 15px; border-radius: 50%; background-color: aqua"></div>
<span style="font-size: 12px; text-align: center">{{ $t('message.homepage.swapTotalCount') }}</span> <div v-else style="width: 15px; height: 15px; border-radius: 50%; background-color: gray"></div>
</div> <div style="margin-left: 5%;">正常</div>
<div> <div style="margin-left: 10%;">
<span style="font-size: 20px; font-weight: 700">{{ char_nums_obj.swapMonthElectricity }}</span> <div v-if="info.stationStatus == 2 || info.stationStatus == 3 || info.stationStatus == 4" style="width: 15px; height: 15px; border-radius: 50%; background-color: aqua"></div>
<span style="font-size: 12px; text-align: center">{{ $t('message.homepage.swapMonthElectricity') }}</span> <div v-else style="width: 15px; height: 15px; border-radius: 50%; background-color: gray"></div>
</div> </div>
<div>
<span style="font-size: 20px; font-weight: 700">{{ char_nums_obj.chargeTotalCount }}</span> <div style="margin-left: 5%;">停运</div>
<span style="font-size: 12px; text-align: center">{{ $t('message.homepage.chargeTotalCount') }}</span> </div>
</div> </span>
</div> </div>
</div> <div style="margin-top: 20px">
<div class="electricity_imgs"> <span>联系方式:</span>
<div class="bg_imgs"> <span>{{ info.contactWay ? info.contactWay : '--'}}</span>
<!-- <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> </div>
<div class="item_pop"> <div style="margin-top: 20px">
<span>电池SOC:</span> <span>营业时间:</span>
<span>{{ item.soc }}%</span> <span>{{ info.operatetionetime ? info.operatetionstime : '--' }}——{{info.operatetionetime ? info.operatetionetime : '--'}}</span>
</div> </div>
</div> </div>
</div> </div>
<template #reference> <div class="swapper_order" style="height: 200px;">
<div>
</template> <el-icon color="#fff"><TakeawayBox /></el-icon>
</el-popover> --> <span class="mini_title">月度数据</span>
</div> </div>
</div> <div style="display: flex; margin-left: 20px">
</div> <el-icon color="#48b3d2" size="40px"><Connection /></el-icon>
<!-- 下 --> <div style="margin-left: 5px">
<div class="bottom_tips"> <div>{{ monthData.swapCount ? monthData.swapCount : 0 }}</div>
<div class="div_shadowing"> <div>换电总量/次</div>
<img src="../../../assets/imgs/故障提示.png" /> </div>
<span class="tips_font">{{ $t('message.homepage.error_Total') }}</span> <el-icon color="#48b3d2" size="40px" style="margin-left: 20px"><Guide /></el-icon>
<span class="tips_font" style="font-size: 25px; color: black">{{ error_Total }}</span> <div style="margin-left: 5px">
</div> <div>{{ monthData.chargeFrequency ? monthData.chargeFrequency : 0 }}</div>
<div class="left_icons div_shadowing">
<div> <div>充电总量/次</div>
<img src="../../../assets/imgs/电池总数.png" /> </div>
<div class="flex_public"> </div>
<span class="tips_font"> {{ $t('message.homepage.btyTotalCount') }} </span> <div style="display: flex; margin-left: 20px">
<span class="tips_font" style="font-size: 25px; color: black">{{ batter_status.btyTotalCount }}</span> <el-icon color="#48b3d2" size="40px"><Van /></el-icon>
</div> <div style="margin-left: 5px">
</div> <div>{{ monthData.vehicleCount ? monthData.vehicleCount : 0 }}</div>
<div> <div>服务车辆/辆</div>
<img src="../../../assets/imgs/满电数量.png" /> </div>
<div class="flex_public"> <el-icon color="#48b3d2" size="40px" style="margin-left: 20px"><Files /></el-icon>
<span class="tips_font"> {{ $t('message.homepage.canSwapCount') }} </span> <div style="margin-left: 5px">
<span class="tips_font" style="font-size: 25px; color: black">{{ batter_status.canSwapCount }}</span> <div>{{ monthData.chargeCount ? monthData.chargeCount : 0 }}</div>
</div> <div>充电总量kWH</div>
</div> </div>
<div> </div>
<img src="../../../assets/imgs/充电中.png" /> </div>
<div class="flex_public"> <div class="swapper_order1" >
<span class="tips_font"> {{ $t('message.homepage.chargingCount') }} </span> <div>
<span class="tips_font" style="font-size: 25px; color: black">{{ batter_status.chargingCount }}</span> <el-icon color="#fff"><Calendar /></el-icon>
</div> <span class="mini_title">今日数据</span>
</div> </div>
<!-- <div> <div style="display: flex">
<img src="../../../assets/imgs/故障电池.png" /> <div style="display: flex">
<div class="flex_public"> <el-icon color="#48b3d2" size="40px"><Connection /></el-icon>
<span class="tips_font">故障电池</span> <div>
<span class="tips_font" style="font-size: 25px; color: black">{{ batter_status.f_fault_batt_count }}</span> <div>{{monthData.daySwapCount ? monthData.daySwapCount : 0}}</div>
</div>
</div> <div>换电总量/次</div>
<div> </div>
<img src="../../../assets/imgs/电池维护中.png" /> </div>
<div class="flex_public"> <div style="display: flex">
<span class="tips_font">维护中电池</span> <el-icon color="#48b3d2" size="40px"><Guide /></el-icon>
<span class="tips_font" style="font-size: 25px; color: black">{{ batter_status.f_bty_other_count }}</span> <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> --> </el-card>
</div> </el-col>
</div> <!-- 右边 -->
<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> </div>
</template> </template>
<script setup> <script setup>
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import logoImage from '/@/assets/img/nxylogomini.png'
import { getAPI } from '/@/utils/axios-utils'; import { getAPI } from '/@/utils/axios-utils';
import { SysMonitorApi, SysChargeMonitorApi, SysEquipAlarmLogApi } from '/@/api-services/api'; import { SysHomePageApi } from '/@/api-services/api';
import home_imgs from '/@/assets/imgs/A1.png'; import myEcharts from './component/myEcharts.vue';
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 { onMounted, reactive, ref } from 'vue'; import { onMounted, reactive, ref } from 'vue';
// 站点信息
import { SysSideBasisApi } from '/@/api-services/api';
const { t } = useI18n(); const { t } = useI18n();
const bmsSwapSts = ref({ // const dataList = ref([
stepName: '空闲', // { 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: '换电完成' },
const vistrue = ref(false); // { name: 111111, number: '已连接', completeNumber1: '充电完成', completeNumber2: 23, completeNumber3: '10744.88', completeNumber4: '23456712', completeNumber5: '95', completeNumber6: '换电完成' },
const char_nums_obj = ref({ // { name: 111111, number: '已连接', completeNumber1: '充电完成', completeNumber2: 23, completeNumber3: '10744.88', completeNumber4: '23456712', completeNumber5: '95', completeNumber6: '换电完成' },
chargeTotalCount: 0, // { name: 111111, number: '已连接', completeNumber1: '充电完成', completeNumber2: 23, completeNumber3: '10744.88', completeNumber4: '23456712', completeNumber5: '95', completeNumber6: '换电完成' },
chargeTodayCount: 0, // { name: 111111, number: '已连接', completeNumber1: '充电完成', completeNumber2: 23, completeNumber3: '10744.88', completeNumber4: '23456712', completeNumber5: '95', completeNumber6: '换电完成' },
swapTotalCount: 0, // { name: 111111, number: '已连接', completeNumber1: '充电完成', completeNumber2: 23, completeNumber3: '10744.88', completeNumber4: '23456712', completeNumber5: '95', completeNumber6: '换电完成' },
swapTodayCount: 0, // { name: 111111, number: '已连接', completeNumber1: '充电完成', completeNumber2: 23, completeNumber3: '10744.88', completeNumber4: '23456712', completeNumber5: '95', completeNumber6: '换电完成' },
swapTodayElectricity: 0, // ]);
swapMonthElectricity: 0,
onMounted(async () => {
handleQuery();
getchargerInfo();
getchargerList();
// setTimeout(() => {
// vistrue.value = true;
// }, 1000);
}); });
const img_list = ref([ const zzlist = reactive({
{ dataList:[],
soc: 20, }
exists: 0,
offectleft: 'position_imgs1', )
offecttop: '0', const imgs_url = ref();
chargeStatus: 0, // 站点信息
url: home_imgs, const info = ref({
url_A: home_imgs_A1, // stationNo: null,
}, // stationName: null,
{ // stationType: null,
soc: 20, // stationSn: null,
exists: 0, // stationSn: null,
offectleft: 'position_imgs2', // stationLocation: null,
offecttop: '0', // longitude: null,
chargeStatus: 0, // latitude: null,
url: home_imgs_2, // areaName: null,
url_A: home_imgs_A2, // areaCode: null,
}, // operatetionstime: null,
{
soc: 20, // sevstatus: null,
exists: 0, // stationStatus: null,
offectleft: 'position_imgs3', // launchTime: null,
offecttop: '0', // principal: null,
chargeStatus: 0, contactWay: null,
url: home_imgs_3, operatetionstime:null,
url_A: home_imgs_A3, operatetionetime: null,
}, cover:'/20240701/146.png'
{ // stationSftVer: null,
soc: 20, // socialCreditCode: null,
exists: 0, // supplierCode: null,
offectleft: 'position_imgs4', // stationVersion: null,
offecttop: '0', // hardwareVersion: null,
chargeStatus: 0, // stationCompany: null,
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 error_Total = ref(0); const monthData = reactive({
onMounted(async () => { swapCount:null,
getswapstatus(); chargeFrequency:null,
getbattery_data(); vehicleCount:null,
handle_char_count(); chargeCount:null,
handle_BatteryStatusInfo(); daySwapCount:null,
handleQuery_error(); dayChargeCount:null,
setTimeout(() => {
vistrue.value = true;
}, 1000);
}); });
const handle_BatteryStatusInfo = async () => { // const = reactive([]);
const response = await getAPI(SysChargeMonitorApi).apiBatteryStatusInfoGet();
batter_status.value = response.data?.data;
};
// 查询操作 const getbinlist = ref([
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 handle_char_count = async () => { // 站点信息
const response = await getAPI(SysChargeMonitorApi).apiGetSwapAndChargingCountData(); const handleQuery = async () => {
char_nums_obj.value = response.data.data; 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 () => { const getchargerInfo = async () => {
var response = await getAPI(SysMonitorApi).apiGetSwapMonitorDataPost(); var res = await getAPI(SysHomePageApi).apiGetChargerInfoListGET();
if (response.data.data.stateInfo.length > 0) {
bmsSwapSts.value = response.data.data.stateInfo[response.data.data.stateInfo.length - 1]; // console.log(res, 'res');
}
// bmsSwapSts.value = response.data.data?.tboxInfo.bmsSwapSts; 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(); const getchargerList = async () => {
// img_list.value = response.data.data; var response = await getAPI(SysHomePageApi).apiGetChargMonitorChargBinData();
let str = response.data.data; let alllist = response.data?.data;
// console.log(str,'str'); zzlist.dataList = [...alllist]
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;
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import url(./index.less); @import url('./index.less');
</style> :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; box-sizing: border-box;
padding: 10px; padding: 10px;
} }
.contents{
height: calc(100vh - 90px);
// padding: 10px 0;
box-sizing: border-box;
padding: 10px;
color: white;
}
.title_header { .title_header {
background: #28353f; background: #28353f;
height: 120px; height: 120px;
@ -74,7 +80,7 @@
.bot_maininfo { .bot_maininfo {
height: calc(100% - 340px); height: 100%;
margin-top: 10px; margin-top: 10px;
.el-col { .el-col {

Write Preview
Loading…
Cancel
Save