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'
- }
- ],
- 鑽ｅ幙: [
- {
- value: 12312,
- name: 'XXX'
- }
- ],
- 瀵岄『鍘�: [
- {
- value: 12312,
- name: 'XXX'
- }
- ]
- },
+ // geoCoordinates: {
+ // 鑷祦浜曞尯: [
+ // {
+ // value: 12312,
+ // name: '寰楀垎'
+ // }
+ // ],
+ // 楂樻柊鍖�: [
+ // {
+ // value: 12312,
+ // name: '寰楀垎'
+ // }
+ // ],
+ // 澶у畨鍖�: [
+ // {
+ // value: 12312,
+ // name: '寰楀垎'
+ // }
+ // ],
+ // 娌挎哗鍖�: [
+ // {
+ // value: 12312,
+ // name: '寰楀垎'
+ // }
+ // ],
+ // 璐′簳鍖�: [
+ // {
+ // value: 12312,
+ // name: '寰楀垎'
+ // }
+ // ],
+ // 鑽ｅ幙: [
+ // {
+ // 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: '寰楀垎'
+ }
+ ],
+ 鑽ｅ幙: [
+ {
+ 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