完善位置信息页面

package.json

@@ -20,6 +20,7 @@
     "pinia": "^2.0.13",
     "pinia-plugin-persist": "^1.0.0",
     "tinymce": "^5.10.2",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vue": "^3.2.16",
     "vue-router": "^4.0.14",
     "vuedraggable": "^4.1.0"

src/components/PositionMsg/OverLay.vue

@@ -13,7 +13,7 @@
       >
         <n-form-item label="问题类型:">
           <n-select
-            v-model:value="form.name"
+            v-model:value="form.type"
             :options="typeList"
             placeholder="请选择问题类型"
           />
@@ -36,7 +36,7 @@
   </div>
 </template>
 <script>
-import { toRefs, reactive, watch } from 'vue'
+import { toRefs, reactive, watch, inject } from 'vue'
 export default {
   name: 'OverLay',
   props: {
@@ -46,29 +46,32 @@ export default {
     }
   },
   emits: {
-    'close': null,
-    'confirm': null,
-    'ignore': null
+    'close': null
   },
   setup(props, { emit }) {
     const data = reactive({
-      form: props.data,
+      form: {},
       typeList: [
-        { value: 0, label: '林班' }
+        { value: 1, label: '林斑' },
+        { value: 2, label: '病虫害' }
       ]
     })
+    /* 引入祖先组件注册的方法 */
+    const confirm = inject('confirm', null)
+    const ignore = inject('ignore', null)
+
     watch(() => props.data, () => {
-      data.form = props.data
+      data.form = Object.assign({}, props.data)
     })
     const updateVisible = function() {
       emit('close')
     }
     function makeSure() {
-      emit('confirm')
+      confirm(data.form)
       updateVisible()
     }
     function pass() {
-      emit('ignore')
+      ignore(data.form)
       updateVisible()
     }
     return {

src/components/PositionMsg/index.vue

@@ -2,7 +2,7 @@
   <div class="main_container">
     <div id="track" ref="map" />
     <div id="pointOverlay" class="point_overlay">
-      <over-lay :data="problemData" @close="closeOverlay" @confirm="confirmProblem" @ignore="ignoreProblem" />
+      <over-lay :data="problemData" @close="closeOverlay" @done="handlePosition" />
     </div>
 
     <ul class="legend_list">
@@ -84,7 +84,7 @@ export default {
       select.value = new Select({
         style: (feature) => {
           if (feature.getGeometry() instanceof Point) {
-            return styleList[3]
+            return styleList[0]
           }
         }
       })
@@ -162,10 +162,10 @@ export default {
             overlay.value.setOffset([30, -400])
             mapdata.value.addOverlay(overlay.value)
           } else {
-            mapdata.value.removeOverlay(overlay.value)
+            closeOverlay()
           }
         } else {
-          mapdata.value.removeOverlay(overlay.value)
+          closeOverlay()
         }
       })
     }
@@ -189,28 +189,16 @@ export default {
      * 关闭overlay
      */
     const closeOverlay = () => {
+      data.problemData = {}
       select.value.getFeatures().clear()
       mapdata.value.removeOverlay(overlay.value)
     }
-    /**
-     * 忽略
-     */
-    const ignoreProblem = function() {
-
-    }
-    /**
-     * 确认
-     */
-    const confirmProblem = function() {
-
-    }
 
     return {
       ...toRefs(data),
       removeVector,
-      closeOverlay,
-      confirmProblem,
-      ignoreProblem
+      closeOverlay
+
     }
   }
 }

src/components/PositionMsg/util.js

@@ -10,7 +10,7 @@ export const styleList = [
   new Style({
     image: new Icon({
       anchor: [0.5, 0.5],
-      src: imgAwait,
+      src: imgSelected,
       crossOrigin: '',
       scale: [1, 1],
       rotateWithView: true
@@ -19,7 +19,7 @@ export const styleList = [
   new Style({
     image: new Icon({
       anchor: [0.5, 0.5],
-      src: imgChecked,
+      src: imgAwait,
       crossOrigin: '',
       scale: [1, 1],
       rotateWithView: true
@@ -28,7 +28,7 @@ export const styleList = [
   new Style({
     image: new Icon({
       anchor: [0.5, 0.5],
-      src: imgIgnored,
+      src: imgChecked,
       crossOrigin: '',
       scale: [1, 1],
       rotateWithView: true
@@ -37,7 +37,7 @@ export const styleList = [
   new Style({
     image: new Icon({
       anchor: [0.5, 0.5],
-      src: imgSelected,
+      src: imgIgnored,
       crossOrigin: '',
       scale: [1, 1],
       rotateWithView: true

src/views/task-manage/all-task/components/VerifyDrawer.vue

@@ -1,8 +1,7 @@
 <template>
   <n-drawer v-bind="getDrawerOptions" @update:show="handleDrawerColse">
     <n-drawer-content closable title="疑似问题核实">
-      <!-- <QuestionPage /> -->
-      <position-msg :data="problemList" />
+      <QuestionPage />
     </n-drawer-content>
   </n-drawer>
 </template>
@@ -10,11 +9,10 @@
 <script>
 import QuestionPage from '@/views/task-manage/question/index.vue'
 import { defineComponent, computed, reactive, toRefs } from 'vue'
-import PositionMsg from '@/components/PositionMsg/index.vue'
 
 export default defineComponent({
   name: 'LiveDrawer',
-  components: { QuestionPage, PositionMsg },
+  components: { QuestionPage },
   props: {
     /* 可见 */
     visible: {
@@ -32,32 +30,7 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const data = reactive({
-      problemList: [
-        { content: '河道内存在水生植被',
-          fileImage: 'https://image.t-aaron.com/XJRW20220725103839/2022-07-25-10-41-46_frame-1500-1680_type-水生植被_VMgRwh05s4clHXCu_s-live-XJRW20220725103839-b73c470768f74422b287981fc75c31c3_AI.jpg',
-          handlerImage: 'https://image.t-aaron.com/imagedir/kw6vv4m1yw_1658717157035.png',
-          handlerResult: '',
-          handlerTime: '2022-07-25 10:45:56',
-          latitude: '31.829037194418085',
-          location: '江苏省南京市江宁区秣陵街道东吉大道',
-          longitude: '118.770222690945',
-          name: 1,
-          status: 1,
-          type: 1,
-          userName: '运管单位' },
-        { content: '水生植被',
-          fileImage: 'https://image.t-aaron.com/XJRW20220725103839/2022-07-25-10-41-46_frame-1500-1680_type-水生植被_VMgRwh05s4clHXCu_s-live-XJRW20220725103839-b73c470768f74422b287981fc75c31c3_AI.jpg',
-          handlerImage: 'https://image.t-aaron.com/imagedir/kw6vv4m1yw_1658717157035.png',
-          handlerResult: '',
-          handlerTime: '2022-07-25 10:45:56',
-          latitude: '31.129037194418085',
-          location: '江苏省南京市江宁区秣陵街道东吉大道',
-          longitude: '118.880222690945',
-          name: 1,
-          status: 0,
-          type: 2,
-          userName: '运管单位' }
-      ]
+
     })
 
     /* 获取抽屉的信息 */

src/views/task-manage/question/components/PositionDrawer.vue

@@ -0,0 +1,101 @@
+<template>
+  <n-drawer v-bind="getDrawerOptions" @update:show="handleDrawerColse">
+    <n-drawer-content closable title="图片位置">
+      <position-msg :data="problemList" />
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<script>
+import { defineComponent, computed, reactive, toRefs, provide } from 'vue'
+import PositionMsg from '@/components/PositionMsg/index.vue'
+
+export default defineComponent({
+  name: 'PositionDrawer',
+  components: { PositionMsg },
+  props: {
+    /* 可见 */
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    /* 选中的数据 */
+    data: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  emits: {
+    'update:visible': null
+  },
+  setup(props, { emit }) {
+    const data = reactive({
+      problemList: [
+        { content: '河道内存在水生植被',
+          fileImage: 'https://image.t-aaron.com/XJRW20220725103839/2022-07-25-10-41-46_frame-1500-1680_type-水生植被_VMgRwh05s4clHXCu_s-live-XJRW20220725103839-b73c470768f74422b287981fc75c31c3_AI.jpg',
+          handlerImage: 'https://image.t-aaron.com/imagedir/kw6vv4m1yw_1658717157035.png',
+          handlerResult: '',
+          handlerTime: '2022-07-25 10:45:56',
+          latitude: '31.829037194418085',
+          location: '江苏省南京市江宁区秣陵街道东吉大道',
+          longitude: '118.770222690945',
+          name: 1,
+          status: 1,
+          type: 1,
+          userName: '运管单位' },
+        { content: '水生植被',
+          fileImage: 'https://image.t-aaron.com/XJRW20220725103839/2022-07-25-10-41-46_frame-1500-1680_type-水生植被_VMgRwh05s4clHXCu_s-live-XJRW20220725103839-b73c470768f74422b287981fc75c31c3_AI.jpg',
+          handlerImage: 'https://image.t-aaron.com/imagedir/kw6vv4m1yw_1658717157035.png',
+          handlerResult: '',
+          handlerTime: '2022-07-25 10:45:56',
+          latitude: '31.129037194418085',
+          location: '江苏省南京市江宁区秣陵街道东吉大道',
+          longitude: '118.880222690945',
+          name: 1,
+          status: 2,
+          type: 2,
+          userName: '运管单位' }
+      ]
+    })
+
+    const confirm = function(params) {
+      console.log(params, '确认++++++++++++')
+    }
+
+    const ignore = function(params) {
+      console.log(params, '忽略------------------')
+    }
+
+    /* 注册确认方法 */
+    provide('confirm', confirm)
+
+    /* 注册忽略方法 */
+    provide('ignore', ignore)
+    /* 获取抽屉的信息 */
+    const getDrawerOptions = computed(() => {
+      return {
+        show: props.visible,
+        width: '100%',
+        placement: 'right'
+      }
+    })
+
+    /* 关闭抽屉 */
+    function handleDrawerColse() {
+      emit('update:visible', false)
+    }
+
+    return {
+      ...toRefs(data),
+      getDrawerOptions,
+      handleDrawerColse
+    }
+  }
+})
+</script>
+
+<style scoped lang='scss'>
+.n-button+.n-button{
+  margin-left: 30px;
+}
+</style>

src/views/task-manage/question/index.vue

@@ -20,6 +20,9 @@
 
   <ConfirmModal v-if="confirmModal" v-model:visible="confirmModal" :data="pageData" @update-data="tableReload" />
 
+  <!-- 图片位置 -->
+  <position-drawer v-model:visible="positionDrawer" :data="rowData" />
+
 </template>
 
 <script>
@@ -28,19 +31,21 @@ import search from './tools/search.js'
 import HeadSearch from '@/components/Search/index.vue'
 import DataTable from '@/components/DataTable/index.vue'
 import ConfirmModal from './components/ConfirmModal.vue'
-import { h, computed, ref, reactive, toRefs } from 'vue'
+import PositionDrawer from './components/PositionDrawer.vue'
+import { ref, reactive, toRefs } from 'vue'
 export default {
   name: 'QuestionPage',
-  components: { HeadSearch, DataTable, ConfirmModal },
+  components: { HeadSearch, DataTable, ConfirmModal, PositionDrawer },
   setup() {
     const data = reactive({
       search,
       ...toRefs(table),
       data: [
-        { id: 1, image: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg', type: 1 },
-        { id: 2, image: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg', type: 2 }
+        { id: 1, image: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg', position: '软件园', type: 1 },
+        { id: 2, image: 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg', position: '东吉大道一号', type: 2 }
       ],
       pageData: []
+
     })
 
     /**

src/views/task-manage/question/tools/table.js

@@ -15,6 +15,12 @@ function handleRowConfirm(row) {
   console.log('问题确认')
 }
 
+/* 位置 */
+function handlePositionDrawer(row) {
+  data.rowData = row
+  data.positionDrawer = true
+}
+
 function handleImgPreview() {
   data.confirmModal = true
 }
@@ -22,6 +28,7 @@ function handleImgPreview() {
 const data = reactive({
   rowData: {},
   confirmModal: false,
+  positionDrawer: false,
   columns: [
     {
       type: 'selection'
@@ -59,8 +66,26 @@ const data = reactive({
     },
     {
       title: '位置',
-      key: 'name',
-      align: 'center'
+      key: 'position',
+      align: 'center',
+      render(row) {
+        return h(TableAction, {
+          actions: [
+            {
+              label: '图片位置',
+              type: 'button',
+              props: {
+                type: 'primary',
+                text: true,
+                onClick: handlePositionDrawer.bind(null, row)
+              },
+              auth: 'basic_list',
+              show: row.status !== 1
+            }
+          ],
+          align: 'center'
+        })
+      }
     },
     {
       title: '备注',