整体样式修改

ali

2024-09-03 0ae83a895e80a4b9777a27f613d721a7e5e2ac18

 energy_management_ui/src/views/basicSetup/equipmentfile/trendLineChart.vue

@@ -1,29 +1,53 @@
<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">
          :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"
      <el-table
        :data="tableData"
        ref="dataTable"
        border
        style="margin-top: 20px"
                :height="height"
                @selection-change="handleSelectionChange">
        @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">
@@ -31,7 +55,6 @@
                v-model="scope.row.yValue"
                @change="selectNumber(scope.row,scope.$index)"
            >

              <el-option
                  v-for="(item,index) in addTableSelect"
                  :key="item.yValue"
@@ -41,30 +64,58 @@
            </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="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'"/>
    <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">
@@ -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 => {
    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)
          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
                yValue: "y" + j,
                yLable: "Y" + j
              };
              this.addTableSelect.push(optionItem);
              }
              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);//超出指定选择个数后，把第一个选中的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 : '')
      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 {