From f4717b5744f9c1f2d6d0f7fd620faedf06f313a9 Mon Sep 17 00:00:00 2001
From: "851673013@qq.com" <851673013@qq.com>
Date: Tue, 5 Jul 2022 20:01:31 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E5=88=86=E6=9E=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../waterPoints/components/VideoList.vue      | 484 ++++++++++++------
 1 file changed, 316 insertions(+), 168 deletions(-)

diff --git a/src/views/pages/waterPoints/components/VideoList.vue b/src/views/pages/waterPoints/components/VideoList.vue
index e68fe09..5465568 100644
--- a/src/views/pages/waterPoints/components/VideoList.vue
+++ b/src/views/pages/waterPoints/components/VideoList.vue
@@ -1,200 +1,348 @@
 <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':''"
-              >
-          {{item}}
+    <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}`"
+          >
+            <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>
-
-    <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() {
+  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);
+  mounted () {
+    this.$nextTick(() => {
+      // 积水点来源分析charts图
+      this.initEventTypeCharts()
+      this.initEventTypeCharts2()
     })
   },
   methods: {
-    tabHandleClick(item) {
-      this.tabsActiveName = item
-    },
-    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)
-            //     }
-            //   })
-            // })
-            // 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
-        // })
+    // 积水点来源分析charts图
+    initEventTypeCharts () {
+      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: ['0%', '80%'],
+            label: {
+              normal: {
+                position: 'inner'
+              }
+            },
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            data: inner
+          }
+        ]
       }
+      const eventType = echarts.init(
+        document.getElementById('analysis-of-water-source')
+      )
+      eventType.setOption(option)
     },
-    searchLabel(value) {
-      const params = {
-        labelName:value
+    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
+          }
+        ]
       }
-      selectByLabelName(params).then((res) => {
-        console.log(res)
-        this.tabList = res.data.data
-      })
-    },
-  },
-};
+      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;
-      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;
+  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%;
       }
-      .tabs-button-btn-active {
-        font-size: 20px;
-        color: #fff;
+      span:nth-child(2) {
+        width: 199px;
       }
-      .tabs-button-btn-active::after {
-        content: '';
-        position: absolute;
-        bottom: -15px;
-        right: 6%;
-        width: 64px;
-        height: 5px;
-        border-radius: 5px;
-        background-color: #1ffffc;
+    }
+    .table-content {
+      height: 180px;
+      overflow-y: auto;
+      .table-content-card {
+        display: flex;
+        align-items: center;
+        margin-bottom: 5px;
+        span {
+          display: inline-block;
+          text-align: center;
+          width: 25%;
+        }
+        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;
+  .water-point-analysis {
+    display: flex;
+    & > div:first-child {
+      width: 60%;
     }
-    .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);
-      }
+    & > div:last-child {
+      width: 40%;
     }
-    .el-input__prefix {
-      color: rgba(31,254,253,.9);
+  }
+  .water-point-analysis-eachars {
+    display: flex;
+    & > div:first-child {
+      width: 60%;
+      height: 165px;
     }
-
-    .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%);
-      }
+    & > div:last-child {
+      width: 40%;
+      height: 165px;
     }
   }
 }