quanyawei
2024-03-13 99435df90dc63bbf9a3729826821fbd47677fb10
src/views/contrast/index.vue
@@ -1,4 +1,4 @@
+<template>
<template>
  <div style="width: 100%; height: 100%; margin:0 auto">
    <div class="topSelect">
      <el-cascader
@@ -41,8 +41,7 @@
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
        />
      </el-select>
      <component
        :is="dataType"
@@ -51,13 +50,21 @@
        @sendPickerChild="showPickerChild"
      />
      <!--查询按钮-->
      <el-button @click="selectData" class="btn1">查询</el-button>
      <el-button
        class="btn1"
        @click="selectData"
      >
        查询
      </el-button>
    </div>
    <!-- <div class="topTitle">
      <div style="position:absolute">(单位:ug/m³)</div>
      <div style="text-align: center;width: 100%;">{{ newData }}·{{ newMac?newMac[0]:'' }}·{{ newMac?newMac[newMac.length - 1][0]:'' }}·{{ value |sensorFilter }}·趋势图</div>
    </div> -->
    <LineChart :chart-data="lineChartData"  style="height: 23rem;"/>
    <LineChart
      :chart-data="lineChartData"
      style="height: 40rem;"
    />
  </div>
</template>
@@ -109,7 +116,7 @@
  props: {
    // defaultData: Array
  },
  data() {
  data () {
    // 这里存放数据
    return {
      dataType: 'HourPicker',
@@ -155,7 +162,7 @@
  computed: {},
  // 监控data中的数据变化
  watch: {
    newMac(newVal, oldval) {
    newMac (newVal, oldval) {
      this.newMac1 = []
      // for (let i = 0; i < newVal.length; i++) {
      //   this.newMac1.push(newVal[i][1][1])
@@ -166,13 +173,13 @@
      //   this.getSensor()
      // }
    },
    value(n, o) {
    value (n, o) {
      this.value1 = []
      for (let i = 0; i < n.length; i++) {
        this.value1.push(n[i][0])
      }
    },
    radio1(nv, ov) {
    radio1 (nv, ov) {
      if (nv === '日报') {
        this.dataType = 'HourPicker'
        this.unit = 0
@@ -193,22 +200,22 @@
    },
  },
  // 生命周期 - 创建完成(可以访问当前 this 实例)
  created() {
  created () {
    this.getData()
  },
  // 生命周期 - 挂载完成(可以访问 DOM 元素)
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  mounted () { },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { },
  // 方法集合
  methods: {
    // 请求左侧设备数据
    getData() {
    getData () {
      this.$request({
        url: '/monitorPoint/queryMonitorPoints',
        method: 'get',
@@ -226,14 +233,16 @@
              label: this.defaultData[i].name,
            })
            this.options[i].children = []
            for (let j = 0; j < this.defaultData[i].devices.length; j++) {
              this.options[i].children.push({
                value: [
                  this.defaultData[i].devices[j].name,
                  this.defaultData[i].devices[j].mac,
                ],
                label: this.defaultData[i].devices[j].name,
              })
            if (this.defaultData[i].devices) {
              for (let j = 0; j < this.defaultData[i].devices.length; j++) {
                this.options[i].children.push({
                  value: [
                    this.defaultData[i].devices[j].name,
                    this.defaultData[i].devices[j].mac,
                  ],
                  label: this.defaultData[i].devices[j].name,
                })
              }
            }
          }
        })
@@ -242,7 +251,7 @@
        })
    },
    // 通过mac号获得因子
    getSensor() {
    getSensor () {
      // stringMacs.su
      // var newMac = this.newMac[this.newMac.length - 1][this.newMac[this.newMac.length - 1].length - 1]
      // this.newMac1 = this.newMac[this.newMac.length - 1][this.newMac[this.newMac.length - 1].length - 1]
@@ -269,12 +278,12 @@
        })
    },
    // 查询
    selectData() {
    selectData () {
      var newLineChartData = {
        series: [],
        xAxis: [],
        title: [],
        yAxis:[]
        yAxis: []
      }
      this.newXData = []
      this.$request({
@@ -300,12 +309,20 @@
            newLineChartData.xAxis.push(data[0].timeValueList[i].time)
          }
          for (var i = 0; i < data.length; i++) {
            newLineChartData.series.push({ data: [], name: '', type: 'line' ,yAxisIndex:data[i].code})
            newLineChartData.series.push({
              data: [],
              name: '',
              type: 'line',
              triggerLineEvent: true,
              emphasis: { focus: 'series' },
              lineStyle: { width: 4 }
            })
            // newLineChartData.yAxis.push({})
            newLineChartData.series[i].name = data[i].name
            newLineChartData.title.push(data[i].name);
            newLineChartData.title.push(data[i].name)
            for (var j = 0; j < data[i].timeValueList.length; j++) {
             newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
              // newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
              newLineChartData.series[i].data.push(data[i].timeValueList[j].value === 0 ? undefined : data[i].timeValueList[j].value)
            }
          }
          this.lineChartData = newLineChartData
@@ -386,7 +403,7 @@
        })
    },
    // 获得子组件时间选择器传递的数据
    showPickerChild(data) {
    showPickerChild (data) {
      // var newLineChartData = {
      //   series: [],
      //   xAxis: [],
@@ -472,12 +489,12 @@
      // })
    },
    // 获取最大值
    getMaxValue(arr) {
    getMaxValue (arr) {
      // return Math.max.apply(null, arr)
      return Math.max(...arr)
    },
    // 对比排序函数
    compare(property, desc) {
    compare (property, desc) {
      return (a, b) => {
        var value1 = a[property]
        var value2 = b[property]
@@ -489,7 +506,7 @@
      }
    },
    // 过滤图表因子名称
    filterSensorName() {
    filterSensorName () {
      this.chartSensorName = this.$options.filters.sensorFilter(
        this.chartSensorKey[0].sensorCode
      )
@@ -502,28 +519,34 @@
  display: flex;
  margin-bottom: 20px;
  padding: 20px 15px 0 15px;
  span:first-child {
    flex: 1;
  }
  div:last-child {
    width: 300px;
    line-height: 40px;
    padding-left: 6px;
  }
}
.topTitle {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 15px;
}
.btn1 {
  margin-left: 1%;
  height: 40px;
}
.select11 {
  width: 20% !important;
}
/deep/.el-date-editor .el-range-separator {
  width: 11%;
}