cxc/rn-bms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

device detail websocket

Browse Source
This commit is contained in:
cxc
2023-02-27 10:28:04 +08:00
parent df8c12e03b
commit 6dd0bd0c63
3 changed files with 51 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.production
View File

@ -3,4 +3,4 @@ ENV = 'production'
# 管理系统/生产环境
# VUE_APP_BASE_API = 'http://47.115.73.110:8080'
VUE_APP_BASE_API = 'http://192.168.110.10:8080'
VUE_APP_BASE_API = '/api'

1
package.json
View File

@ -56,6 +56,7 @@
"nprogress": "0.2.0",
"path-to-regexp": "2.4.0",
"quill": "1.3.7",
"reconnecting-websocket": "^4.4.0",
"screenfull": "4.2.0",
"sortablejs": "1.8.4",
"vue": "2.6.10",

84
src/views/hardware/device/detail.vue
View File

@ -12,8 +12,7 @@
<span
>设备类型：{{
info.deviceType
? this.deviceTypeList.find((v) => v.value == info.deviceType)
.label
? this.deviceTypeList.find(v => v.value == info.deviceType).label
: ''
}}</span
>
@ -134,9 +133,9 @@
<el-button
v-if="
v.key == '01305001' ||
v.key == '01303001' ||
v.key == '01306001' ||
v.key == '01304001'
v.key == '01303001' ||
v.key == '01306001' ||
v.key == '01304001'
"
type="primary"
plain
@ -208,6 +207,7 @@
import { getKeyHistory, info, updateValue } from '@/api/hardware/device';
import { getProvinceByCode } from '@/api/hardware/province';
import { handleOffsetAndRange } from '../../../utils/offsetMap';
import ReconnectingWebSocket from 'reconnecting-websocket';
export default {
name: 'DeviceDetail',
@ -236,17 +236,18 @@ export default {
centerChart: null,
queryParams: {
deviceId: '',
key: '',
key: ''
},
id: '',
info: {},
signal: [],
websocket: null,
defaultSignal: [],
signalUpdateTime: '',
deviceTypeList: [
{ label: '锐能设备', value: 'rn' },
{ label: '铁塔设备', value: 'tt' },
],
{ label: '铁塔设备', value: 'tt' }
]
};
},
watch: {
@ -254,29 +255,29 @@ export default {
if (!this.selectDate) {
this.selectDate = '';
}
},
}
},
computed: {
// 过充 单体过充阈值
overcharge() {
let a = this.signal.find((item) => item.keyCN == '单体过充阈值');
let a = this.signal.find(item => item.keyCN == '单体过充阈值');
return a ? a.valueCN - 0 : null;
},
// 过放 单体过放阈值
overdischarge() {
let a = this.signal.find((item) => item.keyCN == '单体过放阈值');
let a = this.signal.find(item => item.keyCN == '单体过放阈值');
return a ? a.valueCN - 0 : null;
},
// 过压 单体过压阈值
overVoltage() {
let a = this.signal.find((item) => item.keyCN == '单体过压阈值');
let a = this.signal.find(item => item.keyCN == '单体过压阈值');
return a ? a.valueCN - 0 : null;
},
// 欠压 单体欠压阈值
underVoltage() {
let a = this.signal.find((item) => item.keyCN == '单体欠压阈值');
let a = this.signal.find(item => item.keyCN == '单体欠压阈值');
return a ? a.valueCN - 0 : null;
},
}
},
created() {
let { id } = this.$route.query;
@ -288,13 +289,16 @@ export default {
this.id = id;
this.getDetail();
},
mounted() {
this.initWebsocket();
},
methods: {
handleOffsetAndRange,
handleCommand(item, command) {
this.$confirm('确认提交?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
type: 'warning'
})
.then(() => {
item.value = command;
@ -325,7 +329,7 @@ export default {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /^[1-9]\d*$/,
inputErrorMessage: '校验失败',
inputErrorMessage: '校验失败'
})
.then(({ value }) => {
item.value = value;
@ -355,8 +359,8 @@ export default {
let deviceSignal = JSON.parse(info.deviceSignal.signalJsonTurn);
this.signal = deviceSignal.signal;
this.defaultSignal = info.defaultSignal;
console.log(info.deviceSignal.signalJsonTurn);
console.log(this.signal);
// console.log(info.deviceSignal.signalJsonTurn);
// console.log(this.signal);
// let a = deviceSignal.signal.find(
// item => item.keyCN == '单体过充阈值'
// );
@ -379,7 +383,7 @@ export default {
reject({ msg, code });
}
})
.catch((error) => {
.catch(error => {
reject(error);
});
});
@ -410,7 +414,7 @@ export default {
this.getChartData();
},
getChartData() {
getKeyHistory(this.queryParams).then((data) => {
getKeyHistory(this.queryParams).then(data => {
this.$nextTick(() => {
this.initChart(data);
});
@ -421,7 +425,7 @@ export default {
this.centerChart = echarts.init(this.$refs.echa);
let months = [];
let nums = [];
data.map((item) => {
data.map(item => {
for (const k in item) {
months.push(k);
nums.push(item[k]);
@ -429,19 +433,19 @@ export default {
});
let option = {
tooltip: {
trigger: 'axis',
trigger: 'axis'
},
toolbox: {
show: true,
feature: {
dataView: {
readOnly: true,
optionToContent: function (opt) {
optionToContent: function(opt) {
let axisData = opt.xAxis[0].data; //坐标数据
let series = opt.series; //折线图数据
let tdHeads = '<td>序号</td><td>时间</td>'; //表头
let tdBodys = ''; //数据
series.forEach(function (item) {
series.forEach(function(item) {
//组装表头
tdHeads += `<td style="text-align:center">${item.name}</td>`;
});
@ -458,23 +462,23 @@ export default {
}
table += '</tbody></table>';
return table;
},
}
},
// restore: {},
saveAsImage: {},
},
saveAsImage: {}
}
},
xAxis: {
name: '时间',
type: 'category',
boundaryGap: false,
data: months.map(function (str) {
data: months.map(function(str) {
return str.replace(' ', '\n');
}),
})
},
yAxis: {
name: '数值',
type: 'value',
type: 'value'
},
series: [
{
@ -482,14 +486,24 @@ export default {
type: 'line',
data: nums,
lineStyle: {
color: '#46a6ff',
},
},
],
color: '#46a6ff'
}
}
]
};
this.centerChart.setOption(option);
},
},
initWebsocket() {
const wsBaseUrl =
process.env.NODE_ENV === 'development'
? '192.168.110.10:8080'
: `${window.location.host}${process.env.VUE_APP_BASE_API}`;
this.websocket = new ReconnectingWebSocket(`ws://${wsBaseUrl}/ws`);
this.websocket.addEventListener('message', e => {
this.$message.success(e.data);
});
}
}
};
</script>