From 08a78d7c2dc453ccd510a176bf95b62c3da30c0c Mon Sep 17 00:00:00 2001 From: 黄何裕 <1053952480@qq.com> Date: 星期三, 31 七月 2024 13:52:02 +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: '涓�鏈轰竴妗e悎鏍肩巼', value: 20, routerUrl: '/car/vehicle-data-monitor/index' }, - { id: 3, name: '妗f鑰冩牳姣�', 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: "涓�鏈轰竴妗e悎鏍肩巼", + value: 20, + routerUrl: "/car/vehicle-data-monitor/index", + }, + { + id: 3, + name: "妗f鑰冩牳姣�", + 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: "涓�鏈轰竴妗e悎鏍肩巼", + value: 20, + routerUrl: "/car/vehicle-data-monitor/index", + }, + { + id: 3, + name: "妗f鑰冩牳姣�", + 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