From 1f3c757beef4e39141cbbd2b5e4f8a1266fb4ba7 Mon Sep 17 00:00:00 2001 From: guangyin Date: Thu, 18 May 2023 08:28:51 +0800 Subject: [PATCH 1/3] =?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; From ffb50be11948211a97c9cbeb53c1f18aa1201bb4 Mon Sep 17 00:00:00 2001 From: guangyin Date: Thu, 18 May 2023 08:56:35 +0800 Subject: [PATCH 2/3] =?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=E5=B7=A6=E4=BE=A7=E9=A1=B6=E9=83=A8=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/home/manageTopBg.png | Bin 0 -> 6169 bytes src/assets/style/pageCommon.component.scss | 13 +++++++++++++ .../manage/left/manageLeft.component.html | 2 +- 3 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 src/assets/img/home/manageTopBg.png diff --git a/src/assets/img/home/manageTopBg.png b/src/assets/img/home/manageTopBg.png new file mode 100644 index 0000000000000000000000000000000000000000..5cc743ef46427f194d70d8acf9aacad3f9d1803c GIT binary patch literal 6169 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 iHUjAw?lyU#j<|NgdPR|O+8?fu
-
+

设备在线管理

消防站 From a37cd8f9fca8289f949525bdc26e73834565176f Mon Sep 17 00:00:00 2001 From: guangyin Date: Thu, 18 May 2023 09:12:05 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0=E9=80=80=E5=87=BA?= =?UTF-8?q?=E5=AF=BC=E8=A7=88=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/overview.component.html | 5 +++++ src/views/overview.component.scss | 17 +++++++++++++++++ src/views/overview.component.ts | 2 +- 3 files changed, 23 insertions(+), 1 deletion(-) diff --git a/src/views/overview.component.html b/src/views/overview.component.html index 00f7416..51b4aca 100644 --- a/src/views/overview.component.html +++ b/src/views/overview.component.html @@ -46,6 +46,11 @@
+
+
+ 退出自由导览 +
+
diff --git a/src/views/overview.component.scss b/src/views/overview.component.scss index 8a059b9..ce0dfb4 100644 --- a/src/views/overview.component.scss +++ b/src/views/overview.component.scss @@ -73,7 +73,24 @@ background: linear-gradient(180deg, #333333 0%, rgba(51, 51, 51, 0) 100%); transition:top 2s; } + .exitFullScreen{ + width: 100%; + left: 0; + position: absolute; + top: 0; + z-index: 9; + pointer-events: none; + height: 90px; + text-align: center; + background: linear-gradient(180deg, #333333 0%, rgba(51, 51, 51, 0) 100%); + line-height: 80px; + transition:top 2s; + .top-btn{ + pointer-events: auto; + cursor: pointer; + } + } .fixed-btn { width: 50px; height: 50px; diff --git a/src/views/overview.component.ts b/src/views/overview.component.ts index 49215d6..7688ea2 100644 --- a/src/views/overview.component.ts +++ b/src/views/overview.component.ts @@ -200,7 +200,7 @@ export default class OverViewComponent extends BaseComponent { } - + deactivated(){ console.log(123) }