项目首页-项目列表-项目编辑

src/api/demo/projecthome.ts

@@ -1,7 +1,10 @@
 import { defHttp } from '@/utils/http/axios';
 enum Api {
   GetUavList = '/api/Manage/GetUavList',
-  AddWorkspace = '/api/Manage/AddWorkspace'
+  AddWorkspace = '/api/Manage/AddWorkspace',
+  GetWorkspaceList = '/api/Manage/GetWorkspaceList',
+  GetWorkSpaceById = '/api/Manage/GetWorkSpaceById',
+  EditWorkspace = '/api/Manage/EditWorkspace',
 }
 
 export function GetUavList(params?) {
@@ -15,4 +18,22 @@ export function AddWorkspace(params) {
     url: Api.AddWorkspace,
     params
   });
+}
+export function EditWorkspace(params) {
+  return defHttp.post({
+    url: Api.EditWorkspace,
+    params
+  });
+}
+export function GetWorkspaceList(params?) {
+  return defHttp.get({
+    url: Api.GetWorkspaceList,
+    params
+  });
+}
+export function GetWorkSpaceById(params: { id: string }) {
+  return defHttp.get({
+    url: Api.GetWorkSpaceById,
+    params
+  });
 }

src/views/demo/workmanagement/projecthome/ProjectList/AddProject/index.vue

@@ -189,7 +189,7 @@
 import { ref, defineProps, defineEmits, onMounted, watch } from "vue"
 import { CaretDownOutlined } from '@ant-design/icons-vue'
 import { getAccountList } from '@/api/demo/system';
-import { AddWorkspace } from '@/api/demo/projecthome'
+import { AddWorkspace, EditWorkspace } from '@/api/demo/projecthome'
 import RequestCode from './RequestCode/index.vue'
 import Weather from './Weather/index.vue'
 import Record from './Record/index.vue'
@@ -202,9 +202,10 @@ import * as mars3d from "mars3d";
 import * as Cesium from "mars3d-cesium"
 import cloneDeep from 'lodash/cloneDeep'
 import { message } from "ant-design-vue";
+import dayjs from "dayjs";
 
-const props = defineProps(['addModal', 'modalType','map'])
-const emits = defineEmits(['update:addModal'])
+const props = defineProps(['addModal', 'modalType','map', 'updateProject'])
+const emits = defineEmits(['update:addModal', 'getProjectList'])
 
 let graphicLayer
 watch(() => props.map, (val) => {
@@ -229,6 +230,18 @@ watch(() => props.addModal, (newValue) => {
       let user = userList.value.find(item => item.id == userId)
       project.value.userIds.push(user)
     }
+  }else if(newValue && props.modalType == 'update'){
+    let userId = props.updateProject.users.map(item => item.id)
+    let userlist = userList.value.filter(item => userId.includes(item.id))
+    let deviceId = props.updateProject.lasaDronePort.map(item => item.id)
+    let deviceArray = deviceList.value.filter(item => deviceId.includes(item.id))
+    project.value = {
+      ...props.updateProject.workspace,
+      requestCodeCutOffTime: props.updateProject.workspace.requestCodeCutOffTime? dayjs(props.updateProject.workspace.requestCodeCutOffTime): '',
+      userIds: userlist,
+      lockfly: props.updateProject.lasaSpaceLockFlies,
+      deviceIds: deviceArray
+    }
   }
 })
 
@@ -427,12 +440,21 @@ const saveProject = () => {
     deviceIds: project.value.deviceIds.map(item => item.id),
     lockfly: project.value.lockfly
   }
-  AddWorkspace(result).then(res => {
-    console.log(res)
-    message.success('项目添加成功')
-    childSetting.value.open = false
-    emits('update:addModal',false)
-  })
+  if(props.modalType == 'insert'){
+    AddWorkspace(result).then(res => {
+      message.success('项目添加成功')
+      childSetting.value.open = false
+      emits('update:addModal',false)
+      emits('getProjectList')
+    })
+  }else if(props.modalType == 'update'){
+    EditWorkspace(result).then(res => {
+      message.success('项目编辑成功')
+      childSetting.value.open = false
+      emits('update:addModal',false)
+      emits('getProjectList')
+    })
+  }
 }
 </script>
 

src/views/demo/workmanagement/projecthome/ProjectList/index.vue

@@ -9,46 +9,67 @@
     </div>
     <div class="interval"></div>
     <div class="list">
-      <div>
-        <div class="project-list-item">
-          <div class="list-item-icon"></div>
-          <div class="list-item-content">临沂市兰山区某某某项目部</div>
-          <div class="active-icon"></div>
-        </div>
-        <div class="item-bottom-interval"></div>
-      </div>
-      <div>
-        <div class="project-list-item active">
-          <div class="list-item-icon"></div>
-          <div class="list-item-content">临沂市兰山区某某某项目部</div>
-          <div class="active-icon"></div>
-        </div>
-        <div class="item-bottom-interval"></div>
-      </div>
-      <div>
-        <div class="project-list-item">
-          <div class="list-item-icon"></div>
-          <div class="list-item-content">临沂市兰山区某某某项目部</div>
-          <div class="active-icon"></div>
+      <div v-for="item in projectList">
+        <div :class="`project-list-item ${activeProject == item.Id? 'active': ''}`" @click="selectProject(item)">
+          <div style="display: flex;align-items: center;">
+            <div class="list-item-icon"></div>
+            <div class="list-item-content">{{ item.WorkspaceName }}</div>
+            <div class="active-icon"></div>
+          </div>
+          <div class="button-div">
+            <div class="edit-button" @click="editProject(item)"></div>
+            <div class="button-interval"></div>
+            <div class="del-button" @click="delProject(item)"></div>
+          </div>
         </div>
         <div class="item-bottom-interval"></div>
       </div>
     </div>
     <!-- 添加项目组件 -->
-    <AddProject v-model:addModal="addModal" :modalType="modalType" :map="props.map"/>
+    <AddProject v-model:addModal="addModal" :modalType="modalType" :map="props.map" :updateProject="updateProject" @getProjectList="getProjectList"/>
   </div>
 </template>
 
 <script setup lang="ts">
 import AddProject from './AddProject/index.vue'
-import { ref, defineProps } from "vue"
+import { ref, defineProps, onMounted } from "vue"
+import { GetWorkspaceList, GetWorkSpaceById } from '@/api/demo/projecthome'
+
+onMounted(() => {
+  getProjectList()
+})
 
 const props = defineProps(['map'])
 const addModal = ref(false)
 const modalType = ref('')
+const projectList = ref([])
+const activeProject = ref('')
+const updateProject = ref({})
 const addProject = () => {
   modalType.value = 'insert'
   addModal.value = true
+}
+const selectProject = (item) => {
+  activeProject.value = item.Id
+}
+const getProjectList = () => {
+  GetWorkspaceList().then(res => {
+    projectList.value = res
+  })
+}
+const editProject = (item) => {
+  let params = {
+    id: item.Id
+  }
+  modalType.value = 'update'
+  GetWorkSpaceById(params).then(res => {
+    console.log('res',res)
+    updateProject.value = res
+    addModal.value = true
+  })
+}
+const delProject = (item) => {
+
 }
 </script>
 
@@ -106,13 +127,16 @@ const addProject = () => {
     opacity: 0.2;
   }
   .list{
+    user-select: none;
     .project-list-item{
       position: relative;
       padding-left: 25px;
+      padding-right: 22px;
       width: 100%;
       height: 35px;
       display: flex;
       align-items: center;
+      justify-content: space-between;
       opacity: 0.7;
       .list-item-icon{
         width: 6px;
@@ -129,6 +153,32 @@ const addProject = () => {
         line-height: 33px;
         text-shadow: 0px 10px 30px rgba(0,0,6,0.15);
       }
+      .button-div{
+        display: flex;
+        align-items: center;
+        .edit-button{
+          width: 13px;
+          height: 13px;
+          background-image: url('/public/projecthome/active_project_edit.png');
+          background-size: 100% 100%;
+          cursor: pointer;
+        }
+        .button-interval{
+          width: 1px;
+          height: 13px;
+          background: #FFFFFF;
+          box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
+          opacity: 0.48;
+          margin: 0px 9px;
+        }
+        .del-button{
+          width: 13px;
+          height: 13px;
+          background-image: url('/public/projecthome/active_project_del.png');
+          background-size: 100% 100%;
+          cursor: pointer;
+        }
+      }
     }
     .active{
       background: linear-gradient( 270deg, rgba(108,144,245,0) 0%, #3A57E8 100%);