quanyawei
2024-11-15 f752f50a484f63fc3786ab1c7ad563f3b17cce77
src/views/averageContrast/index.vue
@@ -1,39 +1,16 @@
<template>
  <div style="width: 100%">
    <div class="topSelect">
      <el-cascader
        v-model="newMac"
        :options="options"
        clearable
        placeholder="选择设备"
        style="width: 354px"
      />
      <el-select
        v-model="value"
        placeholder="选择因子"
        style="margin-left: 20px"
      >
        <el-option
          v-for="item in newSensor"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      <el-cascader v-model="newMac" :options="options" clearable placeholder="选择设备" style="width: 354px" />
      <el-select v-model="value" placeholder="选择因子" style="margin-left: 20px">
        <el-option v-for="item in newSensor" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <!-- <el-radio-group v-model="radio1" style="margin-left:20px">
        <el-radio-button label="日报" />
        <el-radio-button label="月报" />
      </el-radio-group> -->
      <el-date-picker
        v-model="timevalue"
        type="datetimerange"
        range-separator="至"
        value-format="yyyy-MM-dd HH"
        start-placeholder="开始日期"
        :picker-options="pickerOptions"
        end-placeholder="结束日期"
        style="margin-left: 1rem"
      >
      <el-date-picker v-model="timevalue" type="datetimerange" range-separator="至" value-format="yyyy-MM-dd HH"
        start-placeholder="开始日期" :picker-options="pickerOptions" end-placeholder="结束日期" style="margin-left: 1rem">
      </el-date-picker>
      <!--查询按钮-->
      <el-button @click="selectData" class="btn1">查询</el-button>
@@ -46,7 +23,7 @@
      <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: 30rem" />
    <LineChart :chart-data="lineChartData" :isMouse="true" style="height: 30rem" />
  </div>
</template>
@@ -199,14 +176,14 @@
    this.getData()
  },
  // 生命周期 - 挂载完成(可以访问 DOM 元素)
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  mounted() { },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { },
  // 方法集合
  methods: {
    // 请求左侧设备数据
@@ -301,7 +278,10 @@
          //   }
          // }
          for (let i = 0; i < 3; i++) {
            newLineChartData.series.push({ data: [], name: '', type: 'line' })
            newLineChartData.series.push({
              data: [], name: '', type: 'line', triggerLineEvent: true,
              emphasis: { focus: 'series' }
            })
            for (let j = 0; j < data.length; j++) {
              newLineChartData.series[i].data.push(data[j].values[i])
              newLineChartData.series[i].name = this.seriesName[i]
@@ -395,21 +375,25 @@
  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;