Skip to content

W
web-project
Commit 9dece472 authored by xuke's avatar xuke
Browse files
Options

天气字段规范

parent c2082b7c
Hide whitespace changes
Inline Side-by-side
Showing with 398 additions and 392 deletions
src/views/SchedulingPage/PhenomenonPage.vue
View file @ 9dece472
<script setup> <script setup>
import {onMounted, ref} from "vue"; import { onMounted, ref, reactive } from "vue";
import {ElMessage, ElMessageBox} from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
import {getPhenomenon,addPhenomenon,alterPhenomenon,deletePhenomenon} from "@/api/scheduling.js" import { getPhenomenon, addPhenomenon, alterPhenomenon, deletePhenomenon } from "@/api/scheduling.js"
import {vFloatNumber} from "@/utils/directives.js"; import { vFloatNumber } from "@/utils/directives.js";
const data = ref() const data = ref()
const dataBackup = ref([]) const dataBackup = ref([])
...@@ -11,6 +11,16 @@ const reviseWindowOpen = ref(false) ...@@ -11,6 +11,16 @@ const reviseWindowOpen = ref(false)
const addWindowOpen = ref(false) const addWindowOpen = ref(false)
const reviseForm = ref({}) // 修改表单 const reviseForm = ref({}) // 修改表单
const addForm = ref({}) // 新增表单 const addForm = ref({}) // 新增表单
const formRef = ref()
//校验规则
const rules = reactive({
phenomenonTemp: [
{ pattern: /^(-?\d{1,11})(\.[0-9]{1,4})?$/, message: "请输入正确的对应温度", trigger: "blur" }
]
});
const tableHeaderClass = data => { // 表头样式 const tableHeaderClass = data => { // 表头样式
return 'table-header-class' return 'table-header-class'
} }
...@@ -18,121 +28,121 @@ const tableBodyClass = data => { // 表体样式 ...@@ -18,121 +28,121 @@ const tableBodyClass = data => { // 表体样式
return 'table-body-class' return 'table-body-class'
} }
function add(){ function add() {
addWindowOpen.value = true addWindowOpen.value = true
} // 新增按钮单击事件 } // 新增按钮单击事件
function revise(val){ function revise(val) {
reviseForm.value = {...val} reviseForm.value = { ...val }
reviseWindowOpen.value = true reviseWindowOpen.value = true
} // 修改按钮单击事件 } // 修改按钮单击事件
function search(){ function search() {
if(!searchKey.value){ if (!searchKey.value) {
getData() getData()
}else { } else {
data.value = dataBackup.value.filter(item => item.phenomenonName.includes(searchKey.value)) data.value = dataBackup.value.filter(item => item.phenomenonName.includes(searchKey.value))
} }
} }
function omit(val){ function omit(val) {
let param = { let param = {
id: val.phenomenonId id: val.phenomenonId
} }
ElMessageBox.confirm( ElMessageBox.confirm(
'点击确定后，该条数据将删除，是否继续？', '点击确定后，该条数据将删除，是否继续？',
'Warning', 'Warning',
{ {
confirmButtonText:'确定', confirmButtonText: '确定',
cancelButtonText:'取消', cancelButtonText: '取消',
type:'warning' type: 'warning'
} }
).then(()=>{ ).then(() => {
deletePhenomenon(param).then(res=>{ deletePhenomenon(param).then(res => {
if(res.success){ if (res.success) {
getData() getData()
ElMessage({ ElMessage({
message: '删除成功.', message: '删除成功.',
type: 'success', type: 'success',
}) })
}else { } else {
ElMessage({ ElMessage({
message: res.message, message: res.message,
type: 'error', type: 'error',
}) })
} }
}).catch(err=>{ }).catch(err => {
ElMessage({ ElMessage({
message: '删除失败.', message: '删除失败.',
type: 'error', type: 'error',
}) })
}) })
}) })
} // 删除按钮单击事件 } // 删除按钮单击事件
function handleClose(){ function handleClose() {
reviseWindowOpen.value = false reviseWindowOpen.value = false
addWindowOpen.value = false addWindowOpen.value = false
resetInput() resetInput()
} // 关闭弹窗 } // 关闭弹窗
function onReviseSubmit(){ function onReviseSubmit() {
if(reviseForm.value.phenomenonName === '晴天'){ if (reviseForm.value.phenomenonName === '晴天') {
reviseForm.value.phenomenonType = 1 reviseForm.value.phenomenonType = 1
}else if(reviseForm.value.phenomenonName === '多云'){ } else if (reviseForm.value.phenomenonName === '多云') {
reviseForm.value.phenomenonType = 2 reviseForm.value.phenomenonType = 2
}else { } else {
reviseForm.value.phenomenonType = 3 reviseForm.value.phenomenonType = 3
} }
delete reviseForm.value.updateNullFields delete reviseForm.value.updateNullFields
console.log('=>>>>>>>>>>>',reviseForm.value) console.log('=>>>>>>>>>>>', reviseForm.value)
alterPhenomenon(reviseForm.value).then(res=>{ alterPhenomenon(reviseForm.value).then(res => {
if(res.success){ if (res.success) {
getData() getData()
reviseWindowOpen.value = false reviseWindowOpen.value = false
ElMessage({ ElMessage({
message: '修改成功.', message: '修改成功.',
type: 'success', type: 'success',
}) })
}else { } else {
ElMessage({ ElMessage({
message: res.message, message: res.message,
type: 'error', type: 'error',
}) })
} }
}).catch(err=>{ }).catch(err => {
ElMessage({ ElMessage({
message: '修改失败.', message: '修改失败.',
type: 'error', type: 'error',
}) })
}) })
} // 修改表单提交 } // 修改表单提交
function onAddSubmit(){ function onAddSubmit() {
if(addForm.value.phenomenonName === '晴天'){ if (addForm.value.phenomenonName === '晴天') {
addForm.value.phenomenonType = 1 addForm.value.phenomenonType = 1
}else if(addForm.value.phenomenonName === '多云'){ } else if (addForm.value.phenomenonName === '多云') {
addForm.value.phenomenonType = 2 addForm.value.phenomenonType = 2
}else { } else {
addForm.value.phenomenonType = 3 addForm.value.phenomenonType = 3
} }
addPhenomenon(addForm.value).then(res=>{ addPhenomenon(addForm.value).then(res => {
if(res.success){ if (res.success) {
handleClose() handleClose()
getData() getData()
ElMessage({ ElMessage({
message: '新增成功.', message: '新增成功.',
type: 'success', type: 'success',
}) })
}else { } else {
ElMessage({ ElMessage({
message: res.message, message: res.message,
type: 'error', type: 'error',
}) })
} }
}).catch(err=>{ }).catch(err => {
ElMessage({ ElMessage({
message: '新增失败.', message: '新增失败.',
type: 'error', type: 'error',
}) })
}) })
} // 新增表单提交 } // 新增表单提交
function resetInput(){ function resetInput() {
addForm.value = { addForm.value = {
phenomenonName: '', phenomenonName: '',
phenomenonType: '', phenomenonType: '',
...@@ -140,145 +150,142 @@ function resetInput(){ ...@@ -140,145 +150,142 @@ function resetInput(){
phenomenonDesc: '' phenomenonDesc: ''
} }
} // 清空新增表单输入框 } // 清空新增表单输入框
function resetSearch(){ function resetSearch() {
searchKey.value = '' searchKey.value = ''
getData() getData()
} }
onMounted(()=>{ onMounted(() => {
getData() getData()
}) })
function getData(){ function getData() {
getPhenomenon().then(res => { getPhenomenon().then(res => {
data.value = res.data data.value = res.data
dataBackup.value = [...data.value] dataBackup.value = [...data.value]
}) })
} }
function customSort(a,b){ function customSort(a, b) {
return b.phenomenonType - a.phenomenonType return b.phenomenonType - a.phenomenonType
} }
</script> </script>
<template> <template>
<div class="phenomenon-container"> <div class="phenomenon-container">
<div class="search-wrapper"> <div class="search-wrapper">
<el-row> <el-row>
<el-col :span="8" label>名称：</el-col> <el-col :span="8" label>名称：</el-col>
<el-col :span="16"> <el-col :span="16">
<el-input clearable v-model="searchKey"/> <el-input clearable v-model="searchKey" />
</el-col> </el-col>
</el-row> </el-row>
<el-button type="primary" @click="search" class="add-search-btn">查询</el-button> <el-button type="primary" @click="search" class="add-search-btn">查询</el-button>
<el-button type="primary" @click="add" class="add-search-btn">新增</el-button> <el-button type="primary" @click="add" class="add-search-btn">新增</el-button>
<el-button type="primary" @click="resetSearch" class="add-search-btn">重置</el-button> <el-button type="primary" @click="resetSearch" class="add-search-btn">重置</el-button>
</div> </div>
<div class="table-wrapper"> <div class="table-wrapper">
<el-table <el-table :data="data" stripe border style="width: 100%"
:data="data" :default-sort="{ prop: 'phenomenonName', order: 'descending' }" :header-cell-class-name="tableHeaderClass"
stripe
border
style="width: 100%"
:default-sort="{ prop: 'phenomenonName', order: 'descending' }"
:header-cell-class-name="tableHeaderClass"
:row-class-name="tableBodyClass"> :row-class-name="tableBodyClass">
<el-table-column type="index" label="序号" align="center" width="100"/> <el-table-column type="index" label="序号" align="center" width="100" />
<el-table-column prop="phenomenonName" sortable :sort-method="customSort" label="名称"/> <el-table-column prop="phenomenonName" sortable :sort-method="customSort" label="名称" />
<el-table-column prop="phenomenonTemp" label="对应温度"/> <el-table-column prop="phenomenonTemp" label="对应温度" />
<el-table-column prop="phenomenonDesc" label="描述"/> <el-table-column prop="phenomenonDesc" label="描述" />
<el-table-column label="操作" width="190"> <el-table-column label="操作" width="190">
<template #default="scope"> <template #default="scope">
<div class="table-operate-column"> <div class="table-operate-column">
<el-button link @click="revise(scope.row)" type="primary">修改</el-button> <el-button link @click="revise(scope.row)" type="primary">修改</el-button>
<el-button link @click="omit(scope.row)" type="primary">删除</el-button> <el-button link @click="omit(scope.row)" type="primary">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="dialog-window">
<el-dialog title="天气工况设置修改" v-model="reviseWindowOpen" width="700px" :before-close="handleClose">
<template #default>
<el-form ref="formRef" :rules="rules" :model="reviseForm" label-width="auto">
<el-row>
<el-col :span="8" col-label class="energy-type-class">名称：</el-col>
<el-col :span="16" col-value>
<el-select placeholder="" size="small" v-model="reviseForm.phenomenonName" style="width: 370px">
<el-option value="晴天" label="晴天" />
<el-option value="多云" label="多云" />
<el-option value="阴天" label="阴天" />
</el-select>
</el-col>
</el-row>
<el-row>
<el-col :span="8" col-label>对应温度：</el-col>
<el-col :span="16" col-value>
<el-form-item prop="phenomenonTemp" style="padding: 0;margin: 0;">
<el-input maxlength="11" v-model="reviseForm.phenomenonTemp" placeholder="" style="width: 370px" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8" col-label>描述：</el-col>
<el-col :span="16" col-value>
<el-input maxlength="11" v-model="reviseForm.phenomenonDesc" placeholder="" style="width: 370px" />
</el-col>
</el-row>
</el-form>
</template>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="onReviseSubmit">保存</el-button>
<el-button type="primary" @click="handleClose">关闭</el-button>
</div> </div>
</template> </template>
</el-table-column> </el-dialog> <!-- 修改弹窗 -->
</el-table> <el-dialog title="天气工况设置新增" v-model="addWindowOpen" width="700px" :before-close="handleClose">
</div> <template #default>
<div class="dialog-window"> <!-- <el-row first>
<el-dialog
title="天气工况设置修改"
v-model="reviseWindowOpen"
width="700px"
:before-close="handleClose">
<template #default>
<el-row>
<el-col :span="8" col-label class="energy-type-class">名称：</el-col>
<el-col :span="16" col-value>
<el-select placeholder="" size="small" v-model="reviseForm.phenomenonName" style="width: 370px">
<el-option value="晴天" label="晴天"/>
<el-option value="多云" label="多云"/>
<el-option value="阴天" label="阴天"/>
</el-select>
</el-col>
</el-row>
<el-row>
<el-col :span="8" col-label>对应温度：</el-col>
<el-col :span="16" col-value>
<el-input maxlength="11" v-model="reviseForm.phenomenonTemp" placeholder="" style="width: 370px"/>
</el-col>
</el-row>
<el-row>
<el-col :span="8" col-label>描述：</el-col>
<el-col :span="16" col-value>
<el-input maxlength="11" v-model="reviseForm.phenomenonDesc" placeholder="" style="width: 370px"/>
</el-col>
</el-row>
</template>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="onReviseSubmit">保存</el-button>
<el-button type="primary" @click="handleClose">关闭</el-button>
</div>
</template>
</el-dialog> <!-- 修改弹窗 -->
<el-dialog
title="天气工况设置新增"
v-model="addWindowOpen"
width="700px"
:before-close="handleClose">
<template #default>
<!-- <el-row first>
<el-col :span="8" col-label class="energy-type-class">名称：</el-col> <el-col :span="8" col-label class="energy-type-class">名称：</el-col>
<el-col :span="16" col-value> <el-col :span="16" col-value>
<el-input placeholder="" size="small" v-model="reviseForm.phenomenonName" style="width: 370px"/> <el-input placeholder="" size="small" v-model="reviseForm.phenomenonName" style="width: 370px"/>
</el-col> </el-col>
</el-row> --> </el-row> -->
<el-row> <el-form ref="formRef" :model="addForm" :rules="rules" label-width="auto">
<el-col :span="8" col-label class="energy-type-class">名称: </el-col> <el-row>
<el-col :span="16" col-value> <el-col :span="8" col-label class="energy-type-class">名称: </el-col>
<el-select placeholder="" size="small" v-model="addForm.phenomenonName" style="width: 370px"> <el-col :span="16" col-value>
<el-option value="晴天" label="晴天"/> <el-select placeholder="" size="small" v-model="addForm.phenomenonName" style="width: 370px">
<el-option value="多云" label="多云"/> <el-option value="晴天" label="晴天" />
<el-option value="阴天" label="阴天"/> <el-option value="多云" label="多云" />
</el-select> <el-option value="阴天" label="阴天" />
</el-col> </el-select>
</el-row> </el-col>
<el-row> </el-row>
<el-col :span="8" col-label>对应温度：</el-col> <el-row>
<el-col :span="16" col-value> <el-col :span="8" col-label>对应温度：</el-col>
<el-input maxlength="11" v-model="addForm.phenomenonTemp" placeholder="" style="width: 370px"/> <el-col :span="16" col-value>
</el-col> <el-form-item prop="phenomenonTemp" style="padding: 0;margin: 0;">
</el-row> <el-input maxlength="11" v-model="addForm.phenomenonTemp" placeholder="" style="width: 370px" />
<el-row> </el-form-item>
<el-col :span="8" col-label>描述：</el-col> </el-col>
<el-col :span="16" col-value> </el-row>
<el-input maxlength="11" v-model="addForm.phenomenonDesc" placeholder="" style="width: 370px"/> <el-row>
</el-col> <el-col :span="8" col-label>描述：</el-col>
</el-row> <el-col :span="16" col-value>
</template> <el-input maxlength="11" v-model="addForm.phenomenonDesc" placeholder="" style="width: 370px" />
<template #footer> </el-col>
<div class="dialog-footer"> </el-row>
<el-button type="primary" @click="onAddSubmit">保存</el-button> </el-form>
<el-button type="primary" @click="handleClose">关闭</el-button> </template>
</div> <template #footer>
</template> <div class="dialog-footer">
</el-dialog> <!-- 新增弹窗 --> <el-button type="primary" @click="onAddSubmit">保存</el-button>
<el-button type="primary" @click="handleClose">关闭</el-button>
</div>
</template>
</el-dialog> <!-- 新增弹窗 -->
</div>
</div> </div>
</div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.phenomenon-container{ .phenomenon-container {
width: 100%; width: 100%;
margin: 4px; margin: 4px;
} }
...@@ -313,6 +320,7 @@ function customSort(a,b){ ...@@ -313,6 +320,7 @@ function customSort(a,b){
background-color: #c4d8f1 !important; background-color: #c4d8f1 !important;
color: #124c6a; color: #124c6a;
} }
:deep(.table-body-class) { :deep(.table-body-class) {
font-size: 12px; font-size: 12px;
color: black; color: black;
...@@ -328,14 +336,15 @@ function customSort(a,b){ ...@@ -328,14 +336,15 @@ function customSort(a,b){
font-size: 12px; font-size: 12px;
} }
::v-deep .el-table__body tr:hover > td { ::v-deep .el-table__body tr:hover>td {
background: linear-gradient(to top, rgb(0, 198, 255), rgb(255, 255, 255)) !important; background: linear-gradient(to top, rgb(0, 198, 255), rgb(255, 255, 255)) !important;
} }
.el-row[first]{ .el-row[first] {
border-top: 1px solid #a6c3e9; border-top: 1px solid #a6c3e9;
} }
.el-row{
.el-row {
border-left: 1px solid #a6c3e9; border-left: 1px solid #a6c3e9;
border-right: 1px solid #a6c3e9; border-right: 1px solid #a6c3e9;
border-bottom: 1px solid #a6c3e9; border-bottom: 1px solid #a6c3e9;
...@@ -343,7 +352,8 @@ function customSort(a,b){ ...@@ -343,7 +352,8 @@ function customSort(a,b){
height: 35px; height: 35px;
color: #124362; color: #124362;
} }
.el-col[col-label]{
.el-col[col-label] {
display: flex; display: flex;
justify-content: end; justify-content: end;
align-items: center; align-items: center;
...@@ -351,13 +361,15 @@ function customSort(a,b){ ...@@ -351,13 +361,15 @@ function customSort(a,b){
background-color: #dfe8f6; background-color: #dfe8f6;
padding-right: 5px; padding-right: 5px;
} }
.el-col[col-value]{
.el-col[col-value] {
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
padding-left: 5px; padding-left: 5px;
} }
.el-input{
.el-input {
color: black; color: black;
height: 24px; height: 24px;
} }
......
src/views/SchedulingPage/WindManagePage.vue
View file @ 9dece472
<script setup> <script setup>
import { onMounted, ref, watch, watchEffect } from "vue"; import { onMounted, ref, watch, watchEffect, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
import { getWind, deleteWind, alterWind, addWind } from "@/api/scheduling.js"; import { getWind, deleteWind, alterWind, addWind } from "@/api/scheduling.js";
import store from "@/store/index.js"; import store from "@/store/index.js";
...@@ -10,8 +10,18 @@ const dataBackup = ref([]); ...@@ -10,8 +10,18 @@ const dataBackup = ref([]);
const searchKey = ref(""); // 查询参数 const searchKey = ref(""); // 查询参数
const reviseWindowOpen = ref(false); const reviseWindowOpen = ref(false);
const addWindowOpen = ref(false); const addWindowOpen = ref(false);
const reviseForm = ref({}); // 修改表单 // const reviseForm = ref({}); // 修改表单
const addForm = ref({}); // 新增表单 const addForm = ref({
windLevel: "",
windTemp: "",
windDesc: "",
}); // 新增表单
const reviseForm = ref({
windLevel: "",
windTemp: "",
windDesc: "",
})
const tableHeaderClass = (data) => { const tableHeaderClass = (data) => {
// 表头样式 // 表头样式
return "table-header-class"; return "table-header-class";
...@@ -21,6 +31,15 @@ const tableBodyClass = (data) => { ...@@ -21,6 +31,15 @@ const tableBodyClass = (data) => {
return "table-body-class"; return "table-body-class";
}; };
const formRef = ref()
//校验规则
const rules = reactive({
windTemp: [
{ pattern: /^(-?\d{1,11})(\.[0-9]{1,4})?$/, message: "请输入正确的对应温度", trigger: "blur" }
]
});
function add() { function add() {
addWindowOpen.value = true; addWindowOpen.value = true;
} // 新增按钮单击事件 } // 新增按钮单击事件
...@@ -40,24 +59,24 @@ function omit(val) { ...@@ -40,24 +59,24 @@ function omit(val) {
}) })
.then(() => { .then(() => {
deleteWind(param).then((res) => { deleteWind(param).then((res) => {
if(res.success){ if (res.success) {
getData(); getData();
ElMessage({ ElMessage({
message: "删除成功.", message: "删除成功.",
type: "success", type: "success",
}); });
}else { } else {
ElMessage({ ElMessage({
message: "删除失败.", message: "删除失败.",
type: "error", type: "error",
}); });
} }
}).catch((err) => { }).catch((err) => {
ElMessage({ ElMessage({
message: "删除失败.", message: "删除失败.",
type: "error", type: "error",
}); });
}); });
}) })
} // 删除按钮单击事件 } // 删除按钮单击事件
...@@ -78,14 +97,14 @@ function handleClose() { ...@@ -78,14 +97,14 @@ function handleClose() {
function onReviseSubmit() { function onReviseSubmit() {
alterWind(reviseForm.value) alterWind(reviseForm.value)
.then((res) => { .then((res) => {
if(res.success){ if (res.success) {
getData(); getData();
handleClose(); handleClose();
ElMessage({ ElMessage({
message: "修改成功.", message: "修改成功.",
type: "success", type: "success",
}); });
}else { } else {
ElMessage({ ElMessage({
message: "修改失败.", message: "修改失败.",
type: "error", type: "error",
...@@ -103,14 +122,14 @@ function onReviseSubmit() { ...@@ -103,14 +122,14 @@ function onReviseSubmit() {
function onAddSubmit() { function onAddSubmit() {
addWind(addForm.value) addWind(addForm.value)
.then((res) => { .then((res) => {
if(res.success){ if (res.success) {
getData(); getData();
handleClose(); handleClose();
ElMessage({ ElMessage({
message: "新增成功.", message: "新增成功.",
type: "success", type: "success",
}); });
}else { } else {
ElMessage({ ElMessage({
message: "新增失败.", message: "新增失败.",
type: "error", type: "error",
...@@ -144,7 +163,7 @@ function resetInput() { ...@@ -144,7 +163,7 @@ function resetInput() {
windDesc: "", windDesc: "",
}; };
} }
function resetSearch(){ function resetSearch() {
searchKey.value = ""; searchKey.value = "";
getData() getData()
} }
...@@ -158,41 +177,19 @@ function customSort(a, b) { ...@@ -158,41 +177,19 @@ function customSort(a, b) {
<el-row> <el-row>
<el-col :span="8" label>级数：</el-col> <el-col :span="8" label>级数：</el-col>
<el-col :span="16"> <el-col :span="16">
<el-select <el-select placeholder="" clearable style="width: 200px" v-model="searchKey">
placeholder="" <el-option v-for="item in 14" :key="item" :value="item" :label="item + '级风'" />
clearable
style="width: 200px"
v-model="searchKey"
>
<el-option
v-for="item in 14"
:key="item"
:value="item"
:label="item + '级风'"
/>
</el-select> </el-select>
</el-col> </el-col>
</el-row> </el-row>
<el-button type="primary" @click="search" class="add-search-btn" <el-button type="primary" @click="search" class="add-search-btn">查询</el-button>
>查询</el-button <el-button type="primary" @click="add" class="add-search-btn">新增</el-button>
> <el-button type="primary" @click="resetSearch" class="add-search-btn">重置</el-button>
<el-button type="primary" @click="add" class="add-search-btn"
>新增</el-button
>
<el-button type="primary" @click="resetSearch" class="add-search-btn"
>重置</el-button
>
</div> </div>
<div class="table-wrapper"> <div class="table-wrapper">
<el-table <el-table :data="data" stripe border style="width: 100%"
:data="data" :default-sort="{ prop: 'windLevel', order: 'descending' }" :header-cell-class-name="tableHeaderClass"
stripe :row-class-name="tableBodyClass">
border
style="width: 100%"
:default-sort="{prop: 'windLevel', order: 'descending'}"
:header-cell-class-name="tableHeaderClass"
:row-class-name="tableBodyClass"
>
<el-table-column type="index" label="序号" align="center" width="100" /> <el-table-column type="index" label="序号" align="center" width="100" />
<el-table-column prop="windLevel" sortable :sort-method="customSort" label="级数" /> <el-table-column prop="windLevel" sortable :sort-method="customSort" label="级数" />
<el-table-column prop="windTemp" label="对应温度" /> <el-table-column prop="windTemp" label="对应温度" />
...@@ -200,65 +197,40 @@ function customSort(a, b) { ...@@ -200,65 +197,40 @@ function customSort(a, b) {
<el-table-column label="操作" width="190"> <el-table-column label="操作" width="190">
<template #default="scope"> <template #default="scope">
<div class="table-operate-column"> <div class="table-operate-column">
<el-button link @click="revise(scope.row)" type="primary" <el-button link @click="revise(scope.row)" type="primary">修改</el-button>
>修改</el-button> <el-button link @click="omit(scope.row)" type="primary">删除</el-button>
<el-button link @click="omit(scope.row)" type="primary">删除</el-button
>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<div class="dialog-window"> <div class="dialog-window">
<el-dialog <el-dialog title="风力配置修改" v-model="reviseWindowOpen" width="700px" :before-close="handleClose">
title="风力配置修改"
v-model="reviseWindowOpen"
width="700px"
:before-close="handleClose"
>
<template #default> <template #default>
<el-row first> <el-form :rules="rules" ref="formRef" :model="reviseForm" label-width="auto">
<el-col :span="8" col-label class="energy-type-class" <el-row first>
>级数：</el-col <el-col :span="8" col-label class="energy-type-class">级数：</el-col>
> <el-col :span="16" col-value>
<el-col :span="16" col-value> <el-select placeholder="" size="small" v-model="reviseForm.windLevel" style="width: 370px">
<el-select <el-option v-for="(item, index) in 14" :key="index" :value="item" :label="item + '级风'" />
placeholder="" </el-select>
size="small" </el-col>
v-model="reviseForm.windLevel" </el-row>
style="width: 370px" <el-row>
> <el-col :span="8" col-label>对应温度：</el-col>
<el-option <el-col :span="16" col-value>
v-for="(item, index) in 14" <el-form-item prop="windTemp" style="padding: 0; margin: 0;">
:key="index" <el-input v-model="reviseForm.windTemp" placeholder="" style="width: 370px" />
:value="item" </el-form-item>
:label="item + '级风'" </el-col>
/> </el-row>
</el-select> <el-row>
</el-col> <el-col :span="8" col-label>描述：</el-col>
</el-row> <el-col :span="16" col-value>
<el-row> <el-input v-model="reviseForm.windDesc" placeholder="" style="width: 370px" />
<el-col :span="8" col-label>对应温度：</el-col> </el-col>
<el-col :span="16" col-value> </el-row>
<el-input </el-form>
v-model="reviseForm.windTemp"
maxlength="11"
placeholder=""
style="width: 370px"
/>
</el-col>
</el-row>
<el-row>
<el-col :span="8" col-label>描述：</el-col>
<el-col :span="16" col-value>
<el-input
maxlength="11"
v-model="reviseForm.windDesc"
placeholder=""
style="width: 370px"
/>
</el-col>
</el-row>
</template> </template>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
...@@ -266,57 +238,36 @@ function customSort(a, b) { ...@@ -266,57 +238,36 @@ function customSort(a, b) {
<el-button type="primary" @click="handleClose">关闭</el-button> <el-button type="primary" @click="handleClose">关闭</el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
<!-- 修改弹窗 --> <!-- 修改弹窗 -->
<el-dialog <el-dialog title="风力配置新增" v-model="addWindowOpen" width="700px" :before-close="handleClose">
title="风力配置新增"
v-model="addWindowOpen"
width="700px"
:before-close="handleClose"
>
<template #default> <template #default>
<el-row first> <el-form ref="formRef" :rules="rules" :model="addForm" label-width="auto">
<el-col :span="8" col-label class="energy-type-class" <el-row first>
>级数：</el-col <el-col :span="8" col-label class="energy-type-class">级数：</el-col>
> <el-col :span="16" col-value>
<el-col :span="16" col-value> <el-select placeholder="" size="small" v-model="addForm.windLevel" style="width: 370px">
<el-select <el-option v-for="(item, index) in 14" :key="index" :value="item" :label="item + '级风'" />
placeholder="" </el-select>
size="small" </el-col>
v-model="addForm.windLevel" </el-row>
style="width: 370px" <el-row>
> <el-col :span="8" col-label>对应温度：</el-col>
<el-option <el-col :span="16" col-value>
v-for="(item, index) in 14" <el-form-item prop="windTemp" style="padding: 0; margin: 0;">
:key="index" <el-input v-model="addForm.windTemp" placeholder="" style="width: 370px" />
:value="item" </el-form-item>
:label="item + '级风'" </el-col>
/> </el-row>
</el-select> <el-row>
</el-col> <el-col :span="8" col-label>描述：</el-col>
</el-row> <el-col :span="16" col-value>
<el-row> <el-input maxlength="11" v-model="addForm.windDesc" placeholder="" style="width: 370px" />
<el-col :span="8" col-label>对应温度：</el-col> </el-col>
<el-col :span="16" col-value> </el-row>
<el-input </el-form>
maxlength="11"
v-model="addForm.windTemp"
placeholder=""
style="width: 370px"
/>
</el-col>
</el-row>
<el-row>
<el-col :span="8" col-label>描述：</el-col>
<el-col :span="16" col-value>
<el-input
maxlength="11"
v-model="addForm.windDesc"
placeholder=""
style="width: 370px"
/>
</el-col>
</el-row>
</template> </template>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
...@@ -381,12 +332,10 @@ function customSort(a, b) { ...@@ -381,12 +332,10 @@ function customSort(a, b) {
font-size: 12px; font-size: 12px;
} }
::v-deep .el-table__body tr:hover > td { ::v-deep .el-table__body tr:hover>td {
background: linear-gradient( background: linear-gradient(to top,
to top, rgb(0, 198, 255),
rgb(0, 198, 255), rgb(255, 255, 255)) !important;
rgb(255, 255, 255)
) !important;
} }
.el-row[first] { .el-row[first] {
......
src/views/SchedulingPage/weatherManageSub/AddWindow.vue
View file @ 9dece472
...@@ -126,7 +126,7 @@ const rules = reactive({ ...@@ -126,7 +126,7 @@ const rules = reactive({
<el-row> <el-row>
<el-col :span="8" class="content-col-label">温度：</el-col> <el-col :span="8" class="content-col-label">温度：</el-col>
<el-col :span="16" class="content-col-value"> <el-col :span="16" class="content-col-value">
<el-form-item prop="temperature"> <el-form-item prop="temperature" style="padding: 0;margin: 0;">
<el-input maxlength="11" :input-style="inputStyle" v-model="addData.temperature" style="width: 510px" /> <el-input maxlength="11" :input-style="inputStyle" v-model="addData.temperature" style="width: 510px" />
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -135,7 +135,7 @@ const rules = reactive({ ...@@ -135,7 +135,7 @@ const rules = reactive({
<el-row> <el-row>
<el-col :span="8" class="content-col-label">风速：</el-col> <el-col :span="8" class="content-col-label">风速：</el-col>
<el-col :span="16" class="content-col-value"> <el-col :span="16" class="content-col-value">
<el-form-item prop="wind"> <el-form-item prop="wind" style="padding: 0;margin: 0;">
<el-input :input-style="inputStyle" maxlength="11" v-model="addData.wind" style="width: 510px" /> <el-input :input-style="inputStyle" maxlength="11" v-model="addData.wind" style="width: 510px" />
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -143,7 +143,7 @@ const rules = reactive({ ...@@ -143,7 +143,7 @@ const rules = reactive({
<el-row> <el-row>
<el-col :span="8" class="content-col-label">光照：</el-col> <el-col :span="8" class="content-col-label">光照：</el-col>
<el-col :span="16" class="content-col-value"> <el-col :span="16" class="content-col-value">
<el-form-item prop="illumination"> <el-form-item prop="illumination" style="padding: 0;margin: 0;">
<el-input :input-style="inputStyle" maxlength="11" v-model="addData.illumination" <el-input :input-style="inputStyle" maxlength="11" v-model="addData.illumination"
style="width: 510px" /> style="width: 510px" />
</el-form-item> </el-form-item>
...@@ -153,7 +153,7 @@ const rules = reactive({ ...@@ -153,7 +153,7 @@ const rules = reactive({
<el-row> <el-row>
<el-col :span="8" class="content-col-label">排序：</el-col> <el-col :span="8" class="content-col-label">排序：</el-col>
<el-col :span="16" class="content-col-value"> <el-col :span="16" class="content-col-value">
<el-form-item prop="sort"> <el-form-item prop="sort" style="padding: 0;margin: 0;">
<el-input :input-style="inputStyle" maxlength="11" v-model="addData.sort" style="width: 510px" /> <el-input :input-style="inputStyle" maxlength="11" v-model="addData.sort" style="width: 510px" />
</el-form-item> </el-form-item>
</el-col> </el-col>
...@@ -166,7 +166,7 @@ const rules = reactive({ ...@@ -166,7 +166,7 @@ const rules = reactive({
</el-col> </el-col>
<el-col :span="5" class="content-col-label">自动偏差百分比（%d）：</el-col> <el-col :span="5" class="content-col-label">自动偏差百分比（%d）：</el-col>
<el-col :span="7" class="content-col-value"> <el-col :span="7" class="content-col-value">
<el-form-item prop="diffPercentage"> <el-form-item prop="diffPercentage" style="padding: 0;margin: 0;">
<el-input v-float-number :input-style="inputStyle" maxlength="11" v-model="addData.diffPercentage" <el-input v-float-number :input-style="inputStyle" maxlength="11" v-model="addData.diffPercentage"
style="width: 240px" /> style="width: 240px" />
</el-form-item> </el-form-item>
...@@ -176,7 +176,7 @@ const rules = reactive({ ...@@ -176,7 +176,7 @@ const rules = reactive({
<el-row> <el-row>
<el-col :span="5" class="content-col-label">自动验证循环时间（分钟）：</el-col> <el-col :span="5" class="content-col-label">自动验证循环时间（分钟）：</el-col>
<el-col :span="7" class="content-col-value"> <el-col :span="7" class="content-col-value">
<el-form-item prop="timeoutMin"> <el-form-item prop="timeoutMin" style="padding: 0;margin: 0;">
<el-input v-float-number :input-style="inputStyle" maxlength="11" v-model="addData.timeoutMin" <el-input v-float-number :input-style="inputStyle" maxlength="11" v-model="addData.timeoutMin"
style="width: 240px" /> style="width: 240px" />
</el-form-item> </el-form-item>
...@@ -184,7 +184,7 @@ const rules = reactive({ ...@@ -184,7 +184,7 @@ const rules = reactive({
<el-col :span="5" class="content-col-label">自动调节温度（℃）：</el-col> <el-col :span="5" class="content-col-label">自动调节温度（℃）：</el-col>
<el-col :span="7" class="content-col-value"> <el-col :span="7" class="content-col-value">
<el-form-item prop="tempRegulation"> <el-form-item prop="tempRegulation" style="padding: 0;margin: 0;">
<el-input :input-style="inputStyle" maxlength="11" v-model="addData.tempRegulation" <el-input :input-style="inputStyle" maxlength="11" v-model="addData.tempRegulation"
style="width: 240px" /> style="width: 240px" />
</el-form-item> </el-form-item>
......
src/views/SchedulingPage/weatherManageSub/ReviseWindow.vue
View file @ 9dece472
<script setup> <script setup>
import {ref, defineProps, defineEmits, computed, isRef, onMounted, watchEffect} from "vue"; import { ref, defineProps, defineEmits, computed, isRef, onMounted, watchEffect, reactive } from "vue";
import cloneDeep from 'lodash/cloneDeep' import cloneDeep from 'lodash/cloneDeep'
import {vFloatNumber} from "@/utils/directives.js"; import { vFloatNumber } from "@/utils/directives.js";
const props = defineProps({ const props = defineProps({
open: { open: {
...@@ -12,7 +14,7 @@ const props = defineProps({ ...@@ -12,7 +14,7 @@ const props = defineProps({
data: { data: {
type: Object, type: Object,
default: {}, default: {},
required:true required: true
} }
}) })
const emit = defineEmits({ const emit = defineEmits({
...@@ -22,7 +24,31 @@ const emit = defineEmits({ ...@@ -22,7 +24,31 @@ const emit = defineEmits({
} }
}) })
const reviseData = ref({}) const reviseData = ref({})
watchEffect(()=>{
const formRef = ref()
//校验规则
const rules = reactive({
diffPercentage: [
{ pattern: /^([0-9]\d{0,1}|100$)(\.\d{1,4})?$/, "message": "请输入正确的百分比格式", trigger: "blur" }
],
wind: [
{ pattern: /^(\d{1,11})(\.[0-9]{1,4})?$/, "message": "风速必须是1-11位实数", trigger: "blur" }
],
illumination: [
{ pattern: /^(\d{1,11})(\.[0-9]{1,4})?$/, "message": "光照必须是1-11位实数", trigger: "blur" }
],
sort: [
{ pattern: /^(\d{1,11})$/, "message": "排序必须是1-11位正整数", trigger: "blur" }
],
timeoutMin: [
{ pattern: /^(\d{1,11})(\.[0-9]{1,4})?$/, "message": "判断时间必须是1-10位实数", trigger: "blur" }
],
temperature: [
{ pattern: /^(-?\d{1,11})(\.[0-9]{1,4})?$/, message: "请输入正确的调节温度", trigger: "blur" }
]
});
watchEffect(() => {
// reviseData.value = {...props.data} // reviseData.value = {...props.data}
props.data.transfers = [] props.data.transfers = []
props.data.updateNullFields = '' props.data.updateNullFields = ''
...@@ -44,80 +70,98 @@ const switchingisAuto = computed({ ...@@ -44,80 +70,98 @@ const switchingisAuto = computed({
} }
} }
}) // 可写计算属性,手动、自动模式切换 }) // 可写计算属性,手动、自动模式切换
function onOpen(){ function onOpen() {
// console.log('props.data数据',props.data) // console.log('props.data数据',props.data)
// console.log('修改弹窗接收到的数据',reviseData.value) // console.log('修改弹窗接收到的数据',reviseData.value)
} }
</script> </script>
<template> <template>
<el-dialog <el-dialog v-model="props.open" width="1000px" title="自定义修改" @close="emit('onCancel')" @open="onOpen">
v-model="props.open"
width="1000px"
title="自定义修改"
@close="emit('onCancel')"
@open="onOpen">
<template #default> <template #default>
<div class="dialog-content"> <div class="dialog-content">
<el-row style="border-top: #a6c3e9 1px solid"> <el-form ref="formRef" :model="reviseData" :rules="rules" label-width="auto">
<el-col :span="8" class="content-col-label">自定义名称：</el-col> <el-row style="border-top: #a6c3e9 1px solid">
<el-col :span="16" class="content-col-value"> <el-col :span="8" class="content-col-label">自定义名称：</el-col>
<el-input maxlength="11" :input-style="inputStyle" v-model="reviseData.customizeName" style="width: 510px"/> <el-col :span="16" class="content-col-value">
</el-col> <el-input maxlength="11" :input-style="inputStyle" v-model="reviseData.customizeName"
</el-row> style="width: 510px" />
<el-row> </el-col>
<el-col :span="8" class="content-col-label">干预模式：</el-col> </el-row>
<el-col :span="16" class="content-col-value"> <el-row>
<el-radio-group v-model="reviseData.isFixed"> <el-col :span="8" class="content-col-label">干预模式：</el-col>
<el-radio value="固定模式" :style="{marginLeft:'10px'}">固定模式</el-radio> <el-col :span="16" class="content-col-value">
<el-radio value="气象仪模式" :style="{marginLeft:'-15px'}">气象仪模式</el-radio> <el-radio-group v-model="reviseData.isFixed">
</el-radio-group> <el-radio value="固定模式" :style="{ marginLeft: '10px' }">固定模式</el-radio>
</el-col> <el-radio value="气象仪模式" :style="{ marginLeft: '-15px' }">气象仪模式</el-radio>
</el-row> </el-radio-group>
<el-row> </el-col>
<el-col :span="8" class="content-col-label">温度：</el-col> </el-row>
<el-col :span="16" class="content-col-value"> <el-row>
<el-input maxlength="11" :input-style="inputStyle" v-model="reviseData.temperature" style="width: 510px"/> <el-col :span="8" class="content-col-label">温度：</el-col>
</el-col> <el-col :span="16" class="content-col-value">
</el-row> <el-form-item prop="temperature" style="padding: 0;margin: 0;">
<el-row> <el-input maxlength="11" :input-style="inputStyle" v-model="reviseData.temperature"
<el-col :span="8" class="content-col-label">风速：</el-col> style="width: 510px" />
<el-col :span="16" class="content-col-value"> </el-form-item>
<el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.wind" style="width: 510px"/> </el-col>
</el-col> </el-row>
</el-row> <el-row>
<el-row> <el-col :span="8" class="content-col-label">风速：</el-col>
<el-col :span="8" class="content-col-label">光照：</el-col> <el-col :span="16" class="content-col-value">
<el-col :span="16" class="content-col-value"> <el-form-item prop="wind" style="padding: 0;margin: 0;">
<el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.illumination" style="width: 510px"/> <el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.wind" style="width: 510px" />
</el-col> </el-form-item>
</el-row> </el-col>
<el-row> </el-row>
<el-col :span="8" class="content-col-label">排序：</el-col> <el-row>
<el-col :span="16" class="content-col-value"> <el-col :span="8" class="content-col-label">光照：</el-col>
<el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.sort" style="width: 510px"/> <el-col :span="16" class="content-col-value">
</el-col> <el-form-item prop="illumination" style="padding: 0;margin: 0;">
</el-row> <el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.illumination"
<el-row> style="width: 510px" />
<el-col :span="5" class="content-col-label">切换自动模式：</el-col> </el-form-item>
<el-col :span="7" class="content-col-value"> </el-col>
<el-checkbox :style="{marginLeft:'10px'}" v-model="switchingisAuto" label="自动模式"/> </el-row>
</el-col> <el-row>
<el-col :span="5" class="content-col-label">自动偏差百分比（%d）：</el-col> <el-col :span="8" class="content-col-label">排序：</el-col>
<el-col :span="7" class="content-col-value"> <el-col :span="16" class="content-col-value">
<el-input v-float-number :input-style="inputStyle" maxlength="11" v-model="reviseData.diffPercentage" style="width: 240px"/> <el-form-item prop="sort" style="padding: 0;margin: 0;">
</el-col> <el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.sort" style="width: 510px" />
</el-row> </el-form-item>
<el-row> </el-col>
<el-col :span="5" class="content-col-label">自动验证循环时间（分钟）：</el-col> </el-row>
<el-col :span="7" class="content-col-value"> <el-row>
<el-input v-float-number :input-style="inputStyle" maxlength="11" v-model="reviseData.timeoutMin" style="width: 240px"/> <el-col :span="5" class="content-col-label">切换自动模式：</el-col>
</el-col> <el-col :span="7" class="content-col-value">
<el-col :span="5" class="content-col-label">自动调节温度（℃）：</el-col> <el-checkbox :style="{ marginLeft: '10px' }" v-model="switchingisAuto" label="自动模式" />
<el-col :span="7" class="content-col-value"> </el-col>
<el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.tempRegulation" style="width: 240px"/> <el-col :span="5" class="content-col-label">自动偏差百分比（%d）：</el-col>
</el-col> <el-col :span="7" class="content-col-value">
</el-row> <el-form-item prop="diffPercentage" style="padding: 0;margin: 0;">
<el-input v-float-number :input-style="inputStyle" maxlength="11" v-model="reviseData.diffPercentage"
style="width: 240px" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="5" class="content-col-label">自动验证循环时间（分钟）：</el-col>
<el-col :span="7" class="content-col-value">
<el-form-item prop="timeoutMin" style="padding: 0;margin: 0;">
<el-input v-float-number :input-style="inputStyle" maxlength="11" v-model="reviseData.timeoutMin"
style="width: 240px" />
</el-form-item>
</el-col>
<el-col :span="5" class="content-col-label">自动调节温度（℃）：</el-col>
<el-col :span="7" class="content-col-value">
<el-form-item prop="tempRegulation" style="padding: 0;margin: 0;">
<el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.tempRegulation"
style="width: 240px" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div> </div>
</template> </template>
<template #footer> <template #footer>
...@@ -130,7 +174,6 @@ function onOpen(){ ...@@ -130,7 +174,6 @@ function onOpen(){
</template> </template>
<style scoped> <style scoped>
.el-row { .el-row {
color: black; color: black;
height: 35px; height: 35px;
...@@ -158,10 +201,12 @@ function onOpen(){ ...@@ -158,10 +201,12 @@ function onOpen(){
.el-input { .el-input {
color: black; color: black;
} }
.el-radio{
.el-radio {
color: black; color: black;
} }
.el-checkbox{
.el-checkbox {
color: black; color: black;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment