<template>
|
<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 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 class="enter" @click="goDetail(item)">
|
<export-outlined />
|
</div>
|
</div>
|
</div>
|
</a-spin>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { DashOutlined, UserOutlined, ExportOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
import { defineEmits, defineProps, createVNode } from 'vue'
|
import { ERouterName } from '/@/types/index'
|
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', '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) => {
|
Modal.confirm({
|
title: () => '确认删除?',
|
icon: () => createVNode(ExclamationCircleOutlined),
|
content: () => '删除后项目内容将不可恢复，您确定要删除该项目吗？',
|
okText: () => '确定',
|
okType: 'danger',
|
cancelText: () => '取消',
|
onOk () {
|
del(item.id).then(res => {
|
if (res.code === 5000) {
|
message.success('删除成功')
|
emit('refreshList')
|
}
|
})
|
},
|
})
|
}
|
|
const editStatus = (item: projectCard) => {
|
Modal.confirm({
|
title: () => '确认归档?',
|
icon: () => createVNode(ExclamationCircleOutlined),
|
content: () => '项目完成后可归档，归档后 Pilot 将无法加入该项目，您确定要归档该项目吗？',
|
okText: () => '确定',
|
okType: 'danger',
|
cancelText: () => '取消',
|
onOk () {
|
const obj = { id: item.id, projectStatus: 2 }
|
edit(obj).then(res => {
|
if (res.code === 5000) {
|
message.success('归档成功')
|
emit('refreshList')
|
}
|
})
|
},
|
})
|
}
|
|
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 {
|
width: 100%;
|
height: 100%;
|
|
:deep(.ant-spin-nested-loading) {
|
width: 100%;
|
height: 100%;
|
}
|
|
.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;
|
|
.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>
|
