房间添加任务管理

src/views/simulationScene/instructor/system/sceneEditing/index.vue

@@ -156,12 +156,14 @@
           <a-radio-group v-model="modelInfoType" button-style="solid">
             <a-radio-button value="jcsx">基础属性</a-radio-button>
             <a-radio-button value="zzxd">作战行动</a-radio-button>
+            <a-radio-button value="bzrw">保障任务</a-radio-button>
           </a-radio-group>
         </template>
         <div class="normal" style="padding: 15px 0">
           <div style="height: 100%; padding: 0 15px; overflow-y: auto">
             <Jcsx v-if="modelInfoType === 'jcsx'" :scenarioId="scenarioId" :modelData="jcsx.data" />
             <Zzxd v-if="modelInfoType === 'zzxd'" :actionList="zzxd.data" />
+            <BzTask v-if="modelInfoType === 'bzrw'" :scenarioId="scenarioId" :resourceid="resourceid" :type="type" />
           </div>
         </div>
       </ModuleWrapper>
@@ -173,14 +175,18 @@
 import { getAction, postAction } from '@/api/manage'
 import Jcsx from '../simulationModel/Jcsx.vue'
 import Zzxd from '../simulationModel/Zzxd.vue'
+import BzTask from '../simulationModel/BzTask.vue'
 
 export default {
   components: {
     Jcsx,
     Zzxd,
+    BzTask
   },
   data() {
     return {
+      resourceid: null,  // 分队id
+      type: null, // 红蓝类型
       scenarioId: '',
       scenarioDetail: {},
       zzbzll: {
@@ -443,6 +449,8 @@ export default {
     handleSelectZzbzll(selectedKeys, { node }) {
       this.cesium.setClientByCenter({ longitude: +node.dataRef.lng, latitude: +node.dataRef.lat })
       this.blbz.modelData = node.dataRef
+      this.resourceid = node.dataRef.id
+      this.type = node.dataRef.type
       this.getBlbzTreeData()
       this.getJcsxData()
     },

src/views/simulationScene/instructor/system/simulationModel/BzTask.vue

@@ -0,0 +1,233 @@
+<template>
+  <Flex fd="co" class="zzxd-wrapper">
+    <Flex class="zzxd-header" ai="c" jc="sb">
+      <div class="zzxd-title">保障任务</div>
+      <div>
+        <a-button type="text-primary" icon="menu"></a-button>
+        <a-button type="text-primary" icon="plus" @click="handleOpenAddActionModal"></a-button>
+        <a-button type="text-primary" icon="edit" @click="handleOpenEditActionModal"></a-button>
+        <a-button type="text-primary" icon="delete" @click="handleDeleteAction"></a-button>
+      </div>
+      <a-modal 
+        v-model="actionModal.visible" 
+        :title="actionModal.title" :maskClosable="false" :destroyOnClose="true"
+        @ok="handleSubmilAction">
+        <a-form-model 
+          :model="actionModal.formData" 
+          layout="horizontal" :labelCol="{ span: 6 }"
+          :wrapperCol="{ span: 15 }">
+          <a-form-model-item v-for="item in actionModal.formItems" :key="item.prop" v-bind="item">
+            <component 
+              :is="item.component || 'a-input'" 
+              v-model="actionModal.formData[item.prop]"
+              v-bind="item.options" />
+          </a-form-model-item>
+        </a-form-model>
+      </a-modal>
+    </Flex>
+    <div class="flex-1 scroller-y">
+      <div v-for="item in actionList" :key="item.id" class="action-item flex" @click="checkedAction = item">
+        <div class="action-icon">
+          <div class="action-line"></div>
+          <a-radio :checked="checkedAction && checkedAction.id === item.id" style="margin-right: 0"></a-radio>
+        </div>
+        <div class="flex-1">
+          <div class="action-title">{{ item.name || '- -' }}</div>
+          <div class="action-time">任务类型：{{ handleGetTaskType(item.taskType) }}</div>
+          <div class="action-time">开始时间：{{ item.startTime }}</div>
+          <div class="action-time">结束时间：{{ item.endTime }}</div> 
+        </div>
+      </div>
+    </div>
+  </Flex>
+</template>
+
+<script>
+export default {
+  props: {
+    scenarioId: { type: String, required: true },
+    resourceid: { type: String, required: true },
+    type: { type: Number, required: true },
+  },
+  data() {
+    return {
+      checkedAction: null,
+      actionModal: {
+        visible: false,
+        formItems: [
+          { label: '任务名称', prop: 'name' },
+          {
+            label: '任务类型',
+            prop: 'taskType',
+            component: 'AntOriginSelect',
+            options: {
+              dataSource: () => ({
+                data: [
+                  { id: '1', title: '机动任务' },
+                  { id: '2', title: '战斗任务' },
+                  { id: '3', title: '整备任务' },
+                  { id: '4', title: '弹药保障' },
+                  { id: '5', title: '水保障' },
+                  { id: '6', title: '油保障' },
+                  { id: '7', title: '食品保障' }
+                ],
+              }),
+            },
+          },
+          {
+            label: '开始时间', prop: 'startTime', component: 'a-date-picker', options: {
+              showTime: true,
+              format: 'YYYY-MM-DD HH:mm:ss',
+              valueFormat: 'YYYY-MM-DD HH:mm:ss'
+            }
+          },
+          {
+            label: '结束时间', prop: 'endTime', component: 'a-date-picker', options: {
+              showTime: true,
+              format: 'YYYY-MM-DD HH:mm:ss',
+              valueFormat: 'YYYY-MM-DD HH:mm:ss'
+            }
+          },
+          { label: '开始经度', prop: 'fromLng' },
+          { label: '开始纬度', prop: 'fromLat' },
+          { label: '目标经度', prop: 'toLng' },
+          { label: '目标纬度', prop: 'toLat' },
+        ],
+        formData: {},
+      },
+      actionList: []
+    }
+  },
+  created() {
+    if (this.scenarioId && this.resourceid) {
+      this.handleGetTaskList()
+    }
+  },
+  watch: {
+    resourceid: {
+      handler(newValue, oldValue) { 
+        this.handleGetTaskList()
+      },
+      deep: true // 重要：开启深层监听
+    }
+  },
+  methods: {
+    handleGetTaskType(type) {
+      switch (type) {
+        case '1':
+          return '机动任务'
+        case '2':
+          return '战斗任务'
+        case '3':
+          return '整备任务'
+        case '4':
+          return '弹药保障'
+        case '5':
+          return '水保障'
+        case '6':
+          return '油保障'
+        case '7':
+          return '食品保障'
+        default:
+          return '- -'
+      }
+    },
+    handleGetTaskList() {
+      this.$http({
+        url: '/scenarioTask/taskList',
+        method: 'post',
+        data: { scenarioId: parseInt(this.scenarioId), resourceId: this.resourceid },
+      }).then(res => {
+        this.actionList = res.data
+      })
+    },
+    handleOpenAddActionModal() {
+      this.actionModal.title = '添加任务'
+      this.actionModal.formData = {
+        type: this.type,
+        scenarioId: parseInt(this.scenarioId),
+        resourceId: this.resourceid
+      }
+      this.actionModal.visible = true
+    },
+    handleOpenEditActionModal() {
+      this.actionModal.title = '修改任务'
+      this.actionModal.formData = { ...this.checkedAction }
+      this.actionModal.visible = true
+    },
+    async handleSubmilAction() {
+      try {
+        await this.$http({
+          url: '/scenarioTask/save',
+          method: 'post',
+          data: this.actionModal.formData,
+        })
+        this.$message.success(`${this.actionModal.title}成功`)
+        this.actionModal.visible = false
+        this.handleGetTaskList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    async handleDeleteAction() {
+      try {
+        await this.$confirm('确认删除所选任务吗？')
+        await this.$http({
+          url: '/scenarioTask/remove/' + this.checkedAction.id,
+          method: 'get'
+        })
+        this.$message.success(`删除任务成功`)
+        this.handleGetTaskList()
+      } catch (error) {
+        this.$message.success(`删除任务失败`)
+        console.log(error)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.zzxd-wrapper {
+  height: 100%;
+
+  .zzxd-header {
+    padding: 5px 0;
+    border-bottom: 1px solid #00baff22;
+
+    .zzxd-title {
+      color: #00baff;
+    }
+  }
+}
+
+.action-item {
+  cursor: pointer;
+  padding: 5px 0;
+
+  .action-icon {
+    padding: 5px 16px;
+    position: relative;
+    flex-shrink: 0;
+
+    .action-line {
+      position: absolute;
+      right: 50%;
+      top: 21px;
+      width: 1px;
+      height: 100%;
+      background-color: #00baff;
+    }
+  }
+}
+
+.action-item:last-of-type {
+  .action-line {
+    display: none;
+  }
+}
+
+.action-item:hover {
+  background-color: #bae7ff44;
+}
+</style>

src/views/simulationScene/instructor/system/simulationModel/index.vue

@@ -136,12 +136,14 @@
           <a-radio-group v-model="modelInfoType" button-style="solid">
             <a-radio-button value="jcsx">基础属性</a-radio-button>
             <a-radio-button value="zzxd">作战行动</a-radio-button>
+            <a-radio-button value="bzrw">保障任务</a-radio-button>
           </a-radio-group>
         </template>
         <div class="normal" style="padding: 15px 0">
           <div style="height: 100%; padding: 0 15px; overflow-y: auto">
             <Jcsx v-if="modelInfoType === 'jcsx'" :scenarioId="scenarioId" :modelData="jcsx.data" />
             <Zzxd v-if="modelInfoType === 'zzxd'" :actionList="zzxd.data" />
+            <BzTask v-if="modelInfoType === 'bzrw'" :scenarioId="scenarioId" :resourceid="resourceid" :type="type" />
           </div>
         </div>
       </ModuleWrapper>
@@ -153,6 +155,7 @@
 import { getAction, postAction } from '@/api/manage'
 import Jcsx from './Jcsx.vue'
 import Zzxd from './Zzxd.vue'
+import BzTask from './BzTask.vue'
 
 export default {
   // props: {
@@ -161,9 +164,12 @@ export default {
   components: {
     Jcsx,
     Zzxd,
+    BzTask
   },
   data() {
-    return {
+    return { 
+      resourceid: null,  // 分队id
+      type: null, // 红蓝类型
       scenarioId: '',
       qd: {
         qdlx: 'xqqd',
@@ -446,7 +452,9 @@ export default {
 
     handleSelectZzbzll(selectedKeys, { node }) {
       this.cesium.setClientByCenter({ longitude: +node.dataRef.lng, latitude: +node.dataRef.lat })
-      this.blbz.modelData = node.dataRef
+      this.blbz.modelData = node.dataRef 
+      this.resourceid = node.dataRef.id
+      this.type = node.dataRef.type
       this.getBlbzTreeData()
       this.getJcsxData()
     },