From 9a5ad4f42f936fa5b36cd039a670d36e6f70a568 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 15 三月 2024 11:48:04 +0800
Subject: [PATCH] feat:交通事故指数接口对接
---
src/config/UtilVar.ts | 5 +
vite.config.ts | 8 ++
src/views/daoAnOffice/left-top.vue | 138 +++++++++++++++++++++++++++++++++++----------
src/api/modules/index.ts | 17 +++++
src/api/api.ts | 10 +++
5 files changed, 142 insertions(+), 36 deletions(-)
diff --git a/src/api/api.ts b/src/api/api.ts
index b8029de..b0131ab 100644
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -13,6 +13,11 @@
let baseUrl = UtilVar.baseUrl
const CancelToken = axios.CancelToken;
+
+// 娴嬭瘯header璇锋眰澶�
+const tempAuthorization = 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiIyWnpQMDFwZkhLbTdjb2lodDFLZm1IOU5kemhEcEtsbCIsImNsaWVudGlkIjoiZTVjZDdlNDg5MWJmOTVkMWQxOTIwNmNlMjRhN2IzMmUiLCJ0ZW5hbnRJZCI6IjAwMDAwMCIsInVzZXJJZCI6MSwiZGVwdElkIjoxMDN9.9_nKgt_eQ3V9b0_HrD488QYVTKzF4lRA8CyrWb_e0KQ';
+const tempClientid = 'e5cd7e4891bf95d1d19206ce24a7b32e';
+
export { baseUrl };
// axios.defaults.withCredentials = true;
// 娣诲姞璇锋眰鎷︽埅鍣�
@@ -26,6 +31,11 @@
// @ts-ignore
config.headers['Content-Type'] = "application/json;charset=utf-8";
+ config.headers = {
+ 'Authorization': tempAuthorization,
+ 'Clientid': tempClientid
+ }
+
return config;
}, function (error: any) {
// 瀵硅姹傞敊璇仛浜涗粈涔�
diff --git a/src/api/modules/index.ts b/src/api/modules/index.ts
index e0e896c..c59a9c6 100644
--- a/src/api/modules/index.ts
+++ b/src/api/modules/index.ts
@@ -1,5 +1,20 @@
+// export default {
+// 'leftTop':'/bigscreen/countDeviceNum',//宸︿笂
+// 'leftCenter':'/bigscreen/countUserNum',//宸︿腑
+// "centerMap":"/bigscreen/centerMap",
+// "centerBottom":"/bigscreen/installationPlan",
+
+// 'leftBottom':"/bigscreen/leftBottom", //鍧愪笅
+// 'rightTop':"/bigscreen/alarmNum", //鎶ヨ娆℃暟
+// 'rightBottom':'/bigscreen/rightBottom',//鍙充笅
+// 'rightCenter':'/bigscreen/ranking',// 鎶ヨ鎺掑悕
+// }
+
+
+// 璇锋眰鍦板潃缁熶竴瑙勫垝
export default {
- 'leftTop':'/bigscreen/countDeviceNum',//宸︿笂
+ 'leftTop':'/dataDashboard/trafficIndex',//杩�3骞翠氦閫氫簨鏁呮寚鏁�
+ 'subgrade': '/dataDashboard/pcrData',
'leftCenter':'/bigscreen/countUserNum',//宸︿腑
"centerMap":"/bigscreen/centerMap",
"centerBottom":"/bigscreen/installationPlan",
diff --git a/src/config/UtilVar.ts b/src/config/UtilVar.ts
index ffe5dad..d1b7cce 100644
--- a/src/config/UtilVar.ts
+++ b/src/config/UtilVar.ts
@@ -6,7 +6,7 @@
}
const UtilVar:UtilVarType = {
- baseUrl:"",
+ baseUrl:"/api",
code:401, //鐧婚檰杩囨湡
noContentCode:204, //璇锋眰鎴愬姛浣嗘病鏈夊唴瀹�
ENC:false,
@@ -15,11 +15,12 @@
const runtimeType:any = {
production: () => {
-
+ UtilVar.baseUrl = '';
},
//寮�鍙戠幆澧�
development: () => {
// UtilVar.baseUrl= `http://www.xihuanmantou.cn:19527`
+ UtilVar.baseUrl = '/api';
},
hash:()=>{
diff --git a/src/views/daoAnOffice/left-top.vue b/src/views/daoAnOffice/left-top.vue
index 8a13151..09cb4c5 100644
--- a/src/views/daoAnOffice/left-top.vue
+++ b/src/views/daoAnOffice/left-top.vue
@@ -1,27 +1,84 @@
<script setup lang="ts">
-import { reactive, ref } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
import { currentGET } from "@/api";
import CountUp from "@/components/count-up";
-const duration = ref(2);
-const state = reactive({
- alarmNum: 759,
- offlineNum: 44,
- onlineNum: 654,
- totalNum: 698,
-});
+
+
+// const getData = () => {
+// currentGET("leftTop").then((res) => {
+// console.log(res);
+// if (res.success) {
+// state.alarmNum = res.data.alarmNum;
+// state.offlineNum = res.data.offlineNum;
+// state.onlineNum = res.data.onlineNum;
+// state.totalNum = res.data.totalNum;
+// }
+// });
+// };
+interface dataType {
+ // 杩�3骞翠氦閫氫簨鏁呮寚鏁�
+ targetOneName: string,
+ targetOneValue: number | string,
+ targetOneUnit: string,
+ targetOneStatus: number,
+ targetOneCompareValue: number | string,
+ // 绔嬫
+ targetTwoName: string,
+ targetTwoValue: number | string,
+ targetTwoUnit: string,
+ targetTwoStatus: number,
+ targetTwoCompareValue: number | string,
+ // 鍙椾激浜烘暟
+ targetThreeName: string,
+ targetThreeValue: number | string,
+ targetThreeUnit: string,
+ targetThreeStatus: number,
+ targetThreeCompareValue: number | string,
+ // 姝讳骸浜烘暟
+ targetFourName: string,
+ targetFourValue: number | string,
+ targetFourUnit: string,
+ targetFourStatus: number,
+ targetFourCompareValue: number | string,
+
+}
+const dataInfo = ref(<dataType>{});
const getData = () => {
currentGET("leftTop").then((res) => {
console.log(res);
- if (res.success) {
- state.alarmNum = res.data.alarmNum;
- state.offlineNum = res.data.offlineNum;
- state.onlineNum = res.data.onlineNum;
- state.totalNum = res.data.totalNum;
+ if (res.code === 200) {
+ dataInfo.value = res.data;
}
});
-};
-getData();
+}
+const step = 5000;
+let timer: any = null;
+
+const loop = () => {
+ // 绔嬪嵆璇锋眰涓�娆�
+ getData();
+ timer = setInterval(() => {
+ getData();
+ }, step);
+}
+
+const stopLoop = () => {
+ clearInterval(timer);
+}
+
+
+
+onMounted(() => {
+ // loop();
+ getData();
+
+});
+
+onUnmounted(() => {
+ stopLoop();
+})
+
</script>
<template>
@@ -32,10 +89,13 @@
<img src="@/assets/img/sgjb.png" />
</div>
<div class="user_Overview_nums_img_p">
- <p class="user_Overview_nums_img_p_num"> <span class="info-num">{{ state.totalNum }}</span> <span
- class="user_Overview_nums_img_p_num_nan">浠�</span><span class="user_Overview_nums_img_p_num_ss">鈫�
- 28.1%</span></p>
- <p class="info-lable">浜ら�氫簨鏁呮帴鎶�</p>
+ <p class="user_Overview_nums_img_p_num"> <span class="info-num">{{ dataInfo.targetOneValue }}</span> <span
+ class="user_Overview_nums_img_p_num_nan">{{ dataInfo.targetOneUnit }}</span><span
+ class="user_Overview_nums_img_p_num_ss"
+ :class="{ 'user_Overview_nums_img_p_num_ss_d': dataInfo.targetOneStatus === 2 }">
+ {{ dataInfo.targetOneStatus === 1 ? '鈫�' : '鈫�' }}
+ {{ dataInfo.targetOneCompareValue }}%</span></p>
+ <p class="info-lable">{{ dataInfo.targetOneName }}</p>
</div>
<!-- <CountUp :endVal="state.totalNum" :duration="duration" />-->
</div>
@@ -47,10 +107,13 @@
<img src="@/assets/img/la.png" />
</div>
<div class="user_Overview_nums_img_p">
- <p class="user_Overview_nums_img_p_numt"><span class="info-num">{{ state.onlineNum }}</span><span
- class="user_Overview_nums_img_p_num_nan">浠�</span><span class="user_Overview_nums_img_p_num_ss">鈫�
- 28.1%</span></p>
- <p class="info-lable">绔嬫</p>
+ <p class="user_Overview_nums_img_p_num"> <span class="info-num">{{ dataInfo.targetTwoValue }}</span> <span
+ class="user_Overview_nums_img_p_num_nan">{{ dataInfo.targetTwoUnit }}</span><span
+ class="user_Overview_nums_img_p_num_ss"
+ :class="{ 'user_Overview_nums_img_p_num_ss_d': dataInfo.targetTwoStatus === 2 }">
+ {{ dataInfo.targetTwoStatus === 1 ? '鈫�' : '鈫�' }}
+ {{ dataInfo.targetTwoCompareValue }}%</span></p>
+ <p class="info-lable">{{ dataInfo.targetTwoName }}</p>
</div>
<!-- <CountUp :endVal="state.onlineNum" :duration="duration" />-->
@@ -63,10 +126,13 @@
<img src="@/assets/img/ssrs.png" />
</div>
<div class="user_Overview_nums_img_p">
- <p class="user_Overview_nums_img_p_nums"><span class="info-num">{{ state.offlineNum }}</span><span
- class="user_Overview_nums_img_p_num_nan">浠�</span><span class="user_Overview_nums_img_p_num_ss">鈫�
- 28.1%</span></p>
- <p class="info-lable">鍙椾激浜烘暟</p>
+ <p class="user_Overview_nums_img_p_num"> <span class="info-num">{{ dataInfo.targetThreeValue }}</span> <span
+ class="user_Overview_nums_img_p_num_nan">{{ dataInfo.targetThreeUnit }}</span><span
+ class="user_Overview_nums_img_p_num_ss"
+ :class="{ 'user_Overview_nums_img_p_num_ss_d': dataInfo.targetThreeStatus === 2 }">
+ {{ dataInfo.targetThreeStatus === 1 ? '鈫�' : '鈫�' }}
+ {{ dataInfo.targetThreeCompareValue }}%</span></p>
+ <p class="info-lable">{{ dataInfo.targetThreeName }}</p>
</div>
<!-- <CountUp :endVal="state.offlineNum" :duration="duration" />-->
@@ -79,10 +145,13 @@
<img src="@/assets/img/swrs.png" />
</div>
<div class="user_Overview_nums_img_p">
- <p class="user_Overview_nums_img_p_numf"><span class="info-num">{{ state.alarmNum }}</span><span
- class="user_Overview_nums_img_p_num_nan">浠�</span><span class="user_Overview_nums_img_p_num_ss">鈫�
- 28.1%</span></p>
- <p class="info-lable">姝讳骸浜烘暟</p>
+ <p class="user_Overview_nums_img_p_num"> <span class="info-num">{{ dataInfo.targetFourValue }}</span> <span
+ class="user_Overview_nums_img_p_num_nan">{{ dataInfo.targetFourUnit }}</span><span
+ class="user_Overview_nums_img_p_num_ss"
+ :class="{ 'user_Overview_nums_img_p_num_ss_d': dataInfo.targetFourStatus === 2 }">
+ {{ dataInfo.targetFourStatus === 1 ? '鈫�' : '鈫�' }}
+ {{ dataInfo.targetFourCompareValue }}%</span></p>
+ <p class="info-lable">{{ dataInfo.targetFourName }}</p>
</div>
<!-- <CountUp :endVal="state.alarmNum" :duration="duration" />-->
@@ -215,6 +284,11 @@
font-size: 14px;
color: #D44233;
}
+
+ .user_Overview_nums_img_p_num_ss_d {
+ font-size: 14px;
+ color: #22db69;
+ }
}
.user_Overview_nums_img_p_numf {
@@ -264,8 +338,8 @@
.info-num {
font-family: 'PangMenZhengDao';
}
+
.info-lable {
font-family: 'PingFang SC';
}
-
</style>
diff --git a/vite.config.ts b/vite.config.ts
index 53566d5..0acb882 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -31,7 +31,13 @@
port: 8112,
open: false,
strictPort: false,
- // proxy: {}
+ proxy: {
+ '/api': {
+ target: 'http://192.168.3.87:8080',
+ changeOrigin: true,
+ rewrite: (path) => path.replace(/^\/api/, '')
+ }
+ }
},
resolve: {
alias: {
--
Gitblit v1.8.0