zhangtao

src/api/task/index.js

@@ -61,7 +61,7 @@ export function implement(id) {
 }
 
 /**
- * @description: 获取任务详情
+ * @description: 获取问题列表
  * @param {*} id 任务id
  * @return {*}
  */
@@ -72,6 +72,18 @@ export function getQuestionList(params) {
     params
   })
 }
+/**
+ * @description: 获取问题列表
+ * @param {*} params
+ * @return {*}
+ */
+export function getDistributed(params) {
+  return request({
+    url: '/question/distributed',
+    method: 'GET',
+    params
+  })
+}
 /**
  * @description: 获取问题类型
  * @return {*}

src/components/PositionMsg/index.vue

@@ -38,7 +38,7 @@ export default {
     },
     type: {
       type: String,
-      default: ''
+      default: 'look'
     }
   },
   emits: {},
@@ -184,8 +184,9 @@ export default {
     watch(() => props.data, (value) => {
       if (value) {
         if (mapdata.value) {
-          console.log('数据变化===============================')
-          removeVector(problemLayer.value)
+          if (problemLayer.value) {
+            removeVector(problemLayer.value)
+          }
           getLayer(props.data)
         }
       }

src/views/dashboard/components/AirCard.vue

@@ -1,7 +1,8 @@
 <template>
   <n-card>
     <div class="card__title">
-      <p>
+      <p class="card__title--left">机场状态</p>
+      <p class="card__title--right">
         <n-form
           inline
           :label-width="80"
@@ -108,8 +109,8 @@ export default {
           id: 'video-inner',
           width: '100%',
           height: '100%',
-          source: row?.externalMonitorUrl,
-          // source: 'http://101.43.84.72:8080/live/34020000001320000001@34020000001320000001.flv',
+          // source: row?.externalMonitorUrl,
+          source: 'http://101.43.84.72:8080/live/34020000001320000001@34020000001320000001.flv',
           // source: row?.id === 2 ? live1 : video2,
           isLive: true
         }
@@ -139,10 +140,17 @@ export default {
   line-height: 20px;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   margin-bottom: 15px;
-  flex-direction: row-reverse;
-  .n-select{
-    width: 160px;
+  .card__title--left{
+    font-size: 18px;
+    padding-left: 8px;
+    border-left: 4px solid rgba(24, 144, 255, 1);
+  }
+  .card__title--right{
+    .n-select{
+      width: 160px;
+    }
   }
 }
 .card__video{

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

@@ -1,37 +1,70 @@
 <template>
-  <div class="question-container">
-    <HeadSearch :info="search" @search="handleSearch" @reset="handleSearch" />
-    <position-msg :data="dataList" :type="positionType" />
+  <div>
+    <n-card>
+      <div class="question__container">
+        <HeadSearch :info="search" @search="handleSearch" @reset="handleSearch" />
+        <div class="question__position">
+          <PositionMsg :data="questionList" />
+        </div>
+      </div>
+    </n-card>
   </div>
 </template>
 
 <script>
-import { reactive, toRefs } from '@vue/reactivity'
+import { reactive, toRefs, onMounted } from 'vue'
 import search from './tools/search.js'
 import HeadSearch from '@/components/Search/index.vue'
 import PositionMsg from '@/components/PositionMsg/index.vue'
+import { getDistributed } from '@/api/task/index.js'
 export default {
   name: 'QuestionDistribution',
   components: { PositionMsg, HeadSearch },
   setup() {
     const data = reactive({
       search,
-      dataList: [
-        { lng: '118.32002', lat: '32.345623' }
-      ],
-      positionType: 'look'
+      questionList: []
+    })
+
+    async function handleSearch(searchs) {
+      let params = { ...searchs }
+      if (searchs?.time?.length) {
+        params = {
+          ...searchs,
+          startTime: searchs.time[0],
+          endTime: searchs.time[1]
+        }
+      }
+      delete params.time
+      const res = await getDistributed(params)
+      if (res.code === 0) {
+        data.questionList = res.data
+      }
+    }
+
+    onMounted(() => {
+      handleSearch()
     })
 
     return {
-      ...toRefs(data)
+      ...toRefs(data),
+      handleSearch
     }
   }
 }
 
 </script>
 <style scoped lang='scss'>
-.question-container {
-  width: 100%;
-  height: 100%;
+.n-card{
+  height: calc(100vh - 80px);
+  .question__container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .question__position{
+      flex: 1;
+    }
+  }
 }
+
 </style>

src/views/question-manage/question-distribution/tools/search.js

@@ -14,7 +14,7 @@ const data = reactive([
   },
   {
     label: '搜索任务',
-    key: 'name',
+    key: 'missionName',
     props: {
       placeholder: '请输入任务名称'
     }

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

@@ -1,118 +0,0 @@
-import { QUESTION_TYPE } from '@/utils/dictionary.js'
-import TableImage from '@/components/DataTable/tools/Image.vue'
-import TableTags from '@/components/DataTable/tools/Tags.vue'
-import TableAction from '@/components/DataTable/tools/Action.vue'
-import { h, ref, reactive } from 'vue'
-
-/* 注册table */
-const tableRef = ref()
-const searchParams = ref()
-
-function handleSearch(params) {
-  searchParams.value = { ...params }
-  if (params?.time?.length) {
-    searchParams.value = {
-      startTime: params.time[0],
-      endTime: params.time[1]
-    }
-  }
-  delete searchParams.value.time
-  tableRef.value.reFetch({ searchParams })
-}
-
-/* 位置 */
-function handlePositionDrawer(row) {
-  data.rowData = row
-  data.positionDrawer = true
-}
-
-const data = reactive({
-  tableRef,
-  searchParams,
-  rowData: {},
-  positionDrawer: false,
-  handleSearch,
-
-  columns: [
-    {
-      title: '序号',
-      key: 'key',
-      render: (_, index) => {
-        return `${index + 1}`
-      },
-      align: 'center'
-    },
-    {
-      title: '问题类型',
-      key: 'type',
-      align: 'center',
-      render(row) {
-        return h(TableTags, {
-          data: row.type,
-          filters: QUESTION_TYPE
-        })
-      }
-    },
-    {
-      title: '问题图片',
-      key: 'fileMarkerUrl',
-      align: 'center',
-      render(row) {
-        return h(TableImage, {
-          images: {
-            width: 36,
-            height: 36,
-            src: row.fileMarkerUrl
-            // previewDisabled: true
-            // onClick: handleImgPreview.bind(null, row)
-          }
-        })
-      }
-    },
-    {
-      title: '经纬度',
-      key: 'name',
-      align: 'center',
-      render(row) {
-        return h(TableTags, {
-          data: [{ name: row.lng }, { name: row.lat }]
-        })
-      }
-    },
-    {
-      title: '位置',
-      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'
-            }
-          ],
-          align: 'center'
-        })
-      }
-    },
-    {
-      title: '备注',
-      key: 'note',
-      align: 'center'
-    },
-    {
-      title: '所属任务',
-      key: 'note',
-      align: 'center'
-    }
-
-  ]
-})
-
-export default data

src/views/question-manage/question-list/components/MapDrawer.vue

@@ -0,0 +1,67 @@
+<template>
+  <n-drawer v-bind="getDrawerOptions" @update:show="handleDrawerColse">
+    <n-drawer-content closable title="轨迹回放">
+      <PositionMsg :data="getPostionOptions" />
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<script>
+import PositionMsg from '@/components/PositionMsg/index.vue'
+import { defineComponent, computed, reactive, toRefs } from 'vue'
+
+export default defineComponent({
+  name: 'LiveDrawer',
+  components: { PositionMsg },
+  props: {
+    /* 可见 */
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    /* 选中的数据 */
+    data: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  emits: {
+    'update:visible': null
+  },
+  setup(props, { emit }) {
+    const data = reactive({
+
+    })
+
+    /* 获取抽屉的信息 */
+    const getDrawerOptions = computed(() => {
+      return {
+        show: props.visible,
+        width: '100%',
+        placement: 'right'
+      }
+    })
+
+    const getPostionOptions = computed(() => {
+      return [props.data]
+    })
+
+    function handleDrawerColse() {
+      emit('update:visible', false)
+    }
+
+    return {
+      ...toRefs(data),
+      getDrawerOptions,
+      getPostionOptions,
+      handleDrawerColse
+    }
+  }
+})
+</script>
+
+<style scoped lang='scss'>
+.n-button+.n-button{
+  margin-left: 30px;
+}
+</style>

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

@@ -12,6 +12,7 @@
     </n-card>
   </div>
 
+  <MapDrawer v-model:visible="mapDrawer" :data="rowData" />
 </template>
 
 <script>
@@ -19,18 +20,18 @@ import table from './tools/table.js'
 import search from './tools/search.js'
 import HeadSearch from '@/components/Search/index.vue'
 import DataTable from '@/components/DataTable/index.vue'
+import MapDrawer from './components/MapDrawer.vue'
 import { reactive, unref, toRefs } from 'vue'
 import { getQuestionList } from '@/api/task/index.js'
 
 export default {
   name: 'QuestionList',
-  components: { HeadSearch, DataTable },
+  components: { HeadSearch, DataTable, MapDrawer },
   setup() {
     const data = reactive({
       search,
       ...toRefs(table)
     })
-
     /**
      * @description: 加载表格数据
      * @param {*} res

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

@@ -12,6 +12,7 @@ function handleSearch(params) {
   searchParams.value = { ...params }
   if (params?.time?.length) {
     searchParams.value = {
+      ...params,
       startTime: params.time[0],
       endTime: params.time[1]
     }
@@ -23,14 +24,14 @@ function handleSearch(params) {
 /* 位置 */
 function handlePositionDrawer(row) {
   data.rowData = row
-  data.positionDrawer = true
+  data.mapDrawer = true
 }
 
 const data = reactive({
   tableRef,
   searchParams,
   rowData: {},
-  positionDrawer: false,
+  mapDrawer: false,
   handleSearch,
 
   columns: [
@@ -69,6 +70,11 @@ const data = reactive({
         })
       }
     },
+    {
+      title: '所属任务',
+      key: 'missionName',
+      align: 'center'
+    },
     {
       title: '经纬度',
       key: 'name',
@@ -105,11 +111,6 @@ const data = reactive({
       title: '备注',
       key: 'note',
       align: 'center'
-    },
-    {
-      title: '所属任务',
-      key: 'note',
-      align: 'center'
     }
 
   ]

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

@@ -8,7 +8,7 @@
 
 <script>
 import BaseMap from './BaseMap.vue'
-import { h, defineComponent, computed, reactive, toRefs } from 'vue'
+import { defineComponent, computed, reactive, toRefs } from 'vue'
 
 export default defineComponent({
   name: 'LiveDrawer',