fix:实时风场图点击弹窗修改

quanyawei

2023-10-26 6e229822c315f85465d27f2c411e0c9382acf7f5

 src/views/Monitoringstation/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="zong" >
    <div style="display: flex;">
  <div class="zong">
    <div style="display: flex">
      <el-select
        v-model="value"
        placeholder="请选择检查设备"
@@ -50,13 +50,13 @@
      >
      <el-button @click="exportMon">查询</el-button>
    </div>
   

    <el-table
      :data="dateList"
      style="margin-top: 20px;"
      style="margin-top: 20px"
      id="exportTab"
      border
       max-height="800"
      max-height="800"
    >
      <el-table-column
        v-for="item in columnList"
@@ -87,12 +87,30 @@
      startvalue: '',
      endvalue: '',
      options: [],
      valueww: '',
      columnList: [], //表头的数组
      dateList: [],
      newMac1:[],
      newMac1: [],
      Monfactors: [],
      tableData: [],
      tableFields: {},
      ddlist: [
        {
          'PM2.5': '11',
          PM10: 155,
          时间: '2023-6-05',
        },
        {
          'PM2.5': '110',
          PM10: 155,
          时间: '2023-6-05',
        },
        {
          'PM2.5': '110',
          PM10: 159,
          时间: '2023-6-05',
        },
      ],
      json_meta: [
        [
          {
@@ -119,41 +137,42 @@
  //方法集合
  name: 'exporName',
  methods: {
    getMonitor(res){
      this.Monfactors=[]
    getMonitor(res) {
      this.Monfactors = []
      this.$request({
        url:'sensor/getSensorsByMonitorPointIds',
        method:'get',
        params:{
          monitorPointIds:res
        }
      }).then((res)=>{
        console.log(res);
        this.Monfactors=res.data
        url: 'sensor/getSensorsByMonitorPointIds',
        method: 'get',
        params: {
          monitorPointIds: res,
        },
      }).then((res) => {
        console.log(res)
        this.Monfactors = res.data
      })
    },
    exportMon() {
      if(this.value===""){
         this.$message.warning('请选择检查设备')
      console.log(this.valueww, '123')
      if (this.value === '') {
        this.$message.warning('请选择检查设备')
        return
      }
       if(this.value1===""){
         this.$message.warning('请选择因子')
      if (this.value1 === '') {
        this.$message.warning('请选择因子')
        return
      }
       if(this.startvalue===""){
         this.$message.warning('请选择开始时间')
      if (this.startvalue === '') {
        this.$message.warning('请选择开始时间')
        return
      }
       if(this.endvalue===""){
         this.$message.warning('请选择结束时间')
      if (this.endvalue === '') {
        this.$message.warning('请选择结束时间')
        return
      }
      this.dateList = []
      this.columnList = []
      this.$request({
        url: '/monitorPoint/getHourlyDataByMonitorPoint',
        method: 'get',    
        method: 'get',
        params: {
          monitorPointId: this.value,
          sensors: this.value1.toString(),
@@ -163,15 +182,15 @@
      }).then((res) => {
        console.log(res, 11)
        this.tableData = res.data
        console.log(this.tableData, 'this.tableData') 
        for (let key in this.tableData[0]) {       
        console.log(this.tableData, 'this.tableData')
        for (let key in this.tableData[0]) {
          this.columnList.push(key)
        }
        for (let item of this.tableData) {
          this.dateList.push(item)
        }
      })
      console.log(1);
      console.log(1)
    },
    getMonitorPointId() {
      this.$request({
@@ -190,71 +209,70 @@
              label: res.data[i].name,
            })
          }
        console.log(this.options);

          console.log(this.options)
        })
        .catch((err) => {
          console.log(err)
        })
        
    },
    toExcel() {
      let wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), { sheet: "分组表" });
      this.setExlStyle(wb["Sheets"]["分组表"]);
      let wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), {
        sheet: '分组表',
      })
      this.setExlStyle(wb['Sheets']['分组表'])
      var ws = XLSX2.write(wb, {
        type: "buffer",
      });
        type: 'buffer',
      })
      try {
        FileSaver.saveAs(
          new Blob([ws], { type: "application/octet-stream" }),
          new Blob([ws], { type: 'application/octet-stream' }),
          `监测站点数据表.xlsx`
        );
        )
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, ws);
        if (typeof console !== 'undefined') console.log(e, ws)
      }
      return ws;  
      return ws
    },
    setExlStyle(data) {
      let borderAll = {
        //单元格外侧框线
        top: {
          style: "thin",
          style: 'thin',
        },
        bottom: {
          style: "thin",
          style: 'thin',
        },
        left: {
          style: "thin",
          style: 'thin',
        },
        right: {
          style: "thin",
          style: 'thin',
        },
      };
      data["!cols"] = [];
      }
      data['!cols'] = []
      for (let key in data) {
        if (data[key] instanceof Object) {
          data[key].s = {
            border: borderAll,
            alignment: {
              horizontal: "center", //水平居中对齐
              vertical: "center",
              horizontal: 'center', //水平居中对齐
              vertical: 'center',
            },
            font: {
              sz: 11,
            },
            bold: true,
            numFmt: 0,
          };
          data["!cols"].push({ wpx: 200 });
          }
          data['!cols'].push({ wpx: 200 })
        }
      }
      return data;
      return data
    },
    
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getMonitorPointId();
    this.getMonitorPointId()
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
@@ -271,5 +289,4 @@
.zong {
  padding: 20px;
}

</style>