usky-web-mobile/src/pages/business/fireIot/facilitiesView/index.vue

<template>
  <scroll-view class="scroll-height" :scroll-y="true" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
    <view class="flex padding-tb-sm bg-white">
      <view class="padding-lr-sm text-center" style="width: 50%">设施类型：{{ typeNum ? typeNum : 0 }}</view>
      <view class="divider-default"></view>
      <view class="padding-lr-sm text-center" style="width: 50%">设施总数：{{ facilityNum ? facilityNum : 0 }}</view>
    </view>

    <view class="flex bg-white margin-lr-sm margin-top-sm padding-sm shadow-default radius" v-for="(data, index) in dataList" :key="index" @click="handleToDevice(data.id, data.typeName)">
      <view class="margin-right-sm" style="margin-top: auto; margin-bottom: auto">
        <image style="width: 40px; height: 40px" :src="data.typeImg ? data.typeImg : '/static/images/404.png'" mode="aspectFill"></image>
      </view>

      <view style="width: 100%">
        <view class="flex margin-bottom-xl">
          <view class="text-dfl text-bold">{{ data.typeName }}</view>
          <view style="font-size: 14px; margin-top: auto; margin-right: auto">（{{ data.typeFacilityNum ? data.typeFacilityNum : 0 }}）</view>
          <view style="font-size: 14px; margin-top: auto" :style="{ color: proxy.$settingStore.themeColor.color }">查看地图</view>
        </view>
        <view>
          <view class="flex">
            <view style="font-size: 14px; width: 33.33%">正常：{{ data.normalFacilityNum ? data.normalFacilityNum : 0 }}</view>
            <view style="font-size: 14px; width: 33.33%">维修：{{ data.upkeepFacilityNum ? data.upkeepFacilityNum : 0 }}</view>
            <view style="font-size: 14px; width: 33.33%">关闭：{{ data.closeFacilityNum ? data.closeFacilityNum : 0 }}</view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
import { ref, reactive, computed, onMounted, getCurrentInstance, toRefs, inject } from "vue";
import { xunJianStores, publicStores } from "@/store/modules/index";

import json from "@/static/js/json.js";

import { baseFacilityType } from "@/api/business/fireIot/facilitiesView/index";

const publicStore = publicStores(); //全局公共Store
const xunJianStore = xunJianStores(); //全局变量值Store

const { proxy } = getCurrentInstance();

const typeNum = ref(0);
const facilityNum = ref(0);
const dataList = ref([]);

/**
 * @页面初始化
 */
function init() {
  baseFacilityType().then((requset) => {
    if (requset.status === "SUCCESS") {
      dataList.value = requset.data[0].baseGgpFacilityTypeNumVO;
      typeNum.value = requset.data[0].typeNum;
      facilityNum.value = requset.data[0].facilityNum;
    }
  });
}

/**
 * @设施详情列表跳转点击事件
 */
function handleToDevice(id, typeName) {
  proxy.$tab.navigateTo(`/pages/business/fireIot/facilitiesView/facilitiesDetailsList?id=${id}&typeName=${typeName}`);
}

onLoad(() => {
  init();
});

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

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