216 lines
16 KiB
JavaScript
216 lines
16 KiB
JavaScript
import "../components/HeroBanner.vue.mjs";
|
||
import __nuxt_component_0 from "../node_modules/nuxt/dist/app/components/nuxt-link.mjs";
|
||
import { defineComponent, ref, computed, withCtx, createTextVNode, createVNode } from "vue";
|
||
import { ssrRenderAttrs, ssrRenderComponent, ssrRenderList, ssrRenderClass, ssrInterpolate, ssrIncludeBooleanAttr, ssrLooseContain, ssrLooseEqual } from "vue/server-renderer";
|
||
import _sfc_main$1 from "../components/HeroBanner.vue2.mjs";
|
||
const _sfc_main = /* @__PURE__ */ defineComponent({
|
||
__name: "cases",
|
||
__ssrInlineRender: true,
|
||
setup(__props) {
|
||
const industries = ["金融", "电子商务", "制造", "医疗", "教育", "政府", "媒体", "物流"];
|
||
const selectedIndustries = ref([]);
|
||
const sortBy = ref("default");
|
||
const selectedCase = ref(null);
|
||
const caseStudies = [
|
||
{
|
||
title: "某大型电商平台",
|
||
industry: "电子商务",
|
||
date: "2023-05-15",
|
||
summary: "通过AWS云服务，成功应对每年双11销售高峰，提升了网站性能和用户体验，同时降低了运营成本。",
|
||
background: "该客户是中国领先的电子商务平台，年交易额超过100亿元，拥有超过1000万注册用户。随着业务快速发展，特别是在促销活动期间，其传统IT架构难以应对流量峰值。",
|
||
challenges: [
|
||
"传统IT基础设施难以应对促销期间10倍以上的流量峰值",
|
||
"系统扩容周期长，难以快速响应业务需求",
|
||
"运维成本高，人力资源紧张",
|
||
"数据安全和合规要求严格"
|
||
],
|
||
solution: "我们为客户设计并实施了基于AWS的弹性扩展解决方案。使用EC2弹性计算实例和Auto Scaling自动扩展服务，实现了基于流量的自动扩缩容；采用Amazon RDS提供高可用数据库服务；利用ElastiCache加速数据访问；通过CloudFront CDN加速全国内容分发。",
|
||
results: [
|
||
"成功应对促销期间20倍的流量增长，系统零宕机",
|
||
"页面加载时间减少40%，用户体验显著提升",
|
||
"运维工作量减少60%，IT团队可以更专注于业务创新",
|
||
"总体IT成本降低30%，特别是在非促销期间",
|
||
"系统可靠性提升到99.99%"
|
||
]
|
||
},
|
||
{
|
||
title: "某股份制银行",
|
||
industry: "金融",
|
||
date: "2023-03-20",
|
||
summary: "采用AWS金融云解决方案，构建了高安全、高可用的核心业务系统，满足了严格的金融监管要求。",
|
||
background: "该客户是一家拥有50多家分支机构的全国性股份制银行，为了适应数字化转型战略，需要升级其核心业务系统，以提高业务敏捷性和客户体验。",
|
||
challenges: [
|
||
"金融系统对安全性和可用性要求极高",
|
||
"需要满足严格的金融监管合规要求",
|
||
"大量敏感数据需要高级别的保护",
|
||
"系统升级不能影响正常业务运营"
|
||
],
|
||
solution: "我们为客户提供了基于AWS金融云的整体解决方案，包括多区域高可用架构设计、全面的安全防护体系、数据加密和访问控制、灾备和业务连续性方案等。通过与客户IT团队的紧密协作，分阶段实施了系统迁移和升级。",
|
||
results: [
|
||
"成功构建满足CBRC监管要求的高合规云平台",
|
||
"系统可用性达到99.999%，满足金融业务连续性要求",
|
||
"数据安全问题零发生，通过了多次安全审计",
|
||
"业务处理能力提升3倍，支持快速创新",
|
||
"新业务上线时间从月级缩短到周级"
|
||
]
|
||
},
|
||
{
|
||
title: "某医疗健康机构",
|
||
industry: "医疗",
|
||
date: "2022-11-10",
|
||
summary: "利用AWS的AI/ML服务，构建了智能医疗影像分析系统，提高了诊断效率和准确性。",
|
||
background: "该客户是一家拥有多家医院的医疗集团，面临医疗影像数据激增、专业放射科医师短缺的挑战，希望通过AI技术提高医疗影像诊断的效率和准确性。",
|
||
challenges: [
|
||
"每天产生海量医疗影像数据，存储和处理压力大",
|
||
"专业放射科医师资源有限，工作负担重",
|
||
"传统诊断方法耗时长，难以满足快速增长的需求",
|
||
"医疗数据安全和患者隐私保护要求高"
|
||
],
|
||
solution: "我们基于AWS的医疗解决方案，构建了云端医疗影像存储和AI辅助诊断系统。使用S3存储海量影像数据，通过SageMaker构建和部署AI诊断模型，结合医疗专用的安全和合规措施，确保数据安全和患者隐私。",
|
||
results: [
|
||
"医疗影像诊断效率提升60%，大幅减轻医师工作负担",
|
||
"AI辅助诊断系统准确率达到95%以上，优于行业平均水平",
|
||
"患者等待时间从平均24小时减少到6小时",
|
||
"医疗数据安全得到全面保障，符合国家相关法规要求",
|
||
"建立了可持续的医疗AI创新平台，持续改进诊断能力"
|
||
]
|
||
},
|
||
{
|
||
title: "某制造业巨头",
|
||
industry: "制造",
|
||
date: "2022-09-05",
|
||
summary: "通过AWS工业互联网解决方案，实现了生产设备智能监控和预测性维护，提高了生产效率，降低了设备故障率。",
|
||
background: "该客户是一家大型制造企业，拥有多个生产基地和数千台生产设备。传统的设备维护模式效率低下，难以预防突发故障，导致生产线停机和效率损失。",
|
||
challenges: [
|
||
"设备分散在多个地区，管理和监控困难",
|
||
"缺乏有效的设备健康状态监测手段",
|
||
"计划外停机造成巨大的生产损失",
|
||
"海量设备数据无法有效收集和分析"
|
||
],
|
||
solution: "我们基于AWS IoT服务构建了工业互联网平台，实现设备数据实时收集和分析。通过AWS IoT Core连接设备，利用Kinesis处理实时数据流，结合SageMaker构建预测性维护模型，最终通过可视化仪表板展示设备健康状态和预警信息。",
|
||
results: [
|
||
"实现了5000多台设备的实时监控和健康管理",
|
||
"设备计划外停机时间减少70%，生产效率提升25%",
|
||
"维护成本降低40%，设备使用寿命延长15%",
|
||
"通过预测性维护，每年节约维修成本数百万元",
|
||
"建立了数据驱动的智能制造基础，支持企业数字化转型"
|
||
]
|
||
},
|
||
{
|
||
title: "某大型物流企业",
|
||
industry: "物流",
|
||
date: "2022-07-15",
|
||
summary: "利用AWS的大数据和机器学习服务，优化了配送路线和资源调度，提高了配送效率，降低了运营成本。",
|
||
background: "该客户是一家覆盖全国的综合物流服务提供商，日处理订单量超过100万单。随着业务规模扩大，传统的人工调度方式难以应对复杂多变的配送需求，效率低下且成本高昂。",
|
||
challenges: [
|
||
"配送路线规划复杂，人工调度效率低",
|
||
"车辆和人力资源分配不均衡，利用率低",
|
||
"无法根据实时路况和订单变化做出快速调整",
|
||
"缺乏数据支持的决策机制，难以持续优化"
|
||
],
|
||
solution: "我们为客户构建了基于AWS的智能物流调度平台。利用AWS的大数据服务处理和分析海量订单和位置数据，通过机器学习算法建立智能路径规划和资源调度模型，并结合地图服务实现实时路况感知和动态调整。",
|
||
results: [
|
||
"配送效率提升30%，平均配送时间缩短1.5小时",
|
||
"车辆利用率提高40%，每年节约燃油成本数百万元",
|
||
"客户满意度提升25%，准时送达率达到98%",
|
||
"系统自动化程度高，调度人员需求减少50%",
|
||
"建立了数据驱动的持续优化机制，物流成本逐年下降"
|
||
]
|
||
},
|
||
{
|
||
title: "某在线教育平台",
|
||
industry: "教育",
|
||
date: "2022-05-08",
|
||
summary: "通过AWS云服务，构建了高可靠、低延迟的在线教育直播和点播平台，支持百万级学生同时在线学习。",
|
||
background: "该客户是一家专注K12领域的在线教育平台，提供直播和点播课程服务。随着用户规模快速增长，特别是在疫情期间，平台面临巨大的并发访问压力和用户体验挑战。",
|
||
challenges: [
|
||
"高峰期需支持百万级用户同时在线学习",
|
||
"直播课程对系统稳定性和延迟要求高",
|
||
"教学视频存储和分发成本高",
|
||
"用户分布广泛，跨地区服务质量难以保证"
|
||
],
|
||
solution: "我们基于AWS设计了可弹性扩展的在线教育平台解决方案。使用EC2和Auto Scaling服务支持高并发访问，通过MediaLive和MediaPackage提供低延迟直播服务，利用S3和CloudFront实现视频内容的高效存储和分发，同时通过多区域部署确保全国范围内的服务质量。",
|
||
results: [
|
||
"成功支持200万+用户同时在线学习，系统稳定无卡顿",
|
||
"直播延迟控制在2秒以内，大幅提升师生互动体验",
|
||
"通过内容分发网络，全国各地用户访问速度提升60%",
|
||
"视频存储和分发成本降低50%，支持业务快速扩张",
|
||
"平台可用性达到99.99%，赢得用户信赖"
|
||
]
|
||
}
|
||
];
|
||
const filteredCases = computed(() => {
|
||
let result = [...caseStudies];
|
||
if (selectedIndustries.value.length > 0) {
|
||
result = result.filter((item) => selectedIndustries.value.includes(item.industry));
|
||
}
|
||
if (sortBy.value === "latest") {
|
||
result.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
|
||
}
|
||
return result;
|
||
});
|
||
return (_ctx, _push, _parent, _attrs) => {
|
||
const _component_HeroBanner = _sfc_main$1;
|
||
const _component_NuxtLink = __nuxt_component_0;
|
||
_push(`<div${ssrRenderAttrs(_attrs)}>`);
|
||
_push(ssrRenderComponent(_component_HeroBanner, {
|
||
title: "客户案例",
|
||
subtitle: "看看其他企业如何利用AWS云服务提升业务价值"
|
||
}, null, _parent));
|
||
_push(`<section class="py-10"><div class="container"><div class="bg-white p-6 rounded-lg shadow-md"><div class="flex flex-wrap items-center justify-between gap-4"><div class="flex flex-wrap items-center gap-4"><span class="text-gray-700 font-medium">按行业筛选：</span><div class="flex flex-wrap gap-2"><!--[-->`);
|
||
ssrRenderList(industries, (industry) => {
|
||
_push(`<button class="${ssrRenderClass([
|
||
"px-4 py-2 rounded-full text-sm",
|
||
selectedIndustries.value.includes(industry) ? "bg-secondary text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
|
||
])}">${ssrInterpolate(industry)}</button>`);
|
||
});
|
||
_push(`<!--]--><button class="px-4 py-2 rounded-full text-sm bg-gray-100 text-gray-700 hover:bg-gray-200"> 全部 </button></div></div><div class="flex items-center"><span class="text-gray-700 font-medium mr-4">排序方式：</span><select class="px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-secondary focus:border-transparent"><option value="latest"${ssrIncludeBooleanAttr(Array.isArray(sortBy.value) ? ssrLooseContain(sortBy.value, "latest") : ssrLooseEqual(sortBy.value, "latest")) ? " selected" : ""}>最新案例</option><option value="default"${ssrIncludeBooleanAttr(Array.isArray(sortBy.value) ? ssrLooseContain(sortBy.value, "default") : ssrLooseEqual(sortBy.value, "default")) ? " selected" : ""}>默认排序</option></select></div></div></div></div></section><section class="py-12"><div class="container">`);
|
||
if (filteredCases.value.length === 0) {
|
||
_push(`<div class="text-center py-16"><i class="fas fa-search text-4xl text-gray-300 mb-4"></i><p class="text-xl text-gray-500">没有找到符合条件的案例</p><button class="mt-4 text-secondary hover:text-secondary/90"> 清除筛选条件 </button></div>`);
|
||
} else {
|
||
_push(`<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"><!--[-->`);
|
||
ssrRenderList(filteredCases.value, (case_item, index) => {
|
||
_push(`<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"><div class="h-48 bg-gray-200 relative overflow-hidden"><div class="absolute top-0 right-0 bg-secondary text-white px-3 py-1 text-sm">${ssrInterpolate(case_item.industry)}</div></div><div class="p-6"><h3 class="text-2xl font-semibold mb-4">${ssrInterpolate(case_item.title)}</h3><p class="text-gray-600 mb-6">${ssrInterpolate(case_item.summary)}</p><div class="flex justify-between items-center"><button class="text-secondary hover:text-secondary/90 flex items-center"> 阅读详情 <i class="fas fa-arrow-right ml-2"></i></button><span class="text-sm text-gray-500">${ssrInterpolate(case_item.date)}</span></div></div></div>`);
|
||
});
|
||
_push(`<!--]--></div>`);
|
||
}
|
||
_push(`</div></section>`);
|
||
if (selectedCase.value) {
|
||
_push(`<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"><div class="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto"><div class="p-6 border-b"><div class="flex justify-between items-center"><h3 class="text-2xl font-bold">${ssrInterpolate(selectedCase.value.title)}</h3><button class="text-gray-500 hover:text-gray-700"><i class="fas fa-times text-xl"></i></button></div></div><div class="p-6"><div class="flex flex-wrap gap-2 mb-6"><span class="px-3 py-1 bg-secondary/10 text-secondary text-sm rounded-full">${ssrInterpolate(selectedCase.value.industry)}</span><span class="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full">${ssrInterpolate(selectedCase.value.date)}</span></div><h4 class="text-xl font-semibold mb-4">客户背景</h4><p class="text-gray-600 mb-6">${ssrInterpolate(selectedCase.value.background)}</p><h4 class="text-xl font-semibold mb-4">面临挑战</h4><ul class="list-disc pl-5 mb-6 space-y-2"><!--[-->`);
|
||
ssrRenderList(selectedCase.value.challenges, (challenge, idx) => {
|
||
_push(`<li class="text-gray-600">${ssrInterpolate(challenge)}</li>`);
|
||
});
|
||
_push(`<!--]--></ul><h4 class="text-xl font-semibold mb-4">解决方案</h4><p class="text-gray-600 mb-4">${ssrInterpolate(selectedCase.value.solution)}</p><h4 class="text-xl font-semibold mb-4">业务成果</h4><ul class="list-disc pl-5 mb-6 space-y-2"><!--[-->`);
|
||
ssrRenderList(selectedCase.value.results, (result, idx) => {
|
||
_push(`<li class="text-gray-600">${ssrInterpolate(result)}</li>`);
|
||
});
|
||
_push(`<!--]--></ul></div><div class="p-6 border-t bg-gray-50"><div class="flex justify-end"><button class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300"> 关闭 </button></div></div></div></div>`);
|
||
} else {
|
||
_push(`<!---->`);
|
||
}
|
||
_push(`<section class="py-16 bg-primary text-white"><div class="container text-center"><h2 class="text-4xl font-bold mb-6">想了解更多客户案例?</h2><p class="text-xl mb-8 max-w-2xl mx-auto leading-relaxed">联系我们获取更多行业相关的AWS云服务成功案例</p>`);
|
||
_push(ssrRenderComponent(_component_NuxtLink, {
|
||
to: "/contact",
|
||
class: "inline-flex items-center bg-white text-black px-8 py-4 rounded-lg hover:bg-gray-100 transition-colors duration-300 text-lg font-semibold"
|
||
}, {
|
||
default: withCtx((_, _push2, _parent2, _scopeId) => {
|
||
if (_push2) {
|
||
_push2(` 联系我们 <i class="fas fa-arrow-right ml-2"${_scopeId}></i>`);
|
||
} else {
|
||
return [
|
||
createTextVNode(" 联系我们 "),
|
||
createVNode("i", { class: "fas fa-arrow-right ml-2" })
|
||
];
|
||
}
|
||
}),
|
||
_: 1
|
||
}, _parent));
|
||
_push(`</div></section></div>`);
|
||
};
|
||
}
|
||
});
|
||
export {
|
||
_sfc_main as default
|
||
};
|
||
//# sourceMappingURL=cases.vue2.mjs.map
|