修改

src/components/MonitorComponents/MonitorStep/monitor-step.vue

@@ -7,9 +7,9 @@
     <div v-for="(step, i) in steps" :key="i" :class="`item ${i == current ? 'on' : ''}`">
       <p :title="step.name" :class="{none: i > current}">{{step.name}}</p>
       <div ref="icon" :class="{icon: true, none: i > current}" />
+      <!-- <span class="msg" :title="step.msg" v-html="msg[i]"/> -->
       <!-- <div ref="icon" v-if="i <= current" class="icon" :style="`background-image:url(${require('@/assets/images/true.png')})`"/> -->
       <!-- <div v-else class="none"/> -->
-      <span class="msg" :title="step.msg" v-html="msg[i]"/>
     </div>
   </div>
 </template>
@@ -26,12 +26,12 @@ export default {
       type: [Number, String],
       default: 0,
     },
-    msg: {
-      type: Array,
-      default() {
-        return []
-      },
-    }
+    // msg: {
+    //   type: Array,
+    //   default() {
+    //     return []
+    //   },
+    // }
   },
   data() {
     return {

src/server/api.js

@@ -22,12 +22,18 @@ export default {
   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_GRID1: '/dc/countDiscoveredCaseByStreet', // 网格-发现
+  GET_GRID2: '/dc/countRegisterCaseByStreet', // 网格-立案
+  GET_GRID3: 'dc/countDispatchCaseByStreet', // 网格-派遣
+  GET_GRID4: '/dc/countSolvingCaseByStreet', // 网格-处置
+  GET_GRID5: '/dc/countCheckingCaseByStreet', // 网格-核实
+  GET_GRID6: '/dc/countClosedCaseByStreet', // 网格-结案
+  GET_NOT_ALERT1: '/dc/countDiscoveredNotPoliceByStreet', // 非警情-发现
+  GET_NOT_ALERT2: '/dc/countRegisterNotPoliceByStreet', // 非警情-立案
+  GET_NOT_ALERT3: '/dc/countDispatchNotPoliceByStreet', // 非警情-派遣
+  GET_NOT_ALERT4: '/dc/countSolvingNotPoliceByStreet', // 非警情-处置
+  GET_NOT_ALERT5: '/dc/countCheckingNotPoliceByStreet', // 非警情-核实
+  GET_NOT_ALERT6: '/dc/countClosedNotPoliceByStreet', // 非警情-结案
   GET_POPULATION_INFO: '/dc/statisticsbureauArea', // 土地人口统计数字
   GET_COMPRESS_COUNT: '/dc/countCompressStationsByStreet', // 街道小型压缩站数目
   GET_GARBAGE_COUNT: '/dc/countPointsByStreet', // 街道垃圾收集点数目

src/store/actions.js

@@ -86,20 +86,26 @@ export default {
   },
   async getGridSum({state, commit}) {
     if (state.currentStreetInfo.name === '新江湾城街道') {
-      commit('SET_GRID_SUM', [34, 43, 0])
-      commit('SET_NOT_ALERT_SUM', [18, 27, 0])
+      commit('SET_GRID_SUM', [0, 0, 21, 0, 6, 57])
+      commit('SET_NOT_ALERT_SUM', [0, 0, 43, 0, 7, 291])
       return
     }
     const start = moment().add(-10, 'days').format('YYYY-MM-DD')
     const end = moment().format('YYYY-MM-DD')
-    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])
+    const grid1 = await ajax.get({url: api.DATA_URL + api.GET_GRID1, params: {street: curStreet, start, end}})
+    const grid2 = await ajax.get({url: api.DATA_URL + api.GET_GRID2, params: {street: curStreet, start, end}})
+    const grid3 = await ajax.get({url: api.DATA_URL + api.GET_GRID3, params: {street: curStreet, start, end}})
+    const grid4 = await ajax.get({url: api.DATA_URL + api.GET_GRID4, params: {street: curStreet, start, end}})
+    const grid5 = await ajax.get({url: api.DATA_URL + api.GET_GRID5, params: {street: curStreet, start, end}})
+    const grid6 = await ajax.get({url: api.DATA_URL + api.GET_GRID6, params: {street: curStreet, start, end}})
+    commit('SET_GRID_SUM', [+grid1 || 0, +grid2 || 0, +grid3 || 0, +grid4 || 0, +grid5 || 0, +grid6 || 0])
+    const alert1 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT1, params: {street: curStreet, start, end}})
+    const alert2 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT2, params: {street: curStreet, start, end}})
+    const alert3 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT3, params: {street: curStreet, start, end}})
+    const alert4 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT4, params: {street: curStreet, start, end}})
+    const alert5 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT5, params: {street: curStreet, start, end}})
+    const alert6 = await ajax.get({url: api.DATA_URL + api.GET_NOT_ALERT6, params: {street: curStreet, start, end}})
+    commit('SET_NOT_ALERT_SUM', [+alert1 || 0, +alert2 || 0, +alert3 || 0, +alert4 || 0, +alert5 || 0, +alert6 || 0])
   },
   async getPopulationInfo({state, commit}) {
     if (state.currentStreetInfo.name === '新江湾城街道') {
@@ -147,7 +153,8 @@ export default {
     }).then(res => {
       const sum = {total: 0, today: 0}
       const data = com.confirm(res, 'data.content', [])
-      const keys = ['heap', 'parkFireExit', 'nonVehicleCharg', 'buildingVibration', 'trash', 'manholeCover', 'waterTank', 'roofWater', 'hermeticSpace', 'accCtl', 'streetMonitor']
+      const keys = ['accCtl', 'heap', 'nonVehicleCharg', 'streetMonitor']
+      // 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

src/store/state.js

@@ -97,8 +97,8 @@ export default {
   repairRate: [],
   resourceSum: {},
   checkSum: {},
-  gridSum: [0, 0, 0],
-  notAlertSum: [0, 0, 0],
+  gridSum: [0, 0, 0, 0, 0, 0],
+  notAlertSum: [0, 0, 0, 0, 0, 0],
   patrolList: [],
   discoverSum: {},
   discoverInfo: [],

src/views/components/combine.vue

@@ -134,5 +134,5 @@ export default {
       left .1rem
       right .1rem
       bottom 0
-      transform translateY(38%)
+      transform translateY(10%)
 </style>

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>
+        <img :src="require(`@/assets/images/${item.img}`)"/>
+        {{item.name}}
+      </p>
+      <div class="content">
+        <p class="inner">
+          <m-count class="count" v-for="(val, i) in item.value" :key="i" :value="val" :decimal="0"/>
+        </p>
+        <m-step class="combine-step" :steps="steps" :current="1000"/>
+      </div>
+      <!-- <div>
         <p>{{item.name}}</p>
         <div>
           <m-count class="count" :value="item.value[0]" :decimal="0" />
@@ -14,7 +23,7 @@
           <span>处置中</span>
           <span>发现</span>
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -22,6 +31,18 @@
 <script>
 export default {
   name: 'GridManagement',
+  data() {
+    return {
+      steps: [
+        {name: '发现'},
+        {name: '立案'},
+        {name: '派遣'},
+        {name: '处置'},
+        {name: '核实'},
+        {name: '结案'},
+      ],
+    }
+  },
   computed: {
     sum() {
       const {gridSum, notAlertSum} = this.$store.state
@@ -37,34 +58,29 @@ export default {
 <style lang="stylus" scoped>
 .grid-management
   display flex
-  padding-top .05rem
+  flex-direction column
   >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 .05rem .1rem 0 0
     p
       color $fontColor
-    span
-      display inline-block
-      min-width .3rem
-      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
+      display flex
+      align-items center
+      font-size .11rem
+      img
+        width .2rem
+        height @width
+        margin 0 .1rem
+    .content
+      padding-left .3rem
+      .inner
+        display flex
+        width 90%
+        margin 0 auto
+        justify-content space-between
+        .count
+          color #fff
+          font-weight bold
+      .monitor-step
+        margin 0 auto
+        transform translateY(-25%)
 </style>

src/views/components/left-component.vue

@@ -12,7 +12,6 @@
         <m-card title="网格管理"><GridManagement /></m-card>
         <m-card title="房屋物业"><House /></m-card>
         <m-card title="小区检查清单"><CommunityCheck /></m-card>
-        <m-card title="工作提示"><WorkTips /></m-card>
       </div>
     </div>
   </div>
@@ -25,7 +24,6 @@ import Green from './green'
 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',
@@ -36,7 +34,6 @@ export default {
     Defense,
     House,
     CommunityCheck,
-    WorkTips,
     GridManagement,
   },
   data() {
@@ -85,8 +82,7 @@ export default {
       &.right
         >div
           &:nth-child(1)
-          &:nth-child(4)
-            height 15%
+            height 30%
           &:nth-child(2)
             height 40%
           &:nth-child(3)

src/views/components/right-component.vue

@@ -85,9 +85,9 @@ export default {
       &.left
         >div
           &:nth-child(1)
-            height 70%
+            height 65%
           &:nth-child(2)
-            height 30%
+            height 35%
       &.right
         display flex
         flex-direction column

src/views/components/smart-discover.vue

 <template>
   <div class="smart-discover">
-    <div class="stat">
-      <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 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 class="detail">
-        <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>
+    </div>
+    <!-- <div class="detail">
+      <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>
+    </div> -->
+    <div class="detail">
+      <img src="@/assets/images/smart.png" />
+      <div
+        class="item"
+        @click="handleClick(item.types, item.visible)"
+        v-for="item in list" :key="item.types"
+        :class="{on: item.types === curSmartType, visible: item.visible}"
+      >
+        <m-count :class="{count: true, yellow: item.value > 0}" :value="item.value" :decimal="0" />
+        <p>{{item.name}}</p>
       </div>
     </div>
     <div v-if="showChart" class="chart">
@@ -72,14 +82,27 @@ export default {
     },
     list() {
       const {discoverInfo} = this.$store.state
-      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)
+      const keys = ['accCtl', 'heap', 'nonVehicleCharg', 'streetMonitor']
+      const result = []
+      for (let i = 0; i < keys.length; i++) {
+        const item = discoverInfo.find(e => e && e.types === keys[i])
+        if (!item) return
+        result.push({
+          name: this.$com.transType(item.types),
+          value: +item.numbers || 0,
+          types: item.types,
+          visible: this.calcVisible(item.types),
+        })
+      }
+      return result
+      // 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: {
@@ -112,6 +135,7 @@ export default {
 
 <style lang="stylus" scoped>
 .smart-discover
+  height 100%
   .no-data
     $flex-center()
     flex-direction column
@@ -141,17 +165,27 @@ export default {
       .count
         font-size .13rem
   .detail
-    display flex
-    flex-wrap wrap
-    >div
-      display flex
-      align-items center
-      justify-content space-between
-      padding .03rem .08rem
-      margin .01rem
-      width calc((100% - 0.04rem) / 2)
-      background #0A2F59
-      border .01rem solid transparent
+    width 100%
+    height 35%
+    position relative
+    >img
+      width 36%
+      position absolute
+      top 0
+      right 0
+      bottom 0
+      left 0
+      margin auto
+    .item
+      position absolute
+      width 32%
+      height 45%
+      background rgba(49,94,139, .4)
+      border .04rem solid rgba(0,0,0,.25)
+      text-align center
+      $flex-center()
+      flex-direction column
+      font-size .08rem
       opacity .3
       &.visible
         cursor pointer
@@ -159,20 +193,56 @@ export default {
         &.on
         &:hover
           $selected()
-      p
-        display flex
-        align-items center
-      img
-        width .12rem
-        height @width
-        margin-right .05rem
-      .count
-        font-size .12rem
-        &.yellow
+      &:nth-of-type(1)
+        top 0
+        left 0
+      &:nth-of-type(2)
+        top 0
+        right 0
+      &:nth-of-type(3)
+        bottom 0
+        left 0
+      &:nth-of-type(4)
+        bottom 0
+        right 0
+    .count
+      font-size .12rem
+      &.yellow
           color $color-yellow
+  // .detail
+  //   display flex
+  //   flex-wrap wrap
+  //   >div
+  //     display flex
+  //     align-items center
+  //     justify-content space-between
+  //     padding .03rem .08rem
+  //     margin .01rem
+  //     width calc((100% - 0.04rem) / 2)
+  //     background #0A2F59
+  //     border .01rem solid transparent
+  //     opacity .3
+  //     &.visible
+  //       cursor pointer
+  //       opacity 1
+  //       &.on
+  //       &:hover
+  //         $selected()
+  //     p
+  //       display flex
+  //       align-items center
+  //     img
+  //       width .12rem
+  //       height @width
+  //       margin-right .05rem
+  //     .count
+  //       font-size .12rem
+  //       &.yellow
+  //         color $color-yellow
   .chart
     width 100%
-    height 39%
+    // height 39%
+    height 50%
     margin-top .05rem
     background-image url('../../assets/images/chart-bg.png')
     background-size 100% 100%