cropland/src/pages/plantGuard/equipState.vue

<!-- 设备状态 -->
<template>
  <div class="tab-pane">
    <!-- {{equipId}}-
    {{equipType}} -->
    <div class="list" v-if="equipDataState">
      <div class="elementItem" v-for="(item,index) in showState[equipType]" :key="index">
        <!-- {{equipState_dict[item]}} -->
        <div>{{equipState_dict[item].name}}</div>
        <template v-if="item=='tt'">
          <template v-if="equipData.ts == 1">
            <div class="elementValue" >{{equipData['st']}}-{{equipData['et']}}{{equipState_dict['et'].unit}}</div>
          </template>
          <template v-else>
            <div class="elementValue" v-if="equipState_dict[item].value">{{equipState_dict[item].value[equipData[item]]}}</div>
            <div class="elementValue" v-else >{{equipData[item]}}{{equipState_dict[item].unit}}</div>
          </template>
        </template>
        <template v-else>
          <template v-if="item=='addtime'">
            <div class="elementValue" >{{equipData[item]*1000|formatTime}}</div>
          </template>
          <template v-else>
            <div class="elementValue" v-if="equipState_dict[item].value">{{equipState_dict[item].value[equipData[item]]}}</div>
            <div class="elementValue" v-else >{{equipData[item]}}{{equipState_dict[item].unit}}</div>
          </template>
          
        </template>
          
      </div>
    </div>
    <div v-else class="empty">
        <div>暂无数据</div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import equipState_dict from './equipState_dict.json'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["equipId", "equipType"],
  data() {
    //这里存放数据
    return {
        equipState_dict,
        showState: {
            "2": ["ds","ws","tbs","rps","tps","dps","tt","ct","at","ah","cv","bv","csq","dver","addtime"],
            "3": ["ds","ws","tt","hs","at","ah","upds","dnds","vbat","rps","tps","lps","lamp","csq","dver","addtime"],
            "4": ["ds","ws","tt","hs","at","ah","upds","dnds","vbat","rps","tps","lps","lamp","csq","dver","addtime"],
            "7": ["ds","at","ah","set_temp","pre_temp","bs","rps","usb_sta","vbat","csq","dver","addtime"],
        },
        equipData:{},
        equipDataState:false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 设备状态弹框
    equipStateSet(id, device_status) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.worm_lamp.device_history_data",
        data: this.qs.stringify({
          device_type_id: this.equipType,
          page_size: 1,
          device_id: id,
          page: 1
        })
      }).then(res => {
        if (res.data.message == "") {
          if(res.data.data.counts == 0){
            this.equipDataState=false;
            this.equipData = {}
          }else{
            this.equipDataState = true;
            this.equipData = res.data.data.data[0].d_h_t
            console.log(this.equipData);
            console.log('this.equipData');
            
          }
        }
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.equipStateSet(this.equipId, this.equipType);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.tab-pane{
    background: #f1faff;
}
.list {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px 7px 5px 7px;
    .elementItem{
        width: 33.3333%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        line-height: 36px;
        border-left: 5px solid #f1faff;
        border-right: 5px solid #f1faff;
        margin-bottom: 10px;
        padding: 0 9px;
        font-size: 13px;
        .elementValue{
            color: #0195ff;
        }
    }
    
    .elementItem:nth-child(6n+1),
    .elementItem:nth-child(6n+2),
    .elementItem:nth-child(6n+3){
        background: #f3f3f3;
    }

    .elementItem:nth-child(6n+4),
    .elementItem:nth-child(6n+5),
    .elementItem:nth-child(6n+6){
        background: #e7f0f7;
    }
}
.empty{
  line-height: 100px;
  text-align: center;
  font-size: 14px;
  color: #0195ff;
}
</style>