dyf-vue-ui/src/views/equipmentManagement/devices/eqDetail.vue

<template>
  <div class="content">
    <div class="leftImg fleft">
      <img class="img" :src="detailData?.devicePic" />
    </div>
    <div class="detail fleft">

      <div class="row">

        <div class="item">
          <div class="lable">设备名称<span>：</span></div>
          <div class="val">{{ detailData?.deviceName }}</div>
        </div>
        <div class="item">
          <div class="lable">设备IMEI<span>：</span></div>
          <div class="val">{{ detailData?.deviceImei }}</div>
        </div>
        <div class="item">
          <div class="lable">设备MAC<span>：</span></div>
          <div class="val">{{ detailData?.deviceMac }}</div>
        </div>
       

        
        <div class="item">
          <div class="lable">通讯方式<span>：</span></div>
          <div class="val">{{ detailData?.communicationMode===1 ?'4G':'蓝牙' }}</div>
        </div>
        <div class="item">
          <div class="lable">蓝牙名称<span>：</span></div>
          <div class="val">{{ detailData?.bluetoothName }}</div>
        </div>
        <div class="item">
          <div class="lable">设备类型<span>：</span></div>
          <div class="val">{{ detailData?.typeName }}</div>
        </div>


          <div class="item">
          <div class="lable">使用人员<span>：</span></div>
          <div class="val">{{ detailData?.personnelBy }}</div>
        </div>
        <div class="item">
          <div class="lable">设备状态<span>：</span></div>
          <div class="val">{{ detailData?.deviceStatus===1 ?'正常':'失效' }}</div>
        </div>
        <div class="item">
          <div class="lable">绑定时间<span>：</span></div>
          <div class="val">{{ detailData?.bindingTime }}</div>
        </div>


         <div class="item">
          <div class="lable">在线状态<span>：</span></div>
          <div class="val">{{ detailData?.onlineStatus===1?'在线':'离线' }}</div>
        </div>
         <div class="item">
          <div class="lable">电量<span>：</span></div>
          <div class="val">{{ detailData?.battery }}%</div>
        </div>
         <div class="item">
          <div class="lable">告警状态<span>：</span></div>
          <div class="val">{{ detailData?.alarmStatus=='1'?'告警':'未告警' }}</div>
        </div>


          <div class="item">
          <div class="lable">经度<span>：</span></div>
          <div class="val">{{ detailData?.latitude }}</div>
        </div>
          <div class="item">
          <div class="lable">纬度<span>：</span></div>
          <div class="val">{{ detailData?.longitude }}</div>
        </div>
          <div class="item">
          <div class="lable">分享用户数量<span>：</span></div>
          <div class="val">{{ detailData?.shareUsersNumber }}</div>
        </div>

      </div>
    </div>
    <div class="clear"></div>
   
  </div>
</template>
<script setup lang="ts">
import request from "@/utils/request";
import { number } from "vue-types";

const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  acIndex:{
    type:Number,
    required: true
  }

})
var data=ref({});
var detailData = ref({});
var deviceid=null;
function initData(item) {
  if(deviceid==item.data.deviceId){
    return;
  }
deviceid=item.data.deviceId

  detailData.value={};
  request({
    url: "/api/device/pc/detail/" + item.data.deviceId,
    method: 'get'
  }).then(res => {
    if (res.code == 200) {
      if (res.data) {
        detailData.value = res.data;
      }
    }
  }).finally(() => {
    data.value=item.data;
  });


}

watch(
  () => props.acIndex,  // 监听的属性
  (newVal) => {       
    if (newVal===1 && props.data) {  // 确保参数有效
      initData(props.data)  // 调用回调
    }
  },
  { immediate: true }  // 关键：组件初始化时立即执行一次
)




</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 30px 12px 12px 12px;

}

.leftImg {
  width: 18%;
  text-align: center;
}

.leftImg .img {
  width: 200px;
  height: 200px;
  object-fit: scale-down;
  border-radius: 4px;
  box-shadow: 0px 0px 4px 0px rgba(0, 27, 74, 0.15);
  background: rgba(247, 248, 252, 1);
}

.detail {
  width: 82%;

}

.detail .row {
  width: 100%;
  height: 100%;

}

.detail .row .item {
  width: calc(100% / 3);
  margin-bottom: 20px;
  height: 20px;
  line-height: 20px;
  color: rgba(56, 64, 79, 1);

  font-family: Microsoft YaHei;
  font-size: 14px;
  font-weight: 400;

  letter-spacing: 0px;   
  text-align: left;
  float: left;
}

.detail .row .lable {
  width: 100px;
  text-align: right;
  float: left;
}

.detail .row .val {
  float: left;
}

.fleft {
  float: left;
}

.fright {
  float: right;
}

.clear {
  clear: both;
}
</style>