Commit 9dece472 authored by xuke's avatar xuke

天气字段规范

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