From 3667807a7b7418efc090ee3fa6a6b734bc3080bf Mon Sep 17 00:00:00 2001
From: xieb <vip_xiaobin810@163.com>
Date: Wed, 13 Sep 2023 20:36:29 +0800
Subject: [PATCH] Merge branch 'develop' of http://s16s652780.51mypc.cn:49896/r/yskj/iot_drone_web into develop
---
src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue | 205 +++++++++++++++++++++++++++++---------------------
1 files changed, 119 insertions(+), 86 deletions(-)
diff --git a/src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue b/src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue
index b710bbd..6154fac 100644
--- a/src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue
+++ b/src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue
@@ -1,58 +1,50 @@
-<!--
- * @Author: 胡思旗 931347610@qq.com
- * @Date: 2023-08-28 15:23:47
- * @LastEditors: husq 931347610@qq.com
- * @LastEditTime: 2023-09-01 17:29:16
- * @FilePath: \Cloud-API-Demo-Web\src\pages\page-web\projects\project_list\list_page\components\ProjectList.vue
- * @Description:项目列表组件
- *
- * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
--->
<template>
- <div class="project-box">
- <div class="project-card" v-for="item in cardList" :key="item.id">
- <div class="project-left">
- <div class="head mb10 flex-display flex-align-center flex-justify-between">
- <div class="head-left flex-display flex-align-center">
- <a-tag color="#87d068">{{ status[item.projectStatus] }}</a-tag>
- <span class="head-text">{{ item.projectName }}</span>
- </div>
- <div class="head-right">
- <a-dropdown>
- <dash-outlined />
- <template #overlay>
- <a-menu>
- <a-menu-item>
- <a @click="goEdit(item)">编辑</a>
- </a-menu-item>
- <a-menu-item>
- <a @click="editStatus(item)">归档</a>
- </a-menu-item>
- <a-menu-item>
- <a @click="deleteItem(item)">删除</a>
- </a-menu-item>
- </a-menu>
- </template>
- </a-dropdown>
- </div>
- </div>
- <div class="wrapper">
- <div class="introduction mb10">{{ item.projectIntro || '暂无简介' }}</div>
- <div class="time mb5">创建时间: {{ item.createTime }}</div>
- <div class="manager mb5 flex-display flex-align-center">
- <user-outlined />
- <!-- {{item.memberList[0].userId}} -->
- <div class="user_name ml10">测试角色</div>
- </div>
- </div>
+ <div class="project-box flex-common">
+ <a-spin :spinning="model" style="width: 100%;">
+ <div class="project-card" :class="{active: index == selectIndex}" v-for="(item, index) in cardList" :key="item.id">
+ <div class="project-left" @click="goCenter(item, index)">
+ <div class="head mb10 flex-display flex-align-center flex-justify-between">
+ <div class="head-left flex-display flex-align-center">
+ <a-tag color="#87d068">{{ status[item.projectStatus] }}</a-tag>
+ <span class="head-text">{{ item.projectName }}</span>
</div>
- <div>
- <div class="enter">
- <export-outlined />
- </div>
+ <div class="head-right">
+ <a-dropdown>
+ <dash-outlined />
+ <template #overlay>
+ <a-menu>
+ <a-menu-item>
+ <a @click="goEdit(item)">编辑</a>
+ </a-menu-item>
+ <a-menu-item>
+ <a @click="editStatus(item)">归档</a>
+ </a-menu-item>
+ <a-menu-item>
+ <a @click="deleteItem(item)">删除</a>
+ </a-menu-item>
+ </a-menu>
+ </template>
+ </a-dropdown>
</div>
+ </div>
+ <div class="wrapper">
+ <div class="introduction mb10">{{ item.projectIntro || '暂无简介' }}</div>
+ <div class="time mb5">创建时间: {{ item.createTime }}</div>
+ <div class="manager mb5 flex-display flex-align-center">
+ <user-outlined />
+ <!-- {{item.memberList[0].userId}} -->
+ <div class="user_name ml10">测试角色</div>
+ </div>
+ </div>
</div>
- </div>
+ <div>
+ <div class="enter" @click="goDetail(item)">
+ <export-outlined />
+ </div>
+ </div>
+ </div>
+ </a-spin>
+ </div>
</template>
<script setup lang="ts">
@@ -62,17 +54,32 @@
import { status, projectCard } from './data'
import { del, edit } from '/@/api/project-page'
import { Modal, message } from 'ant-design-vue'
+import { useMyStore } from '/@/store'
+import { flyTo, isEntityExist } from '/@/hooks/use-center-point'
+const { appContext } = getCurrentInstance()
+const global = appContext.config.globalProperties
+const store = useMyStore()
const router = useRouter()
-const emit = defineEmits(['refreshList'])
+const emit = defineEmits(['refreshList', 'update:modelValue'])
const props = defineProps({
cardList: {
type: Array as () => projectCard[],
required: true,
},
+ modelValue: [String, Number, Boolean]
})
-
+const model = computed({
+ get () {
+ return props.modelValue
+ },
+ set (val) {
+ emit('update:modelValue', val)
+ }
+})
+const spinning = ref<boolean>(true)
+const selectIndex = ref(-1)
// 删除方法
-const deleteItem = (item:projectCard) => {
+const deleteItem = (item: projectCard) => {
Modal.confirm({
title: () => '确认删除?',
icon: () => createVNode(ExclamationCircleOutlined),
@@ -91,7 +98,7 @@
})
}
-const editStatus = (item:projectCard) => {
+const editStatus = (item: projectCard) => {
Modal.confirm({
title: () => '确认归档?',
icon: () => createVNode(ExclamationCircleOutlined),
@@ -111,50 +118,76 @@
})
}
-const goEdit = (item:any) => {
- console.log(item)
+const goEdit = (item: any) => {
router.push({
name: ERouterName.EDIT_PROJECT,
query: { id: item.id }
})
+ store.commit('SET_POINT_LIST', [])
}
+const goDetail = (item: any) => {
+ console.log(item, 'item')
+ store.commit('SET_PROJECT_ID', item.id)
+ store.commit('SET_POINT_LIST', [])
+ router.push({
+ name: ERouterName.WORKSPACE,
+ query: { id: item.id },
+ })
+}
+const goCenter = (item:any, index:number) => {
+ selectIndex.value === index ? selectIndex.value = -1 : selectIndex.value = index
+ flyTo(global.$viewer, item.longitude, item.latitude)
+ const flag = isEntityExist(global.$viewer, item.longitude, item.latitude)
+ console.log(flag, 'fffff')
+}
</script>
<style scoped lang="scss">
.project-box {
- .project-card {
- cursor: pointer;
- width: 100%;
- min-height: 120px;
- background: #232323;
- user-select: none;
- border-bottom: 1px solid #4f4f4f;
- display: flex;
- }
+ width: 100%;
+ height: 100%;
- .project-left {
- padding: 16px;
- flex: 1;
- width: calc(100% - 48px);
- box-sizing: border-box;
+ :deep(.ant-spin-nested-loading) {
+ width: 100%;
+ height: 100%;
+ }
- .head {
- .head-left {
- font-size: 16px;
- }
- }
- }
+ .project-card {
+ cursor: pointer;
+ width: 100%;
+ min-height: 120px;
+ background: #232323;
+ user-select: none;
+ border-bottom: 1px solid #4f4f4f;
+ display: flex;
+ }
+ .active {
+ cursor: pointer;
+ background-color: #101010;
+ }
+ .project-left {
+ padding: 16px;
+ flex: 1;
+ width: calc(100% - 48px);
+ box-sizing: border-box;
- .enter {
- background: #303030;
- width: 48px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: #fff;
- height: 100%;
- cursor: pointer;
+ .head {
+ .head-left {
+ font-size: 16px;
+ }
}
+ }
+
+ .enter {
+ background: #303030;
+ width: 48px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ height: 100%;
+ cursor: pointer;
+ }
}
</style>
--
Gitblit v1.9.3