From 0ae83a895e80a4b9777a27f613d721a7e5e2ac18 Mon Sep 17 00:00:00 2001
From: ali <ali9696@163.com>
Date: 星期二, 03 九月 2024 10:18:27 +0800
Subject: [PATCH] 整体样式修改
---
energy_management_ui/src/views/basicSetup/equipmentfile/trendLineChart.vue | 371 +++++++++++++++++++++++++++++++---------------------
1 files changed, 221 insertions(+), 150 deletions(-)
diff --git a/energy_management_ui/src/views/basicSetup/equipmentfile/trendLineChart.vue b/energy_management_ui/src/views/basicSetup/equipmentfile/trendLineChart.vue
index 794c3c4..962cab4 100644
--- a/energy_management_ui/src/views/basicSetup/equipmentfile/trendLineChart.vue
+++ b/energy_management_ui/src/views/basicSetup/equipmentfile/trendLineChart.vue
@@ -1,71 +1,122 @@
<template>
<div class="trendLineChart-right">
- <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" class="query-form"
- style="margin-bottom: 20px">
+ <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">
+ 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-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-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">
+ <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)"
+ 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"
+ 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 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="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
+ 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
+ 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>
+ <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="background:#fff;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-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>
@@ -78,34 +129,35 @@
import {
getTrendSettingIndexLineData,
getSvgTrendSettingIndex
-} from '@/api/dataMonitoring/realTimeTrend/realTimeTrend'
-import historyAlarmView from '../../energyAlarm/realTimeAlarm/historyAlarmView'
-import mixins from '@/layout/mixin/getHeight'
-import TableDialog from './tableDialog'
+} from "@/api/dataMonitoring/realTimeTrend/realTimeTrend";
+import historyAlarmView from "../../energyAlarm/realTimeAlarm/historyAlarmView";
+import mixins from "@/layout/mixin/getHeight";
+import TableDialog from "./tableDialog";
-let timers
+let timers;
export default {
- name: 'energyIndex',
+ name: "energyIndex",
components: {
- lincharVue: () => import('../../dataMonitoring/realTimeTrend/LineChart.vue'),
+ 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('鍒嗛挓闇�鏁板瓧骞朵笖涓嶈兘涓虹┖'))
+ 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鐨勬鏁存暟'))
+ callback(new Error("鏁板瓧鑼冨洿1~120鐨勬鏁存暟"));
} else {
- callback()
+ callback();
}
- }
+ };
return {
- value: 'tableOpen',
- yValue: '',
+ value: "tableOpen",
+ yValue: "",
minute: undefined,
count: undefined,
pickerOptions: {
@@ -149,11 +201,13 @@
minute: undefined,
nodeId: undefined,
//鎸囨爣index
- indexType: 'COLLECT',
- params: [{
- 'minute': undefined,
- 'count': undefined
- }]
+ indexType: "COLLECT",
+ params: [
+ {
+ minute: undefined,
+ count: undefined
+ }
+ ]
},
tableData: [],
lineData: [],
@@ -166,17 +220,18 @@
form: {},
// 琛ㄥ崟鏍￠獙
rules: {
- numRule: [
- { type: 'number', validator: checkNum, trigger: 'change' }
- ]
+ numRule: [{ type: "number", validator: checkNum, trigger: "change" }]
},
- options: [{
- value: 'tableOpen',
- label: '鍙傛暟鎵撳紑'
- }, {
- value: 'tableClose',
- label: '鍙傛暟鏀剁缉'
- }],
+ options: [
+ {
+ value: "tableOpen",
+ label: "鍙傛暟鎵撳紑"
+ },
+ {
+ value: "tableClose",
+ label: "鍙傛暟鏀剁缉"
+ }
+ ],
addTableSelect: [],
liveLineChartData: {
datas: [],
@@ -185,7 +240,7 @@
legendNameArr: []
},
selectYaxis: [],
- activeName: 'second',
+ activeName: "second",
code: undefined,
rows: [],
//鍗曚綅
@@ -195,89 +250,96 @@
unitDefaultVal: undefined,
intervalTime: undefined,
timer: undefined,
- vuename: '',
+ 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
- })
+ 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)
+ 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)
+ clearInterval(this.timer);
+ clearInterval(timers);
},
methods: {
setTimer() {
- let that = this
+ let that = this;
this.$nextTick(() => {
- that.$refs.dataTable && that.$refs.dataTable.doLayout()
- })
+ that.$refs.dataTable && that.$refs.dataTable.doLayout();
+ });
},
setCharts() {
- this.height = window.innerHeight - 300 + 'px'
+ this.height = window.innerHeight - 300 + "px";
},
modelNodeChange(modelNode) {
- this.queryParams.nodeId = modelNode
- this.getList()
- this.disabledSetting = modelNode === undefined || modelNode === '' || modelNode === null
+ this.queryParams.nodeId = modelNode;
+ this.getList();
+ this.disabledSetting =
+ modelNode === undefined || modelNode === "" || modelNode === null;
if (modelNode) {
- this.currentNode = modelNode
+ this.currentNode = modelNode;
}
if (this.$refs.lincharVue != undefined && this.$refs.lincharVue != null) {
- this.$refs.lincharVue.closeLineChar()
+ this.$refs.lincharVue.closeLineChar();
}
},
/** 鏌ヨ鎸囨爣淇℃伅鍒楄〃 */
getList() {
- this.$refs['queryForm'].validate(valid => {
+ 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
+ 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 = []
+ 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)
+ yValue: "y" + j,
+ yLable: "Y" + j
+ };
+ this.addTableSelect.push(optionItem);
}
- this.loading = false
- })
+ this.loading = false;
+ });
}
- })
+ });
},
/** 鎼滅储鎸夐挳鎿嶄綔 */
handleQuery() {
- this.queryParams.pageNum = 1
- this.getList()
+ this.queryParams.pageNum = 1;
+ this.getList();
},
getTime() {
//鏄剧ず鏃堕棿
@@ -285,88 +347,97 @@
},
// 澶氶�夋閫変腑鏁版嵁
handleSelectionChange(selection) {
- this.drawChars(selection)
+ this.drawChars(selection);
// if(selection.length > 1){ //鍗曢�夋椂涓�1锛岄渶瑕侀�夋嫨n椤规敼鏁板�间负n灏卞彲浠�
// this.$refs.dataTable.toggleRowSelection(selection[0],false);//瓒呭嚭鎸囧畾閫夋嫨涓暟鍚庯紝鎶婄涓�涓�変腑鐨剆election璁句负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 : '')
+ 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()
+ this.cleanLineData();
+ this.vuename = "lincharVue";
+ this.getLineDataList();
} else {
- this.cleanLineData()
- if (this.$refs.lincharVue != undefined && this.$refs.lincharVue != null) {
- this.$refs.lincharVue.closeLineChar()
+ this.cleanLineData();
+ if (
+ this.$refs.lincharVue != undefined &&
+ this.$refs.lincharVue != null
+ ) {
+ this.$refs.lincharVue.closeLineChar();
}
}
},
getLineDataList() {
- let that = this
+ let that = this;
this.$nextTick(() => {
- that.$refs.dataTable.doLayout()
- })
+ that.$refs.dataTable.doLayout();
+ });
if (this.codes.length > 0) {
- this.cleanLineData()
+ this.cleanLineData();
//鎶樼嚎鍥炬暟鎹�
- getTrendSettingIndexLineData(this.codes, this.queryParams.minute, this.count).then(response => {
+ getTrendSettingIndexLineData(
+ this.codes,
+ this.queryParams.minute,
+ this.count
+ ).then(response => {
//鏁版嵁娣诲姞
- this.liveLineChartData.datas = response.data
+ this.liveLineChartData.datas = response.data;
this.$nextTick(() => {
- that.$refs.dataTable.doLayout()
- })
+ 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.timeList.push(
+ this.liveLineChartData.datas[0][i].showDataTime
+ );
}
//鏇茬嚎鍚嶇О娣诲姞
- this.liveLineChartData.legendNameArr = this.indexNames
- this.liveLineChartData.legendArr = this.selectYaxis
- })
+ this.liveLineChartData.legendNameArr = this.indexNames;
+ this.liveLineChartData.legendArr = this.selectYaxis;
+ });
}
},
selectNumber(row, index) {
- let selection = this.$refs.dataTable.selection
- this.drawChars(selection)
+ let selection = this.$refs.dataTable.selection;
+ this.drawChars(selection);
},
cleanLineData() {
- this.liveLineChartData.legendArr = []
- this.liveLineChartData.timeList = []
- this.liveLineChartData.datas = []
- this.liveLineChartData.legendNameArr = []
+ this.liveLineChartData.legendArr = [];
+ this.liveLineChartData.timeList = [];
+ this.liveLineChartData.datas = [];
+ this.liveLineChartData.legendNameArr = [];
},
closeDialog() {
- this.activeName = ''
+ this.activeName = "";
},
openDialog(e, type) {
- this.dialogType = type
+ this.dialogType = type;
if (e) {
- this.code = e.code
- this.open = true
- this.activeName = 'second'
- this.title = type === 'line' ? '鍘嗗彶鏇茬嚎鏌ヨ' : '鍘嗗彶鏁版嵁'
+ this.code = e.code;
+ this.open = true;
+ this.activeName = "second";
+ this.title = type === "line" ? "鍘嗗彶鏇茬嚎鏌ヨ" : "鍘嗗彶鏁版嵁";
}
},
cancelDialog() {
- this.open = false
+ this.open = false;
},
// 鍗曚綅瀛楀吀缈昏瘧
unitFormat(row, column) {
- return this.selectDictLabel(this.unitOptions, row.indexUnit)
+ return this.selectDictLabel(this.unitOptions, row.indexUnit);
}
-
}
-}
-
+};
</script>
<style scoped lang="scss">
.tableStyle .el-table__header-wrapper .el-checkbox {
- display: none
+ display: none;
}
.trendLineChart-right {
--
Gitblit v1.9.3