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

<template>
  <oa-scroll
    customClass="bg-white scroll-height"
    :pageSize="pageSize"
    :total="total"
    :isSticky="false"
    :refresherLoad="true"
    :refresherLoadTitle="false"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @load="load"
    @refresh="refresh"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.type"
  >
    <template #default>
      <view class="alarmManage"  style="border-top:1px solid rgba(0,0,0,.1)">
        <u-grid :border="true">
          <u-grid-item v-for="(base, index) in dataList" :key="index" @click="handleToDetails(base.productCode, base.productName)">
            <u-badge type="primary" max="9999" :value="base.total" :showZero="true" :absolute="true" :offset="[10, 10, 0, 0]"></u-badge>
            <image class="mb15 mt35" style="width: 40px; height: 40px" :src="base.typeImg" mode="aspectFill"></image>
            <text class="mb15 grid-text text-ellipsis">{{ base.productName }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </template>
  </oa-scroll>
</template>

<script setup>
import { onReady, onLoad, onShow, onNavigationBarButtonTap, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance } from "vue";
import { useStores, commonStores } from "@/store/modules/index";

import { dmpProductInfo, baseAlarmTypeList } from "@/api/business/fireIot/alarmManage.js";

const { proxy } = getCurrentInstance();

const dataList = ref([]);
const pageSize = ref(20);
const current = ref(1);
const total = ref(0);

/**
 * @页面初始化
 */
function init() {
  baseAlarmTypeList({ productName: "", current: current.value, size: pageSize.value }).then((requset) => {
    if (requset.status === "SUCCESS") {
      dmpProductInfo({ current: current.value, size: 2000 }).then((requset1) => {
        if (requset1.status === "SUCCESS") {
          requset.data.records.forEach((e) => {
            requset1.data.records.forEach((el) => {
              if (e.productCode === el.productCode) {
                e.typeImg = el.typeImg ? el.typeImg : "/static/images/404.png";
              }
            });
          });

          dataList.value = requset.data.records;
          total.value = requset.data.total;
        }
      });
    }
  });
}

function handleToDetails(productCode, productName) {
  proxy.$tab.navigateTo(`/pages/business/fireIot/alarmManage/alarmDetailsList/index?productCode=${productCode}&productName=${productName}`);
}

/**
 * @scrollView加载数据
 */
function load() {
  pageSize.value += 10;
  init();
}

/**
 * @scrollView刷新数据
 */
function refresh() {
  pageSize.value = 20;
  init();
}

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

  init();
});
</script>