修改风场页面时间选择

guoshipeng

2023-01-05 ffadb97c8ac3cf3c532e36311d2b0d39614e7c1e

修改风场页面时间选择

 .idea/workspace.xml

@@ -2,13 +2,11 @@
<project version="4">
  <component name="ChangeListManager">
    <list default="true" id="6a923843-d66d-4ccb-892a-72e969a7cbe1" name="Default Changelist" comment="export cityRankWord">
      <change afterPath="$PROJECT_DIR$/src/views/PM5PM10ForecastChart/index.vue" afterDir="false" />
      <change afterPath="$PROJECT_DIR$/src/views/Equidata/index.vue" afterDir="false" />
      <change afterPath="$PROJECT_DIR$/src/views/Listdata/index.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/cmsdist/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/cmsdist/index.html" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/public/airQuality.docx" beforeDir="false" afterPath="$PROJECT_DIR$/public/airQuality.docx" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/components/Wind/Map.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Wind/Map.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/router/dynamicRouter.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/dynamicRouter.js" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/views/dailyreport/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/dailyreport/index.vue" afterDir="false" />
      <change beforePath="$PROJECT_DIR$/src/views/Equipment/index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Equipment/index.vue" afterDir="false" />
    </list>
    <option name="SHOW_DIALOG" value="false" />
    <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -371,7 +369,7 @@
      <workItem from="1672792104603" duration="10610000" />
      <workItem from="1672878692812" duration="4973000" />
      <workItem from="1672905950696" duration="254000" />
      <workItem from="1672906896558" duration="38000" />
      <workItem from="1672906896558" duration="544000" />
    </task>
    <task id="LOCAL-00001" summary="处理详情页侧面菜单不消失">
      <created>1627269084478</created>

 src/router/dynamicRouter.js

@@ -114,11 +114,24 @@
  component: () => import('@/views/Monitoringstation/index'),
  meta: { title: '监测站点数据', icon: 'example' }
}
const Listdata = {
  path: 'report/Listdata',
  name: 'Listdata',
  component: () => import('@/views/Listdata/index'),
  meta: { title: '列表数据导出', icon: 'example' }
}

const Equipment = {
  path: 'report/Equipment',
  name: 'Equipment',
  component: () => import('@/views/Equipment/index'),
  meta: { title: '设备数据', icon: 'example' }
}
const Equidata = {
  path: 'report/Equidata',
  name: 'Equipment',
  component: () => import('@/views/Equidata/index'),
  meta: { title: '设备数据导出', icon: 'example' }
}
// 综合分析
// 城市空气质量排行
@@ -212,7 +225,8 @@
  Equipment,
  dailyreport,
  sectionReport,
  // PM5PM10ForecastChart
  Listdata,
  Equidata
}

// 网络请求，第一次登陆只有4个路由，所以要添加路由，页面刷新的时候，判断大于4个路由，就不会重新添加。

 src/views/Equidata/index.vue

New file
@@ -0,0 +1,287 @@
+<template>
  <div style="width: 100%; height: 100%">
    <div class="topSelect">
      <el-cascader
        v-model="newMac"
        :options="options"
        clearable
        placeholder="选择设备"
        style="width: 354px"
      />
      <el-cascader
        v-model="value"
        :options="newSensor"
        :props="props"
        collapse-tags
        clearable
        placeholder="选择因子"
        style="margin-left: 20px"
      />
      <el-date-picker
        v-model="timevalue"
        type="datetimerange"
        range-separator="至"
        value-format="yyyy-MM-dd HH"
        start-placeholder="开始日期"
        :picker-options="pickerOptions"
        end-placeholder="结束日期"
        style="margin-left: 1rem"
      >
      </el-date-picker>

      <el-button type="primary" @click="toExcel()" style="margin-left: 20px"
        >导出</el-button
      >
      <el-button @click="exportMon">查询</el-button>
    </div>
    <el-table :data="dateList" id="exportTab" style="margin-top: 20px" border max-height="800">
      <el-table-column
        v-for="item in columnList"
        :prop="item"
        :label="item"
        width="180px"
        :key="item"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import《组件名称》from'《组件路径》';
import FileSaver from 'file-saver'
import XLSX2 from 'xlsx-style'
import XLSX from 'xlsx'

export default {
  // import 引入的组件需要注入到对象中才能使用props
  data() {
    // 这里存放数据
    return {
      props: { multiple: true },
      options: [],
      value: '',
      value1: '',
      newMac: '',
      newMac1: [],
      // newMac2:'',
      newSensor: [],
      timevalue: [],
      columnList: [], //表头的数组
      dateList: [],
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > new Date()
        },
      },
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    newMac(newVal, oldval) {
      this.newMac1 = []
      this.newMac1.push(newVal[1][1])
      this.getSensor()
    },
    value(n, o) {
      this.value1 = []
      for (let i = 0; i < n.length; i++) {
        this.value1.push(n[i][0])
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getData()
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    // 请求左侧设备数据
    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)
        })
    },
    // 通过mac号获得因子
    getSensor() {
      this.$request({
        url: '/deviceInfo/getMacSensors',
        method: 'post',
        data: {
          macs: this.newMac1,
        },
      })
        .then((res) => {
          // console.log(res)
          this.newSensor = []
          var sensor = res.data
          for (var i in sensor) {
            this.newSensor.push({ value: i, label: sensor[i] })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    exportMon() {
      console.log(this.timevalue)
      if (this.newMac == '') {
        this.$message.warning('请选择站点')
        return
      }
      if (this.value == '') {
        this.$message.warning('请选择因子')
        return
      }
    
      this.dateList = []
      this.columnList = []
      this.$request({
        url: 'monitorPoint/getHourlyDataExcel',
        method: 'post',
        data: {
          macs: this.newMac1,
          sensors: this.value.toString(),
          startTime: this.timevalue[0],
          endTime: this.timevalue[1],
        },
      }).then((res) => {
        console.log(res, 11)
        this.tableData = res.data
        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)
        }
      })
    },
    toExcel() {
      let wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), {
        sheet: '分组表',
      })
      this.setExlStyle(wb['Sheets']['分组表'])
      var ws = XLSX2.write(wb, {
        type: 'buffer',
      })
      try {
        FileSaver.saveAs(
          new Blob([ws], { type: 'application/octet-stream' }),
          `设备数据导出.xlsx`
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, ws)
      }
      return ws
    },
    setExlStyle(data) {
      let borderAll = {
        //单元格外侧框线
        top: {
          style: 'thin',
        },
        bottom: {
          style: 'thin',
        },
        left: {
          style: 'thin',
        },
        right: {
          style: 'thin',
        },
      }
      data['!cols'] = []
      for (let key in data) {
        if (data[key] instanceof Object) {
          data[key].s = {
            border: borderAll,
            alignment: {
              horizontal: 'center', //水平居中对齐
              vertical: 'center',
            },
            font: {
              sz: 11,
            },
            bold: true,
            numFmt: 0,
          }
          data['!cols'].push({ wpx: 200 })
        }
      }
      return data
    },
  },
}
</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;
  }
}
.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%;
}
</style>

 src/views/Equipment/index.vue

@@ -2,13 +2,13 @@
  <div style="padding: 20px">
    <el-card>
      <div style="display: flex">
        <div class="timee">
        <div class="timee" style="margin-top: 0.5rem">
          {{ time }}
        </div>
        <div style="margin-left: 1.5rem; margin-top:-1.1rem">
        <div style="margin-left: 1.5rem">
          <span>设备和站点:</span>
          <el-cascader
           v-model="newMac"
            v-model="newMac"
            :options="options"
            :props="props"
            collapse-tags
@@ -18,9 +18,10 @@
            style="width: 25rem"
          ></el-cascader>
        </div>
        <div style="margin-left: 1.5rem; margin-top: -12px">
        <div style="margin-left: 1.5rem">
          <span>选择因子:</span>
          <el-cascader
            v-model="value"
            :options="newSensor"
            :props="props"
            collapse-tags
@@ -28,11 +29,26 @@
            @change="res"
          ></el-cascader>
        </div>
        <div style="margin-left: 1.5rem; margin-top: -12px">
          <el-button type="primary">查询</el-button>
        <div style="margin-left: 1.5rem">
          <el-button type="primary" @click="Equisel">查询</el-button>
        </div>
      </div>
    </el-card>
     <el-table
      :data="dateList"
      style="margin-top: 20px"
      border
      max-height="800"
    >
      <el-table-column
        v-for="item in columnList"
        :prop="item"
        :label="item"
        width="180px"
        :key="item"
      >
      </el-table-column>
    </el-table>
  </div>
</template>        

@@ -53,7 +69,11 @@
      options: [],
      newSensor:[],
      newMac:'',
      newMac1:[]
      newMac1:[],
      value:'',
      value1:'',
      columnList: [], //表头的数组
      dateList: [],
    }
  },
  // 计算属性 类似于data概念
@@ -69,6 +89,12 @@
      // 设备更新后，重新获取因子数据
      this.getSensor()
      console.log(this.newMac1)
    },
     value(n, o) {
      this.value1 = []
      for (let i = 0; i < n.length; i++) {
        this.value1.push(n[i][0])
      }
    },
  },
  //方法集合
@@ -108,7 +134,6 @@
        })
    },
    changeYz(){
      console.log(11111);
      this.getSensor();
    },
     getSensor() {
@@ -124,18 +149,37 @@
          var sensor = result.data
          for (var i in sensor) {
            this.newSensor.push({ value: i, label: sensor[i] })
            
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    Equisel(){
      this.$request({
        url:'',
        method:'post',
        data:{
          time:this.time,
          zhan:this.newMac1,
          sensorCode:this.value1
        }
      }).then((res)=>{
        console.log(res);
        this.tableData = res.data
        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)
        }
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    var timer = this.dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date())
    this.time = timer
    this.time = this.dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date())
    this.getData();
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
@@ -150,5 +194,4 @@
}
</script>
<style scoped>

</style>

 src/views/Listdata/index.vue

New file
@@ -0,0 +1,298 @@
<template>
  <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
        v-model="newMac"
        :options="options"
        :props="props"
        collapse-tags
        clearable
        placeholder="选择设备"
        style="width: 21rem"
      />
      <!-- <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>
      <el-date-picker
        v-model="timevalue"
        type="datetimerange"
        range-separator="至"
        value-format="yyyy-MM-dd HH"
        start-placeholder="开始日期"
        :picker-options="pickerOptions"
        end-placeholder="结束日期"
        style="margin-left: 1rem"
      >
      </el-date-picker>

      <el-button type="primary" @click="toExcel()" style="margin-left: 20px"
        >导出</el-button
      >
      <el-button @click="exportMon">查询</el-button>
    </div>
    <el-table
      :data="dateList"
      id="exportTab"
      style="margin-top: 20px"
      border
      max-height="800"
    >
      <el-table-column
        v-for="item in columnList"
        :prop="item"
        :label="item"
        width="180px"
        :key="item"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import《组件名称》from'《组件路径》';
import FileSaver from 'file-saver'
import XLSX2 from 'xlsx-style'
import XLSX from 'xlsx'
export default {
  data() {
    // 这里存放数据
    return {
      props: { multiple: true },
      options: [],
      value: '',
      newMac: '',
      newMac1: [],
      newSensor: [] /* 因子数组 */,
      columnList: [], //表头的数组
      dateList: [],
      timevalue: [],
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > new Date()
        },
      },
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控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的数据更新
  },
  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created() {
    this.getData()
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  // mounted() {
  //
  // },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    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.$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] })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    exportMon() {
      console.log(this.timevalue)
      if (this.newMac1 == '') {
        this.$message.warning('请选择站点')
        return
      }
      if (this.value == '') {
        this.$message.warning('请选择因子')
        return
      }
      
      this.dateList = []
      this.columnList = []
      this.$request({
        url: 'monitorPoint/getHourlyDataExcel',
        method: 'post',
        data: {
          macs: this.newMac1,
          sensors: this.value.toString(),
          startTime: this.timevalue[0],
          endTime: this.timevalue[1],
        },
      }).then((res) => {
        console.log(res, 11)
        this.tableData = res.data
        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)
        }
      })
    },
    toExcel() {
      let wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), {
        sheet: '分组表',
      })
      this.setExlStyle(wb['Sheets']['分组表'])
      var ws = XLSX2.write(wb, {
        type: 'buffer',
      })
      try {
        FileSaver.saveAs(
          new Blob([ws], { type: 'application/octet-stream' }),
          `列表数据导出.xlsx`
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, ws)
      }
      return ws
    },
    setExlStyle(data) {
      let borderAll = {
        //单元格外侧框线
        top: {
          style: 'thin',
        },
        bottom: {
          style: 'thin',
        },
        left: {
          style: 'thin',
        },
        right: {
          style: 'thin',
        },
      }
      data['!cols'] = []
      for (let key in data) {
        if (data[key] instanceof Object) {
          data[key].s = {
            border: borderAll,
            alignment: {
              horizontal: 'center', //水平居中对齐
              vertical: 'center',
            },
            font: {
              sz: 11,
            },
            bold: true,
            numFmt: 0,
          }
          data['!cols'].push({ wpx: 200 })
        }
      }
      return data
    },
  }, // 如果页面有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;
  }
}
.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%;
}
</style>