yyb
2026-05-22 552ec6b7d8ccc56c379da195fc6c9c74312b1070
src/pages/index.vue
@@ -3,32 +3,58 @@
    <scroll-view class="scroll" scroll-y>
      <!-- 顶部 Banner:放入滚动区域,随页面一起滚动,不固定在顶部 -->
      <view class="hero-section">
        <view class="bg-img">
          <view class="hero-content">
            <!-- 预留:如后续需要可在此放 logo 或简短提示 -->
        <view class="hero-banner">
          <view class="hero-top">
            <view class="hero-copy">
              <view class="hero-badge">经营看板</view>
              <text class="hero-title">{{ heroTitle }}</text>
              <text class="hero-subtitle">{{ heroSubtitle }}</text>
              <view class="hero-meta">
                <text
                  v-for="item in heroMetaItems"
                  :key="item"
                  class="hero-meta-item"
                >
                  {{ item }}
                </text>
              </view>
            </view>
            <view class="hero-avatar">
              <text class="hero-avatar-text">{{ heroInitial }}</text>
            </view>
          </view>
          <view class="hero-wave"></view>
          <view class="hero-panels">
            <view
              v-for="item in heroMetrics"
              :key="item.label"
              class="hero-panel"
            >
              <text class="hero-panel-label">{{ item.label }}</text>
              <text class="hero-panel-value">{{ item.value }}</text>
              <text class="hero-panel-hint">{{ item.hint }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 快捷入口 -->
      <view class="quick-section">
      <view v-if="quickTools.length" class="quick-section">
        <up-grid :border="false" col="4">
          <up-grid-item
            v-for="item in quickTools"
            :key="item.label"
            @click="handleQuickTool(item)"
          >
            <view class="quick-icon" :style="{ background: item.bgColor }">
              <image :src="item.icon" class="quick-icon-img" mode="aspectFit" />
            <view class="icon-container">
              <image :src="item.icon" class="item-icon" mode="aspectFit" />
            </view>
            <text class="quick-text">{{ item.label }}</text>
            <text class="item-label">{{ item.label }}</text>
          </up-grid-item>
        </up-grid>
      </view>
      <!-- 数据总览 -->
      <view class="section">
      <view v-if="hasOverviewSection" class="section">
        <view class="section-header">
          <view class="section-title">
            <view class="title-bar" />
@@ -41,7 +67,7 @@
        </view>
        <view v-show="overviewExpanded" class="overview">
          <view class="overview-card sales">
          <view v-if="canShowSalesOverview" class="overview-card sales">
            <view class="card-left">
              <text class="card-title">销售数据</text>
              <view class="card-metrics">
@@ -55,10 +81,9 @@
                </view>
              </view>
            </view>
            <image class="card-icon" :src="imgSales" mode="widthFix" />
          </view>
          <view class="overview-card purchase">
          <view v-if="canShowPurchaseOverview" class="overview-card purchase">
            <view class="card-left">
              <text class="card-title">采购数据</text>
              <view class="card-metrics">
@@ -72,10 +97,9 @@
                </view>
              </view>
            </view>
            <image class="card-icon" :src="imgPurchase" mode="widthFix" />
          </view>
          <view class="overview-card stock">
          <view v-if="canShowStockOverview" class="overview-card stock">
            <view class="card-left">
              <text class="card-title">库存数据</text>
              <view class="card-metrics">
@@ -89,13 +113,12 @@
                </view>
              </view>
            </view>
            <image class="card-icon" :src="imgStock" mode="widthFix" />
          </view>
        </view>
      </view>
      <!-- 客户合同金额分析 -->
      <view class="section">
      <view v-if="canShowContractAnalysis" class="section">
        <view class="section-header">
          <view class="section-title">
            <view class="title-bar" />
@@ -139,60 +162,43 @@
          </view>
          <view class="list-row">
            <swiper
              class="customer-swiper"
              :current="customerSwiperIndex"
              :indicator-dots="false"
              :autoplay="false"
              :circular="false"
              @change="onCustomerSwiperChange"
            >
              <swiper-item v-for="(page, pIdx) in customerPages" :key="pIdx">
                <view class="customer-page">
                  <view v-for="item in page" :key="item.key" class="customer-item">
                    <view class="customer-row">
                      <view class="customer-name">
                        <image
                          v-if="item.rank === 1"
                          class="rank-icon"
                          :src="imgNum1"
                          mode="heightFix"
                        />
                        <image
                          v-else-if="item.rank === 2"
                          class="rank-icon"
                          :src="imgNum2"
                          mode="heightFix"
                        />
                        <image
                          v-else-if="item.rank === 3"
                          class="rank-icon"
                          :src="imgNum3"
                          mode="heightFix"
                        />
                        <text class="name-text">{{ item.name }}</text>
                      </view>
                      <view class="customer-rate">
                        <text class="rate-label">占比</text>
                        <text class="rate-value">{{ item.rateText }}</text>
                      </view>
                      <view class="amount">
                        <text class="amount-num">{{ item.valueText }}</text>
                        <text class="amount-unit">元</text>
                      </view>
            <scroll-view class="customer-scroll" scroll-y :show-scrollbar="false">
              <view class="customer-page">
                <view v-for="item in contractRawList" :key="item.key" class="customer-item">
                  <view class="customer-row">
                    <view class="customer-name">
                      <image
                        v-if="item.rank === 2"
                        class="rank-icon"
                        :src="imgNum1"
                        mode="heightFix"
                      />
                      <image
                        v-else-if="item.rank === 3"
                        class="rank-icon"
                        :src="imgNum2"
                        mode="heightFix"
                      />
                      <image
                        v-else-if="item.rank === 1"
                        class="rank-icon"
                        :src="imgNum3"
                        mode="heightFix"
                      />
                      <text class="name-text">{{ item.name }}</text>
                    </view>
                    <view class="customer-rate">
                      <text class="rate-label">占比</text>
                      <text class="rate-value">{{ item.rateText }}</text>
                    </view>
                    <view class="amount">
                      <text class="amount-num">{{ item.valueText }}</text>
                      <text class="amount-unit">元</text>
                    </view>
                  </view>
                </view>
              </swiper-item>
            </swiper>
            <view v-if="customerPages.length > 1" class="dots">
              <view
                v-for="i in customerPages.length"
                :key="i"
                :class="['dot', customerSwiperIndex === i - 1 ? 'active' : '']"
              />
            </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
@@ -200,46 +206,48 @@
      <view class="bottom-space" />
    </scroll-view>
    <DownloadProgressMask />
  </view>
</template>
<script setup>
import { computed, onMounted, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { analysisCustomerContractAmounts, getBusiness } from "@/api/viewIndex";
import { createVersionUpgradeChecker } from "@/utils/versionUpgrade";
import DownloadProgressMask from "@/components/DownloadProgressMask.vue";
import useUserStore from "@/store/modules/user";
const imgSales = "/static/images/index/xiaoshoushuju.png";
const imgPurchase = "/static/images/index/caigoushuju.png";
const imgStock = "/static/images/index/kucunshuju.png";
const imgNum1 = "/static/images/index/num1.png";
const imgNum2 = "/static/images/index/num2.png";
const imgNum3 = "/static/images/index/num3.png";
const quickTools = [
const userStore = useUserStore();
const quickToolSource = [
  {
    label: "生产报工",
    icon: "/static/images/icon/shengchanbaogong@2x.png",
    bgColor: "linear-gradient(135deg,#3b82f6,#2563eb)",
    route: "/pages/productionManagement/productionReport/index",
    icon: "/static/images/icon/shengchanbaogong.svg",
    action: "scan",
  },
  {
    label: "设备巡检",
    icon: "/static/images/icon/xunjianshangchuan@2x.png",
    bgColor: "linear-gradient(135deg,#22c55e,#16a34a)",
    icon: "/static/images/icon/xunjianshangchuan.svg",
    route: "/pages/inspectionUpload/index",
  },
  {
    label: "设备保养",
    icon: "/static/images/icon/shbeibaoyang@2x.png",
    bgColor: "linear-gradient(135deg,#f97316,#ea580c)",
    icon: "/static/images/icon/shebeibaoyang.svg",
    route: "/pages/equipmentManagement/upkeep/index",
  },
  {
    label: "设备报修",
    icon: "/static/images/icon/shbeibaoxiu@2x.png",
    bgColor: "linear-gradient(135deg,#a855f7,#7c3aed)",
    icon: "/static/images/icon/shebeibaoxiu.svg",
    route: "/pages/equipmentManagement/repair/index",
  },
];
const quickTools = ref([...quickToolSource]);
const allowedMenuTitles = ref(new Set());
const isCanvas2d = ref(false);
@@ -251,11 +259,35 @@
// 客户合同金额分析:无需筛选项(按接口默认返回展示)
const { triggerVersionCheck } = createVersionUpgradeChecker({ logPrefix: "[version-index]" });
function toggleOverview() {
  overviewExpanded.value = !overviewExpanded.value;
}
function handleQuickTool(item) {
  if (item?.action === "scan") {
    // 生产报工 - 调用扫码
    uni.scanCode({
      success: (res) => {
        console.log("扫码结果:", res);
        // 解析扫码结果并跳转到生产报工页面
        try {
          const scanResult = JSON.parse(res.result);
          uni.navigateTo({
            url: `/pages/productionManagement/productionReport/index?orderRow=${encodeURIComponent(JSON.stringify(scanResult))}`
          });
        } catch (e) {
          console.error("扫码结果解析失败:", e);
          uni.showToast({ title: "无效的二维码", icon: "none" });
        }
      },
      fail: (err) => {
        console.error("扫码失败:", err);
      }
    });
    return;
  }
  if (!item?.route) return;
  uni.navigateTo({ url: item.route });
}
@@ -264,6 +296,125 @@
  uni.showToast({ title: "更多功能待接入", icon: "none" });
}
function filterQuickToolsByRoutes() {
  const routers = userStore.routers || [];
  if (!routers || routers.length === 0) {
    allowedMenuTitles.value = new Set();
    quickTools.value = [...quickToolSource];
    return;
  }
  const titles = new Set();
  const collectMenuTitles = (routes) => {
    if (!Array.isArray(routes)) return;
    routes.forEach((route) => {
      if (route.meta && route.meta.title) {
        titles.add(route.meta.title);
      }
      if (route.children && route.children.length > 0) {
        collectMenuTitles(route.children);
      }
    });
  };
  collectMenuTitles(routers);
  allowedMenuTitles.value = titles;
  quickTools.value = quickToolSource.filter((item) =>
    titles.has(item.label)
  );
}
function hasAnyPermission(titles) {
  const titleSet = allowedMenuTitles.value;
  if (!titleSet || titleSet.size === 0) return true;
  return titles.some((title) => titleSet.has(title));
}
const canShowSalesOverview = computed(() => hasAnyPermission(["销售台账"]));
const canShowPurchaseOverview = computed(() => hasAnyPermission(["采购台账"]));
const canShowStockOverview = computed(() => hasAnyPermission(["库存管理"]));
const hasOverviewSection = computed(
  () =>
    canShowSalesOverview.value ||
    canShowPurchaseOverview.value ||
    canShowStockOverview.value
);
const canShowContractAnalysis = computed(() =>
  hasAnyPermission(["销售台账", "客户档案", "客户往来"])
);
const userDisplayName = computed(
  () => userStore.nickName
);
const heroInitial = computed(() => userDisplayName.value.slice(0, 1).toUpperCase());
const heroTitle = computed(() => `你好,${userDisplayName.value}`);
const heroSubtitle = computed(
  () => userStore.currentFactoryName || "当前账号已进入业务首页"
);
const heroMetaItems = computed(() => {
  const items = [];
  if (userStore.roleName) items.push(userStore.roleName);
  if (userStore.currentLoginTime) items.push(`登录于 ${userStore.currentLoginTime}`);
  if (!items.length) items.push("当前业务概览");
  return items;
});
const visibleSectionCount = computed(() => {
  let count = 0;
  if (quickTools.value.length > 0) count += 1;
  if (hasOverviewSection.value) count += 1;
  if (canShowContractAnalysis.value) count += 1;
  return count;
});
const heroMetrics = computed(() => {
  const items = [];
  if (canShowSalesOverview.value) {
    items.push({
      label: "销售",
      value: overviewCards.value.sales.today,
      hint: "本月营业额",
    });
  }
  if (canShowPurchaseOverview.value) {
    items.push({
      label: "采购",
      value: overviewCards.value.purchase.today,
      hint: "本月采购额",
    });
  }
  if (canShowStockOverview.value) {
    items.push({
      label: "库存",
      value: overviewCards.value.stock.today,
      hint: "当前库存量",
    });
  }
  if (canShowContractAnalysis.value && items.length < 3) {
    items.push({
      label: "合同",
      value: contractSummaryView.value.sumText,
      hint: "客户合同额",
    });
  }
  if (items.length < 3) {
    items.push({
      label: "快捷",
      value: String(quickTools.value.length),
      hint: "可用入口",
    });
  }
  if (items.length < 3) {
    items.push({
      label: "模块",
      value: String(visibleSectionCount.value),
      hint: "可见板块",
    });
  }
  return items.slice(0, 3);
});
function getByPath(obj, path) {
  if (!obj || !path) return undefined;
@@ -388,19 +539,6 @@
  return { series: [{ data }] };
});
const customerSwiperIndex = ref(0);
function onCustomerSwiperChange(e) {
  customerSwiperIndex.value = e.detail?.current || 0;
}
const customerPages = computed(() => {
  const list = Array.isArray(contractRawList.value) ? contractRawList.value : [];
  const pageSize = 2;
  const pages = [];
  for (let i = 0; i < list.length; i += pageSize) pages.push(list.slice(i, i + pageSize));
  return pages.length ? pages : [[]];
});
function normalizeContractList(raw) {
  const rows = Array.isArray(raw?.item) ? raw.item : [];
@@ -419,7 +557,7 @@
        rateText: `${formatPlain(rate)}%`,
      };
    })
    .sort((a, b) => (b.rate || 0) - (a.rate || 0))
    .sort((a, b) => (b.value || 0) - (a.value || 0))
    .map((it, index) => ({ ...it, rank: index + 1 }));
  return mapped;
@@ -428,7 +566,13 @@
async function loadHome() {
  chartReady.value = false;
  try {
    const [bRes, cRes] = await Promise.all([getBusiness(), analysisCustomerContractAmounts()]);
    const businessPromise = hasOverviewSection.value
      ? getBusiness()
      : Promise.resolve({ data: {} });
    const contractPromise = canShowContractAnalysis.value
      ? analysisCustomerContractAmounts()
      : Promise.resolve({ data: { item: [], sum: "0", chain: "0", yny: "0" } });
    const [bRes, cRes] = await Promise.all([businessPromise, contractPromise]);
    businessRaw.value = bRes?.data || {};
    const cData = cRes?.data || {};
    contractSummary.value = {
@@ -441,7 +585,6 @@
    contractSummary.value = { sum: "0", chain: "0", yny: "0" };
    contractRawList.value = normalizeContractList({ item: [] });
  } finally {
    customerSwiperIndex.value = 0;
    chartReady.value = true;
  }
}
@@ -453,7 +596,22 @@
  } catch (e) {
    isCanvas2d.value = false;
  }
  loadHome();
  triggerVersionCheck("onMounted");
  userStore
    .getRouters()
    .then(() => {
      filterQuickToolsByRoutes();
      loadHome();
    })
    .catch(() => {
      filterQuickToolsByRoutes();
      loadHome();
    });
});
onShow(() => {
  triggerVersionCheck("onShow");
  filterQuickToolsByRoutes();
});
</script>
@@ -509,66 +667,169 @@
   }
}
.hero-section {
   margin: 0 12px;
   margin-bottom: 12px;
   animation: fadeInUp 0.6s ease-out 0.1s both;
  margin: 0 14px 12px;
  animation: fadeInUp 0.6s ease-out 0.1s both;
}
.bg-img {
   width: 100%;
   height: 9.25rem;
   background-image: url("../static/images/banner/backview.png");
   background-size: cover;
   border-radius: 14px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 10px 26px rgba(17, 24, 39, 0.08);
   &::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: conic-gradient(
            from 0deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent,
            rgba(255, 255, 255, 0.05),
            transparent
      );
      animation: rotate 20s linear infinite;
   }
   &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 7.5rem;
      height: 7.5rem;
      background: radial-gradient(
            circle,
            rgba(255, 255, 255, 0.15) 0%,
            transparent 70%
      );
      border-radius: 50%;
      transform: translate(2.5rem, -2.5rem);
   }
.hero-banner {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 18px 16px 16px;
  min-height: 182px;
  background:
    linear-gradient(135deg, rgba(22, 74, 170, 0.92) 0%, rgba(33, 115, 185, 0.88) 48%, rgba(18, 156, 144, 0.82) 100%),
    url("/static/images/banner/backview.png") center right / cover no-repeat;
  box-shadow: 0 14px 34px rgba(29, 78, 137, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.18);
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(120deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.02) 32%, rgba(255, 255, 255, 0) 60%),
      radial-gradient(circle at top right, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 34%);
    pointer-events: none;
  }
  &::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -34px;
    width: 156px;
    height: 156px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 72%);
    pointer-events: none;
  }
}
.hero-content {
   position: relative;
   z-index: 1;
   padding: 14px 14px 18px 14px;
   margin: 0 12px;
   height: 100%;
.hero-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.hero-wave {
   height: 2.75rem;
.hero-copy {
  min-width: 0;
  flex: 1;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 600;
}
.hero-title {
  display: block;
  margin-top: 12px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}
.hero-subtitle {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.45;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.hero-meta-item {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.86);
  font-size: 11px;
  line-height: 18px;
}
.hero-avatar {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.hero-avatar-text {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
}
.hero-panels {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.hero-panel {
  min-width: 0;
  padding: 12px 10px;
  border-radius: 14px;
  background: rgba(11, 25, 48, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
}
.hero-panel-label {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  line-height: 1.2;
}
.hero-panel-value {
  display: block;
  margin-top: 8px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-panel-hint {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  line-height: 1.2;
}
.safe-top {
@@ -576,7 +837,7 @@
}
.scroll {
  height: calc(100vh - env(safe-area-inset-top) - 10px);
  min-height: calc(100vh - env(safe-area-inset-top) - 10px);
}
.section {
@@ -588,27 +849,47 @@
  padding: 6px 0 2px;
}
.quick-icon {
  width: 44px;
  height: 44px;
.icon-container {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
  margin-bottom: 0.375rem;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  animation: fadeInScale 0.5s ease both;
}
.quick-icon-img {
  width: 26px;
  height: 26px;
.item-icon {
  width: 36px;
  height: 36px;
  display: block;
}
.quick-text {
  margin-top: 6px;
.icon-container:active {
  transform: scale(0.97);
}
.item-label {
  font-size: 12px;
  color: #555555;
  text-align: center;
  white-space: nowrap;
  display: block;
  line-height: 1.4;
  font-weight: 500;
  margin-top: 4px;
  margin-bottom: 6px;
}
:deep(.up-grid-item) {
  padding: 6px 0;
}
:deep(.up-grid-item__content) {
  padding: 0;
}
.section-header {
@@ -686,13 +967,16 @@
}
.overview-card.sales {
  background: linear-gradient(135deg, #e9fbff 0%, #d8fbff 100%);
  background: url("/static/images/index/xiaoshoushuju.png") no-repeat center center;
  background-size: cover;
}
.overview-card.purchase {
  background: linear-gradient(135deg, #fff4e7 0%, #ffe7ce 100%);
  background: url("/static/images/index/caigoushuju.png") no-repeat center center;
  background-size: cover;
}
.overview-card.stock {
  background: linear-gradient(135deg, #eaf0ff 0%, #dbe6ff 100%);
  background: url("/static/images/index/kucunshuju.png") no-repeat center center;
  background-size: cover;
}
.card-left {
@@ -807,9 +1091,6 @@
  gap: 8px;
}
.list-row {
  width: 100%;
}
.summary-chip {
  flex: 1;
  background: rgba(47, 107, 255, 0.06);
@@ -843,8 +1124,13 @@
  width: 100%;
}
.customer-swiper {
  height: 140px;
.list-row {
  width: 100%;
  margin-top: 6px;
}
.customer-scroll {
  height: 220px;
}
.customer-page {
@@ -852,6 +1138,7 @@
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
  padding-right: 4px;
}
.customer-item {
@@ -961,23 +1248,6 @@
  transform: translateY(1px);
}
.dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 6px;
}
.dot {
  width: 8px;
  height: 4px;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.35);
}
.dot.active {
  width: 14px;
  background: #2f6bff;
}
.bottom-space {
  height: 24px;
}
@@ -1031,4 +1301,15 @@
    color: #e9edf3;
  }
}
</style>
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
</style>