usky-web-mobile/src/pages/business/zhaf/xunJian/xunJian.vue

<template>
  <u-navbar :titleStyle="{ color: '#fff' }" :autoBack="true" title="巡检" :placeholder="true" :safeAreaInsetTop="true" :bgColor="proxy.$settingStore.themeColor.color">
    <template #left>
      <view class="u-navbar__content__left__item">
        <u-icon name="arrow-left" size="20" color="#fff"></u-icon>
      </view>
    </template>
  </u-navbar>

  <oa-scroll
    customClass="scroll-height"
    :customStyle="{ height: `calc(100vh - (44px + ${proxy.$settingStore.StatusBarHeight} + ${proxy.$settingStore.tabBarHeight}))` }"
    :refresherLoad="false"
    :refresherEnabled="false"
    :refresherEnabledTitle="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view class="p10">
        <!-- 图表 -->
        <view class="bg-white p5">
          <chart :currentDateList="currentDateList"></chart>
        </view>
        <!-- 图表 end-->

        <!-- 宫格列表 -->
        <view class="bg-white mt10">
          <view class="cu-list grid col-4 no-border" style="padding-top: 0.3125rem">
            <view class="cu-item justify-center align-center" v-for="(item, index) in inspectList" :key="index" @tap="navItemClick(item.redirectUrl, item.id)">
              <image :src="item.imgUrl" style="width: 40px; height: 40px"></image>
              <view class="cu-tag badge" v-if="item.num != 0">
                <block v-if="item.num != 0">{{ item.num > 99 ? "99+" : item.num }}</block>
              </view>
              <text style="font-size: 14px">{{ item.title }}</text>
            </view>
          </view>
        </view>
        <!-- 宫格列表 end -->
      </view>
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
import { ref, reactive, computed, onMounted, getCurrentInstance, toRefs, inject } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { appPlanStatistics } from "@/api/business/zhaf/xunJian/index.js";
/*----------------------------------组件引入-----------------------------------*/
import chart from "./components/chart.vue";
/*----------------------------------store引入-----------------------------------*/
import { xunJianStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const commonStore = commonStores(); //全局公共Store
const xunJianStore = xunJianStores(); //全局变量值Store
/*----------------------------------变量声明-----------------------------------*/
const inspectList = proxy.$constData.xunJianList; //九宫格json数据

const currentDate = proxy.$dayjs().format("YYYY-MM-DD");
const currentDateList = ref([]);

function navItemClick(url, id) {
  if (url) {
    if (id == 1) {
      xunJianStore.planTabs = 0;
    } else if (id == 2) {
      xunJianStore.planTabs = 1;
    }
    proxy.$tab.redirectTo(url);
  } else {
    uni.showModal({
      title: "Tips",
      content: "此模块开发中~",
      showCancel: false,
      success: function (res) {
        if (res.confirm) {
        } else if (res.cancel) {
        }
      },
    });
  }
}

/**
 * @ehcarts
 * @api接口请求
 */
async function echartsApi() {
  appPlanStatistics({
    currentDate: currentDate,
  }).then((res) => {
    if (res.status == "SUCCESS") {
      currentDateList.value = [res.data];
    } else {
    }
  });
}

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

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

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