husq
2023-09-27 2c2bc8614c8ea0ce386369eb4924da1e6aa052d1
src/pages/page-web/projects/project_list/add_page/add.vue
@@ -1,19 +1,9 @@
<!--
 * @Author: husq 931347610@qq.com
 * @Date: 2023-08-30 14:43:37
 * @LastEditors: husq 931347610@qq.com
 * @LastEditTime: 2023-09-04 09:35:15
 * @FilePath: \Cloud-API-Demo-Web\src\pages\page-web\projects\project_list\add_page\add.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
    <div class="project_add">
        <div class="side-header">
            <div class="side-option flex-display flex-align-center">
                <left-outlined class="point" @click="goBack" :style="{ fontSize: '18px', marginRight: '8px' }" />
                <h2 class="title point" @click="goBack">{{route.query.id ? '编辑项目' : '创建项目'}}</h2>
                <h2 class="title point" @click="goBack">{{ route.query.id ? '编辑项目' : '创建项目' }}</h2>
            </div>
            <div class="border-bottom"></div>
        </div>
@@ -22,11 +12,17 @@
                <a-form-item label="项目名称" :name="FormProject.PROJECT_NAME">
                    <a-input v-model:value="formState[FormProject.PROJECT_NAME]" placeholder="项目名称" />
                </a-form-item>
                <a-form-item label="平台名称" :name="FormProject.PLATFORMNAME">
                    <a-input v-model:value="formState[FormProject.PLATFORMNAME]" placeholder="平台名称" />
                </a-form-item>
                <a-form-item label="绑定编码" :name="FormProject.BINDCODE">
                    <a-input v-model:value="formState[FormProject.BINDCODE]" placeholder="绑定编码" />
                </a-form-item>
                <a-form-item label="项目简介" :name="FormProject.PROJCECT_INTRO">
                    <a-textarea :auto-size="{ minRows: 4, maxRows: 8 }" type="textarea"
                        v-model:value="formState[FormProject.PROJCECT_INTRO]" placeholder="项目简介" />
                </a-form-item>
                <a-form-item>
                <!-- <a-form-item>
                    <div class="application flex-display flex-align-center flex-justify-between">
                        <p>申请码加入项目</p>
                        <div class="btn dis_opticy">
@@ -43,7 +39,8 @@
                        <p>天气阻飞设置</p>
                        <div class="btn">
                            <a-button type="text" @click="openDrawer('weatherDrawer')">
                                <span class="button_name">{{ formState.projectBlocking.cloudBlockingConfigEnable == 1 ?
                                <span class="button_name">{{ formState.projectBlocking &&
                                    formState.projectBlocking.cloudBlockingConfigEnable == '1' ?
                                    '已开启'
                                    : '未开启' }}</span>
                                <template #icon><right-outlined
@@ -142,11 +139,11 @@
                        </template>
                    </a-table>
                </a-form-item>
                <a-form-item>
                <a-form-item :name="FormProject.LATITUDE">
                    <div class="application flex-display flex-align-center flex-justify-between">
                        <p>项目作业中心点</p>
                        <div>
                            <a-button type="text">
                            <a-button type="text" @click="configCenter">
                                <span class="button_add">设置项目中心点</span>
                                <template #icon>
                                    <AimOutlined :style="{ fontSize: '14px', color: '#2d8cf0' }" />
@@ -154,19 +151,20 @@
                            </a-button>
                        </div>
                    </div>
                    <div class="latitude">经纬度:35.6761919°N 139.65031.6°E</div>
                </a-form-item>
                    <div class="latitude" v-if="latitude && latitude != 0">
                        经纬度:{{ latitude }}°N {{ longitude }}°E</div>
                </a-form-item> -->
            </a-form>
            <WeatherDrawer v-model:show="drawerConfig.weatherDrawer" title="以下设置仅在当前项目中生效">
            <!-- <WeatherDrawer v-model:show="drawerConfig.weatherDrawer" title="以下设置仅在当前项目中生效">
                <ComWeather v-model="formState" />
            </WeatherDrawer>
            <WeatherDrawer v-model:show="drawerConfig.userDrawer" title="添加成员">
                <ComUser v-model="formState" />
            </WeatherDrawer>
            </WeatherDrawer> -->
        </div>
        <div class="fix-button">
            <a-button @click="submit" style="width: 100%;height: 36px;justify-content: center;"
                class="flex-display flex-align-center" type="primary">{{route.query.id ? '编辑项目' : '创建项目'}}</a-button>
                class="flex-display flex-align-center" type="primary">{{ route.query.id ? '编辑项目' : '创建项目' }}</a-button>
        </div>
    </div>
</template>
@@ -179,29 +177,33 @@
import ComWeather from './components/WeatherDrawer.vue'
import ComUser from './components/UserDrawer.vue'
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface'
import { message } from 'ant-design-vue'
import { Form, message } from 'ant-design-vue'
import { cloneDeep } from 'lodash'
import { add, detail, edit as projectEdit } from '/@/api/project-page/index'
import { getPlatformInfo, editPlatformInfo, addPlatformInfo } from '/@/api/manage'
import { addPoint } from '/@/hooks/use-center-point'
import { useMyStore } from '/@/store/index'
const { appContext } = getCurrentInstance()
const global = appContext.config.globalProperties
const router = useRouter()
const store = useMyStore()
const route = useRoute()
const dataSource = ref([])
const deviceSource = ref([])
const editableData: UnwrapRef<Record<string, ProjectUser>> = reactive({})
const editDeviceData: UnwrapRef<Record<string, ProjectDevice>> = reactive({})
const longitude = computed(() => {
  return store.state.map.centerConfig.longitude
})
const latitude = computed(() => {
  return store.state.map.centerConfig.latitude
})
const formState = ref<FormState>({
  [FormProject.PROJECT_NAME]: '',
  [FormProject.PROJECT_STATUS]: '',
  //   [FormProject.PROJECT_STATUS]: '',
  [FormProject.BINDCODE]: '',
  [FormProject.PROJCECT_INTRO]: '',
  [FormProject.LONGITUDE]: 0,
  [FormProject.LATITUDE]: 0,
  [FormProject.USERLIST]: [],
  [FormProject.PROJECT_BLOCKING]: {
    [blocking.CLOUDBLOCKINGCONFIGENABLE]: '1',
    [blocking.WEATHERREPORTENABLE]: '1',
    [blocking.WINDSPEED]: 12,
    [blocking.WINDSPEEDREPORT]: 15,
    [blocking.RAIN]: 3
  }
  [FormProject.PLATFORMNAME]: '',
})
const drawerConfig = ref({
  userDrawer: false,
@@ -238,32 +240,39 @@
// 获取项目详情
const getDetail = async () => {
  if (!route.query.id) return
  const id = route.query.id
  const res = await detail(id)
  if (res.code !== 5000) return
  const res = await getPlatformInfo()
  console.log(res, '项目详情')
  if (res.code !== 0) return
  formState.value = res.data
//   addPoint(global.$viewer, res.data.id, res.data.latitude, res.data.latitude)
//   store.commit('SET_CENTER_CONFIG_LATITUDE', { latitude: formState.value.latitude, longitude: formState.value.longitude })
}
// 编辑项目
const editProject = async () => {
  const res = await projectEdit(formState.value)
  if (res.code !== 5000) return
  const res = await editPlatformInfo(formState.value)
  if (res.code !== 0) return
  message.success('修改成功')
  router.go(-1)
//   store.commit('SET_CENTER_CONFIG_TYPE', false)
//   store.commit('SET_CENTER_CONFIG_LATITUDE', { latitude: null, longitude: null })
}
// 新增项目
const addProject = async () => {
  const res = await add(formState.value)
  if (res.code !== 5000) return
  const res = await addPlatformInfo(formState.value)
  if (res.code !== 0) return
  message.success('保存成功')
  router.go(-1)
//   store.commit('SET_CENTER_CONFIG_TYPE', false)
//   store.commit('SET_CENTER_CONFIG_LATITUDE', { latitude: null, longitude: null })
}
const goBack = () => {
  router.go(-1)
//   store.commit('SET_CENTER_CONFIG_TYPE', false)
//   store.commit('SET_CENTER_CONFIG_LATITUDE', { latitude: null, longitude: null })
}
// 天气组飞侧边栏
const openDrawer = (name: string) => {
  for (const key in drawerConfig.value) {
    console.log(key)
    if (key === name) {
      drawerConfig.value[key] = true
    } else {
@@ -282,6 +291,12 @@
  }).catch((error: ValidateErrorEntity<FormState>) => {
    console.log(error)
  })
}
// 设置项目中心点
const configCenter = () => {
  if (store.state.map.centerConfig.type === true) return
  store.commit('SET_CENTER_CONFIG_TYPE', true)
}
onMounted(() => {
  getDetail()
@@ -355,36 +370,36 @@
        }
        .ant-table-project :deep(.project_dark) td {
            background-color: #232323;
            color: #fff;
            border: none;
            background-color: #232323 !important;
            color: #fff !important;
            border: none !important;
            border-bottom: 1px solid #4f4f4f;
            padding: 10px;
        }
        .ant-table-project :deep(.ant-table-placeholder) {
            background: #434343;
            background: #434343 !important;
            border: none !important;
        }
        .ant-table-project :deep(.ant-table-thead) th {
            background: #3c3c3c;
            color: #fff;
            border: 1px solid #4f4f4f;
            background: #3c3c3c !important;
            color: #fff !important;
            border: 1px solid #4f4f4f !important;
            padding: 10px;
        }
        .ant-table-project :deep(.ant-table-body) table {
            border: 1px solid #4f4f4f;
            border-right: 1px solid #4f4f4f;
            border: 1px solid #4f4f4f !important;
            border-right: 1px solid #4f4f4f !important;
        }
        .ant-table-project :deep(.ant-table-body) {
            background: #434343;
            background: #434343 !important;
        }
        .ant-table-project :deep(.ant-empty-description) {
            color: #fff;
            color: #fff !important;
        }
    }