2024.7.11

riku

2024-07-11 505798927f75c84693cc51becf16aa525503fc92

 src/views/visualization/SubtaskVisual.vue

@@ -1,8 +1,26 @@
<template>
  <el-scrollbar :height="mapHeight">
  <el-scrollbar v-if="mapStore.focusMarker" :height="mapHeight">
    <el-card class="p-events-auto wrapper">
      <div>{{ subtask.name }}</div>
      <el-timeline style="max-width: 600px">
      <div class="font-small">{{ scene.name }}</div>
      <el-divider></el-divider>
      <div class="font-small">状态：{{ subtask.status }}</div>
      <div class="font-small">计划：{{ $fm.formatYMD(subtask.planstarttime) }}</div>
      <div v-if="subtask.status != '未执行'" class="font-small">
        <span>执行：{{ $fm.formatH(subtask.executionstarttime) }}</span>
        <span> - </span>
        <span>{{ $fm.formatH(subtask.executionendtime) }}</span>
      </div>
      <div class="font-small">问题：</div>
      <problem-item
        v-for="(item, i) in problemList"
        :key="item.guid"
        :index="i + 1"
        :problem="item"
      ></problem-item>
      <!-- <div v-for="item in problemList" :key="item.guid">
        {{ item.problemname }}
      </div> -->
      <!-- <el-timeline style="max-width: 600px">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
@@ -14,13 +32,18 @@
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
      </el-timeline> -->
    </el-card>
  </el-scrollbar>
</template>

<script>
import { inject } from 'vue'
import { useMapStore } from '@/stores/map.js'
import { mapStores } from 'pinia'

import problemApi from '@/api/fysp/problemApi.js'

/**
 * 具体巡查任务可视化
 * 包括地图定位信息展示、巡查任务全流程平铺展示
@@ -33,53 +56,80 @@
    return { height, mapHeight }
  },
  props: {
    subtask: {
      type: Object,
      default: () => {
        return {
          guid: 'SMuheEkjswioSn7A',
          name: '中科生态数字港项目巡查中科生态数字港项目巡查',
          district: '金山区',
          planTime: '2024-06-04',
          startTime: '2024-06-04 13:31:26',
          endTime: '2024-06-04 13:33:37',
          userName: '朱正强',
          status: '已结束',
          total: 4,
          checked: 2
        }
      }
    }
    // subtask: {
    //   type: Object,
    //   default: () => {
    //     return {
    //       guid: 'SMuheEkjswioSn7A',
    //       name: '中科生态数字港项目巡查中科生态数字港项目巡查',
    //       district: '金山区',
    //       planTime: '2024-06-04',
    //       startTime: '2024-06-04 13:31:26',
    //       endTime: '2024-06-04 13:33:37',
    //       userName: '朱正强',
    //       status: '已结束',
    //       total: 4,
    //       checked: 2
    //     }
    //   }
    // }
  },
  data() {
    return {
      activities: [
        {
          content: '任务创建',
          timestamp: '2024-06-04 08:00',
          running: false
        },
        {
          content: '开始巡查',
          timestamp: '2024-06-04 09:00',
          running: false
        },
        {
          content: '结束巡查',
          timestamp: '2024-06-04 09:15',
          running: false
        },
        {
          content: '完成问题审核',
          timestamp: '2024-06-04 10:15',
          running: false
        },
        {
          content: '问题整改中...',
          timestamp: '2024-06-04 10:15',
          running: true
        }
      ]
      // activities: [
      //   {
      //     content: '任务创建',
      //     timestamp: '2024-06-04 08:00',
      //     running: false
      //   },
      //   {
      //     content: '开始巡查',
      //     timestamp: '2024-06-04 09:00',
      //     running: false
      //   },
      //   {
      //     content: '结束巡查',
      //     timestamp: '2024-06-04 09:15',
      //     running: false
      //   },
      //   {
      //     content: '完成问题审核',
      //     timestamp: '2024-06-04 10:15',
      //     running: false
      //   },
      //   {
      //     content: '问题整改中...',
      //     timestamp: '2024-06-04 10:15',
      //     running: true
      //   }
      // ]
      problemList: []
    }
  },
  computed: {
    ...mapStores(useMapStore),
    subtask() {
      return this.mapStore.focusMarker ? this.mapStore.focusMarker.subtask : {}
    },
    scene() {
      return this.mapStore.focusMarker ? this.mapStore.focusMarker.scene : {}
    },
    inspection() {
      return this.mapStore.focusMarker ? this.mapStore.focusMarker.inspection : {}
    }
  },
  watch: {
    subtask(nV, oV) {
      if (nV != oV) {
        this.fetchProblem(nV.stguid)
      }
    }
  },
  methods: {
    fetchProblem(stguid) {
      problemApi.fetchProblems(stguid).then((res) => {
        this.problemList = res
      })
    }
  }
}
@@ -92,4 +142,8 @@
  right: 0;
  /* background-color: wheat; */
}

.el-card {
  --el-card-padding: 8px;
}
</style>