From 56ba7c96dd7054e5d544a9ffbe80593107ecb855 Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期二, 02 七月 2024 15:18:58 +0800
Subject: [PATCH] 1.金华智研院看板开发100%
---
src/views/kb/xkd.vue | 450 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 431 insertions(+), 19 deletions(-)
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