JCSS / jcss-miniprogram

  <template>

    <view class="page-container">

      <!-- 加载页 -->

      <up-loading-page

          :loading="loading"

          loading-text="加载中..."
          color="#577ee3"

          zIndex="1000"

      ></up-loading-page>
  

      <!-- 蓝色装饰块 -->

      <view class="blue-decor-block" v-if="!loading">

        <text class="welcome-text u-line-1">你好{{ userInfo?.user?.nickname || '' }}</text>
        <text class="platform-name">蓟城山水全域智能运营管理平台</text>

      </view>

      <!-- 内容容器 -->

      <view class="content-wrap">

        <!-- 空状态 -->

        <u-empty

            v-if="!filteredModuleList.length && !loading"

            mode="permission"

        ></u-empty>
  

        <view class="" v-if="!userInfo?.user?.nickname">
          <text class="welcome-text u-line-1 " style="padding: 20px 0;text-align: center;">本小程序仅限特定服务人群使用，需验证账号后方可登录</text>
          <up-button
              class="login-btn"
              type="primary"
              size="large"
              @click="ToLoginPage"
              shape="circle"
          >
            前往登录
          </up-button>
        </view>

        <!-- 菜单卡片列表 -->

        <view class="menu-card-wrap">

          <up-card

              :title-size="14"
              :titleColor="'#000'"

              :border="false"
              :shadow="true"

              :head-style="{ fontWeight:'500' }"

              :foot-border-top="false"

              v-for="(parentModule, index) in filteredModuleList"

              :key="`$parentModule.id_${index}`"

              :title="parentModule.name"

              class="card-container"

          >

            <template #body>

              <view class="card-content">
                <view
                    v-for="(listItem, listIndex) in parentModule.children"
                    :key="listItem.id"
                    class="content-block"
                    @click="handleMenuClick(listItem)"

                >

                  <u-image
                      :src="listItem.icon"
                      mode="aspectFit"

                      width="48px"
                      height="48px"

                      lazy-load

                      radius="8px"

                      class="block-icon"
                  ></u-image>
                  <text class="grid-text">{{ listItem.name }}</text>
                </view>

              </view>
            </template>
          </up-card>

        </view>

  
        <!-- 工单统计模块 -->
        <view v-if="isInspectorGlobal" class="work-order-container">
          <view class="header-row">
            <view class="stat-title-main">工单统计</view>
            <view class="date-picker-wrap">
              <neo-datetime-pro
                v-model="dateRange"
                type="daterange"
                :clearable="false"
                placeholder="请选择日期范围"
                @confirm="handleDateConfirm"
                :max-date="maxDate"
                @popup-show="handlePopupShow"
                @popup-hide="handlePopupHide"
              />
            </view>
          </view>
  
          <up-tabs :list="tabList" @click="handleTabChange" lineWidth="50"></up-tabs>
  
          <!-- 空数据提示 -->
          <view class="empty-tip" v-if="isEmptyData">
            暂无统计数据
          </view>
  
          <!-- 图表+图例 左右布局区域 -->
          <view class="chart-wrap" v-else>
            <!-- 左侧图表 -->
            <view class="charts-box">
              <qiun-data-charts
                v-if="!isDatePickerOpen"
                type="ring"
                :opts="chartOpts"
                :chartData="chartData"
              />
            </view>
            <!-- 右侧图例：垂直排列、均分高度 + 点击事件 -->
            <view class="legend-wrap">
              <view
                class="legend-item"
                v-for="(item, idx) in tableData"
                :key="idx"
                @click="handleLegendClick(item)"
              >
                <view class="legend-color" :style="{backgroundColor: COLOR_POOL[idx % COLOR_POOL.length]}"></view>
                <text class="legend-text">{{ item.companyName }}</text>
              </view>
            </view>
          </view>
  
          <!-- 统计表格 -->
          <view class="stat-table" v-if="!isEmptyData">
            <view class="table-header">
              <text class="table-col">公司名称</text>
              <text class="table-col">工单量</text>
              <text class="table-col">已完成</text>
              <text class="table-col">进行中</text>
            </view>
            <view
              class="table-row"
              v-for="(row, idx) in tableData"
              :key="idx"
            >
              <view class="table-col">
                <view class="dot" :style="{backgroundColor: COLOR_POOL[idx % COLOR_POOL.length]}"></view>
                {{ row.companyName }}
              </view>
              <text class="table-col">{{ row.total }}</text>
              <text class="table-col">{{ row.finish }}</text>
              <text class="table-col"> {{ row.ongoing }}</text>
            </view>
          </view>
        </view>

      </view>
    </view>
  </template>
  

  <script setup lang="ts">

  import {ref, computed, reactive, watch} from 'vue';

  import {onShow} from '@dcloudio/uni-app';
  import {useUserStore} from '@/pinia/user';

  import globalConfig from '@/common/config/global';
  import cache from '@/common/utils/cache';

  import {timeFormat} from '@/uni_modules/uview-plus';
  import {iWorkOrderSummary} from "@/api/index/index";

  
  interface MenuItem {
    id: number;
    name: string;
    subtitle?: string;
    type: number;
    sort: number;
    parentId: number;
    icon: string;
    jumpUrl: string;
    miniAppId?: string;
    badgeText?: string;
    badgeColor?: string;
    statisticCount: number | null;
    hasStatistic: boolean;
    extra: any;
    children: MenuItem[];
  }

  // 接口返回结构定义
  interface IOrderSummaryItem {
    companyName: string;
    companyId?: string | number;
    total: number;
    finish: number;
    ongoing: number;
    percent: number;
  }
  interface IOrderSummaryRes {
    totalNum: string | number;
    legend: string[];
    percents: number[];
    table: IOrderSummaryItem[];
  }
  
  // ========== 基础变量 ==========

  const loading = ref(true);

  const userStore = useUserStore();

  const moduleList = ref<MenuItem[]>([]);

  const userInfo = ref<any>(cache.get(globalConfig.cache.userInfoKey) || userStore.userInfo || {});

  const isInspectorGlobal = ref(false);
  
  const dateRange = ref<string[]>([]);
  const maxDate = ref('');
  const isDatePickerOpen = ref(false);
  
  const activeTab = ref(0);
  const tabList = ref([
    { name: '部派工单' },
    { name: '子公司全量工单' }
  ]);
  
  // 颜色池，可随意增加颜色，自动循环复用
  const COLOR_POOL = ['#e80a0e', '#00f', '#0ff', '#EFD234', '#9c27b0'];
  
  // 接口返回业务数据
  const summaryData = reactive<IOrderSummaryRes>({
    totalNum: 0,
    legend: [],
    percents: [],
    table: []
  });
  
  // 计算属性：判断是否为空数据
  const isEmptyData = computed(() => {
    const num = Number(summaryData.totalNum);
    return num <= 0 || summaryData.table.length === 0;
  });
  const tableData = computed(() => summaryData.table);

  const filteredModuleList = computed(() => {
    return moduleList.value.filter(item => {

      return Array.isArray(item.children) && item.children.length > 0;
    });
  });
  

  // ========== uCharts 图表配置 ==========
  const showDataLabel = ref(true);
  const chartOpts = ref({
    rotate: false,
    rotateLock: false,
    color: COLOR_POOL,
    dataLabel: showDataLabel.value,
    enableScroll: false,
    legend: {
      show: false,
      position: "right",
      lineHeight: 25
    },
    title: {
      name: "工单总量",
      fontSize: 12,
      color: "#666666"
    },
    subtitle: {
      name: "0",
      fontSize: 16,
      color: "#7cb5ec"
    },
    extra: {
      ring: {
        ringWidth: 15,
        activeOpacity: 0.5,
        activeRadius: 20,
        offsetAngle: 0,
        labelWidth: 5,
        border: true,
        borderWidth: 1,
        borderColor: "#FFFFFF",
        linearType: ""
      }
    }
  });
  
  const chartData = ref<any>({});
  
  // 组装图表数据
  const setChartData = () => {
    const seriesData = summaryData.table.map((item, idx) => {
      const percent = summaryData.percents[idx] ?? 0
      return {
        name: item.companyName || '未知',
        value: percent
      };
    });
    chartData.value = { series: [{ data: seriesData }] };
    chartOpts.value.subtitle.name = String(Number(summaryData.totalNum));
    chartOpts.value.dataLabel = showDataLabel.value;
  };
  
  // ========== 请求工单统计接口 ==========
  const getWorkOrderSummary = async () => {
    if (!dateRange.value.length) return;
    const [beginTime, endTime] = dateRange.value;
    const queryType = activeTab.value === 0 ? '1' : '0';
  
    try {
      const res = await iWorkOrderSummary({
        queryType,
        beginTime,
        endTime
      });
  
      summaryData.totalNum = res.totalNum;
      summaryData.legend = res.legend || [];
      summaryData.percents = res.percents || [];
      summaryData.table = res.table || [];
  
      setChartData();
    } catch (err) {
      console.error('获取工单统计失败：', err);
      uni.showToast({ title: '数据加载失败', icon: 'none' });
      summaryData.totalNum = 0;
      summaryData.legend = [];
      summaryData.percents = [];
      summaryData.table = [];
      setChartData();
    }
  };
  
  // ========== 事件方法 ==========
  const handlePopupShow = () => {
    isDatePickerOpen.value = true;
  };
  const handlePopupHide = () => {
    isDatePickerOpen.value = false;
  };
  const handleDateConfirm = (val: string[]) => {
    dateRange.value = val;
    getWorkOrderSummary();
  };
  
  // Tab 切换
  const handleTabChange = (item: any) => {
    activeTab.value = item.index;
    console.log(activeTab.value);
    
    getWorkOrderSummary();
  };
  
  // 初始化默认日期
  const initDefaultDate = () => {
    const today = new Date();
    maxDate.value = timeFormat(today, 'yyyy-mm-dd');
  
    const thirtyDaysAgo = new Date(today);
    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
    dateRange.value = [
      timeFormat(thirtyDaysAgo, 'yyyy-mm-dd'),
      timeFormat(today, 'yyyy-mm-dd')
    ];
  };
  
  // 图例点击跳转工单页面
  const handleLegendClick = (item: IOrderSummaryItem) => {
    const [beginTime, endTime] = dateRange.value;
    const targetUrl = `/pages-sub/problem/regional-order-manage/list?companyId=${item.companyId}&companyName=${item.companyName}&beginTime=${beginTime}&endTime=${endTime}&queryType=${activeTab.value}`;
  
    uni.navigateTo({
      url: targetUrl,
      fail: () => {
        uni.showToast({ title: '跳转失败', icon: 'none' });
      }
    });
  };
  

  onShow(async () => {

    try {

      loading.value = true;

      userInfo.value = cache.get(globalConfig.cache.userInfoKey) || userStore.userInfo || {};

      const isLogin = () => {

        const token = cache.get(globalConfig.cache.tokenKey) || userStore.token;

        const userInfoVal = userInfo.value;

        return !!token && !!userInfoVal;

      };
  

      if (!isLogin()) {

        loading.value = false;

        return;
      }
  

      const rawMenuData = userStore.moduleListInfo || cache.get(globalConfig.cache.moduleListKey);

      moduleList.value = rawMenuData || [];

  
      // 支持两个角色查看工单统计
      const USER_ROLES = userStore.userInfo?.roles || [];
      isInspectorGlobal.value = USER_ROLES.includes('Inspector_global') || USER_ROLES.includes('Inspector_global_leader');
  //  isInspectorGlobal.value
      if(isInspectorGlobal.value){
        initDefaultDate();
        await getWorkOrderSummary();
      }
     
  

      loading.value = false;

    } catch (error) {
      console.error('获取菜单数据失败：', error);
      moduleList.value = [];

      loading.value = false;

    }

  });

  const ToLoginPage = () => {
    uni.reLaunch({
      url: '/pages/login/index',
      fail: (err) => {
        console.error('跳转登录页失败：', err);
        uni.showToast({ title: '跳转登录页异常', icon: 'none' });
      }
    });
  };

  const handleMenuClick = (item: MenuItem) => {
    if (!item.jumpUrl) {

      uni.showToast({ title: '暂无跳转链接', icon: 'none', duration: 2000 });

      return;

    }

    uni.navigateTo({
      url: item.jumpUrl,
      fail: (err) => {
        console.error('页面跳转失败：', err);

        uni.showToast({ title: '页面路径错误', icon: 'none', duration: 2000 });

      }
    });

  };

  
  const goToQuickWorkOrder = () => { };
  const showDatePicker = () => { };
  
  watch(showDataLabel, () => {
    chartOpts.value.dataLabel = showDataLabel.value;
  });

  </script>
  

  <style scoped lang="scss">

  .page-container {

    position: relative;
    min-height: 100vh;

  }

  .blue-decor-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    padding: 80px 15px 115px;

    background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat;
    background-size: 100% 100%;

    z-index: 1;

    color: #fff;

    text-align: left;

    .welcome-text {

      font-size: 16px;

      display: block;

      margin-bottom: 4px;

    }
  
    .platform-name {
      margin-bottom: 10px;

      font-size: 16px;

      display: block;

    }

  }

  .content-wrap {
    position: relative;
    z-index: 2;

    padding: 125px 0 0;

    display: flex;
    flex-direction: column;

    gap: 10px;

  }
  

  .menu-card-wrap {
    width: 100%;
  }
  

  .card-container {

    --u-card-content-padding: 0;

    border-radius: 4px;

    overflow: hidden;

  }
  

  .card-content {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

  }
  

  .content-block {

    width: calc((100% - 3 * 10px) / 4);

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 7px 0;
    border-radius: 4px;

    touch-action: manipulation;
    transition: background-color 0.2s;

  }

  .content-block:active {
    background-color: #e9ecef;
  }

  .block-icon {

    display: block;
    margin: 0 auto;

  }
  

  .grid-text {

    font-size: 13px;

    color: #1C1C1C;

    text-align: center;

    margin-top: 5px;

    display: block;

  }

  
  /* 工单模块 */
  .work-order-container {
    margin: 0 15px;
    background: #ffff;
    padding: 13px 15px;
  }
  
  .header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .stat-title-main {
    font-size: 16px;
    font-weight: 600;
    color: #000;
  }
  
  .date-picker-wrap {
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.2s;
    position: relative;
    z-index: 9999 !important;
    &:active {
      background-color: #f5f5f7;
    }
  }
  
  /* 空数据提示样式 */
  .empty-tip {
    text-align: center;
    padding: 60px 0;
    font-size: 14px;
    color: #999;
  }
  
  /* 图表+图例 左右布局核心样式 */
  .chart-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  
  /* 左侧图表容器 */
  .charts-box {
    width: 70%;
    height: 220px;
  }
  
  /* 右侧图例容器 */
  .legend-wrap {
    width: 30%;
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  
  
  /* 单个图例项 */
  .legend-item {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background-color 0.2s;
    &:active {
      background-color: #f0f0f0;
    }
  }
  
  .legend-color {
    /* 固定尺寸，禁止压缩 */
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 5px;
  }
  
  .legend-text {
    font-size: 13px;
    color: #333;
    /* 单行 + 溢出省略 */
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* 表格样式 */
  .stat-table {
    margin-top: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .table-header, .table-row {
    display: flex;
    align-items: center;
    padding: 10px 5px;
    border-bottom: 1px solid #eee;
    &:last-child {
      border-bottom: none;
    }
  }
  
  .table-header {
    background-color: #fafafa;
    font-weight: bold;
  }
  
  .table-col {
    flex: 1;
    text-align: center;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 表格圆点 */
  .dot {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
  }

  </style>