yf-portal-vue/src/views/index.vue

<template>
  <div class="bg-white">
    <Header />

    <section
      class="relative w-full overflow-hidden mt-15 md:pb-30 pb-50 pt-9 h-[400px]"
    >
      <!-- 轮播背景容器 -->

      <div
        class="absolute inset-0 flex transition-transform duration-700 ease-in-out"
      >
        <div class="min-w-full h-full relative">
          <video
            class="absolute inset-0 w-full h-full object-cover"
            autoplay
            muted
            loop
            playsinline
            :src="bgvideo"
          >
            您的浏览器不支持 HTML5 视频。
          </video>
        </div>
      </div>

      <div
        class="relative z-10 w-full mx-auto h-full px-20 flex items-center mt-5 pt-10"
      >
        <div class="max-w-4xl">
          <h1
            class="text-2xl md:text-4xl text-white/90 pt-2 font-bold leading-tight slide-up-fade-in"
          >
            山东科瑞石油技术门户网站 · DeepOil 智慧经营平台
          </h1>
          <p
            class="mt-3 md:text-4 text-sm md:text-base text-white/90 leading-relaxed slide-up-fade-in"
            style="animation-delay: 0.2s"
          >
            连接经营管理、生产指挥与数据智能，打造石油能源行业的一体化数字化平台，
            为企业提供高效协同、智能决策与可靠的数字化服务。
          </p>
          <div
            class="mt-4 md:mt-6 flex gap-3 slide-up-fade-in"
            style="animation-delay: 0.4s"
          >
            <a
              class="bg-[#0644a1] hover:bg-[#0a53c1] text-white px-4 py-2 cursor-pointer"
            >
              了解平台
            </a>
            <a
              class="bg-white/10 hover:bg-white/20 text-white px-4 py-2 cursor-pointer"
            >
              联系我们
            </a>
          </div>
        </div>
      </div>
    </section>

    <section
      class="max-w-[1200px] mx-auto px-2 mb-8 mt-6 flex justify-center items-center gap-3"
    >
      <p class="text-2xl">提供多维度、更可靠的数智化服务</p>
    </section>

    <section class="w-full mx-auto px-4 md:px-20 mb-8 mt-5">
      <div class="grid gap-5 grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
        <CardItem
          v-for="card in cards"
          :title="card.title"
          :id="card.id"
          :desc="card.desc"
          :items="card.items"
          :bg="card.bg"
          :bg2="cardBgs"
        />
      </div>
    </section>

    <Footer />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, onUnmounted } from "vue";
import * as authUtil from "@/utils/auth";
import * as dd from "dingtalk-jsapi";
import { getUnreadNotifyMessageCount } from "@/api/user";
import Header from "@components/home/header.vue";
import CardItem from "@components/home/CardItem.vue";
import Footer from "@components/home/Footer.vue";
import img1 from "@/assets/images/1.jpg";
import img2 from "@/assets/images/2.jpg";
import img3 from "@/assets/images/3.jpg";
import caiwu from "@/assets/images/caiwu.png";
import banner1 from "@/assets/images/banner1.jpg";
import banner2 from "@/assets/images/model.jpeg";
import bgvideo from "@/assets/bg.mp4";
import bg2 from "@/assets/images/e4.png";
import g1 from "@/assets/images/g1.png";
import { useRouter } from "vue-router";
import axios from "axios";
import { useUserStore } from "@/stores/useUserStore";
const router = useRouter();

const userStore = useUserStore();
const bgImages = [banner1, caiwu, banner2];
// 2. 定义当前显示的图片索引
const currentBgIndex = ref(0);

// 3. 轮播定时器引用
let bgInterval: number | null = null;

type Card = {
  name: string;
  title: string;
  desc: string;
  bg: string;
  items: Array<{ label: string; tag?: "新" | "热" }>;
  id: string;
};
const cardBgs = [bg2, g1, bg2];
const cards: Card[] = [
  {
    name: "device",
    title: "数字运营平台",
    desc: "集成财务、研发、客户、人力等关键业务数据，为管理者提供全局态势感知和战略决策支持",
    id: "management",
    bg: img1,
    items: [
      { label: "OA办公" },
      { label: "客户管理(CRM)" },
      { label: "人力资源(EHR)" },
      { label: "供应商管理(SRM)" },
      { label: "财务管理(FM)" },
      { label: "经营驾驶舱(MC)", tag: "新" },
      { label: "项目管理(PM)" },

      { label: "技术研发管理" },

      { label: "组织资产管理" },
      { label: "风控合规管理" },
      { label: "战略解码与执行" },
      { label: "研发需求管理" },
    ],
  },
  {
    name: "scene",
    title: "智慧指挥平台",
    desc: "深入工业场景，为中小企业数字化升级赋能",
    id: "command",
    bg: img2,
    items: [
      { label: "设备管理(PMS)" },
      { label: "中航北斗" },
      { label: "质量安全管理(QHSE)" },
      { label: "智慧连油" },
      { label: "智慧注气" },
      { label: "智能钻井" },
      { label: "智慧压裂" },
      { label: "数字油藏" },
      { label: "视频中心(VCS)" },
    ],
  },
  {
    name: "factory",
    title: "Chat BI平台",
    desc: "工厂上云，高效协同，生产效率和产品质量提升",
    id: "chatbi",
    bg: img3,
    items: [
      { label: "全局数据治理(数据中台)", tag: "热" },
      { label: "智能决策" },
      { label: "行业AI大模型", tag: "新" },
      { label: "AI智能体(智能交互)", tag: "新" },
      { label: "工艺文件智能体" },
      { label: "集团制度智能体" },
    ],
  },
];

async function loginWithDingTalk() {
  const ddCorpId = import.meta.env.VITE_DD_CORPID;
  const ddClientId = import.meta.env.VITE_DD_CLIENTID;

  if (!ddCorpId || !ddClientId) return;

  dd.requestAuthCode({
    corpId: ddCorpId,
    clientId: ddClientId,
    success: (res: any) => {
      const { code } = res;

      axios
        .post(
          import.meta.env.BASE_URL + "/admin-api/system/auth/h5SocialLogin",
          {
            code: code,
            type: 20,
            state: new Date().getTime(),
          },
          {
            headers: {
              "Content-Type": "application/json",
              "tenant-id": 1,
            },
          },
        )
        .then((res) => {
          console.log("钉钉免登res>>>>>>>>>>>>>>>>>>", res.data.data);

          authUtil.setToken(res.data.data);

          router.push({
            path: "/login",
          });
        });
    },
    fail: (err: any) => {
      console.log("err :>> ", err);
    },
    complete: () => {
      console.log("11 :>> ", 11);
    },
  });
}

function dingTalkAutoLogin() {
  const ua = window.navigator.userAgent.toLowerCase();

  console.log("ua>>>>>>>>>>>>>>>>>>>>>>> ", ua);

  if (ua.includes("dingtalk") || ua.includes("dingtalkwork")) {
    loginWithDingTalk();
  }
}

const unreadCount = ref(0); // 未读消息数量
// 获得未读消息数
const getUnreadCount = async () => {
  getUnreadNotifyMessageCount().then((data) => {
    unreadCount.value = data;
  });
};

onMounted(() => {
  dingTalkAutoLogin();

  // 首次加载小红点
  // getUnreadCount();
  // 轮询刷新小红点
  setInterval(
    () => {
      if (userStore.getIsSetUser) {
        console.log("轮询刷新小红点");
        getUnreadCount();
      } else {
        unreadCount.value = 0;
      }
    },
    1000 * 60 * 1,
  );
});

onUnmounted(() => {
  if (bgInterval) {
    clearInterval(bgInterval);
  }
});
</script>

<style scoped>
/* 修改垂直滚动条 */
::-webkit-scrollbar {
  width: 5px; /* 修改宽度 */
}
::-webkit-scrollbar-thumb {
  border-radius: 5px;
}

/* 修改滚动条轨道背景色 */
::-webkit-scrollbar-track {
  background-color: transparent;
}

/* 修改滚动条滑块颜色 */
::-webkit-scrollbar-thumb {
  background-color: #0a5f73;
}

/* 修改滚动条滑块悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
  background-color: #30459c;
}

.slide-up-fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: slideUpFadeIn 0.8s forwards ease-out;
}

@keyframes slideUpFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up-fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: slideUpFadeIn 0.8s forwards ease-out;
}

@keyframes slideUpFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>