|
|
@@ -2,9 +2,11 @@
|
|
|
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";
|
|
|
+import platformCover from "../assets/images/p1.png?url";
|
|
|
+import equipmentCover from "../assets/images/sence3.png?url";
|
|
|
+import productionCover from "../assets/images/sence2.jpg?url";
|
|
|
|
|
|
const activeTab = ref("platform");
|
|
|
const tabBarRef = ref(null);
|
|
|
@@ -19,18 +21,19 @@ const pillars = [
|
|
|
title: "设备升级改造能力",
|
|
|
lead: "油气专属底座，打通“数采—数据—系统—AI”，为全场景应用落地提供稳定支撑。",
|
|
|
icon: "lucide:layers-3",
|
|
|
+ cover: platformCover,
|
|
|
items: [
|
|
|
{
|
|
|
title: "全景设备升级 适配平台接入",
|
|
|
- desc: "依托工业互联网平台底座，提供油气领域全类型设备升级改造服务，针对老旧设备、传统设备，完成仪器仪表升级、PLC控制系统改造或加装，确保改造后设备可无缝接入平台，打通设备与平台的数据联通通道，为后续智能管控奠定基础",
|
|
|
+ desc: "依托工业互联网平台底座，提供油气领域全类型设备升级改造服务，针对老旧设备、传统设备，完成仪器仪表升级、PLC 控制系统改造或加装，确保改造后设备可无缝接入平台，打通设备与平台的数据联通通道，为后续智能管控奠定基础",
|
|
|
},
|
|
|
{
|
|
|
title: "实时数采远程管控 提升作业便捷度",
|
|
|
desc: "通过设备升级改造，结合平台数采能力，实现现场设备运行数据实时采集、同步上传，打破现场操作局限，支持远程对设备进行控制、参数调试，无需现场值守，降低人工成本，提升设备运维与操作的便捷性、高效性。",
|
|
|
},
|
|
|
{
|
|
|
- title: "AI大模型赋能 智能动态调参",
|
|
|
- desc: "升级后的设备联动工业互联网平台AI大模型算法，基于实时采集的设备运行数据，进行智能分析、精准研判，自动输出动态调参建议或完成自动调参，优化设备运行状态，确保设备始终处于最佳运行工况，提升运行效率。",
|
|
|
+ title: "AI 大模型赋能 智能动态调参",
|
|
|
+ desc: "升级后的设备联动工业互联网平台 AI 大模型算法，基于实时采集的设备运行数据，进行智能分析、精准研判，自动输出动态调参建议或完成自动调参，优化设备运行状态，确保设备始终处于最佳运行工况，提升运行效率。",
|
|
|
},
|
|
|
{
|
|
|
title: "设备专项赋能 预测性维护",
|
|
|
@@ -43,6 +46,7 @@ const pillars = [
|
|
|
title: "智慧注气",
|
|
|
lead: "围绕设备全生命周期，实现台账、巡检维保、预测维护与实时监控预警的闭环管理。",
|
|
|
icon: "lucide:cpu",
|
|
|
+ cover: equipmentCover,
|
|
|
items: [
|
|
|
{
|
|
|
title: "老旧设备升级 筑牢无人值守基础",
|
|
|
@@ -58,7 +62,7 @@ const pillars = [
|
|
|
},
|
|
|
{
|
|
|
title: "降本增效保安全 赋能场景升级",
|
|
|
- desc: "通过无人值守模式，大幅减少现场值守人员，降低人力成本；智能动态调参优化注气效率，提升作业产能；减少人员现场作业频次，规避现场安全风险，实现“降本、增效、保安全”三重价值，推动注气场景数字化、智能化转型。",
|
|
|
+ desc: "通过无人值守模式，大幅减少现场值守人员，降低人力成本；智能动态调参优化注气效率，提升作业产能；减少人员现场作业频次，规避现场安全风险，实现降本、增效、保安全三重价值，推动注气场景数字化、智能化转型。",
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
@@ -67,22 +71,23 @@ const pillars = [
|
|
|
title: "智慧钻井",
|
|
|
lead: "面向油气生产项目，贯通任务、计划、数据与报表，提升协同效率与过程可控性。",
|
|
|
icon: "lucide:clipboard-check",
|
|
|
+ cover: productionCover,
|
|
|
items: [
|
|
|
{
|
|
|
title: "数据精准采集 筑牢钻井分析基础",
|
|
|
- desc: "依托工业互联网平台数采能力，深度联动录井仪设备，实时采集钻井全流程工况数据，全面记录钻井过程中的各项核心参数，实现数据精准捕捉、实时上传、规范存储，为后续AI分析、钻井优化及完井报告生成，提供完整、可靠的数据支撑。",
|
|
|
+ desc: "依托工业互联网平台数采能力，深度联动录井仪设备，实时采集钻井全流程工况数据，全面记录钻井过程中的各项核心参数，实现数据精准捕捉、实时上传、规范存储，为后续 AI 分析、钻井优化及完井报告生成，提供完整、可靠的数据支撑。",
|
|
|
},
|
|
|
{
|
|
|
- title: "AI大模型深度赋能 精准分析钻井工况",
|
|
|
- desc: "基于工业互联网平台AI大模型能力，对采集的录井数据进行深度挖掘、智能分析，精准识别钻井过程中的工况异常、参数偏差等问题，快速研判钻井态势，为钻井作业优化提供科学、精准的数据分析支撑，规避盲目操作风险。",
|
|
|
+ title: "AI 大模型深度赋能 精准分析钻井工况",
|
|
|
+ desc: "基于工业互联网平台 AI 大模型能力，对采集的录井数据进行深度挖掘、智能分析，精准识别钻井过程中的工况异常、参数偏差等问题，快速研判钻井态势，为钻井作业优化提供科学、精准的数据分析支撑，规避盲目操作风险。",
|
|
|
},
|
|
|
{
|
|
|
title: "钻井参数智能优化 提升钻井作业交通",
|
|
|
- desc: "结合AI大模型的工况分析结果，联动工业互联网平台管控能力，为钻井现场提供精准的参数优化建议，指导现场调整钻井参数，优化钻井工艺，有效提升钻速、降低钻井损耗，助力钻井作业提质增效，契合油气勘探开发高效化需求。",
|
|
|
+ desc: "结合 AI 大模型的工况分析结果，联动工业互联网平台管控能力，为钻井现场提供精准的参数优化建议，指导现场调整钻井参数，优化钻井工艺，有效提升钻速、降低钻井损耗，助力钻井作业提质增效，契合油气勘探开发高效化需求。",
|
|
|
},
|
|
|
{
|
|
|
title: "智能生成完井报告 提升报告编制效率",
|
|
|
- desc: "依托平台数据沉淀与AI处理能力，自动汇总钻井全流程录井数据、工况分析结果及优化记录，一键生成标准化完井报告，无需人工繁琐录入，大幅缩短报告编制周期，确保报告数据精准、内容规范，为钻井成果复盘、后续作业提供有力支撑。",
|
|
|
+ desc: "依托平台数据沉淀与 AI 处理能力，自动汇总钻井全流程录井数据、工况分析结果及优化记录，一键生成标准化完井报告，无需人工繁琐录入，大幅缩短报告编制周期，确保报告数据精准、内容规范，为钻井成果复盘、后续作业提供有力支撑。",
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
@@ -94,6 +99,13 @@ const deliver = [
|
|
|
{ title: "混合云", desc: "核心数据本地，弹性算力上云，兼顾成本与性能。" },
|
|
|
];
|
|
|
|
|
|
+const approach = [
|
|
|
+ { step: "01", title: "数据采集", desc: "实时采集设备、生产等现场数据" },
|
|
|
+ { step: "02", title: "数据传输", desc: "通过边缘网关传输至平台" },
|
|
|
+ { step: "03", title: "数据分析", desc: "基于 AI 大模型进行智能分析" },
|
|
|
+ { step: "04", title: "决策优化", desc: "输出优化建议并持续改进" },
|
|
|
+];
|
|
|
+
|
|
|
function headerOffsetPx() {
|
|
|
const rootStyle = getComputedStyle(document.documentElement);
|
|
|
const headerVar = rootStyle.getPropertyValue("--header-h")?.trim();
|
|
|
@@ -152,7 +164,7 @@ onBeforeUnmount(() => {
|
|
|
<PageHero
|
|
|
kicker=""
|
|
|
title="油气行业数智产品矩阵"
|
|
|
- subtitle="以工业互联网平台为底座，覆盖设备管理、生产管理与QHSE，贯通数采、数据、流程与AI，支撑从勘探开发到生产运营的全场景数字化。"
|
|
|
+ subtitle="以工业互联网平台为底座，覆盖设备管理、生产管理与 QHSE，贯通数采、数据、流程与 AI，支撑从勘探开发到生产运营的全场景数字化。"
|
|
|
>
|
|
|
<template #actions>
|
|
|
<RouterLink
|
|
|
@@ -191,12 +203,16 @@ onBeforeUnmount(() => {
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
- <div class="productStac container">
|
|
|
+ <div class="productStac">
|
|
|
<section
|
|
|
v-for="p in pillars"
|
|
|
:id="`product-${p.key}`"
|
|
|
:key="p.key"
|
|
|
- class="productSection"
|
|
|
+ :class="{
|
|
|
+ 'section--soft': p.title === '智慧注气',
|
|
|
+ productSection: true,
|
|
|
+ }"
|
|
|
+ style="padding: 0 100px"
|
|
|
>
|
|
|
<header class="productHead">
|
|
|
<div class="productHeadTop">
|
|
|
@@ -205,12 +221,39 @@ onBeforeUnmount(() => {
|
|
|
<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 v-if="p.key === 'platform'" class="platformLayout">
|
|
|
+ <div class="platformImage">
|
|
|
+ <img :src="p.cover" :alt="p.title" />
|
|
|
+ </div>
|
|
|
+ <div class="platformFeatures">
|
|
|
+ <div
|
|
|
+ v-for="it in p.items"
|
|
|
+ :key="it.title"
|
|
|
+ class="platformFeature"
|
|
|
+ >
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-else class="tabContentLayout" style="padding-bottom: 20px">
|
|
|
+ <div class="tabContentImage">
|
|
|
+ <img :src="p.cover" :alt="p.title" />
|
|
|
+ </div>
|
|
|
+ <div class="tabContentFeatures">
|
|
|
+ <div
|
|
|
+ v-for="(it, idx) in p.items"
|
|
|
+ :key="it.title"
|
|
|
+ class="tabFeatureRow"
|
|
|
+ >
|
|
|
+ <div class="tabFeatureMain">
|
|
|
+ <div class="featureTitle">{{ it.title }}</div>
|
|
|
+ <div class="muted featureDesc">{{ it.desc }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -226,7 +269,7 @@ onBeforeUnmount(() => {
|
|
|
<div class="container">
|
|
|
<Reveal as="div" class="sectionHead" :delay="0">
|
|
|
<div>
|
|
|
- <div class="section-kicker">落地方法</div>
|
|
|
+ <!-- <div class="section-kicker">落地方法</div> -->
|
|
|
<h2 class="h2">以数据闭环驱动持续改进</h2>
|
|
|
</div>
|
|
|
</Reveal>
|
|
|
@@ -237,6 +280,7 @@ onBeforeUnmount(() => {
|
|
|
:key="a.step"
|
|
|
as="div"
|
|
|
class="card card-pad approachCard hover-lift"
|
|
|
+ style="border: none"
|
|
|
:delay="60 + idx * 70"
|
|
|
>
|
|
|
<div class="approachStep">{{ a.step }}</div>
|
|
|
@@ -293,7 +337,7 @@ onBeforeUnmount(() => {
|
|
|
|
|
|
.approachTitle {
|
|
|
margin-top: 4px;
|
|
|
- font-weight: 900;
|
|
|
+ /* font-weight: 900; */
|
|
|
margin-bottom: 6px;
|
|
|
}
|
|
|
|
|
|
@@ -350,7 +394,6 @@ onBeforeUnmount(() => {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
-/* Remove PageHero gradients for this page */
|
|
|
:deep(.pageHero) {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
@@ -382,7 +425,6 @@ onBeforeUnmount(() => {
|
|
|
justify-content: center;
|
|
|
gap: 10px;
|
|
|
color: var(--slate-700);
|
|
|
-
|
|
|
letter-spacing: 0.01em;
|
|
|
cursor: pointer;
|
|
|
transition:
|
|
|
@@ -427,14 +469,31 @@ onBeforeUnmount(() => {
|
|
|
scroll-margin-top: calc(var(--header-h) + 84px);
|
|
|
border: 0;
|
|
|
border-radius: 0;
|
|
|
- background: transparent;
|
|
|
+ /* background: transparent; */
|
|
|
box-shadow: none;
|
|
|
margin-top: 50px;
|
|
|
}
|
|
|
|
|
|
+.productSection.hasGrayBg {
|
|
|
+ position: relative;
|
|
|
+ background: #f5f7fa;
|
|
|
+ padding: 40px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.productSection.hasGrayBg::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 100vw;
|
|
|
+ height: 100%;
|
|
|
+ background: #f5f7fa;
|
|
|
+ z-index: -1;
|
|
|
+}
|
|
|
+
|
|
|
.productHead {
|
|
|
padding: 18px 18px 14px;
|
|
|
-
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
@@ -468,38 +527,99 @@ onBeforeUnmount(() => {
|
|
|
.productLead {
|
|
|
margin-top: 10px;
|
|
|
max-width: 92ch;
|
|
|
-
|
|
|
text-align: center;
|
|
|
margin-left: auto;
|
|
|
margin-right: auto;
|
|
|
}
|
|
|
|
|
|
-.productBody {
|
|
|
- padding: 10px 2px 6px;
|
|
|
+.platformLayout {
|
|
|
+ margin-top: 40px;
|
|
|
display: grid;
|
|
|
- grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
- gap: 18px;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 50px;
|
|
|
+ align-items: start;
|
|
|
}
|
|
|
|
|
|
-.featureRow {
|
|
|
+.platformImage {
|
|
|
+ /* border-radius: 16px; */
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 12px 40px rgba(2, 6, 23, 0.12);
|
|
|
+}
|
|
|
+
|
|
|
+.platformImage img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.platformFeatures {
|
|
|
+ display: grid;
|
|
|
+ gap: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.platformFeature {
|
|
|
display: grid;
|
|
|
grid-template-columns: 22px 1fr;
|
|
|
align-items: start;
|
|
|
gap: 16px;
|
|
|
- padding: 22px 22px;
|
|
|
- border: 0;
|
|
|
- /* border-radius: 18px; */
|
|
|
+ padding: 22px;
|
|
|
+ background: #fff;
|
|
|
+ /* border-radius: 16px; */
|
|
|
+ box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
|
|
|
+ min-height: 160px;
|
|
|
+ transition:
|
|
|
+ transform 180ms ease,
|
|
|
+ box-shadow 180ms ease;
|
|
|
+}
|
|
|
+
|
|
|
+.platformFeature:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ box-shadow: 0 12px 32px rgba(2, 6, 23, 0.12);
|
|
|
+}
|
|
|
+
|
|
|
+.tabContentLayout {
|
|
|
+ margin-top: 40px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1.2fr;
|
|
|
+ gap: 50px;
|
|
|
+ align-items: start;
|
|
|
+}
|
|
|
+
|
|
|
+.tabContentImage {
|
|
|
+ /* border-radius: 16px; */
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 12px 40px rgba(2, 6, 23, 0.12);
|
|
|
+ position: sticky;
|
|
|
+ top: calc(var(--header-h) + 100px);
|
|
|
+}
|
|
|
+
|
|
|
+.tabContentImage img {
|
|
|
+ width: 100%;
|
|
|
+ height: 500px;
|
|
|
+ object-fit: cover;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.tabContentFeatures {
|
|
|
+ display: grid;
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.tabFeatureRow {
|
|
|
+ padding: 28px;
|
|
|
background: #fff;
|
|
|
- box-shadow: 0 16px 42px rgba(2, 6, 23, 0.12);
|
|
|
- min-height: 178px;
|
|
|
+ /* border-radius: 16px; */
|
|
|
+ box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
|
|
|
+ min-height: 140px;
|
|
|
transition:
|
|
|
transform 180ms ease,
|
|
|
box-shadow 180ms ease;
|
|
|
}
|
|
|
|
|
|
-.featureRow:hover {
|
|
|
+.tabFeatureRow:hover {
|
|
|
transform: translateY(-2px);
|
|
|
- box-shadow: 0 22px 58px rgba(2, 6, 23, 0.16);
|
|
|
+ box-shadow: 0 12px 32px rgba(2, 6, 23, 0.12);
|
|
|
}
|
|
|
|
|
|
.featureDot {
|
|
|
@@ -513,7 +633,8 @@ onBeforeUnmount(() => {
|
|
|
margin-top: 4px;
|
|
|
}
|
|
|
|
|
|
-.featureMain {
|
|
|
+.featureMain,
|
|
|
+.tabFeatureMain {
|
|
|
min-width: 0;
|
|
|
}
|
|
|
|
|
|
@@ -548,14 +669,34 @@ onBeforeUnmount(() => {
|
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
}
|
|
|
|
|
|
- .productBody {
|
|
|
- grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
+ .platformLayout,
|
|
|
+ .tabContentLayout {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ gap: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabContentImage {
|
|
|
+ position: static;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabContentImage img {
|
|
|
+ height: 300px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media (max-width: 560px) {
|
|
|
- .productBody {
|
|
|
- grid-template-columns: 1fr;
|
|
|
+ .platformFeature,
|
|
|
+ .tabFeatureRow {
|
|
|
+ padding: 20px;
|
|
|
+ min-height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .featureTitle {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .featureDesc {
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -569,7 +710,8 @@ onBeforeUnmount(() => {
|
|
|
transition: none !important;
|
|
|
}
|
|
|
|
|
|
- .featureRow {
|
|
|
+ .platformFeature,
|
|
|
+ .tabFeatureRow {
|
|
|
transition: none !important;
|
|
|
transform: none !important;
|
|
|
}
|
|
|
@@ -577,7 +719,6 @@ onBeforeUnmount(() => {
|
|
|
|
|
|
:deep(.pageHero) {
|
|
|
background-image: url("../assets/images/bg4.png");
|
|
|
-
|
|
|
background-size: cover, cover;
|
|
|
background-position: center, center;
|
|
|
background-repeat: no-repeat, no-repeat;
|
|
|
@@ -585,6 +726,7 @@ onBeforeUnmount(() => {
|
|
|
color: #111;
|
|
|
padding: 80px 0;
|
|
|
}
|
|
|
+
|
|
|
:deep(.pageHero__subtitle) {
|
|
|
color: #4f5055;
|
|
|
}
|
