fix:添加已作废

quanyawei

2023-11-16 c68b0d8b0b7b21e0d5eb7ea54f7642495d8088fc

 src/views/contrast/index.vue

@@ -1,22 +1,9 @@
<template>
  <div style="width:100%">
  <div style="width: 100%; height: 100%; margin:0 auto">
    <div class="topSelect">
      <el-cascader
        v-model="newMac"
        :options="options"
        clearable
        placeholder="选择设备"
        style="width: 354px;"
      />
      <el-cascader
        v-model="value"
        :options="newSensor"
        :props="props"
        collapse-tags
        clearable
        placeholder="选择因子"
        style="margin-left:20px"
      />
      <el-cascader v-model="newMac" :options="options" clearable placeholder="选择设备" style="width: 354px" />
      <el-cascader v-model="value" :options="newSensor" :props="props" collapse-tags clearable placeholder="选择因子"
        style="margin-left: 20px" />
      <!-- <el-select v-model="value" placeholder="选择因子">
        <el-option
          v-for="item in newSensor"
@@ -25,13 +12,18 @@
          :value="item.value"
        />
      </el-select> -->
      <el-radio-group v-model="radio1" style="margin-left:20px">
      <!--  <el-radio-group v-model="radio1" style="margin-left:20px">
        <el-radio-button label="日报" />
        <el-radio-button label="月报" />
        <!-- <el-radio-button label="年报" />
        <el-radio-button label="月报" /> -->
      <!-- <el-radio-button label="年报" />
        <el-radio-button label="自定义" /> -->
      </el-radio-group>
      <component :is="dataType" style="padding-left:0;margin-left:20px;width:160px" @sendPickerChild="showPickerChild" />
      <!-- </el-radio-group>  -->
      <el-select v-model="radio1" placeholder="请选择" style="margin-left: 20px">
        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <component :is="dataType" class="select11" style="padding-left: 0; margin-left: 20px; width: 160px"
        @sendPickerChild="showPickerChild" />
      <!--查询按钮-->
      <el-button @click="selectData" class="btn1">查询</el-button>
    </div>
@@ -39,7 +31,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" />
    <LineChart :chart-data="lineChartData" style="height: 40rem;" />
  </div>
</template>

@@ -53,39 +45,40 @@
import HourPicker from '@/components/Form/HourPicker'
import CustomPicker from '@/components/Form/CustomPicker'
import json from '@/assets/json/sensor.json'

import HourPicker1 from '@/components/Form/HourPicker1'
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
    actualData: [120, 82, 91, 154, 162, 140, 145],
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
    actualData: [180, 160, 151, 106, 145, 150, 130],
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
    actualData: [120, 90, 100, 138, 142, 130, 130],
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
}
export default {
// import 引入的组件需要注入到对象中才能使用
  // import 引入的组件需要注入到对象中才能使用props
  components: {
    LineChart,
    DatePicker,
    MouthPicker,
    HourPicker,
    CustomPicker
    CustomPicker,
    HourPicker1,
  },
  filters: {
    sensorFilter: function(value) {
    sensorFilter: function (value) {
      if (!value) return ''
      return json[value]
    }
    },
  },
  props: {
    // defaultData: Array
@@ -104,18 +97,32 @@
      // newMac2:'',
      newSensor: [],
      radio1: '日报',
      unit: 1,
      unit: 0,
      type: 'select',
      newLineChartData: {
        series: [],
        xAxis: [],
        title: ''
        title: '',
      },
      newData: '',
      defaultData: [],
      newListData: [],
      chartSensorName: '',
      middleData: []
      middleData: [],
      options1: [
        {
          label: '小时报',
          value: '小时报',
        },
        {
          label: '日报',
          value: '日报',
        },
        {
          label: '月报',
          value: '月报',
        },
      ],
    }
  },
  // 计算属性 类似于data概念
@@ -142,10 +149,13 @@
    radio1(nv, ov) {
      if (nv === '日报') {
        this.dataType = 'HourPicker'
        this.unit = 1
        this.unit = 0
      } else if (nv === '月报') {
        this.dataType = 'DatePicker'
        this.unit = 3
      } else if (nv === '小时报') {
        this.dataType = 'HourPicker1'
        this.unit = 0
      }
      // else if (nv === '年报') {
      //   this.dataType = 'MouthPicker'
@@ -154,23 +164,21 @@
      //   this.dataType = 'CustomPicker'
      //   this.unit = 'hour'
      // }
    }
    },
  },
  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getData()
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  mounted() { },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { },
  // 方法集合
  methods: {
    // 请求左侧设备数据
@@ -179,20 +187,27 @@
        url: '/monitorPoint/queryMonitorPoints',
        method: 'get',
        params: {
          organizationId: this.$store.state.orgId
        }
          organizationId: this.$store.state.orgId,
        },
      })
        .then((res) => {
          // console.log('这是index页面左侧设备数据')
          // console.log(res)
          this.defaultData = res.data.monitorPoints
          for (let i = 0; i < this.defaultData.length; i++) {
            this.options.push({ value: this.defaultData[i].name, label: this.defaultData[i].name })
            this.options.push({
              value: this.defaultData[i].name,
              label: this.defaultData[i].name,
            })
            this.options[i].children = []
            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 })
              }
            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,
              })
            }
          }
        })
@@ -209,105 +224,143 @@
        url: '/deviceInfo/getMacSensors',
        method: 'post',
        data: {
          macs: this.newMac1
        }
      }).then((res) => {
        // console.log(res)
        this.newSensor = []
        var sensor = res.data
        for (var i in sensor) {
          this.newSensor.push({ value: i, label: sensor[i] })
          // this.newSensor.push({ value: '123', label: '123' })
          // this.newSensor[i].value = sensor.i
          // this.newSensor[i].name = sensor[i]
        }
      }).catch((err) => {
        console.log(err)
          macs: this.newMac1,
        },
      })
        .then((res) => {
          // console.log(res)
          this.newSensor = []
          var sensor = res.data
          for (var i in sensor) {
            this.newSensor.push({ value: i, label: sensor[i] })
            // this.newSensor.push({ value: '123', label: '123' })
            // this.newSensor[i].value = sensor.i
            // this.newSensor[i].name = sensor[i]
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 查询
    selectData() {
      var newLineChartData = {
        series: [],
        xAxis: [],
        title: []
        title: [],
        yAxis: []
      }
      this.newXData = []
      this.$request({
        url: '/dataDisplay/sensorComparisonDisplay',
        // dataDisplay/sensorComparisonDisplayV2
        url: '/dataDisplay/sensorComparisonDisplayV2',
        method: 'post',
        data: {
          mac: this.newMac1[0],
          sensors: this.value1,
          sensorCodes: this.value1,
          reportType: this.unit,
          time: this.newData
        }
      }).then((res) => {
        // console.log('获得时间对应因子数据')
        // console.log(res)
        this.middleData = JSON.parse(JSON.stringify(res.data))
        const data = res.data
        // 无量纲算法
        // 遍历因子数组
        for (let i = 0; i < data.length; i++) {
          // 使用因子名称过滤替换方法
          data[i].name = this.$options.filters.sensorFilter(data[i].sensorCode)
          // data[i].name = data[i].sensorCode
          var tempArray = []
          for (let j = 0; j < data[i].timeValueList.length; j++) {
            tempArray.push(data[i].timeValueList[j].value)
          }
          data[i].MaxValue = this.getMaxValue(tempArray)
          data[i].sort = i
        }
        // 大数组MaxValue降序方法
        data.sort(this.compare('MaxValue', false))
        // 用1除以选择因子的数量
        var step = Math.floor((1 / data.length) * 100) / 100
        data[0].Factor = 1
        // 以降序排的数组，第一个为基准值，从第二个开始计算
        for (let i = 1; i < data.length; i++) {
          // 拿到最大值
          var supposemMaxValue = data[0].MaxValue - i * step * data[0].MaxValue
          if (data[i].MaxValue < supposemMaxValue) {
            data[i].Factor = supposemMaxValue / data[i].MaxValue
          }
        }
        // 大数组sort升序方法
        data.sort(this.compare('sort', true))
        // 给折线图数据添加遍历
        // for (let i = 0; i < data.length; i++) {
        //   newLineChartData.series.push({ data: [], name: '', type: 'line' })
        //   newLineChartData.series[i].name = data[i].name
        //   newLineChartData.title.push(data[i].name)
        //   for (let j = 0; j < data[i].timeValueList.length; j++) {
        //     data[i].timeValueList[j].value = data[i].timeValueList[j].value * data[i].Factor
        //     newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
        //   }
        // }
        for (let i = 0; i < data.length; i++) {
          newLineChartData.series.push({ data: [], name: '', type: 'line' })
          newLineChartData.series[i].name = data[i].name
          newLineChartData.title.push(data[i].name)
          for (let j = 0; j < data[i].timeValueList.length; j++) {
            data[i].timeValueList[j].value = data[i].timeValueList[j].value * data[i].Factor
            newLineChartData.series[i].data.push({ value: 0, data0: 0 })
            newLineChartData.series[i].data[j].value = data[i].timeValueList[j].value
          }
        }
        for (let i = 0; i < data[0].timeValueList.length; i++) {
          newLineChartData.xAxis.push(data[0].timeValueList[i].time)
        }
        // 给图表tooltip赋值原始数据
        for (let i = 0; i < this.middleData.length; i++) {
          for (let j = 0; j < this.middleData[i].timeValueList.length; j++) {
            newLineChartData.series[i].data[j].data0 = this.middleData[i].timeValueList[j].value
          }
        }
        this.lineChartData = newLineChartData
      }).catch((err) => {
        console.log(err)
          times: this.newData,
        },
      })
        .then((res) => {
          // console.log('获得时间对应因子数据')
          const data = res.data
          for (let i = 0; i < data.length; i++) {
            data[i].name = this.$options.filters.sensorFilter(
              data[i].sensorCode
            )
          }
          for (let i = 0; i < data[0].timeValueList.length; i++) {
            newLineChartData.xAxis.push(data[0].timeValueList[i].time)
          }
          for (var i = 0; i < data.length; i++) {
            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);
            for (var j = 0; j < data[i].timeValueList.length; j++) {
              newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
            }
          }
          this.lineChartData = newLineChartData

          // this.middleData = JSON.parse(JSON.stringify(res.data))
          // const data = res.data
          // // 无量纲算法
          // // 遍历因子数组
          // for (let i = 0; i < data.length; i++) {
          //   // 使用因子名称过滤替换方法
          //   data[i].name = this.$options.filters.sensorFilter(
          //     data[i].sensorCode
          //   )
          //   // data[i].name = data[i].sensorCode
          //   var tempArray = []
          //   for (let j = 0; j < data[i].timeValueList.length; j++) {
          //     tempArray.push(data[i].timeValueList[j].value)
          //   }
          //   data[i].MaxValue = this.getMaxValue(tempArray)
          //   data[i].sort = i
          // }
          // // 大数组MaxValue降序方法
          // data.sort(this.compare('MaxValue', false))
          // // 用1除以选择因子的数量
          // var step = Math.floor((1 / data.length) * 100) / 100
          // data[0].Factor = 1
          // // 以降序排的数组，第一个为基准值，从第二个开始计算
          // for (let i = 1; i < data.length; i++) {
          //   // 拿到最大值
          //   var supposemMaxValue =
          //     data[0].MaxValue - i * step * data[0].MaxValue
          //   if (data[i].MaxValue < supposemMaxValue) {
          //     data[i].Factor = supposemMaxValue / data[i].MaxValue
          //   }
          // }
          // // 大数组sort升序方法
          // data.sort(this.compare('sort', true))
          // // 给折线图数据添加遍历

          // // for (let i = 0; i < data.length; i++) {
          // //   newLineChartData.series.push({ data: [], name: '', type: 'line' })
          // //   newLineChartData.series[i].name = data[i].name
          // //   newLineChartData.title.push(data[i].name)
          // //   for (let j = 0; j < data[i].timeValueList.length; j++) {
          // //     data[i].timeValueList[j].value = data[i].timeValueList[j].value * data[i].Factor
          // //     newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
          // //   }
          // // }
          // for (let i = 0; i < data.length; i++) {
          //   newLineChartData.series.push({ data: [], name: '', type: 'line' })
          //   newLineChartData.series[i].name = data[i].name
          //   newLineChartData.title.push(data[i].name)
          //   for (let j = 0; j < data[i].timeValueList.length; j++) {
          //     // console.log(data);
          //     data[i].timeValueList[j].value =
          //       data[i].timeValueList[j].value * data[i].Factor
          //     newLineChartData.series[i].data.push({ value: 0, data0: 0 })
          //     newLineChartData.series[i].data[j].value =
          //       data[i].timeValueList[j].value
          //   }
          // }
          // for (let i = 0; i < data[0].timeValueList.length; i++) {
          //   newLineChartData.xAxis.push(data[0].timeValueList[i].time)
          // }
          // // 给图表tooltip赋值原始数据
          // for (let i = 0; i < this.middleData.length; i++) {
          //   console.log(i);
          //   for (let j = 0; j < this.middleData[i].timeValueList.length; j++) {
          //     newLineChartData.series[i].data[j].data0 =
          //       this.middleData[i].timeValueList[j].value
          //   }
          // }
          // this.lineChartData = newLineChartData
          // console.log(newLineChartData.series[0].name);
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 获得子组件时间选择器传递的数据
    showPickerChild(data) {
@@ -414,33 +467,47 @@
    },
    // 过滤图表因子名称
    filterSensorName() {
      this.chartSensorName = this.$options.filters.sensorFilter(this.chartSensorKey[0].sensorCode)
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
      this.chartSensorName = this.$options.filters.sensorFilter(
        this.chartSensorKey[0].sensorCode
      )
    },
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="scss">
.topSelect{
    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;
    }
.topSelect {
  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;

.topTitle {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 15px;
}
.btn1{

.btn1 {
  margin-left: 1%;
  height: 40px;
}

.select11 {
  width: 20% !important;
}

/deep/.el-date-editor .el-range-separator {
  width: 11%;
}
</style>