|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <el-card class="h-[850px] w-full min-w-0 relative">
|
|
|
+ <el-card class="w-full min-w-0 relative">
|
|
|
<div
|
|
|
class="relative overflow-hidden rounded-md mb-3 h-36 bg-cover bg-center"
|
|
|
:style="{ backgroundImage: `url(${bg})` }"
|
|
|
@@ -16,42 +16,45 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <el-collapse v-model="activeNames" accordion>
|
|
|
- <el-collapse-item
|
|
|
- v-for="(i, idx) in items"
|
|
|
- :key="idx"
|
|
|
- :name="String(idx)"
|
|
|
- :title="i.label"
|
|
|
- class="no-border-collapse-item"
|
|
|
- >
|
|
|
- <div class="text-[#606266]">{{ i.label }}</div>
|
|
|
-
|
|
|
- <!-- 添加查看按钮 -->
|
|
|
- <div class="mt-3">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- @click="handleView(i)"
|
|
|
- class="bg-[#02409b]! border-none! w-20! rounded-none!"
|
|
|
- >
|
|
|
- 查看
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- <template #title>
|
|
|
- <div class="flex items-center min-w-0 flex-1 collapse-title">
|
|
|
- <span class="truncate text-sm font-bold">{{ i.label }}</span>
|
|
|
- <el-tag
|
|
|
- v-if="i.tag"
|
|
|
- size="small"
|
|
|
- type="danger"
|
|
|
- effect="dark"
|
|
|
- class="ml-2 shrink-0"
|
|
|
- >{{ i.tag }}</el-tag
|
|
|
+ <!-- 九宫格布局 -->
|
|
|
+ <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 hover:bg-blue-50 hover:border-blue-200 border border-transparent transition-all duration-200 cursor-pointer group"
|
|
|
+ @mouseenter="showTooltip(index)"
|
|
|
+ @mouseleave="hideTooltip"
|
|
|
+ @click="handleView(item)"
|
|
|
+ >
|
|
|
+ <div class="flex flex-col items-center">
|
|
|
+ <!-- 功能图标占位符 -->
|
|
|
+ <div
|
|
|
+ class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-2 mx-auto group-hover:bg-blue-200 transition-colors"
|
|
|
+ >
|
|
|
+ <span class="text-blue-600 font-bold text-lg">{{
|
|
|
+ item.label.substring(0, 2)
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 功能名称 -->
|
|
|
+ <span class="text-sm text-gray-700 truncate w-full px-1">{{
|
|
|
+ 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-600"
|
|
|
>
|
|
|
+ {{ item.tag }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </el-collapse-item>
|
|
|
- </el-collapse>
|
|
|
+ </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"
|
|
|
@@ -64,13 +67,23 @@
|
|
|
import { ref } from "vue";
|
|
|
import { useRouter } from "vue-router";
|
|
|
import { ssoLogin } from "@/api/user";
|
|
|
-
|
|
|
import { useUserStore } from "@/stores/useUserStore";
|
|
|
import { getAccessToken } from "@/utils/auth";
|
|
|
-const userStore = useUserStore();
|
|
|
|
|
|
+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<{
|
|
|
@@ -82,8 +95,6 @@ const props = defineProps<{
|
|
|
id: string;
|
|
|
}>();
|
|
|
|
|
|
-const activeNames = ref<string[]>([]);
|
|
|
-
|
|
|
const goDetail = () => {
|
|
|
if (props.id === "management") {
|
|
|
router.push({ path: "/management" });
|
|
|
@@ -94,10 +105,44 @@ const goDetail = () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+// 根据标签获取系统描述
|
|
|
+const getDescriptionByLabel = (label: string): string => {
|
|
|
+ const descriptions: Record<string, string> = {
|
|
|
+ // 经营管理平台
|
|
|
+ OA办公系统: "集成日常办公自动化功能，提高工作效率",
|
|
|
+ 经营驾驶舱: "实时展示企业运营数据，辅助管理层决策",
|
|
|
+ 战略解码与执行: "将企业战略转化为具体行动计划并跟踪执行",
|
|
|
+ "财务管理(收入、成本、应收账款)": "全面管理企业财务状况，控制成本和风险",
|
|
|
+ 技术研发管理: "管理企业研发项目和技术资产",
|
|
|
+ "客户管理(CRM)": "管理客户关系，提升销售业绩",
|
|
|
+ "人力资源(EHR)": "企业人力资源全生命周期管理",
|
|
|
+ "供应链管理(SCM)": "优化供应链运作，降低采购成本",
|
|
|
+ 组织资产管理: "管理企业组织架构和各类资产",
|
|
|
+ "风控、合规管理": "识别并控制企业运营风险，确保合规运营",
|
|
|
+
|
|
|
+ // 生产指挥平台
|
|
|
+ 中航北斗智慧管理系统: "利用北斗定位技术实现精准生产管理",
|
|
|
+ 智能钻井系统: "智能化钻井作业管理，提高钻井效率",
|
|
|
+ 智能压裂系统: "自动化压裂作业控制系统",
|
|
|
+ 智能注气系统: "智能化气体注入管理",
|
|
|
+ 智能连油系统: "连续油管作业智能管理",
|
|
|
+ "QHSE (安全监控、应急指挥)": "质量、健康、安全和环境综合管理",
|
|
|
+ "设备管理系统 (PMS)": "生产设备维护和管理",
|
|
|
+ "项目管理 (PM)": "工程项目全周期管理",
|
|
|
+
|
|
|
+ // Chat BI平台
|
|
|
+ "全局数据治理 (数据中台)": "建立统一的数据治理体系和数据中台",
|
|
|
+ 智能决策: "基于数据分析的智能决策支持",
|
|
|
+ 行业AI大模型: "针对石油行业的专业人工智能模型",
|
|
|
+ "AI智能体 (智能交互)": "智能对话和交互式数据分析工具",
|
|
|
+ };
|
|
|
+
|
|
|
+ return descriptions[label] || "该系统的详细功能描述";
|
|
|
+};
|
|
|
+
|
|
|
// 处理查看按钮点击事件
|
|
|
const handleView = async (item: Item) => {
|
|
|
console.log("查看", item);
|
|
|
- // 如果有自定义路径，则跳转到指定路径
|
|
|
|
|
|
if (item.label === "OA办公系统") {
|
|
|
if (userStore.getUser.username && getAccessToken()) {
|
|
|
@@ -108,27 +153,30 @@ const handleView = async (item: Item) => {
|
|
|
if (res) {
|
|
|
window.open(
|
|
|
"https://yfoa.keruioil.com/wui/index.html?ssoToken=" + res + "#/main",
|
|
|
- "_blank"
|
|
|
+ "_blank",
|
|
|
);
|
|
|
}
|
|
|
} else {
|
|
|
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"
|
|
|
+ "_blank",
|
|
|
);
|
|
|
} else {
|
|
|
window.open("https://iot.deepoil.cc", "_blank");
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
if (item.label === "中航北斗智慧管理系统") {
|
|
|
window.open("https://zhbdgps.cn", "_blank");
|
|
|
}
|
|
|
+
|
|
|
if (item.label === "客户管理(CRM)") {
|
|
|
window.open("https://www.xiaoshouyi.com/sfa", "_blank");
|
|
|
}
|
|
|
@@ -152,54 +200,27 @@ const handleView = async (item: Item) => {
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
-:deep(.el-collapse) {
|
|
|
- width: 100%;
|
|
|
- min-width: 0;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.el-collapse-item) {
|
|
|
- width: 100%;
|
|
|
- min-width: 0;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.el-collapse-item) .el-collapse-item__header {
|
|
|
- padding: 10px 12px;
|
|
|
- width: 100%;
|
|
|
- min-width: 0;
|
|
|
- overflow: hidden;
|
|
|
- border-bottom: none !important;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.el-collapse-item):last-child .el-collapse-item__header {
|
|
|
- border-bottom: none !important;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.el-collapse-item) .el-collapse-item__wrap {
|
|
|
- padding: 0 12px 10px;
|
|
|
- width: 100%;
|
|
|
- min-width: 0;
|
|
|
- border-bottom: none !important;
|
|
|
+/* 九宫格项悬停效果 */
|
|
|
+.group:hover .text-gray-700 {
|
|
|
+ color: #02409b;
|
|
|
}
|
|
|
|
|
|
-:deep(.el-collapse-item):last-child .el-collapse-item__wrap {
|
|
|
- border-bottom: none !important;
|
|
|
+/* 弹出框向上淡入动画 */
|
|
|
+.tooltip-fade-enter-active {
|
|
|
+ transition: all 0.3s ease;
|
|
|
}
|
|
|
|
|
|
-:deep(.el-collapse-item__content) {
|
|
|
- width: 100%;
|
|
|
- min-width: 0;
|
|
|
- overflow: hidden;
|
|
|
- word-wrap: break-word;
|
|
|
+.tooltip-fade-leave-active {
|
|
|
+ transition: all 0.2s ease;
|
|
|
}
|
|
|
|
|
|
-/* 折叠项标题样式 */
|
|
|
-.collapse-title {
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
+.tooltip-fade-enter-from {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translate(-50%, 10px);
|
|
|
}
|
|
|
|
|
|
-.collapse-title:hover {
|
|
|
- color: #02409b;
|
|
|
- transition: all 0.3s ease;
|
|
|
+.tooltip-fade-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translate(-50%, 10px);
|
|
|
}
|
|
|
</style>
|
