问题管理

src/views/problem/detailDialog.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="detail-diaog">
+    <el-steps :active="childData.status" align-center>
+      <el-step title="问题确认">
+        <div slot="description">
+          <span class="step-title" v-if="childData.creatUserName">{{childData.creatUserName}}</span>
+          <br />
+          <span class="step-title" v-if="childData.createTime">{{childData.createTime}}</span>
+        </div>
+      </el-step>
+      <el-step title="问题指派">
+        <div slot="description">
+          <span class="step-title" v-if="childData.assignUserName">{{childData.assignUserName}}</span>
+          <br />
+          <span class="step-title" v-if="childData.assignTime">{{childData.assignTime}}</span>
+        </div>
+      </el-step>
+      <el-step title="问题处理">
+        <div slot="description">
+          <span class="step-title" v-if="childData.handlerUserName">{{childData.handlerUserName}}</span>
+          <br />
+          <span class="step-title" v-if="childData.handlerTime">{{childData.handlerTime}}</span>
+        </div>
+      </el-step>
+      <el-step title="问题完成">
+        <div slot="description">
+          <span class="step-title" v-if="childData.handlerUserName">{{childData.handlerUserName}}</span>
+          <br />
+          <span class="step-title" v-if="childData.handlerTime">{{childData.handlerTime}}</span>
+        </div>
+      </el-step>
+    </el-steps>
+    <div style="margin-top:30px" class="dialog-item">
+      <div>问题编号：</div>
+      <div>{{childData.questionNo}}</div>
+    </div>
+    <div class="dialog-item">
+      <div>问题类型：</div>
+      <div>{{childData.questionType}}</div>
+    </div>
+    <div class="dialog-item">
+      <div>区属：</div>
+      <div>{{childData.areaName}}</div>
+    </div>
+    <div class="dialog-item">
+      <div>河湖名称：</div>
+      <div>{{childData.driverName}}</div>
+    </div>
+    <div class="dialog-item">
+      <div>拍摄时间：</div>
+      <div>{{childData.inspectTime}}</div>
+    </div>
+    <div class="dialog-item">
+      <div>问题位置：</div>
+      <div>{{childData.location}}</div>
+    </div>
+    <div id="reportMap" style="margin-left:152px;width: 300px;height: 220px;margin-top: 10px"></div>
+    <div class="dialog-item">
+      <div>问题图片：</div>
+      <div>
+        <viewer v-if="childData.imgUrl">
+          <img
+            style="width:300px;height:200px"
+            v-lazy="childData.imgUrl"
+            :data-source="childData.originUrl"
+          />
+        </viewer>
+      </div>
+    </div>
+    <div v-if="childData.handlerImage" class="dialog-item">
+      <div>处理后图片：</div>
+      <div>
+        <viewer v-if="childData.handlerImage">
+          <img style="width:300px;height:200px" v-lazy="childData.handlerImage" />
+        </viewer>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import api from "@/api/question/list";
+import AMap from "AMap";
+
+export default {
+  name: "detail-diaog",
+  data() {
+    return {
+      drawerWidth: document.body.clientWidth - 190 + "px",
+      direction: "rtl",
+      childData: {},
+      map: {}
+    };
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    id: {
+      type: Number,
+      default() {
+        return 0;
+      }
+    }
+  },
+  components: {},
+  created() {},
+  mounted() {
+    this.getDetail();
+  },
+  methods: {
+    initMap() {
+      let me = this;
+      this.map = new AMap.Map("reportMap", {
+        zooms: [10, 18]
+      });
+      this.map.setCity("南京市");
+      this.map.on("complete", function() {
+        if (me.childData.latitude && me.childData.longitude) {
+          let point = new AMap.LngLat(
+            me.childData.longitude,
+            me.childData.latitude
+          );
+          let icon = new AMap.Icon({
+            // 图标尺寸
+            size: new AMap.Size(25, 25),
+            // 图标的取图地址
+            image: require("../../assets/img/marker-img.png"),
+            // 图标所用图片大小
+            imageSize: new AMap.Size(25, 25)
+          });
+          let marker = new AMap.Marker({
+            position: point,
+            icon: icon,
+            offset: new AMap.Pixel(-12, -12)
+          });
+          marker.setDraggable(true);
+          marker.setMap(me.map);
+          me.map.setZoomAndCenter(10, point);
+        }
+      });
+    },
+    getDetail() {
+      api
+        .getDetail(this.id)
+        .then(res => {
+          if (res.data.status == 3) {
+            res.data.status == 4;
+          }
+          this.childData = res.data;
+          this.initMap();
+        })
+        .catch(err => {
+          this.childData = {};
+        });
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.detail-diaog {
+  .step-title {
+    font-size: 14px;
+    color: #333333;
+  }
+  .dialog-item {
+    margin-top: 15px;
+    display: flex;
+    line-height: 20px;
+    align-items: center;
+    > div:first-child {
+      width: 150px;
+      text-align: right;
+    }
+    > div:last-child {
+      flex: 1;
+    }
+  }
+}
+</style>

src/views/problem/list.vue

@@ -83,42 +83,41 @@
       >
         <template slot-scope="scoped">
           <a
-            v-if="isAdmin||btnRule.some(btn=>btn=='view')"
+            v-if="isAdmin||btnRule.some(btn=>btn=='detail')"
             href="javascript:void(0);"
             @click="handleEdit(scoped.row,1)"
-          >{{scoped.row.name}}</a>
-          <span v-else>{{scoped.row.name}}</span>
+          >{{scoped.row.questionNo}}</a>
+          <span v-else>{{scoped.row.questionNo}}</span>
         </template>
       </el-table-column>
       <el-table-column show-overflow-tooltip label="问题图片" align="center" min-width="80">
         <template slot-scope="{row}">
-          <el-tag
-            :type="row.type === 2?'success':((row.type === 3||row.type === 4)?'warning':'')"
-            size="small"
-          >{{typeList[row.type]}}</el-tag>
+          <img style="width:20px;height:20px" :src="row.imgUrl" />
         </template>
       </el-table-column>
       <el-table-column
         show-overflow-tooltip
-        prop="driverManagerName"
+        prop="areaName"
         label="区划"
         align="center"
         min-width="80"
       />
-      <el-table-column show-overflow-tooltip label="河湖名称" align="center" min-width="100">
-        <template slot-scope="scoped">
-          <span v-if="scoped.row.level">{{levelList[scoped.row.level]}}</span>
-        </template>
-      </el-table-column>
       <el-table-column
         show-overflow-tooltip
-        prop="driverAreaName"
+        prop="driverName"
+        label="河湖名称"
+        align="center"
+        min-width="100"
+      ></el-table-column>
+      <el-table-column
+        show-overflow-tooltip
+        prop="inspectTime"
         label="巡检时间"
-        min-width="200"
+        min-width="120"
         align="center"
       />
-      <el-table-column show-overflow-tooltip prop="startPoint" label="问题类型" align="center" />
-      <el-table-column show-overflow-tooltip prop="endPoint" label="问题状态" align="center" />
+      <el-table-column show-overflow-tooltip prop="questionType" label="问题类型" align="center" />
+      <el-table-column show-overflow-tooltip prop="statusText" label="问题状态" align="center" />
     </el-table>
     <!-- 分页 -->
     <div class="page-current">
@@ -134,18 +133,36 @@
         :total="count"
       />
     </div>
+    <el-drawer
+      class="detail-diaog"
+      title="问题详情"
+      :visible.sync="visible"
+      :direction="direction"
+      :size="drawerWidth"
+      :before-close="beforeClose"
+    >
+      <detailDialog @handleClose="visible=false" :visible="visible" v-if="visible" :id="id"></detailDialog>
+      <div style="width: 100%;text-align: center;margin-top: 20px;margin-bottom: 20px">
+        <el-button size="medium" icon="el-icon-back" @click="visible=false">返回</el-button>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
 <script>
 import api from "@/api/question/list";
 import driverAreaSelect from "@/components/driverAreaSelect";
+import detailDialog from "./detailDialog";
 import { mapGetters } from "vuex";
 
 export default {
   name: "problem-container",
   data() {
     return {
+      drawerWidth: document.body.clientWidth - 190 + "px",
+      direction: "rtl",
+      id: "",
+      visible: false,
       typeList: {
         1: "待指派",
         2: "处理中",
@@ -158,15 +175,15 @@ export default {
         driverArea: "",
         status: ""
       },
-      dataList:[],
+      dataList: [],
       currentPage: 1,
-      pageSize: parseInt((document.body.clientHeight - 290 - 43) / 44.5),
+      pageSize: parseInt((document.body.clientHeight - 290 - 43) / 47),
       count: 0,
       tableLoading: false,
       tableHeight: document.body.clientHeight - 290
     };
   },
-  components: { driverAreaSelect },
+  components: { driverAreaSelect, detailDialog },
   computed: {
     ...mapGetters(["btnRule", "isAdmin"])
   },
@@ -176,9 +193,15 @@ export default {
     let me = this;
     me.getAllList();
   },
-  watch: {
-  },
+  watch: {},
   methods: {
+    beforeClose(){
+      this.visible=false
+    },
+    handleEdit(row) {
+      this.id = row.id;
+      this.visible = true;
+    },
     indexMethod(index) {
       return index + 1 + (this.currentPage - 1) * this.pageSize;
     },
@@ -223,7 +246,7 @@ export default {
         driverArea: "",
         status: ""
       };
-    },
+    }
   }
 };
 </script>