提交

guoshipeng

2023-07-06 63c0ecf98f3705b4c70e4bafee5f325966a5777b

 src/views/averageContrast/index.vue

@@ -1,14 +1,18 @@
<template>
  <div style="width:100%">
  <div style="width: 100%">
    <div class="topSelect">
      <el-cascader
        v-model="newMac"
        :options="options"
        clearable
        placeholder="选择设备"
        style="width: 354px;"
        style="width: 354px"
      />
      <el-select v-model="value" placeholder="选择因子" style="margin-left:20px">
      <el-select
        v-model="value"
        placeholder="选择因子"
        style="margin-left: 20px"
      >
        <el-option
          v-for="item in newSensor"
          :key="item.value"
@@ -20,15 +24,29 @@
        <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-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>
    </div>
    <div class="topTitle">
      <div style="position: absolute">{{ selectyz }}</div>
      <!-- <div style="text-align: center;width: 100%;">{{ newData }}·{{ newMac?newMac[0]:'' }}·{{ newMac?newMac[newMac.length - 1][0]:'' }}·{{ value |sensorFilter }}·趋势图</div> -->
    </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" />
    <LineChart :chart-data="lineChartData" style="height: 30rem" />
  </div>
</template>

@@ -37,35 +55,34 @@
// 例如：import《组件名称》from'《组件路径》';

// import LineChart from '@/components/Echarts/LineChartSpe'
import LineChart from '@/components/Echarts/LineChart'
import LineChart from '@/components/Echarts/LineChart2'
import DatePicker from '@/components/Form/DatePicker'
import MouthPicker from '@/components/Form/MouthPicker'
import HourPicker from '@/components/Form/HourPicker'
import HourPicker2 from '@/components/Form/HourPicker2'

import CustomPicker from '@/components/Form/CustomPicker'
import json from '@/assets/json/sensor.json'

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 引入的组件需要注入到对象中才能使用
  components: {
    LineChart,
    DatePicker,
@@ -75,10 +92,10 @@
    CustomPicker,
  },
  filters: {
    sensorFilter: function(value) {
    sensorFilter: function (value) {
      if (!value) return ''
      return json[value]
    }
    },
  },
  props: {
    // defaultData: Array
@@ -99,17 +116,24 @@
      radio1: '日报',
      unit: 0,
      type: 'select',
      selectyz: '(单位:ug/m³)',
      timevalue: [],
      newLineChartData: {
        series: [],
        xAxis: [],
        title: ''
        title: '',
      },
      newData: '',
      defaultData: [],
      newListData: [],
      chartSensorName: '',
      middleData: [],
      seriesName: ['平均值', '最小值', '最大值']
      seriesName: ['平均值', '最小值', '最大值'],
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > new Date()
        },
      },
    }
  },
  // 计算属性 类似于data概念
@@ -129,16 +153,53 @@
        this.dataType = 'MouthPicker2'
        this.unit = 3
      }
    }
    },
    value(one, two) {
      if (
        one === 'a34004' ||
        one === 'a34002' ||
        one === 'a21004' ||
        one === 'a21026' ||
        one === 'a05024' ||
        one === 'a21001'
      ) {
        this.selectyz = '(单位:ug/m³)'
      } else if (
        one === 'a21005' ||
        one === 'a99054' ||
        one === 'a31001' ||
        one === 'a24088'
      ) {
        this.selectyz = '(单位:mg/m³)'
      } else if (one === 'a01001') {
        this.selectyz = '(单位:℃)'
      } else if (one === 'a01002') {
        this.selectyz = '(单位:%)'
      } else if (one === 'a01007') {
        this.selectyz = '(单位:m/s)'
      } else if (one === 'a01008') {
        this.selectyz = '(单位:。)'
      } else if (one === 'a01006') {
        this.selectyz = '(单位:hpa)'
      } else if (one === 'a00e12') {
        this.selectyz = '(单位:lux)'
      } else if (one === 'a19002') {
        this.selectyz = '(单位:无)'
      } else if (one === 'a00e03' || one === 'a00e04') {
        this.selectyz = '(单位:pcs/0.1L)'
      } else if (one === 'a00e13') {
        this.selectyz = '(单位:db)'
      } else if (one === 'a21028') {
        this.selectyz = '(单位:ppm)'
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getData()
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {

  },
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
@@ -154,19 +215,28 @@
        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 })
                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,
                })
              }
            }
          }
@@ -181,25 +251,27 @@
        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] })
        }
      }).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] })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 查询
    selectData() {
      var newLineChartData = {
        series: [],
        xAxis: [],
        title: []
        title: [],
      }
      this.newXData = []
      this.$request({
@@ -208,37 +280,42 @@
        params: {
          mac: this.newMac1[0],
          sensor_code: this.value,
          date: this.newData
        }
      }).then((res) => {
        // console.log('获得时间对应因子数据')
        // console.log(res)
        const data = res.data
        const lockLength = 0
        // for (let i = 0; i < data.length; i++) {
        //   for (let j = 0; j < data[i].values.length; j++) {
        //     if (lockLength < data[i].values.length) {
        //       newLineChartData.series.push({ data: [], name: '', type: 'line' })
        //       newLineChartData.series[j].name = data[i].values[j].name
        //       newLineChartData.title.push(data[i].values[j].name)
        //     }
        //     lockLength++
        //     newLineChartData.series[j].data.push(data[i].values[j].sensorValue)
        //   }
        // }
        for (let i = 0; i < 3; i++) {
          newLineChartData.series.push({ data: [], name: '', type: 'line' })
          for (let j = 0; j < data.length; j++) {
            newLineChartData.series[i].data.push(data[j].values[i])
            newLineChartData.series[i].name = this.seriesName[i]
            newLineChartData.xAxis.push(data[j].time)
          }
          newLineChartData.title = this.seriesName
        }
        this.lineChartData = newLineChartData
      }).catch((err) => {
        console.log(err);
          startTime: this.timevalue[0],
          endTime: this.timevalue[1],
        },
      })
        .then((res) => {
          // console.log('获得时间对应因子数据')
          // console.log(res)
          const data = res.data
          const lockLength = 0
          // for (let i = 0; i < data.length; i++) {
          //   for (let j = 0; j < data[i].values.length; j++) {
          //     if (lockLength < data[i].values.length) {
          //       newLineChartData.series.push({ data: [], name: '', type: 'line' })
          //       newLineChartData.series[j].name = data[i].values[j].name
          //       newLineChartData.title.push(data[i].values[j].name)
          //     }
          //     lockLength++
          //     newLineChartData.series[j].data.push(data[i].values[j].sensorValue)
          //   }
          // }
          for (let i = 0; i < 3; i++) {
            newLineChartData.series.push({ data: [], name: '', type: 'line' })
            for (let j = 0; j < data.length; j++) {
              newLineChartData.series[i].data.push(data[j].values[i])
              newLineChartData.series[i].name = this.seriesName[i]
            }
            newLineChartData.title = this.seriesName
          }
          for (let y = 0; y < data.length; y++) {
            newLineChartData.xAxis.push(data[y].time)
          }
          this.lineChartData = newLineChartData
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 获得子组件时间选择器传递的数据
    showPickerChild(data) {
@@ -303,36 +380,37 @@
          return value2 - value1
        }
      }
     
    },
    // 过滤图表因子名称
    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;
}