1

src/api/bigdata.js

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

src/views/bigdata/bigdata.vue

@@ -101,24 +101,24 @@
       </div>
       <!-- 第五纵向-->
       <!--<div class="bigdata-list wid-li-3 m-l-15 flex-r">-->
-        <!--<div class="b-con mg-b-20 tall">-->
-          <!--<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">-->
-            <!--<span>网格人员</span>-->
-          <!--</div>-->
-          <!--<chartGridStaff></chartGridStaff>-->
-        <!--</div>-->
-        <!--<div class="b-con mg-b-20 b-49">-->
-          <!--<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">-->
-            <!--<span>防火队</span>-->
-          <!--</div>-->
-          <!--<chartFireBrigade></chartFireBrigade>-->
-        <!--</div>-->
-        <!--<div class="b-con mg-b-20 b-49">-->
-          <!--<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">-->
-            <!--<span>气象站</span>-->
-          <!--</div>-->
-          <!--<chartWeatherStation></chartWeatherStation>-->
-        <!--</div>-->
+      <!--<div class="b-con mg-b-20 tall">-->
+      <!--<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">-->
+      <!--<span>网格人员</span>-->
+      <!--</div>-->
+      <!--<chartGridStaff></chartGridStaff>-->
+      <!--</div>-->
+      <!--<div class="b-con mg-b-20 b-49">-->
+      <!--<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">-->
+      <!--<span>防火队</span>-->
+      <!--</div>-->
+      <!--<chartFireBrigade></chartFireBrigade>-->
+      <!--</div>-->
+      <!--<div class="b-con mg-b-20 b-49">-->
+      <!--<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">-->
+      <!--<span>气象站</span>-->
+      <!--</div>-->
+      <!--<chartWeatherStation></chartWeatherStation>-->
+      <!--</div>-->
       <!--</div>-->
       <!-- 第六纵向-->
       <div class="bigdata-list wid-li-1 m-l-15">
@@ -135,331 +135,342 @@
 </template>
 
 <script>
-import tabbar from './tabbar.vue' //区域切换
-import bigdataSupermap from '@/components/supermap' //超图
-
-//echarts
-import chartEvent from './chart-event.vue' //1  事件、、
-import chartPollutionSource from './chart-pollutionSource.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 chartKeyEnterprises from './chart-keyEnterprises.vue' //8  重点企业、、
-import chartWeatherTrends from './chart-weatherTrends.vue' //9  天气趋势、、
-import chartNoBurningArea from './chart-noBurningArea.vue' //10 禁烧区分布、、
-// import chartFireBrigade from './chart-fireBrigade.vue' //12 防火队、、
-// import chartGridStaff from './chart-gridStaff.vue' //13 网格人员、、
-// import chartWeatherStation from './chart-weatherStation.vue' //14 气象站、、
-import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
-
-export default {
-  components: {
-    bigdataSupermap,
-    tabbar,
-    chartEvent,
-    chartPollutionSource,
-    chartEquipmentType,
-    chartFireCause,
-    chartDeviceReportingEvents,
-    chartEventTrend,
-    chartKeyArea,
-    chartKeyEnterprises,
-    chartWeatherTrends,
-    chartNoBurningArea,
-    // chartFireBrigade,
-    // chartGridStaff,
-    // chartWeatherStation,
-    chartEquipmentDistribution
-  },
-  data() {
-    return {
-      visited: '',
-      navbar: [
-        {
-          //生态云图
-          path: '/forest',
-          name: '生态云图'
-        },
-        {
-          //数据中心
-          path: '/datacenter',
-          name: '数据中心'
-        },
-        {
-          //监控中心
-          path: '/monitor',
-          name: '监控中心'
-        }, {
-          path: '/',
-          name: '土壤墒情'
-        },
-        {
-          path: '/',
-          name: '污染源'
-        }, {
-          path: '/',
-          name: '水质环境'
-        },
-        {
-          path: '/',
-          name: '大气环境'
-        },
-        {
-          path: '/bigdata',
-          name: '统计分析'
-        }
-      ],
-      total: 0, //事件总数
-      untreated: 0, //事件-未处理
-      processing: 0 // 事件-处理中
+  import tabbar from './tabbar.vue' //区域切换
+  import bigdataSupermap from '@/components/supermap' //超图
+
+  //echarts
+  import chartEvent from './chart-event.vue' //1  事件、、
+  import chartPollutionSource from './chart-pollutionSource.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 chartKeyEnterprises from './chart-keyEnterprises.vue' //8  重点企业、、
+  import chartWeatherTrends from './chart-weatherTrends.vue' //9  天气趋势、、
+  import chartNoBurningArea from './chart-noBurningArea.vue' //10 禁烧区分布、、
+  // import chartFireBrigade from './chart-fireBrigade.vue' //12 防火队、、
+  // import chartGridStaff from './chart-gridStaff.vue' //13 网格人员、、
+  // import chartWeatherStation from './chart-weatherStation.vue' //14 气象站、、
+  import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
+  import {getRlt} from '@/api/bigdata'
+
+  export default {
+    components: {
+      bigdataSupermap,
+      tabbar,
+      chartEvent,
+      chartPollutionSource,
+      chartEquipmentType,
+      chartFireCause,
+      chartDeviceReportingEvents,
+      chartEventTrend,
+      chartKeyArea,
+      chartKeyEnterprises,
+      chartWeatherTrends,
+      chartNoBurningArea,
+      // chartFireBrigade,
+      // chartGridStaff,
+      // chartWeatherStation,
+      chartEquipmentDistribution
+    },
+    data() {
+      return {
+        visited: '',
+        navbar: [
+          {
+            //生态云图
+            path: '/forest',
+            name: '生态云图'
+          },
+          {
+            //数据中心
+            path: '/datacenter',
+            name: '数据中心'
+          },
+          {
+            //监控中心
+            path: '/monitor',
+            name: '监控中心'
+          }, {
+            path: '/',
+            name: '土壤墒情'
+          },
+          {
+            path: '/',
+            name: '污染源'
+          }, {
+            path: '/',
+            name: '水质环境'
+          },
+          {
+            path: '/',
+            name: '大气环境'
+          },
+          {
+            path: '/bigdata',
+            name: '统计分析'
+          }
+        ],
+        total: 0, //事件总数
+        untreated: 0, //事件-未处理
+        processing: 0 // 事件-处理中
 
+      }
+    },
+    methods: {
+
+      rlt() {
+        let that = this
+        getRlt().then(resp => {
+          setTimeout(() => {
+            //事件分布
+            that.$refs.bigdataSupermap.loadHeatMap(resp.data)
+          }, 5000)
+        })
+      }
+    },
+    mounted() {
+      this.rlt()
     }
-  },
-  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;
-
-  .el-loading-mask {
-    background: none;
-  }
-
-  .header {
-    height: 3rem;
-    display: flex;
-    align-items: center;
+  .bigdata-con {
+    width: -webkit-fit-content;
+    height: 100%;
+    background: #01020c;
 
-    .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: 22px;
-      }
+    .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: 22px;
+        }
       }
 
-      .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>