Merge branch 'master' of http://39.105.213.67:3000/hwj_system/psdc
# Conflicts: # psdc-admin/src/main/java/com/psdc/PsdcApplication.java # psdc-business/src/main/java/com/psdc/mapper/PsdcDeviceMapper.java # psdc-business/src/main/java/com/psdc/service/impl/PsdcDeviceServiceImpl.javamaster
commit
6d475cfca5
@ -1,16 +1,289 @@ |
||||
<template> |
||||
<div class="app-container home"> |
||||
<h1>能耗分析</h1> |
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> |
||||
<el-tab-pane label="同比分析" name="first"> |
||||
<el-form :inline="true" class="demo-form-inline"> |
||||
<el-form-item label="日期："><el-date-picker v-model="dateValue1" type="date" placeholder="请选择日期" size="default"/></el-form-item> |
||||
<el-form-item><el-button type="primary" @click="lastDay"><el-icon><ArrowLeft /></el-icon>上一日</el-button></el-form-item> |
||||
<el-form-item><el-button type="primary" @click="nextDay">下一日<el-icon><ArrowRight /></el-icon></el-button></el-form-item> |
||||
<el-form-item><el-button type="primary" icon="Search" @click="handleQuery1">查询</el-button></el-form-item> |
||||
</el-form> |
||||
<div class="chartBox"> |
||||
<div id="chart"></div> |
||||
</div> |
||||
<div class="tableBox1"> |
||||
<el-table :data="tbfxDataTable" height="400px"> |
||||
<el-table-column label="月份" align="center" prop="month" width="100"/> |
||||
<el-table-column label="本期" align="center" prop="currentPeriod"/> |
||||
<el-table-column label="同期" align="center" prop="theSameTerm"/> |
||||
<el-table-column label="同比(%)" align="center" prop="yearOnYear"/> |
||||
<el-table-column label="累计同比(%)" align="center" prop="totalYearOnYear"/> |
||||
</el-table> |
||||
<el-pagination |
||||
v-model:current-page="tbfxCurrentPage" |
||||
v-model:page-size="tbfxPageSize" |
||||
:page-sizes="[5, 10, 20, 50]" |
||||
:small="tbfxSmall" |
||||
:disabled="tbfxDisabled" |
||||
:background="tbfxBackground" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="tbfxDataTable.length" |
||||
@size-change="tbfxHandleSizeChange" |
||||
@current-change="tbfxHandleCurrentChange"/> |
||||
</div> |
||||
</el-tab-pane> |
||||
|
||||
|
||||
|
||||
|
||||
<el-tab-pane label="环比分析" name="second"> |
||||
<!-- @submit.native.prevent阻止默认提交事件--> |
||||
<el-form :inline="true" class="demo-form-inline" @submit.native.prevent> |
||||
<el-form-item class="mr0"><button class="myBtn btn1" :class="{active : activeIndex === 0}" @click="handleDaily">按日</button></el-form-item> |
||||
<el-form-item ><button class="myBtn btn2" :class="{active : activeIndex === 1}" @click="handleMonthly">按月</button></el-form-item> |
||||
<el-form-item label="日期："><el-date-picker v-model="dateValue2" :type="dateType" :format="format" :value-format="valueFormat" placeholder="请选择日期" size="default"/></el-form-item> |
||||
<el-form-item><el-button type="primary" icon="Search" @click="handleQuery2">查询</el-button></el-form-item> |
||||
</el-form> |
||||
<div class="tableBox2"> |
||||
<el-table :data="hbfxDataTable"> |
||||
<el-table-column label="用能设备" align="center" prop="type"/> |
||||
<el-table-column :label="label1" align="center" :prop="prop1"/> |
||||
<el-table-column :label="label2" align="center" :prop="prop2"/> |
||||
<el-table-column label="增加值" align="center" prop="addValue"/> |
||||
<el-table-column label="环比(%)" align="center" prop="relative"/> |
||||
<el-table-column label="操作" align="center"> |
||||
<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="hbfxCurrentPage" |
||||
v-model:page-size="hbfxPageSize" |
||||
:page-sizes="[5, 10, 20, 50]" |
||||
:small="hbfxSmall" |
||||
:disabled="hbfxDisabled" |
||||
:background="hbfxBackground" |
||||
layout="total, sizes, prev, pager, next, jumper" |
||||
:total="hbfxDataTable.length" |
||||
@size-change="hbfxHandleSizeChange" |
||||
@current-change="hbfxHandleCurrentChange"/> |
||||
</div> |
||||
<!-- 生成图表弹出窗 --> |
||||
<el-dialog class="mrt" :title="title" v-model="open" width="1000px" append-to-body> |
||||
<div class="chartBox"> |
||||
<div id="chart"></div> |
||||
</div> |
||||
</el-dialog> |
||||
</el-tab-pane> |
||||
|
||||
</el-tabs> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="Index"> |
||||
import {Histogram} from '@element-plus/icons-vue' |
||||
import {ref,reactive} from "vue"; |
||||
|
||||
|
||||
/** 切换按钮操作*/ |
||||
const activeName = ref('first') |
||||
|
||||
/** ----------同比分析----------*/ |
||||
/** 过滤查询*/ |
||||
const dateValue1 = ref(new Date()) |
||||
function lastDay(){ |
||||
const current = dateValue1.value; |
||||
const previous = new Date(current.getFullYear(), current.getMonth(), current.getDate() - 1); |
||||
dateValue1.value = previous; |
||||
} |
||||
function nextDay(){ |
||||
const current = dateValue1.value; |
||||
const next = new Date(current.getFullYear(), current.getMonth(), current.getDate() + 1); |
||||
dateValue1.value = next; |
||||
} |
||||
function handleQuery1(){} |
||||
|
||||
/** 数据表格处理*/ |
||||
//内容 |
||||
const tbfxDataTable = reactive([ |
||||
{ |
||||
month:'01月', |
||||
currentPeriod: '1265', |
||||
theSameTerm:'3254', |
||||
yearOnYear:'30', |
||||
totalYearOnYear:'32', |
||||
} |
||||
]) |
||||
const tbfxCurrentPage = ref(1) |
||||
const tbfxPageSize = ref(5) |
||||
const tbfxSmall = ref(false) |
||||
const tbfxBackground = ref(false) |
||||
const tbfxDisabled = ref(false) |
||||
const tbfxHandleSizeChange = (val) => { |
||||
console.log(`${val}`) |
||||
} |
||||
const tbfxHandleCurrentChange = (val) => { |
||||
console.log(`${val}`) |
||||
} |
||||
|
||||
|
||||
/** ----------环比分析----------*/ |
||||
/** 过滤查询*/ |
||||
const activeIndex = ref(0) |
||||
const dateValue2 = ref() |
||||
const dateType = ref('date') |
||||
const format = ref('YYYY-MM-DD') |
||||
const valueFormat = ref('YYYY-MM-DD') |
||||
function handleDaily(){ |
||||
activeIndex.value = 0; |
||||
prop1.value = 'toDay' |
||||
label1.value = '当日用电/kWh' |
||||
prop2.value = 'lastDay' |
||||
label2.value = '上日用电/kWh'; |
||||
dateType.value = 'date' |
||||
format.value = 'YYYY-MM-DD' |
||||
valueFormat.value = 'YYYY-MM-DD' |
||||
} |
||||
function handleMonthly(){ |
||||
activeIndex.value = 1; |
||||
prop1.value = 'toMonth' |
||||
label1.value = '当月用电/kWh' |
||||
prop2.value = 'lastMonth' |
||||
label2.value = '上月用电/kWh'; |
||||
dateType.value = 'month' |
||||
format.value = 'YYYY-MM' |
||||
valueFormat.value = 'YYYY-MM' |
||||
} |
||||
function handleQuery2(){} |
||||
|
||||
/** 数据表格处理*/ |
||||
//内容 |
||||
const hbfxDataTable = reactive([ |
||||
{month:'01月', currentPeriod: '1265', theSameTerm:'3254', yearOnYear:'30', totalYearOnYear:'32'} |
||||
]) |
||||
const prop1 = ref('toDay') |
||||
const label1 = ref('当日用电/kWh') |
||||
const prop2 = ref('lastDay') |
||||
const label2 = ref('上日用电/kWh') |
||||
const hbfxCurrentPage = ref(1) |
||||
const hbfxPageSize = ref(5) |
||||
const hbfxSmall = ref(false) |
||||
const hbfxBackground = ref(false) |
||||
const hbfxDisabled = ref(false) |
||||
const hbfxHandleSizeChange = (val) => { |
||||
console.log(`${val}`) |
||||
} |
||||
const hbfxHandleCurrentChange = (val) => { |
||||
console.log(`${val}`) |
||||
} |
||||
|
||||
/** 生成图表按鈕操作*/ |
||||
const title = ref() |
||||
const open = ref(false) |
||||
function handleChart(){ |
||||
open.value = true; |
||||
console.log('图表按钮') |
||||
}; |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.home{ |
||||
width: 100%; |
||||
height: calc(100vh - 84px); |
||||
overflow: auto; |
||||
} |
||||
.chartBox{ |
||||
width: 100%; |
||||
height: 300px; |
||||
border: 1px solid #fff; |
||||
margin-bottom: 18px; |
||||
overflow: hidden; |
||||
#chart{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.tableBox1{ |
||||
width: 100%; |
||||
height: 402px; |
||||
overflow: hidden; |
||||
} |
||||
.tableBox2{ |
||||
width: 100%; |
||||
height: 717px; |
||||
background-color: #2F3D8A; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.mr0{ |
||||
margin-right: 0px !important; |
||||
} |
||||
.myBtn{ |
||||
padding: 7px 25px; |
||||
background-color: #1B2965; |
||||
border: 1px solid #409EFF; |
||||
color: #fff; |
||||
cursor: pointer; |
||||
} |
||||
.btn1{ |
||||
border-top-left-radius: 2px; |
||||
border-bottom-left-radius: 2px; |
||||
} |
||||
.btn2{ |
||||
margin-left: -1px; |
||||
border-top-right-radius: 2px; |
||||
border-bottom-right-radius: 2px; |
||||
} |
||||
.active{ |
||||
background-color: #409EFF !important; |
||||
color: #fff !important; |
||||
} |
||||
|
||||
|
||||
|
||||
::v-deep .el-tabs__item{ |
||||
color: #fff; |
||||
} |
||||
::v-deep .el-tabs__item.is-active{ |
||||
color: #409EFF; |
||||
} |
||||
::v-deep .el-tabs__nav-wrap::after{ |
||||
background-color: #313d70; |
||||
} |
||||
|
||||
|
||||
::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--inline .el-form-item{ |
||||
margin-right: 12px; |
||||
} |
||||
::v-deep .el-input__inner{ |
||||
color: #f3ffff; |
||||
} |
||||
</style> |
||||
|
||||
|
||||
@ -1,16 +1,321 @@ |
||||
<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; |
||||
} |
||||
|
||||
::v-deep .el-input__inner{ |
||||
color: #f3ffff; |
||||
} |
||||
::v-deep .el-date-editor .el-range-input{ |
||||
color: #f3ffff; |
||||
} |
||||
</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> |
||||
|
||||
|
||||
@ -0,0 +1,174 @@ |
||||
package com.psdc.controller.manager; |
||||
|
||||
|
||||
import com.alibaba.fastjson2.JSONObject; |
||||
import com.psdc.annotation.Log; |
||||
import com.psdc.core.controller.BaseController; |
||||
import com.psdc.core.domain.AjaxResult; |
||||
import com.psdc.core.domain.entity.SysUser; |
||||
import com.psdc.core.page.TableDataInfo; |
||||
import com.psdc.entity.PsdcDevice; |
||||
import com.psdc.enums.BusinessType; |
||||
import com.psdc.service.IPsdcDeviceService; |
||||
import com.psdc.service.ISysUserService; |
||||
import com.psdc.utils.SecurityUtils; |
||||
import com.psdc.utils.poi.ExcelUtil; |
||||
import org.apache.poi.xssf.usermodel.XSSFCell; |
||||
import org.apache.poi.xssf.usermodel.XSSFRow; |
||||
import org.apache.poi.xssf.usermodel.XSSFSheet; |
||||
import org.apache.poi.xssf.usermodel.XSSFWorkbook; |
||||
import org.springframework.beans.factory.annotation.Autowired; |
||||
import org.springframework.security.access.prepost.PreAuthorize; |
||||
import org.springframework.transaction.annotation.Transactional; |
||||
import org.springframework.validation.annotation.Validated; |
||||
import org.springframework.web.bind.annotation.*; |
||||
import org.springframework.web.multipart.MultipartFile; |
||||
|
||||
import javax.servlet.http.HttpServletResponse; |
||||
import java.io.BufferedOutputStream; |
||||
import java.io.IOException; |
||||
import java.io.InputStream; |
||||
import java.io.OutputStream; |
||||
import java.util.*; |
||||
|
||||
/** |
||||
* @Author：戴仕崑 |
||||
* @Project：psdc |
||||
* @Filename：PsdcDeviceController |
||||
* @Date：2023/5/11 15:13 |
||||
* @Version 1.0 |
||||
*/ |
||||
@RestController |
||||
@RequestMapping("/manager/device") |
||||
public class PsdcDeviceController extends BaseController { |
||||
|
||||
@Autowired |
||||
IPsdcDeviceService psdcDeviceService; |
||||
|
||||
@Autowired |
||||
ISysUserService sysUserService; |
||||
|
||||
|
||||
@PreAuthorize("@ss.hasPermi('manager:device:list')") |
||||
@Log(title = "设备管理", businessType = BusinessType.INSERT) |
||||
@PostMapping |
||||
public AjaxResult add(@Validated @RequestBody PsdcDevice pd) { |
||||
long userId = SecurityUtils.getUserId(); |
||||
pd.setCreateBy(sysUserService.selectUserById(userId).getUserName()); |
||||
pd.setCreateTime(new Date()); |
||||
return toAjax(psdcDeviceService.insert(pd)); |
||||
} |
||||
|
||||
|
||||
@PreAuthorize("@ss.hasPermi('manager:device:list')") |
||||
@Log(title = "设备管理", businessType = BusinessType.UPDATE) |
||||
@PutMapping |
||||
public AjaxResult edit(@Validated @RequestBody PsdcDevice pd) { |
||||
long userId = SecurityUtils.getUserId(); |
||||
pd.setUpdateBy(sysUserService.selectUserById(userId).getUserName()); |
||||
pd.setUpdateTime(new Date()); |
||||
return toAjax(psdcDeviceService.update(pd)); |
||||
} |
||||
|
||||
@PreAuthorize("@ss.hasPermi('manager:device:list')") |
||||
@Log(title = "设备管理", businessType = BusinessType.DELETE) |
||||
@DeleteMapping |
||||
public AjaxResult remove(@Validated @RequestBody Long[] deviceIds) { |
||||
return toAjax(psdcDeviceService.deleteById(deviceIds)); |
||||
} |
||||
|
||||
|
||||
@PreAuthorize("@ss.hasPermi('manager:device:list')") |
||||
@RequestMapping(value = "/selusers", method = RequestMethod.GET) |
||||
public AjaxResult selAllUsers() { |
||||
List<Map> maps = new ArrayList<>(); |
||||
List<SysUser> list = sysUserService.selectUserList(null); |
||||
for (SysUser dd : list){ |
||||
Map<String, Object> map = new HashMap<>(); |
||||
map.put("label", dd.getUserName()); |
||||
map.put("value", dd.getUserId()); |
||||
maps.add(map); |
||||
} |
||||
return AjaxResult.success("用户下拉列表", maps); |
||||
} |
||||
|
||||
@PreAuthorize("@ss.hasPermi('manager:device:list')") |
||||
@RequestMapping(value = "/devicesList", method = RequestMethod.POST) |
||||
public TableDataInfo controlLogList(@RequestBody JSONObject jsonObject) { |
||||
// PageMethod.startPage(jsonObject.getInteger("pageNum"),jsonObject.getInteger("pageSize"));
|
||||
// PsdcDevice deviceVo = JSON.parseObject(String.valueOf(jsonObject), PsdcDevice.class);
|
||||
PsdcDevice deviceVo = myPage(jsonObject, PsdcDevice.class); |
||||
List<PsdcDevice> list = psdcDeviceService.queryAllByLimit(deviceVo); |
||||
return getDataTable(list); |
||||
} |
||||
|
||||
/** |
||||
excel文件的下载 |
||||
*/ |
||||
@PreAuthorize("@ss.hasPermi('manager:device:list')") |
||||
@Log(title = "设备管理", businessType = BusinessType.EXPORT) |
||||
@RequestMapping(value = "/daochuDevs", method = RequestMethod.POST) |
||||
public void daochuDevDta(HttpServletResponse response, @RequestBody PsdcDevice pd) { |
||||
List<PsdcDevice> list = psdcDeviceService.queryAllByLimit(pd); |
||||
for (PsdcDevice dev : list){ |
||||
dev.setUserName(sysUserService.selectUserById(Long.valueOf(dev.getUserId())).getUserName()); |
||||
} |
||||
ExcelUtil<PsdcDevice> util = new ExcelUtil<>(PsdcDevice.class); |
||||
util.exportExcel(response, list, "角色数据"); |
||||
} |
||||
|
||||
/** |
||||
* 下载设备信息模板 |
||||
* @param response |
||||
*/ |
||||
@PreAuthorize("@ss.hasPermi('manager:device:list')") |
||||
@Log(title = "设备管理", businessType = BusinessType.EXPORT) |
||||
@RequestMapping(value = "/downloadDevTemplate", method = RequestMethod.GET) |
||||
public void downloadTemplate(HttpServletResponse response) { |
||||
// 获取要下载的模板名称
|
||||
String fileName = "devTemplate.xlsx"; |
||||
// 设置要下载的文件的名称
|
||||
response.setHeader("Content-Disposition", "attachment;fileName=" + fileName); |
||||
// 通知客服文件的MIME类型
|
||||
response.setContentType("application/vnd.ms-template;charset=UTF-8"); |
||||
// 获取文件的路径
|
||||
try (InputStream inputStream = Thread.currentThread().getContextClassLoader().getResourceAsStream("template/AllDevicesData.xlsx")) { |
||||
//读取excel模板
|
||||
XSSFWorkbook wb = new XSSFWorkbook(inputStream); |
||||
wb.setSelectedTab(1); |
||||
XSSFSheet sheet = wb.createSheet("设备类型表"); |
||||
XSSFRow row0 = sheet.createRow(0); |
||||
XSSFRow row1 = sheet.createRow(1); |
||||
XSSFRow row2 = sheet.createRow(2); |
||||
row0.createCell(0).setCellValue("设备类型Id"); |
||||
row0.createCell(1).setCellValue("设备类型名称"); |
||||
row1.createCell(0).setCellValue("1"); |
||||
row1.createCell(1).setCellValue("监测设备"); |
||||
row2.createCell(0).setCellValue("2"); |
||||
row2.createCell(1).setCellValue("运行设备"); |
||||
|
||||
|
||||
OutputStream os = new BufferedOutputStream(response.getOutputStream()); |
||||
wb.write(os); |
||||
os.flush(); |
||||
os.close(); |
||||
} catch (Exception e) { |
||||
e.printStackTrace(); |
||||
throw new RuntimeException("下载设备模板出错"); |
||||
} |
||||
} |
||||
|
||||
/** |
||||
excel文件的读取 |
||||
*/ |
||||
@RequestMapping("/daoruDevData") |
||||
@PreAuthorize("@ss.hasPermi('manager:device:list')") |
||||
@Log(title = "设备管理", businessType = BusinessType.IMPORT) |
||||
@Transactional(rollbackFor = Exception.class) |
||||
public AjaxResult daoruDevData(@RequestPart("file") MultipartFile file) { |
||||
long userId = SecurityUtils.getUserId(); |
||||
String cjr = sysUserService.selectUserById(userId).getUserName(); |
||||
return toAjax(psdcDeviceService.daoruDevicesData(file, cjr)); |
||||
} |
||||
|
||||
} |
||||
Binary file not shown.
Loading…
Reference in new issue