场景模型测试工具
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
scmy/psdc-ui/src/views/system/cl/index.vue

603 lines
19 KiB

<template>
<div class="app-container home">
<el-row :gutter="20">
<el-col :span="24" :xs="24">
<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="88px">
<el-form-item label="策略名称:" prop="name">
<el-select v-model="data.sceneCode" placeholder="请选择" style="width: 240px" @change="changeSl">
<el-option label='所有' :value='0' />
<el-option :label='item.label' :value='item.sceneCode' :key="item.sceneCode" v-for="item in queryParams"/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" icon="Plus" @click="handleAdd">新增</el-button>
</el-col>
</el-row>
<div class="dev_control_table">
<el-table :data="data.timingList" height="500px">
<el-table-column label="序号" align="center" width="50" type="index"/>
<el-table-column label="策略名称" align="center" prop="sceneName" width="200"/>
<el-table-column label="策略描述" align="center" prop="sceneRemark"/>
<el-table-column label="创建时间" align="center" prop="createTime"/>
<!-- <el-table-column label="温度" align="center" prop="sceneValue"/>-->
<el-table-column label="操作" align="center" prop="handle">
<template v-slot="scope">
<el-button type="primary" size="small" icon="Edit" v-hasPermi="['system:cl:edit']" @click="handleXg(scope.row)">修改</el-button>
<el-button type="danger" size="small" :icon="Delete" @click="handleDel(scope.row.sceneCode)">删除</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="data.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"/>
</div>
</el-col>
</el-row>
<!-- 新增对话框 -->
<el-dialog :title="title" v-model="open" width="600px" append-to-body>
<el-form :model="timingForm" ref="userRef" label-width="88px">
<el-row>
<el-col :span="24">
<el-form-item label="新建策略:" prop="sceneName" >
<el-input v-model="timingForm.sceneName" placeholder="请输入策略名称" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="策略描述:" prop="sceneRemark" >
<el-input v-model="timingForm.sceneRemark" placeholder="请输入策略描述" />
</el-form-item>
</el-col>
<el-checkbox :indeterminate="data.isIndeterminate" v-model="data.checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div class="taber"><span>进水温度</span><span>出水温度</span><span>温度</span></div>
<el-checkbox-group v-model="data.checkedSblb" @change="handleCheckedCitiesChange">
<el-checkbox v-for="item in data.sblb" :label="item.deviceId" :key="item.deviceId" label-width="120" style="margin-bottom: 10px">
<span style="width: 70px;display: inline-block">{{item.deviceName}}</span>
<el-input :disabled="item.inTemp" type="number" v-model="item.intemp" placeholder="进水温度" style="width: 120px ;margin: 10px"/>
<el-input :disabled="item.outTemp" type="number" v-model="item.outtemp" placeholder="出水温度" style="width: 120px ;margin: 10px"/>
<el-input :disabled="item.Temp" type="number" v-model="item.temp" placeholder="温度" style="width: 120px ;margin: 10px"/>
</el-checkbox>
</el-checkbox-group>
<!-- <el-col :span="12">-->
<!-- <el-form-item label="策略列表:" >-->
<!-- <el-select v-model="timingForm.sceneCode" placeholder="策略列表">-->
<!-- <el-option v-for="item in data.queryParams" :key="item.sceneCode" :label="item.label" :value="item.sceneCode">-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="设备列表:" >-->
<!-- <el-select v-model="timingForm.deviceId" placeholder="设备列表">-->
<!-- <el-option v-for="item in data.sblb" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId">-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="进水温度:" prop="intemp" >-->
<!-- <el-input v-model="timingForm.intemp" placeholder="进水温度" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="出水温度:" prop="outtemp" >-->
<!-- <el-input v-model="timingForm.outtemp" placeholder="出水温度" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="24">-->
<!-- <el-form-item label="温度:" prop="temp">-->
<!-- <el-input v-model="timingForm.temp" placeholder="温度" maxlength="11" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
<!-- 修改对话框 -->
<el-dialog :title="title1" v-model="open1" width="600px" append-to-body>
<el-form :model="timingForm1" ref="userRef" label-width="88px">
<el-row>
<el-col :span="24">
<el-form-item label="策略名称:" prop="sceneName">
<el-input v-model="timingForm1.sceneName" placeholder="请输入策略名称" maxlength="11" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="策略描述:" prop="sceneRemark" >
<el-input v-model="timingForm1.sceneRemark" placeholder="请输入策略描述" />
</el-form-item>
</el-col>
<el-checkbox :indeterminate="data.isIndeterminate1" v-model="data.checkAll1" @change="handleCheckAllChange1">全选</el-checkbox>
<div class="taber"><span>进水温度</span><span>出水温度</span><span>温度</span></div>
<el-checkbox-group v-model="data.checkedSblb1" @change="handleCheckedCitiesChange1">
<el-checkbox v-for="item in data.sblb" :label="item.deviceId" :key="item.deviceId" style="margin-bottom: 10px">
<span style="width: 70px;display: inline-block">{{item.deviceName}}</span>
<el-input type="number" v-model="item.intemp" placeholder="进水温度" style="width: 120px ;margin: 10px"/>
<el-input type="number" v-model="item.outtemp" placeholder="出水温度" style="width: 120px ;margin: 10px"/>
<el-input type="number" v-model="item.temp" placeholder="温度" style="width: 120px ;margin: 10px"/>
</el-checkbox>
</el-checkbox-group>
<!-- <el-col :span="24">-->
<!-- <el-form-item label="设备列表:" >-->
<!-- <el-select v-model="timingForm1.deviceId" placeholder="设备列表">-->
<!-- <el-option v-for="item in data.sblb" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId">-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="进水温度:" prop="intemp" >-->
<!-- <el-input v-model="timingForm1.intemp" placeholder="进水温度" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="出水温度:" prop="outtemp" >-->
<!-- <el-input v-model="timingForm1.outtemp" placeholder="出水温度" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="13">-->
<!-- <el-form-item label="温度值:" prop="temp">-->
<!-- <el-input v-model="timingForm1.temp" placeholder="温度" maxlength="11" />-->
<!-- </el-form-item>-->
<!-- </el-col>-->
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm1">确 定</el-button>
<el-button @click="cancel1">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="Index">
import {ElMessage,ElMessageBox} from 'element-plus'
import {Delete} from '@element-plus/icons-vue'
import {ref,reactive,watch,onMounted} from "vue";
import {getXl,getTb,postNew,getSb,postXg,postDel} from '../../../api/emonitor/api'
onMounted(()=>{
getSb().then((res)=>{
var crr = []
for(let x in res.data){
if(res.data[x].isControl==2) {
crr.push(res.data[x])
}
}
console.log(crr)
var arr = []
for(var i in crr){
arr=arr.concat(crr[i].children)
}
for(let j in arr){
arr[j].Temp=!arr[j].Temp
arr[j].inTemp=!arr[j].inTemp
arr[j].outTemp=!arr[j].outTemp
}
console.log('sblb',arr)
data.sblb=arr
var brr = []
for(let a in arr){
brr.push(arr[a].deviceId)
}
data.AllName=brr
console.log(brr)
})
getXl().then((res)=>{
console.log(res)
data.queryParams=res.data
})
getTb({
"sceneCode": data.sceneCode,
"pageNum": currentPage.value,
"pageSize": pageSize.value
}).then((res)=>{
console.log(res)
data.timingList=res.rows
data.total=res.total
})
// postNew().then((res)=>{
// console.log(res)
// })
})
/** 筛选处理 */
const data = reactive({
checkAll: false,
checkedSblb: [],
checkAll1: false,
checkedSblb1: [],
sblb: [],
AllName:[],
isIndeterminate: false,
isIndeterminate1: false,
total:'',
timingList:[],
queryParams: '',
sceneCode:0,
dateRange:[],
postData:[],
});
// const wat = watch(()=> data.sblb,(val) =>{
// console.log(val)
// })
//改变
function changeSl(){
console.log(data.sceneCode)
}
//搜索按钮
function handleQuery(){
getTb({
"sceneCode": data.sceneCode,
"pageNum": currentPage.value,
"pageSize": pageSize.value
}).then((res)=>{
console.log(res)
data.timingList=res.rows
data.total=res.total
})
}
//重置按钮
function resetQuery(){
data.sceneCode=0
currentPage.value=1
pageSize.value=10
getTb({
"sceneCode": data.sceneCode,
"pageNum": currentPage.value,
"pageSize": pageSize.value
}).then((res)=>{
console.log(res)
data.timingList=res.rows
data.total=res.total
})
}
function handleCheckAllChange(val) {
data.checkedSblb = val ? data.AllName : [];
data.isIndeterminate = false;
console.log(data.checkedSblb)
}
function handleCheckedCitiesChange(value) {
let checkedCount = value.length;
data.checkAll = checkedCount === data.sblb.length;
data.isIndeterminate = checkedCount > 0 && checkedCount < data.sblb.length;
}
function handleCheckAllChange1(val) {
data.checkedSblb1 = val ? data.AllName : [];
data.isIndeterminate1 = false;
console.log(data.checkedSblb1)
}
function handleCheckedCitiesChange1(value) {
let checkedCount = value.length;
data.checkAll1 = checkedCount === data.sblb.length;
data.isIndeterminate1 = checkedCount > 0 && checkedCount < data.sblb.length;
}
/** 数据表格处理 */
const currentPage = ref(1)
const pageSize = ref(10)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val) => {
console.log(`${val}`)
getTb({
"sceneCode": data.sceneCode,
"pageNum": currentPage.value,
"pageSize": pageSize.value
}).then((res)=>{
console.log(res)
data.timingList=res.rows
data.total=res.total
})
}
const handleCurrentChange = (val) => {
console.log(`${val}`)
getTb({
"sceneCode": data.sceneCode,
"pageNum": currentPage.value,
"pageSize": pageSize.value
}).then((res)=>{
console.log(res)
data.timingList=res.rows
data.total=res.total
})
}
/** 新增策略处理 */
const open = ref(false);
const title = ref();
const open1 = ref(false);
const title1= ref();
const activeName = ref('1')
const timingForm = reactive({
sceneName:'',
sceneRemark:'',
deviceVos:[]
})
const timingForm1 = reactive({
sceneName:'',
sceneRemark:'',
sceneCode:'',
deviceVos:[]
// deviceId:'',
// temp:'',
// intemp:'',
// outtemp:''
})
// const watchTime = watch(()=> timingForm.executeTime, (val) => {
// // console.log(val.toLocaleString())
// let date = new Date(val)
// let hours = date.getHours()
// let minutes = date.getMinutes()
// let seconds = date.getSeconds()
// console.log(`${hours}:${minutes}:${seconds}`)
// })
function handleAdd() {
open.value = true;
title.value = "新增策略";
};
function submitForm() {
let tempCheckedSblb = [];
data.checkedSblb.forEach(item => {
let tempItem = {
deviceId: item,
intemp: '',
outtemp: '',
temp: ''
};
// 根据 item 从 data.sblb 中找到对应的设备信息
let deviceInfo = data.sblb.find(sblbItem => sblbItem.deviceId === item);
if (deviceInfo) {
tempItem.intemp = deviceInfo.intemp;
tempItem.outtemp = deviceInfo.outtemp;
tempItem.temp = deviceInfo.temp;
}
tempCheckedSblb.push(tempItem);
timingForm.deviceVos=tempCheckedSblb
deviceInfo.intemp=''
deviceInfo.outtemp=''
deviceInfo.temp=''
});
console.log(timingForm)
postNew(timingForm).then((res)=>{
console.log(res)
ElMessage({type:"success",message:'新增成功!'})
handleQuery()
getXl().then((res)=>{
console.log(res)
data.queryParams=res.data
})
timingForm.sceneName='',
timingForm.sceneRemark='',
timingForm.deviceVos=[]
})
data.checkedSblb=[];
data.isIndeterminate=false
open.value = false;
};
function cancel() {
let tempCheckedSblb = [];
data.checkedSblb.forEach(item => {
let tempItem = {
deviceId: item,
intemp: '',
outtemp: '',
temp: ''
};
// 根据 item 从 data.sblb 中找到对应的设备信息
let deviceInfo = data.sblb.find(sblbItem => sblbItem.deviceId === item);
if (deviceInfo) {
tempItem.intemp = deviceInfo.intemp;
tempItem.outtemp = deviceInfo.outtemp;
tempItem.temp = deviceInfo.temp;
}
tempCheckedSblb.push(tempItem);
deviceInfo.intemp=''
deviceInfo.outtemp=''
deviceInfo.temp=''
});
timingForm.sceneName='',
timingForm.sceneRemark='',
timingForm.deviceVos=[];
data.checkedSblb=[];
data.isIndeterminate=false
open.value = false;
};
function handleXg(dat) {
open1.value = true;
title1.value = "修改策略";
console.log(dat)
var arr = []
for(let i in dat.deviceVos){
arr.push(dat.deviceVos[i].deviceId)
}
data.checkedSblb1=arr
for (let i = 0;i < data.sblb.length ;i++ ){
var deviceId = data.sblb[i].deviceId
for (let j = 0;j < dat.deviceVos.length ;j++ ) {
if ( deviceId === dat.deviceVos[j].deviceId){
data.sblb[i].intemp = dat.deviceVos[j].intemp;
data.sblb[i].outtemp = dat.deviceVos[j].outtemp;
data.sblb[i].temp = dat.deviceVos[j].temp;
}
}
}
timingForm1.sceneName=dat.sceneName
timingForm1.sceneRemark=dat.sceneRemark
timingForm1.sceneCode = dat.sceneCode
};
function submitForm1() {
let tempCheckedSblb = [];
data.checkedSblb1.forEach(item => {
let tempItem = {
deviceId: item,
intemp: '',
outtemp: '',
temp: ''
};
// 根据 item 从 data.sblb 中找到对应的设备信息
let deviceInfo = data.sblb.find(sblbItem => sblbItem.deviceId === item);
if (deviceInfo) {
tempItem.intemp = deviceInfo.intemp;
tempItem.outtemp = deviceInfo.outtemp;
tempItem.temp = deviceInfo.temp;
}
tempCheckedSblb.push(tempItem);
timingForm1.deviceVos=tempCheckedSblb
});
console.log(timingForm1)
postXg(timingForm1).then((res)=>{
console.log(res)
ElMessage({type:"success",message:'修改成功!'})
getXl().then((res)=>{
console.log(res)
data.queryParams=res.data
})
handleQuery()
})
open1.value = false;
timingForm1.sceneName=''
timingForm1.sceneRemark=''
timingForm1.sceneCode=''
timingForm1.deviceVos=[]
for(let i in data.sblb) {
data.sblb[i].temp = ''
data.sblb[i].intemp = ''
data.sblb[i].outtemp = ''
}
};
function cancel1() {
open1.value = false;
timingForm1.sceneName=''
timingForm1.sceneRemark=''
timingForm1.sceneCode=''
timingForm1.deviceVos=[]
for(let i in data.sblb){
data.sblb[i].temp=''
data.sblb[i].intemp=''
data.sblb[i].outtemp=''
}
};
function handleDel(sceneCode) {
ElMessageBox.confirm("是否确认删除此策略?", "提示",{
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
console.log(sceneCode)
postDel({
"sceneCode":sceneCode
}).then((res) => {
console.log(res)
ElMessage({type:"success",message:'删除成功!'})
getXl().then((res)=>{
console.log(res)
data.queryParams=res.data
})
handleQuery()
});
})
}
const { queryParams } = toRefs(data);
</script>
<style scoped lang="scss">
.dev_control_table{
position: relative;
width: 100%;
min-height: 745px;
background-color: #2F3D8A;
}
.taber{
width: 400px;
margin-left: 52px;
display: flex;
justify-content: flex-start;
line-height: 32px;
span{
width: 120px;
&:nth-child(2),&:nth-child(3){
margin-left: 20px;
}
}
}
::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>