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 ++++++++++++++++++++++++++++++++++----- src/views/screen/newPage/index.vue | 35 ++++++-- 2 files changed, 163 insertions(+), 31 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> diff --git a/src/views/screen/newPage/index.vue b/src/views/screen/newPage/index.vue index 3c6aba4..a2a83e9 100644 --- a/src/views/screen/newPage/index.vue +++ b/src/views/screen/newPage/index.vue @@ -46,14 +46,14 @@ <div class="data-lable">璁惧鎬绘暟</div> <div class="data-num type1"> <span v-roll>{{ 1123 }}</span - ><i class="el-icon-bottom"></i> + ><i class="el-icon-top"></i> </div> </div> <div class="data-info"> <div class="data-lable">璁惧姝e父鏁�</div> <div class="data-num type2"> <span v-roll>{{ 1123 }}</span - ><i class="el-icon-bottom"></i> + ><i class="el-icon-top"></i> </div> </div> <div class="data-info"> @@ -139,15 +139,24 @@ <div class="card_header"> <div class="title">浜鸿劯鑰冩牳鏁版嵁</div> <div style="width: 600px; margin-left: -20px"> - <ExamineChart class="wrapper-item"></ExamineChart> + <ExamineChart class="wrapper-item" dataType="face"></ExamineChart> </div> </div> </div> <div class="footer_card"> <div class="card_header"> - <div class="title">杞﹁締鑰冩牳鏁版嵁</div> - <div style="width: 600px; margin-left: -20px"> - <ExamineChart class="wrapper-item"></ExamineChart> + <div class="titleCar">杞﹁締鑰冩牳鏁版嵁</div> + </div> + <div + style=" + overflow: hidden; + overflow-x: auto; + margin-top: -9px; + height: 90%; + " + > + <div style="width: 750px"> + <ExamineChart class="wrapper-item" dataType="car"></ExamineChart> </div> </div> </div> @@ -155,7 +164,7 @@ <div class="card_header"> <div class="title">瑙嗛鑰冩牳鏁版嵁</div> <div style="width: 600px; margin-left: -20px"> - <ExamineChart class="wrapper-item"></ExamineChart> + <ExamineChart class="wrapper-item" dataType="video"></ExamineChart> </div> </div> </div> @@ -205,7 +214,9 @@ returnPath() { this.$router.push("/index"); }, - handleClick() {}, + handleClick(tab, event) { + console.log(tab, event); + }, }, }; </script> @@ -353,6 +364,14 @@ margin: 5px 0; .card_header { height: 40px; + .titleCar { + margin-left: 20px; + padding-top: 5px; + color: #fff; + letter-spacing: 2px; + font-size: 20px; + font-style: italic; + } } } } -- Gitblit v1.8.0