协调处置开始

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

@@ -51,7 +51,7 @@ export default {
     bottom 0.35rem
     width 95%
     margin 0 auto
-    z-index -1
+    z-index 1
     >.line
       height 0.3rem
       background rgba(0,0,0,0.8)
@@ -63,6 +63,7 @@ export default {
     text-align center
     width 1rem
     position relative
+    z-index 2
     .icon
       width 1rem
       height 1rem

src/main.js

@@ -5,7 +5,7 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import store from './store'
-import {Row, Col, Select, Option, DatePicker,Icon,Progress,Divider} from 'view-design'
+import {Row, Col, Select, Option, DatePicker,Icon,Progress,Divider,} from 'view-design'
 import ajax from '@/server/ajax'
 import api from '@/server/api'
 import common from '@/util/common'

src/store/state.js

@@ -176,6 +176,61 @@ export default {
       successNum:'13',
       num:'20'
     }
+  ],
+  handleList:[    //协同处置
+    {
+      title:'金港花园',
+      address:'古楼公路345弄12号',
+      matter:'占用消防通道' ,    // 事项
+      style:'物业督查',
+      department:'消防部门',
+      foundTime:'2020-01-01 12:30:30',  // 可能是moment格式
+      sendTime:'2020-01-02 13:30:30',
+      fixTime:'2020-01-02 14:30:30',
+      successTime:'2020-01-02 16:30:30',
+      overTime:null,
+      step:[
+        {
+          name:'推送',
+        },
+        {
+          name:'处理中',
+        },
+        {
+          name:'完成',
+        },
+        {
+          name:'数据入库'
+        }
+      ],
+      current:1
+    },
+    // {
+    //   title:'金港花园',
+    //   address:'古楼公路345弄12号',
+    //   matter:'占用消防通道' ,    // 事项
+    //   style:'物业督查',
+    //   department:'消防部门',
+    //   foundTime:'2020-01-01 12:30:30',  // 可能是moment格式
+    //   sendTime:'2020-01-02 13:30:30',
+    //   fixTime:'2020-01-02 14:30:30',
+    //   successTime:'2020-01-02 16:30:30',
+    //   overTime:null,
+    // },
+    // {
+    //   title:'金港花园',
+    //   address:'古楼公路345弄12号',
+    //   matter:'占用消防通道' ,    // 事项
+    //   style:'物业督查',
+    //   department:'消防部门',
+    //   foundTime:'2020-01-01 12:30:30',  // 可能是moment格式
+    //   sendTime:'2020-01-02 13:30:30',
+    //   fixTime:'2020-01-02 14:30:30',
+    //   successTime:'2020-01-02 16:30:30',
+    //   overTime:null,
+    // },
+
+
   ]
 
 

src/views/components/handle.vue

+<template>
+  <div class="handle">
+    <div class="card" v-for="(data,i) in $store.state.handleList" :key="i">
+      <div class="title">
+        <p>{{data.title}}</p>
+        <span>{{data.address}}</span>
+      </div>
+      <!-- <div class="body">
+        <ul>
+          <li>
+            <p>协同事项</p>
+            <span>{{data.matter}}</span>
+          </li>
+          <li>
+            <p>发现方式</p>
+            <span>{{data.style}}</span>
+          </li>
+          <li>
+            <p>接受部门</p>
+            <span>{{data.department}}</span>
+          </li>
+          <li>
+            <p>推送时间</p>
+            <span>{{data.sendTime}}</span>
+          </li>
+        </ul>
+      </div>
+      <div class="foot">
+        <m-step
+          :steps="data.step"
+          :current="data.current"
+
+        ></m-step>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'handle'
+
+}
+</script>
+
+<style lang="stylus" scoped>
+.handle
+  width 100%
+  height 100%
+  display flex
+  align-items center
+  >.title
+    width 100%
+    display flex
+    align-items center
+    justify-content flex-start
+    >p
+      width 50%
+    >span
+      width 50%
+
+
+
+</style>

src/views/components/supervision.vue

@@ -24,7 +24,7 @@
         <div v-for="(data,i) in $store.state.supervisionSituationList" :key="i">
           <p>整改单</p>
           <span>{{data.successNum}}/{{data.num}}</span>
-          <a-progress strokeColor="#00f2ff" :percent="data.successNum/data.num*100" :showInfo="false" />
+          <a-progress class="progress" strokeColor="#00f2ff" :percent="data.successNum/data.num*100" :showInfo="false" />
         </div>
       </div>
     </div>
@@ -107,8 +107,6 @@ export default {
           font-size 1.2rem
           text-align right
           width 50%
-
-
-
-
+        .progress
+          flex 1
 </style>

src/views/main.vue

@@ -30,6 +30,7 @@
       <Supervision/>
     </m-card>
     <m-card area="box6" title="协同处置" mode="4" :icon="require('@/assets/images/icon6.png')">
+      <Handle/>
     </m-card>
   </m-grid>
 </template>
@@ -40,6 +41,7 @@ import Operation from '@/views/components/operation.vue'
 import Repair from '@/views/components/repair.vue'
 import Discovery from '@/views/components/discovery.vue'
 import Supervision from '@/views/components/supervision.vue'
+import Handle from '@/views/components/handle.vue'
 export default {
   name: 'Main',
   components: {
@@ -48,6 +50,7 @@ export default {
     Repair,
     Discovery,
     Supervision,
+    Handle,
   },
   methods: {
     handleSelect(data) {