pms-app/pages/entry/index.vue

<template>
  <scroll-view class="entry-page" scroll-y>
    <view class="hero">
      <image class="hero-bg" src="/static/entry/bg.png" mode="widthFix" />
      <view class="hero-mask"></view>
      <view class="hero-content">
        <view class="status-row"></view>

        <view class="profile-row">
          <view class="avatar-wrap">
            <image
              style="
                width: 50px;
                height: 50px;
                background-color: transparent;
                border-radius: 50%;
              "
              :src="
                userInfo?.avatar ? userInfo?.avatar : '/static/user/avatar.png'
              "
            ></image>
          </view>
          <view class="profile-main">
            <view class="greeting">{{ greetingText }}，{{ displayName }}</view>
            <view class="project-pill">
              <text class="project-name">{{ projectName }}</text>
              <uni-icons type="down" size="13" color="#ffffff" />
            </view>
          </view>
          <view
            class="notice-wrap"
            @click="navigatorTo('/pages/message/index')"
          >
            <uni-badge :text="messageCount" absolute="rightTop" size="small">
              <view class="notice-button">
                <image
                  src="~@/static/home/message.png"
                  style="
                    width: 15px;
                    height: 15px;
                    background-color: transparent;
                  "
                  @click="navigatorTo('/pages/message/index')"
                />
              </view>
            </uni-badge>
          </view>
        </view>
      </view>
    </view>

    <view class="content-shell">
      <view class="hero-title">工作台</view>
      <view class="section-card">
        <view class="section-title">核心功能</view>
        <scroll-view class="core-scroll" scroll-x show-scrollbar="false">
          <view class="core-list">
            <view
              v-for="item in coreFeatures"
              :key="item.title"
              class="core-item"
              :class="{ active: item.active }"
              @click="navigatorTo(item.path)"
            >
              <view class="core-icon">
                <image
                  :src="item.iconText"
                  mode="aspectFit"
                  style="
                    width: 40px;
                    height: 40px;
                    background-color: transparent;
                  "
                />
              </view>
              <view class="core-name">{{ item.title }}</view>
              <view class="core-desc">{{ item.desc }}</view>
              <view class="core-indicator" v-if="item.active"></view>
            </view>
          </view>
        </scroll-view>
      </view>

      <view class="section-card">
        <view class="section-title">PMS常用</view>
        <view class="tool-grid">
          <view
            v-for="item in commonTools"
            :key="item.title"
            class="tool-item"
            @click="navigatorTo(item.path)"
          >
            <image class="tool-icon" :src="item.icon" mode="aspectFit" />
            <view class="tool-title">{{ item.title }}</view>
          </view>
        </view>
      </view>

      <view class="section-card">
        <view class="section-head">
          <view class="section-title">日报入口</view>
          <view class="section-tip">
            <uni-icons type="personadd" size="16" color="#246BFF" />
            <text>按角色显示</text>
          </view>
        </view>
        <view class="daily-list">
          <view
            v-if="!!userInfo.rhReportFlag"
            class="daily-item"
            @click="navigatorTo('/pages/ruihen/index?type=edit')"
          >
            <image
              class="daily-icon"
              src="/static/entry/ruiheng.png"
              mode="aspectFit"
            />
            <view class="daily-content">
              <view class="daily-title">瑞恒日报</view>

              <view class="daily-subtitle-wrap">
                <view class="daily-subtitle">进入瑞恒日报</view>
                <uni-icons type="right" size="12" color="#8090a8" />
              </view>
            </view>
          </view>

          <view
            class="daily-item"
            v-if="!!userInfo.rdReportFlag"
            @click="navigatorTo('/pages/ruiDu/index')"
          >
            <image
              class="daily-icon"
              src="/static/entry/ruidu.png"
              mode="aspectFit"
            />
            <view class="daily-content">
              <view class="daily-title">瑞都日报</view>

              <view class="daily-subtitle-wrap">
                <view class="daily-subtitle">进入瑞都日报</view>
                <uni-icons type="right" size="12" color="#8090a8" />
              </view>
            </view>
          </view>

          <view
            class="daily-item"
            v-if="!!userInfo.ryReportFlag"
            @click="navigatorTo('/pages/ruiying/index?type=edit')"
          >
            <image
              class="daily-icon"
              src="/static/entry/ruiying.png"
              mode="aspectFit"
            />
            <view class="daily-content">
              <view class="daily-title">瑞鹰日报</view>

              <view class="daily-subtitle-wrap">
                <view class="daily-subtitle">进入瑞鹰日报</view>
                <uni-icons type="right" size="12" color="#8090a8" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import { computed, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import dayjs from "dayjs";
import { getLoginUserInfo } from "@/api/login";
import { getUnreadMessageCount } from "@/api/message";
import { getOvertimeTaskList } from "@/api/task";
import { getUserInfo } from "@/utils/auth";

const userInfo = ref({});
const messageCount = ref(0);
const todoStats = ref({
  maintenance: 0,
  fault: 0,
});

const coreFeatures = [
  {
    title: "PMS",
    desc: "设备生命周期管理",
    iconText: "/static/entry/pms.png",
    iconBg: "linear-gradient(135deg, #eaf2ff 0%, #d8e7ff 100%)",
    iconColor: "#246BFF",
    active: true,
    path: "/pages/home/index",
  },
  {
    title: "QHSE",
    desc: "质量健康安全环保",
    iconText: "/static/entry/qhse.png",
    iconBg: "linear-gradient(135deg, #ecfff7 0%, #d8f8ea 100%)",
    iconColor: "#1eb980",
    path: "/pages/qhse/index",
  },
  {
    title: "组态管理",
    desc: "流程与仪表组态",
    iconText: "/static/entry/zutai.png",
    iconBg: "linear-gradient(135deg, #f1edff 0%, #e0d9ff 100%)",
    iconColor: "#6d5efc",
    path: "/pages/zutai/index",
  },
  {
    title: "智慧连油",
    desc: "润滑管理平台",
    iconText: "/static/entry/lianyou.png",
    iconBg: "linear-gradient(135deg, #e7fbff 0%, #d4f7fb 100%)",
    iconColor: "#10a8c6",
    path: "/pages/lianyou/index",
  },

  {
    title: "生产运营双周会",
    desc: "双周会管理与跟踪",
    iconText: "/static/entry/yunying.png",
    iconBg: "linear-gradient(135deg, #fff3e8 0%, #ffe3cc 100%)",
    iconColor: "#ff8a1f",
    path: "/pages/swh/index",
  },
];

const commonTools = [
  {
    title: "运行记录",
    icon: "/static/entry/record.png",
    path: "/pages/recordFilling/list",
  },
  {
    title: "保养工单",
    icon: "/static/entry/baoyang.png",
    path: "/pages/maintenance/index",
  },
  {
    title: "设备维修",
    icon: "/static/entry/weixiu.png",
    path: "/pages/repair/index",
  },
  {
    title: "巡检工单",
    icon: "/static/entry/xunjian.png",
    path: "/pages/inspection/index",
  },
  {
    title: "故障上报",
    icon: "/static/entry/guzhang.png",
    path: "/pages/fault/index",
  },
  {
    title: "库存管理",
    icon: "/static/entry/kucun.png",
    path: "/pages/inventory/index",
  },
  {
    title: "保养查询",
    icon: "/static/entry/byquery.png",
    path: "/pages/maintenance/search",
  },
  {
    title: "设备台账",
    icon: "/static/entry/taizhang.png",
    path: "/pages/ledger/index",
  },
  {
    title: "设备状态变更",
    icon: "/static/entry/status.png",
    path: "/pages/statusChange/index",
  },
  {
    title: "设备责任人",
    icon: "/static/entry/zeren.png",
    path: "/pages/deviceUser/index",
  },
];

const dailyEntries = computed(() => [
  {
    title: "瑞恒日报",
    subtitle: "进入瑞恒日报",
    path: "/pages/ruihen/index?type=edit",
    icon: "/static/entry/ruiheng.png",
    visible: !!userInfo.value.rhReportFlag,
  },
  {
    title: "瑞都日报",
    subtitle: "进入瑞都日报",
    path: "/pages/ruiDu/index",
    icon: "/static/entry/ruidu.png",
    visible: !!userInfo.value.rdReportFlag,
  },
  {
    title: "瑞鹰日报",
    subtitle: "进入瑞鹰日报",
    path: "/pages/ruiying/index?type=edit",
    icon: "/static/entry/ruiying.png",
    visible: !!userInfo.value.ryReportFlag,
  },
]);

const visibleDailyEntries = computed(() => {
  const list = dailyEntries.value.filter((item) => item.visible);
  if (list.length) return list.slice(0, 3);
  return dailyEntries.value
    .map((item) => ({ ...item, visible: true }))
    .slice(0, 3);
});

const todoCards = computed(() => [
  {
    title: "保养工单",
    icon: "/static/home/baoyang.png",
    count: todoStats.value.maintenance,
    color: "#1eb980",
  },
  {
    title: "故障上报",
    icon: "/static/home/guzhang.png",
    count: todoStats.value.fault,
    color: "#ff4d4f",
  },
]);

const currentTimeText = computed(() => dayjs().format("H:mm"));

const greetingText = computed(() => {
  const hour = dayjs().hour();
  if (hour < 12) return "上午好";
  if (hour < 18) return "下午好";
  return "晚上好";
});

const displayName = computed(
  () => userInfo.value.nickname || userInfo.value.username || "张工",
);
const avatarText = computed(() =>
  String(displayName.value || "张").slice(0, 1),
);

const projectName = computed(
  () =>
    userInfo.value.deptName ||
    userInfo.value.postGroup ||
    userInfo.value.stationName ||
    "智慧工厂示例项目",
);

const parseCachedUserInfo = () => {
  const cache = getUserInfo();
  if (!cache) return {};
  try {
    const parsed = typeof cache === "string" ? JSON.parse(cache) : cache;
    if (typeof parsed === "string") {
      return JSON.parse(parsed)?.user || {};
    }
    return parsed?.user || parsed || {};
  } catch (error) {
    return {};
  }
};

const buildTodoStats = (list) => {
  const stats = {
    maintenance: 0,
    fault: 0,
  };

  list.forEach((item) => {
    const typeText = String(item?.type || "");
    if (typeText.includes("保养")) {
      stats.maintenance += 1;
    }
    if (typeText.includes("故障")) {
      stats.fault += 1;
    }
  });

  return stats;
};

const loadPageData = async () => {
  userInfo.value = parseCachedUserInfo();

  try {
    const [userRes, messageRes, todoRes] = await Promise.all([
      getLoginUserInfo(),
      getUnreadMessageCount(),
      getOvertimeTaskList({ pageNo: 1, pageSize: 50 }),
    ]);

    if (userRes?.code === 0 && userRes.data) {
      userInfo.value = userRes.data;
    }
    if (messageRes?.code === 0) {
      messageCount.value = messageRes.data || 0;
    }
    if (todoRes?.code === 0) {
      const todoList = todoRes.data?.list || [];
      todoStats.value = buildTodoStats(todoList);
    }
  } catch (error) {
    messageCount.value = messageCount.value || 0;
  }
};

const navigatorTo = (url) => {
  if (!url) return;
  uni.navigateTo({ url });
};

onShow(() => {
  loadPageData();
});
</script>

<style lang="scss" scoped>
.entry-page {
  height: 100vh;
  background: linear-gradient(180deg, #edf4ff 0%, #f7f9fc 28%, #f6f8fb 100%);
  padding-bottom: 30rpx;
}

.hero {
  position: relative;
  height: 640rpx;
  overflow: hidden;
  padding-bottom: 20rpx;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-mask {
  position: absolute;
  inset: 0;
  height: 55%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgb(45, 114, 212, 0.4) 88%,
    rgb(45, 114, 212, 0.4) 89%,
    rgb(45, 114, 212, 0.7) 91%,
    rgb(41, 113, 214, 0.2) 95%,
    #f9fbfd 100%
  );

  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: calc(var(--status-bar-height) + 24rpx) 28rpx 0;
}

.hero-title {
  position: absolute;
  left: 0%;
  top: -8%;
  // bottom: -110%;
  // background: #f7f9fc;
  background: linear-gradient(
    to right,
    #f7f9fc 0%,
    #f7f9fc 50%,
    rgba(253, 253, 254, 0.3) 85%,
    rgba(253, 253, 254, 0.2) 90%,
    rgba(253, 253, 254, 0) 100%
  );
  border-radius: 16rpx 0rpx 0rpx 0rpx;
  padding-top: 20rpx;
  padding-bottom: 50rpx;
  padding-left: 28rpx;
  width: 50%;
  height: 80rpx;
  font-size: 40rpx;
  font-weight: 700;
  z-index: -3;
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 42rpx;
}

.profile-row {
  display: flex;
  align-items: center;
}

.avatar-wrap {
  width: 82rpx;
  height: 82rpx;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.avatar-text {
  color: #ffffff;
  font-size: 34rpx;
  font-weight: 700;
}

.profile-main {
  flex: 1;
  min-width: 0;
  margin-left: 22rpx;
}

.greeting {
  color: #ffffff;
  font-size: 30rpx;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 6rpx 18rpx rgba(0, 31, 90, 0.18);
}

.project-pill {
  display: inline-flex;
  align-items: center;
  gap: 12rpx;
  max-width: 100%;
  margin-top: 18rpx;
  padding: 8rpx 18rpx;
  border-radius: 15rpx;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  backdrop-filter: blur(8px);
}

.project-name {
  max-width: 360rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20rpx;
}

.notice-wrap {
  margin-left: 12rpx;
  padding-right: 28rpx;
}

.notice-button {
  width: 30rpx;
  height: 30rpx;
  display: flex;

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

.notice-glyph {
  font-size: 32rpx;
  line-height: 1;
}

.content-shell {
  position: relative;
  z-index: 2;
  margin-top: -325rpx;
  padding: 0 24rpx calc(env(safe-area-inset-bottom) + 34rpx);
}

.page-title {
  margin: 0 6rpx 22rpx;
  color: #071426;
  font-size: 72rpx;
  font-weight: 800;
  letter-spacing: 1rpx;
}

.section-card {
  margin-bottom: 22rpx;
  padding: 26rpx 22rpx 24rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14rpx 24rpx rgba(13, 43, 91, 0.02);
  border: 1rpx solid #eef3fc;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16rpx;
}

.section-title {
  color: #101c2e;
  font-size: 36rpx;
  font-weight: 700;
}

.section-tip {
  display: flex;
  align-items: center;
  gap: 8rpx;
  color: #5572a3;
  font-size: 24rpx;
}

.core-scroll {
  margin-top: 22rpx;
  white-space: nowrap;
}

.core-list {
  display: inline-flex;
  gap: 18rpx;
  padding-bottom: 4rpx;
}

.core-item {
  position: relative;
  width: 188rpx;
  min-height: 238rpx;
  padding: 24rpx 18rpx 20rpx;
  border-radius: 22rpx;
  background: #f9fbfd;
  border: 1rpx solid #e5edf8;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.core-item.active {
  border-color: #246bff;
  background: linear-gradient(180deg, #ffffff 0%, #dfebfd 100%);
  box-shadow: inset 0 0 0 2rpx rgba(36, 107, 255, 0.08);
  .core-name {
    color: #0b57f6;
  }
}

.core-icon {
  width: 84rpx;
  height: 84rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  text {
    font-size: 42rpx;
    font-weight: 800;
  }
}

.core-name {
  margin-top: 22rpx;
  color: #111d2f;
  font-size: 20rpx;
  font-weight: 700;
  white-space: normal;
}

.core-desc {
  margin-top: 10rpx;
  color: #6f7f96;
  font-size: 18rpx;
  line-height: 1.5;
  white-space: normal;
}

.core-indicator {
  position: absolute;
  left: 50%;
  bottom: 16rpx;
  width: 34rpx;
  height: 8rpx;
  margin-left: -17rpx;
  border-radius: 999rpx;
  background: #246bff;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18rpx;
  margin-top: 22rpx;
}

.tool-item {
  min-height: 140rpx;
  padding: 22rpx 10rpx 18rpx;
  border-radius: 20rpx;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border: 1rpx solid #e5edf8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.tool-icon {
  width: 54rpx;
  height: 54rpx;
}

.tool-title {
  margin-top: 16rpx;
  color: #111d2f;
  font-size: 22rpx;
  line-height: 1.3;
  text-align: center;
}

.daily-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5rpx;
  margin-top: 22rpx;
}

.daily-item {
  padding: 30rpx 0rpx;
  border-radius: 16rpx;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border: 1rpx solid #e5edf8;
  display: flex;
  // flex-direction: column;
  // align-items: center;
  gap: 10rpx;
  // min-width: 0;
}

.daily-subtitle-wrap {
  display: flex;
  align-items: center;
  margin-top: 8rpx;
  gap: 8rpx;
}

.daily-icon {
  width: 64rpx;
  height: 64rpx;
  flex-shrink: 0;
}

.daily-content {
  flex: 1;
  min-width: 0;
}

.daily-title {
  color: #111d2f;
  font-size: 22rpx;
  font-weight: 700;
}

.daily-subtitle {
  // margin-top: 8rpx;
  color: #6f7f96;
  font-size: 16rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.todo-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18rpx;
  margin-top: 22rpx;
}

.todo-item {
  min-width: 0;
  padding: 22rpx 20rpx;
  border-radius: 22rpx;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border: 1rpx solid #e5edf8;
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.todo-icon {
  width: 58rpx;
  height: 58rpx;
  flex-shrink: 0;
}

.todo-content {
  flex: 1;
  min-width: 0;
}

.todo-title {
  color: #111d2f;
  font-size: 26rpx;
  font-weight: 700;
}

.todo-subtitle {
  margin-top: 8rpx;
  color: #6f7f96;
  font-size: 22rpx;
}

.todo-right {
  display: flex;
  align-items: flex-end;
  gap: 6rpx;
}

.todo-count {
  font-size: 48rpx;
  font-weight: 800;
  line-height: 1;
}

.todo-unit {
  margin-bottom: 6rpx;
  color: #6f7f96;
  font-size: 22rpx;
}
</style>