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

按需求修改设备详情页

Browse Source
This commit is contained in:
熊丽君
2021-04-30 14:28:10 +08:00
parent 965371de38
commit 95381aabf3
2 changed files with 345 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/api/hardware/device.js
View File

@ -1,4 +1,4 @@
import request from '@/utils/request'
import request from '@/utils/request';
// 查询设备列表
export function list(params) {
@ -6,16 +6,15 @@ export function list(params) {
url: '/system/device/list',
method: 'get',
params
})
});
}
// 查询设备详细
export function info(deviceId) {
return request({
url: '/system/device/' + deviceId,
method: 'get'
})
});
}
// 新增设备
@ -24,7 +23,7 @@ export function add(data) {
url: '/system/device',
method: 'post',
data
})
});
}
// 修改设备
@ -33,7 +32,7 @@ export function update(data) {
url: '/system/device',
method: 'post',
data
})
});
}
// 删除设备
@ -41,7 +40,7 @@ export function del(ids) {
return request({
url: '/system/device/' + ids,
method: 'delete'
})
});
}
// 新增更新设备记录
@ -50,7 +49,7 @@ export function saveDeviceFirmware(data) {
url: '/system/device/saveDeviceFirmware',
method: 'post',
data
})
});
}
// 导出设备列表
@ -63,18 +62,17 @@ export function exportEquipment(params) {
// 下载用户导入模板
export function importTemplate() {
return request({
url: '/system/device/importTemplate',
})
url: '/system/device/importTemplate'
});
}
// 获取白名单列表
export function whiteList(params) {
return request({
url: '/system/device/whiteList',
method: 'get',
params
})
});
}
/**
* 批量添加白名单
@ -85,7 +83,7 @@ export function addWhiteDevice(ids) {
url: '/system/device/addWhiteDevice/',
method: 'post',
data: { ids }
})
});
}
/**
@ -97,5 +95,13 @@ export function delWhiteDevice(ids) {
url: '/system/device/delWhiteDevice',
method: 'post',
data: { ids }
})
});
}
// echarts 展示历史数据
export function getKeyHistory(data) {
return request({
url: '/system/signal/getKeyHistory',
method: 'post',
data
});
}

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

@ -4,11 +4,18 @@
<el-col :span="8">
<span>设备名称：{{ info.deviceName }}</span>
<el-divider class="mt10 mb10"></el-divider>
<span>设备型号：{{info.deviceModel }}</span>
<!-- <span>设备型号：{{info.deviceModel }}</span>
<el-divider class="mt10 mb10"></el-divider>
<span>设备编码：{{info.deviceCode }}</span>
<span>设备编码：{{info.deviceCode }}</span> -->
<span>设备SN：{{ info.deviceId }}</span>
<el-divider class="mt10 mb10"></el-divider>
<span>设备类型：{{ info.deviceType ? this.deviceTypeList.find(v=> v.value == info.deviceType).label : '' }}</span>
<span
>设备类型：{{
info.deviceType
? this.deviceTypeList.find(v => v.value == info.deviceType).label
: ''
}}</span
>
<el-divider class="mt10 mb10"></el-divider>
<span>省：{{ info.proName }}</span>
<el-divider class="mt10 mb10"></el-divider>
@ -22,42 +29,151 @@
<el-divider class="mt10 mb10"></el-divider>
<span>创建时间：{{ info.createTime | formatDate }}</span>
</el-col>
<el-col :offset="3" :span="10" class="p20">
<el-col :offset="1" :span="15">
<el-scrollbar style="height: 550px;" wrap-class="scrollbar-wrapper">
<div v-for="v in signal" :key="v.id" style="width: 80%">
<el-row class="pb20">
<div v-for="v in signal" :key="v.id" class="row_div">
<el-row
type="flex"
class="row-bg"
justify="space-around"
style="height:65px;align-items: center;margin-bottom:10px"
>
<el-col :span="12">
<div class="pb10">{{v.keyCN}}：{{v.valueCN}}</div>
<div>
<i class="ico_box">
<span class="el-icon-data-line"></span>
</i>
<span
style="margin-left:20px"
:class="
v.keyCN
? v.keyCN.includes('单芯电压值')
? v.valueCN >= overcharge &&
v.valueCN <= overdischarge
? 'red'
: v.valueCN >= overVoltage &&
v.valueCN <= underVoltage
? 'yellow'
: ''
: ''
: ''
"
>{{ v.keyCN }}：{{ v.valueCN }}</span
>
<!-- :class="v.keyCN.includes('单芯电压值') ? 'a' : ''" -->
<!-- {{ v.keyCN.includes('单芯电压值') ? true : false }} -->
<!-- 单芯电压值 -->
</div>
</el-col>
<el-col :span="12">
<div class="tr">
<span style="margin-right:20px">{{
signalUpdateTime | formatDate
}}</span>
<el-button
size="mini"
@click="openDialog(info.deviceId, v.key)"
>历史性能</el-button
>
</div>
</el-col>
<el-col :span="12" class="tr">{{signalUpdateTime | formatDate }}</el-col>
</el-row>
</div>
</el-scrollbar>
</el-col>
</el-row>
<el-dialog title="历史记录" :visible.sync="dialogVisible" width="70%">
<el-date-picker
v-model="selectDate"
type="datetimerange"
:default-time="['00:00:00', '23:59:59']"
unlink-panels
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
>
<!-- :picker-options="pickerOptions" -->
</el-date-picker>
<span style="margin-left:20px"
><el-button type="primary" @click="getNewData">查询</el-button></span
>
<div ref="echa" style="width: 100%;height:600px;"></div>
</el-dialog>
</section>
</template>
<script>
import {
info,
} from "@/api/hardware/device";
import { getProvinceByCode } from "@/api/hardware/province";
import { info, getKeyHistory } from '@/api/hardware/device';
import { getProvinceByCode } from '@/api/hardware/province';
export default {
name: "DeviceDetail",
name: 'DeviceDetail',
data() {
return {
selectDate: '',
//日期选择范围在一个月内
// pickerOptions: {
// onPick: ({ maxDate, minDate }) => {
// this.selectDate = minDate.getTime();
// if (maxDate) {
// this.selectDate = '';
// }
// },
// disabledDate: time => {
// if (this.selectDate !== '') {
// const one = 30 * 24 * 3600 * 1000;
// const minTime = this.selectDate - one;
// const maxTime = this.selectDate + one;
// return time.getTime() < minTime || time.getTime() > maxTime;
// // time.getTime() > Date.now() 未来时间
// }
// }
// },
dialogVisible: false,
centerChart: null,
queryParams: {
deviceId: '',
key: ''
},
id: '',
info: {},
signal: [],
signalUpdateTime: '',
deviceTypeList: [
{ 'label': '锐能设备', 'value': 'rn', },
{ 'label': '铁塔设备', 'value': 'tt', },
],
{ label: '锐能设备', value: 'rn' },
{ label: '铁塔设备', value: 'tt' }
]
};
},
watch: {
selectDate() {
if (!this.selectDate) {
this.selectDate = '';
}
}
},
computed: {
// 过充 单体过充阈值
overcharge() {
let a = this.signal.find(item => item.keyCN == '单体过充阈值');
return a ? a.valueCN - 0 : null;
},
// 过放 单体过放阈值
overdischarge() {
let a = this.signal.find(item => item.keyCN == '单体过放阈值');
return a ? a.valueCN - 0 : null;
},
// 过压 单体过压阈值
overVoltage() {
let a = this.signal.find(item => item.keyCN == '单体过压阈值');
return a ? a.valueCN - 0 : null;
},
// 欠压 单体欠压阈值
underVoltage() {
let a = this.signal.find(item => item.keyCN == '单体欠压阈值');
return a ? a.valueCN - 0 : null;
}
},
created() {
let { id } = this.$route.query;
if (!id) {
@ -66,7 +182,7 @@ export default {
return;
}
this.id = id;
this.getDetail()
this.getDetail();
},
methods: {
getDetail() {
@ -79,31 +195,166 @@ export default {
if (info.deviceSignal) {
let deviceSignal = JSON.parse(info.deviceSignal.signalJsonTurn);
this.signal = deviceSignal.signal;
// let a = deviceSignal.signal.find(
// item => item.keyCN == '单体过充阈值'
// );
// console.log(a.valueCN);
this.signalUpdateTime = info.deviceSignal.updateTime;
}
} else {
this.msgError(msg);
}
})
});
},
getProvinceByCode(code) {
return new Promise((resolve, reject) => {
getProvinceByCode(code).then(({ code, msg, data }) => {
getProvinceByCode(code)
.then(({ code, msg, data }) => {
if (code == 200) {
resolve(data.cityName);
} else {
this.$message.error(msg);
reject({ msg, code })
reject({ msg, code });
}
}).catch(error => {
reject(error)
})
.catch(error => {
reject(error);
});
});
},
openDialog(deviceId, key) {
this.dialogVisible = true;
this.queryParams.deviceId = deviceId;
this.queryParams.key = key;
this.getChartData();
},
// getDay(mss) {
// var days = parseInt(mss / (1000 * 60 * 60 * 24));
// var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
// var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
// var seconds = (mss % (1000 * 60)) / 1000;
// return days + ' 天 ' + hours + ' 小时 ' + minutes + ' 分钟 ';
// },
getNewData() {
if (this.selectDate == '') return this.$message.info('请选择日期');
// let a = new Date(this.selectDate[0]).getTime();
// let b = new Date(this.selectDate[1]).getTime();
// const minTime = b - a;
// const flag = this.getDay(minTime);
this.queryParams.startTime = this.selectDate[0];
this.queryParams.endTime = this.selectDate[1];
this.getChartData();
},
getChartData() {
getKeyHistory(this.queryParams).then(data => {
this.$nextTick(() => {
this.initChart(data);
});
});
},
initChart(data) {
var echarts = require('echarts');
this.centerChart = echarts.init(this.$refs.echa);
let months = [];
let nums = [];
data.map(item => {
for (const k in item) {
months.push(k);
nums.push(item[k]);
}
});
let option = {
tooltip: {
trigger: 'axis'
},
toolbox: {
show: true,
feature: {
dataView: {
readOnly: true,
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) {
//组装表头
tdHeads += `<td style="text-align:center">${item.name}</td>`;
});
let table = `<table style="width:100%;text-align: center"><tbody><tr>${tdHeads} </tr>`;
for (let i = 0, l = axisData.length; i < l; i++) {
for (let j = 0; j < series.length; j++) {
//组装表数据
tdBodys += `<td>${series[j].data[i]}</td>`;
}
table += `<tr><td>${i + 1}</td><td >${
axisData[i]
}</td>${tdBodys}</tr>`;
tdBodys = '';
}
table += '</tbody></table>';
return table;
}
},
// restore: {},
saveAsImage: {}
}
},
xAxis: {
name: '时间',
type: 'category',
boundaryGap: false,
data: months.map(function(str) {
return str.replace(' ', '\n');
})
},
yAxis: {
name: '数值',
type: 'value'
},
series: [
{
name: '数值',
type: 'line',
data: nums,
lineStyle: {
color: '#46a6ff'
}
}
]
};
this.centerChart.setOption(option);
}
}
};
</script>
<style>
<style lang="scss" scoped>
.row_div {
background-color: #f8f9fa;
padding: 0 30px 0 10px;
}
.ico_box {
width: 55px;
height: 55px;
display: inline-block;
text-align: center;
background-color: #1890ff;
border-radius: 50%;
overflow: hidden;
vertical-align: middle;
span {
color: #fff;
font-size: 27px;
line-height: 55px;
}
}
.red {
color: red;
}
.yellow {
color: orange;
}
</style>