From b537c7bccbcc20644902ad6f0e309bbe9a6eda24 Mon Sep 17 00:00:00 2001
From: longyvfengyun <496960745@qq.com>
Date: 星期四, 16 十一月 2023 16:45:41 +0800
Subject: [PATCH] 首页对接数据
---
src/views/home.vue | 150 +++++++++++++++++++++++++++++++++++++------------
1 files changed, 113 insertions(+), 37 deletions(-)
diff --git a/src/views/home.vue b/src/views/home.vue
index 17c8fdc..85b8486 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,10 +1,10 @@
<script setup>
-import {computed, nextTick, onMounted, reactive, ref} from 'vue';
+import {nextTick, onMounted, reactive, ref} from 'vue';
import {
BaiduMap,
BmInfoWindow
} from "vue-baidu-map-3x";
-import {View, PointLayer, IconLayer, TextLayer} from "mapvgl";
+import {View, IconLayer, TextLayer} from "mapvgl";
import mapJson from "@/assets/mapJson/map_config";
import {FullScreen} from "@element-plus/icons-vue";
import BoxComponent from "@/components/boxComponent.vue";
@@ -89,7 +89,6 @@
selectedColor: '#ff0000', // 閫変腑椤归鑹�
autoSelect: true, // 鏍规嵁榧犳爣浣嶇疆鏉ヨ嚜鍔ㄨ缃�変腑椤�
onClick: (e)=>{
- console.log(e);
if(e.dataIndex !== -1) {
const point = e.dataItem.geometry.coordinates;
const info = e.dataItem.properties.info;
@@ -102,22 +101,14 @@
});
}
},
- onDblClick: e => {
- console.log('double click', e);
- },
- onRightClick: e => {
- console.log('right click', e);
- }
});
view.addLayer(iconLayer.value);
-
searchCarPos();
}
const searchCarPos = async ()=>{
const res = await getCarPosList();
- console.log(res);
let data = res.map(item=>{
return {
geometry: {
@@ -131,10 +122,8 @@
}
}
});
-
textLayer.value.setData(data);
iconLayer.value.setData(data);
-
}
const infoWinOpen = ()=>{}
@@ -142,25 +131,114 @@
infoWindow.show = false;
}
+import {
+ recentDaysCarModule,
+ totalCarNumModule
+} from "@/views/moudle/carInfo/carInfoModule";
+
+const {
+ todayCarNum,
+ getRecentDaysCarNum
+} = recentDaysCarModule();
+
+const boxGaugeOption = getGaugeOption(0, 2000, "褰撳墠鍦ㄧ嚎姹借溅鏁�");
+const boxBarOption = getRadiusBarOption();
+const searchRecentDaysCarNum = async ()=>{
+ const data = await getRecentDaysCarNum(7);
+ boxBarOption.series[0].name = "鍦ㄧ嚎杞﹁締鏁帮細"
+ boxBarOption.series[0].data = data.map(item=>{
+ return [new Date(item.date).format("MM-dd"), item.value];
+ });
+ boxBar.value.setOption(boxBarOption);
+ boxGauge.value.setOption(getGaugeOption(todayCarNum.value, 2000, "褰撳墠鍦ㄧ嚎姹借溅鏁�"));
+}
+
+const {
+ totalCarNum,
+ getTotalCarNum
+} = totalCarNumModule();
+
+
+import {
+ recentDaysBattModule,
+ totalBattNumModule
+} from "@/views/moudle/battShow/battInfo"
+
+const battBarOption = getRadiusBarOption();
+const battGaugeOption = getGaugeOption(1, 500, "浠婃棩鏂板鐢垫睜鏁�");
+
+const {
+ todayBattNum,
+ getRecentDaysBattNum
+} = recentDaysBattModule();
+const searchRecentDaysBattNum = async ()=>{
+ const data = await getRecentDaysBattNum(7);
+ battBarOption.series[0].name = "鏂板鐢垫睜缁勬暟锛�";
+ battBarOption.series[0].data = data.map(item=>{
+ return [new Date(item.date).format("MM-dd"), item.value];
+ });
+ battBar.value.setOption(battBarOption);
+ battGauge.value.setOption(getGaugeOption(todayBattNum.value, 500, "浠婃棩鏂板鐢垫睜鏁�"));
+}
+
+const {
+ totalBattNum,
+ getTotalBattNum
+} = totalBattNumModule();
+
+
+import {
+ recentDaysVideoModule,
+ totalVideoNumModule
+} from "@/views/moudle/videoInf/videoInf";
+
+const videoGaugeOption = getGaugeOption(1, 500, "浠婃棩鏂板鎽勫儚澶存暟");
+const videoBarOption = getRadiusBarOption();
+
+const {
+ todayVideoNum,
+ getRecentDaysVideoNum
+} = recentDaysVideoModule();
+const searchRecentDaysVideoNum = async ()=>{
+ const data = await getRecentDaysVideoNum(7);
+ videoBarOption.series[0].name = "鏂板鎽勫儚澶存暟锛�";
+ videoBarOption.series[0].data = data.map(item=>{
+ return [new Date(item.date).format("MM-dd"), item.value];
+ });
+ videoBar.value.setOption(videoBarOption);
+ videoGauge.value.setOption(getGaugeOption(todayVideoNum.value, 500, "浠婃棩鏂板鎽勫儚澶存暟"));
+}
+
+const {
+ totalVideoNum,
+ getTotalVideoNum
+} = totalVideoNumModule();
+
+/**
+ * 鏌ヨ杞﹁締锛岀數姹狅紝鎽勫儚澶达紝鍛婅鐨勫浘琛ㄦ暟鎹�
+ */
+const searchEchartsData = ()=>{
+ searchRecentDaysCarNum();
+ getTotalCarNum();
+
+ searchRecentDaysVideoNum();
+ getTotalVideoNum();
+
+ searchRecentDaysBattNum();
+ getTotalBattNum();
+}
+
onMounted(()=>{
-
- const boxGaugeOption = getGaugeOption(10, 90, "浠婃棩鍦ㄧ嚎姹借溅鏁�");
boxGauge.value.setOption(boxGaugeOption);
-
- const boxBarOption = getRadiusBarOption();
boxBar.value.setOption(boxBarOption);
- const videoGaugeOption = getGaugeOption(1, 500, "浠婃棩鍦ㄧ嚎鎽勫儚澶存暟");
videoGauge.value.setOption(videoGaugeOption);
-
- const videoBarOption = getRadiusBarOption();
videoBar.value.setOption(videoBarOption);
- const battGaugeOption = getGaugeOption(1, 500, "浠婃棩鍦ㄧ嚎鐢垫睜鏁�");
- battGauge.value.setOption(videoGaugeOption);
+ battGauge.value.setOption(battGaugeOption);
+ battBar.value.setOption(battBarOption);
- const battBarOption = getRadiusBarOption();
- battBar.value.setOption(videoBarOption);
+ searchEchartsData();
const alarmBarOption = getHorizontalTechnologyOption();
alarmBar.value.setOption(alarmBarOption);
@@ -191,12 +269,12 @@
<el-row>
<el-col :span="12">
<div class="box-value-wrapper">
- <div class="text-content">浠婃棩鍦ㄧ嚎姹借溅鏁�:</div>
- <div class="text-value">0</div>
+ <div class="text-content">褰撳墠鍦ㄧ嚎姹借溅鏁�:</div>
+ <div class="text-value">{{todayCarNum}}</div>
</div>
<div class="box-value-wrapper">
<div class="text-content">姹借溅鎬绘暟:</div>
- <div class="text-value">0</div>
+ <div class="text-value">{{totalCarNum}}</div>
</div>
</el-col>
<el-col :span="12">
@@ -221,12 +299,12 @@
<el-row>
<el-col :span="12">
<div class="box-value-wrapper">
- <div class="text-content">浠婃棩鍦ㄧ嚎鎽勫儚澶存暟:</div>
- <div class="text-value">0</div>
+ <div class="text-content">浠婃棩鏂板鎽勫儚澶存暟:</div>
+ <div class="text-value">{{todayVideoNum}}</div>
</div>
<div class="box-value-wrapper">
<div class="text-content">鎽勫儚澶存�绘暟:</div>
- <div class="text-value">0</div>
+ <div class="text-value">{{ totalVideoNum }}</div>
</div>
</el-col>
<el-col :span="12">
@@ -237,7 +315,7 @@
</el-row>
</div>
<div class="content-inner-body">
- <chart-box title="鏈�杩�7澶╁湪绾挎憚鍍忓ご鏁�">
+ <chart-box title="鏈�杩�7澶╂柊澧炴憚鍍忓ご鏁�">
<hdw-chart ref="videoBar"></hdw-chart>
</chart-box>
</div>
@@ -255,12 +333,12 @@
<el-row>
<el-col :span="12">
<div class="box-value-wrapper">
- <div class="text-content">浠婃棩鍦ㄧ數姹犳暟:</div>
- <div class="text-value">0</div>
+ <div class="text-content">浠婃棩鏂板鐢垫睜鏁�:</div>
+ <div class="text-value">{{todayBattNum}}</div>
</div>
<div class="box-value-wrapper">
<div class="text-content">鐢垫睜鎬绘暟:</div>
- <div class="text-value">0</div>
+ <div class="text-value">{{totalBattNum}}</div>
</div>
</el-col>
<el-col :span="12">
@@ -271,7 +349,7 @@
</el-row>
</div>
<div class="content-inner-body">
- <chart-box title="鏈�杩�7澶╁湪绾跨數姹犳暟">
+ <chart-box title="鏈�杩�7澶╂柊澧炵數姹犳暟">
<hdw-chart ref="battBar"></hdw-chart>
</chart-box>
</div>
@@ -298,9 +376,7 @@
<car-info-list :infos="infoWindow.content"></car-info-list>
</bm-info-window>
</baidu-map>
- {{infoWindow}}
</div>
- {{infoWindow}}
</div>
</div>
--
Gitblit v1.9.1