aiot-app/src/pages/workbenchsub/device/detail.vue

<template>
  <view class="device-info-wrap info-wrap">
    <panel>
      <template v-slot:header>
        <up-icon size="28rpx" :name="list"></up-icon>
        设备信息
        <up-tag
            :text="state.deviceInfo.statusName"
            plain
            size="mini"
            :bgColor="valueToConst(DeviceState,state.deviceInfo.status).color"
            class="tag-stat"/>
      </template>
      <template v-slot:content>
        <view class="order-info">
          <view class="mix-wrap">
            <view class="info-column">
              <label-text
                  label="所属产品"
                    :text="formatTxt(state.deviceInfo.productName)"
              />
              <label-text
                  label="设备编码"
                  :line="2"
                  :text="formatTxt(state.deviceInfo.name)"
              />
              <label-text
                  label="设备类型"
                  :text="formatTxt(state.deviceInfo.deviceTypeName)"
              />
              <label-text
                  label="设备厂家"
                  :text="formatTxt(state.deviceInfo.manufactor)"
              />
            </view>
            <u--image
                :showLoading="true"
                :src="getDevImg(state.deviceInfo.devImg)"
                width="160rpx"
                height="150rpx"
            />
          </view>
          <view class="line-info-wrap">
            <label-text
                label="第三方设备编码"
                :text="formatTxt(state.deviceInfo.thirdDevCode)"
            />
            <label-text
                label="最新在线时间"
                :text="formatTxt(state.deviceInfo.lastOnlineTime)"
            />
            <label-text
                label="最后通讯时间"
                :text="formatTxt(state.deviceInfo.lastReportTime)"
            />
            <label-text
                label="位置"
                line="2"
                :text="formatTxt(state.deviceInfo.locationStr)"
            />
            <label-text
                label="描述"
                line="3"
                :text="formatTxt(state.deviceInfo.description)"
            />
          </view>
        </view>
      </template>
    </panel>
    <panel>
      <template v-slot:header>
        <up-icon size="28rpx" :name="list"></up-icon>
        运行状态
      </template>
      <template v-slot:content>
        <up-cell-group :border="false">
          <up-cell
              v-for="item in state.metaInfo.dataMetaRunInfo"
              :title="`${item.name}(${item.identifier})`"
              size="small"
          >
            <template v-slot:label>
              <view class="meta-data">
                <up-text
                    :lines="1"
                    :text="`${item.data}${item.data && JSON.parse(item.dataType).specs.unit ? JSON.parse(item.dataType).specs.unit:''}`"
                    size="30rpx"
                    :bold="true"
                >
                </up-text>
                <up-text
                    :lines="1"
                    :text="formatTxt(item.timeStamp)"
                    size="20rpx"
                >
                </up-text>
              </view>
            </template>
          </up-cell>
        </up-cell-group>
      </template>
    </panel>
    <up-tabbar
        :fixed="true"
        :placeholder="false"
        :safeAreaInsetBottom="false"
    >
      <view class="warning-btn">报废</view>
      <view class="def-btn">禁用</view>
      <view class="def-btn">编辑</view>
    </up-tabbar>
  </view>
</template>

<script setup lang="ts">

import list from "@/static/aiot/list.svg";
import Panel from "@/components/pannel/index.vue";
import LabelText from "@/components/labeltext/index.vue";
import {onMounted, reactive, ref} from 'vue';
import {getDeviceDetail, getDeviceMeta} from "@/api/device.js";
import {onLoad} from "@dcloudio/uni-app";
import {formatTxt, getDevImg} from "@/util/index.js";
import {valueToConst} from "@/common/consts/CommonConst.js";
import {DeviceState} from "@/common/consts/DeviceConst.js";

const state = reactive({
  deviceInfo: {},
  metaInfo: {
    dataMetaRunInfo: [],
    dataOnlineRunInfo: [],
  },
});
const metaInfo = reactive({});
const deviceId = ref('')
onLoad((option) => {
  deviceId.value = option.id
});
onMounted(() => {
  getDeviceDetail(deviceId.value).then((data) => {
    state.deviceInfo = data
  })
  getDeviceMeta(deviceId.value).then((res) => {
    if (res.metadataList) {
      state.metaInfo.dataMetaRunInfo = res.metadataList.filter((item) => item.disply !== false);
    }
    if (res.onlineList.type) {
      state.metaInfo.dataOnlineRunInfo = res.onlineList
    }
  })
});
</script>


<style lang="scss">
.device-info-wrap {
  padding-bottom: 140rpx;

  .panel-wrap {
    margin-bottom: $uni-block-gap;
  }

  .mix-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    .info-column {
      display: flex;
      flex: 1;
      align-items: flex-start;
      justify-content: flex-start;
      flex-direction: column;
    }
  }

  .panel-content {
    box-sizing: border-box;
    padding: 15px 15px 15px 15px;
  }

  .label-text-wrap {
    margin-top: $uni-text-gap;
  }

  .stepper-container {
    .title-date {
      margin-left: auto;
    }
  }

  .u-tabbar__content__item-wrapper {
    padding-bottom: 40rpx;


    > view {
      box-sizing: border-box;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: $uni-bg-color;

      &:not(:last-child) {
        border-right: 2rpx solid #fefefe47;
      }
    }

    .warning-btn {
      background-color: $uni-color-error;
    }

    .def-btn {
      background-color: $uni-color-primary;
    }
  }

  .u-cell-group {
    .u-cell {
      margin-bottom: $uni-text-gap;

      .u-cell__body {
        padding: 0;
      }
    }
  }

  .meta-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>