1

src/api/bigdata.js

@@ -160,4 +160,18 @@ export function getSbfb() {
   })
 }
 
+//热力图
+export function getRlt(param) {
+  //暂时传当年，以后再说
+  if (param == null) {
+    let myDate = new Date();
+    param = {day: myDate.getFullYear()}
+  }
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/getHeatMap',
+    method: 'post',
+    data : param
+  })
+}
+
 

src/views/bigdata/bigdata.vue

@@ -135,318 +135,326 @@
 </template>
 
 <script>
-import tabbar from './tabbar.vue' //区域切换
-import bigdataSupermap from '@/components/supermap' //超图
-
-//echarts
-import chartEvent from './chart-event.vue' //1  事件、、
-import chartWaterCrane from './chart-waterCrane.vue' //2  水鹤分布、、
-import chartEquipmentType from './chart-equipmentType.vue' //3  公司、、
-import chartFireCause from './chart-fireCause.vue' //4  起火原因、、
-import chartDeviceReportingEvents from './chart-deviceReportingEvents.vue' //5  设备上报数量、、
-import chartEventTrend from './chart-eventTrend.vue' //6  事件趋势、、
-import chartKeyArea from './chart-keyArea.vue' //7  重点区域、、
-import chartWaterIntake from './chart-waterIntake.vue' //8  取水口、、
-import chartWeatherTrends from './chart-weatherTrends.vue' //9  天气趋势、、
-import chartFireFighting from './chart-fireFighting.vue' //10 消防力量分布、、
-import chartFireHydrant from './chart-fireHydrant.vue' //12 消火栓、、
-import chartFullTimeStation from './chart-fullTimeStation.vue' //13 专职站、、
-import chartFoamLiquid from './chart-foamLiquid.vue' //14 泡沫液、、
-import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
-
-export default {
-  components: {
-    bigdataSupermap,
-    tabbar,
-    chartEvent,
-    chartWaterCrane,
-    chartEquipmentType,
-    chartFireCause,
-    chartDeviceReportingEvents,
-    chartEventTrend,
-    chartKeyArea,
-    chartWaterIntake,
-    chartWeatherTrends,
-    chartFireFighting,
-    chartFireHydrant,
-    chartFullTimeStation,
-    chartFoamLiquid,
-    chartEquipmentDistribution
-  },
-  data() {
-    return {
-      visited: '',
-      navbar: [{
-        //消防云图
-        path: '/forest',
-        name: '消防云图'
-      },
-        {
-          //数据中心
-          path: '/datacenter',
-          name: '数据中心'
+  import tabbar from './tabbar.vue' //区域切换
+  import bigdataSupermap from '@/components/supermap' //超图
+
+  //echarts
+  import chartEvent from './chart-event.vue' //1  事件、、
+  import chartWaterCrane from './chart-waterCrane.vue' //2  水鹤分布、、
+  import chartEquipmentType from './chart-equipmentType.vue' //3  公司、、
+  import chartFireCause from './chart-fireCause.vue' //4  起火原因、、
+  import chartDeviceReportingEvents from './chart-deviceReportingEvents.vue' //5  设备上报数量、、
+  import chartEventTrend from './chart-eventTrend.vue' //6  事件趋势、、
+  import chartKeyArea from './chart-keyArea.vue' //7  重点区域、、
+  import chartWaterIntake from './chart-waterIntake.vue' //8  取水口、、
+  import chartWeatherTrends from './chart-weatherTrends.vue' //9  天气趋势、、
+  import chartFireFighting from './chart-fireFighting.vue' //10 消防力量分布、、
+  import chartFireHydrant from './chart-fireHydrant.vue' //12 消火栓、、
+  import chartFullTimeStation from './chart-fullTimeStation.vue' //13 专职站、、
+  import chartFoamLiquid from './chart-foamLiquid.vue' //14 泡沫液、、
+  import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
+
+  import {getRlt} from '@/api/bigdata'
+
+  export default {
+    components: {
+      bigdataSupermap,
+      tabbar,
+      chartEvent,
+      chartWaterCrane,
+      chartEquipmentType,
+      chartFireCause,
+      chartDeviceReportingEvents,
+      chartEventTrend,
+      chartKeyArea,
+      chartWaterIntake,
+      chartWeatherTrends,
+      chartFireFighting,
+      chartFireHydrant,
+      chartFullTimeStation,
+      chartFoamLiquid,
+      chartEquipmentDistribution
+    },
+    data() {
+      return {
+        visited: '',
+        navbar: [{
+          //消防云图
+          path: '/forest',
+          name: '消防云图'
         },
-        {
-          //监控中心
-          path: '/monitor',
-          name: '监控中心'
-        },
-        {
-          //统计分析
-          path: '/bigdata',
-          name: '统计分析'
-        }
+          {
+            //数据中心
+            path: '/datacenter',
+            name: '数据中心'
+          },
+          {
+            //监控中心
+            path: '/monitor',
+            name: '监控中心'
+          },
+          {
+            //统计分析
+            path: '/bigdata',
+            name: '统计分析'
+          }
 
-      ],
-      total: 0, //事件总数
-      untreated: 0, //事件-未处理
-      processing: 0 // 事件-处理中
+        ],
+        total: 0, //事件总数
+        untreated: 0, //事件-未处理
+        processing: 0 // 事件-处理中
+      }
+    },
+
+    methods: {
+      rlt() {
+        getRlt().then(resp => {
+          this.$refs.bigdataSupermap.loadHeatMap(resp.data)
+        })
+      }
+    },
+    created() {
+    },
+    mounted() {
+      this.rlt()
     }
-  },
-  created() {
-  },
-  mounted() {
-    setTimeout(() => {
-      this.$refs.bigdataSupermap.loadHeatMap() //事件分布
-    }, 5000)
   }
-}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-@import '@/assets/styles/base.scss';
+  @import '@/assets/styles/base.scss';
 
 
-.bigdata-con {
-  width: -webkit-fit-content;
-  height: 100%;
-  background: #01020c;
+  .bigdata-con {
+    width: -webkit-fit-content;
+    height: 100%;
+    background: #01020c;
 
-  .el-loading-mask {
-    background: none;
-  }
-
-  .header {
-    height: 3rem;
-    display: flex;
-    align-items: center;
-
-    .header-left {
-      position: fixed;
-      left: 10px;
-      top: 5px;
-      display: flex;
-      align-items: center;
-      color: $inBlue;
-      font-family: $fontFk;
-
-      .title {
-        margin: 0 auto;
-        text-align: center;
-        background-image: -webkit-linear-gradient(bottom, rgba($color: #00f6ff, $alpha: 1.0), rgba($color: #005aff, $alpha: 1.0));
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        color: #fff;
-        font-size: 28px;
-      }
+    .el-loading-mask {
+      background: none;
     }
 
-    .bignav {
-      height: 40px;
-      position: fixed;
-      left: 50%;
-      transform: translateX(-50%);
-      top: 0;
-      z-index: 1000;
-      border-radius: 5px;
+    .header {
+      height: 3rem;
       display: flex;
-      justify-content: cetner;
       align-items: center;
 
-      .bignav-list {
-        background: url(../../assets/images/integrated/bigdata-header-nav-re.png) repeat-x center;
-        float: left;
+      .header-left {
+        position: fixed;
+        left: 10px;
+        top: 5px;
         display: flex;
-        justify-content: cetner;
         align-items: center;
-        color: #fff;
-        height: 40px;
-        font-size: 12px;
-        padding: 0 23px;
-        cursor: pointer;
-        -webkit-transform: translateY(0);
-        transform: translateY(0);
-        transition: all 0.3s ease-in-out;
+        color: $inBlue;
+        font-family: $fontFk;
+
+        .title {
+          margin: 0 auto;
+          text-align: center;
+          background-image: -webkit-linear-gradient(bottom, rgba($color: #00f6ff, $alpha: 1.0), rgba($color: #005aff, $alpha: 1.0));
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          color: #fff;
+          font-size: 28px;
+        }
       }
 
-      .router-link-active,
-      .bignav-list:hover {
-        filter: brightness(2.3);
-        -webkit-transform: translateY(2px);
-        transform: translateY(2px);
-        color: $inBlueHover;
-        border-bottom: 1px solid $inBlueHover;
-        transition: all 0.3s ease-in-out;
-
-      }
-    }
+      .bignav {
+        height: 40px;
+        position: fixed;
+        left: 50%;
+        transform: translateX(-50%);
+        top: 0;
+        z-index: 1000;
+        border-radius: 5px;
+        display: flex;
+        justify-content: cetner;
+        align-items: center;
 
+        .bignav-list {
+          background: url(../../assets/images/integrated/bigdata-header-nav-re.png) repeat-x center;
+          float: left;
+          display: flex;
+          justify-content: cetner;
+          align-items: center;
+          color: #fff;
+          height: 40px;
+          font-size: 12px;
+          padding: 0 23px;
+          cursor: pointer;
+          -webkit-transform: translateY(0);
+          transform: translateY(0);
+          transition: all 0.3s ease-in-out;
+        }
 
-  }
+        .router-link-active,
+        .bignav-list:hover {
+          filter: brightness(2.3);
+          -webkit-transform: translateY(2px);
+          transform: translateY(2px);
+          color: $inBlueHover;
+          border-bottom: 1px solid $inBlueHover;
+          transition: all 0.3s ease-in-out;
 
-  .bigdata-body {
-    margin: 15px;
-    display: flex;
-    align-items: top;
-    // justify-content: center;
+        }
+      }
 
-  }
 
-  .flex-r {
-    display: flex;
-    flex-direction: row !important;
-    align-content: flex-start;
-    justify-content: space-between
-  }
+    }
 
-  .bigdata-list {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
+    .bigdata-body {
+      margin: 15px;
+      display: flex;
+      align-items: top;
+      // justify-content: center;
 
-    .twins-con {
-      width: 100% !important;
     }
 
-    .b-49 {
-      width: 49% !important;
+    .flex-r {
+      display: flex;
+      flex-direction: row !important;
+      align-content: flex-start;
+      justify-content: space-between
     }
 
-    .b-con {
-      width: 100%;
-      height: 28.5vh;
+    .bigdata-list {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
 
-      box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
-      -0 -0 30px rgba($color: #163696, $alpha: .5) inset;
+      .twins-con {
+        width: 100% !important;
+      }
 
-      // display: flex;
-      // flex-direction: column;
-      .b-tit {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        padding: 10px;
-
-        span {
-          font-size: 15px;
-          color: #00ceec;
-          margin-left: 5px;
-          text-shadow: 0 0 3px rgba($color: #41ff84, $alpha: .5),
-          -0 -0 10px rgba($color: #41fff8, $alpha: .9);
-        }
+      .b-49 {
+        width: 49% !important;
       }
 
-      .twins {
+      .b-con {
         width: 100%;
-        display: flex;
-        position: relative;
+        height: 28.5vh;
 
-        .count {
+        box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
+        -0 -0 30px rgba($color: #163696, $alpha: .5) inset;
+
+        // display: flex;
+        // flex-direction: column;
+        .b-tit {
           width: 100%;
-          color: #fff;
-          font-size: 12px;
-          position: absolute;
           display: flex;
           align-items: center;
-          left: 1rem;
-          top: 9px;
-          z-index: 100;
+          padding: 10px;
+
+          span {
+            font-size: 15px;
+            color: #00ceec;
+            margin-left: 5px;
+            text-shadow: 0 0 3px rgba($color: #41ff84, $alpha: .5),
+            -0 -0 10px rgba($color: #41fff8, $alpha: .9);
+          }
+        }
 
-          .count-z {
-            display: flex;
-            margin: 0 .5rem;
+        .twins {
+          width: 100%;
+          display: flex;
+          position: relative;
 
-            span {
-              margin-left: .4rem;
-              font-size: 1rem;
-              color: #2ee0fb !important;
-              font-weight: bolder;
+          .count {
+            width: 100%;
+            color: #fff;
+            font-size: 12px;
+            position: absolute;
+            display: flex;
+            align-items: center;
+            left: 1rem;
+            top: 9px;
+            z-index: 100;
+
+            .count-z {
+              display: flex;
+              margin: 0 .5rem;
+
+              span {
+                margin-left: .4rem;
+                font-size: 1rem;
+                color: #2ee0fb !important;
+                font-weight: bolder;
+              }
             }
-          }
 
 
+          }
         }
+
       }
 
-    }
+      .tall {
+        height: 59vh !important;
+      }
 
-    .tall {
-      height: 59vh !important;
-    }
+      .taller {
+        height: 89.5vh !important;
+      }
 
-    .taller {
-      height: 89.5vh !important;
-    }
+      .three {
+        display: flex;
+        flex-direction: column;
+      }
 
-    .three {
-      display: flex;
-      flex-direction: column;
-    }
+      .el-row {
+        width: 100%;
+      }
 
-    .el-row {
-      width: 100%;
-    }
 
+      .bigdata-map {
+        width: 100%;
+        height: 59vh;
+        position: relative;
+        background: #00101f;
 
-    .bigdata-map {
-      width: 100%;
-      height: 59vh;
-      position: relative;
-      background: #00101f;
-
-      .event-count {
-        color: #fff;
-        font-size: 14px;
-        font-weight: bolder;
-        padding: 10px;
-        background-color: #000000;
-        position: absolute;
-        top: 10px;
-        left: 10px;
-        z-index: 1000;
+        .event-count {
+          color: #fff;
+          font-size: 14px;
+          font-weight: bolder;
+          padding: 10px;
+          background-color: #000000;
+          position: absolute;
+          top: 10px;
+          left: 10px;
+          z-index: 1000;
 
-        span {
-          font-size: 16px;
-          color: #d50000;
+          span {
+            font-size: 16px;
+            color: #d50000;
+          }
         }
+
       }
 
     }
 
-  }
-
-  .wid-li-1 {
-    width: 396px;
-  }
+    .wid-li-1 {
+      width: 396px;
+    }
 
-  .wid-li-2 {
-    width: 760px;
-  }
+    .wid-li-2 {
+      width: 760px;
+    }
 
-  .wid-li-3 {
-    width: 850px;
-  }
+    .wid-li-3 {
+      width: 850px;
+    }
 
-  .wid-li-4 {
-    width: 304px;
-  }
+    .wid-li-4 {
+      width: 304px;
+    }
 
-  .mg-b-20 {
-    margin-bottom: 2vh;
-  }
+    .mg-b-20 {
+      margin-bottom: 2vh;
+    }
 
-  .m-l-15 {
-    margin-left: .5%;
+    .m-l-15 {
+      margin-left: .5%;
+    }
   }
-}
 </style>

src/views/bigdata/chart-equipmentDistribution.vue

@@ -31,11 +31,9 @@
     },
 
     methods: {
-
       sbfb() {
         let that = this
         getSbfb().then(resp => {
-          console.log("ssss",resp);
           that.myEcharts2();
         })
       },