yf-portal-vue/src/components/home/CardItem.vue

<template>
  <el-card class="w-full min-w-0 relative" style="border: 0">
    <div
      class="relative overflow-hidden rounded-md mb-3 h-36 bg-cover bg-center"
      :style="{ backgroundImage: `url(${bg})` }"
    >
      <div class="absolute inset-0 bg-white/0"></div>
      <div
        class="relative h-full flex items-center gap-3 px-4 cursor-pointer"
        @click="goDetail"
      >
        <div class="min-w-0 flex-1">
          <div class="text-[20px] font-bold text-[#0050b3]">{{ title }}</div>
          <div class="text-[#606266] text-sm mt-1 leading-snug">{{ desc }}</div>
        </div>
      </div>
    </div>

    <!-- 九宫格布局 -->
    <div class="p-4">
      <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
        <div
          v-for="(item, index) in items"
          :key="index"
          class="relative bg-gray-50 rounded-lg p-3 text-center cursor-pointer group transform transition-transform duration-200 hover:bg-blue-50 hover:scale-105 hover:shadow-lg"
          @mouseenter="showTooltip(index)"
          @mouseleave="hideTooltip"
          @click="handleView(item)"
        >
          <div class="flex flex-col items-center">
            <!-- 功能图标占位符 -->
            <div
              class="w-13 h-13 bg-blue-100 rounded-lg flex items-center justify-center mb-2 mx-auto transition-colors"
            >
              <img
                :src="getIconByLabel(item.label)"
                :alt="`${item.label} Logo`"
                class="w-full h-full object-contain"
              />
            </div>

            <!-- 功能名称 -->
            <span
              :class="[
                'text-sm w-full px-1',
                isSpecialSystem(item.label)
                  ? 'font-bold text-gray-800'
                  : 'text-gray-700',
              ]"
            >
              {{ item.label }}
            </span>

            <!-- 标签 -->
            <span
              v-if="item.tag"
              class="mt-1 text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700"
            >
              {{ item.tag }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <div class="h-[50px] mt-20"></div>

    <div
      class="absolute bottom-0 left-0 w-full h-36 bg-contain bg-center no-repeat"
      :style="{ backgroundImage: `url(${bg2[0]})` }"
    ></div>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ssoLogin } from "@/api/user";
import { useUserStore } from "@/stores/useUserStore";
import { getAccessToken } from "@/utils/auth";

// 导入所有图标
import oaimage from "@/assets/images/oa.png";
import crmimage from "@/assets/images/crm.png";
import ehrimage from "@/assets/images/ehr.png";
import scmimage from "@/assets/images/scm.png";
import erpimage from "@/assets/images/erp.jpg"; // 财务管理系统
import driveimage from "@/assets/images/drive.png"; // 经营驾驶舱
import zhanlueimage from "@/assets/images/zhanlue.jpeg"; // 战略解码
import jishuimage from "@/assets/images/jishu.jpeg"; // 技术研发管理
import zuzhiimage from "@/assets/images/zuzhi.png"; // 组织资产管理
import safeimage from "@/assets/images/safe.png"; // 安全合规管理
import pmsimage from "@/assets/images/pms.jpeg"; // 设备管理
import zhonghangimage from "@/assets/images/中航.png"; // 中航北斗
import lianyouimage from "@/assets/images/lianyou.jpeg"; // 智能连油
import qhseimage from "@/assets/images/qhse.jpeg"; // qhse
import zuanjingimage from "@/assets/images/zuanjing.jpeg"; //智能钻井
import yalieimage from "@/assets/images/yalie.png"; //智能压裂
import zhuqiimage from "@/assets/images/zhuqi.png"; //智能注气
import pmimage from "@/assets/images/pm.png"; // 项目管理
import dataimage from "@/assets/images/data.png"; // 全局数据治理
import thinkimage from "@/assets/images/think.png"; // 智能决策
import aiimage from "@/assets/images/ai.png"; // AI大模型
import agentimage from "@/assets/images/agent.jpeg"; // ai智能体

const userStore = useUserStore();
const router = useRouter();

// 控制弹出框显示
const currentTooltipIndex = ref<number | null>(null);

const showTooltip = (index: number) => {
  currentTooltipIndex.value = index;
};

const hideTooltip = () => {
  currentTooltipIndex.value = null;
};

type Item = { label: string; tag?: "新" | "热" };

const props = defineProps<{
  title: string;
  desc: string;
  items: Item[];
  bg: string;
  bg2: string[];
  id: string;
}>();

// 创建图标映射表
const iconMap: Record<string, string> = {
  "OA办公系统": oaimage,
  "经营驾驶舱": driveimage,
  "战略解码与执行": zhanlueimage,
  "财务管理(收入、成本、应收账款)": erpimage,
  "技术研发管理": jishuimage,
  "客户管理(CRM)": crmimage,
  "人力资源(EHR)": ehrimage,
  "供应链管理(SCM)": scmimage,
  "组织资产管理": zuzhiimage,
  "风控、合规管理": safeimage,
  "中航北斗智慧管理系统": zhonghangimage,
  "智能钻井系统": zuanjingimage,
  "智能压裂系统": yalieimage,
  "智能注气系统": zhuqiimage,
  "智能连油系统": lianyouimage,
  "QHSE (安全监控、应急指挥)": qhseimage,
  "设备管理系统 (PMS)": pmsimage,
  "项目管理 (PM)": pmimage,
  "全局数据治理 (数据中台)": dataimage,
  "智能决策": thinkimage,
  "行业AI大模型": aiimage,
  "AI智能体 (智能交互)": agentimage,
};
const isSpecialSystem = (label: string) => {
  const specialSystems = [
    "OA办公系统",
    "客户管理(CRM)",
    "设备管理系统 (PMS)",
    "中航北斗智慧管理系统",
    "智能连油系统",
  ];
  return specialSystems.includes(label);
};
// 根据标签获取对应图标
const getIconByLabel = (label: string) => {
  return iconMap[label] || oaimage; // 默认返回oa图标，以防某些标签没有对应图标
};

const goDetail = () => {
  if (props.id === "management") {
    router.push({ path: "/management" });
  } else if (props.id === "command") {
    router.push({ path: "/command" });
  } else if (props.id === "chatbi") {
    router.push({ path: "/chatbi" });
  }
};

// 处理查看按钮点击事件
const handleView = async (item: Item) => {
  console.log("查看", item);

  console.log("*************************", userStore.getUser.username);

  if (item.label === "OA办公系统") {
    if (userStore.getUser.username && getAccessToken()) {
      const res = await ssoLogin({
        username: userStore.getUser.username,
      });

      if (res) {
        window.open(
          "https://yfoa.keruioil.com/wui/index.html?ssoToken=" + res + "#/main",
          "_blank"
        );
      }
    } else {
      console.log("未登录》》》》》》》》》》》");
      window.open("https://yfoa.keruioil.com", "_blank");
    }
  }

  if (item.label === "设备管理系统 (PMS)") {
    if (userStore.getUser.username && getAccessToken()) {
      // window.open(
      //   "https://iot.deepoil.cc/portalLogin?username=" +
      //     userStore.getUser.username,
      //   "_blank"
      // );
      window.open(
        import.meta.env.VITE_PMS_URL +
          "/portalLogin?username=" +
          userStore.getUser.username,
        "_blank"
      );
    } else {
      console.log("未登录");
      window.open(import.meta.env.VITE_PMS_URL, "_blank");
    }
  }

  if (item.label === "中航北斗智慧管理系统") {
    window.open("https://zhbdgps.cn", "_blank");
  }

  if (item.label === "客户管理(CRM)") {
    window.open("https://www.xiaoshouyi.com/sfa", "_blank");
  }

  if (item.label === "智能连油系统") {
    const extraParam = "source=zhly";
    if (userStore.getUser.username && getAccessToken()) {
      window.open(
        import.meta.env.VITE_PMS_URL +
          "/portalLogin?username=" +
          userStore.getUser.username +
          "&" +
          extraParam,
        "_blank"
      );
    } else {
      router.push({ path: "/login" });
      // window.open(import.meta.env.VITE_PMS_URL + "?" + extraParam, "_blank");
    }
  }
};
</script>

<style scoped>
:deep(.el-card) {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

:deep(.el-card__body) {
  width: 100%;
  min-width: 0;
  padding: 0;
}

/* 弹出框向上淡入动画 */
.tooltip-fade-enter-active {
  transition: all 0.3s ease;
}

.tooltip-fade-leave-active {
  transition: all 0.2s ease;
}

.tooltip-fade-enter-from {
  opacity: 0;
  transform: translate(-50%, 10px);
}

.tooltip-fade-leave-to {
  opacity: 0;
  transform: translate(-50%, 10px);
}
</style>