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

<template>
  <scroll-view scroll-x>
    <view class="padding-sm">
      <!-- 图表 -->
      <view class="section1 section bg-white padding-xs">
        <chart v-if="currentDateList.length > 0" :currentDateList="currentDateList"></chart>
      </view>
      <!-- 图表 end-->

      <!-- <view class="cu-list menu-avatar">
				<view class="cu-item deviceTypeItem" v-for="(item,index) in inspectList" :key="index"
					@tap="goRecordPage(index)">
					<view class="cu-avatar round">
						<image class="image-bg" :src=item.imgUrl />
					</view>
					<view class="content">
						<view class="title">{{item.title}}</view>
					</view>
					<view class="nav-right num">
						<view>
							<text class="icon iconfont margin-right-xs margin-left-lg">&#xe629;</text>
						</view>
					</view>
				</view>
			</view> -->

      <!-- 宫格列表 -->
      <view class="section2 section bg-white margin-top-sm">
        <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>
  </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 chart from "./components/echarts/chart.vue";
import json from "@/static/js/json.js";

import { appPlanStatistics } from "@/api/business/mhxf/xunJian/index.js";

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

const { proxy } = getCurrentInstance();

const inspectList = json.xunJianList; //九宫格json数据

const currentDate = publicStore.getDate().year + "-" + publicStore.getDate().month + "-" + publicStore.getDate().dates;
const currentDateList = ref([]);

function navItemClick(url, id) {
  if (url) {
    if (id == 1) {
      xunJianStore.planTabs = 0;
    } else if (id == 2) {
      xunJianStore.planTabs = 1;
    }

    uni.navigateTo({
      url: 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>