From 56ba7c96dd7054e5d544a9ffbe80593107ecb855 Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期二, 02 七月 2024 15:18:58 +0800
Subject: [PATCH] 1.金华智研院看板开发100%
---
package.json | 1
src/assets/images/map.png | 0
src/views/kb/xkd.vue | 450 ++++++++++++++++++++
src/utils/myEcharts.js | 758 ++++++++++++++++++++++++++++++++++++
4 files changed, 1,190 insertions(+), 19 deletions(-)
diff --git a/package.json b/package.json
index f7fc16b..e85b536 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"vue": "2.6.10",
+ "vue-count-to": "^1.0.13",
"vue-router": "3.0.6",
"vuex": "3.1.0"
},
diff --git a/src/assets/images/map.png b/src/assets/images/map.png
new file mode 100644
index 0000000..b8aae1e
--- /dev/null
+++ b/src/assets/images/map.png
Binary files differ
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index d9ab55a..d6d01c6 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -4501,3 +4501,761 @@
return option
}
+
+export function echart06() {
+ var fontColor = '#30eee9'
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '5%',
+ right: '10%',
+ top: '20%',
+ bottom: '15%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ color: fontColor
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#397cbc'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#195384'
+ }
+ },
+ data: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: ' ',
+ // min: 0,
+ // max: 1000,
+ splitNumber: 4,
+ axisLabel: {
+ formatter: '{value}',
+ textStyle: {
+ color: '#2ad1d2'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#27b4c2'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#11366e'
+ }
+ }
+ }
+
+ ],
+ series: [
+
+ {
+ name: ' ',
+ type: 'line',
+ // stack: '鎬婚噺',
+ // symbol: 'circle',
+ // symbolSize: 8,
+
+ itemStyle: {
+ normal: {
+ color: '#00d4c7',
+ lineStyle: {
+ color: '#00d4c7',
+ width: 1
+ },
+ areaStyle: {
+ // color: '#94C9EC'
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: 'rgba(7,44,90,0.3)'
+ }, {
+ offset: 1,
+ color: 'rgba(0,212,199,0.9)'
+ }])
+ }
+ }
+ },
+ data: [500, 800, 100, 900, 1000, 800]
+ }
+
+ ]
+ }
+
+ return option
+}
+
+export function echart07() {
+ var fontColor = '#30eee9'
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '5%',
+ right: '5%',
+ top: '35%',
+ bottom: '0%',
+ containLabel: true
+ },
+ title: {
+ text: '鏁村巶缁堟鐜�',
+ x: '40%',
+ y: '18%',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '14',
+ fontWeight: 'bolder'
+ }
+
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ rotate: 45, // 鏃嬭浆 45 搴�
+ color: fontColor
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#397cbc'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#195384'
+ }
+ },
+ data: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: ' ',
+ // min: 0,
+ max: 100,
+ splitNumber: 2,
+ axisLabel: {
+ formatter: '{value} %',
+ textStyle: {
+ color: '#2ad1d2'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#27b4c2'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#11366e'
+ }
+ }
+ }
+
+ ],
+ series: [
+
+ {
+ name: ' ',
+ type: 'line',
+ // stack: '鎬婚噺',
+ // symbol: 'circle',
+ // symbolSize: 8,
+
+ itemStyle: {
+ normal: {
+ color: '#00d4c7',
+ lineStyle: {
+ color: '#00d4c7',
+ width: 1
+ },
+ areaStyle: {
+ // color: '#94C9EC'
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: 'rgba(7,44,90,0.3)'
+ }, {
+ offset: 1,
+ color: 'rgba(0,212,199,0.9)'
+ }])
+ }
+ }
+ },
+ data: [99, 98, 100, 96, 100, 97]
+ }
+
+ ]
+ }
+
+ return option
+}
+
+export function echart08() {
+ var fontColor = '#30eee9'
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '5%',
+ right: '5%',
+ top: '35%',
+ bottom: '0%',
+ containLabel: true
+ },
+ title: {
+ text: '缂洪櫡鍒嗙被姣斾緥',
+ x: '40%',
+ y: '18%',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '14',
+ fontWeight: 'bolder'
+ }
+
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ rotate: 45, // 鏃嬭浆 45 搴�
+ color: fontColor
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#397cbc'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#195384'
+ }
+ },
+ data: ['鍘嬮摳', '鎴愬瀷', '鎶涘厜', '鐐圭剨', '鐑ゆ紗', '鐢甸晙']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: ' ',
+ // min: 0,
+ max: 100,
+ splitNumber: 2,
+ axisLabel: {
+ formatter: '{value} %',
+ textStyle: {
+ color: '#2ad1d2'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#27b4c2'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#11366e'
+ }
+ }
+ }
+
+ ],
+ series: [
+ {
+ name: ' ',
+ type: 'bar',
+ // stack: '鎬婚噺',
+ // symbol: 'circle',
+ // symbolSize: 8,
+ barWidth: 10,
+ itemStyle: {
+ normal: {
+ color: '#00d4c7',
+ lineStyle: {
+ color: '#00d4c7',
+ width: 1
+ },
+ areaStyle: {
+ // color: '#94C9EC'
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: 'rgba(7,44,90,0.3)'
+ }, {
+ offset: 1,
+ color: 'rgba(0,212,199,0.9)'
+ }])
+ }
+ }
+ },
+ data: [55, 68, 60, 86, 40, 37]
+ }
+
+ ]
+ }
+
+ return option
+}
+
+export function echart09() {
+ var fontColor = '#30eee9'
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '5%',
+ right: '5%',
+ top: '35%',
+ bottom: '0%',
+ containLabel: true
+ },
+ title: {
+ text: '铏氭嫙娴嬮噺',
+ x: '45%',
+ y: '18%',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '14',
+ fontWeight: 'bolder'
+ }
+
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ rotate: 45, // 鏃嬭浆 45 搴�
+ color: fontColor
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#397cbc'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#195384'
+ }
+ },
+ data: ['Pro01', 'Pro02', 'Pro03', 'Pro04', 'Pro05', 'Pro06']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: ' ',
+ // min: 0,
+ max: 3000,
+ splitNumber: 2,
+ axisLabel: {
+ formatter: '{value}',
+ textStyle: {
+ color: '#2ad1d2'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#27b4c2'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#11366e'
+ }
+ }
+ }
+
+ ],
+ series: [
+
+ {
+ name: ' ',
+ type: 'line',
+ // stack: '鎬婚噺',
+ // symbol: 'circle',
+ // symbolSize: 8,
+
+ itemStyle: {
+ normal: {
+ color: '#00d4c7',
+ lineStyle: {
+ color: '#00d4c7',
+ width: 1
+ },
+ areaStyle: {
+ // color: '#94C9EC'
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: 'rgba(7,44,90,0.3)'
+ }, {
+ offset: 1,
+ color: 'rgba(0,212,199,0.9)'
+ }])
+ }
+ }
+ },
+ data: [2000, 2298, 2800, 0, 2200, 1600]
+ }
+
+ ]
+ }
+
+ return option
+}
+
+export function echart10() {
+ var fontColor = '#30eee9'
+ const option = {
+ backgroundColor: 'transparent',
+ grid: {
+ left: '5%',
+ right: '5%',
+ top: '30%',
+ bottom: '5%',
+ containLabel: true
+ },
+ title: {
+ text: '鍘嬪姏鐩戞帶',
+ x: '46%',
+ y: '12%',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '14',
+ fontWeight: 'bolder'
+ }
+
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ rotate: 90, // 鏃嬭浆 45 搴�
+ color: fontColor
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#397cbc'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#195384'
+ }
+ },
+ data: ['13:35', '13:40', '13:45', '13:50', '13:55', '14:00', '14:05', '14:10', '14:15', '14:20', '14:25', '14:30', '14:35', '14:40']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: ' ',
+ min: -20,
+ max: 20,
+ splitNumber: 2,
+ axisLabel: {
+ formatter: '{value}',
+ textStyle: {
+ color: '#2ad1d2'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#27b4c2'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#11366e'
+ }
+ }
+ }
+
+ ],
+ series: [
+ {
+ name: ' ',
+ type: 'bar',
+ // stack: '鎬婚噺',
+ // symbol: 'circle',
+ // symbolSize: 8,
+ barWidth: 10,
+ itemStyle: {
+ normal: {
+ color: '#00d4c7',
+ lineStyle: {
+ color: '#00d4c7',
+ width: 1
+ },
+ areaStyle: {
+ // color: '#94C9EC'
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+ offset: 0,
+ color: 'rgba(7,44,90,0.3)'
+ }, {
+ offset: 1,
+ color: 'rgba(0,212,199,0.9)'
+ }])
+ }
+ }
+ },
+ data: [-10, -20, 5, 10, -5, 20, 10, -10, -20, -10, 5, 10, 20, 10]
+ }
+
+ ]
+ }
+
+ return option
+}
+
+export function echart11() {
+ const _legendColor = '#8FD8FF'
+ const _fontSize = 16
+ const _fontColor = '#8FD8FF'
+ // const data1 = [70, 90, 100, 70, 90, 100]
+ // const data2 = [80, 60, 80, 50, 90, 60]
+ const data1 = [70 + Math.random() * 20, 90 - Math.random() * 20, 100 - Math.random() * 20, 70 + Math.random() * 20, 90 - Math.random() * 20, 80 - Math.random() * 20]
+ const data2 = [80 + Math.random() * 20, 60 + Math.random() * 20, 80 - Math.random() * 20, 50 + Math.random() * 20, 90 - Math.random() * 20, 60 + Math.random() * 20]
+ const option = {
+ backgroundColor: 'transparent',
+ legend: {
+ x: '55%',
+ y: '10%',
+ itemWidth: 10,
+ itemHeight: 10,
+ textStyle: {
+ fontSize: 16,
+ color: 'rgba(255,255,255,.7)'
+ }
+ },
+ grid: {
+ left: '2%',
+ top: '30%',
+ right: '2%',
+ bottom: '0%',
+ containLabel: true
+ },
+ yAxis: {
+ // max: Math.ceil(Math.max(...data1) * 1.2),
+ // max: 100,
+ type: 'value',
+ position: 'left',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#4E84AC'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ formatter: '{value}',
+ color: '#00FFFF',
+ fontSize: 14
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ xAxis: {
+ type: 'category',
+ nameTextStyle: {
+ fontSize: 16,
+ color: '#7dd6ea'
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ // margin: 20,
+ textStyle: {
+ color: colorX,
+ fontSize: 16
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#4E84AC'
+ // width: 3
+ }
+ },
+ data: ['閽㈡潗鏀瑰埗', '鍐峰ⅸ', '鐑ⅸ', '鐑鐞�', '杈惧厠缃�', '闀�閿�']
+ },
+ series: [
+ {
+ name: '璁″垝浜ч噺',
+ type: 'bar',
+ barWidth: 15,
+ barGap: '30%',
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(0,234,255, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(0,234,255, .1)'
+ }
+ ])
+ }
+ },
+ // label: {
+ // show: true,
+ // position: 'top',
+ // textStyle: {
+ // fontSize: 36,
+ // color: '#00EAFF'
+ // },
+ // formatter: function(params) {
+ // return params.value + '%'
+ // }
+ // },
+ data: data1,
+ z: 10,
+ zlevel: 0
+ },
+ {
+ // 鍒嗛殧
+ type: 'pictorialBar',
+ itemStyle: {
+ normal: {
+ color: '#0F375F'
+ }
+ },
+ symbolRepeat: 'fixed',
+ symbolMargin: 15,
+ symbol: 'rect',
+ symbolClip: true,
+ symbolSize: [15, 2],
+ symbolPosition: 'start',
+ symbolOffset: [-10, 0],
+ data: data1,
+ width: 2,
+ z: 0,
+ zlevel: 1
+ },
+ {
+ name: '瀹為檯浜ч噺',
+ type: 'bar',
+ barWidth: 15,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: 'rgba(252,160,0, 1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(252,160,0, .1)'
+ }
+ ])
+ }
+ },
+ // label: {
+ // show: true,
+ // position: 'top',
+ // textStyle: {
+ // fontSize: 16,
+ // color: '#FFA200'
+ // },
+ // formatter: function(params) {
+ // return params.value + '%'
+ // }
+ // },
+ data: data2,
+ z: 10,
+ zlevel: 0
+ },
+ {
+ // 鍒嗛殧
+ type: 'pictorialBar',
+ itemStyle: {
+ normal: {
+ color: '#0F375F'
+ }
+ },
+ symbolRepeat: 'fixed',
+ symbolMargin: 15,
+ symbol: 'rect',
+ symbolClip: true,
+ symbolSize: [15, 2],
+ symbolPosition: 'start',
+ symbolOffset: [10, 0],
+ data: data2,
+ width: 2,
+ z: 0,
+ zlevel: 1
+ }
+ ]
+ }
+ return option
+}
diff --git a/src/views/kb/xkd.vue b/src/views/kb/xkd.vue
index 9f388a1..46accbf 100644
--- a/src/views/kb/xkd.vue
+++ b/src/views/kb/xkd.vue
@@ -19,8 +19,8 @@
<div class="box03" />
<div class="text2">绱鎷︽埅</div>
<div class="text3">绱闃绘</div>
- <div class="text4">874娆�</div>
- <div class="text5">874娆�</div>
+ <div class="text4">{{ number5 }}娆�</div>
+ <div class="text5">{{ number5 }}娆�</div>
</dv-border-box-12>
<dv-border-box-12 class="block02 block">
<div class="block_title">鑷姩缂洪櫡鍒嗙被绯荤粺</div>
@@ -30,9 +30,104 @@
<div class="block_title">缂洪櫡鍒嗙被缁熻</div>
<div id="echart03" style="width: 100%;height: 100%;" />
</dv-border-box-12>
-
</div>
- <div class="center content_block" />
+ <div class="center content_block">
+ <div class="center01">
+ <div class="block04">
+ <dv-border-box-10 style="width: 100%;height: 100%;">
+ <div style="color: #c7e7ff">鎬讳笂绾挎椂闀�(H)</div>
+ <div style="font-size: 18px;font-weight: bolder">
+ <countTo :start-val="0" :end-val="number1" :duration="3000" />
+ </div>
+ </dv-border-box-10>
+ </div>
+ <div class="block04">
+ <dv-border-box-10 style="width: 100%;height: 100%;">
+ <div style="color: #c7e7ff">鎬昏闂噺(PV)</div>
+ <div style="font-size: 18px;font-weight: bolder">
+ <countTo :start-val="0" :end-val="number2" :duration="3000" />
+ </div>
+ </dv-border-box-10>
+ </div>
+ <div class="block04">
+ <dv-border-box-10 style="width: 100%;height: 100%;">
+ <div style="color: #c7e7ff">鎬绘暟鎹噺(TB)</div>
+ <div style="font-size: 18px;font-weight: bolder">
+ <countTo :start-val="0" :end-val="number3" :duration="3000" />
+ </div>
+ </dv-border-box-10>
+ </div>
+ <div class="block04">
+ <dv-border-box-10 style="width: 100%;height: 100%;">
+ <div style="color: #c7e7ff">绯荤粺鍚炲悙閲�(娆�/s)</div>
+ <div style="font-size: 18px;font-weight: bolder">
+ <countTo :start-val="0" :end-val="number4" :duration="3000" />
+ </div>
+ </dv-border-box-10>
+ </div>
+ <div class="block04">
+ <dv-border-box-10 style="width: 100%;height: 100%;">
+ <div id="echart06" style="width: 100%;height: 100%" />
+ </dv-border-box-10>
+ </div>
+ </div>
+ <div class="center02">
+ <div class="center02_left">
+ <div class="img001" />
+ </div>
+ <div class="center02_right">
+ <dv-decoration-7 style="width:100%;height:30px;padding: 0 20px">姘稿悍甯�(娴�)</dv-decoration-7>
+ <div style="width: 100%;height: 270px;">
+ <dv-border-box-1>
+ <dv-scroll-board :config="config4" style="padding: 30px;width:100%;height:210px;margin-top: -60px;" />
+ </dv-border-box-1>
+ </div>
+ </div>
+ </div>
+ <div class="center03">
+ <dv-border-box-12 class="block">
+ <div class="block_title">璁惧绠＄悊灞�</div>
+ <div style="display: flex;flex-direction: column;width: 100%;">
+ <div style="display: flex;justify-content: space-evenly;height: 275px;width: 100%;margin-top: 30px;">
+ <div
+ style="display:flex;flex-direction: column;width: 52%;justify-content: center;align-items: center"
+ >
+ <div style="height: 30px;font-weight: bolder">鏅鸿兘宸ュ巶璁惧鐩戞帶涓績</div>
+ <div style="height: 240px;">
+ <dv-scroll-board :config="config5" style="padding: 0px;width:240px;height:100%;margin-top: 0px;" />
+ </div>
+ </div>
+ <div
+ style="display:flex;flex-direction: column;width: 46%;justify-content: center;align-items: center"
+ >
+ <div style="height: 30px;">瀹炴椂鏁伴噺</div>
+ <div style="height: 240px;">
+ <dv-scroll-board :config="config6" style="padding: 0px;width:210px;height:100%;margin-top: 0px;" />
+ </div>
+ </div>
+ </div>
+ <!-- <div style="height: 155px;">123</div>-->
+ </div>
+ </dv-border-box-12>
+ <dv-border-box-12 class="block">
+ <div class="block_title">鐢熶骇绠＄悊灞�</div>
+ <div style="display: flex;flex-direction: column;width: 100%;">
+ <div id="echart11" style="height: 165px;width: 100%;" />
+ <div id="echart10" style="height: 165px;width: 100%;" />
+ </div>
+ </dv-border-box-12>
+ </div>
+ <div class="center04">
+ <dv-border-box-12 class="block">
+ <div class="block_title">鍝佽川绠＄悊灞�</div>
+ <div class="center04_block">
+ <div id="echart07" style="width: 240px;height: 100%;" />
+ <div id="echart08" style="width: 240px;height: 100%;" />
+ <div id="echart09" style="width: 480px;height: 100%;" />
+ </div>
+ </dv-border-box-12>
+ </div>
+ </div>
<div class="right content_block">
<dv-border-box-12 class="block01 block">
<div class="block_title">骞冲彴鍔熻兘浣跨敤鐜�</div>
@@ -42,13 +137,21 @@
<div class="block_title">鐢ㄦ埛绫诲瀷</div>
<div id="echart05" style="width: 100%;height: 100%;margin-top: 30px" />
</dv-border-box-12>
- <dv-border-box-12 class="block02 block">
- <div class="block_title">鎴愭湰鏁堢泭鍒嗘瀽</div>
- <div>鍐呭鍖�</div>
- </dv-border-box-12>
- <dv-border-box-12 class="block01 block">
- <div class="block_title">鎴愭湰鏁堢泭鍒嗘瀽</div>
- <div>鍐呭鍖�</div>
+ <dv-border-box-12 class="block03 block">
+ <div class="block03_top">
+ <div class="block03_top_left">
+ <div class="block03_top_title">璁惧璀︽姤</div>
+ <dv-scroll-board :config="config1" style="width:100%;height:80%" />
+ </div>
+ <div class="block03_top_right">
+ <div class="block03_top_title">瀹夊叏璀︽姤</div>
+ <dv-scroll-board :config="config2" style="width:100%;height:80%" />
+ </div>
+ </div>
+ <div class="block03_bottom">
+ <div class="block03_bottom_title">鐜妫�娴嬫暟鎹紓甯�</div>
+ <dv-scroll-board :config="config3" style="width:100%;height:80%" />
+ </div>
</dv-border-box-12>
</div>
</div>
@@ -61,25 +164,175 @@
<script>
import * as echarts from 'echarts'
import '@/utils/world'
-import { echart01, echart02, echart03, echart04, echart05, loadEcharts } from '@/utils/myEcharts'
+import {
+ echart01,
+ echart02,
+ echart03,
+ echart04,
+ echart05,
+ echart06,
+ echart07,
+ echart08, echart09, echart10, echart11,
+ loadEcharts
+} from '@/utils/myEcharts'
import '@/utils/echarts-liquidfill.min.js'
+import countTo from 'vue-count-to'
export default {
name: 'Index',
+ components: { countTo },
data() {
return {
colorX: '#c7e7ff',
- colorY: '#7696c5'
+ colorY: '#7696c5',
+ config1: {
+ // headerBGC: '#003B51',
+ header: ['璁惧鍚�', '鐘舵��', '鏃堕棿'],
+ data: [
+ ['娉ㄥ鏈�', '<span style="color:red;">寮傚父</span>', '05:19'],
+ ['鍘嬮摳鏈�', '<span style="color:red;">寮傚父</span>', '06:52'],
+ ['鎵撶（鏈�', '<span style="color:red;">寮傚父</span>', '08:57'],
+ ['鎶涘厜鏈�', '<span style="color:red;">寮傚父</span>', '09:09'],
+ ['閿婚�犳満', '<span style="color:red;">寮傚父</span>', '10:20'],
+ ['閾搁�犳満', '<span style="color:red;">寮傚父</span>', '11:23'],
+ ['娉ㄥ鏈�', '<span style="color:red;">寮傚父</span>', '11:29'],
+ ['鍘嬮摳鏈�', '<span style="color:red;">寮傚父</span>', '13:20'],
+ ['鎵撶（鏈�', '<span style="color:red;">寮傚父</span>', '15:59'],
+ ['鎶涘厜鏈�', '<span style="color:red;">寮傚父</span>', '16:20']
+ ],
+ // index: true,
+ // columnWidth: [50],
+ align: ['center']
+ },
+
+ config2: {
+ // headerBGC: '#003B51',
+ header: ['璀﹀憡', '鐘舵��', '鏃堕棿'],
+ data: [
+ ['娉ㄥ鏈�', '<span style="color:red;">寮傚父</span>', '06:29'],
+ ['鍘嬮摳鏈�', '<span style="color:red;">寮傚父</span>', '07:58'],
+ ['鎵撶（鏈�', '<span style="color:red;">寮傚父</span>', '09:05'],
+ ['鎶涘厜鏈�', '<span style="color:red;">寮傚父</span>', '09:09'],
+ ['閿婚�犳満', '<span style="color:red;">寮傚父</span>', '10:20'],
+ ['閾搁�犳満', '<span style="color:red;">寮傚父</span>', '12:22'],
+ ['娉ㄥ鏈�', '<span style="color:red;">寮傚父</span>', '14:29'],
+ ['鍘嬮摳鏈�', '<span style="color:red;">寮傚父</span>', '15:20'],
+ ['鎵撶（鏈�', '<span style="color:red;">寮傚父</span>', '15:59'],
+ ['鎶涘厜鏈�', '<span style="color:red;">寮傚父</span>', '16:20']
+ ],
+ // index: true,
+ // columnWidth: [50],
+ align: ['center']
+ },
+
+ config3: {
+ // headerBGC: '#003B51',
+ header: ['鐜寮傚父', '鐘舵��', '鏃堕棿'],
+ data: [
+ ['閲戝伐杞﹂棿娓╁害', '<span style="color:red;">寮傚父</span>', '05:19'],
+ ['鍖呰杞﹂棿婀垮害', '<span style="color:red;">寮傚父</span>', '06:52'],
+ ['鍖呰杞﹂棿娓╁害', '<span style="color:red;">寮傚父</span>', '08:57'],
+ ['閲戝伐杞﹂棿婀垮害', '<span style="color:red;">寮傚父</span>', '09:09'],
+ ['娑傝杞﹂棿婀垮害', '<span style="color:red;">寮傚父</span>', '10:20'],
+ ['鐒婃帴杞﹂棿娓╁害', '<span style="color:red;">寮傚父</span>', '11:23'],
+ ['鎶涘厜杞﹂棿娓╁害', '<span style="color:red;">寮傚父</span>', '11:29'],
+ ['鐒婃帴杞﹂棿娓╁害', '<span style="color:red;">寮傚父</span>', '13:20'],
+ ['鎶涘厜杞﹂棿娓╁害', '<span style="color:red;">寮傚父</span>', '15:59'],
+ ['鐒婃帴杞﹂棿娓╁害', '<span style="color:red;">寮傚父</span>', '16:20']
+ ],
+ // index: true,
+ // columnWidth: [50],
+ align: ['center']
+ },
+
+ config4: {
+ // headerBGC: '#003B51',
+ // header: ['璁惧鍚�', '鐘舵��', '鏃堕棿'],
+ evenRowBGC: 'transparent',
+ oddRowBGC: 'rgba(0,59,81,0.5)',
+ data: [
+ ['627', '<span style="color:#7696c5;font-weight: bolder">627TB</span>'],
+ ['650', '<span style="color:#7696c5;font-weight: bolder">650TB</span>'],
+ ['605', '<span style="color:#7696c5;font-weight: bolder">605TB</span>'],
+ ['675', '<span style="color:#7696c5;font-weight: bolder">675TB</span>'],
+ ['627', '<span style="color:#7696c5;font-weight: bolder">627TB</span>'],
+ ['650', '<span style="color:#7696c5;font-weight: bolder">650TB</span>'],
+ ['605', '<span style="color:#7696c5;font-weight: bolder">605TB</span>'],
+ ['675', '<span style="color:#7696c5;font-weight: bolder">675TB</span>'],
+ ['627', '<span style="color:#7696c5;font-weight: bolder">627TB</span>'],
+ ['650', '<span style="color:#7696c5;font-weight: bolder">650TB</span>'],
+ ['605', '<span style="color:#7696c5;font-weight: bolder">605TB</span>'],
+ ['675', '<span style="color:#7696c5;font-weight: bolder">675TB</span>']
+ ],
+ // index: true,
+ // columnWidth: [50],
+ align: ['center']
+ },
+ config5: {
+ // headerBGC: '#003B51',
+ header: ['杞﹂棿鍚嶇О', '璁惧缂栧彿', '鐘舵��'],
+ evenRowBGC: 'transparent',
+ oddRowBGC: 'rgba(0,59,81,0.5)',
+ data: [
+ ['閲戝伐', '婵�鍏夊垏鍓�', '姝ｅ父'],
+ ['閲戝伐', '婵�鍏夊垏鍓�', '姝ｅ父'],
+ ['鎶涘厜', '鎵撶（鏈�01', '姝ｅ父'],
+ ['鎶涘厜', '鎵撶（鏈�02', '姝ｅ父'],
+ ['鎶涘厜', '鎶涘厜鏈�01', '<span style="color:red">寮傚父</span>'],
+ ['鎶涘厜', '鎶涘厜鏈�02', '<span style="color:red">寮傚父</span>'],
+ ['閲戝伐', '婵�鍏夊垏鍓�', '姝ｅ父'],
+ ['閲戝伐', '婵�鍏夊垏鍓�', '姝ｅ父']
+ ],
+ // index: true,
+ // columnWidth: [50],
+ align: ['center']
+ },
+ config6: {
+ // headerBGC: '#003B51',
+ header: ['鏈烘鑷傜紪鍙�', '鍑洪敊鎻愮ず'],
+ evenRowBGC: 'transparent',
+ oddRowBGC: 'rgba(0,59,81,0.5)',
+ data: [
+ ['鏈烘鑷侫01', '鎶撳彇鐗╂枡澶辫触'],
+ ['鏈烘鑷侫02', '鎶撳彇鐗╂枡澶辫触'],
+ ['鏈烘鑷侫03', '鎶撳彇鐗╂枡澶辫触'],
+ ['鏈烘鑷侫04', '鎶撳彇鐗╂枡澶辫触'],
+ ['鏈烘鑷侫05', '鎶撳彇鐗╂枡澶辫触'],
+ ['鏈烘鑷侭01', '鎶撳彇鐗╂枡澶辫触'],
+ ['鏈烘鑷侭02', '鎶撳彇鐗╂枡澶辫触'],
+ ['鏈烘鑷侭03', '鎶撳彇鐗╂枡澶辫触'],
+ ['鏈烘鑷侭04', '鎶撳彇鐗╂枡澶辫触'],
+ ['鏈烘鑷侭05', '鎶撳彇鐗╂枡澶辫触']
+
+ ],
+ // index: true,
+ // columnWidth: [50],
+ align: ['center']
+ },
+ number1: 126560,
+ number2: 4321,
+ number3: 3921,
+ number4: 37063,
+ number5: 764
}
},
created() {
setInterval(() => {
location.reload()
- }, 1000 * 60 * 60 * 2)
+ }, 1000 * 60 * 60 * 4)// 姣忓叓灏忔椂鍒锋柊涓�娆�
},
mounted() {
this.getEcharts()
+
+ setInterval(() => {
+ this.number1 = this.number1 + 100
+ this.number2 = this.number2 + 15
+ this.number3 = this.number3 + 20
+ this.number4 = this.number4 + 50
+
+ this.number5 = this.number5 + Math.floor(Math.random() * 5)
+ }, 1000 * 30)
},
methods: {
getEcharts() {
@@ -89,6 +342,31 @@
loadEcharts('echart03', echart03())
loadEcharts('echart04', echart04())
loadEcharts('echart05', echart05())
+ loadEcharts('echart06', echart06())
+ loadEcharts('echart07', echart07())
+ loadEcharts('echart08', echart08())
+ loadEcharts('echart09', echart09())
+ loadEcharts('echart10', echart10())
+ loadEcharts('echart11', echart11())
+
+ setInterval(() => {
+ loadEcharts('echart01', echart01())
+ this.getLiquidFill()
+ loadEcharts('echart02', echart02())
+ loadEcharts('echart03', echart03())
+ }, 1000 * 60)
+
+ setInterval(() => {
+ loadEcharts('echart05', echart05())
+ loadEcharts('echart06', echart06())
+ loadEcharts('echart07', echart07())
+ loadEcharts('echart08', echart08())
+ }, 1000 * 60 * 2)
+ setInterval(() => {
+ loadEcharts('echart09', echart09())
+ loadEcharts('echart10', echart10())
+ loadEcharts('echart11', echart11())
+ }, 1000 * 60 * 3)
},
getLiquidFill() {
const value1 = Math.ceil(Math.random() * 10 + 80)
@@ -276,7 +554,88 @@
.center {
width: 1000px;
+ display: flex;
+ flex-direction: column;
+}
+.center01 {
+ height: 100px;
+ width: 100%;
+ display: flex;
+ justify-content: space-around;
+}
+
+.center02 {
+ height: 320px;
+ width: 100%;
+ display: flex;
+ justify-content: space-evenly;
+}
+
+.center02_left {
+ width: 60%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.img001 {
+ background: url("../../assets/images/map.png") no-repeat;
+ background-size: 100% 100%;
+ width: 386px;
+ height: 311px;
+}
+
+.center02_right {
+ width: 30%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.dv-decoration-7 {
+ display: flex;
+ justify-content: space-between;
+ font-weight: bolder;
+ letter-spacing: 4px;
+
+}
+
+.center03 {
+ height: 330px;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+
+ .dv-border-box-12 {
+ width: 49%;
+ }
+}
+
+.center04 {
+ height: 160px;
+ width: 100%;
+ display: flex;
+}
+
+.block04 {
+ width: 180px;
+ height: 100px;
+
+ ::v-deep .border-box-content {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-items: center;
+ }
+}
+
+.center04_block {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-evenly;
}
.right {
@@ -303,6 +662,59 @@
height: 200px;
}
+.block03 {
+ height: 460px;
+ width: 100%;
+
+ ::v-deep .border-box-content {
+ padding: 10px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+}
+
+.block03_top {
+ width: 100%;
+ height: 240px;
+ display: flex;
+ justify-content: space-between;
+}
+
+.block03_top_left {
+ display: flex;
+ flex-direction: column;
+ width: 48%;
+}
+
+.block03_top_title {
+ height: 20%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.block03_top_right {
+ display: flex;
+ flex-direction: column;
+ width: 48%;
+}
+
+.block03_bottom {
+ width: 100%;
+ height: 220px;
+ display: flex;
+ flex-direction: column;
+}
+
+.block03_bottom_title {
+ height: 20%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+}
+
.block_title {
background: linear-gradient(to right, #36a5cf, #000013);
width: 200px;
@@ -323,31 +735,31 @@
background: url("../../assets/images/box03.png");
}
-.text1{
+.text1 {
position: absolute;
bottom: 10px;
left: 72px;
}
-.text2{
+.text2 {
position: absolute;
bottom: 10px;
left: 210px;
}
-.text3{
+.text3 {
position: absolute;
bottom: 10px;
left: 336px;
}
-.text4{
+.text4 {
position: absolute;
top: 50px;
left: 223px;
}
-.text5{
+.text5 {
position: absolute;
top: 50px;
left: 346px;
--
Gitblit v1.9.3