Merge branch 'dev_NEW_pro' into dev_天津_中兴实强

gaoluyang

3 天以前 0333d66e4b397c161c6a44ce1e2a121c2cc41082

 src/pages/index.vue

@@ -3,23 +3,42 @@
    <scroll-view class="scroll" scroll-y>
      <!-- 顶部 Banner：放入滚动区域，随页面一起滚动，不固定在顶部 -->
      <view class="hero-section">
        <view class="bg-img">
          <view class="hero-content">
            <view class="hero-ornaments">
              <view class="hero-glow glow-left" />
              <view class="hero-glow glow-right" />
              <view class="hero-mist mist-top" />
              <view class="hero-mist mist-bottom" />
              <view class="hero-curve curve-main" />
              <view class="hero-curve curve-sub" />
        <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"
@@ -35,7 +54,7 @@
      </view>

      <!-- 数据总览 -->
      <view class="section">
      <view v-if="hasOverviewSection" class="section">
        <view class="section-header">
          <view class="section-title">
            <view class="title-bar" />
@@ -48,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">
@@ -64,7 +83,7 @@
            </view>
          </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">
@@ -80,7 +99,7 @@
            </view>
          </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">
@@ -99,7 +118,7 @@
      </view>

      <!-- 客户合同金额分析 -->
      <view class="section">
      <view v-if="canShowContractAnalysis" class="section">
        <view class="section-header">
          <view class="section-title">
            <view class="title-bar" />
@@ -197,12 +216,15 @@
import { analysisCustomerContractAmounts, getBusiness } from "@/api/viewIndex";
import { createVersionUpgradeChecker } from "@/utils/versionUpgrade";
import DownloadProgressMask from "@/components/DownloadProgressMask.vue";
import useUserStore from "@/store/modules/user";

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.svg",
@@ -224,6 +246,8 @@
  //   route: "/pages/equipmentManagement/repair/index",
  // },
];
const quickTools = ref([...quickToolSource]);
const allowedMenuTitles = ref(new Set());

const isCanvas2d = ref(false);

@@ -272,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;
@@ -423,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 = {
@@ -448,11 +597,21 @@
    isCanvas2d.value = false;
  }
  triggerVersionCheck("onMounted");
  loadHome();
  userStore
    .getRouters()
    .then(() => {
      filterQuickToolsByRoutes();
      loadHome();
    })
    .catch(() => {
      filterQuickToolsByRoutes();
      loadHome();
    });
});

onShow(() => {
  triggerVersionCheck("onShow");
  filterQuickToolsByRoutes();
});
</script>

@@ -508,146 +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: 10.25rem;
   background:
      linear-gradient(135deg, rgba(234, 245, 255, 0.98) 0%, rgba(220, 239, 255, 0.94) 42%, rgba(244, 250, 255, 0.96) 100%),
      url("/static/images/banner/backview.png") center/cover no-repeat;
   border-radius: 18px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 12px 30px rgba(118, 154, 186, 0.16);
	
   &::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
         radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0) 28%),
         radial-gradient(circle at 84% 18%, rgba(191, 226, 255, 0.7) 0, rgba(191, 226, 255, 0) 26%),
         linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.16) 42%, rgba(206, 229, 247, 0.22) 100%);
      pointer-events: none;
   }
	
   &::after {
      content: "";
      position: absolute;
      left: 18%;
      bottom: -44px;
      width: 64%;
      height: 88px;
      background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 72%);
      border-radius: 50%;
      filter: blur(10px);
      pointer-events: none;
   }
.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: 16px 16px 14px;
   height: 100%;
   backdrop-filter: blur(2px);
.hero-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.hero-ornaments {
   position: relative;
   width: 100%;
   height: 100%;
.hero-copy {
  min-width: 0;
  flex: 1;
}

.hero-glow {
   position: absolute;
   border-radius: 50%;
   filter: blur(4px);
   background: radial-gradient(circle, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0) 72%);
   opacity: 0.9;
.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-glow.glow-left {
   left: -10px;
   top: 8px;
   width: 120px;
   height: 120px;
.hero-title {
  display: block;
  margin-top: 12px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.hero-glow.glow-right {
   right: -20px;
   top: 4px;
   width: 144px;
   height: 144px;
   background: radial-gradient(circle, rgba(207, 234, 255, 0.92) 0%, rgba(207, 234, 255, 0) 74%);
.hero-subtitle {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  line-height: 1.45;
}

.hero-mist {
   position: absolute;
   border-radius: 999px;
   background: linear-gradient(90deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.08));
   border: 1px solid rgba(255, 255, 255, 0.34);
   backdrop-filter: blur(10px);
   box-shadow: 0 10px 24px rgba(154, 190, 219, 0.14);
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.hero-mist.mist-top {
   left: 18px;
   top: 20px;
   width: 112px;
   height: 18px;
.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-mist.mist-bottom {
   left: 18px;
   top: 48px;
   width: 72px;
   height: 10px;
   opacity: 0.82;
.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-curve {
   position: absolute;
   border-radius: 999px;
   border: 2px solid rgba(255, 255, 255, 0.72);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.12));
   box-shadow:
      0 10px 26px rgba(154, 190, 219, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(10px);
.hero-avatar-text {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
}

.hero-curve.curve-main {
   right: 18px;
   bottom: 22px;
   width: 176px;
   height: 84px;
   transform: rotate(-9deg);
   border-top-left-radius: 90px;
   border-bottom-right-radius: 90px;
   opacity: 1;
.hero-panels {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.hero-curve.curve-sub {
   right: 96px;
   bottom: 60px;
   width: 104px;
   height: 40px;
   transform: rotate(-9deg);
   border-top-left-radius: 60px;
   border-bottom-right-radius: 60px;
   opacity: 0.9;
.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-wave {
   height: 1.1rem;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(244, 249, 253, 0.96) 100%);
   margin-top: -1px;
   position: relative;
.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 {