hwj_system
/
scmy
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
master
魔神煜修罗皇 2 years ago
parent 9c454de070 a6f88657d3
commit 41c85b94a3
9 changed files with 812 additions and 360 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 0
      psdc-ui/src/api/analyse/nhfx/nhfx.js
  2. 6
      psdc-ui/src/api/analyse/nhtj/nhtj.js
  3. 4
      psdc-ui/src/api/bigview/bigview.js
  4. 12
      psdc-ui/src/api/control/manual.js
  5. 8
      psdc-ui/src/api/control/timer.js
  6. 451
      psdc-ui/src/views/analyse/nhtj/index.vue
  7. 255
      psdc-ui/src/views/bigview/index.vue
  8. 191
      psdc-ui/src/views/control/manual/index.vue
  9. 243
      psdc-ui/src/views/control/timer/index.vue

0
psdc-ui/src/api/analyse/nhfx/nhfx.js
Unescape View File

6
psdc-ui/src/api/analyse/nhtj/nhtj.js
Unescape View File

@ -0,0 +1,6 @@
import request from '@/utils/request'
/** 获取能耗列表*/
export function getTable(data) {
return request.post('/evaluate/statistics/list',data)
}

4
psdc-ui/src/api/bigview/bigview.js
Unescape View File

@ -8,3 +8,7 @@ export function getTemperature() {
export function getDevicesInfo() {
return request.get('/indexLook/devicesInfo')
}
/**总电表接口*/
export function getZdb() {
return request.get('/indexLook/zdb')
}

12
psdc-ui/src/api/control/manual.js
Unescape View File

@ -9,6 +9,14 @@ export function getControlLogList(data) {
return request.post('/control/manual/controlLogList',data)
}
/** 获取策略列表*/
export function getStrategyList(data) {
return request.get('/control/manual/strategyList',data)
export function getStrategyList() {
return request.get('/control/manual/strategyList')
}
/** 控制设备启停*/
export function getStartAndStop(data) {
return request.post('/control/manual/startAndStop',data)
}
/** 设置温度*/
export function getSetTemperature(data) {
return request.post('/control/manual/setTemperature',data)
}

8
psdc-ui/src/api/control/timer.js
Unescape View File

@ -4,3 +4,11 @@ import request from '@/utils/request'
export function getList(data) {
return request.post('/control/timer/list',data)
}
/** 新增定时任务*/
export function getAddTimer(data) {
return request.post('/control/timer/addTimer',data)
}
/** 删除定时任务*/
export function getDeleteTimer(data) {
return request.get('/control/timer/deleteTimer/' + data)
}

451
psdc-ui/src/views/analyse/nhtj/index.vue
Unescape View File

@ -3,14 +3,15 @@
<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.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-select v-model="filterForm.dev" placeholder="请选择" @change="handleDevChange" style="width: 240px">
<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" />
@ -20,7 +21,9 @@
</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-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>
@ -29,20 +32,20 @@
</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-button class="my-btn btn1" type="primary" :class="{ active: activeIndex === 1 }" @click="handleHour">时</el-button>
<el-button class="my-btn btn2" type="primary" :class="{ active: activeIndex === 2 }" @click="handleDay">日</el-button>
<el-button class="my-btn btn3" type="primary" :class="{ active: activeIndex === 3 }" @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="耗能设备" align="center" prop="deviceName" width="150" fixed/>
<!-- <el-table-column label="日期" align="center" prop="dayDate" width="150" fixed/>-->
<el-table-column v-for="item in theadList" :key="item.prop" :prop="item.prop" :label="item.label" :fixed="item.fixed" :width="item.width" align="center"/>
<el-table-column label="操作" fixed="right">
<template v-slot="scope">
<el-button type="primary" size="small" :icon="Histogram" @click="handleChart">图表</el-button>
<el-button type="primary" size="small" :icon="Histogram" @click="handleChart(scope)">图表</el-button>
</template>
</el-table-column>
</el-table>
@ -54,7 +57,7 @@
:disabled="disabled"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="dataTable.length"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"/>
</div>
@ -68,176 +71,360 @@
<div class="chartBox">
<div id="chart"></div>
</div>
<el-button class="floatRight" @click=close>关闭</el-button>
</el-dialog>
</div>
</template>
<script setup name="Index">
import {Delete,Histogram} from '@element-plus/icons-vue'
import {ref,reactive} from "vue";
import {ref, reactive, onMounted, watch,onBeforeUnmount} from "vue";
import {getTable} from '@/api/analyse/nhtj/nhtj'
import * as echarts from "echarts";
/** 页面加载时*/
onMounted(()=>{
formattedDateFun();
getTableFun();
})
/** 格式化日期*/
const YYYYMMDD = ref();
const timer = ref()
function formattedDateFun(){
let date = new Date()
let year = date.getFullYear()
let month = (date.getMonth()+1).toString().padStart(2, '0');
let day = date.getDate().toString().padStart(2, '0');
let hours = date.getHours()
let minutes = date.getMinutes()
let seconds = date.getSeconds()
YYYYMMDD.value = `${year}-${month}-${day}`
timer.value = `${hours}:${minutes}:${seconds}`
console.log(YYYYMMDD.value)
console.log(timer.value)
}
/** 筛选处理 */
const dateRange = ref([]);
const startDate = ref()
const endDate = ref()
const data = reactive({
filterForm: {
type: '',
dev: '',
}
});
//监听日期选择
const wacthSelectDate = watch(()=> dateRange.value,(val) =>{
console.log(val[0])
startDate.value = val[0]
console.log(val[1])
endDate.value = val[1]
})
//搜索按钮
function handleQuery(){
getTableFun()
}
//重置按钮
function resetQuery(){
dateRange.value = []
getTable({
"timeType":activeIndex.value,
"startTime":'2023-01-01',
"endTime":YYYYMMDD.value,
"pageNum": 1,
"pageSize": 10
}).then((res)=>{
total.value = res.total;
dataTable.value = res.rows
})
}
/** 数据表格处理 */
//公共表头
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'},
{prop:'dayDate', label:'日期',fixed:'fixed',width:'120px'},
{prop:'hour00', label:'00:00'},
{prop:'hour01', label:'01:00'},
{prop:'hour02', label:'02:00'},
{prop:'hour03', label:'03:00'},
{prop:'hour04', label:'04:00'},
{prop:'hour05', label:'05:00'},
{prop:'hour06', label:'06:00'},
{prop:'hour07', label:'07:00'},
{prop:'hour08', label:'08:00'},
{prop:'hour09', label:'09:00'},
{prop:'hour10', label:'10:00'},
{prop:'hour11', label:'11:00'},
{prop:'hour12', label:'12:00'},
{prop:'hour13', label:'13:00'},
{prop:'hour14', label:'14:00'},
{prop:'hour15', label:'15:00'},
{prop:'hour16', label:'16:00'},
{prop:'hour17', label:'17:00'},
{prop:'hour18', label:'18:00'},
{prop:'hour19', label:'19:00'},
{prop:'hour20', label:'20:00'},
{prop:'hour21', label:'21:00'},
{prop:'hour22', label:'22:00'},
{prop:'hour23', label:'23:00'},
])
//内容
const dataTable = reactive([
{
dev:'蓄热锅炉',
date: '20230-05-11',
'00:00':'10',
}
])
const dataTable = ref([])
const currentPage = ref(1)
const pageSize = ref(5)
const pageSize = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const total = ref()
//拿到下拉条的devid
let checkDevId;
function handleDevChange(devid){
console.log(devid)
checkDevId = devid
}
//获取表格数据
function getTableFun(){
getTable({
"deviceId":checkDevId,
"timeType":activeIndex.value,
"startTime":startDate.value,
"endTime":endDate.value,
"pageNum": currentPage.value,
"pageSize": pageSize.value
}).then((res)=>{
total.value = res.total;
dataTable.value = res.rows
console.log(dataTable.value)
})
}
const handleSizeChange = (val) => {
console.log(`${val}`)
getTableFun()
}
const handleCurrentChange = (val) => {
console.log(`${val}`)
getTableFun()
}
/** 生成图表按鈕操作*/
const title = ref()
const open = ref(false)
const chartDataArr = ref([])
function handleChart(scope){
open.value = true;
delete scope.row.dayDate
delete scope.row.dayId
delete scope.row.deviceId
delete scope.row.deviceName
for(let i in scope.row){
chartDataArr.value.push(scope.row[i])
}
console.log(chartDataArr.value)
setTimeout(()=>{
eleBarChartFun()
},100)
};
//用电量柱状图
const barChartX = ref(['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'])
let myChart;
function eleBarChartFun(){
const chartDom = document.getElementById('chart')
myChart = echarts.init(chartDom);
const option = {
title: {},
legend: {
data: ["用电量"],
// selectedMode: 'single',
textStyle: {
color: "#333"
}
},
tooltip: {
trigger: "axis",
formatter: "{b0}： {c0}kWh",
// borderColor: '#00fcff',
borderWidth: 1
},
grid:{
show: true,
top: '10%',
bottom:'10%',
left:'5%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
textStyle:{
color:'#BEC3DA'
},
xAxis: {
data: barChartX.value,
axisLine:{
lineStyle:{
color:'#BEC3DA',
type:'dashed'
}
},
axisTick: {
show: false // 去掉x轴刻度
},
// splitArea: {
// show: true,
// interval:0,
// areaStyle: {
// color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
// //（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
// }
// }
},
yAxis: {
type: 'value',
name: "kWh",
splitLine:{
show:true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
axisLine: {
show: true,
lineStyle:{
type:'dashed',
color:'#BEC3DA'
}
},
},
series: [
{
name: "用电量",
type: "bar",
data: chartDataArr.value,
itemStyle:{
color:'#2F8EE0'
},
},
],
};
option && myChart.setOption(option);
window.onresize = function () {//自适应大小
myChart.resize();
};
}
//关闭弹框按钮
function close(){
open.value = false;
chartDataArr.value = []
getTableFun()
}
/** 日月年按钮操作 */
const activeIndex = ref(0)
const activeIndex = ref(1)
function handleHour() {
activeIndex.value = 0
activeIndex.value = 1
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'},
{prop:'dayDate', label:'日期',fixed:'fixed',width:'120px'},
{prop:'hour00', label:'00:00'},
{prop:'hour01', label:'01:00'},
{prop:'hour02', label:'02:00'},
{prop:'hour03', label:'03:00'},
{prop:'hour04', label:'04:00'},
{prop:'hour05', label:'05:00'},
{prop:'hour06', label:'06:00'},
{prop:'hour07', label:'07:00'},
{prop:'hour08', label:'08:00'},
{prop:'hour09', label:'09:00'},
{prop:'hour10', label:'10:00'},
{prop:'hour11', label:'11:00'},
{prop:'hour12', label:'12:00'},
{prop:'hour13', label:'13:00'},
{prop:'hour14', label:'14:00'},
{prop:'hour15', label:'15:00'},
{prop:'hour16', label:'16:00'},
{prop:'hour17', label:'17:00'},
{prop:'hour18', label:'18:00'},
{prop:'hour19', label:'19:00'},
{prop:'hour20', label:'20:00'},
{prop:'hour21', label:'21:00'},
{prop:'hour22', label:'22:00'},
{prop:'hour23', label:'23:00'},
]
getTableFun()
barChartX.value = ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00']
};
function handleDay() {
activeIndex.value = 1
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日'},
{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日'},
{prop:'monthDate', label:'月份',fixed:'fixed',width:'120px'},
{prop:'day01', label:'01日'},
{prop:'day02', label:'02日'},
{prop:'day03', label:'03日'},
{prop:'day04', label:'04日'},
{prop:'day05', label:'05日'},
{prop:'day06', label:'06日'},
{prop:'day07', label:'07日'},
{prop:'day08', label:'08日'},
{prop:'day09', label:'09日'},
{prop:'day10', label:'10日'},
{prop:'day11', label:'11日'},
{prop:'day12', label:'12日'},
{prop:'day13', label:'13日'},
{prop:'day14', label:'14日'},
{prop:'day15', label:'15日'},
{prop:'day16', label:'16日'},
{prop:'day17', label:'17日'},
{prop:'day18', label:'18日'},
{prop:'day19', label:'19日'},
{prop:'day20', label:'20日'},
{prop:'day21', label:'21日'},
{prop:'day22', label:'22日'},
{prop:'day23', label:'23日'},
{prop:'day24', label:'24日'},
{prop:'day25', label:'25日'},
{prop:'day26', label:'26日'},
{prop:'day27', label:'27日'},
{prop:'day28', label:'28日'},
{prop:'day29', label:'29日'},
{prop:'day30', label:'30日'},
{prop:'day31', label:'31日'},
]
getTableFun()
barChartX.value = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31']
};
function handleMonth() {
activeIndex.value = 2
activeIndex.value = 3
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:'yearDate', label:'年份',fixed:'fixed',width:'120px'},
{prop:'month01', label:'01月'},
{prop:'month02', label:'02月'},
{prop:'month03', label:'03月'},
{prop:'month04', label:'04月'},
{prop:'month05', label:'05月'},
{prop:'month06', label:'06月'},
{prop:'month07', label:'07月'},
{prop:'month08', label:'08月'},
{prop:'month09', label:'09月'},
{prop:'month10', label:'10月'},
{prop:'month11', label:'11月'},
{prop:'month12', label:'12月'},
]
getTableFun()
barChartX.value = ['1','2','3','4','5','6','7','8','9','10','11','12']
};
/** 生成图表按鈕操作*/
const title = ref()
const open = ref(false)
function handleChart(){
open.value = true;
console.log('图表按钮')
};
/** 页面销毁时*/
onBeforeUnmount(() => {
myChart.dispose(); // 销毁实例，防止内存泄漏
});
@ -282,7 +469,9 @@ const { filterForm } = toRefs(data);
height: 100%;
}
}
.floatRight{
margin-left: 90%;
}
::v-deep .el-button{
border-radius: 2px;
}

255
psdc-ui/src/views/bigview/index.vue
Unescape View File

@ -13,7 +13,7 @@
<img src="../../assets/images/dcgl.png" alt="">
</div>
<div class="dev_data">
<p>当前状态：<span :class="{'green':dcglRunStatus === '开启','red':xrglRunStatus === '关闭'}">{{ dcglRunStatus }}</span></p>
<p>当前状态：<span :class="{'green':dcglRunStatus === '开启','red':dcglRunStatus === '关闭'}">{{ dcglRunStatus }}</span></p>
<p>进水温度：<span class="enter_t"><span>{{ dcglThermometerValueIn }}</span>℃</span></p>
<p>出水温度：<span class="leave_t"><span>{{ dcglThermometerValueOut }}</span>℃</span></p>
<p>今日能耗：<span class="today_tce"><span>{{ dcglTodayUseEnergy }}</span>kWh</span></p>
@ -44,7 +44,7 @@
<div class="middle">
<div class="middle_top">
<div class="now_power">
<div class="data">35kW</div>
<div class="data">{{ nowPower }}kW</div>
<div class="bg_img"></div>
<div class="txt">当前功率</div>
</div>
@ -52,7 +52,7 @@
<img src="../../assets/images/3Dimg.png" alt="">
</div>
<div class="now_ele">
<div class="data">16446kWh</div>
<div class="data">{{ nowEle }}kWh</div>
<div class="bg_img"></div>
<div class="txt">总用电量</div>
</div>
@ -60,7 +60,7 @@
<div class="middle_bottom">
<div class="chart_box2 bgimg">
<div class="title">当前功率</div>
<div class="nowPower_chart"></div>
<div class="nowPower_chart" id="dqglChart"></div>
</div>
<div class="wendu_box">
<div class="item" v-for="item in wdcgqArr" :key="item.deviceId">
@ -79,10 +79,10 @@
<img src="../../assets/images/空气源热泵.png" alt="">
</div>
<div class="dev_data">
<p>当前状态：<span class="now_tatus">开启</span></p>
<p>进水温度：<span class="enter_t"><span>25</span>℃</span></p>
<p>出水温度：<span class="leave_t"><span>85</span>℃</span></p>
<p>今日能耗：<span class="today_tce"><span>23</span>kWh</span></p>
<p>当前状态：<span :class="{'green':kqyrbRunStatus === '开启','red':kqyrbRunStatus === '关闭'}">{{ kqyrbRunStatus }}</span></p>
<p>进水温度：<span class="enter_t"><span>{{ kqyrbThermometerValueIn }}</span>℃</span></p>
<p>出水温度：<span class="leave_t"><span>{{ kqyrbThermometerValueOut }}</span>℃</span></p>
<p>今日能耗：<span class="today_tce"><span>{{ kqyrbTodayUseEnergy }}</span>kWh</span></p>
</div>
</div>
<div class="chart_box">
@ -96,9 +96,9 @@
<img src="../../assets/images/发热电缆.png" alt="">
</div>
<div class="dev_data">
<p>当前状态：<span class="now_tatus">开启</span></p>
<p>当前温度：<span class="now_t"><span>25</span>℃</span></p>
<p>今日能耗：<span class="today_tce"><span>23</span>kWh</span></p>
<p>当前状态：<span :class="{'green':frdlRunStatus === '开启','red':frdlRunStatus === '关闭'}">{{ frdlRunStatus }}</span></p>
<p>当前温度：<span class="now_t"><span>{{ frdlThermometerValueNow }}</span>℃</span></p>
<p>今日能耗：<span class="today_tce"><span>{{ frdlTodayUseEnergy }}</span>kWh</span></p>
</div>
</div>
<div class="chart_box">
@ -114,7 +114,7 @@
import * as echarts from 'echarts'
import {HomeFilled} from '@element-plus/icons-vue'
import {ref,reactive,onMounted,onBeforeUnmount } from 'vue'
import {getTemperature,getDevicesInfo} from '../../api/bigview/bigview'
import {getTemperature,getDevicesInfo,getZdb} from '../../api/bigview/bigview'
/** 页面加载时*/
onMounted(()=>{
@ -124,6 +124,8 @@ onMounted(()=>{
getWenduFun();
getDevicesInfoFun();
xrglChartFun();
getZdbFun();
dqglChartFun()
})
/** 8个温度传感器数据*/
@ -140,10 +142,39 @@ const xrglRunStatus = ref()
const xrglThermometerValueIn = ref()
const xrglThermometerValueOut = ref()
const xrglTodayUseEnergy = ref()
//渲染蓄热锅炉折线图数据
//蓄热锅炉折线图数据
const xrglTimeList = ref([]);
const xrglTempInTodayList = ref([]);
const xrglTempOutTodayList = ref([]);
//电磁锅炉运行数据
const dcglRunStatus = ref()
const dcglThermometerValueIn = ref()
const dcglThermometerValueOut = ref()
const dcglTodayUseEnergy = ref()
//电磁锅炉折线图数据
const dcglTimeList = ref([]);
const dcglTempInTodayList = ref([]);
const dcglTempOutTodayList = ref([]);
//空气源热泵运行数据
const kqyrbRunStatus = ref()
const kqyrbThermometerValueIn = ref()
const kqyrbThermometerValueOut = ref()
const kqyrbTodayUseEnergy = ref()
//空气源热泵折线图数据
const kqyrbTimeList = ref([]);
const kqyrbTempInTodayList = ref([]);
const kqyrbTempOutTodayList = ref([]);
//发热电缆运行数据
const frdlRunStatus = ref()
const frdlThermometerValueNow = ref()
const frdlTodayUseEnergy = ref()
//发热电缆折线图数据
const frdlTimeList = ref([]);
const frdlTempTodayList = ref([]);
function getDevicesInfoFun(){
getDevicesInfo().then((res)=>{
for(let i = 0;i < res.data.length;i++){
@ -162,6 +193,49 @@ function getDevicesInfoFun(){
xrglTempOutTodayList.value = res.data[i].tempOutTodayList;
xrglChartFun();
}
if(res.data[i].deviceId == 1){
// console.log('电磁锅炉')
if(res.data[i].deviceRunStatus == 1){
dcglRunStatus.value = '开启'
}else{
dcglRunStatus.value = '关闭'
}
dcglThermometerValueIn.value = res.data[i].thermometerValueIn;
dcglThermometerValueOut.value = res.data[i].thermometerValueOut;
dcglTodayUseEnergy.value = res.data[i].todayUseEnergy;
dcglTimeList.value = res.data[i].timeList;
dcglTempInTodayList.value = res.data[i].tempInTodayList;
dcglTempOutTodayList.value = res.data[i].tempOutTodayList;
dcglChartFun();
}
if(res.data[i].deviceId == 3){
// console.log('空气源热泵')
if(res.data[i].deviceRunStatus == 1){
kqyrbRunStatus.value = '开启'
}else{
kqyrbRunStatus.value = '关闭'
}
kqyrbThermometerValueIn.value = res.data[i].thermometerValueIn;
kqyrbThermometerValueOut.value = res.data[i].thermometerValueOut;
kqyrbTodayUseEnergy.value = res.data[i].todayUseEnergy;
kqyrbTimeList.value = res.data[i].timeList;
kqyrbTempInTodayList.value = res.data[i].tempInTodayList;
kqyrbTempOutTodayList.value = res.data[i].tempOutTodayList;
kqyrbChartFun();
}
if(res.data[i].deviceId == 4){
// console.log('发热电缆')
if(res.data[i].deviceRunStatus == 1){
frdlRunStatus.value = '开启'
}else{
frdlRunStatus.value = '关闭'
}
frdlThermometerValueNow.value = res.data[i].thermometerValue;
frdlTodayUseEnergy.value = res.data[i].todayUseEnergy;
frdlTimeList.value = res.data[i].timeList;
frdlTempTodayList.value = res.data[i].tempTodayList;
frdlChartFun();
}
}
})
}
@ -183,7 +257,7 @@ function dcglChartFun(){
},
tooltip: {
trigger: "axis",
formatter: "{b0}： {c0}次",
formatter: "{b0}： {c0}℃",
// borderColor: '#00fcff',
borderWidth: 1
},
@ -198,7 +272,7 @@ function dcglChartFun(){
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: dcglTimeList.value,
axisLabel: {
textStyle: {
color: "#f3ffff"
@ -241,7 +315,7 @@ function dcglChartFun(){
series: [
{
name: "进水温度",
data: [820, 932, 901, 934, 1290, 1330, 1320],
data: dcglTempInTodayList.value,
type: 'line',
smooth: true,
symbol: "none", //去掉圆点
@ -251,7 +325,7 @@ function dcglChartFun(){
},
{
name: "出水温度",
data: [520, 922, 501, 234, 690, 330, 620],
data: dcglTempOutTodayList.value,
type: 'line',
smooth: true,
symbol: "none", //去掉圆点
@ -276,7 +350,7 @@ function xrglChartFun(){
},
tooltip: {
trigger: "axis",
formatter: "{b0}： {c0}次",
formatter: "{b0}： {c0}℃",
// borderColor: '#00fcff',
borderWidth: 1
},
@ -369,7 +443,7 @@ function kqyrbChartFun(){
},
tooltip: {
trigger: "axis",
formatter: "{b0}： {c0}次",
formatter: "{b0}： {c0}℃",
// borderColor: '#00fcff',
borderWidth: 1
},
@ -384,7 +458,7 @@ function kqyrbChartFun(){
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: kqyrbTimeList.value,
axisLabel: {
textStyle: {
color: "#f3ffff"
@ -427,7 +501,7 @@ function kqyrbChartFun(){
series: [
{
name: "进水温度",
data: [820, 932, 901, 934, 1290, 1330, 1320],
data: kqyrbTempInTodayList.value,
type: 'line',
smooth: true,
symbol: "none", //去掉圆点
@ -437,7 +511,7 @@ function kqyrbChartFun(){
},
{
name: "出水温度",
data: [520, 922, 501, 234, 690, 330, 620],
data: kqyrbTempOutTodayList.value,
type: 'line',
smooth: true,
symbol: "none", //去掉圆点
@ -454,7 +528,7 @@ function frdlChartFun(){
frdlChart = echarts.init(chartDom);
const option = {
legend: {
data: ["进水温度","出水温度"],
data: ["当前温度"],
// selectedMode: 'single',
textStyle: {
color: "#f3ffff"
@ -462,7 +536,7 @@ function frdlChartFun(){
},
tooltip: {
trigger: "axis",
formatter: "{b0}： {c0}次",
formatter: "{b0}： {c0}℃",
// borderColor: '#00fcff',
borderWidth: 1
},
@ -477,7 +551,7 @@ function frdlChartFun(){
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: frdlTimeList.value,
axisLabel: {
textStyle: {
color: "#f3ffff"
@ -519,28 +593,145 @@ function frdlChartFun(){
},
series: [
{
name: "进水温度",
data: [820, 932, 901, 934, 1290, 1330, 1320],
name: "当前温度",
data: frdlTempTodayList.value,
type: 'line',
smooth: true,
symbol: "none", //去掉圆点
itemStyle: { //线条颜色
color: '#128dff',
}
}
]
};
option && frdlChart.setOption(option);
};
/**总电表信息*/
const nowPower = ref()
const nowEle = ref()
const todayUsePowersArr = [];
function getZdbFun(){
getZdb().then((res)=>{
console.log(res.data)
nowPower.value = res.data.totp;
nowEle.value = res.data.totwh;
delete res.data.todayUsePowers.userId
delete res.data.todayUsePowers.deviceId
delete res.data.todayUsePowers.samDate
for(let i in res.data.todayUsePowers){
todayUsePowersArr.push(res.data.todayUsePowers[i])
}
dqglChartFun()
})
}
let dqglChart;
function dqglChartFun(){
const chartDom = document.getElementById('dqglChart')
dqglChart = echarts.init(chartDom);
const option = {
legend: {
data: ["当前功率"],
// selectedMode: 'single',
textStyle: {
color: "#f3ffff"
}
},
tooltip: {
trigger: "axis",
formatter: "{b0}： {c0}kW",
// borderColor: '#00fcff',
borderWidth: 1
},
grid:{
show: true,
top: '20%',
bottom:'15%',
left:'10%',
right:'3%',
borderWidth: 1,
borderColor: '#767da1',
},
xAxis: {
type: 'category',
data: ["00:00",
"00:15", "00:30", "00:45", "01:00",
"01:15", "01:30", "01:45", "02:00",
"02:15", "02:30", "02:45", "03:00",
"03:15", "03:30", "03:45", "04:00",
"04:15", "04:30", "04:45", "05:00",
"05:15", "05:30", "05:45", "06:00",
"06:15", "06:30", "06:45", "07:00",
"07:15", "07:30", "07:45", "08:00",
"08:15", "08:30", "08:45", "09:00",
"09:15", "09:30", "09:45", "10:00",
"10:15", "10:30", "10:45", "11:00",
"11:15", "11:30", "11:45", "12:00",
"12:15", "12:30", "12:45", "13:00",
"13:15", "13:30", "13:45", "14:00",
"14:15", "14:30", "14:45", "15:00",
"15:15", "15:30", "15:45", "16:00",
"16:15", "16:30", "16:45", "17:00",
"17:15", "17:30", "17:45", "18:00",
"18:15", "18:30", "18:45", "19:00",
"19:15", "19:30", "19:45", "20:00",
"20:15", "20:30", "20:45", "21:00",
"21:15", "21:30", "21:45", "22:00",
"22:15", "22:30", "22:45", "23:00",
"23:15", "23:30", "23:45",],
axisLabel: {
textStyle: {
color: "#f3ffff"
}
},
axisLine: {
lineStyle: {
color: '#767da1' // 设置x轴的线条颜色
}
},
axisTick: {
show: false // 去掉x轴刻度
},
splitArea: {
show: true,
interval:0,
areaStyle: {
color: ['rgb(54,68,148,.8)', 'rgb(37,51,133,.8)'] //这里重点，用于设置颜色的数组，
//（有了这个属性，那我们完全可以自己在根据某些条件来生成这样一个数组）
}
}
},
yAxis: {
type: 'value',
name:'kW',
nameTextStyle: {
color: "#f3ffff",
nameLocation: "start"
},
axisLabel: {
textStyle: {
color: "#f3ffff"
}
},
splitLine: {
show: true,
lineStyle: {color: "#767da1", type: "solid"} //dashed
} //是否显示为虚线的条纹
},
series: [
{
name: "出水温度",
data: [520, 922, 501, 234, 690, 330, 620],
name: "当前功率",
data: todayUsePowersArr,
type: 'line',
smooth: true,
symbol: "none", //去掉圆点
itemStyle: { //线条颜色
color: '#F5901A',
color: '#128dff',
}
}
]
};
option && frdlChart.setOption(option);
option && dqglChart.setOption(option);
};
@ -552,6 +743,7 @@ onBeforeUnmount(() => {
xrglChart.dispose();
kqyrbChart.dispose();
frdlChart.dispose();
dqglChart.dispose();
});
</script>
@ -697,7 +889,6 @@ onBeforeUnmount(() => {
.nowPower_chart{
width: 100%;
height: 81%;
border: 1px solid #fff;
}
}
.wendu_box{

191
psdc-ui/src/views/control/manual/index.vue
Unescape View File

@ -5,6 +5,7 @@
<div class="dev_control_item" v-for="item in deviceArr" :key="item.deviceId">
<div class="item_header">
<span>{{ item.deviceName}}</span>
<!-- <el-switch v-model="item.deviceId" class="switch" @change="handleChange(item)" style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #dddddd"/>-->
<el-switch v-model="item.deviceId" class="switch" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #dddddd"/>
</div>
<div class="item_bottom">
@ -14,115 +15,14 @@
<div class="item_bottom_form">
<el-form :model="form1">
<el-form-item label="当前状态："><span :class="{'green':item.deviceRunstatus === '开启','red':item.deviceRunstatus === '关闭'}">{{ item.deviceRunstatus }}</span></el-form-item>
<el-form-item label="进水温度："><el-input v-model="form1.enter" /></el-form-item>
<el-form-item label="出水温度："><el-input v-model="form1.leave" /></el-form-item>
<el-form-item v-show="isShow1" label="进水温度："><el-input v-model="form1.intemp" /></el-form-item>
<el-form-item v-show="isShow1" label="出水温度："><el-input v-model="form1.outtemp" /></el-form-item>
<!-- <el-form-item label="当前温度："><el-input v-model="form1.now" /></el-form-item>-->
<div class="submit" @click="onSubmit1">确定</div>
<div class="submit" @click="getSetTemperatureFun(item)">确定</div>
</el-form>
</div>
</div>
</div>
<!-- <div class="dev_control_item">-->
<!-- <div class="item_header">-->
<!-- <span>空气源热泵</span>-->
<!-- <el-switch v-model="value2" class="switch" style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #dddddd"/>-->
<!-- </div>-->
<!-- <div class="item_bottom">-->
<!-- <div class="item_bottom_img">-->
<!-- <img src="./src/assets/images/空气源热泵.png" alt="">-->
<!-- </div>-->
<!-- <div class="item_bottom_form">-->
<!-- <el-form :model="form2">-->
<!-- <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>-->
<!-- <el-form-item label="进水温度："><el-input v-model="form2.enter" /></el-form-item>-->
<!-- <el-form-item label="出水温度："><el-input v-model="form2.leave" /></el-form-item>-->
<!-- <div class="submit" @click="onSubmit2">确定</div>-->
<!-- </el-form>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="dev_control_item">-->
<!-- <div class="item_header">-->
<!-- <span>发热电缆</span>-->
<!-- <el-switch v-model="value3" class="switch" style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #dddddd"/>-->
<!-- </div>-->
<!-- <div class="item_bottom">-->
<!-- <div class="item_bottom_img">-->
<!-- <img src="./src/assets/images/发热电缆.png" alt="">-->
<!-- </div>-->
<!-- <div class="item_bottom_form">-->
<!-- <el-form :model="form3">-->
<!-- <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>-->
<!-- <el-form-item label="当前温度："><el-input v-model="form3.now" /></el-form-item>-->
<!-- <div class="submit" @click="onSubmit3">确定</div>-->
<!-- </el-form>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="dev_control_item">-->
<!-- <div class="item_header">-->
<!-- <span>风机盘管</span>-->
<!-- <el-switch v-model="value4" class="switch" style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #dddddd"/>-->
<!-- </div>-->
<!-- <div class="item_bottom">-->
<!-- <div class="item_bottom_img">-->
<!-- <img src="./src/assets/images/风机盘管.png" alt="">-->
<!-- </div>-->
<!-- <div class="item_bottom_form">-->
<!-- <el-form>-->
<!-- <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>-->
<!-- </el-form>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="dev_control_item">-->
<!-- <div class="item_header">-->
<!-- <span>水泵</span>-->
<!-- <el-switch v-model="value5" class="switch" style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #dddddd"/>-->
<!-- </div>-->
<!-- <div class="item_bottom">-->
<!-- <div class="item_bottom_img">-->
<!-- <img src="./src/assets/images/水泵.png" alt="">-->
<!-- </div>-->
<!-- <div class="item_bottom_form">-->
<!-- <el-form>-->
<!-- <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>-->
<!-- </el-form>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="dev_control_item">-->
<!-- <div class="item_header">-->
<!-- <span>蓄热锅炉</span>-->
<!-- <el-switch v-model="value6" class="switch" style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #dddddd"/>-->
<!-- </div>-->
<!-- <div class="item_bottom">-->
<!-- <div class="item_bottom_img">-->
<!-- <img src="./src/assets/images/蓄热锅炉.png" alt="">-->
<!-- </div>-->
<!-- <div class="item_bottom_form">-->
<!-- <el-form>-->
<!-- <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>-->
<!-- </el-form>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="dev_control_item">-->
<!-- <div class="item_header">-->
<!-- <span>沙盘</span>-->
<!-- <el-switch v-model="value7" class="switch" style="&#45;&#45;el-switch-on-color: #13ce66; &#45;&#45;el-switch-off-color: #dddddd"/>-->
<!-- </div>-->
<!-- <div class="item_bottom">-->
<!-- <div class="item_bottom_img">-->
<!-- <img src="./src/assets/images/沙盘.png" alt="">-->
<!-- </div>-->
<!-- <div class="item_bottom_form">-->
<!-- <el-form>-->
<!-- <el-form-item label="当前状态："><span class="red">关闭</span></el-form-item>-->
<!-- </el-form>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
<div class="dev_control_table">
<div class="control_header"><span>调控日志</span></div>
@ -178,7 +78,7 @@
import { Download } from '@element-plus/icons-vue' //element字体图标
import { ref,reactive,onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { getDevice,getControlLogList,getStrategyList } from '@/api/control/manual'
import { getDevice,getControlLogList,getStrategyList,getStartAndStop,getSetTemperature } from '@/api/control/manual'
onMounted(()=>{
getDeviceFun();
@ -189,8 +89,6 @@ onMounted(()=>{
/** 获取所有设备*/
const deviceArr = ref([])
const isShow1 = ref(true)
const isShow2 = ref(true)
const isShow3 = ref(true)
function getDeviceFun(){
getDevice().then((res)=>{
console.log(res.data)
@ -201,39 +99,20 @@ function getDeviceFun(){
}else{
res.data[i].deviceRunstatus = '关闭'
}
// if(res.data[i].deviceModel == '发热电缆'){
// isShow1.value = false
// }
}
})
}
/** 设备控制处理*/
const value1 = ref(true)
const value2 = ref(false)
const value3 = ref(false)
const value4 = ref(false)
const value5 = ref(false)
const value6 = ref(false)
const value7 = ref(false)
const form1 = reactive({
enter:'',
leave:'',
intemp:'',
outtemp:'',
now:''
})
const form2 = reactive({
enter:'',
leave:'',
})
const form3 = reactive({
now:'',
})
const onSubmit1 = () => {
console.log('确定')
}
const onSubmit2 = () => {
console.log('确定')
}
const onSubmit3 = () => {
console.log('确定')
}
/** 数据表格处理*/
const controlLogList = ref([])
@ -249,6 +128,7 @@ const handleSizeChange = (val) => {
const handleCurrentChange = (val) => {
getControlLogListFun()
}
function getControlLogListFun(){
getControlLogList({
"deviceId": null,
@ -263,6 +143,15 @@ function getControlLogListFun(){
}).then((res)=>{
tableLength.value = res.total
controlLogList.value = res.rows
for(let i = 0;i < res.rows.length;i++){
if(res.rows[i].controlResult == 1){
res.rows[i].controlResult = '控制中'
}else if(res.rows[i].controlResult == 2){
res.rows[i].controlResult = '控制成功'
}else if(res.rows[i].controlResult == 3){
res.rows[i].controlResult = '控制失败'
}
}
})
}
@ -284,6 +173,35 @@ function confirmClick() {
})
}
/** 控制设备启停*/
// function handleChange(item){
// console.log(item)
// // getStartAndStop({
// // "deviceId": 100,
// // "runStatus": 2
// // }).then((res)=>{
// // console.log(res.data)
// // })
// }
/** 设置温度*/
function getSetTemperatureFun(item){
console.log(item)
// getSetTemperature({
// "deviceId":100,
// "data":[
// {
// "controlKey":"intemp",
// "controlValue":"28"
// },
// {
// "controlKey":"outtemp",
// "controlValue":"90"
// }]
// }).then((res)=>{
// console.log(res)
// })
}
</script>
@ -424,6 +342,15 @@ function confirmClick() {
}
}
.success {
color: green;
}
.failure {
color: red;
}
::v-deep .el-button{
border-radius: 2px;
margin-bottom: 12px;

243
psdc-ui/src/views/control/timer/index.vue
Unescape View File

@ -3,29 +3,41 @@
<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-form-item label="设备名称">
<el-select v-model="queryParams.devName" placeholder="请选择设备" @change="handleDevChange">
<el-option v-for="item in devArr" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" />
</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-form-item label="执行日期" prop="week">
<el-select v-model="queryParams.week" placeholder="请选择执行日期" style="width: 240px">
<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-option label="星期五" value="5" />
<el-option label="星期六" value="6" />
<el-option label="星期日" value="7" />
<el-option label="每天" value="8" />
<el-option label="仅此一次" value="9" />
</el-select>
</el-form-item>
<el-form-item label="有效日期" style="width: 308px;">
<el-date-picker v-model="dateRange"
<!-- <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="queryParams.dateRange"
value-format="YYYY-MM-DD"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
@click="seletDate"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-form-item class="mr30">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
@ -36,15 +48,16 @@
</el-col>
</el-row>
<div class="dev_control_table">
<el-table :data="timingList" height="500px">
<el-table :data="timingList" height="685px">
<el-table-column label="序号" align="center" width="50"/>
<el-table-column label="指令内容" align="center" prop="controlValue" width="700"/>
<el-table-column label="执行时间" align="center" prop="createTime"/>
<el-table-column label="有效日期" align="center" prop="dateRange"/>
<el-table-column label="有效星期" align="center" prop="week"/>
<el-table-column label="设备名称" align="center" prop="deviceId"/>
<el-table-column label="指令内容" align="center" prop="controlContext" width="500"/>
<el-table-column label="执行日期" align="center" prop="runday"/>
<el-table-column label="执行时间" align="center" prop="runtime"/>
<el-table-column label="创建时间" align="center" prop="createTime"/>
<el-table-column label="操作" align="center" prop="handle">
<template v-slot="scope">
<el-button type="danger" size="small" :icon="Delete">删除</el-button>
<el-button type="danger" size="small" :icon="Delete" @click="getDeleteTimerFun(scope)">删除</el-button>
</template>
</el-table-column>
</el-table>
@ -69,9 +82,16 @@
<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="设备名称">
<el-select v-model="timingForm.dev" placeholder="请选择设备" @change="handleDevChange">
<el-option v-for="item in devArr" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="指令内容" prop="content">
<el-input v-model="timingForm.content" placeholder="请输入指令内容" maxlength="11" />
<el-input v-model="timingForm.content" placeholder="请输入指令内容"/>
</el-form-item>
</el-col>
<el-col :span="24">
@ -79,19 +99,25 @@
<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>
<div class="collapse">
<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-item title="仅此一次" name="2">
<el-date-picker v-model="value1" type="date" placeholder="请选择日期"/>
</el-collapse-item>
</el-collapse>
</div>
</el-form-item>
</el-col>
@ -114,14 +140,17 @@
<script setup name="Index">
import {Delete} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from "element-plus";
import {ref,reactive,watch,onMounted} from "vue";
import { getList } from '@/api/control/timer'
import { getList,getAddTimer,getDeleteTimer } from '@/api/control/timer'
import { getDevice } from '@/api/control/manual'
/** 页面加载时*/
onMounted(()=>{
formattedDateFun()
getListFun()
getAllDev()
})
@ -146,32 +175,36 @@ function formattedDateFun(){
/** 筛选处理 */
//选择的日期
const dateRange = ref([]);
// const dateRange = ref([]);
const startDate = ref()
const endDate = ref()
const wacthSelectDate = watch(()=> dateRange.value,(val) =>{
console.log(val[0])
startDate.value = val[0]
console.log(val[1])
endDate.value = val[1]
})
const data = reactive({
queryParams: {
devName:'',
week: '',
time: '',
dateRange:[],
}
});
//选择日期
function seletDate(){
console.log('选择的日期',dateRange.value)
}
//监听开始日期和结束日期
const wacthSelectDate = watch(()=> data.queryParams.dateRange,(val) =>{
console.log(val[0])
startDate.value = val[0]
console.log(val[1])
endDate.value = val[1]
})
//搜索按钮
function handleQuery(){
getListFun()
}
//重置按钮
function resetQuery(){
dateRange.value = [];
data.queryParams.dateRange = [];
currentPage.value = 1;
pageSize.value = 20;
startDate.value = null;
endDate.value = null;
devId.value = null;
getListFun()
}
@ -179,7 +212,7 @@ function resetQuery(){
/** 数据表格处理 */
const timingList = ref([])
const currentPage = ref(1)
const pageSize = ref(5)
const pageSize = ref(20)
const total = ref()
const small = ref(false)
const background = ref(false)
@ -188,7 +221,7 @@ const disabled = ref(false)
function getListFun(){
getList({
"timerId":null,
"deviceId":null,
"deviceId":devId.value,
"controlContext":null,
"timerStatus":null,
"createStart":startDate.value,
@ -203,9 +236,34 @@ function getListFun(){
const handleSizeChange = (val) => {
console.log(`${val}`)
getListFun()
}
const handleCurrentChange = (val) => {
console.log(`${val}`)
getListFun()
}
//删除定时任务
function getDeleteTimerFun(e){
ElMessageBox.confirm(
'确定要删除此条定时任务吗？',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
console.log(e.row.deviceId)
getDeleteTimer(e.row.deviceId).then((res)=>{
console.log(res)
// if(res.code == 200){
// ElMessage({
// type: 'success',
// message: '删除成功！',
// })
// }
})
}).catch(() => {})
}
@ -213,40 +271,95 @@ const handleCurrentChange = (val) => {
const open = ref(false);
const title = ref();
const activeName = ref('1')
const value1 = ref('')
const devArr = ref([])
const devId = ref()
const selectDate = ref()
const selectTimer = ref()
const timingForm = reactive({
dev:'',
content:'',
day:'',
week:[],
executeTime:'',
})
//拿到选择的设备id
function handleDevChange(id){
devId.value = id
console.log('选择的设备id',devId.value)
}
//监听：输入的指令内容
const watchContent = watch(()=> timingForm.content,(val)=>{
console.log(val)
})
//监听：勾选的星期
const watchWeek = watch(()=> timingForm.week,(val) => {
console.log('监听勾选的星期',val)
if(timingForm.week.length === 7){
timingForm.day = '每天'
}else{
timingForm.day = '每天';
}else if(timingForm.week.length < 7 && timingForm.week.length > 0){
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}`)
// })
//监听：选择仅此一次将每天和星期几清空
const watchValue1 = watch(()=> value1.value,(val) => {
const date = new Date(val.toLocaleString());
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
selectDate.value = `${year}-${month}-${day}`;
console.log('选择的日期',selectDate.value)
if(value1.value != null){
timingForm.day = '';
timingForm.week = [];
}
})
//监听：选择的执行时间
const watchTime = watch(()=> timingForm.executeTime, (val) => {
let date = new Date(val)
let hours = date.getHours()
let minutes = date.getMinutes()
let seconds = date.getSeconds()
selectTimer.value = `${hours}:${minutes}:${seconds}`
console.log(selectTimer.value)
})
//获取所有设备
function getAllDev(){
getDevice().then((res)=>{
devArr.value = res.data
})
}
//选中每天
function handleEveryday(){
console.log('点击每天')
value1.value = '';
timingForm.week = [];
}
//新增按钮
function handleAdd() {
open.value = true;
title.value = "新增定时任务";
};
//确定新增
function submitForm() {
open.value = false;
getAddTimer({
"deviceId":devId.value,
"controlKey":"intemp",
"controlValue":timingForm.content,
"status":"0",
"runday":selectDate.value,
"runtime":selectTimer.value
}).then((res)=>{
if(res.code == 200){
ElMessage({
message: res.msg,
type: 'success',
})
}
})
};
//取消新增
function cancel() {
open.value = false;
};
@ -265,7 +378,13 @@ const { queryParams } = toRefs(data);
min-height: 745px;
background-color: #2F3D8A;
}
.mr30{
margin-left: 100px;
margin-top: -4px;
}
.collapse{
margin-bottom: -1px;
}
::v-deep .el-button{
border-radius: 2px;
}
@ -288,10 +407,10 @@ const { queryParams } = toRefs(data);
background-color: #2F3D8A;
}
::v-deep .el-form-item__content{
//display: flex;
display: inline-block;
}
::v-deep .el-input__inner{
color: #f3ffff;
color: #f3ffff !important;
}
::v-deep .el-date-editor .el-range-input{
color: #f3ffff;

Write Preview
Loading…
Cancel
Save