quanyawei
2023-11-08 db3d64468f03313153cee458fc363057034b99be
src/views/charts/index.vue
@@ -12,8 +12,17 @@
        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
        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">
@@ -22,8 +31,17 @@
        <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
        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"
@@ -32,16 +50,32 @@
        @sendPickerChild="showPickerChild"
      />
      <!--查询按钮-->
      <el-button class="btn1" @click="selectData">查询</el-button>
      <el-button class="btn1" @click="selectData"> 查询 </el-button>
    </div>
    <div class="topTitle">
      <div style="position: absolute">{{ selectyz }}</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" 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">
    <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"
@@ -52,15 +86,28 @@
          />
        </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">
          <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]" />
              <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>
@@ -110,15 +157,15 @@
    HourPicker1
  },
  filters: {
    sensorFilter: function(value) {
      if (!value) return ''
    sensorFilter: function (value) {
      if (!value) { return '' }
      return json[value]
    }
  },
  props: {
    // defaultData: Array
  },
  data() {
  data () {
    // 这里存放数据
    return {
      dataType: 'HourPicker',
@@ -166,7 +213,7 @@
  },
  // 计算属性 类似于data概念
  computed: {
    thArr() {
    thArr () {
      const data = []
      if (this.searchData.length > 0) {
        this.searchData.forEach((item, index) => {
@@ -180,27 +227,27 @@
      }
      return data
    },
    tableData() {
    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 : '--'
          if (item.deviceData.length > 0) {
            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) {
    newMac (newVal, oldval) {
      this.newMac1 = []
      for (let i = 0; i < newVal.length; i++) {
        // console.log(newVal[i], 111)
@@ -210,7 +257,7 @@
      this.getSensor()
    },
    // 监听dataType的数据更新
    select1(nv, ov) {
    select1 (nv, ov) {
      if (nv === '日报') {
        this.dataType = 'HourPicker'
        this.unit = 'day'
@@ -231,7 +278,7 @@
        this.unit = 'hour'
      }
    },
    value(one, two) {
    value (one, two) {
      if (
        one === 'a34004' ||
        one === 'a34002' ||
@@ -277,34 +324,44 @@
    }
  },
  // 生命周期 - 创建完成(可以访问当前 this 实例)
  created() {
  created () {
    this.getData()
  },
  // 生命周期 - 挂载完成(可以访问 DOM 元素)
  // mounted() {
  //
  // },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { },
  // 方法集合
  methods: {
    sortFind(data) {
    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'])
      let allData = data.map(item => {
        if (item.sensorValue !== null) {
          return item
        } else {
          item.sensorValue = '0.0'
          return item
        }
      })
      const originalValue = _.orderBy(allData, ['sensorValue'], ['desc'])
      const firstIndex = []
      const fiestDateList = []
      const secondeIndex = []
      const secondeDateList = []
      console.log('originalValue', originalValue)
      console.log('allData', allData)
      if ((Number(originalValue[0].sensorValue) === Number(0))) {
        return [{ name: '--' }, { name: '--' }]
      }
@@ -358,10 +415,7 @@
          })
        }
      }
      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 = []
@@ -372,7 +426,7 @@
      // })
    },
    // 查询数据
    selectData() {
    selectData () {
      console.log(this.newData)
      var newLineChartData = {
        series: [],
@@ -441,7 +495,7 @@
        })
    },
    // 请求左侧设备数据
    getData() {
    getData () {
      this.$request({
        url: '/monitorPoint/queryMonitorPoints',
        method: 'get',
@@ -475,7 +529,7 @@
        })
    },
    // 通过设备号获得因子数据
    getSensor() {
    getSensor () {
      this.newSensor = []
      // stringMacs.su
      // var newMac = this.newMac[this.newMac.length - 1][this.newMac[this.newMac.length - 1].length - 1]
@@ -502,14 +556,14 @@
        })
    },
    // 获得子组件时间选择器传递的数据
    showPickerChild(data) {
    showPickerChild (data) {
      this.newData = data
    }
  } // 如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped lang="scss">
#chartTableContent{
#chartTableContent {
  overflow-y: scroll;
  overflow-x: hidden;
}
@@ -567,7 +621,7 @@
}
/*核心代码*/
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
  content: "";
  content: '';
  position: absolute;
  width: 1px;
  height: 100px; /*斜线的长度*/
@@ -582,7 +636,7 @@
}
::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
  content: "";
  content: '';
  position: absolute;
  width: 1px;
  height: 100px; /*斜线的长度*/
@@ -598,25 +652,25 @@
::v-deep .el-table thead.is-group th {
  height: 27.4px;
}
::v-deep .el-table thead{
::v-deep .el-table thead {
  color: #000;
  font-size: 15px;
}
::v-deep .el-table tr{
::v-deep .el-table tr {
  font-size: 15px;
}
/deep/.numColor{
/deep/.numColor {
  color: red;
  display: inline-block;
    margin-right: 8px;
  margin-right: 8px;
}
/deep/.rankingTitle{
/deep/.rankingTitle {
  font-weight: 700;
  color: #000;
}
</style>
<style>
.el-tooltip__popper{
  font-size: 16px!important;
.el-tooltip__popper {
  font-size: 16px !important;
}
</style>