<template>
|
<div class="trendLineChart-right">
|
<el-form
|
:model="queryParams"
|
ref="queryForm"
|
:inline="true"
|
label-width="68px"
|
class="query-form"
|
style="margin-bottom: 20px"
|
>
|
<el-select v-model="value" placeholder="请选择" style="width: 120px">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
<el-form-item label="" prop="minute" :rules="rules.numRule">
|
最新
|
<el-input
|
v-model="queryParams.minute"
|
:min="1"
|
:max="120"
|
style="width: 120px"
|
type="number"
|
></el-input>
|
分钟
|
</el-form-item>
|
|
<el-form-item>
|
<el-button
|
type="primary"
|
icon="el-icon-search"
|
size="mini"
|
@click="handleQuery"
|
>查询</el-button
|
>
|
</el-form-item>
|
</el-form>
|
<div class="tableStyle" v-if="value == 'tableOpen'">
|
<el-table
|
:data="tableData"
|
ref="dataTable"
|
border
|
style="margin-top: 20px"
|
:height="height"
|
@selection-change="handleSelectionChange"
|
>
|
<el-table-column type="selection" align="center"></el-table-column>
|
<el-table-column prop="statusName" align="center" label="坐标轴">
|
<template slot-scope="scope">
|
<el-select
|
v-model="scope.row.yValue"
|
@change="selectNumber(scope.row, scope.$index)"
|
>
|
<el-option
|
v-for="(item, index) in addTableSelect"
|
:key="item.yValue"
|
:label="item.yLable"
|
:value="item.yValue"
|
></el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column prop="meteName" align="center" label="表具名称">
|
</el-table-column>
|
<el-table-column prop="indexName" align="center" label="点位名称" />
|
<el-table-column
|
prop="indexUnit"
|
align="center"
|
label="单位"
|
:formatter="unitFormat"
|
/>
|
<el-table-column prop="value" align="center" label="当前值">
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="200">
|
<template slot-scope="scope">
|
<el-button
|
type="primary"
|
icon="el-icon-search"
|
size="mini"
|
@click="openDialog(scope.row, 'line')"
|
>趋势图
|
</el-button>
|
<el-button
|
type="primary"
|
icon="el-icon-search"
|
size="mini"
|
@click="openDialog(scope.row, 'table')"
|
>数据
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<component
|
ref="lincharVue"
|
:is="vuename"
|
:chart-data="liveLineChartData"
|
style="margin-top: 20px"
|
></component>
|
<!--历史曲线dialog-->
|
<el-dialog
|
:title="title"
|
:visible.sync="open"
|
width="1000px"
|
:close-on-click-modal="false"
|
@close="closeDialog"
|
>
|
<el-row style="padding:16px 16px 0;margin-bottom:32px;">
|
<history-alarm-view
|
ref="historyAlarmView"
|
:code="code"
|
:activeName="activeName"
|
v-if="dialogType === 'line'"
|
/>
|
<TableDialog :code="code" v-else :open="open" />
|
</el-row>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="cancelDialog">取 消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getTrendSettingIndexLineData,
|
getSvgTrendSettingIndex
|
} from "@/api/dataMonitoring/realTimeTrend/realTimeTrend";
|
import historyAlarmView from "../../energyAlarm/realTimeAlarm/historyAlarmView";
|
import mixins from "@/layout/mixin/getHeight";
|
import TableDialog from "./tableDialog";
|
|
let timers;
|
export default {
|
name: "energyIndex",
|
components: {
|
lincharVue: () =>
|
import("../../dataMonitoring/realTimeTrend/LineChart.vue"),
|
historyAlarmView,
|
TableDialog
|
},
|
mixins: [mixins],
|
data() {
|
const checkNum = (rule, value, callback) => {
|
let reg = /(^([-]?)[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^([-]?)(0){1}$)|(^([-]?)[0-9]\.[0-9]([0-9])?$)/;
|
if ("" === value && !reg.test(value)) {
|
callback(new Error("分钟需数字并且不能为空"));
|
} else if (0 > value || 120 < value) {
|
callback(new Error("数字范围1~120的正整数"));
|
} else {
|
callback();
|
}
|
};
|
return {
|
value: "tableOpen",
|
yValue: "",
|
minute: undefined,
|
count: undefined,
|
pickerOptions: {
|
/* value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],*/
|
},
|
timeArr: [],
|
deviceCategory: undefined,
|
// 遮罩层
|
loading: false,
|
// 选中数组
|
ids: [],
|
dateRange: [],
|
names: [],
|
// 非单个禁用
|
single: true,
|
// 非多个禁用
|
multiple: true,
|
// 总条数
|
total: 10,
|
// 指标信息表格数据
|
List: [],
|
energyindexList: [],
|
// 弹出层标题
|
title: null,
|
dialogType: null,
|
// 是否显示弹出层
|
open: false,
|
// 主键字典
|
indexIdOptions: [],
|
// 指标名称字典
|
nameOptions: [],
|
// 指标编码字典
|
codeOptions: [],
|
// 系统指标分类，1-能源类，2-产品类，3-能效类，4-经营类，5-其他字典
|
indexCategoryOptions: [],
|
// 备注字典
|
remarkOptions: [],
|
// 单位字典
|
unitIdOptions: [],
|
queryParams: {
|
minute: undefined,
|
nodeId: undefined,
|
//指标index
|
indexType: "COLLECT",
|
params: [
|
{
|
minute: undefined,
|
count: undefined
|
}
|
]
|
},
|
tableData: [],
|
lineData: [],
|
//选中code
|
codes: [],
|
// //选中指标名称
|
indexNames: [],
|
datas: [],
|
// 表单参数
|
form: {},
|
// 表单校验
|
rules: {
|
numRule: [{ type: "number", validator: checkNum, trigger: "change" }]
|
},
|
options: [
|
{
|
value: "tableOpen",
|
label: "参数打开"
|
},
|
{
|
value: "tableClose",
|
label: "参数收缩"
|
}
|
],
|
addTableSelect: [],
|
liveLineChartData: {
|
datas: [],
|
legendArr: [],
|
timeList: [],
|
legendNameArr: []
|
},
|
selectYaxis: [],
|
activeName: "second",
|
code: undefined,
|
rows: [],
|
//单位
|
unitOptions: [],
|
currentNode: undefined,
|
indexCategoryDefaultVal: undefined,
|
unitDefaultVal: undefined,
|
intervalTime: undefined,
|
timer: undefined,
|
vuename: "",
|
height: null
|
};
|
},
|
created() {
|
this.getConfigKey("dataMonitoring.realTimeTrend.pastMinute").then(
|
response => {
|
this.queryParams.minute = response.msg;
|
}
|
);
|
this.getConfigKey("dataMonitoring.realTimeTrend.piontCount").then(
|
response => {
|
this.count = response.msg;
|
}
|
);
|
this.getDicts("sys_unit").then(response => {
|
this.unitOptions = response.data;
|
});
|
},
|
mounted() {
|
clearInterval(this.timer);
|
clearInterval(timers);
|
timers = setInterval(this.setTimer, 50);
|
this.getConfigKey("dataMonitoring.realTimeTrend.intervalTime").then(
|
response => {
|
if (response.code === 200) {
|
this.intervalTime = response.msg;
|
this.timer = setInterval(this.getLineDataList, this.intervalTime);
|
}
|
}
|
);
|
},
|
beforeDestroy() {
|
// 页面销毁时 要停止计时器，否则选项卡切换计时器不停止，会越来越快，多个线程
|
clearInterval(this.timer);
|
clearInterval(timers);
|
},
|
methods: {
|
setTimer() {
|
let that = this;
|
this.$nextTick(() => {
|
that.$refs.dataTable && that.$refs.dataTable.doLayout();
|
});
|
},
|
setCharts() {
|
this.height = window.innerHeight - 300 + "px";
|
},
|
modelNodeChange(modelNode) {
|
this.queryParams.nodeId = modelNode;
|
this.getList();
|
this.disabledSetting =
|
modelNode === undefined || modelNode === "" || modelNode === null;
|
if (modelNode) {
|
this.currentNode = modelNode;
|
}
|
if (this.$refs.lincharVue != undefined && this.$refs.lincharVue != null) {
|
this.$refs.lincharVue.closeLineChar();
|
}
|
},
|
/** 查询指标信息列表 */
|
getList() {
|
this.$refs["queryForm"].validate(valid => {
|
if (valid) {
|
this.loading = true;
|
var search = this.queryParams;
|
search.params[0].minute = this.queryParams.minute;
|
search.params[0].count = this.count;
|
//表格数据
|
getSvgTrendSettingIndex(search).then(response => {
|
this.tableData = response.data;
|
this.total = response.total;
|
this.addTableSelect = [];
|
//表格下拉选择
|
for (let j = 0; j < 5 && j < this.tableData.length; j++) {
|
let optionItem = {
|
yValue: "y" + j,
|
yLable: "Y" + j
|
};
|
this.addTableSelect.push(optionItem);
|
}
|
this.loading = false;
|
});
|
}
|
});
|
},
|
|
/** 搜索按钮操作 */
|
handleQuery() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
getTime() {
|
//显示时间
|
//this.timeArr = [this.startTime,this.endTime];
|
},
|
// 多选框选中数据
|
handleSelectionChange(selection) {
|
this.drawChars(selection);
|
// if(selection.length > 1){ //单选时为1，需要选择n项改数值为n就可以
|
// this.$refs.dataTable.toggleRowSelection(selection[0],false);//超出指定选择个数后，把第一个选中的selection设为false
|
// selection.splice(0,1);//同时要把选中第一项移除
|
// }
|
},
|
drawChars(selection) {
|
this.codes = selection.map(item => item.code);
|
this.indexNames = selection.map(item => item.indexName);
|
this.selectYaxis = selection.map(item =>
|
item.yValue ? item.yValue : ""
|
);
|
if (this.codes.length > 0) {
|
this.cleanLineData();
|
this.vuename = "lincharVue";
|
this.getLineDataList();
|
} else {
|
this.cleanLineData();
|
if (
|
this.$refs.lincharVue != undefined &&
|
this.$refs.lincharVue != null
|
) {
|
this.$refs.lincharVue.closeLineChar();
|
}
|
}
|
},
|
getLineDataList() {
|
let that = this;
|
this.$nextTick(() => {
|
that.$refs.dataTable.doLayout();
|
});
|
if (this.codes.length > 0) {
|
this.cleanLineData();
|
//折线图数据
|
getTrendSettingIndexLineData(
|
this.codes,
|
this.queryParams.minute,
|
this.count
|
).then(response => {
|
//数据添加
|
this.liveLineChartData.datas = response.data;
|
this.$nextTick(() => {
|
that.$refs.dataTable.doLayout();
|
});
|
// x轴时间添加
|
for (let i = 0; i < this.liveLineChartData.datas[0].length; i++) {
|
this.liveLineChartData.timeList.push(
|
this.liveLineChartData.datas[0][i].showDataTime
|
);
|
}
|
//曲线名称添加
|
this.liveLineChartData.legendNameArr = this.indexNames;
|
this.liveLineChartData.legendArr = this.selectYaxis;
|
});
|
}
|
},
|
selectNumber(row, index) {
|
let selection = this.$refs.dataTable.selection;
|
this.drawChars(selection);
|
},
|
cleanLineData() {
|
this.liveLineChartData.legendArr = [];
|
this.liveLineChartData.timeList = [];
|
this.liveLineChartData.datas = [];
|
this.liveLineChartData.legendNameArr = [];
|
},
|
closeDialog() {
|
this.activeName = "";
|
},
|
openDialog(e, type) {
|
this.dialogType = type;
|
if (e) {
|
this.code = e.code;
|
this.open = true;
|
this.activeName = "second";
|
this.title = type === "line" ? "历史曲线查询" : "历史数据";
|
}
|
},
|
cancelDialog() {
|
this.open = false;
|
},
|
// 单位字典翻译
|
unitFormat(row, column) {
|
return this.selectDictLabel(this.unitOptions, row.indexUnit);
|
}
|
}
|
};
|
</script>
|
<style scoped lang="scss">
|
.tableStyle .el-table__header-wrapper .el-checkbox {
|
display: none;
|
}
|
|
.trendLineChart-right {
|
height: 100%;
|
overflow: hidden;
|
}
|
</style>
|
