From 7c3a72bd3a7bd2098dc9efa2657be0e01894de66 Mon Sep 17 00:00:00 2001
From: a0049873 <79py69t9wb@privaterelay.appleid.com>
Date: Tue, 5 Jul 2022 18:13:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E6=84=9F=E7=9F=A5=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   4 +-
 src/assets/construction/toadyListIcon2.png    | Bin 0 -> 2384 bytes
 .../waterPoints/components/ComplaintEvent.vue | 430 ++++++++++++------
 3 files changed, 282 insertions(+), 152 deletions(-)
 create mode 100644 src/assets/construction/toadyListIcon2.png

diff --git a/package.json b/package.json
index 5e09b1e..362e3a7 100644
--- a/package.json
+++ b/package.json
@@ -35,10 +35,10 @@
     "moment": "^2.29.1",
     "monaco-editor": "^0.20.0",
     "monaco-editor-webpack-plugin": "^1.9.0",
-    "node-sass": "^4.14.1",
+    "sass": "^1.51.0",
+    "sass-loader": "^10.1.0",
     "qs": "^6.9.4",
     "quill": "^1.3.7",
-    "sass-loader": "^9.0.2",
     "screenfull": "^4.2.1",
     "sortablejs": "^1.10.2",
     "svg-sprite-loader": "^5.0.0",
diff --git a/src/assets/construction/toadyListIcon2.png b/src/assets/construction/toadyListIcon2.png
new file mode 100644
index 0000000000000000000000000000000000000000..25b4df268325aea0175cafd91b07c0b00854df71
GIT binary patch
literal 2384
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
CV}v{a

literal 0
HcmV?d00001

diff --git a/src/views/pages/waterPoints/components/ComplaintEvent.vue b/src/views/pages/waterPoints/components/ComplaintEvent.vue
index 2825b3f..0c11b92 100644
--- a/src/views/pages/waterPoints/components/ComplaintEvent.vue
+++ b/src/views/pages/waterPoints/components/ComplaintEvent.vue
@@ -15,207 +15,273 @@
         <div class="tabs-button-box">
           <div  class="tabs-button-btn"
                 @click="tabHandleClick(item)"
-                v-for="item in tabsButton" 
+                v-for="item in tabsButton"
                 :key="item.index"
                 :class="tabsActiveName == item?'tabs-button-btn-active':''"
                 >
             {{item}}
           </div>
         </div>
-        <div class="statisticalAnalysisBtn" @click="openStatisticalAnalysis"> 统计分析 ></div>
       </div>
-      <div class="filter-btn-box" v-show="tabsActiveName !== '走航监测'">
-        <div class="filter-btn-typeSelect">
-          <div  class="typeSelect-btn" 
-                v-for="item in filterButton.typeSelect" 
-                :key="item" 
-                :class="filterButton.typeSelectActive == item ? 'typeSelect-btn-active':''"
-                @click="typeSelect(item)"
-                >{{item}}</div>
-        </div>
+      <div class="filter-btn-box">
         <div class="filter-btn-processStateSelect">
-          <div  class="processStateSelect-btn" 
-                v-for="item in filterButton.processStateSelect" 
+          <div  class="processStateSelect-btn"
+                v-for="item in filterButton.type"
                 :key="item"
-                :class="filterButton.processStateSelectActive == item ? 'processStateSelect-btn-active':''"
-                @click="processStateSelect(item)"
+                :class="filterButton.typeActive.indexOf(item) > -1 ? 'processStateSelect-btn-active':''"
+                @click="selectType(item)"
                 >
             <div class="select-circle"></div>
             <div class="processStateSelect">{{item}}</div>
           </div>
         </div>
       </div>
-      <div class="event-list" :style="{ 'margin-top': (tabsActiveName == '走航监测'? '60px' :'12px')}">
-        <div class="event-details" v-for="item in eventListData" :key="item.index">
-          <div class="event-details-title">
-            <span>{{item.roadName||''}}</span>
-            <span>{{item.dt||''}}</span>
-            <!-- <span>未派发</span> -->
-          </div>
-          <div class="event-details-des">
-            <h5>道路起止:{{item.start||''}}--{{item.end||''}}</h5>
-            <!-- <p>简述简述简述简述简述简述简述简述</p> -->
-            <p>pm10:{{item.pm10||''}}</p>
+      <div class='box3'>
+        <div class="item" v-for='item in list' :key='item.id'>
+          <div class="top">
+            <div>
+              <span class='name'>{{item.name}}</span>
+              <span class='topType'>{{item.topType}}</span>
+            </div>
+            <div>
+              <span class="img" :class="item.type=='影响车辆(>30cm)'?'red':item.type=='影响行人(<30cm)'?'yellow':'green'"></span>
+              <span class="type">{{item.type}}</span>
+            </div>
           </div>
+          <div class="bottom">{{item.text}}</div>
         </div>
-        <el-pagination
-          background
-          layout="prev, pager, next"
-          @current-change="pageChange"
-          :total="total">
-        </el-pagination>
       </div>
     </div>
     <statistical-analysis v-if="statisticalAnalysisIsShow" class="statisticalAnalysis" @closeDialog='statisticalAnalysisIsShow = false'></statistical-analysis>
   </div>
 </template>
 <script>
-import { selectRaise,getAndSaveRecords,selectNoiceEvent } from "@/api/construction/index";
-import StatisticalAnalysis from "./StatisticalAnalysis.vue";
-import bus from "@/views/layout/bus";
+import { selectRaise, getAndSaveRecords, selectNoiceEvent } from '@/api/construction/index'
+import StatisticalAnalysis from './StatisticalAnalysis.vue'
+import bus from '@/views/layout/bus'
 import {
   getRoadData,
   getRoadDataByTimeRegion,
-  selectRoadData,
-} from "@/api/road";
+  selectRoadData
+} from '@/api/road'
 export default {
-  data() {
+  data () {
     return {
-      tabsButton: ["视频感知","物联感知","走航监测"],
-      tabsActiveName: "走航监测",
+      tabsButton: ['全部', '物联感知', '视频感知', '市民上报', '巡查上报'],
+      tabsActiveName: '全部',
       statisticalAnalysisIsShow: false,
-      filterButton:{
-        typeSelect:['事件','事件1'],
-        typeSelectActive:'事件',
-        processStateSelect:['全部','未派发','未处置','已处置'],
-        processStateSelectActive:'全部',
+      filterButton: {
+        typeSelect: ['事件', '事件1'],
+        typeSelectActive: '事件',
+        type: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'],
+        processStateSelect: ['全部', '未派发', '未处置', '已处置'],
+        processStateSelectActive: '全部',
+        typeActive: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)']
       },
       eventListData: [],
-      preTime: "",
+      preTime: '',
       total: 0,
-      roadData:[],
-    };
+      roadData: [],
+      list: [{
+        name: '香港中路山东路',
+        id: '1',
+        topType: '物联感知',
+        type: '影响车辆(>30cm)',
+        text: '液位：12cm'
+      }, {
+        name: '香港中路山东路',
+        id: '2',
+        topType: '物联感知',
+        type: '影响车辆(>30cm)',
+        text: '液位：12cm'
+      }, {
+        name: '香港中路山东路',
+        id: '3',
+        topType: '物联感知',
+        type: '影响行人(<30cm)',
+        text: '液位：12cm'
+      }, {
+        name: '香港中路山东路',
+        id: '4',
+        topType: '物联感知',
+        type: '影响车辆(>30cm)',
+        text: '液位：12cm'
+      }, {
+        name: '香港中路山东路',
+        id: '5',
+        topType: '物联感知',
+        type: '影响车辆(>30cm)',
+        text: '液位：12cm'
+      }, {
+        name: '香港中路山东路',
+        id: '6',
+        topType: '物联感知',
+        type: '无积水(<10cm)',
+        text: '液位：12cm'
+      }, {
+        name: '香港中路山东路',
+        id: '7',
+        topType: '物联感知',
+        type: '影响车辆(>30cm)',
+        text: '液位：12cm'
+      }, {
+        name: '香港中路山东路',
+        id: '8',
+        topType: '物联感知',
+        type: '影响行人(<30cm)',
+        text: '液位：12cm'
+      }, {
+        name: '香港中路山东路',
+        id: '9',
+        topType: '物联感知',
+        type: '影响车辆(>30cm)',
+        text: '液位：12cm'
+      }, {
+        name: '香港中路山东路',
+        id: '10',
+        topType: '物联感知',
+        type: '影响车辆(>30cm)',
+        text: '液位：12cm'
+      }, {
+        name: '香港中路山东路',
+        id: '11',
+        topType: '物联感知',
+        type: '影响车辆(>30cm)',
+        text: '液位：12cm'
+      }, {
+        name: '香港中路山东路',
+        id: '12',
+        topType: '物联感知',
+        type: '无积水(<10cm)',
+        text: '液位：12cm'
+      }]
+    }
   },
   components: {
-    StatisticalAnalysis,
+    StatisticalAnalysis
   },
-  created() {
-    const currentDate = new Date();
-    currentDate.setTime(currentDate.getTime());
-    currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000);
+  created () {
+    const currentDate = new Date()
+    currentDate.setTime(currentDate.getTime())
+    currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000)
     this.preTime =
       currentDate.getFullYear() +
-      "-" +
+      '-' +
       (currentDate.getMonth() + 1) +
-      "-" +
+      '-' +
       currentDate.getDate() +
-      " " +
-      "00:00:00";
+      ' ' +
+      '00:00:00'
   },
-  mounted() {
+  mounted () {
     this.getRoadData()
     this.selectRoadData()
     this.selectRaise()
     this.selectNoiceEvent()
   },
   methods: {
-    tabHandleClick(item) {
-      this.tabsActiveName = item
-      if(item == '视频感知'){
-        
+    selectType (item) {
+      if (this.filterButton.typeActive.indexOf(item) > -1) {
+        this.filterButton.typeActive.splice(this.filterButton.typeActive.indexOf(item), 1)
+      } else {
+        this.filterButton.typeActive.push(item)
       }
-      if(item == '物联感知'){
-        this.filterButton.typeSelect = ['工地扬尘','工地噪声']
+    },
+    tabHandleClick (item) {
+      this.tabsActiveName = item
+      if (item == '视频感知') {
+
+      }
+      if (item == '物联感知') {
+        this.filterButton.typeSelect = ['工地扬尘', '工地噪声']
         this.typeSelectActive = '工地扬尘'
       }
-      if(item == '走航监测'){
+      if (item == '走航监测') {
         this.selectRoadData()
       }
     },
-    openStatisticalAnalysis() {
+    openStatisticalAnalysis () {
       this.statisticalAnalysisIsShow = true
     },
-    typeSelect(item) {
+    typeSelect (item) {
       this.filterButton.typeSelectActive = item
     },
-    processStateSelect(item) {
+    processStateSelect (item) {
       this.filterButton.processStateSelectActive = item
     },
 
-    async getRoadData() {
-      const res = await getRoadData({ dt: this.preTime });
-      //路网数据
-      this.roadData = res.data.data;
+    async getRoadData () {
+      const res = await getRoadData({ dt: this.preTime })
+      // 路网数据
+      this.roadData = res.data.data
       // bus.$emit("roadOnMap", this.roadData);
     },
 
-    //走航监测
-    selectRoadData() {
-      let params = {
+    // 走航监测
+    selectRoadData () {
+      const params = {
         pageSize: 5,
-        page: 1,
+        page: 1
       }
       selectRoadData(params).then((res) => {
-        this.eventListData = res.data.data.roadData;
+        this.eventListData = res.data.data.roadData
         this.total = res.data.data.sum
-      });
+      })
     },
 
-    //物联感知  扬尘 噪声
-    selectRaise() {
-      let params = {
+    // 物联感知  扬尘 噪声
+    selectRaise () {
+      const params = {
         pageSize: 5,
-        page: 1,
+        page: 1
       }
       selectRaise(params).then((res) => {
         console.log(res)
         // this.eventListData = res.data.data.roadData;
-
-      });
+      })
     },
-    selectNoiceEvent() {
-      let params = {
+    selectNoiceEvent () {
+      const params = {
         pageSize: 5,
-        page: 1,
+        page: 1
       }
       selectNoiceEvent(params).then((res) => {
         console.log(res)
-      });
+      })
     },
 
-    //分页
-    pageChange(val) {
-      if(this.tabsActiveName == '视频感知') {
-        
-      } else if(this.tabsActiveName == '物联感知') {
-        let params = {
+    // 分页
+    pageChange (val) {
+      if (this.tabsActiveName == '视频感知') {
+
+      } else if (this.tabsActiveName == '物联感知') {
+        const params = {
           pageSize: 5,
-          page: val,
+          page: val
         }
         selectRaise(params).then((res) => {
           console.log(res)
-        });
-      } else if(this.tabsActiveName == '走航监测') {
-        let params = {
+        })
+      } else if (this.tabsActiveName == '走航监测') {
+        const params = {
           pageSize: 5,
-          page: val,
+          page: val
         }
         selectRoadData(params).then((res) => {
-          this.eventListData = res.data.data.roadData;
-        });
+          this.eventListData = res.data.data.roadData
+        })
       }
     }
-  },
-};
+  }
+}
 </script>
 <style lang='scss' scoped>
-
 @font-face {
-  font-family: 'Tensentype-ZhiHeiJ-W5';
+  font-family: "Tensentype-ZhiHeiJ-W5";
   src: url("../../../../assets/construction/TTZhiHeiJ-W5.ttf");
 }
 @font-face {
-  font-family: 'DIN-Bold';
+  font-family: "DIN-Bold";
   src: url("../../../../assets/construction/DIN-Bold.otf");
 }
 .box {
@@ -223,31 +289,33 @@ export default {
   header {
     width: 100%;
     height: 44px;
-    background: url(../../../../assets/construction/subTitle.png) no-repeat center;
+    background: url(../../../../assets/construction/subTitle.png) no-repeat
+      center;
     text-align: center;
     .title {
       font-size: 26px;
-      font-weight: bold;  
+      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';
+      font-family: "Tensentype-ZhiHeiJ-W5";
     }
     .title::before {
-      content: '事件感知';
-      text-shadow: 0px 2px 5px rgba($color: #091a29, $alpha: .6);
+      content: "事件感知";
+      text-shadow: 0px 2px 5px rgba($color: #091a29, $alpha: 0.6);
       position: absolute;
       z-index: -1;
     }
   }
   .toady-list {
-    width:100%;
-    height:132px;
-    background: url(../../../../assets/construction/toadyListBgi.png) no-repeat center top;
+    width: 100%;
+    height: 132px;
+    background: url(../../../../assets/construction/toadyListBgi.png) no-repeat
+      center top;
     .toady-list-content {
       margin-left: 80px;
-      height:128px;
+      height: 128px;
       position: relative;
       .toady-list-rotate {
         position: absolute;
@@ -260,7 +328,10 @@ export default {
         position: absolute;
         width: 128px;
         height: 128px;
-        background: url(../../../../assets/construction/toadyListIcon.png) no-repeat;
+        background: url(../../../../assets/construction/toadyListIcon2.png)
+          no-repeat;
+        background-position: center;
+        background-size: 40%;
       }
       .toady-list-num {
         position: absolute;
@@ -268,7 +339,8 @@ export default {
         height: 72px;
         top: 20px;
         left: 100px;
-        background: url(../../../../assets/construction/toadyListBgi2.png) no-repeat;
+        background: url(../../../../assets/construction/toadyListBgi2.png)
+          no-repeat;
         color: #fff;
         line-height: 72px;
         text-align: center;
@@ -280,28 +352,28 @@ export default {
           background-clip: text;
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
-          font-family: 'DIN-Bold';
+          font-family: "DIN-Bold";
         }
       }
     }
   }
-  
+
   @keyframes routation {
-    0%{
-			transform:rotate(0deg);
-		}
-		100%{
-			transform:rotate(360deg);
-		}
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
 
   .tab-box {
-    margin:0 10px;
+    margin: 0 10px;
 
     .tabs-button {
       position: relative;
       .tabs-button-box {
-        width: 340px;
+        width: 460px;
         padding-bottom: 11px;
         border-bottom: 3px solid #2c619c;
         display: flex;
@@ -318,7 +390,7 @@ export default {
           color: #fff;
         }
         .tabs-button-btn-active::after {
-          content: '';
+          content: "";
           position: absolute;
           bottom: -15px;
           // right: 24%;
@@ -339,7 +411,7 @@ export default {
         color: #1ffefd;
         line-height: 28px;
         text-align: center;
-        border: 1px solid rgba(31, 254, 253, .6);
+        border: 1px solid rgba(31, 254, 253, 0.6);
         border-radius: 14px;
         cursor: pointer;
       }
@@ -351,8 +423,8 @@ export default {
         display: flex;
         .typeSelect-btn {
           border-radius: 20px;
-          border: 1px solid rgba(0, 255, 255, .6);
-          background: rgba(2,51,87,.6);
+          border: 1px solid rgba(0, 255, 255, 0.6);
+          background: rgba(2, 51, 87, 0.6);
           margin-right: 5px;
           padding: 4px 10px;
           font-size: 14px;
@@ -372,7 +444,7 @@ export default {
         .processStateSelect-btn {
           display: flex;
           align-items: center;
-          margin-left: 24px;
+          margin-left: 10px;
           cursor: pointer;
           .select-circle {
             width: 16px;
@@ -430,10 +502,14 @@ export default {
             font-size: 18px;
             font-weight: bold;
             line-height: 36px;
-            background: linear-gradient(90deg, rgba($color: #0873c1, $alpha: 1) 0, rgba($color: #0873c1, $alpha: 0) 100%);
+            background: linear-gradient(
+              90deg,
+              rgba($color: #0873c1, $alpha: 1) 0,
+              rgba($color: #0873c1, $alpha: 0) 100%
+            );
           }
           span:nth-child(2) {
-            color: rgba(255,255,255,.6);
+            color: rgba(255, 255, 255, 0.6);
             padding-left: 80px;
           }
           span:nth-child(3) {
@@ -453,17 +529,18 @@ export default {
           h5 {
             font-weight: normal;
             padding-left: 18px;
-            color: rgba(255,255,255, .6);
-            background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
+            color: rgba(255, 255, 255, 0.6);
+            background: url(../../../../assets/construction/iconAddress.png)
+              no-repeat left center;
           }
           p {
-            color: rgba(255,255,255, .8);
+            color: rgba(255, 255, 255, 0.8);
             line-height: 28px;
-            overflow:hidden; 
-            text-overflow:ellipsis;
-            display:-webkit-box; 
-            -webkit-box-orient:vertical;
-            -webkit-line-clamp:1; 
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
           }
         }
       }
@@ -474,18 +551,19 @@ export default {
         bottom: 0px;
         transform: translateX(-50%);
         // margin-top: 16px;
-        button, ul>li {
+        button,
+        ul > li {
           width: 28px;
           height: 28px;
           border-radius: 2px;
-          border: 1px solid rgba(31,254,253, .5);
+          border: 1px solid rgba(31, 254, 253, 0.5);
           background: transparent;
-          color: rgba(31,254,253, .5);
+          color: rgba(31, 254, 253, 0.5);
         }
         li:not(.disabled).active {
           color: #fff;
-          border: 1px solid rgba(31,254,253, .5);
-          background: rgba(31,254,253, .5);
+          border: 1px solid rgba(31, 254, 253, 0.5);
+          background: rgba(31, 254, 253, 0.5);
         }
       }
     }
@@ -497,9 +575,61 @@ export default {
     top: 0;
     width: 400px;
     height: 878px;
-    background: rgba(24,51,76,.95);
-    border: 1px solid rgba(50,227,235,.95);
-    box-shadow: 0 0 10px  rgba($color: #1ffefd, $alpha: .4);
+    background: rgba(24, 51, 76, 0.95);
+    border: 1px solid rgba(50, 227, 235, 0.95);
+    box-shadow: 0 0 10px rgba($color: #1ffefd, $alpha: 0.4);
   }
 }
+.box3 {
+  color: #fff;
+  margin-top: 10px;
+  height: 620px;
+  overflow-y: scroll;
+  .item {
+    margin-top: 10px;
+    background: rgba(5, 33, 59, 0.35);
+    padding: 10px;
+    .top {
+      display: flex;
+      justify-content: space-between;
+      & > div:nth-of-type(2) {
+        width: 140px;
+      }
+      .name {
+        font-weight: 600;
+      }
+      .topType {
+        margin-left: 5px;
+        padding: 4px 10px;
+        font-size: 14px;
+        border-radius: 10px;
+        border: 1px #fff solid;
+        background: rgba(5, 33, 59, 0.55);
+      }
+      .img {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        border-radius: 10px;
+        margin-right: 5px;
+        background: red;
+      }
+      .red {
+        background: red;
+      }
+      .yellow {
+        background: yellow;
+      }
+      .green {
+        background: green;
+      }
+    }
+    .bottom {
+      margin-top: 10px;
+    }
+  }
+}
+.box3::-webkit-scrollbar {
+  display: none;
+}
 </style>