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/moudle/battShow/apis.js | 22 ++
src/components/echarts/options/radiusBar.js | 3
src/views/moudle/carInfo/carPosModule.js | 2
src/views/moudle/videoInf/videoInf.js | 85 +++++++++
src/util/getRecentDay.js | 30 +++
src/views/moudle/battShow/battInfo.js | 85 +++++++++
src/views/moudle/carInfo/carInfoModule.js | 84 +++++++++
src/views/home.vue | 150 ++++++++++++----
src/views/moudle/videoInf/apis.js | 23 ++
src/views/moudle/carInfo/apis.js | 24 ++
10 files changed, 469 insertions(+), 39 deletions(-)
diff --git a/src/components/echarts/options/radiusBar.js b/src/components/echarts/options/radiusBar.js
index d1c67c2..a532195 100644
--- a/src/components/echarts/options/radiusBar.js
+++ b/src/components/echarts/options/radiusBar.js
@@ -7,7 +7,7 @@
grid: {
top: '15%',
right: '3%',
- left: '8%',
+ left: '10%',
bottom: '12%'
},
};
@@ -28,6 +28,7 @@
}
},
axisLabel: {
+ interval: 0,
margin: 10,
color: '#e2e9ff',
textStyle: {
diff --git a/src/util/getRecentDay.js b/src/util/getRecentDay.js
new file mode 100644
index 0000000..2683095
--- /dev/null
+++ b/src/util/getRecentDay.js
@@ -0,0 +1,30 @@
+function getRecentDay(dayNum) {
+ let days = [];
+ for(let i=0; i<24*dayNum;i+=24){
+ let dateItem=new Date(new Date().getTime() - i * 60 * 60 * 1000); //浣跨敤褰撳ぉ鏃堕棿鎴冲噺鍘讳互鍓嶇殑鏃堕棿姣锛堝皬鏃�*鍒�*绉�*姣锛�
+ let y = dateItem.getFullYear(); //鑾峰彇骞翠唤
+ let m = dateItem.getMonth() + 1; //鑾峰彇鏈堜唤js鏈堜唤浠�0寮�濮嬶紝闇�瑕�+1
+ let d= dateItem.getDate(); //鑾峰彇鏃ユ湡
+ m = addDate(m); //缁欎负鍗曟暟鐨勬湀浠借ˉ闆�
+ d = addDate(d); //缁欎负鍗曟暟鐨勬棩鏈熻ˉ闆�
+ let valueItem= y + '-' + m + '-' + d; //缁勫悎
+ days.push(valueItem); //娣诲姞鑷虫暟缁�
+ }
+
+ return days.reverse().map(item=>{
+ return {
+ date: item,
+ value: 0
+ }
+ });
+}
+
+//缁欐棩鏈熷姞0
+function addDate(time) {
+ if (time.toString().length === 1) {
+ time = '0' + time.toString();
+ }
+ return time;
+}
+
+export default getRecentDay;
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>
diff --git a/src/views/moudle/battShow/apis.js b/src/views/moudle/battShow/apis.js
index c18c01f..2d2d6ab 100644
--- a/src/views/moudle/battShow/apis.js
+++ b/src/views/moudle/battShow/apis.js
@@ -23,3 +23,25 @@
});
}
+/**
+ * 缁熻鏈�杩�7鏃ユ柊澧炵殑鐢垫睜缁�
+ * @return {Promise<axios.AxiosResponse<any>> | *}
+ */
+export const searchStatisticCreate = ()=>{
+ return axios({
+ method: "GET",
+ url: "/monitor/bmsAlamMonitor/statisticCreate",
+ });
+}
+
+/**
+ * 缁熻鐢垫睜缁勬�绘暟
+ * @return {Promise<axios.AxiosResponse<any>> | *}
+ */
+export const searchStatisticSum = ()=>{
+ return axios({
+ method: "GET",
+ url: "/monitor/bmsAlamMonitor/statisticSum",
+ });
+}
+
diff --git a/src/views/moudle/battShow/battInfo.js b/src/views/moudle/battShow/battInfo.js
new file mode 100644
index 0000000..6f8ff17
--- /dev/null
+++ b/src/views/moudle/battShow/battInfo.js
@@ -0,0 +1,85 @@
+import {ref} from "vue"
+import {searchStatisticCreate, searchStatisticSum} from "./apis";
+import getRecentDay from "@/util/getRecentDay";
+
+/**
+ * 鏈�杩戝嚑澶╂柊澧炵數姹犳暟
+ * @return {{getRecentDaysBattNum: (function(*): Promise<*[]>), todayBattNum: Ref<UnwrapRef<number>>}}
+ */
+export const recentDaysBattModule = ()=>{
+ const todayBattNum = ref(0);
+ /**
+ * 鏌ヨ鏈�杩戝嚑澶╃數姹犳柊澧炴暟
+ * @param num 澶╂暟
+ * @return {Promise<*[]>}
+ */
+ const getRecentDaysBattNum = async (num)=>{
+ try {
+ const res = await searchStatisticCreate();
+ const rs = res.data;
+ let data = [];
+ if(rs.code === 1) {
+ data = rs.data;
+ }
+ let recentDays = getRecentDay(num);
+ for(let i=0; i<recentDays.length; i++) {
+ let itemDay = recentDays[i];
+ for(let j=0; j<data.length; j++) {
+ let item = data[j];
+ if(itemDay.date === item.date) {
+ itemDay.value = item.num;
+ break;
+ }
+ }
+ }
+ //recentDays[recentDays.length -1].value = 100;
+ // 璁剧疆褰撳ぉ鐨勫湪绾挎暟
+ if(recentDays.length !== 0) {
+ todayBattNum.value = recentDays[recentDays.length -1].value;
+ }
+ return recentDays;
+ }catch (e) {
+ console.log(e);
+ return []
+ }
+ }
+
+ return {
+ todayBattNum,
+ getRecentDaysBattNum
+ }
+
+}
+
+/**
+ * 杞﹁締鎬绘暟
+ * @return {{getTotalBattNum: (function(): Promise<number>), totalBattNum: *}}
+ */
+export const totalBattNumModule = ()=>{
+ const totalBattNum = ref(0);
+
+ /**
+ * 鑾峰彇杞﹁締鐨勬�绘暟
+ * @return {Promise<number>}
+ */
+ const getTotalBattNum = async ()=>{
+ try {
+ const res = await searchStatisticSum();
+ const rs = res.data;
+ let num = 0;
+ if(rs.code === 1) {
+ num = rs.data;
+ }
+ totalBattNum.value = num;
+ return num;
+ }catch (e) {
+ console.log(e);
+ return 0;
+ }
+ }
+
+ return {
+ totalBattNum,
+ getTotalBattNum
+ };
+}
diff --git a/src/views/moudle/carInfo/apis.js b/src/views/moudle/carInfo/apis.js
index eb4a3f4..4fa5eb2 100644
--- a/src/views/moudle/carInfo/apis.js
+++ b/src/views/moudle/carInfo/apis.js
@@ -10,3 +10,27 @@
url: "/monitor/boxGPS/select",
});
}
+
+/**
+ * 缁熻鏈�杩�7鏃ュ湪绾跨殑杞﹁締
+ * @return {Promise<axios.AxiosResponse<any>> | *}
+ */
+export const searchStatisticCreate = ()=>{
+ return axios({
+ method: "GET",
+ url: "/monitor/box/statisticCreate",
+ });
+}
+
+/**
+ * 缁熻杞﹁締鎬绘暟
+ * @return {Promise<axios.AxiosResponse<any>> | *}
+ */
+export const searchStatisticSum = ()=>{
+ return axios({
+ method: "GET",
+ url: "/monitor/box/statisticSum",
+ });
+}
+
+
diff --git a/src/views/moudle/carInfo/carInfoModule.js b/src/views/moudle/carInfo/carInfoModule.js
new file mode 100644
index 0000000..ffe7d61
--- /dev/null
+++ b/src/views/moudle/carInfo/carInfoModule.js
@@ -0,0 +1,84 @@
+import {ref} from "vue"
+import {searchStatisticCreate, searchStatisticSum} from "@/views/moudle/carInfo/apis";
+import getRecentDay from "@/util/getRecentDay";
+
+/**
+ * 鏈�杩戝嚑澶╁湪绾胯溅杈嗘暟
+ * @return {{todayCarNum: Ref<UnwrapRef<number>>, getRecentDaysCarNum: (function(*): Promise<*[]>)}}
+ */
+export const recentDaysCarModule = ()=>{
+ const todayCarNum = ref(0);
+ /**
+ * 鏌ヨ鏈�杩戝嚑澶╄溅杈嗗湪绾挎暟
+ * @param num 澶╂暟
+ * @return {Promise<*[]>}
+ */
+ const getRecentDaysCarNum = async (num)=>{
+ try {
+ const res = await searchStatisticCreate();
+ const rs = res.data;
+ let data = [];
+ if(rs.code === 1) {
+ data = rs.data;
+ }
+ let recentDays = getRecentDay(num);
+ for(let i=0; i<recentDays.length; i++) {
+ let itemDay = recentDays[i];
+ for(let j=0; j<data.length; j++) {
+ let item = data[j];
+ if(itemDay.date === item.date) {
+ itemDay.value = item.num;
+ break;
+ }
+ }
+ }
+ // 璁剧疆褰撳ぉ鐨勫湪绾挎暟
+ if(recentDays.length !== 0) {
+ todayCarNum.value = recentDays[recentDays.length -1].value;
+ }
+ return recentDays;
+ }catch (e) {
+ console.log(e);
+ return []
+ }
+ }
+
+ return {
+ todayCarNum,
+ getRecentDaysCarNum
+ }
+
+}
+
+/**
+ * 杞﹁締鎬绘暟
+ * @return {{getTotalCarNum: (function(): Promise<number>), totalCarNum: Ref<UnwrapRef<number>>}}
+ */
+export const totalCarNumModule = ()=>{
+ const totalCarNum = ref(0);
+
+ /**
+ * 鑾峰彇杞﹁締鐨勬�绘暟
+ * @return {Promise<number>}
+ */
+ const getTotalCarNum = async ()=>{
+ try {
+ const res = await searchStatisticSum();
+ const rs = res.data;
+ let num = 0;
+ if(rs.code === 1) {
+ num = rs.data;
+ }
+ totalCarNum.value = num;
+ return num;
+ }catch (e) {
+ console.log(e);
+ return 0;
+ }
+ }
+
+ return {
+ totalCarNum,
+ getTotalCarNum
+ };
+}
diff --git a/src/views/moudle/carInfo/carPosModule.js b/src/views/moudle/carInfo/carPosModule.js
index 6ed1cf2..a247200 100644
--- a/src/views/moudle/carInfo/carPosModule.js
+++ b/src/views/moudle/carInfo/carPosModule.js
@@ -7,7 +7,7 @@
let timer = 0;
/**
* 鑾峰彇姹借溅鐨勫畾浣嶄俊鎭�
- * @return {Promise<*[]>}
+ * @return {Promise<[]>}
*/
const getCarPosList = async ()=>{
try{
diff --git a/src/views/moudle/videoInf/apis.js b/src/views/moudle/videoInf/apis.js
new file mode 100644
index 0000000..6e7dc37
--- /dev/null
+++ b/src/views/moudle/videoInf/apis.js
@@ -0,0 +1,23 @@
+import axios from "@/assets/js/axios";
+
+/**
+ * 缁熻鏈�杩�7鏃ユ柊澧炵殑鎽勫儚澶�
+ * @return {Promise<axios.AxiosResponse<any>> | *}
+ */
+export const searchStatisticCreate = ()=>{
+ return axios({
+ method: "GET",
+ url: "/monitor/cameraDevice/statisticCreate",
+ });
+}
+
+/**
+ * 缁熻鎽勫儚澶存�绘暟
+ * @return {Promise<axios.AxiosResponse<any>> | *}
+ */
+export const searchStatisticSum = ()=>{
+ return axios({
+ method: "GET",
+ url: "/monitor/cameraDevice/statisticSum",
+ });
+}
diff --git a/src/views/moudle/videoInf/videoInf.js b/src/views/moudle/videoInf/videoInf.js
new file mode 100644
index 0000000..155662f
--- /dev/null
+++ b/src/views/moudle/videoInf/videoInf.js
@@ -0,0 +1,85 @@
+import {ref} from "vue"
+import {searchStatisticCreate, searchStatisticSum} from "./apis";
+import getRecentDay from "@/util/getRecentDay";
+
+/**
+ * 鏈�杩戝嚑澶╂柊澧炴憚鍍忓ご鏁�
+ * @return {{getRecentDaysVideoNum: (function(*): Promise<*[]>), todayVideoNum: Ref<UnwrapRef<number>>}}
+ */
+export const recentDaysVideoModule = ()=>{
+ const todayVideoNum = ref(0);
+ /**
+ * 鏌ヨ鏈�杩戝嚑澶╂憚鍍忓ご鏂板鏁�
+ * @param num 澶╂暟
+ * @return {Promise<*[]>}
+ */
+ const getRecentDaysVideoNum = async (num)=>{
+ try {
+ const res = await searchStatisticCreate();
+ const rs = res.data;
+ let data = [];
+ if(rs.code === 1) {
+ data = rs.data;
+ }
+ let recentDays = getRecentDay(num);
+ for(let i=0; i<recentDays.length; i++) {
+ let itemDay = recentDays[i];
+ for(let j=0; j<data.length; j++) {
+ let item = data[j];
+ if(itemDay.date === item.date) {
+ itemDay.value = item.num;
+ break;
+ }
+ }
+ }
+ //recentDays[recentDays.length -1].value = 100;
+ // 璁剧疆褰撳ぉ鐨勫湪绾挎暟
+ if(recentDays.length !== 0) {
+ todayVideoNum.value = recentDays[recentDays.length -1].value;
+ }
+ return recentDays;
+ }catch (e) {
+ console.log(e);
+ return []
+ }
+ }
+
+ return {
+ todayVideoNum,
+ getRecentDaysVideoNum
+ }
+
+}
+
+/**
+ * 鎽勫儚澶存�绘暟
+ * @return {{totalVideoNum: Ref<UnwrapRef<number>>, getTotalVideoNum: (function(): Promise<number>)}}
+ */
+export const totalVideoNumModule = ()=>{
+ const totalVideoNum = ref(0);
+
+ /**
+ * 鑾峰彇鎽勫儚澶寸殑鎬绘暟
+ * @return {Promise<number>}
+ */
+ const getTotalVideoNum = async ()=>{
+ try {
+ const res = await searchStatisticSum();
+ const rs = res.data;
+ let num = 0;
+ if(rs.code === 1) {
+ num = rs.data;
+ }
+ totalVideoNum.value = num;
+ return num;
+ }catch (e) {
+ console.log(e);
+ return 0;
+ }
+ }
+
+ return {
+ totalVideoNum,
+ getTotalVideoNum
+ };
+}
--
Gitblit v1.9.1