From c047fa1a6163ecf6e9d449fdc4842ea306d26bd4 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期五, 02 八月 2024 17:31:20 +0800
Subject: [PATCH] 数据中心详情接口调用
---
src/views/screen/components/screen-examine/components/examine-chart.vue | 159 +++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 136 insertions(+), 23 deletions(-)
diff --git a/src/views/screen/components/screen-examine/components/examine-chart.vue b/src/views/screen/components/screen-examine/components/examine-chart.vue
index f4059f4..2c1dfde 100644
--- a/src/views/screen/components/screen-examine/components/examine-chart.vue
+++ b/src/views/screen/components/screen-examine/components/examine-chart.vue
@@ -1,44 +1,157 @@
<template>
<div class="chart-container">
<div class="rank-chart">
- <div class="hola-item" v-for="item in dataList" :key="item.id">
- <examine-hola :startColor="'#124ae4'" :endColor="'#99b3fd'" :centerValue="item.value" :bottomTitle="item.name"
- :routerPath="item.routerUrl"></examine-hola>
+ <div
+ class="hola-item"
+ v-for="item in dataType == 'car' ? dataListA : dataList"
+ :key="item.id"
+ >
+ <examine-hola
+ :startColor="'#124ae4'"
+ :endColor="'#99b3fd'"
+ :centerValue="item.value"
+ :bottomTitle="item.name"
+ :routerPath="item.routerUrl"
+ ></examine-hola>
</div>
</div>
</div>
</template>
<script>
-import ExamineHola from './examine-hola.vue';
+import ExamineHola from "./examine-hola.vue";
let barChart = null;
export default {
- name: 'ExamineChart',
+ name: "ExamineChart",
components: {
- ExamineHola
+ ExamineHola,
+ },
+ props: {
+ dataType: {
+ type: String,
+ default: "",
+ },
},
data() {
return {
dataList: [
- { id: 1, name: '骞冲彴鍦ㄧ嚎鐜�', value: 60, routerUrl: '/car/vehicle-data-monitor/index' },
- { id: 2, name: '涓�鏈轰竴妗ｅ悎鏍肩巼', value: 20, routerUrl: '/car/vehicle-data-monitor/index' },
- { id: 3, name: '妗ｆ鑰冩牳姣�', value: 60, routerUrl: '/car/vehicle-data-monitor/index' },
- { id: 4, name: '鐐逛綅鍦ㄧ嚎鐜�', value: 40, routerUrl: '/car/vehicle-data-monitor/index' },
- { id: 5, name: '褰曞儚鍙敤鐜�', value: 80, routerUrl: '/car/vehicle-data-monitor/index' },
- { id: 6, name: '閲嶇偣鐐逛綅褰曞儚鍙敤鐜�', value: 20, routerUrl: '/car/vehicle-data-monitor/index' },
- { id: 7, name: '閲嶇偣鐐逛綅褰曞儚鍙敤鐜�', value: 20, routerUrl: '/car/vehicle-data-monitor/index' },
- { id: 8, name: '閲嶇偣鐐逛綅褰曞儚鍙敤鐜�', value: 20, routerUrl: '/car/vehicle-data-monitor/index' },
- ]
- }
+ {
+ id: 1,
+ name: "骞冲彴鍦ㄧ嚎鐜�",
+ value: 60,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 2,
+ name: "涓�鏈轰竴妗ｅ悎鏍肩巼",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 3,
+ name: "妗ｆ鑰冩牳姣�",
+ value: 60,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 4,
+ name: "鐐逛綅鍦ㄧ嚎鐜�",
+ value: 40,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 5,
+ name: "褰曞儚鍙敤鐜�",
+ value: 80,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 6,
+ name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 7,
+ name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 8,
+ name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ ],
+ dataListA: [
+ {
+ id: 1,
+ name: "骞冲彴鍦ㄧ嚎鐜�",
+ value: 60,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 2,
+ name: "涓�鏈轰竴妗ｅ悎鏍肩巼",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 3,
+ name: "妗ｆ鑰冩牳姣�",
+ value: 60,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 4,
+ name: "鐐逛綅鍦ㄧ嚎鐜�",
+ value: 40,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 5,
+ name: "褰曞儚鍙敤鐜�",
+ value: 80,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 6,
+ name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 7,
+ name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 8,
+ name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 9,
+ name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ {
+ id: 10,
+ name: "閲嶇偣鐐逛綅褰曞儚鍙敤鐜�",
+ value: 20,
+ routerUrl: "/car/vehicle-data-monitor/index",
+ },
+ ],
+ };
},
- methods: {
-
-
- },
- mounted() {
- }
-}
+ methods: {},
+ mounted() {},
+};
</script>
<style lang="scss" scoped>
--
Gitblit v1.8.0