quanyawei
2024-03-15 4595b8b5a9c7afdeff9929022bfa3ca31a24ce06
src/views/Equipment/index.vue
@@ -2,59 +2,128 @@
  <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: 20px; margin-top: -12px">
        <div style="margin-left: 1.5rem">
          <span>设备和站点:</span>
          <el-cascader
            v-model="newMac"
            :options="options"
            :props="props"
            collapse-tags
            clearable
          ></el-cascader>
            placeholder="选择设备"
            style="width: 25rem"
            @change="changeYz"
          />
        </div>
        <div style="margin-left: 20px; margin-top: -12px">
        <div style="margin-left: 1.5rem">
          <span>选择因子:</span>
          <el-cascader
            :options="options"
            v-model="value"
            :options="newSensor"
            :props="props"
            collapse-tags
            clearable
          ></el-cascader>
            @change="res"
          />
        </div>
        <div style="margin-left: 20px; 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"
        :key="item"
        :prop="item"
        :label="item"
        width="180px"
      />
    </el-table>
  </div>
</template>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
// 例如:import《组件名称》from'《组件路径》';
export default {
  //import 引入的组件需要注入到对象中才能使用
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
  data () {
    // 这里存放数据
    return {
      time: '',
      props: { multiple: true },
      defaultData: [],
      options: [],
      newSensor: [],
      newMac: '',
      newMac1: [],
      value: '',
      value1: '',
      columnList: [], // 表头的数组
      dateList: [],
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  //方法集合
  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()
      console.log(this.newMac1)
    },
    value (n, o) {
      this.value1 = []
      for (let i = 0; i < n.length; i++) {
        this.value1.push(n[i][0])
      }
    },
  },
  // 生命周期 - 创建完成(可以访问当前 this 实例)
  created () {
    this.time = this.dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date())
    this.getData()
  },
  // 生命周期 - 挂载完成(可以访问 DOM 元素)
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {},
  // 方法集合
  methods: {
    getData() {
    res (res) {
      console.log(res.toString())
    },
    getData () {
      this.$request({
        url: '/monitorPoint/queryMonitorPoints',
        method: 'get',
@@ -70,14 +139,16 @@
              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,
              })
            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,
                })
              }
            }
          }
        })
@@ -85,23 +156,51 @@
          console.log(error)
        })
    },
  },
  //生命周期 - 创建完成(可以访问当前 this 实例)
  created() {
    var timer = this.dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date())
    this.time = timer
    this.getData();
  },
  //生命周期 - 挂载完成(可以访问 DOM 元素)
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
    changeYz () {
      this.getSensor()
    },
    getSensor () {
      this.$request({
        url: '/deviceInfo/getMacSensors',
        method: 'post',
        data: {
          macs: this.newMac1,
        },
      })
        .then((result) => {
          console.log(result)
          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)
        }
      })
    }
  }, // 如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
</style>
</style>