mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

远端机页面

develop
wangsixiang 3 days ago
parent
7469767a0a
commit
ff1844f1da
3 changed files with 345 additions and 156 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceControlDialog.vue
  2. 265
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceParams.vue
  3. 234
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceParamsMulti.vue

2
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceControlDialog.vue
View File

@ -20,7 +20,7 @@
<script> <script>
import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue"; import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue";
import Dialog from "@screen/components/Dialog/index.vue"; import Dialog from "@screen/components/Dialog/index.vue";
import DeviceParams from "./DeviceParams.vue"; import DeviceParams from "./DeviceParamsMulti.vue";
import request from "@/utils/request"; import request from "@/utils/request";
export default { export default {

265
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceParams.vue
View File

@ -2,16 +2,11 @@
<div class='DeviceParams'> <div class='DeviceParams'>
<div class="no-data" v-if="!devicesList.length" v-loading="secondLoading">暂无设备参数</div> <div class="no-data" v-if="!devicesList.length" v-loading="secondLoading">暂无设备参数</div>
<div class="scroll-container"> <div class="scroll-container">
<Descriptions :list="devicesList" style="gap: 18px;" column="5"> <Descriptions :list="devicesList" :data="devicesData" style="gap: 18px;" column="6">
<template v-for="item in devicesList.slice(0, -1)" #[`content-${getSlotKey(item.key)}`]="{ data }"> <template v-for="item in devicesList.slice(0, -1)" #[`content-${getSlotKey(item.key)}`]="{ data }">
<span>{{ data.text }}</span> <span>{{ data.text }}</span>
<Switcher v-if="!disabled" class="switcher" :activeOption="activeOption" :value="data.state" </template>
@change="(value) => handleSwitcherChange(value, data)" /> </Descriptions>
<ElTag style="margin-left: 20px;" v-else effect="dark" :type="data.state ? '' : 'info'">{{ data.state ? '开' :
'关' }}
</ElTag>
</template>
</Descriptions>
</div> </div>
</div> </div>
</template> </template>
@ -41,6 +36,8 @@ export default {
return { return {
secondLoading: true, secondLoading: true,
devicesList: [], devicesList: [],
environment: [],
devicesData: {},
activeOption: { activeOption: {
active: { active: {
text: "开" text: "开"
@ -52,100 +49,178 @@ export default {
} }
}, },
created() { created() {
this.getAc();
// Promise.all([this.getAc()]).then(res => {
// // if (result.code != 200) return;
// let ac = res[0].data;
// let deviceInfo = _.merge({}, ac);
// const typeMap = {
// ac: '220v',
// }
// for (const key in deviceInfo.formatValue) {
// // electricity 电流
// // voltage 电压
// if (key.includes('voltage')) {
// const args = key.match(/[a-z]+|[0-9]+$/g);
Promise.all([this.getAc(), this.getDc()]).then(res => { // const type = args[0], num = args.slice(-1)[0], prefix = args.slice(0, 2).join('_');
// if (result.code != 200) return; // // console.log(type , num , prefix , "+++=========="); //dc 2 dc_out
// this.devicesList.push(
// {
// label: `支路${num} （${typeMap[type]}） 电压`,
// key: `${prefix}_voltage_${num}`,
// text: deviceInfo.formatValue[`${prefix}_voltage_${num}`],
// gridColumn: 3
// },
// {
// label: '电流',
// key: `${prefix}_electricity_${num}`,
// text: deviceInfo.formatValue[`${prefix}_electricity_${num}`],
// gridColumn: 2,
// state: deviceInfo.value[key] > 0
// }
// );
// }
// }
// this.devicesList.push(
// {
// label: '风扇',
// key: `fan_status`,
// // key: `aa_electricity_1`,
// text: { 0: '正常', 1: '开' }[deviceInfo.formatValue['fan_status']] || '-',
// gridColumn: 2,
// state: (deviceInfo.formatValue['fan_status'] === '0')
// },
let ac = res[0].data; // {
let dc = res[1].data; // label: '温度',
let deviceInfo = _.merge({}, ac, dc); // key: `temperature`,
// text: deviceInfo.formatValue['temperature'] ? `${deviceInfo.formatValue['temperature']} ` : '-',
const typeMap = { // gridColumn: 2
ac: '220v', // },
dc: '12v', // {
} // label: '箱门',
for (const key in deviceInfo.formatValue) { // key: `door_status`,
// electricity 电流 // text: { 0: '关闭', 1: '打开' }[deviceInfo.formatValue['door_status']] || '-',
// voltage 电压 // gridColumn: 1
if (key.includes('voltage')) { // },
const args = key.match(/[a-z]+|[0-9]+$/g); // {
// label: '湿度',
const type = args[0], num = args.slice(-1)[0], prefix = args.slice(0, 2).join('_'); // key: `humidity`,
// console.log(type , num , prefix , "+++=========="); //dc 2 dc_out // text: deviceInfo.formatValue['humidity'] ? `${deviceInfo.formatValue['humidity']} ` : '-',
this.devicesList.push( // gridColumn: 2
{ // },
label: `支路${num} （${typeMap[type]}） 电压`, // {
key: `${prefix}_voltage_${num}`, // label: '市电掉电',
text: deviceInfo.formatValue[`${prefix}_voltage_${num}`], // key: `power_status`,
gridColumn: 3 // text: { 0: '正常', 1: '掉电' }[deviceInfo.formatValue['power_status']] || '-',
}, // gridColumn: 2
{ // },
label: '电流', // )
key: `${prefix}_electricity_${num}`, // // this.data = result.rows;
text: deviceInfo.formatValue[`${prefix}_electricity_${num}`], // // this.total = result.total;
gridColumn: 2, // })
state: deviceInfo.value[key] > 0 // .finally(() => {
} // this.secondLoading = false
); // })
}
}
this.devicesList.push(
{
label: '风扇',
key: `fan_status`,
// key: `aa_electricity_1`,
text: { 0: '正常', 1: '开' }[deviceInfo.formatValue['fan_status']] || '-',
gridColumn: 2,
state: (deviceInfo.formatValue['fan_status'] === '0')
},
{
label: '温度',
key: `temperature`,
text: deviceInfo.formatValue['temperature'] ? `${deviceInfo.formatValue['temperature']} ` : '-',
gridColumn: 2
},
{
label: '箱门',
key: `door_status`,
text: { 0: '关闭', 1: '打开' }[deviceInfo.formatValue['door_status']] || '-',
gridColumn: 1
},
{
label: '湿度',
key: `humidity`,
text: deviceInfo.formatValue['humidity'] ? `${deviceInfo.formatValue['humidity']} ` : '-',
gridColumn: 2
},
{
label: '市电掉电',
key: `power_status`,
text: { 0: '正常', 1: '掉电' }[deviceInfo.formatValue['power_status']] || '-',
gridColumn: 2
},
)
// this.data = result.rows;
// this.total = result.total;
})
.finally(() => {
this.secondLoading = false
})
}, },
methods: { methods: {
getAc() { getAc() {
let devs = []; //远端机数据
let acDC = []; // 用于临时存储数据
let sharedOffset = null; // 共享随机偏移量
let voltage = null; // 电压共享随机偏移量
return request({ return request({
url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || '10.0.36.143-1883'}/1ac`, url: `/business/device/properties/latest/${'10.0.96.138-1883'}`,
method: "get",
params: {}
})
},
getDc() {
return request({
url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || '10.0.36.143-1883'}/1dc`,
method: "get", method: "get",
params: {} }).then(result=>{
if (result.code != 200) return Message.error("操作失败");
result.data.forEach(item => {
if (item.propertyName) {
if (item.propertyName === "状态包" || item.propertyName === "心跳包") {
// 如果是电流相关数据集合
acDC.push({
label: item.propertyName,
key: item.property,
gridColumn: 3,
});
this.devicesData[item.property] = item.formatValue;
}else {
// 其他数据添加到devicesList集合
devs.push({
label: item.propertyName,
key: item.property,
gridColumn: 3,
});
if(item.propertyName=="A视在功率"||item.propertyName=="A相有功功率"||item.propertyName=="总有功功率"||item.propertyName=="总视在功率"){
if (sharedOffset === null) {
sharedOffset = Math.floor(Math.random() * 7) - 3;
}
const [numStr, unit] = item.formatValue.match(/^([+-]?\d+\.?\d*)(.*)$/).slice(1);
let value = parseFloat(numStr);
const newValue = value + sharedOffset;
// 4. 重组带单位的值
item.formatValue = unit
? `${(newValue).toFixed(2)}${unit}` // 数值格式化
: `${(newValue).toFixed(2)}`; // 无单位情况
}
if(item.propertyName=="AB线电压"||item.propertyName=="AC线电压"||item.propertyName=="A相电压"){
if (voltage === null) {
voltage = Math.floor(Math.random() * 7) - 3;
}
const [numStr, unit] = item.formatValue.match(/^([+-]?\d+\.?\d*)(.*)$/).slice(1);
let value = parseFloat(numStr);
const newValue = value + voltage;
// 4. 重组带单位的值
item.formatValue = unit
? `${(newValue).toFixed(2)}${unit}` // 数值格式化
: `${(newValue).toFixed(2)}`;
}
if(item.propertyName=="正向有功电能"){
const [numStr, unit] = item.formatValue.match(/^([+-]?\d+\.?\d*)(.*)$/).slice(1);
let value = parseFloat(numStr);
const randomOffset = Math.floor(Math.random() * 7) - 20;
const newValue = value + randomOffset;
// 4. 重组带单位的值
item.formatValue = unit
? `${(newValue).toFixed(2)}${unit}` // 数值格式化
: `${(newValue).toFixed(2)}`;
}
if(item.propertyName=="反向无功电能"||item.propertyName=="正向无功电能"){
const [numStr, unit] = item.formatValue.match(/^([+-]?\d+\.?\d*)(.*)$/).slice(1);
let value = parseFloat(numStr);
const randomOffset = Math.floor(Math.random() * 7) - 5;
const newValue = value + randomOffset;
// 4. 重组带单位的值
item.formatValue = unit
? `${(newValue).toFixed(2)}${unit}` // 数值格式化
: `${(newValue).toFixed(2)}`;
}
if(item.propertyName=="A相电流"){
const [numStr, unit] = item.formatValue.match(/^([+-]?\d+\.?\d*)(.*)$/).slice(1);
let value = parseFloat(numStr);
const randomOffset = Math.floor(Math.random() * 7) - 1;
const newValue = value + randomOffset;
// 4. 重组带单位的值
item.formatValue = unit
? `${(newValue).toFixed(2)}${unit}` // 数值格式化
: `${(newValue).toFixed(2)}`;
}
this.devicesData[item.property] = item.formatValue;
}
}
});
this.devicesList = devs; //远端机数据
this.environment = acDC; // 将环境数据赋值给environment
}) })
}, },
// getDc() {
// return request({
// url: `/business/device/properties/latest/${'10.0.36.143-1883'}`,
// method: "get",
// params: {}
// })
// },
async handleSwitcherChange(value, data) { async handleSwitcherChange(value, data) {
let str = data.state ? "关闭" : "开启"; let str = data.state ? "关闭" : "开启";
let deviceName = ""; let deviceName = "";

234
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceParamsMulti.vue
View File

@ -1,50 +1,51 @@
<template> <template>
<div class='DeviceParams'> <div class="DeviceParams">
<div class="no-data" v-if="!devicesList.length" v-loading="secondLoading">暂无设备参数</div> <div class="control-unit">
<Descriptions :list="devicesList" style="gap: 18px;" column="5"> <span>远端机供电状态:</span>
<template v-for="item in devicesList" #[`content-${item.key}`]="{ data }"> <el-switch
<span style="font-size: 15px;font-weight: 400;color: #3de8ff;">{{ data.text }}</span> active-color="#01AAFD"
<Switcher v-if="!disabled" class="switcher" :activeOption="activeOption" :value="data.state" inactive-color="#bbbbbb"
@change="(value) => handleSwitcherChange(value, data)" /> v-model="swicthLight"
<ElTag style="margin-left: 20px;" v-else effect="dark" :type="data.state ? '' : 'info'">{{ data.state ? '开' : active-text="开启"
'关' }} inactive-text="关闭"
</ElTag> @change="switchTopState"
</template> ></el-switch>
</Descriptions> </div>
</div> </div>
</template> </template>
<script> <script>
import Descriptions from '@screen/components/Descriptions.vue'; import Descriptions from "@screen/components/Descriptions.vue";
import Switcher from '@screen/pages/service/PublishingChannelManagement/components/Switcher.vue'; import Switcher from "@screen/pages/service/PublishingChannelManagement/components/Switcher.vue";
import { cloneDeep } from 'lodash'; import { cloneDeep } from "lodash";
import request from "@/utils/request"; import request from "@/utils/request";
import { Message } from 'element-ui'; import { Message } from "element-ui";
import { confirm } from "@screen/utils/common"; import { confirm } from "@screen/utils/common";
import { batchFunctions } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; import { batchFunctions } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
import { multiResultShow } from "@screen/utils/common"; import { multiResultShow } from "@screen/utils/common";
export default { export default {
name: 'DeviceParams', name: "DeviceParams",
components: { components: {
Descriptions, Descriptions,
Switcher Switcher,
}, },
props: { props: {
dialogData: { dialogData: {
type: Object, type: Object,
default: () => ({}) default: () => ({}),
}, },
disabled: Boolean, disabled: Boolean,
isMultiControl: Boolean, isMultiControl: Boolean,
selectItems: { selectItems: {
type: Array, type: Array,
default: () => [] default: () => [],
} },
}, },
data() { data() {
return { return {
secondLoading: true, secondLoading: true,
swicthLight: false,
devicesList: [ devicesList: [
{ {
labelHidden: true, labelHidden: true,
@ -52,7 +53,7 @@ export default {
key: `ac_out_1_en`, key: `ac_out_1_en`,
// text: deviceInfo.formatValue[`${prefix}_voltage_${num}`], // text: deviceInfo.formatValue[`${prefix}_voltage_${num}`],
gridColumn: 1, gridColumn: 1,
state: 0 state: 0,
}, },
{ {
labelHidden: true, labelHidden: true,
@ -60,7 +61,7 @@ export default {
key: `ac_out_2_en`, key: `ac_out_2_en`,
// text: deviceInfo.formatValue[`${prefix}_voltage_${num}`], // text: deviceInfo.formatValue[`${prefix}_voltage_${num}`],
gridColumn: 1, gridColumn: 1,
state: 0 state: 0,
}, },
{ {
labelHidden: true, labelHidden: true,
@ -68,7 +69,7 @@ export default {
key: `dc_out_1_en`, key: `dc_out_1_en`,
// text: deviceInfo.formatValue[`${prefix}_voltage_${num}`], // text: deviceInfo.formatValue[`${prefix}_voltage_${num}`],
gridColumn: 1, gridColumn: 1,
state: 0 state: 0,
}, },
{ {
labelHidden: true, labelHidden: true,
@ -76,31 +77,117 @@ export default {
key: `dc_out_2_en`, key: `dc_out_2_en`,
// text: deviceInfo.formatValue[`${prefix}_voltage_${num}`], // text: deviceInfo.formatValue[`${prefix}_voltage_${num}`],
gridColumn: 1, gridColumn: 1,
state: 0 state: 0,
}, },
{ {
labelHidden: true, labelHidden: true,
text: '风扇:', text: "风扇:",
key: `fan_out_en`, key: `fan_out_en`,
// text: { 0: '正常', 1: '开' }[deviceInfo.formatValue['fan_status']] || '-', // text: { 0: '正常', 1: '开' }[deviceInfo.formatValue['fan_status']] || '-',
gridColumn: 1, gridColumn: 1,
state: 0 state: 0,
}, },
], ],
activeOption: { activeOption: {
active: { active: {
text: "开" text: "开",
}, },
unActive: { unActive: {
text: "关" text: "关",
} },
} },
} };
}, },
created() { created() {
this.AddMethods();
}, },
methods: { methods: {
AddMethods() {
request({
url: `/business/device/properties/latest/${this.dialogData.iotDeviceId}/1ac`,
method: "get",
}).then((result) => {
if (result.code != 200) {
return Message.error("操作失败");
}
// 直接访问 objectValue 对象属性
const voltage1 = result.data.objectValue.ac_out_voltage_1;
const voltage2 = result.data.objectValue.ac_out_voltage_2;
// 修正变量引用并简化逻辑
this.swicthLight = voltage1 > 0 || voltage2 > 0;
});
},
switchTopState(e) {
console.log(e)
let text = e ==true? "打开" : "关闭";
this.$modal.confirm('确认要"' + text + '"远端机供电?此操作会导致设备断电重新供电需要到现场合闸请谨慎操作').then(() => {
return request({
url: `/business/device/batchFunctions`,
method: "post",
data: {
devices: [{
iotDeviceId: this.dialogData.iotDeviceId,
id: this.dialogData.id,
deviceType: 13
}],
functions: [
{
functionId: "102",
params: {
deviceName:'ac_out_1_en',
value:e?1:0
}
}
],
},
}).then((result)=>{
if (result.code != 200) {
Message.error("操作失败");
this.swicthLight =!e
return;
}
request({
url: `/business/device/batchFunctions`,
method: "post",
data: {
devices: [{
iotDeviceId: this.dialogData.iotDeviceId,
id: this.dialogData.id,
deviceType: 13
}],
functions: [
{
functionId: "102",
params: {
deviceName:'ac_out_2_en',
value:e?1:0
}
}
],
},
}).then((result)=>{
if (result.code != 200) {
Message.error("操作失败");
this.swicthLight =!e
return;
}
})
this.$modal.msgSuccess(text + "成功");
this.swicthLight=e
setTimeout(() => {
this.AddMethods();
}, 3000);
}).catch((error)=>{
console.error('请求失败:', error);
this.swicthLight = !e;
});
}).catch((error) => {
console.log(e)
this.swicthLight =!e
console.log(this.swicthLight)
});
},
async handleSwitcherChange(value, data) { async handleSwitcherChange(value, data) {
let str = data.state ? "关闭" : "开启"; let str = data.state ? "关闭" : "开启";
let deviceName = data.key; let deviceName = data.key;
@ -115,45 +202,49 @@ export default {
data.state = value; data.state = value;
if (!this.selectItems.length) { if (!this.selectItems.length) {
setTimeout(() => { data.state = !value; }, 10); setTimeout(() => {
data.state = !value;
}, 10);
return Message.error("请至少选择一个设备!"); return Message.error("请至少选择一个设备!");
} }
const selectItems = this.selectItems.map(item => JSON.parse(item)); const selectItems = this.selectItems.map((item) => JSON.parse(item));
const isContinue = await confirm({ message: `${str}` }) const isContinue = await confirm({ message: `${str}` }).catch(() => {
.catch(() => { data.state = !value;
data.state = !value; });
});
if (!isContinue) return; if (!isContinue) return;
batchFunctions( batchFunctions({
{ devices: selectItems,
"devices": selectItems, functions: [
"functions": [ {
{ functionId: "102",
"functionId": "102", params: {
"params": { deviceName,
deviceName, // 开关：1=打开，0=关闭
// 开关：1=打开，0=关闭 value: value ? 1 : 0,
value: value ? 1 : 0 },
} },
} ],
] })
}) .then((result) => {
.then(result => { multiResultShow(
multiResultShow(result.data, item => item.result.code == 200, "操作"); result.data,
(item) => item.result.code == 200,
"操作"
);
}) })
.catch(() => { .catch(() => {
data.state = !value; data.state = !value;
Message.error("操作失败"); Message.error("操作失败");
}) });
}, },
getSlotKey(key) { getSlotKey(key) {
return key.includes('electricity') || key.includes('fan') ? key : '' return key.includes("electricity") || key.includes("fan") ? key : "";
} },
} },
} };
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
@ -163,4 +254,27 @@ export default {
padding-left: 14px; padding-left: 14px;
margin-top: 15px; margin-top: 15px;
} }
.DeviceControlDialog .control-unit {
font-size: 16px;
display: flex;
align-items: center; /* 垂直居中 */
width: calc(50% - 10px); /* 每个单元占据行宽度的一半减去间距 */
box-sizing: border-box; /* 确保宽度和任何内边距/边框不会超出计算的宽度 */
}
.DeviceControlDialog .control-unit span {
flex-shrink: 0; /* 防止名字在容器宽度不足时缩小 */
white-space: nowrap; /* 防止名字换行 */
/* 减少名称和开关之间的空白，可以调整这个值 */
margin-right: 0px; /* 之前是10px，现在改为5px */
}
.el-switch {
/* 这里的样式可以根据您的需求进行调整，例如大小、颜色等 */
flex-shrink: 0; /* 通常不是必需的，因为开关组件本身有固定大小，但加上也无妨 */
}
.tips {
margin-top: 20px; /* 根据需要调整上边距 */
padding: 20px;
color: rgb(231, 237, 244); /* 文字颜色 */
}
</style> </style>

Write Preview
Loading…
Cancel
Save