Di-Iip/src/views/SolutionsView.vue

<script setup>
import PageHero from "../components/PageHero.vue";
import solutionsBgUrl from "../assets/images/bg.jpg?url";
import Reveal from "../components/motion/Reveal.vue";

import { Icon } from "@iconify/vue";
import { onBeforeUnmount, onMounted, ref } from "vue";

const activeTab = ref("platform");
const tabBarRef = ref(null);
const prefersReducedMotion = () =>
  typeof window !== "undefined" &&
  window.matchMedia &&
  window.matchMedia("(prefers-reduced-motion: reduce)").matches;

const pillars = [
  {
    key: "platform",
    title: "设备升级改造能力",
    lead: "油气专属底座，打通“数采—数据—系统—AI”，为全场景应用落地提供稳定支撑。",
    icon: "lucide:layers-3",
    items: [
      {
        title: "全景设备升级 适配平台接入",
        desc: "依托工业互联网平台底座，提供油气领域全类型设备升级改造服务，针对老旧设备、传统设备，完成仪器仪表升级、PLC控制系统改造或加装，确保改造后设备可无缝接入平台，打通设备与平台的数据联通通道，为后续智能管控奠定基础",
      },
      {
        title: "实时数采远程管控 提升作业便捷度",
        desc: "通过设备升级改造，结合平台数采能力，实现现场设备运行数据实时采集、同步上传，打破现场操作局限，支持远程对设备进行控制、参数调试，无需现场值守，降低人工成本，提升设备运维与操作的便捷性、高效性。",
      },
      {
        title: "AI大模型赋能  智能动态调参",
        desc: "升级后的设备联动工业互联网平台AI大模型算法，基于实时采集的设备运行数据，进行智能分析、精准研判，自动输出动态调参建议或完成自动调参，优化设备运行状态，确保设备始终处于最佳运行工况，提升运行效率。",
      },
      {
        title: "设备专项赋能 预测性维护",
        desc: "针对油气领域部分核心设备，在升级改造基础上，结合平台数据处理与大模型能力，实时监测运行参数，精准预判设备潜在故障、损耗情况，提前触发维护提醒，实现预测性维护，减少停机损失，延长设备使用寿命。",
      },
    ],
  },
  {
    key: "equipment",
    title: "智慧注气",
    lead: "围绕设备全生命周期，实现台账、巡检维保、预测维护与实时监控预警的闭环管理。",
    icon: "lucide:cpu",
    items: [
      {
        title: "老旧设备升级 筑牢无人值守基础",
        desc: "依托工业互联网平台底座，针对油气注气领域老旧设备，开展专项升级改造，加装远程控制器、智能阀门等核心组件，完成设备智能化升级，打破传统人工操作局限，为注气现场无人值守搭建硬件支撑，确保设备可无缝接入平台实现协同管控。",
      },
      {
        title: "实时数据采集 精准把控运行状态",
        desc: "升级后的注气设备联动平台数采能力，实时采集现场压力、温度、流量等核心运行参数，同步上传至工业互联网平台，实现参数实时可视化监控，全面掌握注气全流程运行状态，为无人值守下的智能调控提供精准数据支撑。",
      },
      {
        title: "智能动态调参 实现无人管控",
        desc: "依托工业互联网平台算法能力，基于实时采集的运行数据，自动分析注气工况，动态调整注入参数，无需人工现场操作，真正实现注气现场无人少人值守，大幅减少人工干预，确保注气过程稳定、高效、精准。",
      },
      {
        title: "降本增效保安全 赋能场景升级",
        desc: "通过无人值守模式，大幅减少现场值守人员，降低人力成本；智能动态调参优化注气效率，提升作业产能；减少人员现场作业频次，规避现场安全风险，实现“降本、增效、保安全”三重价值，推动注气场景数字化、智能化转型。",
      },
    ],
  },
  {
    key: "production",
    title: "智慧钻井",
    lead: "面向油气生产项目，贯通任务、计划、数据与报表，提升协同效率与过程可控性。",
    icon: "lucide:clipboard-check",
    items: [
      {
        title: "数据精准采集  筑牢钻井分析基础",
        desc: "依托工业互联网平台数采能力，深度联动录井仪设备，实时采集钻井全流程工况数据，全面记录钻井过程中的各项核心参数，实现数据精准捕捉、实时上传、规范存储，为后续AI分析、钻井优化及完井报告生成，提供完整、可靠的数据支撑。",
      },
      {
        title: "AI大模型深度赋能 精准分析钻井工况",
        desc: "基于工业互联网平台AI大模型能力，对采集的录井数据进行深度挖掘、智能分析，精准识别钻井过程中的工况异常、参数偏差等问题，快速研判钻井态势，为钻井作业优化提供科学、精准的数据分析支撑，规避盲目操作风险。",
      },
      {
        title: "钻井参数智能优化 提升钻井作业交通",
        desc: "结合AI大模型的工况分析结果，联动工业互联网平台管控能力，为钻井现场提供精准的参数优化建议，指导现场调整钻井参数，优化钻井工艺，有效提升钻速、降低钻井损耗，助力钻井作业提质增效，契合油气勘探开发高效化需求。",
      },
      {
        title: "智能生成完井报告 提升报告编制效率",
        desc: "依托平台数据沉淀与AI处理能力，自动汇总钻井全流程录井数据、工况分析结果及优化记录，一键生成标准化完井报告，无需人工繁琐录入，大幅缩短报告编制周期，确保报告数据精准、内容规范，为钻井成果复盘、后续作业提供有力支撑。",
      },
    ],
  },
];

const deliver = [
  { title: "SaaS", desc: "开箱即用，按需订阅，快速试点与复制。" },
  { title: "私有化", desc: "数据本地化部署，适配企业安全与合规要求。" },
  { title: "混合云", desc: "核心数据本地，弹性算力上云，兼顾成本与性能。" },
];

function headerOffsetPx() {
  const rootStyle = getComputedStyle(document.documentElement);
  const headerVar = rootStyle.getPropertyValue("--header-h")?.trim();
  const headerH = Number.parseFloat(headerVar || "72") || 72;
  const tabH = tabBarRef.value?.getBoundingClientRect?.().height || 0;
  return Math.round(headerH + tabH + 16);
}

function scrollToTab(key) {
  const el = document.getElementById(`product-${key}`);
  if (!el) return;
  activeTab.value = key;

  const offset = headerOffsetPx();
  const y = el.getBoundingClientRect().top + window.scrollY - offset;
  window.scrollTo({
    top: Math.max(0, y),
    behavior: prefersReducedMotion() ? "auto" : "smooth",
  });
}

let observer = null;
onMounted(() => {
  const offset = headerOffsetPx();
  observer = new IntersectionObserver(
    (entries) => {
      const visible = entries
        .filter((e) => e.isIntersecting)
        .sort(
          (a, b) => (b.intersectionRatio || 0) - (a.intersectionRatio || 0),
        )[0];
      if (visible?.target?.id)
        activeTab.value = visible.target.id.replace("product-", "");
    },
    {
      root: null,
      threshold: [0.25, 0.45, 0.6],
      rootMargin: `-${offset}px 0px -55% 0px`,
    },
  );

  for (const p of pillars) {
    const el = document.getElementById(`product-${p.key}`);
    if (el) observer.observe(el);
  }
});

onBeforeUnmount(() => {
  observer?.disconnect?.();
  observer = null;
});
</script>

<template>
  <div>
    <PageHero
      kicker=""
      title="油气行业数智产品矩阵"
      subtitle="以工业互联网平台为底座，覆盖设备管理、生产管理与QHSE，贯通数采、数据、流程与AI，支撑从勘探开发到生产运营的全场景数字化。"
    >
      <template #actions>
        <RouterLink
          class="btn btn-primary"
          style="border-radius: 0"
          to="/contact"
          >获取产品资料</RouterLink
        >
      </template>
    </PageHero>

    <section class="section" style="padding-top: 0; margin-top: -10px">
      <div>
        <div
          ref="tabBarRef"
          class="tabBar"
          role="tablist"
          aria-label="产品域导航"
        >
          <button
            v-for="p in pillars"
            :key="p.key"
            class="tabBtn"
            :class="{ 'is-active': activeTab === p.key }"
            type="button"
            role="tab"
            :aria-selected="activeTab === p.key ? 'true' : 'false'"
            @click="scrollToTab(p.key)"
          >
            <span
              class="tabText"
              style="display: flex; align-items: center; gap: 10px"
              ><Icon :icon="p.icon" width="18" height="18" aria-hidden="true" />
              <span>{{ p.title }}</span></span
            >
          </button>
        </div>

        <div class="productStac container">
          <section
            v-for="p in pillars"
            :id="`product-${p.key}`"
            :key="p.key"
            class="productSection"
          >
            <header class="productHead">
              <div class="productHeadTop">
                <h2 class="productTitle">{{ p.title }}</h2>
              </div>
              <p class="productLead">{{ p.lead }}</p>
            </header>

            <div class="productBody">
              <div v-for="it in p.items" :key="it.title" class="featureRow">
                <div class="featureDot" aria-hidden="true"></div>
                <div class="featureMain">
                  <div class="featureTitle">{{ it.title }}</div>
                  <div class="muted featureDesc">{{ it.desc }}</div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </section>

    <section
      class="section section--soft solutionsBg"
      :style="{ '--solutions-bg': `url(${solutionsBgUrl})` }"
    >
      <div class="container">
        <Reveal as="div" class="sectionHead" :delay="0">
          <div>
            <div class="section-kicker">落地方法</div>
            <h2 class="h2">以数据闭环驱动持续改进</h2>
          </div>
        </Reveal>

        <div class="grid grid-4">
          <Reveal
            v-for="(a, idx) in approach"
            :key="a.step"
            as="div"
            class="card card-pad approachCard hover-lift"
            :delay="60 + idx * 70"
          >
            <div class="approachStep">{{ a.step }}</div>
            <div class="approachTitle">{{ a.title }}</div>
            <div class="muted">{{ a.desc }}</div>
          </Reveal>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.sectionHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.solutionTitle {
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.solutionScenes {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.scene {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--slate-700);
  font-weight: 600;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-600);
}

.approachStep {
  color: var(--brand-700);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.approachTitle {
  margin-top: 4px;
  font-weight: 900;
  margin-bottom: 6px;
}

.solutionsBg {
  position: relative;
  overflow: hidden;
}

.solutionsBg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--solutions-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.45;
  filter: saturate(0.95);
}

.solutionsBg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(248, 250, 252, 0.78),
    rgba(248, 250, 252, 0.92)
  );
}

.solutionsBg > .container {
  position: relative;
  z-index: 1;
}

.productsView {
  --ink: rgba(2, 6, 23, 0.92);
  --tab-bg: rgba(255, 255, 255, 0.92);
}

.sectionHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.productStac {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Remove PageHero gradients for this page */
:deep(.pageHero) {
  border-bottom: none;
}

.tabBar {
  position: sticky;
  top: var(--header-h);
  padding: 0 30px;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0px;
  background: #eef5f8;
  margin: 10px 0 18px;
  height: 80px;
  border: 0;
  border-radius: 0;
}

.tabBtn {
  height: 80px;
  font-size: 20px;
  border: 0;
  background: #eef5f8;
  box-shadow: var(--tab-shadow);
  padding: 0 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--slate-700);

  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.tabBtn.is-active {
  color: var(--brand-700);
  background-color: #fff;
}

.tabBtn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.24),
    var(--tab-shadow-hover);
}

.tabText {
  display: inline-block;
  white-space: nowrap;
  padding-bottom: 10px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size 160ms ease;
}

.tabBtn.is-active .tabText {
  background-size: 100% 2px;
}

.productStack {
  display: grid;
  gap: 26px;
}

.productSection {
  scroll-margin-top: calc(var(--header-h) + 84px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin-top: 50px;
}

.productHead {
  padding: 18px 18px 14px;

  text-align: center;
}

.productHeadTop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.productBadge {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: rgba(2, 6, 23, 0.65);
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 6px 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.productTitle {
  letter-spacing: -0.02em;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.25;
  text-align: center;
}

.productLead {
  margin-top: 10px;
  max-width: 92ch;

  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.productBody {
  padding: 10px 2px 6px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.featureRow {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 16px;
  padding: 22px 22px;
  border: 0;
  /* border-radius: 18px; */
  background: #fff;
  box-shadow: 0 16px 42px rgba(2, 6, 23, 0.12);
  min-height: 178px;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.featureRow:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 58px rgba(2, 6, 23, 0.16);
}

.featureDot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #22c55e, #16a34a);
  box-shadow:
    0 10px 22px rgba(34, 197, 94, 0.25),
    inset 0 0 0 2px rgba(255, 255, 255, 0.85);
  margin-top: 4px;
}

.featureMain {
  min-width: 0;
}

.featureTitle {
  letter-spacing: -0.01em;
  color: rgba(2, 6, 23, 0.9);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
}

.featureDesc {
  margin-top: 10px;
  line-height: 1.75;
  color: #666666;
  text-align: left;
}

.deliverTitle {
  font-weight: 900;
  margin-bottom: 6px;
}

@media (max-width: 960px) {
  .sectionHead {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .tabBar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .productBody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .productBody {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tabBtn {
    transition: none !important;
    transform: none !important;
  }

  .tabText {
    transition: none !important;
  }

  .featureRow {
    transition: none !important;
    transform: none !important;
  }
}

:deep(.pageHero) {
  background-image: url("../assets/images/bg4.png");

  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: overlay;
  color: #111;
  padding: 80px 0;
}
:deep(.pageHero__subtitle) {
  color: #4f5055;
}
</style>