事件感知开发

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",

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

@@ -22,200 +22,266 @@
             {{item}}
           </div>
         </div>
-        <div class="statisticalAnalysisBtn" @click="openStatisticalAnalysis"> 统计分析 ></div>
       </div>
-      <div class="filter-btn-box" v-show="tabsActiveName !== '走航监测'">
+      <div class="filter-btn-box">
-        <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-processStateSelect">
           <div  class="processStateSelect-btn"
-                v-for="item in filterButton.processStateSelect" 
+                v-for="item in filterButton.type"
                 :key="item"
-                :class="filterButton.processStateSelectActive == item ? 'processStateSelect-btn-active':''"
+                :class="filterButton.typeActive.indexOf(item) > -1 ? 'processStateSelect-btn-active':''"
-                @click="processStateSelect(item)"
+                @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='box3'>
-        <div class="event-details" v-for="item in eventListData" :key="item.index">
+        <div class="item" v-for='item in list' :key='item.id'>
-          <div class="event-details-title">
+          <div class="top">
-            <span>{{item.roadName||''}}</span>
+            <div>
-            <span>{{item.dt||''}}</span>
+              <span class='name'>{{item.name}}</span>
-            <!-- <span>未派发</span> -->
+              <span class='topType'>{{item.topType}}</span>
-          </div>
+            </div>
-          <div class="event-details-des">
+            <div>
-            <h5>道路起止:{{item.start||''}}--{{item.end||''}}</h5>
+              <span class="img" :class="item.type=='影响车辆(>30cm)'?'red':item.type=='影响行人(<30cm)'?'yellow':'green'"></span>
-            <!-- <p>简述简述简述简述简述简述简述简述</p> -->
+              <span class="type">{{item.type}}</span>
-            <p>pm10:{{item.pm10||''}}</p>
+            </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 { selectRaise, getAndSaveRecords, selectNoiceEvent } from '@/api/construction/index'
-import StatisticalAnalysis from "./StatisticalAnalysis.vue";
+import StatisticalAnalysis from './StatisticalAnalysis.vue'
-import bus from "@/views/layout/bus";
+import bus from '@/views/layout/bus'
 import {
   getRoadData,
   getRoadDataByTimeRegion,
-  selectRoadData,
+  selectRoadData
-} from "@/api/road";
+} from '@/api/road'
 export default {
-  data() {
+  data () {
     return {
-      tabsButton: ["视频感知","物联感知","走航监测"],
+      tabsButton: ['全部', '物联感知', '视频感知', '市民上报', '巡查上报'],
-      tabsActiveName: "走航监测",
+      tabsActiveName: '全部',
       statisticalAnalysisIsShow: false,
-      filterButton:{
+      filterButton: {
-        typeSelect:['事件','事件1'],
+        typeSelect: ['事件', '事件1'],
-        typeSelectActive:'事件',
+        typeSelectActive: '事件',
-        processStateSelect:['全部','未派发','未处置','已处置'],
+        type: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'],
-        processStateSelectActive:'全部',
+        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() {
+  created () {
-    const currentDate = new Date();
+    const currentDate = new Date()
-    currentDate.setTime(currentDate.getTime());
+    currentDate.setTime(currentDate.getTime())
-    currentDate.setTime(currentDate.getTime() - 24 * 60 * 60 * 1000);
+    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) {
+    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)
+      }
+    },
+    tabHandleClick (item) {
       this.tabsActiveName = item
-      if(item == '视频感知'){
+      if (item == '视频感知') {
 
       }
-      if(item == '物联感知'){
+      if (item == '物联感知') {
-        this.filterButton.typeSelect = ['工地扬尘','工地噪声']
+        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() {
+    async getRoadData () {
-      const res = await getRoadData({ dt: this.preTime });
+      const res = await getRoadData({ dt: this.preTime })
-      //路网数据
+      // 路网数据
-      this.roadData = res.data.data;
+      this.roadData = res.data.data
       // bus.$emit("roadOnMap", this.roadData);
     },
 
-    //走航监测
+    // 走航监测
-    selectRoadData() {
+    selectRoadData () {
-      let params = {
+      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() {
+    selectRaise () {
-      let params = {
+      const params = {
         pageSize: 5,
-        page: 1,
+        page: 1
       }
       selectRaise(params).then((res) => {
         console.log(res)
         // this.eventListData = res.data.data.roadData;
-
+      })
-      });
     },
-    selectNoiceEvent() {
+    selectNoiceEvent () {
-      let params = {
+      const params = {
         pageSize: 5,
-        page: 1,
+        page: 1
       }
       selectNoiceEvent(params).then((res) => {
         console.log(res)
-      });
+      })
     },
 
-    //分页
+    // 分页
-    pageChange(val) {
+    pageChange (val) {
-      if(this.tabsActiveName == '视频感知') {
+      if (this.tabsActiveName == '视频感知') {
 
-      } else if(this.tabsActiveName == '物联感知') {
+      } else if (this.tabsActiveName == '物联感知') {
-        let params = {
+        const params = {
           pageSize: 5,
-          page: val,
+          page: val
         }
         selectRaise(params).then((res) => {
           console.log(res)
-        });
+        })
-      } else if(this.tabsActiveName == '走航监测') {
+      } else if (this.tabsActiveName == '走航监测') {
-        let params = {
+        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,7 +289,8 @@ 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;
@@ -232,22 +299,23 @@ export default {
       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: '事件感知';
+      content: "事件感知";
-      text-shadow: 0px 2px 5px rgba($color: #091a29, $alpha: .6);
+      text-shadow: 0px 2px 5px rgba($color: #091a29, $alpha: 0.6);
       position: absolute;
       z-index: -1;
     }
   }
   .toady-list {
-    width:100%;
+    width: 100%;
-    height:132px;
+    height: 132px;
-    background: url(../../../../assets/construction/toadyListBgi.png) no-repeat center top;
+    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%{
+    0% {
-			transform:rotate(0deg);
+      transform: rotate(0deg);
-		}
+    }
-		100%{
+    100% {
-			transform:rotate(360deg);
+      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);
+          border: 1px solid rgba(0, 255, 255, 0.6);
-          background: rgba(2,51,87,.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);
+            color: rgba(255, 255, 255, 0.6);
-            background: url(../../../../assets/construction/iconAddress.png) no-repeat left center;
+            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; 
+            overflow: hidden;
-            text-overflow:ellipsis;
+            text-overflow: ellipsis;
-            display:-webkit-box; 
+            display: -webkit-box;
-            -webkit-box-orient:vertical;
+            -webkit-box-orient: vertical;
-            -webkit-line-clamp:1; 
+            -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);
+          border: 1px solid rgba(31, 254, 253, 0.5);
-          background: rgba(31,254,253, .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);
+    background: rgba(24, 51, 76, 0.95);
-    border: 1px solid rgba(50,227,235,.95);
+    border: 1px solid rgba(50, 227, 235, 0.95);
-    box-shadow: 0 0 10px  rgba($color: #1ffefd, $alpha: .4);
+    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>