ninglu-frontt/src/pages/bigdata/combine/comp/Qxz.vue

<template>
  <div
    class="qxz screen-content-box"
    v-loading="loading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.6)"
  >
    <p class="title">
      气象监测
      <el-select
        style="width: 125px; float: right"
        v-model="selId"
        size="mini"
        filterable
        popper-class="deviceDevNew_faultSelect"
        @change="baseChange"
      >
        <el-option
          v-for="device in equipList"
          :key="device.equip_id"
          :label="device.equip_name"
          :value="device.equip_id"
        ></el-option>
      </el-select>
    </p>
    <div class="screen-container">
      <!-- <vue-seamless-scroll :data="equipStatus" class="scrollwarp" :class-option="optionHover"> -->
      <div class="status-box" v-for="(item, index) in equipStatus" :key="index">
        <div class="status-item" v-for="(base, j) in item" :key="j">
          <img class="float-left" :src="require('../assets/' + base.num + '.svg')" alt="" />
          <p class="clearfix">
            <span class="text float-left">{{ base.name }}</span>
            <span class="num float-right"
              >{{ base.value }}
              <span class="unit">{{ base.unit }}</span>
            </span>
          </p>
        </div>
      </div>
      <!-- </vue-seamless-scroll> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    height: {
      type: Number,
      default: 200
    }
  },
  data() {
    return {
      selId: '',
      equipList: [],
      equipStatus: [],
      loading: false
    }
  },
  computed: {
    optionHover() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        // limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        limitMoveNum: this.equipStatus.length > 3 ? 3 : this.equipStatus.length,
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
    len() {
      return Math.ceil(this.equipStatus.length / 2)
    },
    emptyStyle() {
      return {
        height: this.height + 'px'
      }
    }
  },
  created() {},
  mounted() {
    this.getList()
  },
  watch: {},
  methods: {
    baseChange() {
      this.getDeviceConfig()
    },
    formateArray(row, col, array) {
      let newArray = []
      for (let i = 0; i < row; i++) {
        let temp = []
        for (let j = 0; j < col; j++) {
          if (i * col + j >= array.length) {
            break
          }
          temp.push(array[i * col + j])
        }
        newArray.push(temp)
      }
      return newArray
    },
    // 获取列表
    getList() {
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=weather.weather.qxz_page',
        data: this.qs.stringify({
          page: 1
        })
      }).then((res) => {
        if (res.data.message == '') {
          const equipList = res.data.data.ids
          this.equipList = equipList
          if (equipList.length > 0) {
            this.selId = equipList[0].equip_id
            // const listItem = equipList.filter((item) => item.equip_id === '860048073313361')
            this.getDeviceConfig()
          }
        }
      })
    },
    getDeviceConfig() {
      this.loading = true
      this.$axios({
        method: 'POST',
        url: '/api/api_gateway?method=weather.weather.qxz_status',
        data: this.qs.stringify({
          device_id: this.selId
        })
      })
        .then((res) => {
          this.loading = false
          if (res.data.message === '') {
            const { dat, conf } = res.data.data
            // console.log(dat, conf, 'resent, compare')
            let recent = []
            Object.keys(conf).forEach((key) => {
              if (conf[key]) {
                let item = conf[key].split('#')
                let val = dat[key].split('#')

                recent.push({
                  num: val[1],
                  value: val[0] || '--',
                  unit: item[1],
                  name: item[0]
                })
              }
            })

            this.equipStatus = this.formateArray(Math.ceil(recent.length / 2), 2, recent)
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.loading = false
          console.log(err)
        })
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
.screen-content-box {
  border-radius: 4px;

  height: 100%;
  width: 440px;
  .title {
    img {
    }
    padding-left: 60px;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    background-image: url('../assets/title-bg.png');
    font-size: 18px;
    color: #ffffff;
    /deep/ .el-input {
      .el-input__inner {
        border: 1px solid rgba(0, 133, 255, 0.6);
        background: rgba(0, 133, 255, 0.3);
        color: #fff;
      }
    }
    /deep/ .el-input.is-focus .el-input__inner,
    /deep/ .el-textarea__inner:focus,
    /deep/ .el-input__inner:focus {
      border-color: rgba(0, 133, 255, 0.6) !important;
    }
  }
  .screen-container {
    height: calc(100% - 40px);
    background: rgba(0, 0, 0, 0.32);
    padding: 16px 14px;
    box-sizing: border-box;
    width: 100%;
    backdrop-filter: blur(8.8px);
    color: #fff;
    overflow: hidden;
  }
}

.status-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  // padding: 0 16px;
  flex-wrap: wrap;
  // animation: vertical-scroll 8s linear infinite;
  .status-item {
    width: 50%;
    height: 35px;

    // background-image: url('../assets/qx-bg.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    p {
      flex: 1;
      padding: 0 4px;
      height: 35px;
      line-height: 35px;
      border-radius: 1.81px;
      border: 0.45px solid #1671f8;
    }
    img {
      width: 56px;
      height: 41px;
      vertical-align: middle;
      // margin: 0 8px 0 8px;
    }
    span {
      color: #fff;
      font-size: 14px;
      vertical-align: middle;
    }
    .unit {
      font-size: 12px;
      color: #d0deee;
    }
    .text {
      font-size: 14px;
      color: rgba(255, 255, 255);
    }
    .num {
      font-size: 16px;
      color: #d0deee;
      font-weight: bold;
      // line-height: 23px;
    }
  }
  &:hover {
    animation-play-state: paused;
  }
}
@keyframes vertical-scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
</style>