From 22d285974b8c6552b4cb5901d613e7d715d18182 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期一, 23 九月 2024 16:11:58 +0800
Subject: [PATCH] 大屏调整
---
src/views/screen/components/lineChart.vue | 46 +-
src/views/screen/components/subheading.vue | 1
public/index.html | 4
src/views/screen/components/map.vue | 178 -------------
src/views/screen/components/map3.vue | 421 ++++++++++++++++++++++++++++++++
src/views/screen/index.vue | 74 +++--
src/App.vue | 11
7 files changed, 498 insertions(+), 237 deletions(-)
diff --git a/public/index.html b/public/index.html
index 60773bb..0d260d5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,7 +12,9 @@
</title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<style>
- html,
+ html {
+ font-size: 14px
+ }
body,
#app {
height: 100%;
diff --git a/src/App.vue b/src/App.vue
index 4f406b2..3911819 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,8 +24,19 @@
<style>
#app .theme-picker {
display: none;
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ font-size: 0.72916667vw;
}
.el-dialog__body {
padding: 10px 20px !important;
}
+*{
+ margin: 0;
+ padding: 0;
+}
+#app {
+
+}
</style>
diff --git a/src/views/screen/components/lineChart.vue b/src/views/screen/components/lineChart.vue
index ea1bd1f..e7fc485 100644
--- a/src/views/screen/components/lineChart.vue
+++ b/src/views/screen/components/lineChart.vue
@@ -3,7 +3,6 @@
</template>
<script>
-import * as echarts from "echarts";
export default {
name: 'lineChart',
@@ -28,68 +27,70 @@
const that = this
let option = {
grid: {
- width: '100%'
+ left: '12%',
+ right: '5%'
},
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
},
textStyle: {
- fontSize: 12
+ fontSize: 16
}
},
// 鍥句緥缁勪欢
legend: {
type: 'plain',
- top: 20,
- data: ['宸插鐞嗗伐鍗曟暟', '鏈鐞嗗伐鍗曟暟'],
- textStyle: {
- color: '#A0AEC0'
+ top: 20,
+ data: ['宸插鐞嗗伐鍗曟暟', '鏈鐞嗗伐鍗曟暟'],
+ textStyle: {
+ color: '#A0AEC0',
+ fontSize: 14
}
},
// 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: 14,
+ margin: 20,
+ rotate: 30
},
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: 14,
+ margin: 5
}
},
// 绯诲垪鍒楄〃锛堝涓姌绾垮浘锛�
@@ -138,6 +139,7 @@
}
]
}
+
that.myDrawLine = this.$echarts.init(this.$refs.lineChart)
that.myDrawLine.setOption(option)
window.addEventListener('resize', function () {
@@ -149,9 +151,9 @@
watch: {
workOrderRegion: {
handler(newV, oldV) {
- this.name =[]
- this.data1=[]
- this.data2=[]
+ this.name = []
+ this.data1 = []
+ this.data2 = []
newV.map((item) => {
this.name.push(item.area);
this.data1.push(item.doneNum);
diff --git a/src/views/screen/components/map.vue b/src/views/screen/components/map.vue
index 2ad3d41..6bf1a28 100644
--- a/src/views/screen/components/map.vue
+++ b/src/views/screen/components/map.vue
@@ -20,184 +20,6 @@
},
data () {
return {
- // geoCoordinates: {
- // 鑷祦浜曞尯: [
- // {
- // value: 12312,
- // name: '寰楀垎'
- // }
- // ],
- // 楂樻柊鍖�: [
- // {
- // value: 12312,
- // name: '寰楀垎'
- // }
- // ],
- // 澶у畨鍖�: [
- // {
- // value: 12312,
- // name: '寰楀垎'
- // }
- // ],
- // 娌挎哗鍖�: [
- // {
- // value: 12312,
- // name: '寰楀垎'
- // }
- // ],
- // 璐′簳鍖�: [
- // {
- // value: 12312,
- // name: '寰楀垎'
- // }
- // ],
- // 鑽ｅ幙: [
- // {
- // value: 12312,
- // name: '寰楀垎'
- // }
- // ],
- // 瀵岄『鍘�: [
- // {
- // value: 12312,
- // name: '寰楀垎'
- // }
- // ]
- // },
-
- // 鍦板浘閰嶇疆
- // option: {
- // tooltip: {
- // trigger: 'item',
- // triggerOn: 'mousemove|click', // 蹇呴』浣跨敤杩欑鏂瑰紡锛屽洜涓簍ooltip闇�瑕佹湁鐐瑰嚮浜嬩欢锛屽悓鏃剁Щ鍏ffectScatter鐐瑰尯鍩熻仈鍔�
- // extraCssText: 'border:none;', // 娓呴櫎tooltip鑷甫棰滆壊
- // // hideDelay: 2000, // 鎻愮ず妗�2绉掑悗灏忔椂
- // formatter: function (params) {
- // // 鑷畾涔塼ooltip鍐呭
- // this.fetchData(params.name)
- // return `Custom Tooltip Content for ${params.name}`
- // }
- // },
-
- // series: [
- // {
- // type: 'map3D',
- // map: 'zgs',
- // boxWidth: 100,
- // regionHeight: 2,
-
- // markPoint: {
- // symbol: 'pin', // 鏍囪鐐瑰舰鐘�
- // symbolSize: 50, // 鏍囪鐐瑰ぇ灏�
- // data: [
- // {
- // name: '鏍囪鐐�1',
- // coord: ['104.3334', '29.2938'] // 鏍囪鐐圭殑涓夌淮鍧愭爣
- // }
- // // 鍙互娣诲姞鏇村鏍囪鐐�
- // ]
- // },
-
- // // 鍦板浘鐨勯鑹�
- // itemStyle: {
- // color: '#8adfff', // 鍦板浘鏉垮潡鐨勯鑹�
- // opacity: 0.98, // 鍥惧舰鐨勪笉閫忔槑搴� [ default: 1 ]
- // borderWidth: 1, // (鍦板浘鏉垮潡闂寸殑鍒嗛殧绾�)鍥惧舰鎻忚竟鐨勫搴︺�傚姞涓婃弿杈瑰悗鍙互鏇存竻鏅扮殑鍖哄垎姣忎釜鍖哄煙
- // borderColor: '#35b5ff' // 鍥惧舰鎻忚竟鐨勯鑹层�俒 default: #333 ]
- // },
-
- // realisticMaterial: {
- // detailTexture: require('../assets/images/face-num-bg3.png'),
- // textureTiling: 1,
- // textureOffset: 0,
- // roughness: 0, // 鏉愯川绮楃硻搴︼紝0瀹屽叏鍏夋粦锛�1瀹屽叏绮楃硻
- // metalness: 0,
- // roughnessAdjust: 0
- // },
-
- // shading: 'realistic',
-
- // // 鏍囩鐨勭浉鍏宠缃�
- // label: {
- // show: true, // (鍦板浘涓婄殑鍩庡競鍚嶇О)鏄惁鏄剧ず鏍囩
- // distance: 5,
- // formatter: function (params) {
- // return params.name ? params.name : ' '
- // },
- // // 鏍囩鐨勫瓧浣撴牱寮�
- // color: '#fff', // 鍦板浘鍒濆鍖栧尯鍩熷瓧浣撻鑹�
- // fontSize: 16, // 瀛椾綋澶у皬
- // fontWeight: '300'
- // },
-
- // // 榧犳爣 hover 楂樹寒鏃跺浘褰㈠拰鏍囩鐨勬牱寮�
- // emphasis: {
- // label: {
- // // label 楂樹寒鏃剁殑閰嶇疆
- // show: true,
- // color: '#fff', // 楂樹寒鏃舵爣绛鹃鑹插彉涓� 鐧借壊
- // fontSize: 16 // 楂樹寒鏃舵爣绛惧瓧浣� 鍙樺ぇ
- // },
- // scale: true,
- // itemStyle: {
- // // itemStyle 楂樹寒鏃剁殑閰嶇疆
- // color: '#ffc23e' // 楂樹寒鏃跺湴鍥炬澘鍧楅鑹叉敼鍙�
- // }
- // },
-
- // // 鍦伴潰鍙互浣挎暣涓満鏅湅璧锋潵鏇寸湡瀹烇紝鏇存湁妯″瀷鎰熴��
- // light: {
- // main: {
- // // 鍦烘櫙涓诲厜婧愮殑璁剧疆锛屽湪 globe 缁勪欢涓氨鏄お闃冲厜銆�
- // color: '#fff', // 涓诲厜婧愮殑棰滆壊銆�
- // intensity: 0.6, // 涓诲厜婧愮殑寮哄害銆�
- // shadow: true, // 涓诲厜婧愭槸鍚︽姇灏勯槾褰便�傞粯璁ゅ叧闂�傚紑鍚槾褰卞彲浠ョ粰鍦烘櫙甯︽潵鏇寸湡瀹炲拰鏈夊眰娆＄殑鍏夌収鏁堟灉銆備細澧炲姞绋嬪簭鐨勮繍琛屽紑閿�銆�
- // shadowQuality: 'high', // 闃村奖鐨勮川閲忋�傚彲閫�'low', 'medium', 'high', 'ultra'
- // alpha: 30, // 涓诲厜婧愮粫 x 杞达紝鍗充笂涓嬫棆杞殑瑙掑害銆傞厤鍚� beta 鎺у埗鍏夋簮鐨勬柟鍚戙��
- // beta: 20 // 涓诲厜婧愮粫 y 杞达紝鍗冲乏鍙虫棆杞殑瑙掑害銆�
- // },
- // ambient: {
- // // 鍏ㄥ眬鐨勭幆澧冨厜璁剧疆銆�
- // color: '#fff', // 鐜鍏夌殑棰滆壊銆俒 default: #fff ]
- // intensity: 0.45 // 鐜鍏夌殑寮哄害銆俒 default: 0.2 ]
- // },
- // ambientCubemap: {
- // exposure: 2,
- // diffuseIntensity: 1,
- // specularIntensity: 1
- // }
- // },
-
- // postEffect: {
- // depthOfField: {
- // enable: false // 鍏抽棴鏅繁鏁堟灉
- // }
- // },
-
- // groundPlane: {
- // show: false, // 鏄惁鏄剧ず鍦伴潰
- // color: '#ffffff' // 鍦伴潰棰滆壊
- // },
-
- // viewControl: {
- // projection: 'perspective', // 鎶曞奖鏂瑰紡锛岄粯璁や负閫忚鎶曞奖'perspective'锛屼篃鏀寔璁剧疆涓烘浜ゆ姇褰�'orthographic'銆�
- // autoRotate: false,
- // dispose: 100,
- // rotateSensitivity: 0, // 鏃嬭浆
- // minBeta: -13,
- // maxBeta: -13,
- // zoomSensitivity: 0, // 缂╂斁
- // panSensitivity: 0, // 骞崇Щ
- // center: [0, 0, 0],
- // alpha: 70, // 鍊炬枩瑙掑害
- // animationDurationUpdate: 1000, // 杩囨浮鍔ㄧ敾鐨勬椂闀�
- // animationEasingUpdate: 'cubicInOut' // 杩囨浮鍔ㄧ敾鐨勭紦鍔ㄦ晥鏋�
- // },
- // left: '-5%',
- // top: '5%'
- // }
- // ]
- // },
activerName: null, // 閫変腑鐨勫悕绉�
activerData: [], // 閫変腑鐨勬暟鎹�
map: null
diff --git a/src/views/screen/components/map3.vue b/src/views/screen/components/map3.vue
new file mode 100644
index 0000000..1fbcbf2
--- /dev/null
+++ b/src/views/screen/components/map3.vue
@@ -0,0 +1,421 @@
+<template>
+ <div class="map-container">
+ <div class="map-main-container" id="main"></div>
+ </div>
+</template>
+
+<script>
+import * as chinaJson from '@/assets/map/zigong.json'
+
+export default {
+ name: 'mapApp',
+ props: {
+ geoCoordinates: {
+ type: Object,
+ default: {},
+ },
+ },
+ data() {
+ return {
+ myChart: null, // ECharts 瀹炰緥
+ big: 130,
+ data: [
+ {
+ name: '鑷祦浜曞尯',
+ number: '0',
+ value: [104.616237686031, 29.081, 300]
+ },
+ {
+ name: '楂樻柊鍖�',
+ number: '0',
+ value: [104.84, 29.405, 300]
+ },
+ {
+ name: '澶у畨鍖�',
+ number: '0',
+ value: [105.136, 29.30548885792289, 300]
+ },
+ {
+ name: '娌挎哗鍖�',
+ number: '0',
+ value: [104.956237686031, 29.2, 300]
+ },
+ {
+ name: '璐′簳鍖�',
+ number: '0',
+ value: [104.436237686031, 29.16048885792289, 300]
+ },
+ {
+ name: '鑽ｅ幙',
+ number: '0',
+ value: [104.480237686031, 29.40048885792289, 300]
+ },
+ {
+ name: '瀵岄『鍘�',
+ number: '0',
+ value: [105.12, 29.076, 300]
+ }
+ ],
+ }
+ },
+ mounted() {
+ this.$nextTick(() => {
+ setTimeout(() => {
+ this.myChart = this.$echarts.init(document.getElementById('main'))
+ this.initializeMap()
+ }, 100)
+ })
+ },
+ methods: {
+ initializeMap() {
+ this.updateMapData()
+ this.getChinData('鑷础甯�', chinaJson)
+ },
+ updateMapData() {
+ this.data.forEach(item => {
+ if (this.geoCoordinates[item.name]) {
+ item.number = this.geoCoordinates[item.name].score || '0'
+ }
+ })
+ },
+ updateChart() {
+ if (this.myChart) {
+ const option = this.myChart.getOption();
+ // Update the scatter3D series data
+ const scatterSeries = option.series.find(s => s.type === 'scatter3D' && s.name !== '鏁ｇ偣鍥�');
+ if (scatterSeries) {
+ scatterSeries.data = this.data;
+ }
+ this.myChart.setOption(option);
+ }
+ },
+ getChinData(name, jsons) {
+ this.num = 1
+ this.$echarts.registerMap(name, jsons)
+ const myChart = this.myChart
+ const that = this
+ myChart.clear()
+ const option = {
+ // tooltip: {
+ // trigger: 'item',
+ // formatter: '{b}'
+ // },
+ geo3D: {
+ name: name,
+ type: 'map',
+ map: name,
+ left: '-5%',
+ top: '5%',
+ boxWidth: 100,
+ regionHeight: 2,
+ zlevel: 5,
+
+ tooltip: {
+ show: true,
+ trigger: 'item'
+ },
+
+ itemStyle: {
+ color: '#8adfff',
+ opacity: 1,
+ borderWidth: 1,
+ borderColor: '#008ee0' // 杈规棰滆壊涓烘洿娣辩殑钃濊壊
+ },
+
+ label: {
+ show: true, // (鍦板浘涓婄殑鍩庡競鍚嶇О)鏄惁鏄剧ず鏍囩
+ distance: 5,
+ formatter: function (params) {
+ return params.name ? params.name : ' '
+ },
+ // 鏍囩鐨勫瓧浣撴牱寮�
+ color: '#fff', // 鍦板浘鍒濆鍖栧尯鍩熷瓧浣撻鑹�
+ fontSize: 14, // 瀛椾綋澶у皬
+ fontWeight: '300'
+ },
+
+ emphasis: {
+ label: {
+ show: true,
+ textStyle: {
+ color: '#ffffff' // 楂樹寒鏂囧瓧涓轰寒钃濊壊
+ }
+ }
+ },
+
+ shading: 'realistic',
+
+ realisticMaterial: {
+ detailTexture: require('@/assets/images/face-num-bg3.png'),
+ textureTiling: 1,
+ textureOffset: 0,
+ roughness: 0, // 鏉愯川绮楃硻搴︼紝0瀹屽叏鍏夋粦锛�1瀹屽叏绮楃硻
+ metalness: 0,
+ roughnessAdjust: 0
+ },
+
+ viewControl: {
+ projection: 'perspective', // 鎶曞奖鏂瑰紡锛岄粯璁や负閫忚鎶曞奖'perspective'锛屼篃鏀寔璁剧疆涓烘浜ゆ姇褰�'orthographic'銆�
+ autoRotate: false,
+ dispose: 100,
+ rotateSensitivity: 0, // 鏃嬭浆
+ minBeta: -13,
+ maxBeta: -13,
+ zoomSensitivity: 0, // 缂╂斁
+ panSensitivity: 0, // 骞崇Щ
+ center: [0, 0, 0],
+ alpha: 70, // 鍊炬枩瑙掑害
+ animationDurationUpdate: 1000, // 杩囨浮鍔ㄧ敾鐨勬椂闀�
+ animationEasingUpdate: 'cubicInOut' // 杩囨浮鍔ㄧ敾鐨勭紦鍔ㄦ晥鏋�
+ },
+ light: {
+ main: {
+ // 鍦烘櫙涓诲厜婧愮殑璁剧疆锛屽湪 globe 缁勪欢涓氨鏄お闃冲厜銆�
+ color: '#fff', // 涓诲厜婧愮殑棰滆壊銆�
+ intensity: 0.6, // 涓诲厜婧愮殑寮哄害銆�
+ shadow: true, // 涓诲厜婧愭槸鍚︽姇灏勯槾褰便�傞粯璁ゅ叧闂�傚紑鍚槾褰卞彲浠ョ粰鍦烘櫙甯︽潵鏇寸湡瀹炲拰鏈夊眰娆＄殑鍏夌収鏁堟灉銆備細澧炲姞绋嬪簭鐨勮繍琛屽紑閿�銆�
+ shadowQuality: 'high', // 闃村奖鐨勮川閲忋�傚彲閫�'low', 'medium', 'high', 'ultra'
+ alpha: 30, // 涓诲厜婧愮粫 x 杞达紝鍗充笂涓嬫棆杞殑瑙掑害銆傞厤鍚� beta 鎺у埗鍏夋簮鐨勬柟鍚戙��
+ beta: 20 // 涓诲厜婧愮粫 y 杞达紝鍗冲乏鍙虫棆杞殑瑙掑害銆�
+ },
+ ambient: {
+ // 鍏ㄥ眬鐨勭幆澧冨厜璁剧疆銆�
+ color: '#fff', // 鐜鍏夌殑棰滆壊銆俒 default: #fff ]
+ intensity: 0.45 // 鐜鍏夌殑寮哄害銆俒 default: 0.2 ]
+ },
+ ambientCubemap: {
+ exposure: 2,
+ diffuseIntensity: 1,
+ specularIntensity: 1
+ }
+ },
+ selectedMode: false
+ },
+
+ series: [
+ {
+ name: name,
+ type: 'map3D',
+ map: name,
+ boxWidth: 100,
+ regionHeight: 2,
+ left: '-5%',
+ top: '5%',
+ zlevel: 10,
+
+ // tooltip: {
+ // show: true,
+ // trigger: 'item'
+ // },
+
+ itemStyle: {
+ color: '#8adfff',
+ opacity: 1,
+ borderWidth: 1,
+ borderColor: '#008ee0' // 杈规棰滆壊涓烘洿娣辩殑钃濊壊
+ },
+
+ label: {
+ show: false // (鍦板浘涓婄殑鍩庡競鍚嶇О)鏄惁鏄剧ず鏍囩
+ },
+
+ emphasis: {
+ label: {
+ show: false,
+ textStyle: {
+ color: '#ffffff' // 楂樹寒鏂囧瓧涓轰寒钃濊壊
+ }
+ }
+ },
+
+ viewControl: {
+ projection: 'perspective', // 鎶曞奖鏂瑰紡锛岄粯璁や负閫忚鎶曞奖'perspective'锛屼篃鏀寔璁剧疆涓烘浜ゆ姇褰�'orthographic'銆�
+ autoRotate: false,
+ dispose: 100,
+ rotateSensitivity: 0, // 鏃嬭浆
+ minBeta: -13,
+ maxBeta: -13,
+ zoomSensitivity: 0, // 缂╂斁
+ panSensitivity: 0, // 骞崇Щ
+ center: [0, 0, 0],
+ alpha: 70 // 鍊炬枩瑙掑害
+ }
+ },
+ {
+ name: '鏁ｇ偣鍥�',
+ type: 'scatter3D',
+ coordinateSystem: 'geo3D',
+ zlevel: 10,
+
+ silent: true,
+
+ itemStyle: {
+ color: '#fc840e',
+ borderWidth: 1,
+ borderColor: '#fff'
+ },
+
+ data: [
+ {
+ name: '鑷祦浜曞尯',
+ value: [104.665471408, 29.23008885, 300]
+ },
+ {
+ name: '楂樻柊鍖�',
+ value: [104.805193, 29.3, 300]
+ },
+ {
+ name: '澶у畨鍖�',
+ value: [104.90805, 29.345946, 300]
+ },
+ {
+ name: '娌挎哗鍖�',
+ value: [104.80804, 29.200594, 300]
+ },
+ {
+ name: '璐′簳鍖�',
+ value: [104.579106, 29.241427, 300]
+ },
+ {
+ name: '鑽ｅ幙',
+ value: [104.3534, 29.3538, 300]
+ },
+ {
+ name: '瀵岄『鍘�',
+ value: [104.96, 29.08, 300]
+ }
+ ]
+ },
+ {
+ type: 'lines3D',
+ coordinateSystem: 'geo3D',
+ polyline: true,
+ lineStyle: {
+ color: '#a4ddee',
+ width: 1,
+ opacity: 1
+ },
+ data: [
+ {
+ coords: [
+ [104.665471408, 29.23008885, 300],
+ [104.6, 29.125, 430]
+ ]
+ },
+ {
+ coords: [
+ [104.805193, 29.30148885792289, 300],
+ [104.780237686031, 29.39548885792289, 430]
+ ]
+ },
+ {
+ coords: [
+ [104.90805, 29.345946, 300],
+ [105.056237686031, 29.33548885792289, 430]
+ ]
+ },
+ {
+ coords: [
+ [104.80804, 29.200594, 300],
+ [104.906237686031, 29.20048885792289, 430]
+ ]
+ },
+ {
+ coords: [
+ [104.579106, 29.241427, 300],
+ [104.486237686031, 29.19048885792289, 430]
+ ]
+ },
+ {
+ coords: [
+ [104.3534, 29.3538, 300],
+ [104.456237686031, 29.39048885792289, 430]
+ ]
+ },
+ {
+ coords: [
+ [104.96, 29.08, 300],
+ [105.05, 29.083, 430]
+ ]
+ }
+ ],
+ effect: {
+ show: true,
+ constantSpeed: 10,
+ symbol: 'arrow', // 浣跨敤绠ご鎸囩ず鏍囧織
+ trailLength: 0, // 涓嶆樉绀哄熬杩�
+ symbolSize: 10
+ }
+ }
+ ]
+ }
+ // 娣诲姞鍔ㄦ�佹爣娉�
+ option.series.push({
+ type: 'scatter3D',
+ coordinateSystem: 'geo3D',
+ symbol: 'circle',
+ symbolSize: 0,
+ data: that.data,
+
+ itemStyle: {
+ opacity: 1,
+ borderWidth: 1,
+ borderColor: 'a4ddee'
+ },
+
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ color: '#c6f4ff',
+ fontSize: '16px',
+ backgroundColor: 'rgba(25,56,97,1)',
+ borderColor: '#a4ddee',
+ borderWidth: 0.5,
+ borderRadius: 5,
+ padding: [8, 15]
+ },
+
+ formatter: function (params) {
+ return `{style|${params.data.name}\n寰楀垎锛�${params.data.number}}`
+ },
+ rich: {
+ style: {
+ fontSize: 16,
+ lineHeight: 22
+ // 鍏朵粬闇�瑕佺殑鏍峰紡
+ }
+ },
+ distance: 0 // 鏍囩涓庣偣鐨勮窛绂伙紝纭繚鏍囩涓嶄細閲嶅彔
+ }
+ })
+ myChart.setOption(option)
+ myChart.on('click', function (params) {
+ if (params.seriesType === 'map3D') {
+ that.$emit('clickMap', params.name);
+ }
+ })
+ },
+ },
+ watch: {
+ geoCoordinates: {
+ handler(newValue) {
+ this.updateMapData(newValue);
+ this.updateChart();
+ },
+ deep: true
+ }
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.map-container {
+ position: relative;
+}
+
+.map-main-container {
+ width: 100%;
+ height: 100%;
+}
+</style>
diff --git a/src/views/screen/components/subheading.vue b/src/views/screen/components/subheading.vue
index bca2bc0..9935174 100644
--- a/src/views/screen/components/subheading.vue
+++ b/src/views/screen/components/subheading.vue
@@ -148,7 +148,6 @@
.title {
text-align: center;
- font-size: 14px;
color: #dcf8ff;
white-space: nowrap;
overflow: hidden;
diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
index 987a159..4f51f7d 100644
--- a/src/views/screen/index.vue
+++ b/src/views/screen/index.vue
@@ -192,7 +192,7 @@
<script>
import itemSubheading from '../screen/components/subheading.vue' // 鐜舰缁熻鍥�
import lineChart from '../screen/components/lineChart.vue' // 鎶樼嚎缁熻鍥�
-import mapApp from '../screen/components/map.vue' // 鍦板浘
+import mapApp from '../screen/components/map3.vue' // 鍦板浘
import {
getDepartmentData,
getDeviceData,
@@ -405,7 +405,6 @@
item2.color = '#ff7b72'
item2.title = '鏈鐞�'
this.statistics.push(item2)
- console.log( this.statistics)
},
videoData() {
@@ -916,8 +915,8 @@
background-repeat: no-repeat;
display: flex;
flex-direction: column;
- justify-content: center;
- align-items: center;
+ //justify-content: center;
+ //align-items: center;
.item-facility-icon {
margin: 0 auto;
@@ -935,9 +934,9 @@
flex-direction: column;
justify-content: space-around;
text-align: center;
- font-size: 14px;
list-style-type: none;
- padding-left: 0;
+ //font-size: 14px;
+ //padding-left: 0;
li:nth-child(1) {
.value {
@@ -979,7 +978,7 @@
display: flex;
flex-direction: column;
height: 0;
- overflow: hidden;
+ //overflow: hidden;
.title {
width: 100%;
@@ -1020,9 +1019,11 @@
.list-title-container {
width: 100%;
- height: 45px;
- margin: 4px 0 0 0;
- line-height: 45px;
+ //height: 45px;
+ //margin: 4px 0 0 0;
+ //line-height: 45px;
+ height: 4.17vh;
+ line-height: 4.17vh;
list-style-type: none;
display: flex;
flex-direction: row;
@@ -1095,9 +1096,9 @@
.list-content-to {
height: 100%;
- overflow-y: auto;
+ overflow-y: hidden;
overflow-x: hidden;
- padding: 10px 0;
+ //padding: 10px 0;
}
.item-list {
@@ -1106,19 +1107,22 @@
align-items: center;
list-style-type: none;
border-bottom: 1px dashed #223654;
- margin: 10px 0;
+ margin: 8px 0;
li {
width: 25%;
text-align: center;
- font-size: 14px;
+ //font-size: 14px;
+ font-size: 0.72916667vw !important;
color: #dcf8ff;
flex-shrink: 0;
flex-grow: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- height: 28px;
- line-height: 28px;
+ //height: 28px;
+ //line-height: 28px;
+ height: 2.59vh;
+ line-height: 2.59vh;
}
.name {
@@ -1201,7 +1205,8 @@
}
.footer-container {
- height: 220px;
+ //height: 220px;
+ height: 24.15vh;
box-sizing: border-box;
position: relative;
background-image: url("../../assets/images/footer-bg.png");
@@ -1227,19 +1232,10 @@
position: relative;
background-image: url("../../assets/images/face-bg.png");
- background-size: 500px 200px;
+ //background-size: 500px 200px;
+ background-size: 26.04166vw auto;
background-position: center;
background-repeat: no-repeat;
-
- // .face-bj-img {
- // position: absolute;
- // left: 50%;
- // top: 50%;
- // transform: translate(-50%, -50%);
- // width: 83.1946755%;
- // display: block;
- // z-index: 2;
- // }
.item-face-container {
position: absolute;
@@ -1247,7 +1243,8 @@
width: 22.296173%;
.proportion {
- width: 50px;
+ //width: 50px;
+ width: 2.60416vw;
margin: 0 auto;
color: #00eaff;
text-shadow: 2px 2px 4px #152944;
@@ -1263,13 +1260,14 @@
left: 50%;
top: 53%;
transform: translate(-50%, -50%);
- font-size: 14px;
+ //font-size: 14px;
}
}
.title {
text-align: center;
- font-size: 12px;
+ //font-size: 12px;
+ font-size: 0.625vw;
color: #dcf8ff;
white-space: nowrap; /* 涓嶆崲琛� */
overflow: hidden; /* 闅愯棌瓒呭嚭鐨勫唴瀹� */
@@ -1281,7 +1279,8 @@
.car-container {
position: relative;
background-image: url("../../assets/images/car-bg2.png");
- background-size: 500px 200px;
+ //background-size: 500px 200px;
+ background-size: 26.04166vw auto;
background-position: center;
background-repeat: no-repeat;
@@ -1302,6 +1301,7 @@
font-size: 12px;
line-height: 26px;
padding: 0 15px;
+ font-size: 0.625vw;
position: absolute;
z-index: 5;
@@ -1349,7 +1349,8 @@
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
- font-size: 20px;
+ //font-size: 20px;
+ font-size: 1.04166vw;
font-weight: bold;
color: #00fcff;
text-shadow: 2px 2px 4px #152944;
@@ -1359,10 +1360,13 @@
.item-video-title {
text-align: center;
color: #dcf8ff;
- height: 32px;
- font-size: 13px;
+ //height: 32px;
+ //font-size: 13px;
+ //flex-shrink: 0;
+ //flex-grow: 0;
flex-shrink: 0;
flex-grow: 0;
+ height: 3.51851vh;
display: -webkit-box;
-webkit-line-clamp: 2; /* 鏄剧ず鐨勮鏁� */
-webkit-box-orient: vertical;
--
Gitblit v1.8.0