Merge branch 'develop' of http://s16s652780.51mypc.cn:49896/r/yskj/iot_dron...

xieb

2023-09-13 3667807a7b7418efc090ee3fa6a6b734bc3080bf

 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>