1、尘负荷走航路段报告

yichenxi

2022-12-12 eb07bc16cb0b06f3b96a4f59d74f82b62195f096

 src/views/charts/index.vue

@@ -1,5 +1,5 @@
<template>
  <div style="width:100%">
  <div style="width: 100%; height: 100%">
    <div class="topSelect">
      <!-- <el-cascader v-model="newMac" :options="options" clearable change-on-select :props="{ checkStrictly: true }" placeholder="选择设备" /> -->
      <el-cascader
@@ -9,33 +9,55 @@
        collapse-tags
        clearable
        placeholder="选择设备"
        style="width: 354px;"
        style="width: 354px"
      />
      <!-- <div> -->
      <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"
          v-for="(item, index) in newSensor"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <!-- </div> -->
      <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-group>
      <component :is="dataType" style="padding-left:0;margin-left:20px;width:160px" @sendPickerChild="showPickerChild" />
      </el-radio-group> -->
      <el-select
        v-model="select1"
        placeholder="请选择"
        style="margin-left: 20px; width: 200px"
      >
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <component
        :is="dataType"
        style="padding-left: 0; margin-left: 20px; width: 160px"
        @sendPickerChild="showPickerChild"
        class="select11"
      />
      <!--查询按钮-->
      <el-button @click="selectData" class="btn1">查询</el-button>
    </div>
    <div class="topTitle">
      <div style="position:absolute">(单位:ug/m³)</div>
      <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>
    <LineChart :chart-data="lineChartData" />
    <LineChart :chart-data="lineChartData" style="height: 45rem" />
  </div>
</template>

@@ -43,45 +65,51 @@
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import《组件名称》from'《组件路径》';

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 HourPicker1 from '@/components/Form/HourPicker1'
import CustomPicker from '@/components/Form/CustomPicker'
import CustomPicker1 from '@/components/Form/CustomPicker1'
import TimePicker1 from '@/components/Form/TimePicker1'
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,
    MouthPicker,
    HourPicker,
    CustomPicker
    CustomPicker,
    CustomPicker1,
    TimePicker1,
    HourPicker1,
  },
  filters: {
    sensorFilter: function(value) {
    sensorFilter: function (value) {
      if (!value) return ''
      return json[value]
    }
    },
  },
  props: {
    // defaultData: Array
@@ -94,23 +122,37 @@
      props: { multiple: true },
      options: [],
      value: '',
      // value1: '',
      select1: '日报',
      selectyz: '(单位:ug/m³)',
      newMac: '',
      newMac1: [],
      // newMac2:'',
      newSensor: [], /* 因子数组 */
      newSensor: [] /* 因子数组 */,
      radio1: '日报',
      unit: 'hour',
      unit: 'day',
      type: 'select',
      newLineChartData: {
        series: [],
        xAxis: [],
        title: ''
        title: '',
      },
      newData: '',
      defaultData: [],
      medium: '',
      isSelect: false
      isSelect: false,
      options1: [
        {
          label: '小时报',
          value: '小时报',
        },
        {
          label: '日报',
          value: '日报',
        },
        {
          label: '月报',
          value: '月报',
        },
      ],
    }
  },
  // 计算属性 类似于data概念
@@ -126,23 +168,66 @@
      }
      // 设备更新后，重新获取因子数据
      this.getSensor()
      console.log(this.newMac1)
    },
    // 监听dataType的数据更新
    radio1(nv, ov) {
    select1(nv, ov) {
      if (nv === '日报') {
        this.dataType = 'HourPicker'
        this.unit = 'hour'
        this.unit = 'day'
      } else if (nv === '月报') {
        this.dataType = 'DatePicker'
        this.unit = 'day'
        this.unit = 'month'
      } else if (nv === '年报') {
        this.dataType = 'MouthPicker'
        this.unit = 'month'
      } else if (nv === '小时报') {
        this.dataType = 'HourPicker1'
        this.unit = 'hour'
      } else {
        this.dataType = 'CustomPicker'
        this.unit = 'hour'
      }
    }
    },
    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() {
@@ -166,7 +251,7 @@
      var newLineChartData = {
        series: [],
        xAxis: [],
        title: []
        title: [],
      }
      this.newXData = []
      this.$request({
@@ -177,31 +262,49 @@
          sensorCode: this.value,
          type: this.unit,
          // times: data instanceof Array ? data : [data]
          times: this.newData instanceof Array ? this.newData : [this.newData]
        }
      }).then((res) => {
        // console.log('获得时间对应因子数据')
        // console.log(res)
        const data = res.data
        let lockLength = 0
        for (let i = 0; i < data.length; i++) {
          for (let j = 0; j < data[i].deviceData.length; j++) {
            if (lockLength < data[i].deviceData.length) {
              newLineChartData.series.push({ data: [], name: '', type: 'line' })
          times: this.newData instanceof Array ? this.newData : [this.newData],
        },
      })
        .then((res) => {
          // console.log('获得时间对应因子数据')
          console.log(res)
          const data = res.data
          let lockLength = 0
          for (let i = 0; i < data.length; i++) {
            for (let j = 0; j < data[i].deviceData.length; j++) {
              // console.log(data[i].deviceData);
              if (res.data[0].deviceData.length == 1) {
                newLineChartData.series.push({
                  data: [],
                  name: '',
                  type: 'line',
                  label: {
                    show: true,
                    position: 'top',
                  },
                })
              } else {
                newLineChartData.series.push({
                  data: [],
                  name: '',
                  type: 'line',
                })
              }
              newLineChartData.series[j].name = data[i].deviceData[j].name
              newLineChartData.title.push(data[i].deviceData[j].name)
              newLineChartData.series[j].data.push(
                data[i].deviceData[j].sensorValue
              )
            }
            lockLength++
            newLineChartData.series[j].data.push(data[i].deviceData[j].sensorValue)
            newLineChartData.xAxis.push(data[i].time)
          }
          newLineChartData.xAxis.push(data[i].time)
        }
        // newLineChartData.title = this.value
        this.lineChartData = newLineChartData
        // console.log(newLineChartData, 'newLineChartData')
      }).catch((err) => {
        console.log(err)
      })
          // newLineChartData.title = this.value
          this.lineChartData = newLineChartData
          console.log(lineChartData, 'newLineChartData')
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 请求左侧设备数据
    getData() {
@@ -209,19 +312,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,
              })
            }
          }
        })
@@ -238,90 +349,59 @@
        url: '/deviceInfo/getMacSensors',
        method: 'post',
        data: {
          macs: this.newMac1
        }
      }).then((result) => {
        // console.log(result)
        // this.newSensor = []
        var sensor = result.data
        for (var i in sensor) {
          this.newSensor.push({ value: i, label: sensor[i] })
          // this.newSensor[i].value = sensor.i
          // this.newSensor[i].name = sensor[i]
        }
      }).catch((err) => {
        console.log(err)
          macs: this.newMac1,
        },
      })
        .then((result) => {
          // console.log(result)
          // this.newSensor = []
          var sensor = result.data
          for (var i in sensor) {
            this.newSensor.push({ value: i, label: sensor[i] })
            // this.newSensor[i].value = sensor.i
            // this.newSensor[i].name = sensor[i]
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 获得子组件时间选择器传递的数据
    showPickerChild(data) {
      // console.log(data)
      // var newLineChartData = {
      //   series: [],
      //   xAxis: [],
      //   title: []
      // }
      this.newData = data
      // this.newXData = []
      // this.$request({
      //   url: '/deviceInfo/getTrendChartData',
      //   method: 'post',
      //   data: {
      //     macs: this.newMac1,
      //     sensorCode: this.value,
      //     type: this.unit,
      //     // times: data instanceof Array ? data : [data]
      //     times: this.newData instanceof Array ? this.newData : [this.newData]
      //   }
      // }).then((res) => {
      //   console.log('获得时间对应因子数据')
      //   console.log(res)
      //   // if(res.)
      //   const data = res.data
      //   let lockLength = 0
      //   for (let i = 0; i < data.length; i++) {
      //     for (let j = 0; j < data[i].deviceData.length; j++) {
      //       if (lockLength < data[i].deviceData.length) {
      //         newLineChartData.series.push({ data: [], name: '', type: 'line' })
      //         newLineChartData.series[j].name = data[i].deviceData[j].name
      //         newLineChartData.title.push(data[i].deviceData[j].name)
      //       }
      //       lockLength++
      //       newLineChartData.series[j].data.push(data[i].deviceData[j].sensorValue)
      //     }
      //     newLineChartData.xAxis.push(data[i].time)
      //   }
      //   // newLineChartData.title = this.value
      //   this.lineChartData = newLineChartData
      // }).catch((err) => {
      //   console.log(err)
      // })
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
    },
  }, // 如果页面有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>