feat:运营管理页面搭建

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);
+    }
+  }
 
+
+}

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, // 图例标记的图形宽度。

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: xLabel
-            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'
-                }
-            ]
         },
         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:'应急事件',
+                name: '示例示例',
-                data: [60,80,140,70,100],
                 type: 'line',
-                symbolSize: 4,
+                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
-                symbol: 'circle',
-                lineStyle: {
-                    width: 2
-                },
                 smooth: true,
-                label: {
+                color:'#7DAEFF',
-                    show: false,
+                lineStyle: {
-                    position: 'top',
+                    normal: {
-                    color: '#ffffff',
+                        width: 2,
-                    borderWidth: 0
+                    },
                 },
-            },{
+                symbolSize: 4,   //设定实心点的大小
-                name:'应急演练',
+                data: dataValue,
-                data: [50,70,130,60,90],
+                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', // 默认是空心圆（中间是白色的），改成实心圆
-                symbol: 'circle',
-                lineStyle: {
-                    width: 2
-                },
                 smooth: true,
-                label: {
+                color:'#DD7171',
-                    show: false,
+                lineStyle: {
-                    position: 'top',
+                    normal: {
-                    color: '#ffffff',
+                        width: 2,
-                    borderWidth: 0
+                    },
+                },
+                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
                         }

src/components/manage/right/manageRight.component.html

@@ -1,41 +1,42 @@
 <div class="env-right emergency-part">
     <div class="box-content">
         <title-component :imgSrc="imgSrc">
-            能耗统计
+            燃料供给设备
         </title-component>
+        <div class="block-box">
+            <div class="block">
+                <div class="inner-block" style="padding-top:20px">
+                    <div class="full">燃料1</div>
+                    <div class="full"><span class="count" v-run-number="parkData[0].count"></span><span>/{{parkData[0].total}}</span></div>
+                    <div :style="{top:(-90 + 90*(parkData[0].count/parkData[0].total))+'px'}" class="wave wave1"></div>
+                    <div :style="{top:(-90 + 90*(parkData[0].count/parkData[0].total))+'px'}" class="wave wave2"></div>
+                </div>
+            </div>
+            <div class="block red">
+                <div class="inner-block red-2">
+                    <div class="full">燃料2</div>
+                    <div class="full"> <span class="count active" v-run-number="parkData[1].count"></span><span>/{{parkData[1].total}}</span></div>
+
+                    <div :style="{top:(-90 + 90*(parkData[1].count/parkData[1].total))+'px'}" class="wave wave1 red"></div>
+                    <div :style="{top:(-90 + 90*(parkData[1].count/parkData[1].total))+'px'}" class="wave wave2 red"></div>
+                </div>
+            </div>
+        </div>
         <hbt-echarts className="line-chart-emergency" :options="option"
                      @onChartInit="getEcharts($event,'lineChart')"></hbt-echarts>
     </div>
-    <div class="box-content flex-15 margin-top-20 device-box">
+    <div class="box-content flex-0 margin-top-20 device-box height-auto">
         <title-component :imgSrc="imgSrc">
-            设备在线统计
+            电器设备
         </title-component>
         <div class="energyRightTitle d-flex is-justify-space-between margin-top-23">
             <div class="d-flex align-items-center">
-                <img src="~@/assets/img/home/security-equipment.png" alt="">
+                <span>年累计用电量（kW·h）</span>
-                <span>安防设备</span>
             </div>
-            <span>100<span class="grayColor">/300</span></span>
+            <span>1200</span>
-        </div>
-        <div class="energyRightTitle d-flex is-justify-space-between margin-top-10">
-            <div class="d-flex align-items-center">
-                <img src="~@/assets/img/home/training-devices.png" alt="">
-                <span>训练设备</span>
-            </div>
-            <span>100<span class="grayColor">/300</span></span>
-        </div>
-        <div class="energyRightTitle d-flex is-justify-space-between margin-top-10">
-            <div class="d-flex align-items-center">
-                <img src="~@/assets/img/home/logistics.png" alt="">
-                <span>配套设备</span>
-            </div>
-            <span>100<span class="grayColor">/300</span></span>
         </div>
     </div>
     <div class="box-content margin-top-20 emergency-part">
-        <title-component :imgSrc="imgSrc">
-            物资盘点
-        </title-component>
         <hbt-echarts className="line-chart-emergency" :options="lineData1"
                      @onChartInit="getEcharts($event,'lineChart1')"></hbt-echarts>
     </div>

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?.clear()
-            this.lineChart.setOption(this.option)
+            this.lineChart?.setOption(this.option)
+            this.lineChart1?.clear()
+            this.lineChart1?.setOption(this.lineData1)
         }, 5000)
     }
 

src/views/overview.component.html

@@ -1,6 +1,6 @@
 <div class="overview-container">
 
- <MapComponent id="map" @onLoaded="getMap" @onHandleChange="handleChange"></MapComponent>
+<!-- <MapComponent id="map" @onLoaded="getMap" @onHandleChange="handleChange"></MapComponent>-->
 
     <div class="bg-box left animate__animated">
         <div class="panel-container">

src/views/overview.component.scss

@@ -51,6 +51,7 @@
     }
     &.right.none{
       background: none;
+      pointer-events: none;
     }
     .panel-container {
       //width: 330px;