<template>
|
<div class="main">
|
<!-- list -->
|
<div class="list">
|
<div class="list-title">
|
<div class="">设备列表</div>
|
</div>
|
<div class="list-content posR">
|
<div class="posA_full">
|
<div class="inner">
|
<div class="list-item" :class="{'isRun': item.connection_state, 'disabled': !item.connection_state, 'active': cur_id == item.dev_id}" v-for="(item, index) in list" :key="'list_' + index" @click="selectDev(item)">
|
<div class="name">{{item.dev_name}}</div>
|
</div>
|
<!-- 无数据 -->
|
<div v-if="!list.length" class="empty-list">暂无数据</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="page-content">
|
<div class="page-banner tac">
|
<div class="f_right d_flex">
|
<div class="btn-grp" v-show="!showTable">
|
|
<div class="btn_3d" :class="{'disabled': prevDisabled}" @click="prevGrp">上一组</div>
|
<div class="btn_3d" :class="{'disabled': nextDisabled}" @click="nextGrp">下一组</div>
|
<div class="btn_3d" @click="showGOptions">图表选项</div>
|
</div>
|
<!-- <div class="btn_3d" @click="toggle">显示{{showTable ? '图表' : '表格'}}</div> -->
|
</div>
|
<div class="content-title">设备名称</div>
|
</div>
|
<div class="wraper">
|
<div class="container" :class="{'showTable': showTable}">
|
<div class="wrap-graph">
|
<line-chart-mul id="G_linechart" ref="G_linechart"
|
title="我是标题"
|
height="100%"
|
:max-size='true'
|
:show-xaxis="true"
|
:categoryLen="categoryLen"
|
:show-zoom='false'
|
sub-title-width="160"
|
:title-split-len="12"
|
:subtext="true" trigger-on="mousemove"></line-chart-mul>
|
</div>
|
<div class="wrap-table">
|
<assemble-table
|
:data=rtData
|
:len="3"
|
></assemble-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 图表配置 -->
|
<el-drawer
|
title="图表配置"
|
direction="rtl"
|
size="800px"
|
custom-class="drawer-bg drawer-options"
|
:visible.sync="G_options.show" >
|
<div class="drawer-content">
|
<el-form ref="form" :inline="true" size="mini" :model="form.data" :rules="form.rules" label-width="8em">
|
<el-form-item label="显示属性数量" prop="categoryLen">
|
<el-input type="number" v-model="form.data.categoryLen"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="setCategoryLen">设定</el-button>
|
</el-form-item>
|
</el-form>
|
<el-transfer
|
class=""
|
v-model="selectedLegends"
|
:titles="['不查看属性', '待查看属性']"
|
:button-texts="['移除', '添加']"
|
:data="allLegends"
|
:filterable="true"
|
@change="selectChange"
|
>
|
</el-transfer>
|
</div>
|
</el-drawer>
|
<!-- ROOTEND -->
|
</div>
|
</template>
|
|
<script>
|
import Timeout from '@/script/Timeout'
|
import Mock from 'mockjs'
|
import AssembleTable from '@/components/AssembleTable';
|
import LineChartMul from '@/components/chart/LineChartMul';
|
import CONFIG from '@/script/config_subject';
|
|
// 设定值的备份 因为要处理最后的余项
|
let category_len = 10;
|
let unit = {};
|
let config = null;
|
export default {
|
name: 'subject_realtime',
|
components: {
|
AssembleTable
|
,LineChartMul
|
},
|
data () {
|
const dev_id = this.$route.query.dev_id;
|
return {
|
list: []
|
,timer: new Timeout()
|
,cur_id: 0
|
,cur_type: 0
|
,showTable: false
|
,rtData: []
|
,G_data: []
|
,curLegendIdx: 0
|
// 当前选中的
|
,selectedLegends: []
|
// 图表显示的
|
,curLegends: []
|
// 查询出的全量
|
,allLegends: []
|
// 筛选后的
|
,categoryList: []
|
,record_time: []
|
,categoryLen_old: 10
|
,categoryLen: 10
|
,G_options: {
|
show: false
|
}
|
,keyword: ''
|
,form: {
|
data: {
|
categoryLen: 10
|
}
|
,rules: {
|
categoryLen: [{
|
validator: (rule, value, callback) => {
|
if (!('' + value).trim()) {
|
callback(new Error('显示属性数量必填'));
|
}
|
if (/[^0-9]/.test(value)) {
|
callback(new Error('显示属性数量必须为数值'));
|
}
|
if (value < 1 || value > 10) {
|
callback(new Error('显示属性数量应介于1~10之间'));
|
} else {
|
callback()
|
}
|
},
|
trigger: 'blur'
|
}]
|
}
|
}
|
}
|
},
|
computed: {
|
prevDisabled () {
|
return this.curLegendIdx < category_len;
|
}
|
,nextDisabled () {
|
// 收集依赖
|
this.categoryLen;
|
return this.curLegendIdx + category_len >= this.selectedLegends.length;
|
}
|
},
|
methods: {
|
// 获取列表
|
getList () {
|
let list = [];
|
this.$api.subject.getList().then((res) => {
|
res = JSON.parse(res.data.result);
|
// console.log(res, '++++++++++++++++++++');
|
if (res.code) {
|
list = res.data;
|
list.sort((a, b) => {
|
return b.connection_state - a.connection_state;
|
});
|
}
|
this.list = list;
|
});
|
}
|
,toggle () {
|
this.showTable = !this.showTable;
|
}
|
// 选定设备
|
,selectDev (obj) {
|
// 根据id 查询实时信息
|
// 选取前100笔数据
|
// 拿到配置
|
// console.log(obj, 'obj');
|
this.cur_id = obj.dev_id;
|
this.cur_type = obj.dev_type;
|
let param = [];
|
switch (obj.dev_type) {
|
case 11:
|
case 12:
|
case 19:
|
param = [obj.dev_type, obj.dev_id];
|
break;
|
default:
|
param = [obj.dev_type];
|
break;
|
}
|
// 初始化属性列表
|
this.initLegends(...param);
|
this.get100Data(obj.dev_type, obj.dev_id);
|
}
|
// 初始化要显示的属性列表
|
,initLegends (type, id) {
|
config = id ? CONFIG.DIR[type][id] : CONFIG.DIR[type];
|
unit = config.unit;
|
let allLegends = [];
|
let selectedLegends = [];
|
if (config) {
|
// console.log(config);
|
let props = Object.keys(config);
|
for (let i = 0, j = props.length; i < j; i++) {
|
const v = props[i];
|
// debugger;
|
if (v != 'unit' && config[v] != '备用') {
|
allLegends.push({
|
key: v,
|
label: config[v],
|
unit: config.unit[v]
|
});
|
selectedLegends.push(v);
|
}
|
}
|
}
|
this.allLegends = allLegends;
|
this.selectedLegends = selectedLegends;
|
this.curLegends = selectedLegends.slice(this.curLegendIdx, category_len);
|
this.updateGraph();
|
|
}
|
// 根据id查询实时数据
|
,getRTData () {
|
/*if (!this.cur_id) {
|
return false;
|
}*/
|
let param = {
|
type: this.cur_type
|
,data: {
|
dev_id: this.cur_id
|
}
|
};
|
|
this.$api.subject.getRTData(param).then((res) => {
|
res = JSON.parse(res.data.result);
|
// console.log(res, 'rtdata');
|
if (res.code) {
|
this.G_data.push(res.data[0]);
|
}
|
this.updateGraph();
|
});
|
}
|
// 根据id查询前100笔数据
|
,get100Data (type, id) {
|
this.timer.stop();
|
let param = {
|
type,
|
data: {
|
dev_id: id
|
}
|
};
|
this.$api.subject.get100Data(param).then((res) => {
|
res = JSON.parse(res.data.result);
|
// console.log(res, 'res');
|
let list = [];
|
if (res.code) {
|
list = res.data;
|
}
|
// debugger;
|
this.G_data = list;
|
this.timer.open();
|
});
|
}
|
,format (data) {
|
let xLabel = [],
|
series = [],
|
obj = {},
|
attrs = {};
|
let curLegends = this.curLegends;
|
if (data.length > 100) {
|
data.shift();
|
}
|
// debugger;
|
curLegends.forEach((v) => {
|
obj[v] = [];
|
attrs[v] = attrs[v] || [];
|
series.push({
|
name: config[v],
|
unit: unit[v],
|
data: obj[v],
|
step: '' == unit[v]
|
})
|
});
|
|
data.forEach((v) => {
|
xLabel.push(v.record_time);
|
Object.keys(v).forEach((val) => {
|
attrs[val] = attrs[val] || [];
|
attrs[val].push(v[val]);
|
});
|
});
|
|
Object.keys(obj).forEach((v) => {
|
obj[v].push(...attrs[v]);
|
});
|
|
// console.log(xLabel, series, 99899);
|
|
return {
|
xLabel
|
,series
|
}
|
}
|
// 选配置项 上一组
|
,prevGrp () {
|
if (this.curLegendIdx < category_len) {
|
return false;
|
}
|
this.curLegendIdx -= category_len;
|
this.curLegends = this.selectedLegends.slice(this.curLegendIdx, this.curLegendIdx + category_len);
|
// 更新图表
|
this.updateGraph();
|
}
|
// 选配置项 下一组
|
,nextGrp () {
|
if (this.curLegendIdx + category_len >= this.selectedLegends.length) {
|
return false;
|
}
|
// debugger;
|
this.curLegendIdx += category_len;
|
this.curLegends = this.selectedLegends.slice(this.curLegendIdx, this.curLegendIdx + category_len);
|
// 更新图表
|
this.updateGraph();
|
}
|
// 更新图表
|
,updateGraph () {
|
/*if (!this.G_data.length) {
|
return false;
|
}*/
|
|
this.categoryLen = this.curLegends.length;
|
|
if (this.categoryLen != this.categoryLen_old) {
|
// console.log('clear');
|
this.$G.chartManage.get('G_linechart').clear();
|
}
|
this.categoryLen_old = this.categoryLen;
|
this.$nextTick(() => {
|
this.$refs['G_linechart'].setOption(this.format(this.G_data));
|
});
|
}
|
// 设定categoryLen
|
,setCategoryLen () {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
this.categoryLen = this.form.data.categoryLen * 1;
|
category_len = this.form.data.categoryLen * 1;
|
this.curLegendIdx = 0;
|
this.curLegends = this.selectedLegends.slice(this.curLegendIdx, this.curLegendIdx + category_len);
|
this.updateGraph();
|
}
|
});
|
}
|
,showGOptions () {
|
// console.log(this.selectedLegends, 765)
|
// debugger;
|
this.G_options.show = true;
|
}
|
,selectChange (list, type, values) {
|
// console.log('hhh',list, type, values);
|
this.curLegendIdx = 0;
|
this.selectedLegends = list;
|
this.curLegends = this.selectedLegends.slice(this.curLegendIdx, this.curLegendIdx + category_len);
|
this.updateGraph();
|
}
|
// 定时器初始化
|
,timerInit () {
|
this.timer.init(() => {
|
this.getRTData();
|
this.timer.open();
|
}, 1000);
|
}
|
},
|
mounted () {
|
this.getList();
|
this.timerInit();
|
},
|
destroyed() {
|
this.timer.stop();
|
}
|
}
|
</script>
|
<style scoped>
|
.main {
|
display: -webkit-flex;
|
display: flex;
|
height: 100%;
|
}
|
.list {
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
width: 14em;
|
margin-right: .4em;
|
}
|
.list-title {
|
background: #24a3bf;
|
padding: 10px 0;
|
text-align: center;
|
}
|
.list-content {
|
flex: 1;
|
background: #00324b;
|
}
|
.inner {
|
height: 100%;
|
padding: .6em 0 .6em .6em;
|
overflow-y: auto;
|
}
|
.list-item {
|
margin: .2em 0;
|
color: #999;
|
}
|
.list-item .name {
|
font-style: italic;
|
}
|
.list-item.isRun {
|
color: #fff;
|
cursor: pointer;
|
}
|
.list-item.disabled {
|
cursor: not-allowed;
|
}
|
.list-item.active {
|
background: rgba(200, 200, 200, .4);
|
}
|
.list-item.isRun .name {
|
font-style: normal;
|
}
|
.list-item:hover {
|
background: rgba(200, 200, 200, .2);
|
}
|
.page-content {
|
flex: 1;
|
/*background: rgba(0,0,0,.2);*/
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
}
|
.wraper {
|
flex: 1;
|
overflow: hidden;
|
}
|
.page-banner {
|
padding: 6px;
|
}
|
.page-banner .btn_3d {
|
width: 6em;
|
margin-left: 1em;
|
}
|
.container {
|
width: 200%;
|
height: 100%;
|
display: -webkit-flex;
|
display: flex;
|
-webkit-transition: -webkit-transform 0.4s;
|
transition: transform 0.4s;
|
}
|
.showTable {
|
-webkit-transform: translateX(-50%);
|
transform: translateX(-50%);
|
}
|
.wrap-graph,
|
.wrap-table {
|
flex: 1;
|
}
|
.wrap-graph {
|
background: rgba(0,0,0,.2);
|
}
|
.empty-list {
|
text-align: center;
|
-webkit-transform: translate(-.3em, 1em);
|
transform: translate(-.3em, 1em);
|
}
|
.btn-grp {
|
display: -webkit-flex;
|
display: flex;
|
}
|
>>> .drawer-options {
|
background: #005074;
|
}
|
.drawer-content {
|
height: 100%;
|
display: -webkit-flex;
|
display: flex;
|
flex-direction: column;
|
padding: 10px;
|
}
|
</style>
|
