<template>
<el-card class="remoteTitle">
<div class="card-content">
<div class="demo-image">
<div class="block">
<span class="demonstration">通讯异常</span>
<el-icon><Connection color="rgb(255,0,0)"/></el-icon>
</div>
<div class="block">
<span class="demonstration">读写失败</span>
<el-icon><Failed color="rgb(255,0,0)"/></el-icon>
</div>
<div class="block">
<span class="demonstration">读写成功</span>
<el-icon><CircleCheckFilled color="rgb(0,255,0)"/></el-icon>
</div>
</div>
<div class="demo-button">
<el-button type="primary" size="small" :loading="isLoading" @click="ReadAllStatus">读取全部</el-button>
<el-button type="primary" size="small" :loading="isLoading" @click="WriteAllStatus">写入全部</el-button>
</div>
</div>
</el-card>
<el-loading :visible="isLoading" text="加载中..."></el-loading>
<div class="remoteContent">
<el-table
ref="tableRef"
v-model:checked="selectedRows"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
width="500px"
show-header="true"
:height="tableHeight"
:cell-style="setCellStyle"
border
highlight-current-row
:header-cell-style="setHeaderCellStyle"
:data="visibleData"
v-loading="isLoading"
:row-key="transferId"
element-loading-text="数据加载中......"
:element-loading-spinner="svg"
element-loading-svg-view-box="-10, -10, 50, 50"
element-loading-background="rgba(122, 122, 122, 0.8)"
>
<el-table-column type="selection" width="55px" />
<el-table-column prop="rowIndex" label="序号" width="60px" />
<el-table-column prop="transferId" label="机组编号" v-if="false" />
<el-table-column prop="transferName" label="换热机组" />
<el-table-column label="状态" width="60px">
<template #default="{ row }">
<el-icon v-if="row.transferStatus === 0"></el-icon>
<el-icon v-if="row.transferStatus === 1"><CircleCheckFilled color="rgb(0,255,0)"/></el-icon>
<el-icon v-if="row.transferStatus === 2"><Failed color="rgb(255,0,0)"/></el-icon>
<el-icon v-if="row.transferStatus === 3"><Connection color="rgb(255,0,0)"/></el-icon>
</template>
</el-table-column>
</el-table>
<div :style="{ height: tableHeight + 'px', paddingTop: 10 + 'px' }" style="width: 100%; margin: 0 5px; display:flex; flex-direction: column; align-items: center; vertical-align: top;">
<h3 >{{ forms.transferName }}</h3>
<el-form :model="forms" label-width="230px" :style="{ height: (tableHeight-80) + 'px'}" style="overflow-y: auto; width: 100%;">
<el-form-item label="节假日模式：" v-if="forms.holidayAction != null">
<el-checkbox v-model="forms.holidayAction" size="large" />
</el-form-item>
<el-form-item label="节假日起始时间：">
<el-col :span="5">
起始月：
<el-select v-model="forms.holidayMonStart" placeholder="起始月" size="small" @change="updateStartDay(forms)">
<el-option
v-for="item in month"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-col>
<el-col :span="2" class="text-center">
<span class="text-gray-500"></span>
</el-col>
<el-col :span="5">
起始日：
<el-select v-model="forms.holidayDayStart" placeholder="起始日" size="small">
<el-option
v-for="item in startDay"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-col>
<el-col :span="2" class="text-center">
<span class="text-gray-500"></span>
</el-col>
<el-col :span="5">
起始时：
<el-select v-model="forms.holidayHourStart" placeholder="起始时" size="small">
<el-option
v-for="item in hour"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="节假日结束时间：">
<el-col :span="5">
终止月：
<el-select v-model="forms.holidayMonEnd" placeholder="终止月" size="small" @change="updateEndDay(forms)">
<el-option
v-for="item in month"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-col>
<el-col :span="2" class="text-center">
<span class="text-gray-500"></span>
</el-col>
<el-col :span="5">
终止日：
<el-select v-model="forms.holidayDayEnd" placeholder="终止日" size="small">
<el-option
v-for="item in endDay"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-col>
<el-col :span="2" class="text-center">
<span class="text-gray-500"></span>
</el-col>
<el-col :span="5">
终止时：
<el-select v-model="forms.holidayHourEnd" placeholder="终止时" size="small">
<el-option
v-for="item in hour"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="节假日起始星期：">
<el-col :span="5">
起始星期：
<el-select v-model="forms.holidayWeekStart" placeholder="起始星期" size="small">
<el-option
v-for="item in week"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-col>
<el-col :span="2" class="text-center">
<span class="text-gray-500"></span>
</el-col>
<el-col :span="5">
<span v-if="forms.weekHourStart">起始小时：</span>
<el-select v-model="forms.weekHourStart" v-if="forms.weekHourStart" placeholder="起始小时" size="small">
<el-option
v-for="item in hour"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="节假日终止星期：">
<el-col :span="5">
终止星期：
<el-select v-model="forms.holidayWeekEnd" placeholder="终止星期" size="small">
<el-option
v-for="item in week"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-col>
<el-col :span="2" class="text-center">
<span class="text-gray-500"></span>
</el-col>
<el-col :span="5">
<span v-if="forms.weekHourEnd">终止小时：</span>
<el-select v-model="forms.weekHourEnd" placeholder="终止小时" v-if="forms.weekHourEnd" size="small">
<el-option
v-for="item in hour"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</el-col>
</el-form-item>
<el-form-item label="节假日恒定温度：" v-if="forms.holidayConstantTemp != null">
<el-input v-model="forms.holidayConstantTemp" style="width: 200px;" v-float-number/>
</el-form-item>
</el-form>
<div style="height:30px; margin: 5px;">
<el-button type="primary" :isLoading="isLoading" size="small" @click="ReadStatus(forms)">读 取</el-button>
<el-button type="primary" :isLoading="isLoading" :disabled="forms.isDisabled" size="small" @click="WriteStatus(forms)">写 入</el-button>
</div>
</div>
</div>
<el-card style="height: 50px; padding: 0;">
<el-progress
:indeterminate="myIndeterminate"
:stroke-width="16"
:percentage="progress"
/>
</el-card>
</template>
<script setup>
import { ref, reactive, computed, onMounted, onUnmounted, watch,toRefs,nextTick } from 'vue';
import http from '../../api/http';
import store from "../../store/index";
import { ElMessage } from "element-plus";
import { vFloatNumber } from "../../utils/directives.js";
const enterpriseId = store.getters.getEnterpriseId();
const props = defineProps(['activeRadio']);
const tableRef = ref([]);
const selectedRows = ref([]);
const isLoading= ref(true);
const visibleData = ref([]);
const tableHeight = ref(500);
const progress =ref(0);
const myIndeterminate=ref(false);
const week = [0,1,2,3,4,5,6,7];
const month = [0,1,2,3,4,5,6,7,8,9,10,11,12];
const startDay = reactive([]);
const endDay = reactive([]);
const hour = reactive([]);
const forms = reactive({
transferId:"",
transferName:"",
isDisabled: true,
transferStatus: 0,
holidayAction: false,
holidayMonStart: 0,
holidayDayStart: 0,
holidayHourStart: 0,
holidayMonEnd: 0,
holidayDayEnd: 0,
holidayHourEnd: 0,
holidayWeekStart: 0,
holidayWeekEnd: 0,
holidayConstantTemp: 0,
weekHourStart: 0,
weekHourEnd: 0
});
onMounted(() => {
startDay.length=0;
endDay.length =0;
for(let i = 0; i<= 31;i++){
startDay.push(i.toString().padStart(2, '0'));
endDay.push(i.toString().padStart(2, '0'));
}
for(let i = 0; i<= 23;i++){
hour.push(i.toString().padStart(2, '0'));
}
setContentHeight();
window.addEventListener('resize', setContentHeight);
})
onUnmounted(() => {
window.removeEventListener('resize', setContentHeight);
})
watch(() =>props.activeRadio, (oldValue, newValue) => {
initData();
},{deep:true});
function setContentHeight() {
tableHeight.value = window.innerHeight - 300;
}
async function initData(){
isLoading.value = true;
var type = 0;
if(enterpriseId === "9BCA54BC-8F27-4849-8D7D-50C5099E1949".toLowerCase()){
type = 1;
}
var result = await http.post('/api/remote/GetHoliday',{"SupplyType":type, "DeviceId": props.activeRadio});
// console.log(result);
if(result.success){
visibleData.value = result.data;
handleRowClick(visibleData.value[0]);
}else{
ElMessage.error(result.message);
}
isLoading.value = false;
}
initData();
async function ReadStatus(row){
row.transferStatus = 0;
handleRowClick(row);
myIndeterminate.value = !myIndeterminate.value;
progress.value=50;
isLoading.value = true;
await ReadStation(row);
isLoading.value = false;
myIndeterminate.value = !myIndeterminate.value;
progress.value=100;
}
async function ReadAllStatus(){
if(selectedRows.value.length === 0){
ElMessage.warning("请勾选需要远程控制的换热站！");
return;
}
myIndeterminate.value = !myIndeterminate.value;
progress.value=1;
isLoading.value = true;
if(selectedRows){
var total = selectedRows.value.length;
var count =0;
for(const item of selectedRows.value){
item.transferStatus = 0;
}
for(const item of selectedRows.value){
await ReadStation(item);
count=count+1;
progress.value = (count/total*100).toFixed(2);
}
}
isLoading.value = false;
myIndeterminate.value = !myIndeterminate.value;
progress.value=100;
}
async function WriteStatus(row){
row.transferStatus = 0;
myIndeterminate.value = !myIndeterminate.value;
progress.value=50;
isLoading.value = true;
await WriteStation(row);
isLoading.value = false;
myIndeterminate.value = !myIndeterminate.value;
progress.value=100;
}
async function WriteAllStatus(){
if(selectedRows.value.length === 0){
ElMessage.warning("请勾选需要远程控制的换热站！");
return;
}
if(forms.isDisabled === true){
ElMessage.error(forms.transferName +" 先读取后写入");
return;
}
myIndeterminate.value = !myIndeterminate.value;
progress.value=1;
isLoading.value = true;
if(selectedRows){
var total = selectedRows.value.length;
var count =0;
for(const item of selectedRows.value){
item.transferStatus = 0;
}
for(const item of selectedRows.value){
if(item.isDisabled === false){
await WriteStation(item);
}else{
ElMessage.warning(item.transferName + " 写入失败，应先读取再写入");
item.transferStatus = 2;
}
count=count+1;
progress.value = (count/total*100).toFixed(2);
}
}
isLoading.value = false;
myIndeterminate.value = !myIndeterminate.value;
progress.value=100;
}
async function ReadStation(row){
var result = await http.post('/api/remote/ReadHoliday', row.transferId);
if(result.success){
var jobj = result.data[0];
//console.log("Value:"+jobj);
if(jobj && visibleData){
for(const element of visibleData.value){
if(element.transferId === row.transferId){
element.holidayAction = jobj.holidayAction;
element.holidayMonStart = jobj.holidayMonStart;
element.holidayDayStart = jobj.holidayDayStart;
element.holidayHourStart = jobj.holidayHourStart;
element.holidayMonEnd = jobj.holidayMonEnd;
element.holidayDayEnd = jobj.holidayDayEnd;
element.holidayHourEnd = jobj.holidayHourEnd;
element.holidayWeekStart = jobj.holidayWeekStart;
element.holidayWeekEnd = jobj.holidayWeekEnd;
element.holidayConstantTemp = jobj.holidayConstantTemp;
element.weekHourStart = jobj.weekHourStart;
element.weekHourEnd = jobj.weekHourEnd;
element.isDisabled = false;
element.transferStatus = jobj.transferStatus;
ElMessage.success(row.transferName +" 读取成功");
handleRowClick(element);
//console.log("gainMode:"+jobj.gainMode);
break;
}
};
}
}else{
ElMessage.error(row.transferName +": "+ result.message);
row.transferStatus = 3;
}
}
async function WriteStation(element){
try{
//console.log("write row:"+element.transferName);
var writeValue = "";
//if(forms.holidayAction != null && forms.holidayAction != ""){
element.holidayAction=forms.holidayAction;
writeValue ="HolidayAction:"+ (forms.holidayAction===true ? "1;":"0;");
// }
// if(element.holidayMonStart != null && forms.holidayMonStart != ""){
element.holidayMonStart=forms.holidayMonStart;
writeValue +="HolidayMonStart:"+forms.holidayMonStart + ";";
// }
// if(element.holidayDayStart != null && forms.holidayDayStart != ""){
element.holidayDayStart=forms.holidayDayStart;
writeValue +="HolidayDayStart:"+forms.holidayDayStart + ";";
//}
//if(element.holidayHourStart != null && forms.holidayHourStart != ""){
element.holidayHourStart=forms.holidayHourStart;
writeValue +="HolidayHourStart:"+forms.holidayHourStart + ";";
//}
//if(element.holidayMonEnd != null && forms.holidayMonEnd != ""){
element.holidayMonEnd=forms.holidayMonEnd;
writeValue +="HolidayMonEnd:"+forms.holidayMonEnd + ";";
//}
//if(element.holidayDayEnd != null && forms.holidayDayEnd != ""){
element.holidayDayEnd=forms.holidayDayEnd;
writeValue +="HolidayDayEnd:"+forms.holidayDayEnd + ";";
//}
//if(element.holidayHourEnd != null && forms.holidayHourEnd != ""){
element.holidayHourEnd=forms.holidayHourEnd;
writeValue +="HolidayHourEnd:"+forms.holidayHourEnd + ";";
//}
//if(element.holidayWeekStart != null && forms.holidayWeekStart != ""){
element.holidayWeekStart=forms.holidayWeekStart;
writeValue +="HolidayWeekStart:"+forms.holidayWeekStart + ";";
//}
//if(element.holidayWeekEnd != null && forms.holidayWeekEnd != ""){
element.holidayWeekEnd=forms.holidayWeekEnd;
writeValue +="HolidayWeekEnd:"+forms.holidayWeekEnd + ";";
//}
//if(element.holidayConstantTemp != null && forms.holidayConstantTemp != ""){
element.holidayConstantTemp=forms.holidayConstantTemp;
writeValue +="HolidayConstantTemp:"+forms.holidayConstantTemp + ";";
//}
if(element.weekHourStart != null && forms.weekHourStart != ""){
element.weekHourStart=forms.weekHourStart;
writeValue +="WeekHourStart:"+forms.weekHourStart + ";";
}
if(element.weekHourEnd != null && forms.weekHourEnd != ""){
element.weekHourEnd=forms.weekHourEnd;
writeValue +="WeekHourEnd:"+forms.weekHourEnd + ";";
}
if(writeValue === ''){
ElMessage.error(element.transferName +" 未获取到写入数据");
return;
}
//console.log(writeValue);
var result = await http.post('/api/remote/WriteTransfer', {"TransferId":element.transferId, "WriteValues": writeValue, "PanelType": 2});
if(result.success){
ElMessage.success(element.transferName +" "+ result.data);
element.transferStatus = 1;
handleRowClick(forms);
}else{
ElMessage.error(element.transferName +" "+ result.message);
if(result.message === "连接异常"){
element.transferStatus = 3;
}else{
element.transferStatus = 2;
}
}
}catch(error){
ElMessage.error(element.transferName +" "+ error.message);
element.transferStatus = 3;
}
}
function setCellStyle({ row, column, rowIndex, columnIndex }) {
let css_color = {};
css_color['padding-left'] = '0px';
css_color['padding-right'] = '0px';
css_color['borderColor'] = '#97d5fd';
css_color['padding'] = '0px';
css_color['textAlign'] = 'center';
if(row.transferId === forms.transferId){
css_color['backgroundColor'] = '#f0faff';
}else{
css_color['backgroundColor'] = '#fff';
}
return css_color;
}
function setHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
let css_color;
var backcolor = 'd9f1ff';
css_color = { 'background-color': '#' + backcolor, 'padding-left': '0px', 'padding-right': '0px', 'borderColor': '#97d5fd', 'color': '#000', 'text-align': 'center', 'vertical-align': 'top' };
var backcolor = 'd9f1ff';
css_color = { 'background-color': '#' + backcolor, 'padding-left': '0px', 'padding-right': '0px', 'borderColor': '#97d5fd', 'color': '#000', 'text-align': 'center', 'vertical-align': 'top' };
return css_color;
}
const handleSelectionChange = (selection) => {
selectedRows.value = selection;
};
const handleRowClick=(row)=>{
// console.log(row);
visibleData.value.forEach((item) =>{
nextTick(() => {
if(item.transferId === forms.transferId){
tableRef.value.toggleRowSelection(item,true);
}
});
})
forms.transferId = row.transferId;
forms.transferName = row.transferName;
forms.isDisabled = row.isDisabled;
forms.transferStatus = row.transferStatus;
forms.holidayAction = row.holidayAction ;
forms.holidayMonStart = row.holidayMonStart;
forms.holidayDayStart = row.holidayDayStart;
forms.holidayHourStart = row.holidayHourStart;
forms.holidayMonEnd = row.holidayMonEnd;
forms.holidayDayEnd = row.holidayDayEnd;
forms.holidayHourEnd = row.holidayHourEnd;
forms.holidayWeekStart = row.holidayWeekStart;
forms.holidayWeekEnd = row.holidayWeekEnd;
forms.holidayConstantTemp = row.holidayConstantTemp;
forms.waterBoxClose = row.waterBoxClose;
forms.weekHourStart = row.weekHourStart;
forms.weekHourEnd = row.weekHourEnd;
}
const svg = `
<path class="path" d="
M 30 15
L 28 17
M 25.61 25.61
A 15 15, 0, 0, 1, 15 30
A 15 15, 0, 1, 1, 27.99 7.5
L 15 15
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>`
function updateStartDay(row){
var days = 31;
const year = new Date().getFullYear();
days = new Date(year, row.holidayMonStart, 0).getDate();
startDay.length =0;
for(var i = 0; i<= days;i++){
startDay.push(i.toString().padStart(2, '0'));
}
row.holidayDayStart = 0;
}
function updateEndDay(row){
var days = 31;
const year = new Date().getFullYear();
days = new Date(year, row.holidayMonEnd, 0).getDate();
endDay.length =0;
for(var i = 0; i<= days;i++){
endDay.push(i.toString().padStart(2, '0'));
}
row.holidayDayEnd = 0;
}
</script>
<style scoped>
.remoteTitle{
width: 100%;
}
.card-content {
display: flex;
justify-content: space-between;
height: 20px;
}
.remoteContent{
width:100%;
height: 100%;
display: flex;
justify-content:center;
align-items: center;
}
.demo-button{
display: right;
width: 20%;
}
.demo-image {
width: 80%;
display: left;
flex: 9;
margin-top: -10px;
}
.demo-image .block {
padding: 1px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
display: inline-block;
width: 80px;
box-sizing: border-box;
vertical-align: top;
}
.demo-image .block:last-child {
border-right: none;
}
.demo-image .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 12px;
margin-bottom: 0px;
}
.el-select{
width:100px;
}
</style>