fix:查询修改和表格添加

quanyawei

2023-10-13 64b642cfbe4f34706ed40af77e51079ddf919d54

 src/views/charts/index.vue

@@ -1,5 +1,5 @@
<template>
  <div style="width:100%">
  <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
@@ -9,33 +9,52 @@
        collapse-tags
        clearable
        placeholder="选择设备"
        style="width: 354px;"
        style="width: 354px"
      />
      <!-- <div> -->
      <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 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-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-select>
      <component
        :is="dataType"
        style="padding-left: 0; margin-left: 20px; width: 160px"
        class="select11"
        @sendPickerChild="showPickerChild"
      />
      <!--查询按钮-->
      <el-button @click="selectData" class="btn1">查询</el-button>
      <el-button class="btn1" @click="selectData">查询</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: 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>
        <el-table-column prop="rankingTitle" label="日期" width="150" align="center">
          <el-table-column
            prop="rankingTitle"
            label="高值"
            align="center"
            width="150"
          />
        </el-table-column>
        <template v-for="(th, thIndex) in thArr">
          <el-table-column :key="thIndex" align="center" :label="th.label" :prop="th.prop" />
        </template>
      </el-table>
    </div>

  </div>
</template>

@@ -43,12 +62,16 @@
// 这里可以导入其他文件（比如：组件，工具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'
import _ from 'lodash'

const lineChartData = {
  newVisitis: {
@@ -69,13 +92,16 @@
  }
}
export default {
// import 引入的组件需要注入到对象中才能使用
  // import 引入的组件需要注入到对象中才能使用
  components: {
    LineChart,
    DatePicker,
    MouthPicker,
    HourPicker,
    CustomPicker
    CustomPicker,
    CustomPicker1,
    TimePicker1,
    HourPicker1
  },
  filters: {
    sensorFilter: function(value) {
@@ -94,13 +120,13 @@
      props: { multiple: true },
      options: [],
      value: '',
      // value1: '',
      select1: '日报',
      selectyz: '(单位:ug/m³)',
      newMac: '',
      newMac1: [],
      // newMac2:'',
      newSensor: [], /* 因子数组 */
      newSensor: [] /* 因子数组 */,
      radio1: '日报',
      unit: 'hour',
      unit: 'day',
      type: 'select',
      newLineChartData: {
        series: [],
@@ -110,11 +136,64 @@
      newData: '',
      defaultData: [],
      medium: '',
      isSelect: false
      isSelect: false,
      options1: [
        {
          label: '五分钟报',
          value: '五分钟报'
        },
        {
          label: '小时报',
          value: '小时报'
        },
        {
          label: '日报',
          value: '日报'
        },
        {
          label: '月报',
          value: '月报'
        }
      ],
      searchData: []
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  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 souceData = []
      const firstData = []
      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
        })
      }
      const a = [...firstData]
      data.push({ ...fobj, rankingTitle: '第一高值' }, { ...sobj, rankingTitle: '第二高值' })
      console.log('firstData', fobj)
      console.log('souceData', sobj)
      console.log('datadatadata', data)
      return data
    }
  },
  // 监控data中的数据变化
  watch: {
    // 监听设备的数据更新
@@ -128,19 +207,69 @@
      this.getSensor()
    },
    // 监听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 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)'
      }
    }
  },
@@ -152,17 +281,90 @@
  // mounted() {
  //
  // },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  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) {
        firstIndex.forEach(item => {
          a += (originalValue[item].name).replace(/\s+/g, '') + '(' + originalValue[item].sensorValue + ')' + ','
        })
        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)
          }
        })
        secondeIndex.forEach(item => {
          b += (originalValue[item].name).replace(/\s+/g, '') + '(' + originalValue[item].sensorValue + ')' + ','
        })
        secondeDateList.push({
          name: b
        })
      } else if (firstIndex.length <= 1) {
        fiestDateList.push({
          name: (originalValue[0].name).replace(/\s+/g, '') + '(' + originalValue[0].sensorValue + ')'
        })
        if (originalValue.length > 1) {
          originalValue.forEach((value, inx) => {
            if ((Number(originalValue[1].sensorValue) === Number(value.sensorValue))) {
              secondeIndex.push(inx)
            }
          })
          secondeIndex.forEach(item => {
            b += (originalValue[item].name).replace(/\s+/g, '') + '(' + originalValue[item].sensorValue + ')' + ','
          })
          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: [],
@@ -179,29 +381,55 @@
          // 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' })
      })
        .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
              )
            }
            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() {
@@ -214,14 +442,22 @@
      })
        .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
              })
            }
          }
        })
@@ -231,6 +467,7 @@
    },
    // 通过设备号获得因子数据
    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]
@@ -240,88 +477,119 @@
        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)
      })
        .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缓存功能，这个函数会触发
}
</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;
    }
#chartTableContent{
  overflow-y: scroll;
  overflow-x: hidden;
}
.topTitle{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 15px;
.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;
  }
}
.btn1{

.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(-43deg); /*调整斜线的角度*/
  transform: rotate(-70deg); /*调整斜线的角度*/
  -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(-45deg); /*调整斜线的角度*/
  transform: rotate(-70deg); /*调整斜线的角度*/
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
}
::v-deep .el-table thead.is-group th {
  height: 27.4px;
}

</style>