From f6bbabd538001e4c997b2d5474356dc345ff0ba5 Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Fri, 01 Sep 2023 14:57:16 +0800
Subject: [PATCH] 项目-抽屉组件封装、天气阻飞设置页面搭建以及功能完善
---
src/pages/page-web/projects/project_list/add_page/type.ts | 142 +++++++++--
src/styles/flex.style.scss | 14 +
package-lock.json | 14
yarn.lock | 8
package.json | 1
src/components/Drawer/Drawer.vue | 71 +++++
src/hooks/use-v-model.ts | 21 +
src/pages/page-web/projects/project_list/add_page/components/type.ts | 48 ++++
src/components/Search/Select.vue | 4
src/pages/page-web/projects/project_list/add_page/components/WeatherDrawer.vue | 135 +++++++++++
src/pages/page-web/projects/project_list/add_page/add.vue | 253 ++++++++++++++++----
src/styles/common.scss | 7
12 files changed, 626 insertions(+), 92 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 4e525f3..7912a43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
},
"devDependencies": {
"@types/crypto-js": "^4.1.1",
+ "@types/lodash": "^4.14.197",
"@types/node": "^16.3.2",
"@types/urlencode": "^1.1.2",
"@typescript-eslint/eslint-plugin": "^5.8.1",
@@ -1298,10 +1299,9 @@
"license": "MIT"
},
"node_modules/@types/lodash": {
- "version": "4.14.178",
- "resolved": "https://registry.npmmirror.com/@types/lodash/download/@types/lodash-4.14.178.tgz",
- "integrity": "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==",
- "license": "MIT"
+ "version": "4.14.197",
+ "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.197.tgz",
+ "integrity": "sha512-BMVOiWs0uNxHVlHBgzTIqJYmj+PgCo4euloGF+5m4okL3rEYzM2EEv78mw8zWSMM57dM7kVIgJ2QDvwHSoCI5g=="
},
"node_modules/@types/node": {
"version": "16.11.19",
@@ -9959,9 +9959,9 @@
"dev": true
},
"@types/lodash": {
- "version": "4.14.178",
- "resolved": "https://registry.npmmirror.com/@types/lodash/download/@types/lodash-4.14.178.tgz",
- "integrity": "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw=="
+ "version": "4.14.197",
+ "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.197.tgz",
+ "integrity": "sha512-BMVOiWs0uNxHVlHBgzTIqJYmj+PgCo4euloGF+5m4okL3rEYzM2EEv78mw8zWSMM57dM7kVIgJ2QDvwHSoCI5g=="
},
"@types/node": {
"version": "16.11.19",
diff --git a/package.json b/package.json
index 15c80da..ddad0b4 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
},
"devDependencies": {
"@types/crypto-js": "^4.1.1",
+ "@types/lodash": "^4.14.197",
"@types/node": "^16.3.2",
"@types/urlencode": "^1.1.2",
"@typescript-eslint/eslint-plugin": "^5.8.1",
diff --git a/src/components/Drawer/Drawer.vue b/src/components/Drawer/Drawer.vue
new file mode 100644
index 0000000..896aa5b
--- /dev/null
+++ b/src/components/Drawer/Drawer.vue
@@ -0,0 +1,71 @@
+<template>
+ <div class="drawer" :class="[show ? 'active':'none']" v-show="show">
+ <div class="side-header">
+ <div class="side-option flex-display flex-align-center flex-justify-between">
+ <h2 class="title">{{ title }}</h2>
+ <CloseOutlined @click="close" />
+ </div>
+ <div class="border-bottom"></div>
+ </div>
+ <slot></slot>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue'
+import { CloseOutlined } from '@ant-design/icons-vue'
+const porps = defineProps({
+ show: {
+ type: Boolean,
+ default: false
+ },
+ title: {
+ type: String,
+ required: true
+ }
+})
+const emits = defineEmits(['update:show'])
+const close = () => {
+ emits('update:show', false)
+}
+</script>
+
+<style scoped lang="scss">
+.active {
+ z-index: 1;
+ left: 100%;
+}
+.none {
+ z-index: -1;
+ left: 0;
+}
+.drawer {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ transition: all .5s;
+ box-shadow: -12px 0px 13px -6px rgba(0,0,0,0.1);
+ background: #232323;
+
+ .side-header {
+ height: 60px;
+ font-size: 16px;
+ line-height: 60px;
+ box-sizing: border-box;
+ background-color: #232323;
+ border-bottom: 1px solid #4f4f4f;
+
+ .side-option {
+ padding: 0 16px;
+
+ .title {
+ color: $text-white-basic;
+ font-size: 18px;
+ margin: 0;
+ font-weight: 700;
+ }
+ }
+ }
+}
+</style>
diff --git a/src/components/Search/Select.vue b/src/components/Search/Select.vue
index 4a8a20e..cf2cae8 100644
--- a/src/components/Search/Select.vue
+++ b/src/components/Search/Select.vue
@@ -12,14 +12,14 @@
const emit = defineEmits(['update:modelValue', 'handleChange'])
type Option = {
label: string,
- value: string
+ value: any
}
const props = defineProps({
options: {
type: Object as () => Option[],
required: true,
},
- modelValue: String,
+ modelValue: [String, Number],
})
const value = computed({
get: () => props.modelValue,
diff --git a/src/hooks/use-v-model.ts b/src/hooks/use-v-model.ts
new file mode 100644
index 0000000..8d46586
--- /dev/null
+++ b/src/hooks/use-v-model.ts
@@ -0,0 +1,21 @@
+export function useVModel (props:any, propName:string, emit:any) {
+ return computed({
+ get () {
+ return new Proxy(props[propName], {
+ get (target, key) {
+ return Reflect.get(target, key)
+ },
+ set (target, key, value) {
+ emit('update:' + propName, {
+ ...target,
+ [key]: value
+ })
+ return true
+ }
+ })
+ },
+ set (val) {
+ emit('update:' + propName, val)
+ }
+ })
+}
diff --git a/src/pages/page-web/projects/project_list/add_page/add.vue b/src/pages/page-web/projects/project_list/add_page/add.vue
index de17b9a..c79df66 100644
--- a/src/pages/page-web/projects/project_list/add_page/add.vue
+++ b/src/pages/page-web/projects/project_list/add_page/add.vue
@@ -2,17 +2,17 @@
<div class="project_add">
<div class="side-header">
<div class="side-option flex-display flex-align-center">
- <left-outlined :style="{ fontSize: '18px', marginRight: '8px' }" />
- <h2 class="title">创建项目</h2>
+ <left-outlined class="point" @click="goBack" :style="{ fontSize: '18px', marginRight: '8px' }" />
+ <h2 class="title point" @click="goBack">创建项目</h2>
</div>
<div class="border-bottom"></div>
</div>
<div class="side-form-content">
- <a-form layout="vertical" :model="formState">
- <a-form-item label="项目名称">
+ <a-form hideRequiredMark layout="vertical" :model="formState" :rules="rules" ref="projectForm">
+ <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="项目简介">
+ <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>
@@ -32,8 +32,8 @@
<div class="application flex-display flex-align-center flex-justify-between">
<p>天气阻飞设置</p>
<div class="btn">
- <a-button type="text" disabled>
- <span class="button_name">未开启</span>
+ <a-button type="text" @click="openWeatherDrawer">
+ <span class="button_name">{{formState.projectBlocking.cloudBlockingConfigEnable == 1 ? '已开启' : '未开启' }}</span>
<template #icon><right-outlined
:style="{ fontSize: '14px', color: '#fff', marginLeft: '8px' }" /></template>
</a-button>
@@ -50,8 +50,9 @@
</a-button>
</div>
</div>
- <a-table :columns="columns" :data-source="dataSource" bordered>
- <template v-for="col in ['name', 'age', 'address']" #[col]="{ text, record }" :key="col">
+ <a-table class="ant-table-project" :columns="Usercolumns" :data-source="dataSource" bordered
+ :pagination="false" :rowClassName="() => 'project_dark'">
+ <template v-for="col in ['name', 'role', 'edit']" #[col]="{ text, record }" :key="col">
<div>
<a-input v-if="editableData[record.key]" v-model:value="editableData[record.key][col]"
style="margin: -5px 0" />
@@ -63,71 +64,170 @@
<template #operation="{ record }">
<div class="editable-row-operations">
<span v-if="editableData[record.key]">
- <a @click="save(record.key)">Save</a>
- <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
- <a>Cancel</a>
- </a-popconfirm>
+ <div class="flex-display flex-align-center flex-justify-between">
+ <CheckOutlined :style="{ fontSize: '14px', color: '#28d445' }"
+ @click="save(record.key, 'editableData')" />
+ <a-popconfirm title="确定取消?" ok-text="确定" cancel-text="取消"
+ @confirm="cancel(record.key, 'editableData')">
+ <CloseOutlined :style="{ fontSize: '14px', color: '#e70102' }" />
+ </a-popconfirm>
+ </div>
</span>
<span v-else>
- <a @click="edit(record.key)">Edit</a>
+ <div class="flex-display flex-align-center flex-justify-between">
+ <EditOutlined :style="{ fontSize: '14px', color: '#1180ff' }"
+ @click="edit(record.key, 'editableData')" />
+ <DeleteOutlined :style="{ fontSize: '14px', color: '#e70102' }"
+ @click="del(record.key, 'editableData')" />
+ </div>
</span>
</div>
</template>
</a-table>
</a-form-item>
<a-form-item>
- <a-button type="primary">Submit</a-button>
+ <div class="application flex-display flex-align-center flex-justify-between">
+ <p>项目设备</p>
+ <div>
+ <a-button type="text">
+ <span class="button_add">添加飞行器</span>
+ <template #icon><plus-outlined :style="{ fontSize: '14px', color: '#2d8cf0' }" /></template>
+ </a-button>
+ </div>
+ </div>
+ <a-table class="ant-table-project" :columns="Devicecolumns" :data-source="deviceSource" bordered
+ :pagination="false" :rowClassName="() => 'project_dark'">
+ <template v-for="col in ['name', 'role', 'edit']" #[col]="{ text, record }" :key="col">
+ <div>
+ <a-input v-if="editDeviceData[record.key]" v-model:value="editDeviceData[record.key][col]"
+ style="margin: -5px 0" />
+ <template v-else>
+ {{ text }}
+ </template>
+ </div>
+ </template>
+ <template #operation="{ record }">
+ <div class="editable-row-operations">
+ <span v-if="editDeviceData[record.key]">
+ <div class="flex-display flex-align-center flex-justify-between">
+ <CheckOutlined :style="{ fontSize: '14px', color: '#28d445' }"
+ @click="save(record.key, 'editDeviceData')" />
+ <a-popconfirm title="确定取消?" ok-text="确定" cancel-text="取消"
+ @confirm="cancel(record.key, 'editDeviceData')">
+ <CloseOutlined :style="{ fontSize: '14px', color: '#e70102' }" />
+ </a-popconfirm>
+ </div>
+ </span>
+ <span v-else>
+ <div class="flex-display flex-align-center flex-justify-between">
+ <EditOutlined :style="{ fontSize: '14px', color: '#1180ff' }"
+ @click="edit(record.key, 'editDeviceData')" />
+ <DeleteOutlined :style="{ fontSize: '14px', color: '#e70102' }"
+ @click="del(record.key, 'editDeviceData')" />
+ </div>
+ </span>
+ </div>
+ </template>
+ </a-table>
+ </a-form-item>
+ <a-form-item>
+ <div class="application flex-display flex-align-center flex-justify-between">
+ <p>项目作业中心点</p>
+ <div>
+ <a-button type="text">
+ <span class="button_add">设置项目中心点</span>
+ <template #icon>
+ <AimOutlined :style="{ fontSize: '14px', color: '#2d8cf0' }" />
+ </template>
+ </a-button>
+ </div>
+ </div>
+ <div class="latitude">经纬度：35.6761919°N 139.65031.6°E</div>
</a-form-item>
</a-form>
+ <WeatherDrawer v-model:show="weatherDrawer" title="以下设置仅在当前项目中生效" >
+ <ComWeather v-model="formState" />
+ </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">创建项目</a-button>
</div>
</div>
</template>
<script setup lang="ts">
-import { LeftOutlined, RightOutlined, PlusOutlined } from '@ant-design/icons-vue'
-import { FormState, FormProject } from './type'
+import { LeftOutlined, RightOutlined, PlusOutlined, EditOutlined, DeleteOutlined, CheckOutlined, CloseOutlined, AimOutlined } from '@ant-design/icons-vue'
+import { FormState, FormProject, Usercolumns, ProjectUser, Devicecolumns, ProjectDevice, rules, blocking } from './type'
import { UnwrapRef } from 'vue'
-const columns = [
- {
- title: '人员项目呼号',
- dataIndex: 'name',
- key: 'name',
- },
- {
- title: '项目角色',
- dataIndex: 'role',
- key: 'role',
- responsive: ['md'],
- },
- {
- title: '编辑',
- dataIndex: 'edit',
- key: 'edit',
- responsive: ['lg'],
- },
-]
-interface DataItem {
- key: string;
- name: string;
- role: number;
- edit: string;
-}
-const dataSource = ref([
- {
- key: '1',
- name: '接口活',
- role: '项目管理员'
- }
-])
-const editableData: UnwrapRef<Record<string, DataItem>> = reactive({})
+import WeatherDrawer from '/@/components/Drawer/Drawer.vue'
+import ComWeather from './components/WeatherDrawer.vue'
+import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface'
+import { cloneDeep } from 'lodash'
+import router from '/@/router'
+const dataSource = ref([])
+const deviceSource = ref([])
+const weatherDrawer = ref(false)
+const editableData: UnwrapRef<Record<string, ProjectUser>> = reactive({})
+const editDeviceData: UnwrapRef<Record<string, ProjectDevice>> = reactive({})
const formState = ref<FormState>({
- [FormProject.PROJECT_NAME]: '',
+ [FormProject.PROJECT_NAME]: 'projectName',
[FormProject.PROJECT_STATUS]: '',
[FormProject.PROJCECT_INTRO]: '',
[FormProject.LONGITUDE]: 0,
[FormProject.LATITUDE]: 0,
- [FormProject.USERLIST]: []
+ [FormProject.USERLIST]: [],
+ [FormProject.PROJECT_BLOCKING]: {
+ [blocking.CLOUDBLOCKINGCONFIGENABLE]: 1,
+ [blocking.WEATHERREPORTENABLE]: 1,
+ [blocking.WINDSPEED]: 12,
+ [blocking.WINDSPEEDREPORT]: 15,
+ [blocking.RAIN]: 3
+ }
})
+const projectForm = ref()
+// 表格操作方法
+const edit = (key: string, type: string) => {
+ if (type === 'editableData') {
+ editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0])
+ } else {
+ editDeviceData[key] = cloneDeep(deviceSource.value.filter(item => key === item.key)[0])
+ }
+}
+const save = (key: string, type: string) => {
+ if (type === 'editableData') {
+ Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key])
+ delete editableData[key]
+ } else {
+ Object.assign(deviceSource.value.filter(item => key === item.key)[0], editDeviceData[key])
+ delete editDeviceData[key]
+ }
+}
+const cancel = (key: string, type: string) => {
+ if (type === 'editableData') {
+ delete editableData[key]
+ } else {
+ delete editDeviceData[key]
+ }
+}
+const del = (key: string, type: string) => {
+ console.log(key)
+}
+const goBack = () => {
+ router.go(-1)
+}
+// 天气组飞侧边栏
+const openWeatherDrawer = () => {
+ weatherDrawer.value = true
+}
+// 表单验证提交
+const submit = () => {
+ projectForm.value.validate().then(() => {
+ console.log('验证通过', formState)
+ }).catch((error:ValidateErrorEntity<FormState>) => {
+ console.log(error)
+ })
+}
</script>
<style scoped lang="scss">
@@ -136,6 +236,7 @@
flex-direction: column;
height: 100%;
color: #fff;
+ position: relative;
background-color: #232323;
.side-header {
@@ -187,6 +288,54 @@
margin: 0;
}
}
+
+ .latitude {
+ margin-top: 8px;
+ font-size: 12px;
+ line-height: 20px;
+ color: hsla(0, 0%, 100%, .45);
+ }
+
+ .ant-table-project :deep(.project_dark) td {
+ background-color: #232323;
+ color: #fff;
+ border: none;
+ border-bottom: 1px solid #4f4f4f;
+ padding: 10px;
+ }
+
+ .ant-table-project :deep(.ant-table-placeholder) {
+ background: #434343;
+ border: none !important;
+ }
+
+ .ant-table-project :deep(.ant-table-thead) th {
+ background: #3c3c3c;
+ color: #fff;
+ border: 1px solid #4f4f4f;
+ padding: 10px;
+ }
+
+ .ant-table-project :deep(.ant-table-body) table {
+ border: 1px solid #4f4f4f;
+ border-right: 1px solid #4f4f4f;
+ }
+
+ .ant-table-project :deep(.ant-table-body) {
+ background: #434343;
+ }
+
+ .ant-table-project :deep(.ant-empty-description) {
+ color: #fff;
+ }
+ }
+
+ .fix-button {
+ position: sticky;
+ bottom: 0;
+ width: 100%;
+ padding: 16px;
+ border-top: 1px solid #4f4f4f;
}
:deep(.ant-form-item-label > label) {
diff --git a/src/pages/page-web/projects/project_list/add_page/components/WeatherDrawer.vue b/src/pages/page-web/projects/project_list/add_page/components/WeatherDrawer.vue
new file mode 100644
index 0000000..e36a509
--- /dev/null
+++ b/src/pages/page-web/projects/project_list/add_page/components/WeatherDrawer.vue
@@ -0,0 +1,135 @@
+<template>
+ <div class="com_weather">
+ <div class="option">
+ <div class="option-item" :style="[model.projectBlocking[blocking.CLOUDBLOCKINGCONFIGENABLE]!==1?'border:none' : '']">
+ <span class="mr10">云端天气组飞设置</span>
+ <a-switch :checkedValue="1" :unCheckedValue="2" v-model:checked="model.projectBlocking[blocking.CLOUDBLOCKINGCONFIGENABLE]" />
+ <div v-if="model.projectBlocking[blocking.CLOUDBLOCKINGCONFIGENABLE]==1">
+ <p class="mt10 describe">当风速或雨量大于设置值时，将对机场的飞行器进行阻飞。</p>
+ </div>
+ <div v-else>
+ <p class="mt10 describe">关闭后，机场的阻飞仍生效。</p>
+ <p class="mt10 describe">机场的阻飞条件：</p>
+ <p class="mt10 describe">风速 (风速计) ≥12m/s 或 雨量 (雨量计) ≥大雨 </p>
+ </div>
+ </div>
+ <div class="option-item" v-if="model.projectBlocking[blocking.CLOUDBLOCKINGCONFIGENABLE]==1">
+ <span class="mr10">天气预报</span>
+ <a-switch :checkedValue="1" :unCheckedValue="2" v-model:checked="model.projectBlocking[blocking.WEATHERREPORTENABLE]" />
+ <p class="mt10 describe">天气阻飞将使用天气预报，同时也会使用机场风速计和雨量计数据。</p>
+ </div>
+ <div class="option-item-edit" v-if="model.projectBlocking[blocking.CLOUDBLOCKINGCONFIGENABLE]==1">
+ <a-form ref="weatherFormRef" :model="FormWeatherModel" :rules="weatherRules">
+ <a-form-item :name="FormWeather.WINDSPEED" ref="windDevice">
+ <div class="edit-item flex-display flex-align-center flex-justify-between">
+ <div class="white-color">风速<span class="describe">(风速计) (1-12m/s)</span></div>
+ <div class="form-option flex-display flex-align-center white-color">
+ <div :class="{ w48: edit }">
+ <span v-if="!edit">{{ model.projectBlocking[FormWeather.WINDSPEED] }}</span>
+ <a-input v-else v-model:value.number="FormWeatherModel[FormWeather.WINDSPEED]"></a-input>
+ </div>
+ <span>m/s</span>
+ </div>
+ </div>
+ </a-form-item>
+ <a-form-item :name="FormWeather.WINDSPEEDREPORT" v-if="model.projectBlocking.weatherReportEnable">
+ <div class="edit-item flex-display flex-align-center flex-justify-between">
+ <div class="white-color">风速<span class="describe">(天气预报) (1-15m/s)</span></div>
+ <div class="form-option flex-display flex-align-center white-color">
+ <div :class="{ w48: edit }">
+ <span v-if="!edit">{{ model.projectBlocking[FormWeather.WINDSPEEDREPORT] }}</span>
+ <a-input v-else v-model:value.number="FormWeatherModel[FormWeather.WINDSPEEDREPORT]"></a-input>
+ </div>
+ <span>m/s</span>
+ </div>
+ </div>
+ </a-form-item>
+ <a-form-item :name="FormWeather.RAIN">
+ <div class="edit-item flex-display flex-align-center flex-justify-between">
+ <div class="white-color">雨量<span class="describe">(雨量计/天气预报)</span></div>
+ <div class="form-option flex-display flex-align-center white-color">
+ <div :class="{ w60: edit }">
+ <span v-if="!edit">{{ WeatherEnum[model.projectBlocking[FormWeather.RAIN]] }}</span>
+ <Select :bordered="false" :options="rainSelect" v-model='FormWeatherModel[FormWeather.RAIN]' v-else />
+ </div>
+ </div>
+ </div>
+ </a-form-item>
+ </a-form>
+ <div class="btn-group" v-if="!edit">
+ <a-button class="w96" type="primary" @click="() => edit = true">编辑</a-button>
+ </div>
+ <div class="btn-group" v-if="edit">
+ <a-button class="mr20 w96" @click="cancel">取消</a-button>
+ <a-button class='w96' type="primary" @click="submit">保存</a-button>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue'
+import { cloneDeep } from 'lodash'
+import { blocking } from '../type'
+import { weatherRules, FormWeather, rainSelect, WeatherEnum, } from './type'
+import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface'
+import Select from '/@/components/Search/Select.vue'
+import { useVModel } from '/@/hooks/use-v-model'
+interface FormState {
+ [FormWeather.WINDSPEEDREPORT]: number
+ [FormWeather.WINDSPEED]: number
+ [FormWeather.RAIN]: number
+}
+const props = defineProps({
+ modelValue: {
+ type: Object,
+ required: true
+ },
+})
+const emit = defineEmits(['update:modelValue'])
+const model = useVModel(props, 'modelValue', emit)
+const edit = ref(false)
+const weatherFormRef = ref()
+const FormWeatherModel = ref<FormState>(cloneDeep(model.value.projectBlocking))
+const submit = () => {
+ weatherFormRef.value
+ .validate()
+ .then(() => {
+ edit.value = false
+ model.value.projectBlocking = { ...model.value.projectBlocking, ...FormWeatherModel.value }
+ })
+ .catch((error: ValidateErrorEntity<FormState>) => {
+ console.log('error', error)
+ })
+}
+const cancel = () => {
+ FormWeatherModel.value = model.value.projectBlocking
+ edit.value = false
+}
+</script>
+
+<style scoped lang="scss">
+.com_weather {
+ padding: 16px;
+
+ .option {
+ &-item {
+ border-bottom: 1px solid #4f4f4f;
+ margin-bottom: 16px;
+ }
+
+ .form-option :deep(.ant-select-single .ant-select-selector) {
+ background-color: inherit !important;
+ color: #fff !important;
+ padding: 0 !important;
+ }
+
+ .form-option :deep(.ant-select-arrow) {
+ color: #fff;
+ }
+
+ // .form-option :deep(.)
+ }
+}
+</style>
diff --git a/src/pages/page-web/projects/project_list/add_page/components/type.ts b/src/pages/page-web/projects/project_list/add_page/components/type.ts
new file mode 100644
index 0000000..c30156a
--- /dev/null
+++ b/src/pages/page-web/projects/project_list/add_page/components/type.ts
@@ -0,0 +1,48 @@
+import { RuleObject, ValidateErrorEntity } from 'ant-design-vue/es/form/interface'
+
+export enum FormWeather {
+ WINDSPEED = 'windDevice',
+ WINDSPEEDREPORT = 'windWeatherReport',
+ RAIN = 'rain',
+}
+export enum WeatherEnum {
+ '小雨' = 1,
+ '中雨' = 2,
+ '大雨' = 3
+}
+export const rainSelect = [
+ {
+ label: '小雨',
+ value: 1,
+ },
+ {
+ label: '中雨',
+ value: 2,
+ },
+ {
+ label: '大雨',
+ value: 3,
+ },
+]
+// export interface FormWeatherState {
+// [FormWeather.WINDSPEED]: number
+// [FormWeather.WINDSPEEDREPORT]: number
+// [FormWeather.RAIN]: string
+// }
+// export const formWeatherState = {
+
+// }
+
+export const weatherRules = {
+ [FormWeather.WINDSPEED]: [
+ { required: true, type: 'number', message: '请输入风速', trigger: 'blur' },
+ { min: 1, max: 12, type: 'number', message: '风速有效值在1-12m/s之间' },
+ ],
+ [FormWeather.WINDSPEEDREPORT]: [
+ { required: true, type: 'number', message: '请输入风速', trigger: 'blur' },
+ { min: 1, max: 15, type: 'number', message: '风速有效值在1-15m/s之间' },
+ ],
+ [FormWeather.RAIN]: [
+ { required: true, message: '请选择雨量', type: 'number', trigger: 'blur' },
+ ],
+}
diff --git a/src/pages/page-web/projects/project_list/add_page/type.ts b/src/pages/page-web/projects/project_list/add_page/type.ts
index 6c69d6b..a1ba1c0 100644
--- a/src/pages/page-web/projects/project_list/add_page/type.ts
+++ b/src/pages/page-web/projects/project_list/add_page/type.ts
@@ -1,35 +1,123 @@
-export enum FormProject{
- PROJECT_NAME = 'projectName',
- PROJECT_STATUS = 'projectStatus',
- PROJCECT_INTRO = 'projectIntro',
- LONGITUDE = 'longitude',
- LATITUDE = 'latitude',
- DEVICELIST = 'deviceList',
- USERLIST = 'userList',
- PROJECT_BLOCKING = 'projectBlocking',
+export enum FormProject {
+ PROJECT_NAME = 'projectName',
+ PROJECT_STATUS = 'projectStatus',
+ PROJCECT_INTRO = 'projectIntro',
+ LONGITUDE = 'longitude',
+ LATITUDE = 'latitude',
+ DEVICELIST = 'deviceList',
+ USERLIST = 'userList',
+ PROJECT_BLOCKING = 'projectBlocking',
}
-enum weather{
- '开启'=1,
- '关闭'=2
+export enum blocking {
+ WINDSPEED = 'windDevice',
+ WINDSPEEDREPORT = 'windWeatherReport',
+ RAIN = 'rain',
+ CLOUDBLOCKINGCONFIGENABLE = 'cloudBlockingConfigEnable',
+ WEATHERREPORTENABLE = 'weatherReportEnable',
+}
+enum weather {
+ '开启' = 1,
+ '关闭' = 2
}
interface deviceList {
- nickName:string
- deviceSource:number
- deviceType:number
- [key:string]:any
+ nickName: string
+ deviceSource: number
+ deviceType: number
+ [key: string]: any
}
interface projectBlocking {
- weatherBlockingConfigEnable:weather
- cloudBlockingConfigEnable:weather
-
+ [blocking.WEATHERREPORTENABLE]?: weather
+ [blocking.CLOUDBLOCKINGCONFIGENABLE]: weather
+ [blocking.WINDSPEED]?: number
+ [blocking.WINDSPEEDREPORT]?: number
+ [blocking.RAIN]?: number
}
export interface FormState {
- [FormProject.PROJECT_NAME]: string
- [FormProject.PROJECT_STATUS]:string
- [FormProject.PROJCECT_INTRO]:string
- [FormProject.LONGITUDE]:number
- [FormProject.LATITUDE]:number
- [FormProject.DEVICELIST]?:deviceList[]
- [FormProject.USERLIST]:number[]
- [FormProject.PROJECT_BLOCKING]?:{}
+ [FormProject.PROJECT_NAME]: string
+ [FormProject.PROJECT_STATUS]: string
+ [FormProject.PROJCECT_INTRO]: string
+ [FormProject.LONGITUDE]: number
+ [FormProject.LATITUDE]: number
+ [FormProject.DEVICELIST]?: deviceList[]
+ [FormProject.USERLIST]: number[]
+ [FormProject.PROJECT_BLOCKING]: projectBlocking
+}
+
+/*
+ 项目成员表格
+*/
+export const Usercolumns = [
+ {
+ title: '人员项目呼号',
+ dataIndex: 'name',
+ key: 'name',
+ ellipsis: true,
+ slots: { customRender: 'name' },
+ },
+ {
+ title: '项目角色',
+ dataIndex: 'role',
+ key: 'role',
+ responsive: ['md'],
+ ellipsis: true,
+ slots: { customRender: 'role' },
+ },
+ {
+ title: '编辑',
+ dataIndex: 'edit',
+ key: 'edit',
+ responsive: ['lg'],
+ width: '24%',
+ ellipsis: true,
+ slots: { customRender: 'operation' },
+ },
+]
+
+export interface ProjectUser {
+ key: string;
+ name: string;
+ role: number;
+}
+
+/*
+ 项目设备表格数据
+*/
+export const Devicecolumns = [
+ {
+ title: '项目设备呼号',
+ dataIndex: 'device',
+ key: 'device',
+ ellipsis: true,
+ slots: { customRender: 'device' },
+ },
+ {
+ title: '设备型号',
+ dataIndex: 'model',
+ key: 'model',
+ responsive: ['md'],
+ ellipsis: true,
+ slots: { customRender: 'model' },
+ },
+ {
+ title: '编辑',
+ dataIndex: 'edit',
+ key: 'edit',
+ responsive: ['lg'],
+ width: '24%',
+ ellipsis: true,
+ slots: { customRender: 'operation' },
+ },
+]
+
+export interface ProjectDevice {
+ key: string;
+ device: string;
+ model: string;
+}
+
+// 校验表单规则
+export const rules = {
+ [FormProject.PROJECT_NAME]: [
+ { required: true, message: '请输入项目名称', trigger: 'blur' },
+ ],
}
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 9f2d9a0..309b937 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -6,6 +6,13 @@
.dis_opticy{
opacity: .25;
}
+.white-color {
+ color: #fff;
+}
+.describe{
+ font-size: 12px;
+ color: hsla(0,0%,100%,.6);
+}
body {
background-color: #f7f9fa;
-webkit-font-smoothing: antialiased;
diff --git a/src/styles/flex.style.scss b/src/styles/flex.style.scss
index 6f59af4..493cfe1 100644
--- a/src/styles/flex.style.scss
+++ b/src/styles/flex.style.scss
@@ -177,6 +177,20 @@
margin-left: 10px !important;
}
+.w48 {
+ width: 48px;
+}
+
+.w60 {
+ width: 60px;
+}
+.point {
+ cursor: pointer;
+}
+.w96 {
+ width: 96px;
+}
+
.mr10 {
margin-right: 10px !important;
}
diff --git a/yarn.lock b/yarn.lock
index c158288..26a35ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -518,10 +518,10 @@
"resolved" "https://registry.npm.taobao.org/@types/json5/download/@types/json5-0.0.29.tgz"
"version" "0.0.29"
-"@types/lodash@^4.14.165":
- "integrity" "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw=="
- "resolved" "https://registry.npmmirror.com/@types/lodash/download/@types/lodash-4.14.178.tgz"
- "version" "4.14.178"
+"@types/lodash@^4.14.165", "@types/lodash@^4.14.197":
+ "integrity" "sha512-BMVOiWs0uNxHVlHBgzTIqJYmj+PgCo4euloGF+5m4okL3rEYzM2EEv78mw8zWSMM57dM7kVIgJ2QDvwHSoCI5g=="
+ "resolved" "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.197.tgz"
+ "version" "4.14.197"
"@types/node@*", "@types/node@^16.3.2", "@types/node@>= 14", "@types/node@>=13.7.0":
"integrity" "sha512-BPAcfDPoHlRQNKktbsbnpACGdypPFBuX4xQlsWDE7B8XXcfII+SpOLay3/qZmCLb39kV5S1RTYwXdkx2lwLYng=="
--
Gitblit v1.9.3