统计分析

src/views/pages/waterPoints/components/VideoList.vue

@@ -1,200 +1,349 @@
 <template>
   <div class="box">
-
-    <div class="tabs-button">
-      <div class="tabs-button-box">
-        <div  class="tabs-button-btn"
-              @click="tabHandleClick(item)"
-              v-for="item in tabsButton" 
-              :key="item"
-              :class="tabsActiveName == item?'tabs-button-btn-active':''"
+    <div class="title">统计分析</div>
+    <div class="water-points-content">
+      <div class="time">更新时间：{{ time }}</div>
+      <div class="water-point-reporting-title">
+        <div class="water-point-reporting-title-top">积水点上报Top10</div>
+        <div class="water-point-reporting-title-bottom"></div>
+      </div>
+      <div class="water-point-reporting-table">
+        <div class="table-title">
+          <span>序号</span><span>积水点</span><span>上报次数</span>
+        </div>
+        <div class="table-content">
+          <div
+            class="table-content-card"
+            v-for="(item, index) in dataList"
+            :key="`table-${index}`"
           >
-          {{item}}
+            <span>{{ index + 1 }}</span>
+            <el-tooltip
+              class="item"
+              effect="dark"
+              :content="item.name"
+              placement="top"
+            >
+              <span>{{ item.name }}</span></el-tooltip
+            ><span>{{ item.number }}</span>
           </div>
         </div>
       </div>
-
-    <div class="label-content">
-      <el-input
-        placeholder="请输入关键词"
-        prefix-icon="el-icon-search"
-        v-model="labelSearch"
-        @input="searchLabel"
-      >
-      </el-input>
-      <el-checkbox-group v-model="checkboxGroup">
-        <el-checkbox-button 
-          v-for="item in tabList" 
-          :label="item.labelName" 
-          :key="item.id"
-          @change="tabChange(item)"
-        >
-          {{item.labelName}}
-        </el-checkbox-button>
-      </el-checkbox-group>
+      <div class="water-point-analysis">
+        <div class="water-point-reporting-title">
+          <div class="water-point-reporting-title-top">积水点来源分析</div>
+          <div class="water-point-reporting-title-bottom"></div>
+        </div>
+        <div class="water-point-reporting-title">
+          <div class="water-point-reporting-title-top">积水点级别分析</div>
+          <div class="water-point-reporting-title-bottom"></div>
+        </div>
+      </div>
+      <div class="water-point-analysis-eachars">
+        <div id="analysis-of-water-source"></div>
+        <div id="analysis-of-water-level"></div>
+      </div>
     </div>
   </div>
 </template>
 <script>
-
-import { getCameraAll,getCameraLabel,getCameraAllLabel,searchCamera,getCameraAllOrgan,getCameraByParentId,selectByLabelName,selectByChannelName } from '@/api/videoSurveillance/index'
-import bus from "@/views/layout/bus";
-
+import moment from 'moment'
+import * as echarts from 'echarts'
 export default {
   data () {
     return {
-      tabsButton: ["视频标签","视频列表"],
-      tabsActiveName: "视频标签",
-      tabList:[],
-      labelSearch:'',
-      checkboxGroup: [],
-      cameraAllData:[],
-    };
+      time: moment().format('YYYY-MM-DD HH:mm:ss'),
+      dataList: [
+        {
+          name: '积水点位置66666666666666666666666',
+          number: '15'
+        },
+        {
+          name: '积水点位置666666666666',
+          number: '15'
+        },
+        {
+          name: '积水点位置6666666666666666666666666',
+          number: '15'
+        },
+        {
+          name: '积水点位置666666666666',
+          number: '15'
+        },
+        {
+          name: '积水点位置66666666666666666666666',
+          number: '15'
+        },
+        {
+          name: '积水点位置666666666666',
+          number: '15'
+        }
+      ]
+    }
   },
   mounted () {
-    getCameraAllLabel().then((res) => {
-      this.tabList = res.data.data
-    });
-    getCameraAll().then((res) => {
-      this.cameraAllData = res.data
-      // this.addResourceTomap('cameraAll',res.data);
+    this.$nextTick(() => {
+      // 积水点来源分析charts图
+      this.initEventTypeCharts()
+      this.initEventTypeCharts2()
     })
   },
   methods: {
-    tabHandleClick(item) {
-      this.tabsActiveName = item
+    // 积水点来源分析charts图
+    initEventTypeCharts () {
+      const inner = [
+        {
+          value: 2,
+          unit: '个',
+          name: '物联感知'
         },
-    tabChange(item){
-      if(this.checkboxGroup.indexOf(item.labelName) !== -1){
-          bus.$emit("removeCameraLayer",'全部')
-          getCameraLabel({labelCode:item.labelCode}).then((res) => {
-            bus.$emit("CameraSingleDataOnMap",item.labelName,res.data.data)
-
-            // this.addResourceTomap(item.labelName,res.data.data);
-            // res.data.data.forEach((item) => {
-            //   this.camreaTreeSingle.forEach((val) => {
-            //     if(item.nodeName == val.channelName){
-            //       val.children.push(item)
+        {
+          value: 2,
+          unit: '个',
+          name: '视频感知'
+        },
+        {
+          value: 4,
+          unit: '个',
+          name: '市民上报'
+        },
+        {
+          value: 2,
+          unit: '个',
+          name: '巡查上报'
+        }
+      ]
+      const legend1 = inner.map((v) => v.name)
+      const legendData = [...legend1]
+      const option = {
+        color: ['#FBBD00', '#A3A3A3', '#E97C30', '#5A99D3'],
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        grid: {
+          height: '10px'
+        },
+        // itemStyle: {
+        //   normal: {
+        //     borderWidth: 2
+        //   },
+        //   label: {
+        //     textStyle: {
+        //       color: 'black',
+        //       fontSize: 14,
+        //       fontWeight: 'bolder'
         //     }
-            //   })
-            // })
-            // this.camreaTreeIsShow = false;
-          })
-      }else {
-        bus.$emit("removeCameraLayer",item.labelName)
-        // this.checkStatus = "2"
-        // this.camreaTreeIsShow = true
-        // getCameraAllOrgan({parentId:'S4NbecfYB1DBH8HNULGS34'}).then((res) => {
-        //   this.camreaTree = res.data.data
-        // })
+        //   }
+        // },
+        chart: {
+          type: 'pie',
+          options3d: {
+            enabled: true,
+            alpha: 45,
+            beta: 0
           }
         },
-    searchLabel(value) {
-      const params = {
-        labelName:value
+        series: [
+          {
+            name: '访问来源',
+            type: 'pie',
+            radius: ['0%', '80%'],
+            label: {
+              normal: {
+                position: 'inner'
               }
-      selectByLabelName(params).then((res) => {
-        console.log(res)
-        this.tabList = res.data.data
-      })
             },
+            labelLine: {
+              normal: {
+                show: false
+              }
             },
-};
+            data: inner
+          }
+        ]
+      }
+      const eventType = echarts.init(
+        document.getElementById('analysis-of-water-source')
+      )
+      eventType.setOption(option)
+    },
+    initEventTypeCharts2 () {
+      const inner = [
+        {
+          value: 2,
+          unit: '个',
+          name: '物联感知'
+        },
+        {
+          value: 2,
+          unit: '个',
+          name: '视频感知'
+        },
+        {
+          value: 4,
+          unit: '个',
+          name: '市民上报'
+        },
+        {
+          value: 2,
+          unit: '个',
+          name: '巡查上报'
+        }
+      ]
+      const legend1 = inner.map((v) => v.name)
+      const legendData = [...legend1]
+      const option = {
+        color: ['#FBBD00', '#A3A3A3', '#E97C30', '#5A99D3'],
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        grid: {
+          height: '10px'
+        },
+        // itemStyle: {
+        //   normal: {
+        //     borderWidth: 2
+        //   },
+        //   label: {
+        //     textStyle: {
+        //       color: 'black',
+        //       fontSize: 14,
+        //       fontWeight: 'bolder'
+        //     }
+        //   }
+        // },
+        chart: {
+          type: 'pie',
+          options3d: {
+            enabled: true,
+            alpha: 45,
+            beta: 0
+          }
+        },
+        series: [
+          {
+            name: '访问来源',
+            type: 'pie',
+            radius: ['45%', '80%'],
+            label: {
+              normal: {
+                position: 'inner'
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: inner
+          }
+        ]
+      }
+      const eventType = echarts.init(
+        document.getElementById('analysis-of-water-level')
+      )
+      eventType.setOption(option)
+    }
+  }
+}
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .box {
   width: 100%;
   height: 100%;
-  background: url(../../../../assets/construction/listTopBg.png) no-repeat,
-              url(../../../../assets/construction/videoTag.png) no-repeat 324px 17px;
-  padding: 30px 0 18px 18px;
-
-  .tabs-button {
-    position: relative;
-    .tabs-button-box {
-      width: 358px;
-      padding-bottom: 11px;
-      border-bottom: 3px solid #2c619c;
+  background: url(../../../../assets/construction/subTitle.png) no-repeat;
+  text-align: center;
+  color: #fff;
+  .title {
+    font-size: 26px;
+    font-weight: bold;
+    background: linear-gradient(0deg, #9dbbd2 0%, #ffffff 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-family: 'Tensentype-ZhiHeiJ-W5';
+  }
+  .time {
+    text-align: left;
+    margin-bottom: 10px;
+    margin-top: 10px;
+  }
+  .water-point-reporting-title {
+    text-align: left;
+    padding-top: 5px;
+    font-weight: bold;
+    background: linear-gradient(
+      to right,
+      rgba(27, 103, 176, 1),
+      rgba(27, 103, 176, 0)
+    );
+    .water-point-reporting-title-top {
+      margin-left: 10px;
+    }
+    .water-point-reporting-title-bottom {
+      height: 5px;
+      background: linear-gradient(
+        to right,
+        rgba(55, 185, 192, 1),
+        rgba(55, 185, 192, 0)
+      );
+    }
+  }
+  .water-point-reporting-table {
+    .table-title {
+      margin: 10px 0;
+      span {
+        display: inline-block;
+        text-align: center;
+        width: 25%;
+      }
+      span:nth-child(2) {
+        width: 199px;
+      }
+    }
+    .table-content {
+      height: 180px;
+      overflow-y: auto;
+      .table-content-card {
         display: flex;
         align-items: center;
-      .tabs-button-btn {
-        font-size: 18px;
-        color: rgba($color: #fff, $alpha: 0.6);
-        position: relative;
-        cursor: pointer;
-        margin-right: 28px;
+        margin-bottom: 5px;
+        span {
+          display: inline-block;
+          text-align: center;
+          width: 25%;
         }
-      .tabs-button-btn-active {
-        font-size: 20px;
-        color: #fff;
-      }
-      .tabs-button-btn-active::after {
-        content: '';
-        position: absolute;
-        bottom: -15px;
-        right: 6%;
-        width: 64px;
-        height: 5px;
-        border-radius: 5px;
-        background-color: #1ffffc;
+        span:nth-child(2) {
+          width: 199px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          text-align: left;
         }
       }
     }
-
-  ::v-deep .label-content {
-    margin-top: 16px;
-    .el-input {
-      width: 358px;
   }
-    .el-input__inner {
-      border: 1px solid rgba(31,254,253,.9);
-      color: #fff;
-      border-radius: unset;
-      background: rgba($color: #203b5d, $alpha: .8);
-      &::placeholder {
-        color: rgba($color: #fff, $alpha: 0.6);
+  .water-point-analysis {
+    display: flex;
+    & > div:first-child {
+      width: 60%;
+    }
+    & > div:last-child {
+      width: 40%;
     }
   }
-    .el-input__prefix {
-      color: rgba(31,254,253,.9);
-    }
-
-    .el-checkbox-group {
-      height: 316px;
-      width: 372px;
-      overflow-y: auto;
-      margin-top: 6px;
-      &::-webkit-scrollbar {
-      width: 8px;
-      background-color: #10335e;
-      }
-      &::-webkit-scrollbar-thumb {
-        background-color: #446dac !important;
-      }
-    }
-    .el-checkbox-button {
-      border-radius: 15px;
-      margin: 10px;
-      .el-checkbox-button__inner {
-        height: 30px;
-        line-height: 6px;
-        border-radius: 15px;
-        background: linear-gradient(0deg, rgba($color: #24517b, $alpha: 1) 0, rgba($color: #24517b, $alpha: 0) 100%);
-        border: 1px solid #1d98a0;
-        font-size: 16px;
-        color: #1ffefd;
-      }
-      .el-checkbox-button__inner:hover {
-        border: 1px solid #1ffefd;
-        background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
-      }
-    }
-    .el-checkbox-button.is-checked {
-      .el-checkbox-button__inner{
-        color: #fff;
-        border: 1px solid #1ffefd;
-        background: linear-gradient(0deg, #1577d3 0%, #1251ab 100%);
+  .water-point-analysis-eachars {
+    display: flex;
+    // height: 165px;
+    & > div:first-child {
+      width: 60%;
+      height: 165px;
     }
+    & > div:last-child {
+      width: 40%;
+      height: 165px;
     }
   }
 }

src/views/pages/waterPoints/index.vue

@@ -26,10 +26,10 @@
         >
           <template slot-scope="{ item }">
             <div style="margin-bottom: -10px" class="name">
-              {{ item.text || "" }}
+              {{ item.text || '' }}
             </div>
             <span style="font-size: 10px; color: #afbcc5">{{
-              item.detail.address || ""
+              item.detail.address || ''
             }}</span>
           </template>
           <!-- <template slot="append">搜索</template> -->
@@ -72,7 +72,13 @@
         <div class="title">地图图层</div>
         <div class="change-btn-box">
           <el-checkbox-group v-model="changeLayerBtnGroup">
-            <el-checkbox-button v-for="item in changeLayerBtnList" :key="item.index" :label="item" @change="layerHandleChange(item)" border></el-checkbox-button>
+            <el-checkbox-button
+              v-for="item in changeLayerBtnList"
+              :key="item.index"
+              :label="item"
+              @change="layerHandleChange(item)"
+              border
+            ></el-checkbox-button>
           </el-checkbox-group>
         </div>
       </div>
@@ -89,7 +95,10 @@ import complaintEvent from './components/ComplaintEvent'
 import VideoList from './components/VideoList'
 import SiteList from './components/SiteList'
 import { selectByJdWd } from '@/api/construction/index'
-import { createSiteListPop, createCameraDetailsPop } from '@/supermap/createMarkerPopup'
+import {
+  createSiteListPop,
+  createCameraDetailsPop
+} from '@/supermap/createMarkerPopup'
 
 export default {
   data () {
@@ -102,7 +111,6 @@ export default {
       changeLayerBtnList: ['视频监控', '积水点'],
       changeLayerBtnGroup: [],
       eventCheckList: []
-
     }
   },
   components: {
@@ -129,11 +137,13 @@ export default {
       // this.circle(latLng);
       this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd })
       // this.WithinRadiusSite(latLng);
-      const dataEvent = [{
+      const dataEvent = [
+        {
           latLng: { lat: row.wd, lng: row.jd },
           data: row,
           type: 'site'
-      }]
+        }
+      ]
       this.hiMapFun.addPointsToMap(
         dataEvent,
         'construction.png',
@@ -293,7 +303,12 @@ export default {
           })
         }
       })
-      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, 'videoSurveillance.png', type, createCameraDetailsPop)
+      this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
+        dataEvent,
+        'videoSurveillance.png',
+        type,
+        createCameraDetailsPop
+      )
     }
   },
   beforeDestroy () {}
@@ -304,7 +319,7 @@ export default {
 
 @font-face {
   font-family: 'Tensentype-ZhiHeiJ-W5';
-  src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf");
+  src: url('../../../assets/construction/TTZhiHeiJ-W5.ttf');
 }
 .map-box {
   width: 100%;
@@ -323,7 +338,7 @@ export default {
     z-index: 1000;
     width: 100%;
     height: 166px;
-    background: url("~@/assets/construction/title.png") no-repeat;
+    background: url('~@/assets/construction/title.png') no-repeat;
     text-align: center;
     .title {
       font-size: 46px;
@@ -336,7 +351,7 @@ export default {
     }
     .title::before {
       content: '青岛市积水点地图';
-      text-shadow: 0px 3px 10px rgba(0,0,0,.9);
+      text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.9);
       position: absolute;
       z-index: -1;
     }
@@ -347,10 +362,10 @@ export default {
     z-index: 1000;
     left: 496px;
     top: 90px;
-    border: 1px solid rgba(31,254,253,.9);
+    border: 1px solid rgba(31, 254, 253, 0.9);
     ::v-deep .el-input__inner {
       color: #fff;
-      background: rgba($color: #203b5d, $alpha: .8);
+      background: rgba($color: #203b5d, $alpha: 0.8);
       width: 226px;
       height: 36px;
       border: none;
@@ -360,7 +375,7 @@ export default {
     }
     ::v-deep .el-input__prefix {
       top: -1px;
-      color: rgba(31,254,253,.9);
+      color: rgba(31, 254, 253, 0.9);
     }
     ::v-deep .el-input-group__append {
       width: 54px;
@@ -379,7 +394,7 @@ export default {
       z-index: -1 !important;
       width: 226px !important;
       left: 0px !important;
-      background: rgba(32,59,93,.8);
+      background: rgba(32, 59, 93, 0.8);
       border: 1px solid #1ffefd;
       li {
         color: #fff;
@@ -397,7 +412,7 @@ export default {
     top: 90px;
     height: 908px;
     width: 478px;
-    background: rgba($color: #05213b, $alpha: .85)
+    background: rgba($color: #05213b, $alpha: 0.85);
   }
 
   .eventNum {
@@ -433,8 +448,8 @@ export default {
     right: 8px;
     top: 92px;
     width: 398px;
-    height:460px;
-    background: rgba($color: #05213b, $alpha: .85);
+    // height:460px;
+    background: rgba($color: #05213b, $alpha: 0.85);
   }
 
   .siteList {
@@ -444,13 +459,13 @@ export default {
     top: 660px;
     width: 398px;
     // height:500px;
-    background: rgba($color: #05213b, $alpha: .85);
+    background: rgba($color: #05213b, $alpha: 0.85);
   }
 
   .changeLayer {
     width: 332px;
     height: 67px;
-    background: rgba(7,26,44,.8);
+    background: rgba(7, 26, 44, 0.8);
     position: absolute;
     bottom: 10px;
     left: 50%;
@@ -461,7 +476,7 @@ export default {
       width: 96px;
       height: 100%;
       font-size: 16px;
-      color: rgba(255,255,255,.6);
+      color: rgba(255, 255, 255, 0.6);
       text-align: center;
       line-height: 67px;
     }
@@ -476,13 +491,12 @@ export default {
           padding: 6px 14px;
           border: 0;
           border-radius: 10px;
-
         }
         .el-checkbox-button:first-child .el-checkbox-button__inner {
           margin-right: 10px;
         }
         .el-checkbox-button.is-checked .el-checkbox-button__inner {
-          background: #027DB4;
+          background: #027db4;
           color: #ffffff;
           box-shadow: unset;
         }
@@ -535,7 +549,7 @@ export default {
   }
 }
 </style>
-<style lang='scss'>
+<style lang="scss">
 // ::-webkit-scrollbar {
 //   width: 8px;
 //   background: rgba(255, 255, 255, 0.1);