master
parent
6131313b1e
commit
655e7960bc
@ -1,16 +1,314 @@ |
||||
<template> |
||||
<div class="app-container home"> |
||||
<h1>能耗统计</h1> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="24" :xs="24"> |
||||
<el-form :model="filterForm" ref="queryRef" :inline="true" label-width="68px"> |
||||
<el-form-item label="能源类型" prop="week"> |
||||
<el-select v-model="filterForm.type" placeholder="请选择" style="width: 240px"> |
||||
<el-option label="电" value="1" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="耗能设备" prop="week"> |
||||
<el-select v-model="filterForm.dev" placeholder="请选择" style="width: 240px"> |
||||
<el-option label="电热锅炉" value="1" /> |
||||
<el-option label="蓄热锅炉" value="2" /> |
||||
<el-option label="风机盘管" value="3" /> |
||||
<el-option label="空气源热泵" value="4" /> |
||||
<el-option label="发热电缆" value="5" /> |
||||
<el-option label="水泵" value="6" /> |
||||
<el-option label="沙盘" value="7" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="时段" style="width: 308px;"> |
||||
<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
||||
</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 class="my-btn btn1" type="primary" :class="{ active: activeIndex === 0 }" @click="handleHour">时</el-button> |
||||
<el-button class="my-btn btn2" type="primary" :class="{ active: activeIndex === 1 }" @click="handleDay">日</el-button> |
||||
<el-button class="my-btn btn3" type="primary" :class="{ active: activeIndex === 2 }" @click="handleMonth">月</el-button> |
||||
</el-col> |
||||
</el-row> |
||||
<div class="dev_control_table"> |
||||
<el-table :data="dataTable" height="690px"> |
||||
<el-table-column label="序号" align="center" width="50" fixed/> |
||||
<el-table-column label="耗能设备" align="center" prop="dev" width="120" fixed/> |
||||
<el-table-column label="日期" align="center" prop="date" width="150" fixed/> |
||||
<el-table-column v-for="item in theadList" :key="item.prop" :prop="item.prop" :label="item.label" :fixed="item.fixed"/> |
||||
<el-table-column label="操作" fixed="right"> |
||||
<template v-slot="scope"> |
||||
<el-button type="primary" size="small" :icon="Histogram" @click="handleChart">图表</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="dataTable.length" |
||||
@size-change="handleSizeChange" |
||||
@current-change="handleCurrentChange"/> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
|
||||
|
||||
|
||||
<!-- 生成图表弹出窗 --> |
||||
<el-dialog class="mrt" :title="title" v-model="open" width="1000px" append-to-body> |
||||
<div class="chartBox"> |
||||
<div id="chart"></div> |
||||
</div> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="Index"> |
||||
import {Delete,Histogram} from '@element-plus/icons-vue' |
||||
import {ref,reactive} from "vue"; |
||||
|
||||
|
||||
/** 筛选处理 */ |
||||
const dateRange = ref([]); |
||||
const data = reactive({ |
||||
filterForm: { |
||||
type: '', |
||||
dev: '', |
||||
} |
||||
}); |
||||
//搜索按钮 |
||||
function handleQuery(){ |
||||
} |
||||
//重置按钮 |
||||
function resetQuery(){ |
||||
dateRange.value = [] |
||||
} |
||||
|
||||
|
||||
/** 数据表格处理 */ |
||||
//公共表头 |
||||
const theadList = ref([ |
||||
{prop:'00:00', label:'00:00'}, |
||||
{prop:'01:00', label:'01:00'}, |
||||
{prop:'02:00', label:'02:00'}, |
||||
{prop:'03:00', label:'03:00'}, |
||||
{prop:'04:00', label:'04:00'}, |
||||
{prop:'05:00', label:'05:00'}, |
||||
{prop:'06:00', label:'06:00'}, |
||||
{prop:'07:00', label:'07:00'}, |
||||
{prop:'08:00', label:'08:00'}, |
||||
{prop:'09:00', label:'09:00'}, |
||||
{prop:'10:00', label:'10:00'}, |
||||
{prop:'11:00', label:'11:00'}, |
||||
{prop:'12:00', label:'12:00'}, |
||||
{prop:'13:00', label:'13:00'}, |
||||
{prop:'14:00', label:'14:00'}, |
||||
{prop:'15:00', label:'15:00'}, |
||||
{prop:'16:00', label:'16:00'}, |
||||
{prop:'17:00', label:'17:00'}, |
||||
{prop:'18:00', label:'18:00'}, |
||||
{prop:'19:00', label:'19:00'}, |
||||
{prop:'20:00', label:'20:00'}, |
||||
{prop:'21:00', label:'21:00'}, |
||||
{prop:'22:00', label:'22:00'}, |
||||
{prop:'23:00', label:'23:00'}, |
||||
]) |
||||
//内容 |
||||
const dataTable = reactive([ |
||||
{ |
||||
dev:'蓄热锅炉', |
||||
date: '20230-05-11', |
||||
'00:00':'10', |
||||
} |
||||
]) |
||||
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 activeIndex = ref(0) |
||||
function handleHour() { |
||||
activeIndex.value = 0 |
||||
theadList.value = [ |
||||
{prop:'00:00', label:'00:00'}, |
||||
{prop:'01:00', label:'01:00'}, |
||||
{prop:'02:00', label:'02:00'}, |
||||
{prop:'03:00', label:'03:00'}, |
||||
{prop:'04:00', label:'04:00'}, |
||||
{prop:'05:00', label:'05:00'}, |
||||
{prop:'06:00', label:'06:00'}, |
||||
{prop:'07:00', label:'07:00'}, |
||||
{prop:'08:00', label:'08:00'}, |
||||
{prop:'09:00', label:'09:00'}, |
||||
{prop:'10:00', label:'10:00'}, |
||||
{prop:'11:00', label:'11:00'}, |
||||
{prop:'12:00', label:'12:00'}, |
||||
{prop:'13:00', label:'13:00'}, |
||||
{prop:'14:00', label:'14:00'}, |
||||
{prop:'15:00', label:'15:00'}, |
||||
{prop:'16:00', label:'16:00'}, |
||||
{prop:'17:00', label:'17:00'}, |
||||
{prop:'18:00', label:'18:00'}, |
||||
{prop:'19:00', label:'19:00'}, |
||||
{prop:'20:00', label:'20:00'}, |
||||
{prop:'21:00', label:'21:00'}, |
||||
{prop:'22:00', label:'22:00'}, |
||||
{prop:'23:00', label:'23:00'}, |
||||
] |
||||
}; |
||||
function handleDay() { |
||||
activeIndex.value = 1 |
||||
theadList.value = [ |
||||
{prop:'01', label:'01日'}, |
||||
{prop:'02', label:'02日'}, |
||||
{prop:'03', label:'03日'}, |
||||
{prop:'04', label:'04日'}, |
||||
{prop:'05', label:'05日'}, |
||||
{prop:'06', label:'06日'}, |
||||
{prop:'07', label:'07日'}, |
||||
{prop:'08', label:'08日'}, |
||||
{prop:'09', label:'09日'}, |
||||
{prop:'10', label:'10日'}, |
||||
{prop:'11', label:'11日'}, |
||||
{prop:'12', label:'12日'}, |
||||
{prop:'13', label:'13日'}, |
||||
{prop:'14', label:'14日'}, |
||||
{prop:'15', label:'15日'}, |
||||
{prop:'16', label:'16日'}, |
||||
{prop:'17', label:'17日'}, |
||||
{prop:'18', label:'18日'}, |
||||
{prop:'19', label:'19日'}, |
||||
{prop:'20', label:'20日'}, |
||||
{prop:'21', label:'21日'}, |
||||
{prop:'22', label:'22日'}, |
||||
{prop:'23', label:'23日'}, |
||||
{prop:'24', label:'24日'}, |
||||
{prop:'25', label:'25日'}, |
||||
{prop:'26', label:'26日'}, |
||||
{prop:'27', label:'27日'}, |
||||
{prop:'28', label:'28日'}, |
||||
{prop:'29', label:'29日'}, |
||||
{prop:'30', label:'30日'}, |
||||
{prop:'31', label:'31日'}, |
||||
] |
||||
}; |
||||
function handleMonth() { |
||||
activeIndex.value = 2 |
||||
theadList.value = [ |
||||
{prop:'01月', label:'01月'}, |
||||
{prop:'02月', label:'02月'}, |
||||
{prop:'03月', label:'03月'}, |
||||
{prop:'04月', label:'04月'}, |
||||
{prop:'05月', label:'05月'}, |
||||
{prop:'06月', label:'06月'}, |
||||
{prop:'07月', label:'07月'}, |
||||
{prop:'08月', label:'08月'}, |
||||
{prop:'09月', label:'09月'}, |
||||
{prop:'10月', label:'10月'}, |
||||
{prop:'11月', label:'11月'}, |
||||
{prop:'12月', label:'12月'}, |
||||
] |
||||
}; |
||||
|
||||
|
||||
/** 生成表格按鈕操作*/ |
||||
const title = ref() |
||||
const open = ref(false) |
||||
function handleChart(){ |
||||
open.value = true; |
||||
console.log('图表按钮') |
||||
}; |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const { filterForm } = toRefs(data); |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.dev_control_table{ |
||||
position: relative; |
||||
width: 100%; |
||||
min-height: 745px; |
||||
background-color: #2F3D8A; |
||||
} |
||||
.my-btn{ |
||||
padding: 0 25px; |
||||
background-color: #2F8EED40; |
||||
border: 1px solid #2F8EED; |
||||
} |
||||
.btn2,.btn3{ |
||||
margin-left: -1px; |
||||
} |
||||
.btn1{ |
||||
border-top-right-radius: 0px !important; |
||||
border-bottom-right-radius: 0px !important; |
||||
} |
||||
.btn2{ |
||||
border-radius: 0px !important; |
||||
} |
||||
.btn3{ |
||||
border-top-left-radius: 0px !important; |
||||
border-bottom-left-radius: 0px !important; |
||||
} |
||||
.active{ |
||||
background-color: #409eff !important; |
||||
color: #fff !important; |
||||
} |
||||
.chartBox{ |
||||
width: 100%; |
||||
height: 300px; |
||||
#chart{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
::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-table__body-wrapper tr td.el-table-fixed-column--left{ |
||||
background-color: #2F3D8A; |
||||
} |
||||
::v-deep .el-table__body-wrapper tr td.el-table-fixed-column--right{ |
||||
background-color: #2F3D8A; |
||||
} |
||||
</style> |
||||
|
||||
|
||||
@ -1,16 +1,240 @@ |
||||
<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="68px"> |
||||
<el-form-item label="有效星期" prop="week"> |
||||
<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 label="执行时间" prop="time"> |
||||
<el-select v-model="queryParams.time" placeholder="请选择" style="width: 240px"> |
||||
<el-option label="00:00-02:00" value="1" /> |
||||
<el-option label="02:00-03:00" value="2" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item label="有效日期" style="width: 308px;"> |
||||
<el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
||||
</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="content" width="700"/> |
||||
<el-table-column label="执行时间" align="center" prop="time"/> |
||||
<el-table-column label="有效日期" align="center" prop="dateRange"/> |
||||
<el-table-column label="有效星期" align="center" prop="week"/> |
||||
<el-table-column label="操作" align="center" prop="handle"> |
||||
<template v-slot="scope"> |
||||
<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="80px"> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-form-item label="指令内容" prop="content"> |
||||
<el-input v-model="timingForm.content" placeholder="请输入指令内容" maxlength="11" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="24"> |
||||
<el-form-item label="执行星期"> |
||||
<el-radio-group v-model="timingForm.day"> |
||||
<el-radio style='width:90px' label="每天" @change="handleEveryday"/> |
||||
</el-radio-group> |
||||
<el-collapse v-model="activeName" accordion> |
||||
<el-collapse-item title="星期几" name="1"> |
||||
<el-checkbox-group v-model="timingForm.week"> |
||||
<el-checkbox style='width:90px' label="1" key="1">星期一</el-checkbox> |
||||
<el-checkbox style='width:90px' label="2" key="2">星期二</el-checkbox> |
||||
<el-checkbox style='width:90px' label="3" key="3">星期三</el-checkbox> |
||||
<el-checkbox style='width:90px' label="4" key="4">星期四</el-checkbox> |
||||
<el-checkbox style='width:90px' label="5" key="5">星期五</el-checkbox> |
||||
<el-checkbox style='width:90px' label="6" key="6">星期六</el-checkbox> |
||||
<el-checkbox style='width:90px' label="7" key="7">星期日</el-checkbox> |
||||
</el-checkbox-group> |
||||
</el-collapse-item> |
||||
</el-collapse> |
||||
|
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="24"> |
||||
<el-form-item label="执行时间" prop="executeTime"> |
||||
<el-time-picker v-model="timingForm.executeTime" placeholder="请选择执行时间" /> |
||||
</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: { |
||||
week: '', |
||||
time: '', |
||||
} |
||||
}); |
||||
//搜索按钮 |
||||
function handleQuery(){ |
||||
} |
||||
//重置按钮 |
||||
function resetQuery(){ |
||||
dateRange.value = [] |
||||
} |
||||
|
||||
|
||||
/** 数据表格处理 */ |
||||
const timingList = reactive([ |
||||
{ |
||||
content:'11', |
||||
time:'22', |
||||
dateRange:'44', |
||||
week:'55', |
||||
}, |
||||
{ |
||||
content:'11', |
||||
time:'22', |
||||
dateRange:'44', |
||||
week:'55', |
||||
} |
||||
]) |
||||
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({ |
||||
content:'', |
||||
day:'', |
||||
week:[], |
||||
executeTime:'', |
||||
}) |
||||
const watchWeek = watch(()=> timingForm.week,(val) => { |
||||
console.log('监听勾选的星期',val) |
||||
if(timingForm.week.length === 7){ |
||||
timingForm.day = '每天' |
||||
}else{ |
||||
timingForm.day = '' |
||||
} |
||||
}) |
||||
// 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 handleEveryday(){ |
||||
console.log('点击每天') |
||||
} |
||||
|
||||
|
||||
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