接入接口数据

src/assets/css/variables.styl

@@ -5,7 +5,7 @@ $color-map(opacity = 0.3)
   rgba(91, 213, 255, opacity)
 $color-green = #82DF12
 $color-blue = #01BFFD
-$color-red = #D82B2B
+$color-red = #ff1e1e
 $color-yellow = #ffd400
 $layout(gap = 0.06rem)
   width 100%
@@ -36,3 +36,4 @@ $flex-center()
   align-items center
   justify-content center
 $section-bg = rgba(51,145,255,.1)
+$section-hover = rgba(51,145,255,.2)

src/components/MonitorComponents/MonitorChart/monitor-chart.vue

@@ -322,6 +322,7 @@ export default {
           type: 'category',
           data: [],
           axisLabel: {
+            interval: 0,
             textStyle: {
               color: '#ccc',
             },

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

@@ -5,7 +5,7 @@
       <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]}`)"/>
-        <div v-else class="content">{{model[key]}}</div>
+        <div v-else class="content">{{col.format ? col.format(model[key]) : (model[key] || ' ')}}</div>
       </i-col>
     </Row>
     <m-modal v-model="showImg">

src/components/MonitorComponents/MonitorMap/monitor-map.vue

@@ -28,7 +28,7 @@ export default {
         // zooms: [1, 12],
         mapStyle: 'smap://styles/dark',
       }).on(SMap.MapEvent.maploaded, () => {
-        this.map.hideXQ_Poly()
+        // this.map.hideXQ_Poly()
         this.map.hideXQ_Point()
         this.map.hideMPZ()
         this.addListener()
@@ -57,9 +57,9 @@ export default {
     },
 
     // 删除点
-    removePoint(name) {
-      if (!this.map) return
-      this.map.remove(name)
+    removePoint(points) {
+      if (!this.map || !points) return
+      this.map.remove(points)
     },
     // 将数据转换为符合地图的点数组
     getMapPoints({data = [], key, labelKey, icon, size, color = '#47B3FF'}) {
@@ -70,7 +70,7 @@ export default {
             image: require(`@/assets/images/${item.icon || icon}`),
           }),
           attributes: {key, ...item},
-          position: [item.X || item.x, item.Y || item.y, 0],
+          position: [item.X || item.x || item.gpsx, item.Y || item.y || item.gpsy, 0],
         }
         if (labelKey) {
           result.label = new SMap.Label({

src/server/ajax.js

@@ -30,9 +30,9 @@ Axios.interceptors.response.use(response => {
  * @param {String} url [请求地址]
  * @param {Object} params [请求参数]
  * @param {String} contentType [请求头，默认为'application/json;charset=UTF-8']
- * @param {Boolean} showLoading [是否显示请求时的loading图，默认为true]
+ * @param {Boolean} showLoading [是否显示请求时的loading图，默认为false]
  */
-const request = ({ method, url, params = {}, contentType = 'application/json;charset=UTF-8', showLoading = true }) => {
+const request = ({ method, url, params = {}, contentType = 'application/json;charset=UTF-8', showLoading = false }) => {
   if (!url || typeof(url) != 'string') {
     throw new Error('接口URL不正确')
   }

src/server/api.js

 let BASE_URL = ''
+let DATA_URL = ''
 switch (process.env.NODE_ENV) {
 case 'production':
-  BASE_URL = 'product_url'
+  BASE_URL = 'http://yangpu.hm.omniview.pro/api'
+  DATA_URL = 'http://10.89.1.208:10005'
   break
 default:
-  BASE_URL = 'default_url'
+  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 {
   BASE_URL,
-  TEST_URL: '/api/test_url',
+  DATA_URL,
+  GET_DISCOVER_TREND: '/service-special-ddd/public/alarm/unremoved/statistics', // 智能发现趋势图
+  GET_REPAIR_RATE: '/service-documents-ddd/public/unsolved/repair/type/count', // 投诉报修比例图
+  GET_RESOURCE_SUM: '/service-basicdatasync-ddd/public/resource/count', // 房屋物业统计数字
+  GET_CHECK_SUM: '/service-documents-ddd/public/checkorder/count', // 主动巡检统计数字
+  GET_DISCOVER_INFO: '/service-special-ddd/public/discoverInfo', // 智能发现数目
+  GET_TS_BX: '/service-documents-ddd/public/repair/complaint', // 投诉报修数目
+  GET_HANDLE_LIST: '/service-special-ddd/public/alarm/index', // 联勤联动列表
+  GET_GRID_TOTAL: '/dc/countDiscoveredCaseByStreet', // 网格数
+  GET_GRID_SOLVING: '/dc/countSolvingCaseByStreet', // 网格处置中数
+  GET_GRID_OVERDUE: 'dc/countExceedCaseByStreet', // 网格处逾期数
+  GET_NOT_ALERT_TOTAL: '/dc/countClosedNotPolice', // 非警情数
+  GET_NOT_ALERT_SOLVING: '/dc/countSolvingNotPoliceByStreet', // 非警情数处置中数
+  GET_NOT_ALERT_OVERDUE: '/dc/countExceedNotPoliceByStreet', // 非警情数逾期数
+  GET_POPULATION_INFO: '/dc/statisticsbureauArea', // 土地人口统计数字
+  GET_COMPRESS_COUNT: '/dc/countCompressStationsByStreet', // 街道小型压缩站数目
+  GET_GARBAGE_COUNT: '/dc/countPointsByStreet', // 街道垃圾收集点数目
+  GET_TOILET_COUNT: '/dc/countToiletsByStreet', // 街道环卫公厕数目
 }

src/store/actions.js

+import ajax from '@/server/ajax'
+import api from '@/server/api'
+import com from '@/util/common'
+import moment from 'moment'
+const curStreet = '新江湾城街道'
+
 export default {
   initData({dispatch}) {
-    dispatch('getLandPopulationInfo')
     dispatch('getGreenInfo')
+    dispatch('getDiscoverTrend')
+    dispatch('getRepairRate')
+    dispatch('getResourceSum')
+    // dispatch('getCheckSum')
+    dispatch('getGridSum')
+    dispatch('getPopulationInfo')
+    dispatch('getPatrolList')
+    dispatch('getDiscoverInfo')
+    dispatch('getRepairInfo')
+    dispatch('getHandleList')
   },
-  getLandPopulationInfo({commit}) {
+  async getGreenInfo({commit}) {
+    const result = [
+      {name: '环卫公厕', value: await ajax.get({url: api.DATA_URL + api.GET_TOILET_COUNT, params: {street: curStreet}}) || 0},
+      {name: '生活垃圾收集', value: await ajax.get({url: api.DATA_URL + api.GET_GARBAGE_COUNT, params: {street: curStreet}}) || 0},
+      {name: '小型压缩站', value: await ajax.get({url: api.DATA_URL + api.GET_COMPRESS_COUNT, params: {street: curStreet}}) || 0},
+    ]
+    commit('SET_GREEN_INFO', result)
+  },
+  getDiscoverTrend({commit}) {
+    ajax.get({
+      url: api.GET_DISCOVER_TREND,
+      params: {days: 10}
+    }).then(res => {
+      const {content} = res.data
+      const keys = Object.keys(content)
+      const result = keys.map(key => ({
+        date: moment(key).format('MM.DD'),
+        ...content[key],
+      }))
+      commit('SET_DISCOVER_TREND', result)
+    })
+  },
+  getRepairRate({commit}) {
+    ajax.get({url: api.GET_REPAIR_RATE}).then(res => {
+      const data = com.confirm(res, 'data.content', [])
+      const result = data.map(item => ({
+        name: item.troubleType,
+        value: +item.count || 0,
+      }))
+      commit('SET_REPAIR_RATE', result)
+    })
+  },
+  getResourceSum({commit}) {
+    ajax.get({url: api.GET_RESOURCE_SUM}).then(res => {
+      commit('SET_RESOURCE_SUM', com.confirm(res, 'data.content', {}))
+    })
+  },
+  getCheckSum({commit}) {
+    ajax.get({url: api.GET_CHECK_SUM}).then(res => {
+      commit('SET_CHECK_SUM', com.confirm(res, 'data.content', {}))
+    })
+  },
+  async getGridSum({commit}) {
+    const today = moment().format('YYYY-MM-DD')
+    const start = `${today} 00:00:00`
+    const end = `${today} 24:00:00`
+    const total = await ajax.get({url: api.DATA_URL + api.GET_GRID_TOTAL, params: {street: curStreet, start, end}})
+    const solving = await ajax.get({url: api.DATA_URL + api.GET_GRID_SOLVING, params: {street: curStreet, start, end}})
+    const overdue = await ajax.get({url: api.DATA_URL + api.GET_GRID_OVERDUE, params: {street: curStreet, start, end}})
+    commit('SET_GRID_SUM', [+overdue || 0, +solving || 0, +total || 0])
+    const total2 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT_TOTAL, params: {street: curStreet, start, end}})
+    const solving2 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT_SOLVING, params: {street: curStreet, start, end}})
+    const overdue2 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT_OVERDUE, params: {street: curStreet, start, end}})
+    commit('SET_NOT_ALERT_SUM', [+overdue2 || 0, +solving2 || 0, +total2 || 0])
+  },
+  async getPopulationInfo({commit}) {
+    const year1 = await ajax.get({url: api.DATA_URL + api.GET_POPULATION_INFO, params: {year: moment().add(-3, 'y').format('YYYY')}})
+    const year2 = await ajax.get({url: api.DATA_URL + api.GET_POPULATION_INFO, params: {year: moment().add(-2, 'y').format('YYYY')}})
+    const year3 = await ajax.get({url: api.DATA_URL + api.GET_POPULATION_INFO, params: {year: moment().add(-1, 'y').format('YYYY')}})
+    if (year1 && year2 && year3) {
+      const result = [year1, year2, year3].map(year => year.find(item => item.street == '总计'))
+      commit('SET_LAND_POPULATION_INFO', result)
+    }
+  },
+  getPatrolList({commit}) {
     setTimeout(() => {
       const result = [
         {
-          label: '2018年末',
-          data: [
-            {value: 8.69, unit: 'k㎡', dec: 2},
-            {value: 29182, unit: '人'},
-            {value: 3358, unit: 'k㎡'},
-            {value: 1.08, unit: '%', dec: 2},
-          ],
+          name: '建发新江湾华苑二期',
+          event: '未落实每日自查',
+          time: '2020-10-21',
+          status: '逾期',
+          submit: '朱煜东',
+          department: '新江湾城街道房屋管理办事处',
+          theme: '市物业中心-住宅小区日常巡查2020.10',
+          x: 3249.901,
+          y: 9338.801
+        }, {
+          name: '建发新江湾华苑一期',
+          event: '未落实每日自查',
+          time: '2020-10-01',
+          status: '逾期',
+          submit: '朱煜东',
+          department: '新江湾城街道房屋管理办事处',
+          theme: '市物业中心-住宅小区日常巡查2020.10',
+          x: 3161.201,
+          y: 9327.401
         },
         {
-          label: '2019年末',
-          data: [
-            {value: 8.69, unit: 'k㎡', dec: 2},
-            {value: 31676, unit: '人', up: true},
-            {value: 3645, unit: 'k㎡', up: true},
-            {value: 1.18, unit: '%', dec: 2, up: true},
-          ],
+          name: '嘉誉园',
+          event: '车库挡水板未配置',
+          time: '2020-06-12',
+          status: '逾期',
+          submit: '俞泓',
+          department: '新江湾城街道房屋管理办事处',
+          theme: '2020年住宅小区防汛防台检查',
+          x: 3580.401,
+          y: 10968.201
         },
+        {
+          name: '东方锦园',
+          event: '未落实每日自查',
+          time: '2020-02-07',
+          status: '逾期',
+          submit: '黄麒玮',
+          department: '新江湾城街道房屋管理办事处',
+          theme: '2020年上海市住宅小区疫情防控专项检查',
+          x: 2719.201,
+          y: 8474.801
+        }
       ]
-      commit('SET_LAND_POPULATION_INFO', result)
-    }, 1000)
+      commit('SET_PATROL_LIST', result)
+    }, 3000)
   },
-  getGreenInfo({commit}) {
-    setTimeout(() => {
+  getDiscoverInfo({commit}) {
+    ajax.get({
+      url: api.GET_DISCOVER_INFO,
+    }).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 result = data.filter(item => keys.indexOf(item.types) >= 0)
+      result.forEach(e => {
+        sum.total += +e.total
+        sum.today += +e.numbers
+      })
+      commit('SET_DISCOVER_SUM', sum)
+      commit('SET_DISCOVER_INFO', result)
+    })
+  },
+  getRepairInfo({commit}) {
+    ajax.get({
+      url: api.GET_TS_BX,
+    }).then(res => {
+      const data = com.confirm(res, 'data.content', {})
       const result = [
-        {name: '环卫公厕', value: 9},
-        {name: '生活垃圾收集', value: 98},
-        {name: '小型压缩站', value: 34},
+        [+data.alarmIn5MinBX || 0, +data.undoneBX || 0],
+        [+data.alarmIn5MinTS || 0, +data.undoneTS || 0],
       ]
-      commit('SET_GREEN_INFO', result)
-    }, 1000)
+      commit('SET_REPAIR_INFO', result)
+    })
+  },
+  getHandleList({commit}) { // 获取并全局设置联勤联动处置列表
+    ajax.get({url: api.GET_HANDLE_LIST}).then(res => {
+      commit('SET_HANDLE_LIST', com.confirm(res, 'data.content', []))
+    })
   },
 }

src/store/mutations.js

@@ -5,6 +5,9 @@ export default {
   SET_CURDATE(state, date) {
     state.curDate = date
   },
+  SET_CUR_SMART_TYPE(state, val) {
+    state.curSmartType = val
+  },
   SET_COMMAND_MODAL(state, val) {
     state.showCommandModal = val
   },
@@ -14,4 +17,37 @@ export default {
   SET_GREEN_INFO(state, data) {
     state.greenInfo = data
   },
+  SET_DISCOVER_TREND(state, data) {
+    state.discoverTrend = data
+  },
+  SET_REPAIR_RATE(state, data) {
+    state.repairRate = data
+  },
+  SET_RESOURCE_SUM(state, data) {
+    state.resourceSum = data
+  },
+  SET_CHECK_SUM(state, data) {
+    state.checkSum = data
+  },
+  SET_GRID_SUM(state, data) {
+    state.gridSum = data
+  },
+  SET_NOT_ALERT_SUM(state, data) {
+    state.notAlertSum = data
+  },
+  SET_PATROL_LIST(state, data) {
+    state.patrolList = data
+  },
+  SET_DISCOVER_SUM(state, data) {
+    state.discoverSum = data
+  },
+  SET_DISCOVER_INFO(state, data) {
+    state.discoverInfo = data
+  },
+  SET_REPAIR_INFO(state, data) {
+    state.repairInfo = data
+  },
+  SET_HANDLE_LIST(state, data) {
+    state.handleList = data
+  },
 }

src/store/state.js

 export default {
   showLoading: false,
   curDate: null,
+  curSmartType: null,
   showCommandModal: false,
-  landPopulationInfo: [],
+  showPatrolModal: false,
+  patrolData: {},
+  landPopulationInfo: [{}, {}, {}],
   greenInfo: [],
+  discoverTrend: [],
+  repairRate: [],
+  resourceSum: {},
+  checkSum: {},
+  gridSum: [0, 0, 0],
+  notAlertSum: [0, 0, 0],
+  patrolList: [],
+  discoverSum: {},
+  discoverInfo: [],
+  handleList: [],
+  repairInfo: [[0, 0], [0, 0]],
   commandData: {
     name1: '赵广浩',
     name2: '成剑杰',
@@ -44,6 +58,12 @@ export default {
       },
     },
   ],
+  videoInfo: [
+    {id: 31011022001328101004,	address: '殷高东路国安路',	location: '星汇广场一期8号楼楼顶',	street: '新江湾',	committee: '国安路居委会',	community: '星汇广场一期'},
+    {id: 31011022001328102007,	address: '殷高东路政芳路',	location: '中凯城市之光37号楼顶',	street: '新江湾',	committee: '国安路居委会',	community: '中凯城市之光'},
+    {id: 31011022001328103005,	address: '民府路国霞路',	location: '三湘未来海岸楼顶',	street: '新江湾',	committee: '国安路居委会',	community: '三湘未来海岸'},
+    {id: 31011022001328104005,	address: '殷行路淞沪路',	location: '东方枫憬楼顶',	street: '新江湾',	committee: '睿达路居委会',	community: '戎辉苑'},
+  ],
   xinjiangwanPaths: [
     [
       4896.0204000007361,

src/util/common.js

@@ -31,4 +31,21 @@ export default {
       return path.split('.').reduce(reducer, obj)
     }
   },
+  transType(type) {
+    const data = {
+      'staffLeaveAlarmTcfteodr': '门岗脱岗',
+      'parkFireExit': '占用消防通道',
+      'nonVehicleCharg': '集中充电异常',
+      'elevatorLock': '楼道充电',
+      'buildingVibration': '损坏承重结构',
+      'trash': '非定时倒垃圾',
+      'manholeCover': '窨井盖异常',
+      'waterTank': '水箱异常开启',
+      'roofWater': '屋顶积水',
+      'hermeticSpace': '屋顶违章建筑',
+      'weixiuzijin': '维修资金异常',
+      'accCtl': '门禁异常',
+    }
+    return data[type]
+  },
 }

src/views/components/combine.vue

 <template>
   <div class="combine">
     <m-scroll :length="list.length" :limit="2">
-      <div class="detail" v-for="(item, i) in list" :key="item.name + i">
+      <div @click="$emit('select', item)" class="detail" v-for="item in list" :key="item.id">
         <div>
-          <h5>{{item.name}}</h5>
-          <p>{{item.time}}</p>
+          <h5>{{item.communityName}}</h5>
+          <p>{{item.create_time}}</p>
         </div>
         <div class="content">
           <div>
             <p>协同事项</p>
-            <p>{{item.event}}</p>
+            <p>{{$com.transType(item.types) || '暂无分类'}}</p>
           </div>
           <div>
             <p>发现方式</p>
-            <p>{{item.method}}</p>
+            <p>{{item.check_type || '智能发现'}}</p>
           </div>
           <div>
             <p>响应部门</p>
-            <p>{{item.department}}</p>
+            <p>{{item.cspName || item.receive_property_name}}</p>
           </div>
         </div>
-        <m-step class="combine-step" :steps="steps" :current="item.current" />
+        <m-step class="combine-step" :steps="steps" :current="getCurrent(item)" />
       </div>
     </m-scroll>
   </div>
@@ -37,34 +37,26 @@ export default {
         {name: '处置'},
         {name: '完成'},
       ],
-      list: [
-        {
-          name: '中凯城市之光',
-          time: '2020-10-19 12:16:35',
-          event: '垃圾未及时清运',
-          method: '巡查发现',
-          department: '上海振南物业',
-          current: 2,
-        },
-        {
-          name: '宝拉维拉家园',
-          time: '2020-10-19 12:16:35',
-          event: '垃圾未及时清运',
-          method: '巡查发现',
-          department: '上海振南物业',
-          current: 1,
+    }
   },
-        {
-          name: '圣骊河滨苑',
-          time: '2020-10-19 12:16:35',
-          event: '垃圾未及时清运',
-          method: '巡查发现',
-          department: '上海振南物业',
-          current: 3,
+  computed: {
+    list() {
+      const {handleList, curSmartType} = this.$store.state
+      if (curSmartType) {
+        return handleList.filter(item => item.types === curSmartType)
+      }
+      return handleList
+    }
   },
-      ]
+  methods: {
+    getCurrent(data) {
+      if (data.done_time) {
+        return 3
+      } else {
+        return +data.current || 2
       }
     },
+  },
 }
 </script>
 
@@ -75,6 +67,9 @@ export default {
     padding .05rem .1rem .2rem
     margin-bottom .1rem
     position relative
+    cursor pointer
+    &:hover
+      background $section-hover
     h5
       font-size .1rem
     >div

src/views/components/complaint-repair.vue

@@ -16,7 +16,7 @@
     </div>
     <img class="branch" src="@/assets/images/branch.png" />
     <div class="chart">
-      <m-chart :config="config" :data="data" :options="options" />
+      <m-chart :config="config" :data="$store.state.repairRate" :options="options" />
     </div>
   </div>
 </template>
@@ -26,10 +26,6 @@ export default {
   name: 'ComplaintRepair',
   data() {
     return {
-      list: [
-        {name: '报修数量', value: [18, 37], img: 'repair.png'},
-        {name: '投诉数量', value: [67, 150], img: 'complaint.png'},
-      ],
       config: {
         colors: ['#5bd4ff', '#72c011', '#fece35', '#ff6160', '#826bfa', '#cccccc'],
         tooltip: {
@@ -44,32 +40,26 @@ export default {
           {type: 'pie', radius: [10 * Number((screen.height / 800).toFixed(1)), 50 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['32%', '50%']}
         ]
       },
-      data: [
-        {name: '水', value: 15},
-        {name: '堵', value: 20},
-        {name: '险', value: 45},
-        {name: '电', value: 6},
-        {name: '漏', value: 9},
-        {name: '其他', value: 5},
-      ],
       options: {
         legend: {
           top: '10%',
           formatter: (name) => {
-            const data = [
-              {name: '水', value: 15},
-              {name: '堵', value: 20},
-              {name: '险', value: 45},
-              {name: '电', value: 6},
-              {name: '漏', value: 9},
-              {name: '其他', value: 5},
-            ]
-            return `${name} ${(data.find(e => e.name === name)).value}%`
+            const data = this.$store.state.repairRate
+            return `${name} ${(data.find(e => e.name === name)).value}件`
           }
         }
       }
     }
   },
+  computed: {
+    list() {
+      const {repairInfo} = this.$store.state
+      return [
+        {name: '报修数量', value: repairInfo[0], img: 'repair.png'},
+        {name: '投诉数量', value: repairInfo[1], img: 'complaint.png'},
+      ]
+    },
+  }
 }
 </script>
 

src/views/components/grid-management.vue

+<template>
+  <div class="grid-management">
+    <div v-for="item in sum" :key="item.name">
+      <img :src="require(`@/assets/images/${item.img}`)"/>
+      <div>
+        <p>{{item.name}}</p>
+        <div>
+          <m-count class="count" :value="item.value[0]" :decimal="0" />
+          <m-count class="count" :value="item.value[1]" :decimal="0" />
+          <m-count class="count" :value="item.value[2]" :decimal="0" />
+        </div>
+        <div>
+          <span>逾期</span>
+          <span>处置中</span>
+          <span>发现</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GridManagement',
+  computed: {
+    sum() {
+      const {gridSum, notAlertSum} = this.$store.state
+      return [
+        {name: '网格事件数', value: gridSum, img: 'tips2.png'},
+        {name: '110非警情数', value: notAlertSum, img: 'tips3.png'},
+      ]
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.grid-management
+  display flex
+  >div
+    display flex
+    flex 1
+    // align-items center
+    padding-left .1rem
+    >div
+      >div
+        display flex
+        justify-content space-between
+    img
+      width .25rem
+      height @width
+      margin-right .1rem
+    p
+      color $fontColor
+    span
+      flex 1
+      color #aaa
+      font-size .08rem
+    .count
+      flex 1
+      font-size .12rem
+      color $color-yellow
+      &:nth-child(1)
+        color $color-red
+      &:nth-child(3)
+        color #fff
+</style>

src/views/components/house.vue

@@ -25,17 +25,11 @@
 
 <script>
 import echarts from 'echarts'
-const mockValue = [49.5, 20.9, 22.1]
+const mockValue = [49, 21, 22]
 export default {
   name: 'House',
   data() {
     return {
-      list: [
-        {name: '小区数量', unit: '个', value: 13},
-        {name: '总户数', unit: '户', value: 300},
-        {name: '物业企业', unit: '个', value: 101},
-        {name: '管理面积', unit: '㎡', value: 10.69, dec: 2},
-      ],
       chart: null,
       option: {
         tooltip: {
@@ -111,6 +105,15 @@ export default {
     this.chart && window.removeEventListener('resize', () => this.chart.resize())
   },
   computed: {
+    list() {
+      const {community, house, company, area} = this.$store.state.resourceSum
+      return [
+        {name: '小区数量', unit: '个', value: +community || 0},
+        {name: '总户数', unit: '户', value: +house || 0},
+        {name: '物业企业', unit: '个', value: +company || 0},
+        {name: '管理面积', unit: '㎡', value: +area || 0},
+      ]
+    },
     sizeRate() {
       return Number((screen.height / 800).toFixed(1))
     },

src/views/components/land-population.vue

@@ -26,7 +26,33 @@ export default {
   },
   computed: {
     list() {
-      return this.$store.state.landPopulationInfo
+      const {year1, year2, year3} = this.$store.state.landPopulationInfo
+      if (!year1 || !year2 || !year3) return []
+      const {density1 = 0} = year1
+      const {year: label2 = '', area: area2 = 0, registered_population: population2 = 0, population_density: density2 = 0} = year2
+      const {year: label3 = '', area: area3 = 0, registered_population: population3 = 0, population_density: density3 = 0} = year3
+      const rate2 = (+density2 - +density1) / +density1
+      const rate3 = (+density3 - +density2) / +density2
+      return [
+        {
+          label: label2 + '年末',
+          data: [
+            {value: +area2 || 0, unit: 'k㎡', dec: 2},
+            {value: +population2 || 0, unit: '人'},
+            {value: +density2 || 0, unit: '人/k㎡'},
+            {value: rate2, unit: '%', dec: 2},
+          ]
+        },
+        {
+          label: label3 + '年末',
+          data: [
+            {value: +area3 || 0, unit: 'k㎡', dec: 2, up: area3 > area2},
+            {value: +population3 || 0, unit: '人', up: population3 > population2},
+            {value: +density3 || 0, unit: '人/k㎡', up: density3 > density2},
+            {value: rate3, unit: '%', dec: 2, up: rate3 > rate2},
+          ]
+        },
+      ]
     },
   }
 }

src/views/components/left-component.vue

@@ -9,6 +9,7 @@
         <m-card title="民防指标"><Defense /></m-card>
       </div>
       <div class="right">
+        <m-card title="网格管理"><GridManagement /></m-card>
         <m-card title="房屋物业"><House /></m-card>
         <m-card title="小区检查清单"><CommunityCheck /></m-card>
         <m-card title="工作提示"><WorkTips /></m-card>
@@ -25,6 +26,7 @@ import Defense from './defense'
 import House from './house'
 import CommunityCheck from './community-check'
 import WorkTips from './work-tips'
+import GridManagement from './grid-management'
 export default {
   name: 'LeftComponent',
   components: {
@@ -35,6 +37,7 @@ export default {
     House,
     CommunityCheck,
     WorkTips,
+    GridManagement,
   },
   data() {
     return {}
@@ -73,7 +76,6 @@ export default {
           &:nth-child(1)
             height 15%
           &:nth-child(2)
-            height 30%
           &:nth-child(3)
             height 30%
           &:nth-child(4)
@@ -81,8 +83,10 @@ export default {
       &.right
         >div
           &:nth-child(1)
-            height 40%
+          &:nth-child(4)
+            height 15%
           &:nth-child(2)
+            height 40%
           &:nth-child(3)
             height 30%
 </style>

src/views/components/patrol.vue

@@ -10,8 +10,8 @@
       </div>
     </div>
     <div class="detail">
-      <m-scroll :length="list.length" mode="2" :limit="2" :step="0.75">
-        <div class="info" v-for="(item, i) in list" :key="item.name+i" :class="{over: item.overtime}">
+      <m-scroll :length="$store.state.patrolList.length" mode="2" :limit="2" :step="0.75">
+        <div @click="$emit('select', {...item, key: 'patrol'})" class="info" v-for="(item, i) in $store.state.patrolList" :key="item.name+i" :class="{over: item.status === '逾期'}">
           <h5>{{item.name}}</h5>
           <div>
             <div>
@@ -24,10 +24,10 @@
             </div>
             <div>
               <p>上报人</p>
-              <p>{{item.person}}</p>
+              <p>{{item.submit}}</p>
             </div>
           </div>
-          <img v-if="item.overtime" src="@/assets/images/overtime.png" />
+          <img v-if="item.status === '逾期'" src="@/assets/images/overtime.png" />
         </div>
       </m-scroll>
     </div>
@@ -37,17 +37,18 @@
 <script>
 export default {
   name: 'Patrol',
-  data() {
-    return {
-      sum: [
-        {name: '逾期整改单', value: 2, unit: '个', img: 'patrol1.png', color: '#ff1e1e'},
-        {name: '整改单总数', value: 28, unit: '个', img: 'patrol2.png', color: '#fece34'},
-        {name: '巡检总数', value: 67, unit: '次', img: 'patrol3.png', color: '#00beff'},
-      ],
-      list: [
-        {name: '圣骊河滨苑', event: '整改事项', time: '2020-10-20 13:25:16', person: '上报人', overtime: true},
-        {name: '江湾尊宝别墅（公寓）', event: '整改事项', time: '2020-10-20 13:25:16', person: '上报人'},
-        {name: '新江湾九里', event: '整改事项', time: '2020-10-20 13:25:16', person: '上报人'},
+  computed: {
+    sum() {
+      // const {totalOrder, undoneOrder, overdueOrder} = this.$store.state.checkSum
+      // return [
+      //   {name: '逾期整改单', value: +overdueOrder || 0, unit: '个', img: 'patrol1.png', color: '#ff1e1e'},
+      //   {name: '整改单总数', value: +undoneOrder || 0, unit: '个', img: 'patrol2.png', color: '#fece34'},
+      //   {name: '巡检总数', value: +totalOrder || 0, unit: '次', img: 'patrol3.png', color: '#00beff'},
+      // ]
+      return [
+        {name: '逾期整改单', value: 4, unit: '个', img: 'patrol1.png', color: '#ff1e1e'},
+        {name: '整改单总数', value: 4, unit: '个', img: 'patrol2.png', color: '#fece34'},
+        {name: '巡检总数', value: 463, unit: '次', img: 'patrol3.png', color: '#00beff'},
       ]
     }
   },
@@ -87,6 +88,9 @@ export default {
       margin-bottom .1rem
       background $section-bg
       height .65rem
+      cursor pointer
+      &:hover
+        background $section-hover
       &.over
         border-color #ff6160
       h5

src/views/components/right-component.vue

@@ -7,11 +7,13 @@
         <m-card title="投诉报修"><ComplaintRepair /></m-card>
       </div>
       <div class="right">
-        <m-card title="主动巡检"><Patrol /></m-card>
-        <m-card title="联勤联动"><Combine /></m-card>
+        <m-card title="主动巡检"><Patrol @select="$emit('patrol', $event)" /></m-card>
+        <m-card title="联勤联动"><Combine @select="$emit('handle', $event)"/></m-card>
         <m-card title="鹰眼监控">
           <div class="monitor-video">
-            <img v-for="img in imgs" :key="img" :src="require(`@/assets/images/${img}`)" />
+            <div v-for="(img, i) in imgs" @click="handleClick(i)" :key="img" :style="`background-image: url(${require(`@/assets/images/${img}`)})`">
+              <div><img src="@/assets/images/play.png"/></div>
+            </div>
           </div>
         </m-card>
       </div>
@@ -37,6 +39,12 @@ export default {
       imgs: ['monitor1.png', 'monitor2.png', 'monitor3.png', 'monitor4.png']
     }
   },
+  methods: {
+    handleClick(i) {
+      const {id} = this.$store.state.videoInfo[i]
+      this.$emit('select', id)
+    }
+  },
 }
 </script>
 
@@ -83,9 +91,29 @@ export default {
     display flex
     flex-wrap wrap
     align-items center
-    img
+    >div
       width calc((100% - .3rem) / 4)
       height 80%
-      +img
+      cursor pointer
+      background-size cover
+      background-repeat no-repeat
+      position relative
+      +div
         margin-left .1rem
+      >div
+        width 100%
+        height 100%
+        background rgba(0,0,0,0)
+        $flex-center()
+        transition background .3s ease-in-out
+        >img
+          width .3rem
+          height @width
+          opacity 0
+          transition opacity .3s ease-out
+      &:hover
+        >div
+          background rgba(0,0,0,.5)
+          >img
+            opacity 1
 </style>

src/views/components/smart-discover.vue

@@ -11,13 +11,13 @@
         </div>
       </div>
       <div class="detail">
-        <div v-for="item in list" :key="item.name">
+        <div @click="handleClick(item.types)" :class="{on: item.types === curSmartType}" v-for="item in list" :key="item.types">
           <p><img :src="require(`@/assets/images/${item.img}`)" />{{item.name}}</p>
-          <m-count class="count" :value="item.value" :decimal="0" />
+          <m-count :class="{count: true, yellow: item.value > 0}" :value="item.value" :decimal="0" />
         </div>
       </div>
     </div>
-    <div class="chart"><m-chart :config="config" :data="data" :options="options" /></div>
+    <div class="chart"><m-chart :config="config" :data="$store.state.discoverTrend" :options="options" /></div>
   </div>
 </template>
 
@@ -26,50 +26,19 @@ export default {
   name: 'SmartDiscover',
   data() {
     return {
-      sum: [
-        {name: '当日新增', value: 3, img: 'today.png', color: '#ffd400'},
-        {name: '历史累计', value: 1049, img: 'history.png', color: '#01BFFD'},
-      ],
-      list: [
-        {name: '门岗脱岗', value: 0, img: 'smart1.png'},
-        {name: '占用消防通道', value: 0, img: 'smart2.png'},
-        {name: '集中充电异常', value: 0, img: 'smart3.png'},
-        {name: '楼道充电', value: 0, img: 'smart4.png'},
-        {name: '损坏承重结构', value: 0, img: 'smart5.png'},
-        {name: '非定时倒垃圾', value: 0, img: 'smart6.png'},
-        {name: '窨井盖异常', value: 0, img: 'smart7.png'},
-        {name: '水箱异常开启', value: 0, img: 'smart8.png'},
-        {name: '屋顶积水', value: 0, img: 'smart9.png'},
-        {name: '屋顶违章建筑', value: 0, img: 'smart10.png'},
-        {name: '维修资金异常', value: 0, img: 'smart11.png'},
-      ],
       config: {
         colors: ['#FFCE34', '#826AFA'],
         legend: {
           align: 'right',
         },
         shape: [
-          {key: 'today', name: '当日新增', type: 'line'},
+          {key: 'created', name: '当日新增', type: 'line'},
           {key: 'done', name: '已处理数', type: 'line'},
         ],
         xAxis: {
           key: 'date',
         },
-        yAxis: {
-          min: 10,
-          max: 90,
-          interval: 10,
-        }
       },
-      data: [
-        {date: '10.13', today: 40, done: 25},
-        {date: '10.14', today: 43, done: 35},
-        {date: '10.15', today: 35, done: 45},
-        {date: '10.16', today: 45, done: 50},
-        {date: '10.17', today: 38, done: 39},
-        {date: '10.18', today: 40, done: 26},
-        {date: '10.19', today: 45, done: 40},
-      ],
       options: {
         xAxis: {
           splitLine: {show: false},
@@ -77,6 +46,32 @@ export default {
       }
     }
   },
+  computed: {
+    curSmartType() {
+      return this.$store.state.curSmartType
+    },
+    sum() {
+      const {total, today} = this.$store.state.discoverSum
+      return [
+        {name: '当日新增', value: today || 0, img: 'today.png', color: '#ffd400'},
+        {name: '历史累计', value: total || 0, img: 'history.png', color: '#01BFFD'},
+      ]
+    },
+    list() {
+      const {discoverInfo} = this.$store.state
+      return discoverInfo.map((item, i) => ({
+        name: this.$com.transType(item.types),
+        value: +item.numbers || 0,
+        img: `smart${i + 1}.png`,
+        types: item.types,
+      }))
+    }
+  },
+  methods: {
+    handleClick(type) {
+      this.$store.commit('SET_CUR_SMART_TYPE', type === this.curSmartType ? null : type)
+    }
+  },
 }
 </script>
 
@@ -112,6 +107,11 @@ export default {
       margin .01rem
       width calc((100% - 0.04rem) / 2)
       background #0A2F59
+      cursor pointer
+      border .01rem solid transparent
+      &.on
+      &:hover
+        $selected()
       p
         display flex
         align-items center
@@ -121,6 +121,8 @@ export default {
         margin-right .05rem
       .count
         font-size .12rem
+        &.yellow
+          color $color-yellow
   .chart
     width 100%
     height 45%

src/views/components/work-tips.vue

 <template>
   <div class="work-tips">
-    <div class="sum">
-      <div v-for="item in sum" :key="item.name">
-        <img :src="require(`@/assets/images/${item.img}`)"/>
-        <div>
-          <p>{{item.name}}</p>
-          <p><m-count class="count" :style="`color:${item.color}`" :value="item.value" :decimal="0" /> <span>个</span></p>
-        </div>
-      </div>
-    </div>
-    <div class="wrapper">
-      <m-scroll :length="list.length" :limit="5">
+    <m-scroll :length="list.length" :limit="3">
       <div class="info" v-for="(item, i) in list" :key="i">
         <p>{{item.name}}</p>
         <p>{{item.tips}}</p>
       </div>
     </m-scroll>
   </div>
-  </div>
 </template>
 
 <script>
@@ -25,11 +14,6 @@ export default {
   name: 'WorkTips',
   data() {
     return {
-      sum: [
-        {name: '网格数', value: 46, img: 'tips1.png', color: '#fece34'},
-        {name: '网格报警数', value: 28, img: 'tips2.png', color: '#ff1e1e'},
-        {name: '110非警情数', value: 2, img: 'tips3.png', color: '#ff1e1e'},
-      ],
       list: [
         {name: '新江湾尚景园', tips: '车辆停发管理'},
         {name: '新江湾城首府', tips: '占用公共部位'},
@@ -45,29 +29,6 @@ export default {
 
 <style lang="stylus" scoped>
 .work-tips
-  display flex
-  flex-direction column
-  .sum
-    display flex
-    justify-content space-between
-    margin-bottom .05rem
-    >div
-      display flex
-      align-items center
-      padding-left .05rem
-      img
-        width .25rem
-        height @width
-        margin-right .05rem
-      p
-        color $fontColor
-      span
-        font-size .08rem
-        color #aaa
-      .count
-        font-size .13rem
-  .wrapper
-    flex 1
   .info
     display flex
     justify-content space-between

src/views/main.vue

@@ -15,12 +15,20 @@
       <LeftComponent v-show="!fullView" area="left"/>
     </m-animate>
     <m-animate enter="fadeInRight" leave="fadeOutRight">
-      <RightComponent v-show="!fullView" area="right"/>
+      <RightComponent
+        v-show="!fullView"
+        area="right"
+        @patrol="handleMapClick"
+        @handle="handleMapClick"
+      />
     </m-animate>
     <MapBtns v-model="fullView" @zoomin="zoom('in')" @zoomout="zoom('out')" />
-    <m-modal v-model="showModal" title="智能报警">
+    <m-modal v-model="detailModal" title="智能报警">
       <m-form :label-width=".6" :model="detailData" :layout="detailLayout" />
     </m-modal>
+    <m-modal v-model="patrolModal" title="主动巡检">
+      <m-form :label-width=".6" :model="patrolData" :layout="patrolLayout" />
+    </m-modal>
     <m-modal title="指挥体系" :value="showCommandModal" @close="$store.commit('SET_COMMAND_MODAL', false)">
       <m-form :label-width=".7" :model="commandData" :layout="commandLayout" />
     </m-modal>
@@ -43,38 +51,113 @@ export default {
     return {
       complete: false,
       fullView: false,
-      showModal: false,
+      detailModal: false,
+      patrolModal: false,
+      smartPoints: null,
       detailData: {},
+      patrolData: {},
       detailLayout: [
         {
-          id: {
-            label: '工单编号',
+          communityName: {
+            label: '小区名称',
+            width: 12,
+          },
+          communityAddr: {
+            label: '小区地址',
+            width: 12,
+          },
+        },
+        {
+          types: {
+            label: '协同事项',
             width: 12,
+            format: val => val && this.$com.transType(val)
           },
-          type: {
-            label: '事件类型',
+          receive_property_name: {
+            label: '响应部门',
+            width: 12,
+          },
+        },
+        {
+          check_type: {
+            label: '发现方式',
+            width: 12,
+            format: val => val || '智能发现'
+          },
+          device_name: {
+            label: '设备地点',
+            width: 12,
+          },
+        },
+      ],
+      // 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: [
+        {
+          name: {
+            label: '小区名称',
+            width: 12,
+          },
+          event: {
+            label: '整改事项',
             width: 12,
           },
         },
         {
           time: {
-            label: '报警时间',
+            label: '发现时间',
             width: 12,
           },
-          level: {
-            label: '报警等级',
+          status: {
+            label: '整改状态',
             width: 12,
           },
         },
         {
-          address: {
-            label: '地址',
-            width: 24,
+          submit: {
+            label: '上报人',
+            width: 12,
+          },
+          department: {
+            label: '房办名称',
+            width: 12,
           },
         },
         {
-          result: {
-            label: '处理结论',
+          theme: {
+            label: '检查主题',
             width: 24,
           },
         },
@@ -83,10 +166,13 @@ export default {
   },
   computed: {
     ...mapState([
+      'curSmartType',
       'xinjiangwanPaths',
       'commandLayout',
       'commandData',
       'showCommandModal',
+      'patrolList',
+      'handleList',
     ])
   },
   methods: {
@@ -94,79 +180,75 @@ export default {
       'initData', // 初始化获取首次加载所需的所有数据
     ]),
     mapComplete() {
+      this.init()
       this.initData()
-      setTimeout(() => {
       this.complete = true
-        this.init()
-      }, 1000)
+      // setTimeout(() => {
+      //   this.complete = true
+      //   this.init()
+      // }, 1000)
     },
     init() {
       const {map} = this.$refs
-      const mockPoints = {
-        size: [14, 16],
-        data: [
-          {
-            x: 2594.9960327148437,
-            y: 11519.020812988281,
-            id: 123,
-            type: '事件类型',
-            time: '2020-10-23 13:25:15',
-            level: '2级',
-            address: '地址',
-            result: '处理结论',
-            icon: 'blue1.png',
-          },
-          {
-            x: 5163.4830322265625,
-            y: 11044.733642578125,
-            id: 1223,
-            name: '雍景苑',
-            type: '事件类型',
-            time: '2020-10-23 13:25:15',
-            level: '2级',
-            address: '地址',
-            result: '处理结论',
-            icon: 'blue2.png',
-          },
-          {
-            x: 3489.0714111328125,
-            y: 10384.431030273437,
-            name: '九龙仓玺园',
-            id: 3223,
-            type: '事件类型',
-            time: '2020-10-23 13:25:15',
-            level: '2级',
-            address: '地址',
-            result: '处理结论',
-            icon: 'red3.png',
-          },
-          {
-            x: 2438.0490112304687,
-            y: 8973.5946044921875,
-            name: '保利维拉家园',
-            id: 4223,
-            type: '事件类型',
-            time: '2020-10-23 13:25:15',
-            level: '2级',
-            address: '地址',
-            result: '处理结论',
-            icon: 'green.png',
-          },
-        ],
-      }
-      map.focus(3489.0714111328125, 10384.431030273437, 4.5)
+      this.initMapFocus()
       map.addPolygon({paths: this.xinjiangwanPaths, fillColor: 'rgba(51,145,255,.3)'})
       map.addBoundary({name: '新江湾城'})
-      map.addPoint(mockPoints)
+    },
+    initMapFocus() {
+      this.$refs.map.focus(3489.0714111328125, 10384.431030273437, 4.5)
     },
     handleMapClick(data) {
+      if (data.key === 'patrol') {
+        this.patrolData = data
+        this.patrolModal = true
+      } else {
         this.detailData = data
-      this.showModal = true
+        this.detailModal = true
+      }
+      // this.$refs.map.focus(data.x || data.gpsx, data.y || data.gpsy, 8)
+    },
+    drawSmartPoints(data) {
+      const {addPoint, removePoint} = this.$refs.map
+      removePoint(this.smartPoints)
+      this.smartPoints = addPoint({
+        key: 'smart',
+        size: [14, 16],
+        data: data.map(item => {
+          return {
+            ...item,
+            icon: item.done_time ? 'blue4.png' : 'red4.png',
+          }
+        }),
+      })
     },
     zoom(type) {
       if (type === 'in') this.$refs.map.zoomIn()
       else this.$refs.map.zoomOut()
+    },
+  },
+  watch: {
+    patrolList(cur) {
+      this.$refs.map.addPoint({
+        key: 'patrol',
+        size: 14,
+        icon: 'red.png',
+        data: cur,
+      })
+    },
+    curSmartType(cur) {
+      let data = this.handleList
+      if (cur) {
+        data = this.handleList.filter(item => item.types === cur)
       }
+      this.drawSmartPoints(data)
+    },
+    handleList(cur) {
+      let data = cur
+      if (this.curSmartType) {
+        data = cur.filter(item => item.types === this.curSmartType)
+      }
+      this.drawSmartPoints(data)
+    },
   }
 }
 </script>