usky-web-mobile/src/pages/business/fireIot/facilitiesManage/facilitiesDetails.vue

<template>
  <scroll-view class="scroll-height" :scroll-y="true" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
    <view class="facilitiesDetails-container">
      <view class="flex bg-white p15 mb15">
        <image style="width: 40px; height: 40px; margin: auto 15px auto 0" :src="dataArray.imagesUrl ? dataArray.imagesUrl : '/static/images/404.png'" mode="aspectFill"></image>

        <view style="margin: auto auto auto 0">
          <view style="font-size: 15px"> {{ dataArray.facilityName }} </view>
        </view>

        <view style="margin: auto 0 auto 0">
          <!-- {{ siteList.siteStatus == null }} -->
          <view style="font-size: 15px; color: #30bb00" :style="{ color: dataArray.status == 0 ? '#30bb00' : dataArray.status == 1 ? '#FF6000' : '#797979' }">
            {{ dataArray.status == 0 ? "正常" : dataArray.status == 1 ? "维修" : "关闭" }}
          </view>
          <!-- #f07d28 -->
        </view>
      </view>

      <view class="bg-white p15 mb15">
        <uni-section class="block mb10" title="基本信息" type="line"></uni-section>
        <view class="tableType3 p0">
          <u-empty v-if="dataList.length <= 0" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>

          <u-row v-for="po in dataList" :key="po">
            <u-col span="4">
              <view style="text-align: right; padding: 0px 5px 0px 5px">{{ po.title }}</view>
            </u-col>
            <u-col span="8">
              <view style="text-align: left; padding: 0px 5px 0px 5px">{{ po.value }}</view>
            </u-col>
          </u-row>
        </view>
      </view>

      <view class="bg-white p15 mb15">
        <uni-section class="block mb10" title="关联设备" type="line"></uni-section>

        <view class="flex mb10" style="height: 35px; line-height: 35px">
          <u-input v-model="deviceId" placeholder="设备编号" @change="deviceInfoApi()" disabledColor="transparent" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" clearable />
        </view>

        <view class="tableType1">
          <u-row>
            <u-col span="1.5">
              <view>序号</view>
            </u-col>
            <u-col span="3">
              <view>设备编号</view>
            </u-col>
            <u-col span="3">
              <view>设备名称</view>
            </u-col>
            <u-col span="4.5">
              <view>设备地址</view>
            </u-col>
          </u-row>
          <u-row v-for="(co, index) in dataList1" :key="index">
            <u-col span="1.5">
              <view>{{ index + 1 }}</view>
            </u-col>
            <u-col span="3">
              <view>{{ co.deviceId }}</view>
            </u-col>
            <u-col span="3">
              <view>{{ co.deviceName }}</view>
            </u-col>
            <u-col span="4.5">
              <view>{{ co.installAddress }}</view>
            </u-col>
          </u-row>
        </view>
      </view>

      <view class="bg-white p15 mb15">
        <uni-section class="block mb10" title="关联建筑" type="line"></uni-section>

        <view class="flex mb10" style="height: 35px; line-height: 35px">
          <u-input v-model="buildNum" placeholder="建筑编号" @change="buildInfoApi()" disabledColor="transparent" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" clearable />
        </view>

        <view class="tableType1">
          <u-row>
            <u-col span="1.5">
              <view>序号</view>
            </u-col>
            <u-col span="3">
              <view>建筑编号</view>
            </u-col>
            <u-col span="3">
              <view>建筑名称</view>
            </u-col>
            <u-col span="4.5">
              <view>建筑地址</view>
            </u-col>
          </u-row>
          <u-row v-for="(co, index) in dataList2" :key="index">
            <u-col span="1.5">
              <view>{{ index + 1 }}</view>
            </u-col>
            <u-col span="3">
              <view>{{ co.buildNum }}</view>
            </u-col>
            <u-col span="3">
              <view>{{ co.buildName }}</view>
            </u-col>
            <u-col span="4.5">
              <view>{{ co.address }}</view>
            </u-col>
          </u-row>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
import { useStores, commonStores } from "@/store/modules/index";

import { facilityInfo, deviceInfo, buildInfo } from "@/api/business/fireIot/facilitiesManage.js";

const { proxy } = getCurrentInstance();

const id = ref(undefined);
const deviceId = ref(undefined);
const buildNum = ref(undefined);
const dataArray = ref({});
const dataList = ref([
  { title: "设施类型", value: "" },
  { title: "设施编号", value: "" },
  { title: "设施位置", value: "" },
  { title: "创建时间", value: "" },
]);

const dataList1 = ref([]);
const dataList2 = ref([]);

/**
 * @页面初始化
 */
function init() {
  facilityInfo({ id: id.value }).then((requset) => {
    if (requset.status === "SUCCESS") {
      dataArray.value = requset.data[0];
      dataList.value[1].value = requset.data[0].facilityNum ? requset.data[0].facilityNum : "无";
      dataList.value[2].value = requset.data[0].address ? requset.data[0].address : "无";
      dataList.value[3].value = requset.data[0].createTime ? requset.data[0].createTime.replace("T", " ") : requset.data[0].createTime;
    }
  });

  deviceInfoApi();
  buildInfoApi();
}

/**
 * @设施详情关联设备接口请求
 * @api接口请求
 */
function deviceInfoApi() {
  deviceInfo({ id: id.value, deviceId: deviceId.value, current: 1, size: 1000 }).then((requset) => {
    if (requset.status === "SUCCESS") {
      dataList1.value = requset.data.records;
    }
  });
}

/**
 * @设施详情关联建筑接口请求
 * @api接口请求
 */
function buildInfoApi() {
  buildInfo({ id: id.value, buildNum: buildNum.value, current: 1, size: 1000 }).then((requset) => {
    if (requset.status === "SUCCESS") {
      dataList2.value = requset.data.records;
    }
  });
}

onReady(() => {});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

onLoad((options) => {
  if ("typeName" in options) {
    dataList.value[0].value = options.typeName;
  }
  if ("id" in options) {
    id.value = parseInt(options.id);
    init();
  }
});
</script>

<style lang="scss" scoped></style>