联勤联动分类,智能发现分类

src/components/MonitorComponents/MonitorCard/mode1.vue

@@ -3,6 +3,11 @@
   <div class="card-title" :style="`color:${color}`">
     <div class="dot"/>
     {{title}}
+    <p v-if="showTab">
+      <span :class="{on: curTab === '处置中'}" @click="handleClick('处置中')">处置中</span>
+      |
+      <span :class="{on: curTab === '已完成'}" @click="handleClick('已完成')">已完成</span>
+    </p>
     <div class="line">
       <img src="@/assets/images/card-title-line.png"/>
     </div>
@@ -23,8 +28,23 @@ export default {
     },
     color: {
       type: String,
+    },
+    showTab: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      curTab: '处置中',
     }
   },
+  methods: {
+    handleClick(type) {
+      this.curTab = type
+      this.$store.commit('SET_CUR_TAB', type)
+    },
+  },
 }
 </script>
 
@@ -35,6 +55,16 @@ export default {
     align-items center
     font-size .11rem
     font-weight bold
+    >p
+      font-weight normal
+      margin-left .05rem
+      font-size .09rem
+      >span
+        color #999
+        cursor pointer
+        &:hover
+        &.on
+          color #fff
     .dot
       width .03rem
       height .1rem

src/components/MonitorComponents/MonitorForm/monitor-form.vue

@@ -4,12 +4,14 @@
     <Row class="row" v-for="(row, rowIndex) in layout" :key="rowIndex">
       <i-col class="col" v-for="(col, key) in row" :key="key" :span="col.width" :offset="col.offset || 0">
         <div :style="`text-align: ${col.align || 'right'}; width:${labelWidth}rem;`">{{col.label}}：</div>
-        <img v-if="col.type == 'img'" @click="handleView(model[key])" :src="require(`@/assets/images/${model[key]}`)"/>
+        <template v-if="col.type == 'img'">
+          <img v-for="img in model[key].split(',')" :key="img" @click="handleView(img)" :src="img" />
+        </template>
         <div v-else class="content">{{col.format ? col.format(model[key]) : (model[key] || ' ')}}</div>
       </i-col>
     </Row>
-    <m-modal v-model="showImg">
-      <img v-if="showImg" style="width: 100%;" :src="require(`@/assets/images/${curSrc}`)"/>
+    <m-modal v-model="showImg" width="40%" title="图片">
+      <img v-if="showImg" style="max-height:45vh;width:100%;" :src="curSrc"/>
     </m-modal>
   </div>
 </template>
@@ -79,7 +81,7 @@ export default {
     .content
       flex 1
     img
-      width 25%
+      width 20%
       height .5rem
       margin 0.05rem 0
       cursor pointer

src/server/api.js

@@ -2,12 +2,13 @@ let BASE_URL = ''
 let DATA_URL = ''
 switch (process.env.NODE_ENV) {
 case 'production':
-  BASE_URL = 'http://yangpu.hm.omniview.pro/api'
+  BASE_URL = 'http://10.89.4.164/api'
+  // BASE_URL = 'http://yangpu.hm.omniview.pro/api'
   DATA_URL = 'http://10.89.1.208:10005'
   break
 default:
+  // BASE_URL = 'http://yapi.omniview.pro/mock/350/api'
   BASE_URL = 'http://yangpu.hm.omniview.pro/api'
-  // BASE_URL = 'http://yapi.omniview.pro/mock/350'
   DATA_URL = 'http://10.89.1.208:10005'
 }
 export default {

src/store/actions.js

@@ -22,6 +22,7 @@ export default {
     dispatch('getDiscoverInfo')
     dispatch('getRepairInfo')
     dispatch('getHandleList')
+    dispatch('getDoneList')
   },
   async getGreenInfo({commit}) {
     const result = [
@@ -113,7 +114,7 @@ export default {
     }).then(res => {
       const sum = {total: 0, today: 0}
       const data = com.confirm(res, 'data.content', [])
-      const keys = ['staffLeaveAlarmTcfteodr', 'parkFireExit', 'nonVehicleCharg', 'elevatorLock', 'buildingVibration', 'trash', 'manholeCover', 'waterTank', 'roofWater', 'hermeticSpace', 'accCtl']
+      const keys = ['heap', 'parkFireExit', 'nonVehicleCharg', 'buildingVibration', 'trash', 'manholeCover', 'waterTank', 'roofWater', 'hermeticSpace', 'accCtl', 'streetMonitor']
       const result = data.filter(item => keys.indexOf(item.types) >= 0)
       result.forEach(e => {
         sum.total += +e.total
@@ -141,4 +142,9 @@ export default {
       commit('SET_HANDLE_LIST', com.confirm(res, 'data.content', []))
     })
   },
+  getDoneList({commit}) { // 获取并全局设置已完成列表
+    ajax.get({url: api.GET_HANDLE_LIST, params: {state: 5, streetId}}).then(res => {
+      commit('SET_DONE_LIST', com.confirm(res, 'data.content', []))
+    })
+  },
 }

src/store/mutations.js

@@ -51,7 +51,13 @@ export default {
   SET_REPAIR_INFO(state, data) {
     state.repairInfo = data
   },
+  SET_CUR_TAB(state, val) {
+    state.handleCurTab = val
+  },
   SET_HANDLE_LIST(state, data) {
     state.handleList = data
   },
+  SET_DONE_LIST(state, data) {
+    state.doneList = data
+  },
 }

src/store/state.js

@@ -95,7 +95,9 @@ export default {
   patrolList: [],
   discoverSum: {},
   discoverInfo: [],
+  handleCurTab: '处置中',
   handleList: [],
+  doneList: [],
   repairInfo: [[0, 0], [0, 0]],
   streetInfo: {
     310110020000: {

src/util/common.js

@@ -31,12 +31,21 @@ export default {
       return path.split('.').reduce(reducer, obj)
     }
   },
+  transStatus(type) {
+    if (type == 1) {
+      return '转物业'
+    } else if (type == 2) {
+      return '转物业'
+    } else if (type == 5) {
+      return '已完成'
+    }
+  },
   transType(type) {
     const data = {
-      'staffLeaveAlarmTcfteodr': '门岗脱岗',
+      'accCtl': '门禁异常',
       'parkFireExit': '占用消防通道',
       'nonVehicleCharg': '集中充电异常',
-      'elevatorLock': '楼道充电',
+      'heap': '楼道堆物', // 延吉
       'buildingVibration': '损坏承重结构',
       'trash': '非定时倒垃圾',
       'manholeCover': '窨井盖异常',
@@ -44,7 +53,9 @@ export default {
       'roofWater': '屋顶积水',
       'hermeticSpace': '屋顶违章建筑',
       'weixiuzijin': '维修资金异常',
-      'accCtl': '门禁异常',
+      'streetMonitor': '街面占用', // 控江
+      // 'staffLeaveAlarmTcfteodr': '门岗脱岗',
+      // 'elevatorLock': '楼道充电',
     }
     return data[type]
   },

src/views/components/combine.vue

 <template>
   <div class="combine">
     <m-scroll v-if="list.length > 0" :length="list.length" :limit="$store.state.currentStreetInfo.name === '新江湾城街道' ? 2 : 3">
-      <div @click="$emit('select', item)" class="detail" v-for="item in list" :key="item.id">
+      <div @click="$emit('select', item)" :class="{detail: true, done: !isDoing}" v-for="item in list" :key="item.id">
         <div>
           <h5>{{item.communityName}}</h5>
-          <p>{{item.create_time}}</p>
+          <p v-if="isDoing">{{item.create_time}}</p>
+          <p v-else class="name"><span>{{item.receive_property_name}}</span> 完成处置</p>
         </div>
-        <div class="content">
-          <div>
-            <p>协同事项</p>
-            <p>{{$com.transType(item.types) || '暂无分类'}}</p>
-          </div>
-          <div>
-            <p>发现方式</p>
-            <p>{{item.check_type || '智能发现'}}</p>
-          </div>
-          <div>
-            <p>响应部门</p>
-            <p>{{item.cspName || item.receive_property_name}}</p>
+        <div v-if="isDoing" class="content">
+          <div>{{$com.transType(item.types) || '暂无分类'}}</div>
+          <div :title="item.create_note">事件描述：{{item.create_note || '暂无描述'}}</div>
         </div>
+        <div v-else class="content">
+          <div>{{$com.transType(item.types) || '暂无分类'}}</div>
+          <div>{{item.create_time}}</div>
         </div>
-        <m-step class="combine-step" :steps="steps" :current="getCurrent(item)" />
+        <m-step v-if="isDoing" class="combine-step" :steps="steps" :current="getCurrent(item)" />
       </div>
     </m-scroll>
     <div v-else class="no-data">
@@ -31,6 +26,7 @@
 </template>
 
 <script>
+import {mapState} from 'vuex'
 export default {
   name: 'Combine',
   data() {
@@ -44,12 +40,23 @@ export default {
     }
   },
   computed: {
+    ...mapState([
+      'handleList',
+      'curSmartType',
+      'handleCurTab',
+      'doneList',
+    ]),
+    isDoing() {
+      return this.handleCurTab === '处置中'
+    },
     list() {
-      const {handleList, curSmartType} = this.$store.state
-      if (curSmartType) {
-        return handleList.filter(item => item.types === curSmartType)
+      // if (this.handleCurTab === '已完成') {
+      //   return this.doneList
+      // }
+      if (this.curSmartType) {
+        return this.handleList.filter(item => item.types === this.curSmartType)
       }
-      return handleList
+      return this.handleList
     }
   },
   methods: {
@@ -82,11 +89,20 @@ export default {
     position relative
     cursor pointer
     transition background .2s, box-shadow .3s ease-in-out
+    &.done
+      padding .1rem
     &:hover
       background $section-hover
       box-shadow -0.05rem .01rem .05rem .01rem rgba(0,0,0,0.8)
     h5
       font-size .1rem
+    .name
+      color #ccc
+      font-size .08rem
+      >span
+        color $edgeColor
+        font-size .1rem
+        font-weight bold
     >div
       &:first-child
         display flex
@@ -94,11 +110,25 @@ export default {
       &.content
         display flex
         margin .05rem 0
-        justify-content space-between
-        p
-          &:first-child
-            color $cardFontColor
+        >div
           font-size .08rem
+          color #ccc
+          &:first-child
+            color #FF9D27
+            border .01rem solid @color
+            border-radius .02rem
+            padding 0 .05rem
+            margin-right .05rem
+          &:last-child
+            flex 1
+            overflow hidden
+            white-space nowrap
+            text-overflow ellipsis
+            text-align right
+        // p
+        //   &:first-child
+        //     color $cardFontColor
+        //     font-size .08rem
     .combine-step
       position absolute
       left .1rem

src/views/components/done-component.vue

+<template>
+  <div class="done-component">
+    <div>
+      <p class="title"><span class="dot"/>风险报警信息</p>
+      <m-form :label-width=".6" :model="data" :layout="layout" />
+    </div>
+    <div v-for="item in data.details" :key="item.id">
+      <p class="title"><span class="dot"/>{{item.disposalDept}}处置</p>
+      <m-form :label-width=".6" :model="item" :layout="detailLayout" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DoneComponent',
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      layout: [
+        {
+          communityName: {
+            label: '小区名称',
+            width: 24,
+          },
+          device_name: {
+            label: '报警地址',
+            width: 24,
+          },
+          types: {
+            label: '报警类型',
+            width: 24,
+            format: val => this.$com.transType(val)
+          },
+          create_note: {
+            label: '报警内容',
+            width: 24,
+          },
+          create_time: {
+            label: '报警时间',
+            width: 24,
+          },
+          state: {
+            label: '处置状态',
+            width: 24,
+            format: val => this.$com.transStatus(val)
+          },
+        },
+      ],
+      detailLayout: [
+        {
+          checkTime: {
+            label: '处置时间',
+            width: 24,
+          },
+          backResult: {
+            label: '处置结果',
+            width: 24,
+          },
+          imgs: {
+            label: '处置图片',
+            width: 24,
+            type: 'img',
+          },
+        },
+      ],
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.done-component
+  .title
+    background rgba(51,145,255,.2)
+    color $edgeColor
+    padding .05rem 0
+    display flex
+    align-items center
+    font-weight bold
+    font-size .11rem
+    >.dot
+      display inline-block
+      width .03rem
+      height .12rem
+      background $edgeColor
+      margin-right .1rem
+</style>

src/views/components/right-component.vue

@@ -8,7 +8,7 @@
       </div>
       <div class="right">
         <m-card title="主动巡检"><Patrol @select="$emit('patrol', $event)" /></m-card>
-        <m-card title="联勤联动"><Combine @select="$emit('handle', $event)"/></m-card>
+        <m-card title="联勤联动" showTab><Combine @select="$emit('handle', $event)"/></m-card>
         <m-card title="鹰眼监控" v-if="$store.state.currentStreetInfo.name === '新江湾城街道'">
           <div class="monitor-video">
             <div v-for="(img, i) in imgs" @click="handleClick(i)" :key="img" :style="`background-image: url(${require(`@/assets/images/${img}`)})`">

src/views/components/smart-discover.vue

@@ -11,7 +11,7 @@
         </div>
       </div>
       <div class="detail">
-        <div @click="handleClick(item.types)" :class="{on: item.types === curSmartType}" v-for="item in list" :key="item.types">
+        <div @click="handleClick(item.types, item.visible)" :class="{on: item.types === curSmartType, visible: item.visible}" v-for="item in list" :key="item.types">
           <p><img :src="require(`@/assets/images/${item.img}`)" />{{item.name}}</p>
           <m-count :class="{count: true, yellow: item.value > 0}" :value="item.value" :decimal="0" />
         </div>
@@ -72,19 +72,41 @@ export default {
     },
     list() {
       const {discoverInfo} = this.$store.state
-      return discoverInfo.map((item, i) => ({
+      const result = discoverInfo.map((item, i) => ({
         name: this.$com.transType(item.types),
         value: +item.numbers || 0,
         img: `smart${i + 1}.png`,
         types: item.types,
+        visible: this.calcVisible(item.types),
       }))
+      return result.sort((a, b) => b.visible - a.visible)
     }
   },
   methods: {
-    handleClick(type) {
+    handleClick(type, visible) {
+      if (visible) {
         this.$store.commit('SET_CUR_SMART_TYPE', type === this.curSmartType ? null : type)
       }
     },
+    calcVisible(type) {
+      const {name} = this.$store.state.currentStreetInfo
+      const keys = [
+        '平凉路街道',
+        '控江路街道',
+        '长白新村街道',
+        '延吉新村街道',
+        '殷行街道',
+        '大桥街道',
+        '新江湾城街道',
+      ]
+      if (keys.indexOf(name) < 0) {
+        if (type === 'parkFireExit' || type === 'nonVehicleCharg') return false
+      }
+      if (name !== '控江路街道' && type === 'streetMonitor') return false
+      if (name !== '延吉新村街道' && type === 'heap') return false
+      return true
+    },
+  },
 }
 </script>
 
@@ -129,8 +151,11 @@ export default {
       margin .01rem
       width calc((100% - 0.04rem) / 2)
       background #0A2F59
-      cursor pointer
       border .01rem solid transparent
+      opacity .3
+      &.visible
+        cursor pointer
+        opacity 1
         &.on
         &:hover
           $selected()

src/views/main.vue

@@ -19,7 +19,7 @@
         v-show="!fullView"
         area="right"
         @patrol="handleMapClick"
-        @handle="handleMapClick"
+        @handle="handleListClick"
         @video="handleViewVideo"
       />
     </m-animate>
@@ -27,6 +27,9 @@
     <m-modal v-model="detailModal" title="智能报警">
       <m-form :label-width=".6" :model="detailData" :layout="detailLayout" />
     </m-modal>
+    <m-modal v-model="doneModal" title="已完成处置列表">
+      <DoneComponent v-if="doneModal" :data="doneData" />
+    </m-modal>
     <m-modal v-model="patrolModal" title="主动巡检">
       <m-form :label-width=".6" :model="patrolData" :layout="patrolLayout" />
     </m-modal>
@@ -44,6 +47,7 @@ import LeftComponent from './components/left-component'
 import RightComponent from './components/right-component'
 import MapBtns from './components/map-btns'
 import VideoComponent from './components/video-component'
+import DoneComponent from './components/done-component'
 import {mapState, mapActions} from 'vuex'
 export default {
   name: 'Main',
@@ -52,6 +56,7 @@ export default {
     RightComponent,
     MapBtns,
     VideoComponent,
+    DoneComponent,
   },
   data() {
     return {
@@ -96,40 +101,6 @@ export default {
           },
         },
       ],
-      // detailLayout: [
-      //   {
-      //     id: {
-      //       label: '工单编号',
-      //       width: 12,
-      //     },
-      //     type: {
-      //       label: '事件类型',
-      //       width: 12,
-      //     },
-      //   },
-      //   {
-      //     time: {
-      //       label: '报警时间',
-      //       width: 12,
-      //     },
-      //     level: {
-      //       label: '报警等级',
-      //       width: 12,
-      //     },
-      //   },
-      //   {
-      //     address: {
-      //       label: '地址',
-      //       width: 24,
-      //     },
-      //   },
-      //   {
-      //     result: {
-      //       label: '处理结论',
-      //       width: 24,
-      //     },
-      //   },
-      // ],
       patrolLayout: [
         {
           communityName: {
@@ -168,6 +139,8 @@ export default {
           },
         },
       ],
+      doneModal: false,
+      doneData: {},
     }
   },
   computed: {
@@ -175,10 +148,10 @@ export default {
       'currentStreetInfo',
       'streetInfo',
       'curSmartType',
-      'xinjiangwanPaths',
       'showCommandModal',
       'patrolList',
       'handleList',
+      'handleCurTab',
     ])
   },
   beforeCreate() {
@@ -197,6 +170,7 @@ export default {
       'getDiscoverInfo',
       'getRepairInfo',
       'getHandleList',
+      'getDoneList',
       'getCheckSum',
       'getPatrolList',
     ]),
@@ -212,6 +186,7 @@ export default {
         this.getCheckSum()
         this.getPatrolList()
         this.getHandleList()
+        this.getDoneList()
       }, 1000 * 60 * 1)
     },
     init() {
@@ -236,6 +211,15 @@ export default {
       }
       // this.$refs.map.focus(data.x || data.gpsx, data.y || data.gpsy, 8)
     },
+    handleListClick(data) {
+      if (this.handleCurTab === '处置中') {
+        this.detailData = data
+        this.detailModal = true
+      } else {
+        this.doneData = data
+        this.doneModal = true
+      }
+    },
     drawSmartPoints(data) {
       const {addPoint, removePoint} = this.$refs.map
       removePoint(this.smartPoints)