From 4c03db2f0d6b4320e670b770f4c1e252809303a3 Mon Sep 17 00:00:00 2001 From: fuliqi <fuliqi@qq.com> Date: 星期三, 18 九月 2024 01:00:51 +0800 Subject: [PATCH] 大屏数据对接2 --- src/api/newpage.js | 8 + src/views/screen/components/lineChart.vue | 103 +++++++++----------- src/views/screen/components/subheading.vue | 12 ++ src/views/login.vue | 2 src/views/screen/components/map.vue | 96 ++++++++++--------- src/views/screen/index.vue | 60 +++++++++++ 6 files changed, 176 insertions(+), 105 deletions(-) diff --git a/src/api/newpage.js b/src/api/newpage.js index 37db17d..732bafd 100644 --- a/src/api/newpage.js +++ b/src/api/newpage.js @@ -63,3 +63,11 @@ method: "get", }); } + +// 鑰冩牳绉垎鏁版嵁 +export function checkScore(dataScope, deptId) { + return request({ + url: "/dashboard/check/score?dataScope=" + dataScope + "&deptId=" + deptId, + method: "get", + }); +} diff --git a/src/views/login.vue b/src/views/login.vue index 38204ec..82cadab 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -191,7 +191,7 @@ if (this.loginInfo.firstLogin == 1) { // this.$router.push({ path: "/" }).catch(() => { }); // return; - if (this.roles .includes("admin") || this.roles .includes("city_leader") || this.roles .includes("county_leader")) { + if (this.roles .includes("admin") || this.roles .includes("city_leader")) { this.$router.push({ path: '/screen' }) diff --git a/src/views/screen/components/lineChart.vue b/src/views/screen/components/lineChart.vue index f2335f6..ea1bd1f 100644 --- a/src/views/screen/components/lineChart.vue +++ b/src/views/screen/components/lineChart.vue @@ -13,21 +13,26 @@ default: null, }, }, - data () { + data() { return { - dataList: { - name: [], - data1: [], - data2: [], - }, - // 閰嶇疆 - option: { + name: [], + data1: [], + data2: [], + + myDrawLine: null + } + }, + + methods: { + initDrawLine() { + const that = this + let option = { grid: { width: '100%' }, tooltip: { trigger: 'item', - formatter: function (params) { + formatter: function (params) { let str = '<div><p>' + params.name + '</p></div>' str += params.marker + params.seriesName + '锛�' + params.data return str @@ -40,9 +45,9 @@ // 鍥句緥缁勪欢 legend: { type: 'plain', - top: 20, - data: ['宸插鐞嗗伐鍗曟暟', '鏈鐞嗗伐鍗曟暟'], - textStyle: { + top: 20, + data: ['宸插鐞嗗伐鍗曟暟', '鏈鐞嗗伐鍗曟暟'], + textStyle: { color: '#A0AEC0' } }, @@ -50,41 +55,41 @@ // X杞撮厤缃� xAxis: { type: 'category', - boundaryGap: false, - axisTick: { + boundaryGap: false, + axisTick: { show: true }, axisLine: { lineStyle: { color: '#A0AEC0', - type: 'solid' + type: 'solid' } }, axisLabel: { color: '#A0AEC0', - fontSize: 12, - margin: 20, - rotate: 30 + fontSize: 12, + margin: 20, + rotate: 30 }, - data: this.dataList.name, + data: that.name, }, // Y杞撮厤缃� yAxis: { type: 'value', - splitLine: { + splitLine: { lineStyle: { color: '#A0AEC0', - type: 'dashed' + type: 'dashed' } }, splitNumber: 5, - axisLine: { + axisLine: { show: false }, axisLabel: { color: '#A0AEC0', - fontSize: 12, - margin: 15 + fontSize: 12, + margin: 15 } }, // 绯诲垪鍒楄〃锛堝涓姌绾垮浘锛� @@ -92,13 +97,13 @@ { name: '宸插鐞嗗伐鍗曟暟', type: 'line', - data: this.dataList.data1, + data: that.data1, smooth: true, areaStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#00a2ff' }, - { offset: 0.5, color: 'rgba(0,162,255,0.1)' }, - { offset: 1, color: 'rgba(0,162,255,0.1)' } + {offset: 0, color: '#00a2ff'}, + {offset: 0.5, color: 'rgba(0,162,255,0.1)'}, + {offset: 1, color: 'rgba(0,162,255,0.1)'} ]) }, @@ -113,13 +118,13 @@ { name: '鏈鐞嗗伐鍗曟暟', type: 'line', - data: this.dataList.data2, + data: that.data2, smooth: true, areaStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#e4b54f' }, - { offset: 0.5, color: 'rgba(228,181,79,0.1)' }, - { offset: 1, color: 'rgba(228,181,79,0.1)' } + {offset: 0, color: '#e4b54f'}, + {offset: 0.5, color: 'rgba(228,181,79,0.1)'}, + {offset: 1, color: 'rgba(228,181,79,0.1)'} ]) }, @@ -132,17 +137,9 @@ } } ] - }, - - myDrawLine: null - } - }, - - methods: { - initDrawLine () { - const that = this + } that.myDrawLine = this.$echarts.init(this.$refs.lineChart) - that.myDrawLine.setOption(that.option) + that.myDrawLine.setOption(option) window.addEventListener('resize', function () { that.myDrawLine.resize() }) @@ -152,26 +149,20 @@ watch: { workOrderRegion: { handler(newV, oldV) { - let name = []; - let data1 = []; - let data2 = []; - this.workOrderRegion.map((item) => { - name.push(item.area); - data1.push(item.doneNum); - data2.push(item.todoNum); + this.name =[] + this.data1=[] + this.data2=[] + newV.map((item) => { + this.name.push(item.area); + this.data1.push(item.doneNum); + this.data2.push(item.todoNum); }) - console.log(this, "ddddd") - console.log(this.dataList, "ddddd") - this.dataList.name = name; - console.log(name) - this.dataList.data1 = data1; - this.dataList.data2 = data2; this.initDrawLine() }, deep: true } }, - mounted () { + mounted() { this.$nextTick(() => { setTimeout(() => { this.initDrawLine() diff --git a/src/views/screen/components/map.vue b/src/views/screen/components/map.vue index 9766007..5e29c18 100644 --- a/src/views/screen/components/map.vue +++ b/src/views/screen/components/map.vue @@ -12,52 +12,58 @@ import ZGSJson from '@/assets/map/zigong.json' // JOSN鍦板浘鏂囦欢 export default { name: 'mapApp', + props: { + geoCoordinates: { + type: Object, + default: {}, + }, + }, data () { return { - geoCoordinates: { - 鑷祦浜曞尯: [ - { - value: 12312, - name: 'XXX' - } - ], - 楂樻柊鍖�: [ - { - value: 12312, - name: 'XXX' - } - ], - 澶у畨鍖�: [ - { - value: 12312, - name: 'XXX' - } - ], - 娌挎哗鍖�: [ - { - value: 12312, - name: 'XXX' - } - ], - 璐′簳鍖�: [ - { - value: 12312, - name: 'XXX' - } - ], - 鑽e幙: [ - { - value: 12312, - name: 'XXX' - } - ], - 瀵岄『鍘�: [ - { - value: 12312, - name: 'XXX' - } - ] - }, + // geoCoordinates: { + // 鑷祦浜曞尯: [ + // { + // value: 12312, + // name: '寰楀垎' + // } + // ], + // 楂樻柊鍖�: [ + // { + // value: 12312, + // name: '寰楀垎' + // } + // ], + // 澶у畨鍖�: [ + // { + // value: 12312, + // name: '寰楀垎' + // } + // ], + // 娌挎哗鍖�: [ + // { + // value: 12312, + // name: '寰楀垎' + // } + // ], + // 璐′簳鍖�: [ + // { + // value: 12312, + // name: '寰楀垎' + // } + // ], + // 鑽e幙: [ + // { + // value: 12312, + // name: '寰楀垎' + // } + // ], + // 瀵岄『鍘�: [ + // { + // value: 12312, + // name: '寰楀垎' + // } + // ] + // }, // 鍦板浘閰嶇疆 // option: { @@ -357,7 +363,7 @@ that.map.setOption(option) that.map.on('click', function (params) { if (params.seriesType === 'map3D') { - console.log('Clicked adcode:', params) + that.$emit('clickMap', params.name); } }) }, diff --git a/src/views/screen/components/subheading.vue b/src/views/screen/components/subheading.vue index 3af62bf..d387fd1 100644 --- a/src/views/screen/components/subheading.vue +++ b/src/views/screen/components/subheading.vue @@ -107,6 +107,18 @@ this.isData.color ) }) + }, + watch: { + isData(){ + this.getW() + this.$nextTick(() => { + this.initChart( + this.isData.value1, + this.isData.value2, + this.isData.color + ) + }) + } } } </script> diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue index de0e889..a36e321 100644 --- a/src/views/screen/index.vue +++ b/src/views/screen/index.vue @@ -36,7 +36,7 @@ <div class="statistics-container"> <div class="DrawLine-content"> <!-- <div style="width: 100%; height: 100%" ref="myDrawLine"></div> --> - <lineChart :workOrderRegion = workOrderRegion></lineChart> + <lineChart :workOrderRegion=workOrderRegion></lineChart> </div> </div> </div> @@ -44,7 +44,7 @@ </div> <div class="map-container" ref="isMap"> - <mapApp></mapApp> + <mapApp @clickMap="getDeptId" :geoCoordinates=scoreData></mapApp> <div class="btn-container"> <img src="@/assets/images/btn-bg.png" class="bg-img"/> <div class="btn-list" v-model="activerBtnType"> @@ -192,7 +192,8 @@ getNormalRate, checkFace, checkCar, - checkVideo + checkVideo, + checkScore } from "@/api/newpage"; export default { @@ -207,6 +208,50 @@ faceList: [], workOrderData: [], workOrderRegion: [], + scoreData: { + 鑷祦浜曞尯: [ + { + value: 0, + name: '寰楀垎' + } + ], + 楂樻柊鍖�: [ + { + value: 0, + name: '寰楀垎' + } + ], + 澶у畨鍖�: [ + { + value: 0, + name: '寰楀垎' + } + ], + 娌挎哗鍖�: [ + { + value: 0, + name: '寰楀垎' + } + ], + 璐′簳鍖�: [ + { + value: 0, + name: '寰楀垎' + } + ], + 鑽e幙: [ + { + value: 0, + name: '寰楀垎' + } + ], + 瀵岄『鍘�: [ + { + value: 0, + name: '寰楀垎' + } + ] + }, // 璁惧鏁版嵁 facilityData: { video: [], @@ -308,6 +353,14 @@ }) .catch((err) => { }); + checkScore(this.activerBtnType, this.deptId) + .then((res) => { + if(res.data && Object.keys(res.data).length > 0){ + this.scoreData = res.data; + } + }) + .catch((err) => { + }); }, returnPath() { this.$router.push("/index"); @@ -340,6 +393,7 @@ item2.color = '#ff7b72' item2.title = '鏈鐞嗗伐鍗曟暟' this.statistics.push(item2) + console.log( this.statistics) }, videoData() { -- Gitblit v1.8.0