From 1f3c757beef4e39141cbbd2b5e4f8a1266fb4ba7 Mon Sep 17 00:00:00 2001 From: guangyin Date: Thu, 18 May 2023 08:28:51 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E8=BF=90=E8=90=A5=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=90=AD=E5=BB=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/style/pageCommon.component.scss | 74 ++++++++ src/components/manage/left/chartData.js | 2 +- src/components/manage/right/chartData.js | 175 ++++++++++-------- .../manage/right/manageRight.component.html | 47 ++--- .../manage/right/manageRight.component.ts | 20 +- src/views/overview.component.html | 2 +- src/views/overview.component.scss | 1 + 7 files changed, 215 insertions(+), 106 deletions(-) diff --git a/src/assets/style/pageCommon.component.scss b/src/assets/style/pageCommon.component.scss index 8502b14..9b9cd32 100644 --- a/src/assets/style/pageCommon.component.scss +++ b/src/assets/style/pageCommon.component.scss @@ -3138,4 +3138,78 @@ svg.loading-icon { color: #FFFFFF; } } +@keyframes wave{ + 0%{ + transform: translate(-50%,-50%) rotate(0deg); + } + 100%{ + transform: translate(-50%,-50%) rotate(360deg); + } +} +.block-box{ + display: flex; + justify-content: space-around; + margin: 30px 0; + .block{ + width: 104px; + height: 104px; + border:1px solid #7DAEFF; + border-radius: 50%; + .inner-block{ + width: 90px; + height: 90px; + position: relative; + left: 6px; + top: 6px; + border:1px solid rgba($color: #7DAEFF, $alpha: 0.2); + border-radius: 50%; + overflow: hidden; + color: rgba(255,255,255,0.8); + font-size: 12px; + line-height: 17px; + padding-top: 10px; + transform: rotate(180deg); + .full{ + text-align: center; + transform: rotate(180deg); + } + .wave{ + position: absolute; + width: 200%; + height: 200%; + top: 0; + left: 50%; + transform: translate(-50%,-50%); + background: rgba($color: #7DAEFF, $alpha: 0.2); + transition: top 2s; + animation: wave 5s linear infinite; + &.wave1{ + border-radius: 30%; + } + &.wave2{ + border-radius: 40%; + } + } + .wave.red{ + background: rgba($color: #DD7171, $alpha: 0.2); + } + .count{ + font-size: 20px; + line-height: 28px; + flex: none; + color: $font-color; + &.active{ + color:#FFA900 + } + } + } + } + .red{ + border-color: #DD7171; + .red-2{ + border-color: rgba(221, 113, 113, 0.2); + } + } + +} diff --git a/src/components/manage/left/chartData.js b/src/components/manage/left/chartData.js index 9f2e8bd..ccc8d31 100644 --- a/src/components/manage/left/chartData.js +++ b/src/components/manage/left/chartData.js @@ -161,7 +161,7 @@ export const lineChartData = function () { endValue:10 }, legend: { - show: false, + show: true, top: '10%', icon: "rect", itemWidth: 10, // 图例标记的图形宽度。 diff --git a/src/components/manage/right/chartData.js b/src/components/manage/right/chartData.js index e213983..5f1bd64 100644 --- a/src/components/manage/right/chartData.js +++ b/src/components/manage/right/chartData.js @@ -1,57 +1,65 @@ -export const lineChartData = function () { +export const lineChartData = function () { + let xLabel = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']; + let dataValue = ['50', '150', '60', '110', '60', '200', '150']; + let dataValue1 = ['10', '60', '25', '45', '60', '76', '60']; return { - color:['#FADFA4','#947FEA'], + dataZoom : { + type:"inside", + // orient:"vertical", + startValue:0, + endValue:10 + }, + legend: { + show: false, + top: '10%', + icon: "rect", + itemWidth: 10, // 图例标记的图形宽度。 + // itemGap: 20, // 图例每项之间的间隔。 + itemHeight: 10, // 图例标记的图形高度。 + textStyle: { + color: '#fff', + fontSize: 14, + padding: [0, 8, 0, 8] + } + }, + grid: { + top: '15%', + left: '10%', + right: '5%', + bottom: '20%', + }, xAxis: { + boundaryGap: false, + name:'日', type: 'category', splitLine: { show: true, lineStyle: { - color: '#999999', + color: 'rgba(153,153,153,0.4)', type: 'solid' }, }, axisLabel: { //x轴文字的配置 show: true, - interval: 0,//使x轴文字显示全 + // interval: 0,//使x轴文字显示全 }, axisLine: { lineStyle: { color: '#999999', } }, - - data: ['1月','2月','3月','4月','5月'] - }, - legend: { - top: 'top', - itemGap: 30, - itemWidth: 8, - itemHeight: 8, - textStyle: { - // 未单独设置样式的图例（即非上下标） - lineHeight: 12, - verticalAlign: "middle", - fontSize: 10, - color: "#fff" - }, - data:[ - { - name:'应急事件', - icon:'roundRect' - },{ - name:'应急演练', - icon:'roundRect' - } - ] + data: xLabel }, yAxis: { type: 'value', + name:'单位：吨', + nameLocation:'end', splitLine: { show: true, lineStyle: { - color: '#999999', + color: 'rgba(153,153,153,0.4)', type: 'solid' }, }, @@ -63,54 +71,68 @@ export const lineChartData = function () { }, series: [ { - name:'应急事件', - data: [60,80,140,70,100], + name: '示例示例', type: 'line', - symbolSize: 4, - symbol: 'circle', - lineStyle: { - width: 2 - }, + symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆 smooth: true, - label: { - show: false, - position: 'top', - color: '#ffffff', - borderWidth: 0 + color:'#7DAEFF', + lineStyle: { + normal: { + width: 2, + }, }, - },{ - name:'应急演练', - data: [50,70,130,60,90], + symbolSize: 4, //设定实心点的大小 + data: dataValue, + areaStyle: { + normal: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: 'rgba(125,174,255,0.2)' + }, { + offset: 1, color: 'rgba(125,174,255,0.2)' + }], + global: false + } + }, + }, + }, + { + name: '示例示例', type: 'line', - symbolSize: 4, - symbol: 'circle', - lineStyle: { - width: 2 - }, + symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆 smooth: true, - label: { - show: false, - position: 'top', - color: '#ffffff', - borderWidth: 0 + color:'#DD7171', + lineStyle: { + normal: { + width: 2, + }, + }, + symbolSize: 4, //设定实心点的大小 + data: dataValue1, + areaStyle: { + normal: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, color: 'rgba(221,113,113,0.2)' + }, { + offset: 1, color: 'rgba(221,113,113,0.2)' + }], + global: false + } + }, }, } - ], - - tooltip: { - trigger: 'item', - backgroundColor:"rgba(0,0,0,0.6)", - borderWidth:0, - textStyle:{ - color:"rgba(255,255,255,0.8)", - }, - }, - grid: { - x: 30, - y: 30, - x2: 12, - y2: 20, - } + ] } } export const lineChartData1 = function () { @@ -189,9 +211,8 @@ export const lineChartData1 = function () { type: 'line', symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆 smooth: true, - color:'#FADFA4', + color:'#FFFFFF', lineStyle: { - color:'#FADFA4', normal: { width: 2, }, @@ -207,9 +228,9 @@ export const lineChartData1 = function () { x2: 0, y2: 1, colorStops: [{ - offset: 0, color: 'rgba(250,223,164,0.2)' + offset: 0, color: 'rgba(255,255,255,0.2)' }, { - offset: 1, color: 'rgba(250,223,164,0.2)' + offset: 1, color: 'rgba(255,255,255,0.2)' }], global: false } @@ -221,7 +242,7 @@ export const lineChartData1 = function () { type: 'line', symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆 smooth: true, - color:'#947FEA', + color:'#C9FFD7', lineStyle: { normal: { width: 2, @@ -238,9 +259,9 @@ export const lineChartData1 = function () { x2: 0, y2: 1, colorStops: [{ - offset: 0, color: 'rgba(148,127,234,0.2)' + offset: 0, color: 'rgba(201,255,215,0.2)' }, { - offset: 1, color: 'rgba(148,127,234,0.2)' + offset: 1, color: 'rgba(201,255,215,0.2)' }], global: false } diff --git a/src/components/manage/right/manageRight.component.html b/src/components/manage/right/manageRight.component.html index 3690413..ac98adc 100644 --- a/src/components/manage/right/manageRight.component.html +++ b/src/components/manage/right/manageRight.component.html @@ -1,41 +1,42 @@
- 能耗统计 + 燃料供给设备 +
+
+
+
燃料1
+
/{{parkData[0].total}}
+
+
+
+
+
+
+
燃料2
+
/{{parkData[1].total}}
+ +
+
+
+
+
-
+
- 设备在线统计 + 电器设备
- - 安防设备 + 年累计用电量（kW·h）
- 100/300 -
-
-
- - 训练设备 -
- 100/300 -
-
-
- - 配套设备 -
- 100/300 + 1200
- - 物资盘点 -
diff --git a/src/components/manage/right/manageRight.component.ts b/src/components/manage/right/manageRight.component.ts index 0061ac0..b8984e0 100644 --- a/src/components/manage/right/manageRight.component.ts +++ b/src/components/manage/right/manageRight.component.ts @@ -29,15 +29,24 @@ export default class ManageRightComponent extends Vue { lineData1: any = {} //折线图实例 lineChart1: any = {} + //球数据 + public parkData = [{ + count:345, + total:500 - showPop = false + },{ + count:400, + total:500 - popTitle = '开启演练' + }] //获取图表实例 getEcharts(e, type) { + console.log(e,'e') + console.log(type,'type') + this[type] = e if (type === 'lineChart'){ this.initLineData() @@ -51,6 +60,7 @@ export default class ManageRightComponent extends Vue { resize() { setTimeout(() => { this.lineChart.resize(); + this.lineChart1.resize(); }, 300) } @@ -59,8 +69,10 @@ export default class ManageRightComponent extends Vue { //自动切换line图表数据 autoChangeLineData() { this.timerForLineData = setInterval(() => { - this.lineChart.clear() - this.lineChart.setOption(this.option) + this.lineChart?.clear() + this.lineChart?.setOption(this.option) + this.lineChart1?.clear() + this.lineChart1?.setOption(this.lineData1) }, 5000) } diff --git a/src/views/overview.component.html b/src/views/overview.component.html index 2e84a5e..00f7416 100644 --- a/src/views/overview.component.html +++ b/src/views/overview.component.html @@ -1,6 +1,6 @@
- +
diff --git a/src/views/overview.component.scss b/src/views/overview.component.scss index 686a90e..8a059b9 100644 --- a/src/views/overview.component.scss +++ b/src/views/overview.component.scss @@ -51,6 +51,7 @@ } &.right.none{ background: none; + pointer-events: none; } .panel-container { //width: 330px;