commit
d15c6d60ec
@ -1,16 +1,230 @@ |
||||
<template> |
||||
<div class="app-container home"> |
||||
<h1>策略管理</h1> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="24" :xs="24"> |
||||
<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="88px"> |
||||
<el-form-item label="策略名称:" prop="name"> |
||||
<el-select v-model="queryParams.week" placeholder="请选择" style="width: 240px"> |
||||
<el-option label="策略一" value="null" /> |
||||
<el-option label="策略二" value="one" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
<el-row :gutter="10" class="mb8"> |
||||
<el-col :span="1.5"> |
||||
<el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
<div class="dev_control_table"> |
||||
<el-table :data="timingList" height="500px"> |
||||
<el-table-column label="序号" align="center" width="50"/> |
||||
<el-table-column label="策略名称" align="center" prop="name" width="200"/> |
||||
<el-table-column label="电磁锅炉进水温度" align="center" prop="DcTemIn"/> |
||||
<el-table-column label="电磁锅炉出水温度" align="center" prop="DcTemOut"/> |
||||
<el-table-column label="空气源热泵进水温度" align="center" prop="KqTemIn"/> |
||||
<el-table-column label="空气源热泵出水温度" align="center" prop="KqTemOut"/> |
||||
<el-table-column label="发热电缆温度" align="center" prop="DlTem"/> |
||||
<el-table-column label="操作" align="center" prop="handle"> |
||||
<template v-slot="scope"> |
||||
<el-button type="primary" size="small" icon="Edit" v-hasPermi="['system:cl:edit']">修改</el-button> |
||||
<el-button type="danger" size="small" :icon="Delete">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<el-pagination |
||||
v-model:current-page="currentPage" |
||||
v-model:page-size="pageSize" |
||||
:page-sizes="[5, 10, 20, 50]" |
||||
:small="small" |
||||
:disabled="disabled" |
||||
:background="background" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="timingList.length" |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange"/> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
|
||||
|
||||
<!-- 新增对话框 --> |
||||
<el-dialog :title="title" v-model="open" width="600px" append-to-body> |
||||
<el-form :model="timingForm" ref="userRef" label-width="88px"> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-form-item label="策略名称:" prop="name"> |
||||
<el-input v-model="timingForm.name" placeholder="请输入策略名称" maxlength="11" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="电磁锅炉:" prop="DcTem" > |
||||
<el-input v-model="timingForm.DcTemIn" placeholder="进水温度" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="电磁锅炉:" prop="DcTem" > |
||||
<el-input v-model="timingForm.DcTemOut" placeholder="出水温度" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="空气源热泵:" prop="KqTem" > |
||||
<el-input v-model="timingForm.KqTemIn" placeholder="进水温度" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-form-item label="空气源热泵:" prop="DcTem" > |
||||
<el-input v-model="timingForm.KqTemOut" placeholder="出水温度" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="24"> |
||||
<el-form-item label="发热电缆:" prop="DlTem"> |
||||
<el-input v-model="timingForm.DlTem" placeholder="温度" maxlength="11" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<template #footer> |
||||
<div class="dialog-footer"> |
||||
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
<el-button @click="cancel">取 消</el-button> |
||||
</div> |
||||
</template> |
||||
</el-dialog> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="Index"> |
||||
import {Delete} from '@element-plus/icons-vue' |
||||
import {ref,reactive,watch} from "vue"; |
||||
|
||||
|
||||
/** 筛选处理 */ |
||||
const dateRange = ref([]); |
||||
const data = reactive({ |
||||
queryParams: { |
||||
name: '', |
||||
} |
||||
}); |
||||
//搜索按钮 |
||||
function handleQuery(){ |
||||
} |
||||
//重置按钮 |
||||
function resetQuery(){ |
||||
dateRange.value = [] |
||||
} |
||||
|
||||
|
||||
/** 数据表格处理 */ |
||||
const timingList = reactive([ |
||||
{ |
||||
name:'策略一', |
||||
DlTem:'22', |
||||
DcTemIn:'44', |
||||
DcTemOut:'55', |
||||
KqTemIn:'66', |
||||
KqTemOut:'77' |
||||
}, |
||||
{ |
||||
name:'策略二', |
||||
DlTem:'33', |
||||
DcTemIn:'55', |
||||
DcTemOut:'66', |
||||
KqTemIn:'77', |
||||
KqTemOut:'88' |
||||
} |
||||
]) |
||||
const currentPage = ref(1) |
||||
const pageSize = ref(5) |
||||
const small = ref(false) |
||||
const background = ref(false) |
||||
const disabled = ref(false) |
||||
const handleSizeChange = (val) => { |
||||
console.log(`${val}`) |
||||
} |
||||
const handleCurrentChange = (val) => { |
||||
console.log(`${val}`) |
||||
} |
||||
|
||||
|
||||
/** 新增定时处理 */ |
||||
const open = ref(false); |
||||
const title = ref(); |
||||
const activeName = ref('1') |
||||
const timingForm = reactive({ |
||||
name:'', |
||||
DlTem:'', |
||||
DcTemIn:'', |
||||
DcTemOut:'', |
||||
KqTemIn:'', |
||||
KqTemOut:'' |
||||
}) |
||||
|
||||
// const watchTime = watch(()=> timingForm.executeTime, (val) => { |
||||
// // console.log(val.toLocaleString()) |
||||
// let date = new Date(val) |
||||
// let hours = date.getHours() |
||||
// let minutes = date.getMinutes() |
||||
// let seconds = date.getSeconds() |
||||
// console.log(`${hours}:${minutes}:${seconds}`) |
||||
// }) |
||||
|
||||
|
||||
|
||||
function handleAdd() { |
||||
open.value = true; |
||||
title.value = "新增策略"; |
||||
}; |
||||
function submitForm() { |
||||
open.value = false; |
||||
}; |
||||
function cancel() { |
||||
open.value = false; |
||||
}; |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const { queryParams } = toRefs(data); |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.dev_control_table{ |
||||
position: relative; |
||||
width: 100%; |
||||
min-height: 745px; |
||||
background-color: #2F3D8A; |
||||
} |
||||
|
||||
::v-deep .el-button{ |
||||
border-radius: 2px; |
||||
} |
||||
::v-deep .el-pagination{ |
||||
position: absolute; |
||||
bottom: 10px; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
} |
||||
::v-deep .el-pagination__total{ |
||||
color: #f3ffff; |
||||
} |
||||
::v-deep .el-pagination__jump{ |
||||
color: #f3ffff; |
||||
} |
||||
::v-deep .el-pager{ |
||||
margin: 0 5px; |
||||
} |
||||
::v-deep .el-table .el-table__body-wrapper{ |
||||
background-color: #2F3D8A; |
||||
} |
||||
::v-deep .el-form-item__content{ |
||||
//display: flex; |
||||
} |
||||
</style> |
||||
|
||||
|
||||
Loading…
Reference in new issue