moral_fronted.git

<template>
  <div id="chartTableContent" 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
        v-model="newMac"
        :options="options"
        :props="props"
        collapse-tags
        clearable
        placeholder="选择设备"
        style="width: 354px"
      />
      <!-- <div> -->
      <el-select v-model="value" placeholder="选择因子" style="margin-left: 20px">
        <el-option 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-button label="小时报" />
        <el-radio-button label="日报" />
        <el-radio-button label="月报" />
        <el-radio-button label="自定义" />
      </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-select>
      <component
        :is="dataType"
        style="padding-left: 0; margin-left: 20px; width: 160px"
        class="select11"
        @sendPickerChild="showPickerChild"
      />
      <!--查询按钮-->
      <el-button class="btn1" @click="selectData">查询</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>
    <LineChart :chart-data="lineChartData" style="height: 40rem" />
    <div style="padding: 0px 10px;margin-bottom: 50px;">
      <el-table v-if="searchData.length>0" :data="tableData" border size="mini" style="width: 100%" max-height="250" tooltip-effect="dark">
        <el-table-column prop="rankingTitle" label="日期" width="100" align="center" fixed="left">
          <el-table-column
            prop="rankingTitle"
            class-name="rankingTitle"
            label="高值"
            align="center"
            width="100"
            fixed="left"
          />
        </el-table-column>
        <template v-for="(th, thIndex) in thArr">
          <el-table-column :key="thIndex" align="center" :label="th.label" :prop="th.prop" :show-overflow-tooltip="true" min-width="120">
            <template slot-scope="scope">
              <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" v-html="scope.row[th.prop]" />
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
 
  </div>
</template>
 
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import《组件名称》from'《组件路径》';
 
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'
import _ from 'lodash'
 
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    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]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    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]
  }
}
export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {
    LineChart,
    DatePicker,
    MouthPicker,
    HourPicker,
    CustomPicker,
    CustomPicker1,
    TimePicker1,
    HourPicker1
  },
  filters: {
    sensorFilter: function(value) {
      if (!value) return ''
      return json[value]
    }
  },
  props: {
    // defaultData: Array
  },
  data() {
    // 这里存放数据
    return {
      dataType: 'HourPicker',
      lineChartData: lineChartData.purchases,
      props: { multiple: true },
      options: [],
      value: '',
      select1: '日报',
      selectyz: '(单位:ug/m³)',
      newMac: '',
      newMac1: [],
      newSensor: [] /* 因子数组 */,
      radio1: '日报',
      unit: 'day',
      type: 'select',
      newLineChartData: {
        series: [],
        xAxis: [],
        title: ''
      },
      newData: '',
      defaultData: [],
      medium: '',
      isSelect: false,
      options1: [
        {
          label: '五分钟报',
          value: '五分钟报'
        },
        {
          label: '小时报',
          value: '小时报'
        },
        {
          label: '日报',
          value: '日报'
        },
        {
          label: '月报',
          value: '月报'
        }
      ],
      searchData: []
    }
  },
  // 计算属性 类似于data概念
  computed: {
    thArr() {
      const data = []
      if (this.searchData.length > 0) {
        this.searchData.forEach((item, index) => {
          data.push({
            label: item.time,
            name: item.time,
            prop: 'souceData' + index
          })
        })
        console.log(data)
      }
      return data
    },
    tableData() {
      const data = []
      const fobj = {}
      const sobj = {}
      if (this.searchData.length > 0) {
        this.searchData.forEach((item, index) => {
          fobj['souceData' + index] = this.sortFind(item.deviceData)[0].name
          sobj['souceData' + index] = this.sortFind(item.deviceData)[1]?.name ? this.sortFind(item.deviceData)[1]?.name : '--'
        })
      }
      data.push({ ...fobj, rankingTitle: '第一高值' }, { ...sobj, rankingTitle: '第二高值' })
      console.log('firstData', fobj)
      console.log('souceData', sobj)
      console.log('datadatadata', data)
      return data
    }
  },
  // 监控data中的数据变化
  watch: {
    // 监听设备的数据更新
    newMac(newVal, oldval) {
      this.newMac1 = []
      for (let i = 0; i < newVal.length; i++) {
        // console.log(newVal[i], 111)
        this.newMac1.push(newVal[i][1][1])
      }
      // 设备更新后，重新获取因子数据
      this.getSensor()
    },
    // 监听dataType的数据更新
    select1(nv, ov) {
      if (nv === '日报') {
        this.dataType = 'HourPicker'
        this.unit = 'day'
      } else if (nv === '月报') {
        this.dataType = 'DatePicker'
        this.unit = 'month'
      } else if (nv === '年报') {
        this.dataType = 'MouthPicker'
        this.unit = 'month'
      } else if (nv === '小时报') {
        this.dataType = 'HourPicker1'
        this.unit = 'hour'
      } else if (nv === '五分钟报') {
        this.dataType = 'HourPicker1'
        this.unit = 'FiveMinute'
      } else {
        this.dataType = 'CustomPicker'
        this.unit = 'hour'
      }
    },
    value(one, two) {
      if (
        one === 'a34004' ||
        one === 'a34002' ||
        one === 'a21004' ||
        one === 'a21026' ||
        one === 'a05024'
      ) {
        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' ||
        one === 'a25002' ||
        one === 'a21001' ||
        one === 'a25005' ||
        one === 'a25003'
      ) {
        this.selectyz = '(单位:ppm)'
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getData()
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  // mounted() {
  //
  // },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { },
  // 方法集合
  methods: {
    sortFind(data) {
      let arr = []
      let a = ''
      let b = ''
      // const duplicateValue = _.orderBy(this.refrain(data), ['sensorValue'], ['desc']) // 重复值排序
      // console.log('duplicateValue', duplicateValue)
      const originalValue = _.orderBy(data, ['sensorValue'], ['desc'])
      const firstIndex = []
      const fiestDateList = []
      const secondeIndex = []
      const secondeDateList = []
      console.log('originalValue', originalValue)
      if ((Number(originalValue[0].sensorValue) === Number(0))) {
        return [{ name: '--' }, { name: '--' }]
      }
      originalValue.forEach((value, inx) => {
        if ((Number(originalValue[0].sensorValue) === Number(value.sensorValue))) {
          firstIndex.push(inx)
        }
      })
 
      if (firstIndex.length > 1) {
        a = "<span class='numColor'>" + originalValue[firstIndex[0]].sensorValue + '</span>&nbsp' + "<span class='numName'>("
        firstIndex.forEach((item, index) => {
          a += (originalValue[item].name).replace(/\s+/g, '') + (index === firstIndex.length - 1 ? '' : ',')
        })
        a += ')</span>'
        fiestDateList.push({
          name: a
        })
        // 第二高值
        const secondInd = firstIndex[firstIndex.length - 1]
        originalValue.forEach((value, inx) => {
          if ((Number(originalValue[secondInd].sensorValue) === Number(value.sensorValue))) {
            secondeIndex.push(inx)
          }
        })
        b = "<span class='numColor'>" + originalValue[secondeIndex[0]].sensorValue + '</span>&nbsp' + "<span class='numName'>("
        secondeIndex.forEach((item, index) => {
          b += (originalValue[item].name).replace(/\s+/g, '') + (index === secondeIndex.length - 1 ? '' : ',')
        })
        b += ')</span>'
        secondeDateList.push({
          name: b
        })
      } else if (firstIndex.length <= 1) {
        fiestDateList.push({
          name: "<span class='numColor'>" + originalValue[0].sensorValue + '</span>&nbsp(' + (originalValue[0].name).replace(/\s+/g, '') + ')'
        })
        if (originalValue.length > 1) {
          originalValue.forEach((value, inx) => {
            if ((Number(originalValue[1].sensorValue) === Number(value.sensorValue))) {
              secondeIndex.push(inx)
            }
          })
          b = "<span class='numColor'>" + originalValue[secondeIndex[0]].sensorValue + '</span>&nbsp' + "<span class='numName'>("
          secondeIndex.forEach((item, index) => {
            b += (originalValue[item].name).replace(/\s+/g, '') + (index === secondeIndex.length - 1 ? '' : ',')
          })
          b += ')</span>'
          secondeDateList.push({
            name: b
          })
        }
      }
      console.log('fiestDateList', fiestDateList)
      console.log('secondeDateList', secondeDateList)
      arr = fiestDateList.concat(secondeDateList)
      console.log('arr', arr)
      return arr
      // console.log('refrainrefrainrefrain', this.refrain(data))
      // const arr = []
      // const duplicates = data.filter(item => data.indexOf(item) !== data.lastIndexOf(item))
      // unUnit.forEach(item => {
      //   _.find(data, function(o) { return Number(item.sensorValue) === Number(o.sensorValue) })
      //   arr.push()
      // })
    },
    // 查询数据
    selectData() {
      console.log(this.newData)
      var newLineChartData = {
        series: [],
        xAxis: [],
        title: []
      }
      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('获得时间对应因子数据')
          this.searchData = _.cloneDeep(res.data)
          const data = _.cloneDeep(res.data)
          console.log('this.se', this.searchData)
          const lockLength = 0
          for (let i = 0; i < data.length; i++) {
            for (let j = 0; j < data[i].deviceData.length; j++) {
              if (res.data[0].deviceData.length === 1) {
                if (lockLength < data[i].deviceData.length) {
                  newLineChartData.series.push({
                    data: [],
                    triggerLineEvent: true,
                    emphasis: {
                      focus: 'series'
                    },
                    name: '',
                    type: 'line',
                    label: {
                      show: true,
                      position: 'top'
                    }
                  })
                }
              } else {
                newLineChartData.series.push({
                  data: [],
                  name: '',
                  triggerLineEvent: true,
                  emphasis: { focus: 'series' },
                  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
              )
            }
            newLineChartData.xAxis.push(data[i].time)
          }
          // newLineChartData.title = this.value
          this.lineChartData = newLineChartData
          console.log(lineChartData, 'newLineChartData')
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 请求左侧设备数据
    getData() {
      this.$request({
        url: '/monitorPoint/queryMonitorPoints',
        method: 'get',
        params: {
          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[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
              })
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 通过设备号获得因子数据
    getSensor() {
      this.newSensor = []
      // 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]
      this.$request({
        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)
        })
    },
    // 获得子组件时间选择器传递的数据
    showPickerChild(data) {
      this.newData = data
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="scss">
#chartTableContent{
  overflow-y: scroll;
  overflow-x: hidden;
}
.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;
}
 
.btn1 {
  margin-left: 1%;
  height: 40px;
}
 
.select11 {
  width: 20% !important;
}
 
/deep/.el-date-editor .el-range-separator {
  width: 11%;
}
/*::v-deep 这里主要的作用就是用来强制修改element默认的样式*/
::v-deep .el-table thead.is-group th {
  background: none;
  padding: 0px;
}
 
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
  border-bottom: none; /*中间的横线去掉*/
}
 
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
  text-align: right; /*上边文字靠右*/
}
 
::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
  text-align: left; /*下边文字靠左*/
}
/*核心代码*/
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 100px; /*斜线的长度*/
  top: 0;
  left: 0;
  background-color: grey;
  opacity: 0.2;
  display: block;
  transform: rotate(299deg); /*调整斜线的角度*/
  -webkit-transform-origin: top;
  transform-origin: top;
}
 
::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
  height: 100px; /*斜线的长度*/
  bottom: 0;
  right: 0;
  background-color: grey;
  opacity: 0.2;
  display: block;
  transform: rotate(299deg); /*调整斜线的角度*/
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
}
::v-deep .el-table thead.is-group th {
  height: 27.4px;
}
::v-deep .el-table thead{
  color: #000;
  font-size: 15px;
}
::v-deep .el-table tr{
  font-size: 15px;
}
/deep/.numColor{
  color: red;
  display: inline-block;
    margin-right: 8px;
}
/deep/.rankingTitle{
  font-weight: 700;
  color: #000;
}
</style>
<style>
.el-tooltip__popper{
  font-size: 16px!important;
}
</style>