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

<template>
  <oa-scroll
    customClass="scroll-height"
    :refresherLoad="false"
    :refresherLoadTitle="false"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @refresh="refresh"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view class="flex padding-tb-sm bg-white">
        <view class="padding-lr-sm text-center" style="width: 50%">设施类型：{{ typeNum || 0 }}</view>
        <view class="divider-default"></view>
        <view class="padding-lr-sm text-center" style="width: 50%">设施总数：{{ 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">
        <view class="margin-right-sm" style="margin-top: auto; margin-bottom: auto" @click="handleToDevice(data.id, data.typeName)">
          <image style="width: 40px" :src="data.typeImg ? data.typeImg : '/static/images/404.png'" mode="widthFix"></image>
        </view>

        <view style="width: 100%" @click="handleToDevice(data.id, data.typeName)">
          <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 || 0 }}）</view>
          </view>
          <view>
            <view class="flex">
              <view style="font-size: 14px; width: 33.33%">正常：{{ data.normalFacilityNum || 0 }}</view>
              <view style="font-size: 14px; width: 33.33%">维修：{{ data.upkeepFacilityNum || 0 }}</view>
              <view style="font-size: 14px; width: 33.33%">关闭：{{ data.closeFacilityNum || 0 }}</view>
            </view>
          </view>
        </view>

        <view style="margin-top: auto; margin-bottom: auto" @click="handleToMap(data.typeCode)">
          <view class="iconfont ucicon-app-map icon" :style="{ color: proxy.$settingStore.themeColor.color, fontSize: '22px' }"></view>
        </view>
      </view>
    </template>
  </oa-scroll>

  <view class="app-scan-fixed">
    <u-image width="67" height="67" src="@/static/images/add.png" shape="circle" @tap="handleToPage()"></u-image>
  </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 { baseFacilityType } from "@/api/business/fireIot/facilitiesManage.js";

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({
    pageNum: 1,
    pageSize: 20000,
  }).then((requset) => {
    if (requset.status === "SUCCESS") {
      if (requset.data.length > 0) {
        dataList.value = requset.data[0].baseGgpFacilityTypeNumVO;
        typeNum.value = requset.data[0].typeNum;
        facilityNum.value = requset.data[0].facilityNum;
      }
    }
  });
}

/**
 * @scrollView刷新数据
 */
function refresh() {
  init();
}

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

/**
 * @设施地图查看
 */
function handleToMap(typeCode) {
  proxy.$tab.navigateTo(`/pages/business/fireIot/facilitiesManage/mapFacilitiesView?typeCode=${typeCode}`);
}

/**
 * @设施地图采集
 */
function handleToPage() {
  proxy.$tab.navigateTo(`/pages/business/fireIot/facilitiesGather/index`);
}

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

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

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