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

<template>
  <u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
    <u-tabs :list="tabsList" :current="tabsCurrent" @click="tabsClick" lineColor="#333" :activeStyle="{ color: '#333' }" :inactiveStyle="{ color: '#909399' }" :scrollable="false"></u-tabs>
  </u-sticky>

  <oa-scroll
    customClass=" scroll-height"
    :pageSize="pageSize"
    :total="total"
    :refresherLoad="true"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @load="load"
    @refresh="refresh"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view class="alarmDetailsList-container">
        <view class="menu-list margin-0">
          <view class="list-cell list-cell-arrow" v-for="(base, index) in dataList" :key="index" @click="handleToDetails(base)">
            <view class="menu-item-box" style="font-size: 13px; flex-flow: row wrap">
              <view style="min-width: 80%; margin-bottom: 5px; color: #909399"> {{ base.alarmTime }}</view>
              <view style="min-width: 20%; margin-bottom: 5px; color: #909399; text-align: right; padding-right: 15px"> {{ base.alarmGrade }}级</view>
              <view style="min-width: 80%; margin-bottom: 5px; color: #909399">{{ base.deviceName }}</view>
              <view style="min-width: 20%; margin-bottom: 5px; text-align: right; padding-right: 15px" :style="`color:${base.handleStatus == 1 ? '#16bf00' : 'red'}`">
                {{ base.handleStatus == 1 ? "已处理" : "未处理" }}
              </view>
              <view style="min-width: 50%; padding-right: 15px">{{ base.alarmContent }}</view>
            </view>
          </view>
        </view>
      </view>
    </template>
  </oa-scroll>
</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 { publicStores, useStores } from "@/store/modules/index";

import { baseAlarmList } from "@/api/business/fireIot/alarmManage.js";

const { proxy } = getCurrentInstance();
const publicStore = publicStores();

const tabsList = ref([
  {
    name: "全部",
    value: "",
  },
  {
    name: "未处理",
    value: 0,
  },
  {
    name: "已处理",
    value: 1,
  },
]);
const tabsCurrent = ref(0);

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

/**
 * @页面初始化
 */
function init() {
  selectListApi();
}

/**
 * @列表查询
 * @api接口查询
 */
function selectListApi() {
  baseAlarmList({
    productCode: productCode.value,
    handleStatus: tabsList.value[tabsCurrent.value].value,
    current: current.value,
    size: pageSize.value,
  }).then((requset) => {
    if (requset.status === "SUCCESS") {
      dataList.value = requset.data.records;
      total.value = requset.data.total;

      uni.setNavigationBarTitle({
        title: `${productName.value}（${total.value}）`,
      });
    }
  });
}

/**
 * @跳转详情事件
 */
function handleToDetails(e) {
  proxy.$tab.navigateTo(`/pages/business/fireIot/alarmManage/alarmDetails/index?deviceName=${e.deviceName}&alarmTime=${e.alarmTime}`);
}

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

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

/**
 * @tabs点击事件
 */
function tabsClick(e) {
  tabsCurrent.value = e.index;
  init();
}

onReady(() => {});

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

onLoad((options) => {
  if ("productName" in options) {
    productName.value = options.productName;
  }
  if ("productCode" in options) {
    productCode.value = options.productCode;
    init();
  }
});
</script>

<style lang="scss" scoped>
.alarmDetailsList-container {
}
</style>