src/assets/style/pageCommon.component.scss

@@ -3138,78 +3138,4 @@ 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: true,
+            show: false,
             top: '10%',
             icon: "rect",
             itemWidth: 10, // 图例标记的图形宽度。

src/components/manage/right/chartData.js

@@ -1,65 +1,57 @@
 
 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 {
-        dataZoom : {
+        color:['#FADFA4','#947FEA'],
-            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: 'rgba(153,153,153,0.4)',
+                    color: '#999999',
                     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: 'rgba(153,153,153,0.4)',
+                    color: '#999999',
                     type: 'solid'
                 },
             },
@@ -71,68 +63,54 @@ export const lineChartData =  function () {
         },
         series: [
             {
-                name: '示例示例',
+                name:'应急事件',
+                data: [60,80,140,70,100],
                 type: 'line',
-                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                symbolSize: 4,
-                smooth: true,
+                symbol: 'circle',
-                color:'#7DAEFF',
                 lineStyle: {
-                    normal: {
+                    width: 2
-                        width: 2,
                 },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
                 },
-                symbolSize: 4,   //设定实心点的大小
+            },{
-                data: dataValue,
+                name:'应急演练',
-                areaStyle: {
+                data: [50,70,130,60,90],
-                    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',
-                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
+                symbolSize: 4,
-                smooth: true,
+                symbol: 'circle',
-                color:'#DD7171',
                 lineStyle: {
-                    normal: {
+                    width: 2
-                        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
-                        }
                 },
+                smooth: true,
+                label: {
+                    show: false,
+                    position: 'top',
+                    color: '#ffffff',
+                    borderWidth: 0
                 },
             }
-        ]
+        ],
+
+        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 () {
@@ -211,8 +189,9 @@ export const lineChartData1 =  function () {
                 type: 'line',
                 symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                 smooth: true,
-                color:'#FFFFFF',
+                color:'#FADFA4',
                 lineStyle: {
+                    color:'#FADFA4',
                     normal: {
                         width: 2,
                     },
@@ -228,9 +207,9 @@ export const lineChartData1 =  function () {
                             x2: 0,
                             y2: 1,
                             colorStops: [{
-                                offset: 0, color: 'rgba(255,255,255,0.2)'
+                                offset: 0, color: 'rgba(250,223,164,0.2)'
                             }, {
-                                offset: 1, color: 'rgba(255,255,255,0.2)'
+                                offset: 1, color: 'rgba(250,223,164,0.2)'
                             }],
                             global: false
                         }
@@ -242,7 +221,7 @@ export const lineChartData1 =  function () {
                 type: 'line',
                 symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                 smooth: true,
-                color:'#C9FFD7',
+                color:'#947FEA',
                 lineStyle: {
                     normal: {
                         width: 2,
@@ -259,9 +238,9 @@ export const lineChartData1 =  function () {
                             x2: 0,
                             y2: 1,
                             colorStops: [{
-                                offset: 0, color: 'rgba(201,255,215,0.2)'
+                                offset: 0, color: 'rgba(148,127,234,0.2)'
                             }, {
-                                offset: 1, color: 'rgba(201,255,215,0.2)'
+                                offset: 1, color: 'rgba(148,127,234,0.2)'
                             }],
                             global: false
                         }

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

@@ -1,42 +1,41 @@
 <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-0 margin-top-20 device-box height-auto">
+    <div class="box-content flex-15 margin-top-20 device-box">
         <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">
-                <span>年累计用电量（kW·h）</span>
+                <img src="~@/assets/img/home/security-equipment.png" alt="">
+                <span>安防设备</span>
             </div>
-            <span>1200</span>
+            <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/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,24 +29,15 @@ 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()
@@ -60,7 +51,6 @@ export default class ManageRightComponent extends Vue {
     resize() {
         setTimeout(() => {
             this.lineChart.resize();
-            this.lineChart1.resize();
         }, 300)
     }
 
@@ -69,10 +59,8 @@ 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,7 +51,6 @@
     }
     &.right.none{
       background: none;
-      pointer-events: none;
     }
     .panel-container {
       //width: 330px;