Skip to content

W
web-project
Commit 5ff241bb authored by jiaxu.yan's avatar jiaxu.yan
Browse files
Options

feat: 查漏补缺

parent dd2b2761
Hide whitespace changes
Inline Side-by-side
Showing with 520 additions and 350 deletions
src/views/SchedulingPage/AnnualParamPage.vue
View file @ 5ff241bb
......@@ -216,7 +216,7 @@ function resetInput() {
</el-col>
</el-row>
<el-row>
<el-col :span="8" col-label>标准：</el-col>
<el-col :span="8" col-label>热指标(W/m²)：</el-col>
<el-col :span="16" col-value>
<el-input v-float-number v-model="reviseForm.standard" placeholder="" style="width: 370px"/>
</el-col>
......@@ -281,7 +281,7 @@ function resetInput() {
</el-col>
</el-row>
<el-row>
<el-col :span="8" col-label>标准：</el-col>
<el-col :span="8" col-label>热指标(W/m²)：</el-col>
<el-col :span="16" col-value>
<el-input v-float-number v-model="addForm.standard" placeholder="" style="width: 370px"/>
</el-col>
......
src/views/SchedulingPage/EnergyManagePage.vue
View file @ 5ff241bb
<script setup>
import { ref, onMounted, getCurrentInstance, reactive, nextTick } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import axios from 'axios'
import { Search, Document } from "@element-plus/icons-vue"
import { postEnergyManage, postEnergyDel, postEnergyUpdate } from "@/api/scheduling"
import http from '../../api/http'
import loading from 'element-plus'
import store from '../../store'
import { ref, onMounted, getCurrentInstance, reactive, nextTick } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import axios from "axios";
import { Search, Document } from "@element-plus/icons-vue";
import {
postEnergyManage,
postEnergyDel,
postEnergyUpdate,
} from "@/api/scheduling";
import http from "../../api/http";
import loading from "element-plus";
import store from "../../store";
import { vFloatNumber } from "@/utils/directives.js";
const { proxy } = getCurrentInstance()
const tableData = ref([{}])
const { proxy } = getCurrentInstance();
const tableData = ref([{}]);
const formEnergy = ref({
"updateNullFields": "",
"supplyId": "",
"energyType": "",
"record": "",
"recordDate": "",
"energyName": ''
})
const energyForm = ref()
const dialogVisible = ref(false)
updateNullFields: "",
supplyId: "",
energyType: "",
record: "",
recordDate: "",
energyName: "",
});
const energyForm = ref();
const dialogVisible = ref(false);
const getEnergyData = async () => {
await http.post("/api/energy/getData", config.supplyType).then(res => {
// console.log("res:", res);
tableData.value = res.data
}).catch(err => {
console.log(error)
})
ElMessage.success('获取数据成功')
}
await http
.post("/api/energy/getData", config.supplyType)
.then((res) => {
// console.log("res:", res);
tableData.value = res.data;
})
.catch((err) => {
console.log(error);
});
ElMessage.success("获取数据成功");
};
//获取换热机组列表
// const getSupplys =() => {
......@@ -37,72 +44,69 @@ const getEnergyData = async () => {
// console.log(res.data);
// }
const tableLabel = reactive([
{
prop: 'allowPagingId',
prop: "allowPagingId",
label: "序号",
width: 100
width: 100,
},
{
prop: 'supplyName',
label: '名称',
width: 200
prop: "supplyName",
label: "名称",
width: 200,
},
{
prop: 'energyType',
label: "能源类型"
prop: "energyType",
label: "能源类型",
},
{
prop: 'record',
prop: "record",
label: "用度",
width: 200
width: 200,
},
{
prop: 'recordDate',
prop: "recordDate",
label: "日期",
width: 300
}
])
width: 300,
},
]);
const formInline = reactive({
keyWord: ''
})
keyWord: "",
});
const config = reactive({
supplyType: ["0", "1", "2", "3", "4"],
})
});
const handleSearch = () => {
config.supplyType = formInline.keyWord
config.supplyType = [`${config.supplyType}`]
config.supplyType = formInline.keyWord;
config.supplyType = [`${config.supplyType}`];
getEnergyData(),
formEnergy.value.energyType = '',
ElMessage.success('获取数据成功')
}
(formEnergy.value.energyType = ""),
ElMessage.success("获取数据成功");
};
const timeFormat = (time) => {
var time = new Date(time)
var year = time.getFullYear()
var month = time.getMonth()
var date = time.getDate()
var time = new Date(time);
var year = time.getFullYear();
var month = time.getMonth();
var date = time.getDate();
function add(m) {
return m < 10 ? '0' + m : m
return m < 10 ? "0" + m : m;
}
return year + '/' + add(month) + '/' + add(date) + ' 0:00:00'
}
return year + "/" + add(month) + "/" + add(date) + " 0:00:00";
};
//表单校验规则
const rules = reactive({
supplyId: [{ required: true, message: "名称是必填项", trigger: "blur" }],
energyType: [
{ required: true, message: "能源类型是必填项", trigger: "blur" },
],
record: [{ required: true, message: "能源用度是必选项", trigger: "change" }],
recordDate: [{ required: true, message: "日期是必选项" }]
})
recordDate: [{ required: true, message: "日期是必选项" }],
});
// const handleChange = (page) => {
// config.page = page,
......@@ -132,98 +136,105 @@ const rules = reactive({
const handleDelete = async (row) => {
console.log(row.energyId);
console.log('"' + row.energyId + '"');
let EnergyId = row.energyId
let EnergyId = row.energyId;
await ElMessageBox.confirm("你确定要删除吗？", {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
confirmButtonClass: 'ExitConfirmButton'
})
const res = await http.get("api/energy/Delete", { params: { EnergyId: row.energyId } }, false)
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
confirmButtonClass: "ExitConfirmButton",
});
const res = await http.get(
"api/energy/Delete",
{ params: { EnergyId: row.energyId } },
false
);
if (res.success) {
ElMessage.success("删除成功")
getEnergyData()
ElMessage.success("删除成功");
getEnergyData();
} else {
ElMessage.error("删除失败")
ElMessage.error("删除失败");
}
}
};
// 新增
const action = ref('add')
const action = ref("add");
const handleClose = () => {
dialogVisible.value = false
proxy.$ref['energyForm'].resetFields()
}
const handleCancel = () => {
dialogVisible.value = false
proxy.$ref['energyForm'].resetFields()
}
dialogVisible.value = false;
proxy.$ref["energyForm"].resetFields();
};
const handleCancel = (formEl) => {
dialogVisible.value = false;
if (!formEl) return;
formEl.resetFields();
};
const handleAdd = () => {
action.value = "add",
dialogVisible.value = true;
proxy.$refs['energyForm'].resetFields()
formEnergy.supplyType = '',
formEnergy.energyType = ''
}
action.value = "add"
dialogVisible.value = true;
formEnergy.supplyType = "";
formEnergy.energyType = "";
};
const handleEdit = (val) => {
action.value = "edit"
dialogVisible.value = true
action.value = "edit";
dialogVisible.value = true;
nextTick(() => {
Object.assign(formEnergy.value, { ...val })
Object.assign(formEnergy.value, { ...val });
console.log("val:", val);
// var newArr = []
// formEnergy.supplyId.map((item)=> {
// newArr.push(item[item.length-1])
// })
// console.log(newArr);
})
});
};
}
const onSubmit = () => {
const onSubmit = (formEl) => {
energyForm.value.validate(async (valid) => {
if (valid) {
let res = null;
formEnergy.recordDate = /^\d{4}-\d{2}-\d{2}$/.test(formEnergy.recordDate) ? formEnergy.recordDate : timeFormat(formEnergy.recordDate)
if (action.value === 'add') {
await http.post("api/energy/Save", { ...formEnergy.value }, false).then(res => {
}).then(res => {
ElMessage({
type: 'success', message: '新增成功'
})
getEnergyData()
})
formEnergy.recordDate = /^\d{4}-\d{2}-\d{2}$/.test(formEnergy.recordDate)
? formEnergy.recordDate
: timeFormat(formEnergy.recordDate);
if (action.value === "add") {
await http
.post("api/energy/Save", { ...formEnergy.value }, false)
.then((res) => {})
.then((res) => {
ElMessage({
type: "success",
message: "新增成功",
});
getEnergyData();
});
if (res) {
dialogVisible.value = false
getEnergyData()
dialogVisible.value = false;
getEnergyData();
if (!formEl) return;
formEl.resetFields();
}
} else {
res = postEnergyUpdate(formEnergy.value)
proxy.$refs['energyForm'].resetFields()
dialogVisible.value = false
formEnergy.value.supplyId = ''
formEnergy.energyType = ''
getEnergyData()
res = postEnergyUpdate(formEnergy.value);
if (!formEl) return;
formEl.resetFields();
dialogVisible.value = false;
formEnergy.value.supplyId = "";
formEnergy.energyType = "";
getEnergyData();
}
} else {
ElMessage({
showClose: true,
message: '请输入正确的内容',
type: 'error'
})
message: "请输入正确的内容",
type: "error",
});
}
})
}
const props = { multiple: false, emitPath: false, checkStrictly: true }
});
};
const props = { multiple: false, emitPath: false, checkStrictly: true };
const enterpriseId = ref();
let supplyIdOptions = reactive([])
let supplyIdOptions = reactive([]);
getEnterprise();
function getEnterprise() {
var result = store.getters.getEnterprise();
......@@ -232,13 +243,13 @@ function getEnterprise() {
}
}
const PatrolInfo = reactive({
"Id": [],
"startTime": "",
"endTime": "",
"start": 0,
"count": 30,
"sort": ""
})
Id: [],
startTime: "",
endTime: "",
start: 0,
count: 30,
sort: "",
});
const options = reactive([]);
const getSupplys = () => {
loading.value = true;
......@@ -246,55 +257,82 @@ const getSupplys = () => {
PatrolInfo.Id.length = 0;
var result = store.getters.getEnterprise();
if (result) {
result.forEach(element => {
result.forEach((element) => {
if (element.enterpriseId === enterpriseId.value) {
if (element.enterpriseId === "9BCA54BC-8F27-4849-8D7D-50C5099E1949".toLowerCase()) {
element.serviceCenterList.forEach(center => {
if (
element.enterpriseId ===
"9BCA54BC-8F27-4849-8D7D-50C5099E1949".toLowerCase()
) {
element.serviceCenterList.forEach((center) => {
let c = [];
center.supplyList.forEach(supply => {
center.supplyList.forEach((supply) => {
let chi = [];
supply.transferList.forEach(unit => {
supply.transferList.forEach((unit) => {
// chi.push({ value: unit.unitId, label: unit.unitName });
});
c.push({ children: chi, label: supply.supplyName, value: supply.supplyId });
c.push({
children: chi,
label: supply.supplyName,
value: supply.supplyId,
});
});
options.push({ children: c, label: center.serviceCenterName });
})
});
} else {
element.supplyList.forEach(element => {
element.supplyList.forEach((element) => {
let chi = [];
element.transferList.forEach(unit => {
element.transferList.forEach((unit) => {
chi.push({ value: unit.unitId, label: unit.unitName });
})
});
options.push({ children: chi, label: element.supplyName });
})
});
}
}
});
}
}
};
onMounted(() => {
getEnergyData()
getSupplys()
})
getEnergyData();
getSupplys();
});
</script>
<template>
<table class="table_search" cellpadding="0" cellspacing="1" style="background-color: #99bbe8;width: 100%;">
<tr style="height: 10px;">
<table
class="table_search"
cellpadding="0"
cellspacing="1"
style="background-color: #99bbe8; width: 100%"
>
<tr style="height: 10px">
<th width="30%">
<span>能源类型：</span>
</th>
<th style=" background-color: #ffffff;">
<th style="background-color: #ffffff">
<div class="th_div">
<el-form ref="formRef" :model="formInline" :inline="true"
style="display: flex; justify-content: center; align-items: center; margin: 0;">
<el-form-item class="select-clean" prop="supplyType" label-width="280px" style="margin: 0;">
<el-select v-model="formInline.keyWord" placeholder="请选择" style="width:360px; margin-left: 20px;">
<el-form
ref="formRef"
:model="formInline"
:inline="true"
style="
display: flex;
justify-content: center;
align-items: center;
margin: 0;
"
>
<el-form-item
class="select-clean"
prop="supplyType"
label-width="280px"
style="margin: 0"
>
<el-select
v-model="formInline.keyWord"
placeholder="请选择"
style="width: 360px; margin-left: 20px"
>
<el-option label="非节能" value="0" />
<el-option label="一步节能" value="1" />
<el-option label="二步节能" value="2" />
......@@ -304,9 +342,8 @@ onMounted(() => {
</el-form-item>
</el-form>
</div>
</th>
<th width="100%" style="background-color: #ffffff;text-align: left;">
<th width="100%" style="background-color: #ffffff; text-align: left">
<el-button type="primary" @click="handleSearch">
<Search style="width: 1em; height: 1em; margin-right: 8px" />
查询
......@@ -319,20 +356,47 @@ onMounted(() => {
</tr>
</table>
<div class="table">
<el-table :data="tableData" style="width: 100%;font-size: 12px;color: #181818;"
:header-cell-style="{ color: '#225475', backgroundColor: '#B8CFEE', 'text-align': 'center', height: '30px', padding: '0px', border: '1px solid #99bbe8' }"
:cell-style="{ 'text-align': 'center', padding: '0px' }" :row-style="{ height: '30px', padding: '0px' }" border
stripe>
<el-table-column v-for="item in tableLabel" :key="item.prop" :width="item.width ? item.width : 150"
:prop="item.prop" :label="item.label" />
<el-table
:data="tableData"
style="width: 100%; font-size: 12px; color: #181818"
:header-cell-style="{
color: '#225475',
backgroundColor: '#B8CFEE',
'text-align': 'center',
height: '30px',
padding: '0px',
border: '1px solid #99bbe8',
}"
:cell-style="{ 'text-align': 'center', padding: '0px' }"
:row-style="{ height: '30px', padding: '0px' }"
border
stripe
>
<el-table-column
v-for="item in tableLabel"
:key="item.prop"
:width="item.width ? item.width : 150"
:prop="item.prop"
:label="item.label"
/>
<el-table-column fixed="right" label="操作" min-width="140">
<template #default="scope">
<el-button link type="primary" size="small" @click="handleEdit(scope.row)">
<el-button
link
type="primary"
size="small"
@click="handleEdit(scope.row)"
>
编辑
</el-button>
<el-button link type="primary" size="small" @click="handleDelete(scope.row)">删除</el-button>
<el-button
link
type="primary"
size="small"
@click="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
<template #empty>
......@@ -349,12 +413,23 @@ onMounted(() => {
</div> -->
</div>
<el-dialog v-model="dialogVisible" :title="action == 'add' ? '数据新增' : '数据修改'" width="50%" :before-close="handleClose">
<el-form :inline="true" :model="formEnergy" :rules="rules" ref="energyForm" :hide-required-asterisk="true">
<el-dialog
v-model="dialogVisible"
:title="action == 'add' ? '数据新增' : '数据修改'"
width="50%"
:before-close="handleClose"
>
<el-form
:inline="true"
:model="formEnergy"
:rules="rules"
ref="energyForm"
:hide-required-asterisk="true"
>
<table cellpadding="0" cellspacing="1" style="background-color: #99bbe8">
<tr>
<th style="width: 25%">名称</th>
<td style="width: 60%; margin:0; padding: 0">
<th style="width: 25%">供热站</th>
<td style="width: 60%; margin: 0; padding: 0">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: left">
......@@ -362,9 +437,20 @@ onMounted(() => {
<el-option label="东部供热站" value="DFA20074-8731-457F-B63F-4E1858CFE266" />
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select> -->
<el-form-item prop="supplyName" style="margin: 0;padding: 0;width: 100%;">
<el-cascader :options="options" v-model="formEnergy.supplyId" :props="props" collapse-tags clearable
:show-all-levels="false" placeholder="请选择" class="el-cascader-menu" />
<el-form-item
prop="supplyName"
style="margin: 0; padding: 0; width: 100%"
>
<el-cascader
:options="options"
v-model="formEnergy.supplyId"
:props="props"
collapse-tags
clearable
:show-all-levels="false"
placeholder="请选择"
class="el-cascader-menu"
/>
</el-form-item>
</td>
</tr>
......@@ -374,17 +460,23 @@ onMounted(() => {
<tr>
<th style="width: 25%">能源类型</th>
<td style="width: 60%; margin:0; padding: 0">
<td style="width: 60%; margin: 0; padding: 0">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: left">
<el-form-item prop="energyType" style="margin: 0;padding: 0;width: 100%;">
<el-select v-model="formEnergy.energyType" placeholder="请选择">
<el-option label="非节能" value="0" />
<el-option label="一步节能" value="1" />
<el-option label="二步节能" value="2" />
<el-option label="三步节能" value="3" />
<el-option label="四步节能" value="4" />
<el-form-item
prop="energyType"
style="margin: 0; padding: 0; width: 100%"
>
<el-select
v-model="formEnergy.energyType"
placeholder="请选择"
>
<el-option label="非节能" :value="0" />
<el-option label="一步节能" :value="1" />
<el-option label="二步节能" :value="2" />
<el-option label="三步节能" :value="3" />
<el-option label="四步节能" :value="4" />
</el-select>
</el-form-item>
</td>
......@@ -393,15 +485,21 @@ onMounted(() => {
</td>
</tr>
<tr>
<th style="width: 25%">能源用度</th>
<td style="width: 60%; margin:0; padding: 0">
<td style="width: 60%; margin: 0; padding: 0">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: left;">
<el-form-item prop="record" style="margin: 0;padding: 0;width: 100%;">
<el-input v-float-number v-model="formEnergy.record" placeholder="请输入能源用度" />
<td style="text-align: left">
<el-form-item
prop="record"
style="margin: 0; padding: 0; width: 100%"
>
<el-input
v-float-number
v-model="formEnergy.record"
placeholder="请输入能源用度"
/>
</el-form-item>
</td>
</tr>
......@@ -409,43 +507,46 @@ onMounted(() => {
</td>
</tr>
<tr>
<th style="width: 25%">日期</th>
<td style="width: 60%; margin:0; padding: 0">
<td style="width: 60%; margin: 0; padding: 0">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<el-form-item prop="recordDate" style="margin: 0;padding: 0;width: 100%;">
<el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="formEnergy.recordDate" type="datetime"
placeholder="请输入日期" style="width: 100%" />
<el-form-item
prop="recordDate"
style="margin: 0; padding: 0; width: 100%"
>
<el-date-picker
value-format="YYYY-MM-DD HH:mm:ss"
v-model="formEnergy.recordDate"
type="datetime"
placeholder="请输入日期"
style="width: 100%"
/>
</el-form-item>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="dialog-footer">
<el-button type="primary" @click="handleCancel">关闭</el-button>
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button type="primary" @click="handleCancel(energyForm)"
>关闭</el-button
>
<el-button type="primary" @click="onSubmit(energyForm)">保存</el-button>
</div>
</el-form>
</el-dialog>
</template>
<style scoped lang="less">
.energy-header {
display: flex;
}
.select-clean {
display: flex;
}
......@@ -455,7 +556,6 @@ onMounted(() => {
margin-left: 4px;
}
.table_search {
width: 100%;
margin-left: 4px;
......@@ -493,11 +593,15 @@ table td {
}
//鼠标所在行的颜色
::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;
}
::v-deep .el-table__body tr.current-row>td {
::v-deep .el-table__body tr.current-row > td {
background-color: #92cbf1 !important;
}
......@@ -514,7 +618,6 @@ table td {
// bottom: 30px;
// justify-content: space-between;
// .bottom-left {
// display: flex;
// }
......@@ -522,4 +625,5 @@ table td {
// .pager {
// display: flex;
// }
// }</style>
// }
</style>
src/views/SchedulingPage/InstantHeatPage.vue
View file @ 5ff241bb
......@@ -90,7 +90,6 @@
<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { postInstantHeat, postInstantHeatUpdate } from "@/api/scheduling"
import { toRaw } from "@vue/reactivity";
import { ElMessage } from "element-plus";
import http from "../../api/http";
import { vFloatNumber } from "@/utils/directives.js";
......
src/views/SchedulingPage/PhenomenonPage.vue
View file @ 5ff241bb
......@@ -153,23 +153,19 @@ function getData(){
width="700px"
:before-close="handleClose">
<template #default>
<el-row first>
<!-- <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.phenomenonName" style="width: 370px">
<el-option value="晴天" label="晴天"/>
<el-option value="多云" label="多云"/>
<el-option value="阴天" label="阴天"/>
</el-select>
<el-input placeholder="" size="small" v-model="reviseForm.phenomenonName" style="width: 370px"/>
</el-col>
</el-row>
</el-row> -->
<el-row>
<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-select placeholder="" size="small" v-model="reviseForm.phenomenonType" style="width: 370px">
<el-option value="1" label="1"/>
<el-option value="2" label="2"/>
<el-option value="3" label="3"/>
<el-option :value="1" label="晴天"/>
<el-option :value="2" label="多云"/>
<el-option :value="3" label="阴天"/>
</el-select>
</el-col>
</el-row>
......@@ -199,23 +195,19 @@ function getData(){
width="700px"
:before-close="handleClose">
<template #default>
<el-row first>
<!-- <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.phenomenonName" style="width: 370px">
<el-option value="晴天" label="晴天"/>
<el-option value="多云" label="多云"/>
<el-option value="阴天" label="阴天"/>
</el-select>
<el-input placeholder="" size="small" v-model="reviseForm.phenomenonName" style="width: 370px"/>
</el-col>
</el-row>
</el-row> -->
<el-row>
<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-select placeholder="" size="small" v-model="addForm.phenomenonType" style="width: 370px">
<el-option value="1" label="1"/>
<el-option value="2" label="2"/>
<el-option value="3" label="3"/>
<el-option :value="1" label="晴天"/>
<el-option :value="2" label="多云"/>
<el-option :value="3" label="阴天"/>
</el-select>
</el-col>
</el-row>
......
src/views/SchedulingPage/WindManagePage.vue
View file @ 5ff241bb
<script setup>
import {onMounted, ref, watch, watchEffect} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {getWind, deleteWind, alterWind, addWind} from "@/api/scheduling.js"
import { onMounted, ref, watch, watchEffect } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getWind, deleteWind, alterWind, addWind } from "@/api/scheduling.js";
import store from "@/store/index.js";
import {vFloatNumber} from "@/utils/directives.js";
import { vFloatNumber } from "@/utils/directives.js";
const data = ref()
const dataBackup = ref([])
const searchKey = ref('') // 查询参数
const reviseWindowOpen = ref(false)
const addWindowOpen = ref(false)
const reviseForm = ref({}) // 修改表单
const addForm = ref({}) // 新增表单
const tableHeaderClass = data => { // 表头样式
return 'table-header-class'
}
const tableBodyClass = data => { // 表体样式
return 'table-body-class'
}
const data = ref();
const dataBackup = ref([]);
const searchKey = ref(""); // 查询参数
const reviseWindowOpen = ref(false);
const addWindowOpen = ref(false);
const reviseForm = ref({}); // 修改表单
const addForm = ref({}); // 新增表单
const tableHeaderClass = (data) => {
// 表头样式
return "table-header-class";
};
const tableBodyClass = (data) => {
// 表体样式
return "table-body-class";
};
function add() {
addWindowOpen.value = true
addWindowOpen.value = true;
} // 新增按钮单击事件
function revise(val) {
reviseForm.value = {...val}
reviseWindowOpen.value = true
reviseForm.value = { ...val };
reviseForm.value.windLevel = Number(reviseForm.value.windLevel);
reviseWindowOpen.value = true;
} // 修改按钮单击事件
function omit(val) {
let id = val.windId
ElMessageBox.confirm(
'点击确定后，该条数据将删除，是否继续？',
'Warning',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
deleteWind(id).then(res => {
getData()
ElMessage({
message: '删除成功.',
type: 'success',
})
})
}).catch(err => {
ElMessage({
message: '删除失败.',
type: 'error',
})
let id = val.windId;
ElMessageBox.confirm("点击确定后，该条数据将删除，是否继续？", "Warning", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
deleteWind(id).then((res) => {
getData();
ElMessage({
message: "删除成功.",
type: "success",
});
});
})
.catch((err) => {
ElMessage({
message: "删除失败.",
type: "error",
});
});
} // 删除按钮单击事件
function search() {
if(!searchKey.value){
getData()
}else {
data.value = dataBackup.value.filter(item => searchKey.value == item.windLevel)
if (!searchKey.value) {
getData();
} else {
data.value = dataBackup.value.filter(
(item) => searchKey.value == item.windLevel
);
}
} // 处理查询
function handleClose() {
reviseWindowOpen.value = false
addWindowOpen.value = false
resetInput()
reviseWindowOpen.value = false;
addWindowOpen.value = false;
resetInput();
} // 关闭弹窗
function onReviseSubmit() {
alterWind(reviseForm.value).then(res => {
getData()
handleClose()
ElMessage({
message: '修改成功.',
type: 'success',
})
}).catch(err=>{
ElMessage({
message: '修改失败.',
type: 'error',
alterWind(reviseForm.value)
.then((res) => {
getData();
handleClose();
ElMessage({
message: "修改成功.",
type: "success",
});
})
})
.catch((err) => {
ElMessage({
message: "修改失败.",
type: "error",
});
});
} // 修改表单提交
function onAddSubmit() {
addWind(addForm.value).then(res => {
getData()
handleClose()
ElMessage({
message: '新增成功.',
type: 'success',
})
}).catch(err=>[
ElMessage({
message: '新增失败.',
type: 'error',
addWind(addForm.value)
.then((res) => {
getData();
handleClose();
ElMessage({
message: "新增成功.",
type: "success",
});
})
])
.catch((err) => [
ElMessage({
message: "新增失败.",
type: "error",
}),
]);
} // 新增表单提交
onMounted(() => {
getData()
})
getData();
});
function getData() {
getWind().then(res => {
data.value = res.data
dataBackup.value = [...data.value]
})
getWind().then((res) => {
data.value = res.data;
dataBackup.value = [...data.value];
});
}
function resetInput() {
addForm.value = {
windLevel: '',
windTemp: '',
windDesc: ''
}
windLevel: "",
windTemp: "",
windDesc: "",
};
}
</script>
<template>
......@@ -120,31 +126,50 @@ function resetInput() {
<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="search" class="add-search-btn"
>查询</el-button
>
<el-button type="primary" @click="add" class="add-search-btn"
>新增</el-button
>
</div>
<div class="table-wrapper">
<el-table
:data="data"
stripe
border
style="width: 100%"
:header-cell-class-name="tableHeaderClass"
:row-class-name="tableBodyClass">
<el-table-column type="index" label="序号" align="center" width="100"/>
<el-table-column prop="windLevel" label="级数"/>
<el-table-column prop="windTemp" label="对应温度"/>
<el-table-column prop="windDesc" label="描述"/>
:data="data"
stripe
border
style="width: 100%"
:header-cell-class-name="tableHeaderClass"
:row-class-name="tableBodyClass"
>
<el-table-column type="index" label="序号" align="center" width="100" />
<el-table-column prop="windLevel" label="级数" />
<el-table-column prop="windTemp" label="对应温度" />
<el-table-column prop="windDesc" 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-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>
......@@ -152,29 +177,51 @@ function resetInput() {
</div>
<div class="dialog-window">
<el-dialog
title="风力配置修改"
v-model="reviseWindowOpen"
width="700px"
:before-close="handleClose">
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="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
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-float-number v-model="reviseForm.windTemp" placeholder="" style="width: 370px"/>
<el-input
v-float-number
v-model="reviseForm.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 v-model="reviseForm.windDesc" placeholder="" style="width: 370px"/>
<el-input
v-model="reviseForm.windDesc"
placeholder=""
style="width: 370px"
/>
</el-col>
</el-row>
</template>
......@@ -184,31 +231,54 @@ function resetInput() {
<el-button type="primary" @click="handleClose">关闭</el-button>
</div>
</template>
</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>
<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-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
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 v-float-number v-model="addForm.windTemp" placeholder="" style="width: 370px"/>
<el-input
v-float-number
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 v-model="addForm.windDesc" placeholder="" style="width: 370px"/>
<el-input
v-model="addForm.windDesc"
placeholder=""
style="width: 370px"
/>
</el-col>
</el-row>
</template>
......@@ -218,7 +288,8 @@ function resetInput() {
<el-button type="primary" @click="handleClose">关闭</el-button>
</div>
</template>
</el-dialog> <!-- 新增弹窗 -->
</el-dialog>
<!-- 新增弹窗 -->
</div>
</div>
</template>
......@@ -275,7 +346,11 @@ function resetInput() {
}
::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] {
......@@ -311,4 +386,4 @@ function resetInput() {
color: black;
height: 24px;
}
</style>
\ No newline at end of file
</style>
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