688 lines
39 KiB
Vue
688 lines
39 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 页面标题 -->
|
||
<Banner
|
||
:titleKey="'cases.hero.title'"
|
||
:subtitleKey="'cases.hero.subtitle'"
|
||
bgImage="/images/bg/cases-bg.webp"
|
||
:descriptionKey="'cases.hero.description'"
|
||
>
|
||
<!-- 按钮或其他内容 -->
|
||
</Banner>
|
||
<Process />
|
||
<!-- 案例筛选 -->
|
||
<section class="py-12">
|
||
<div class="container">
|
||
<div class="bg-white dark:bg-gray-800 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 dark:text-gray-300 font-medium">{{ $t('cases.filter.byIndustry') }}</span>
|
||
<div class="flex flex-wrap gap-2">
|
||
<button
|
||
v-for="industry in industries"
|
||
:key="industry"
|
||
@click="toggleIndustryFilter(industry)"
|
||
:class="[
|
||
'px-4 py-2 rounded-full text-sm',
|
||
selectedIndustries.includes(industry)
|
||
? 'bg-secondary text-white'
|
||
: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
|
||
]"
|
||
>
|
||
{{ industry }}
|
||
</button>
|
||
<button
|
||
@click="clearIndustryFilters"
|
||
class="px-4 py-2 rounded-full text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600"
|
||
>
|
||
{{ $t('cases.filter.all') }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span class="text-gray-700 dark:text-gray-300 font-medium mr-4">{{ $t('cases.filter.sortBy') }}</span>
|
||
<select
|
||
v-model="sortBy"
|
||
class="px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md focus:ring-2 focus:ring-secondary dark:focus:ring-blue-500 focus:border-transparent"
|
||
>
|
||
<option value="latest">{{ $t('cases.filter.latest') }}</option>
|
||
<option value="default">{{ $t('cases.filter.default') }}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 案例列表 -->
|
||
<section class="py-12">
|
||
<div class="container">
|
||
<div v-if="filteredCases.length === 0" class="text-center py-16">
|
||
<i class="fas fa-search text-4xl text-gray-300 dark:text-gray-600 mb-4"></i>
|
||
<p class="text-xl text-gray-500 dark:text-gray-400">{{ $t('cases.list.noResults') }}</p>
|
||
<button @click="clearIndustryFilters" class="mt-4 text-secondary dark:text-blue-400 hover:text-secondary/90 dark:hover:text-blue-300">
|
||
{{ $t('cases.list.clearFilters') }}
|
||
</button>
|
||
</div>
|
||
|
||
<div v-else>
|
||
<!-- 第一个案例 - 横版布局 -->
|
||
<div v-if="filteredCases.length > 0" class="mb-12 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300">
|
||
<div class="flex flex-col md:flex-row relative">
|
||
<div class="md:w-1/2 h-64 md:h-auto relative">
|
||
<img :src="'/'+filteredCases[0].images" :alt="filteredCases[0].title" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="md:w-1/2 p-8 flex flex-col justify-between">
|
||
<div>
|
||
<div class="flex items-center mb-3">
|
||
<span class="px-3 py-1 bg-blue-500/10 dark:bg-blue-400/20 text-blue-500 dark:text-blue-400 text-sm rounded-full mr-2">
|
||
{{ filteredCases[0].industry }}
|
||
</span>
|
||
<span class="text-sm text-gray-500 dark:text-gray-400">{{ filteredCases[0].date }}</span>
|
||
</div>
|
||
<h3 class="text-2xl font-bold mb-4 dark:text-white">{{ filteredCases[0].title }}</h3>
|
||
<p class="text-gray-600 dark:text-gray-300 mb-6">{{ filteredCases[0].summary }}</p>
|
||
</div>
|
||
<div class="flex justify-between items-center">
|
||
<button @click="openCaseDetail(filteredCases[0])" class="text-blue-500 dark:text-blue-400 hover:text-red-500/90 dark:hover:text-blue-300 flex items-center">
|
||
{{ $t('cases.list.readMore') }}
|
||
<i class="fas fa-arrow-right ml-2"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 其余案例 - 网格布局 -->
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<div
|
||
v-for="(case_item, index) in filteredCases.slice(1)"
|
||
:key="index"
|
||
class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 relative"
|
||
>
|
||
|
||
<div class="h-48 bg-cover bg-center">
|
||
<img :src="'/'+case_item.images" :alt="case_item.title" class="w-full h-full object-cover">
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="flex items-center mb-3">
|
||
<span class="px-2 py-1 bg-secondary/10 dark:bg-blue-400/20 text-secondary dark:text-blue-400 text-xs rounded-full mr-2">
|
||
{{ case_item.industry }}
|
||
</span>
|
||
<span class="text-xs text-gray-500 dark:text-gray-400">{{ case_item.date }}</span>
|
||
</div>
|
||
<h3 class="text-xl font-semibold mb-3 dark:text-white">{{ case_item.title }}</h3>
|
||
<p class="text-gray-600 dark:text-gray-300 mb-4 text-sm line-clamp-3">{{ case_item.summary }}</p>
|
||
<div class="flex justify-between items-center">
|
||
<button @click="openCaseDetail(case_item)" class="text-secondary dark:text-blue-400 hover:text-secondary/90 dark:hover:text-blue-300 flex items-center text-sm">
|
||
{{ $t('cases.list.readMore') }}
|
||
<i class="fas fa-arrow-right ml-2"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 案例详情弹窗 -->
|
||
<div v-if="selectedCase" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||
<div class="bg-white dark:bg-gray-800 rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
|
||
<div class="p-6 border-b dark:border-gray-700">
|
||
<div class="flex justify-between items-center">
|
||
<h3 class="text-2xl font-bold dark:text-white">{{ selectedCase.title }}</h3>
|
||
<button @click="selectedCase = null" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
|
||
<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 dark:bg-blue-400/20 text-secondary dark:text-blue-400 text-sm rounded-full">
|
||
{{ selectedCase.industry }}
|
||
</span>
|
||
<span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm rounded-full">
|
||
{{ selectedCase.date }}
|
||
</span>
|
||
</div>
|
||
|
||
<h4 class="text-xl font-semibold mb-4 dark:text-white">{{ $t('cases.detail.background') }}</h4>
|
||
<p class="text-gray-600 dark:text-gray-300 mb-6">{{ selectedCase.background }}</p>
|
||
|
||
<h4 class="text-xl font-semibold mb-4 dark:text-white">{{ $t('cases.detail.challenges') }}</h4>
|
||
<ul class="list-disc pl-5 mb-6 space-y-2">
|
||
<li v-for="(challenge, idx) in selectedCase.challenges" :key="idx" class="text-gray-600 dark:text-gray-300">
|
||
{{ challenge }}
|
||
</li>
|
||
</ul>
|
||
|
||
<h4 class="text-xl font-semibold mb-4 dark:text-white">{{ $t('cases.detail.solution') }}</h4>
|
||
<p class="text-gray-600 dark:text-gray-300 mb-4">{{ selectedCase.solution }}</p>
|
||
|
||
<h4 class="text-xl font-semibold mb-4 dark:text-white">{{ $t('cases.detail.results') }}</h4>
|
||
<ul class="list-disc pl-5 mb-6 space-y-2">
|
||
<li v-for="(result, idx) in selectedCase.results" :key="idx" class="text-gray-600 dark:text-gray-300">
|
||
{{ result }}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="p-6 border-t dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
|
||
<div class="flex justify-end">
|
||
<button @click="selectedCase = null" class="px-4 py-2 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-500">
|
||
{{ $t('cases.detail.close') }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 联系我们 -->
|
||
<section class="py-16 bg-primary dark:bg-blue-800 text-white">
|
||
<div class="container text-center">
|
||
<h2 class="text-4xl font-bold mb-6">{{ $t('cases.contact.title') }}</h2>
|
||
<p class="text-xl mb-8 max-w-2xl mx-auto leading-relaxed">{{ $t('cases.contact.subtitle') }}</p>
|
||
<NuxtLink to="/contact" class="inline-flex items-center bg-white dark:bg-gray-800 text-black dark:text-white px-8 py-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-300 text-lg font-semibold">
|
||
{{ $t('cases.contact.button') }}
|
||
<i class="fas fa-arrow-right ml-2"></i>
|
||
</NuxtLink>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed } from 'vue';
|
||
import { useI18n } from 'vue-i18n';
|
||
import Process from '~/components/Process.vue';
|
||
const { t, locale } = useI18n();
|
||
|
||
import { useHead } from "nuxt/app";
|
||
useHead({
|
||
title: () => t("meta.cases.title"),
|
||
meta: [
|
||
{ name: "description", content: () => t("meta.cases.description") },
|
||
{ name: "keywords", content: () => t("meta.cases.keywords") },
|
||
],
|
||
});
|
||
// 所有行业标签
|
||
const industries = computed(() => {
|
||
if (locale.value === 'zh') {
|
||
return ['金融', '电子商务', '制造', '医疗', '教育', '政府', '媒体', '物流'];
|
||
} else if (locale.value === 'zh-TW') {
|
||
return ['金融', '電子商務', '製造', '醫療', '教育', '政府', '媒體', '物流'];
|
||
} else {
|
||
return ['Finance', 'E-commerce', 'Manufacturing', 'Healthcare', 'Education', 'Government', 'Media', 'Logistics'];
|
||
}
|
||
});
|
||
|
||
// 筛选和排序状态
|
||
const selectedIndustries = ref<string[]>([]);
|
||
const sortBy = ref('default');
|
||
const selectedCase = ref<any>(null);
|
||
|
||
// 客户案例数据
|
||
interface CaseStudy {
|
||
title: string;
|
||
industry: string;
|
||
date: string;
|
||
images: string;
|
||
summary: string;
|
||
background: string;
|
||
challenges: string[];
|
||
solution: string;
|
||
results: string[];
|
||
}
|
||
|
||
const caseStudiesZh: CaseStudy[] = [
|
||
{
|
||
title: '某大型电商平台',
|
||
industry: '电子商务',
|
||
date: '2023-05-15',
|
||
images: 'images/cases/case1.png',
|
||
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',
|
||
images: 'images/cases/case2.png',
|
||
summary: '采用AWS金融云解决方案，构建了高安全、高可用的核心业务系统，满足了严格的金融监管要求。',
|
||
background: '该客户是一家拥有50多家分支机构的全国性股份制银行，为了适应数字化转型战略，需要升级其核心业务系统，以提高业务敏捷性和客户体验。',
|
||
challenges: [
|
||
'金融系统对安全性和可用性要求极高',
|
||
'需要满足严格的金融监管合规要求',
|
||
'大量敏感数据需要高级别的保护',
|
||
'系统升级不能影响正常业务运营'
|
||
],
|
||
solution: '我们为客户提供了基于AWS金融云的整体解决方案，包括多区域高可用架构设计、全面的安全防护体系、数据加密和访问控制、灾备和业务连续性方案等。通过与客户IT团队的紧密协作，分阶段实施了系统迁移和升级。',
|
||
results: [
|
||
'成功构建满足CBRC监管要求的高合规云平台',
|
||
'系统可用性达到99.999%，满足金融业务连续性要求',
|
||
'数据安全问题零发生，通过了多次安全审计',
|
||
'业务处理能力提升3倍，支持快速创新',
|
||
'新业务上线时间从月级缩短到周级'
|
||
]
|
||
},
|
||
{
|
||
title: '某医疗健康机构',
|
||
industry: '医疗',
|
||
date: '2022-11-10',
|
||
images: 'images/cases/case3.png',
|
||
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',
|
||
images: 'images/cases/case4.png',
|
||
summary: '通过AWS工业互联网解决方案，实现了生产设备智能监控和预测性维护，提高了生产效率，降低了设备故障率。',
|
||
background: '该客户是一家大型制造企业，拥有多个生产基地和数千台生产设备。传统的设备维护模式效率低下，难以预防突发故障，导致生产线停机和效率损失。',
|
||
challenges: [
|
||
'设备分散在多个地区，管理和监控困难',
|
||
'缺乏有效的设备健康状态监测手段',
|
||
'计划外停机造成巨大的生产损失',
|
||
'海量设备数据无法有效收集和分析'
|
||
],
|
||
solution: '我们基于AWS IoT服务构建了工业互联网平台，实现设备数据实时收集和分析。通过AWS IoT Core连接设备，利用Kinesis处理实时数据流，结合SageMaker构建预测性维护模型，最终通过可视化仪表板展示设备健康状态和预警信息。',
|
||
results: [
|
||
'实现了5000多台设备的实时监控和健康管理',
|
||
'设备计划外停机时间减少70%，生产效率提升25%',
|
||
'维护成本降低40%，设备使用寿命延长15%',
|
||
'通过预测性维护，每年节约维修成本数百万元',
|
||
'建立了数据驱动的智能制造基础，支持企业数字化转型'
|
||
]
|
||
},
|
||
{
|
||
title: '某大型物流企业',
|
||
industry: '物流',
|
||
date: '2022-07-15',
|
||
images: 'images/cases/case5.png',
|
||
summary: '利用AWS的大数据和机器学习服务，优化了配送路线和资源调度，提高了配送效率，降低了运营成本。',
|
||
background: '该客户是一家覆盖全国的综合物流服务提供商，日处理订单量超过100万单。随着业务规模扩大，传统的人工调度方式难以应对复杂多变的配送需求，效率低下且成本高昂。',
|
||
challenges: [
|
||
'配送路线规划复杂，人工调度效率低',
|
||
'车辆和人力资源分配不均衡，利用率低',
|
||
'无法根据实时路况和订单变化做出快速调整',
|
||
'缺乏数据支持的决策机制，难以持续优化'
|
||
],
|
||
solution: '我们为客户构建了基于AWS的智能物流调度平台。利用AWS的大数据服务处理和分析海量订单和位置数据，通过机器学习算法建立智能路径规划和资源调度模型，并结合地图服务实现实时路况感知和动态调整。',
|
||
results: [
|
||
'配送效率提升30%，平均配送时间缩短1.5小时',
|
||
'车辆利用率提高40%，每年节约燃油成本数百万元',
|
||
'客户满意度提升25%，准时送达率达到98%',
|
||
'系统自动化程度高，调度人员需求减少50%',
|
||
'建立了数据驱动的持续优化机制，物流成本逐年下降'
|
||
]
|
||
},
|
||
{
|
||
title: '某在线教育平台',
|
||
industry: '教育',
|
||
date: '2022-05-08',
|
||
images: 'images/cases/case6.png',
|
||
summary: '通过AWS云服务，构建了高可靠、低延迟的在线教育直播和点播平台，支持百万级学生同时在线学习。',
|
||
background: '该客户是一家专注K12领域的在线教育平台，提供直播和点播课程服务。随着用户规模快速增长，特别是在疫情期间，平台面临巨大的并发访问压力和用户体验挑战。',
|
||
challenges: [
|
||
'高峰期需支持百万级用户同时在线学习',
|
||
'直播课程对系统稳定性和延迟要求高',
|
||
'教学视频存储和分发成本高',
|
||
'用户分布广泛，跨地区服务质量难以保证'
|
||
],
|
||
solution: '我们基于AWS设计了可弹性扩展的在线教育平台解决方案。使用EC2和Auto Scaling服务支持高并发访问，通过MediaLive和MediaPackage提供低延迟直播服务，利用S3和CloudFront实现视频内容的高效存储和分发，同时通过多区域部署确保全国范围内的服务质量。',
|
||
results: [
|
||
'成功支持200万+用户同时在线学习，系统稳定无卡顿',
|
||
'直播延迟控制在2秒以内，大幅提升师生互动体验',
|
||
'通过内容分发网络，全国各地用户访问速度提升60%',
|
||
'视频存储和分发成本降低50%，支持业务快速扩张',
|
||
'平台可用性达到99.99%，赢得用户信赖'
|
||
]
|
||
}
|
||
];
|
||
|
||
const caseStudiesZhTW: CaseStudy[] = [
|
||
{
|
||
title: '某大型電商平台',
|
||
industry: '電子商務',
|
||
date: '2023-05-15',
|
||
images: 'images/cases/case1.png',
|
||
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',
|
||
images: 'images/cases/case2.png',
|
||
summary: '採用AWS金融雲解決方案，構建了高安全、高可用的核心業務系統，滿足了嚴格的金融監管要求。',
|
||
background: '該客戶是一家擁有50多家分支機構的全國性股份制銀行，為了適應數字化轉型戰略，需要升級其核心業務系統，以提高業務敏捷性和客戶體驗。',
|
||
challenges: [
|
||
'金融系統對安全性和可用性要求極高',
|
||
'需要滿足嚴格的金融監管合規要求',
|
||
'大量敏感數據需要高級別的保護',
|
||
'系統升級不能影響正常業務運營'
|
||
],
|
||
solution: '我們為客戶提供了基於AWS金融雲的整體解決方案，包括多區域高可用架構設計、全面的安全防護體系、數據加密和訪問控制、災備和業務連續性方案等。通過與客戶IT團隊的緊密協作，分階段實施了系統遷移和升級。',
|
||
results: [
|
||
'成功構建滿足CBRC監管要求的高合規雲平台',
|
||
'系統可用性達到99.999%，滿足金融業務連續性要求',
|
||
'數據安全問題零發生，通過了多次安全審計',
|
||
'業務處理能力提升3倍，支持快速創新',
|
||
'新業務上線時間從月級縮短到週級'
|
||
]
|
||
},
|
||
{
|
||
title: '某醫療健康機構',
|
||
industry: '醫療',
|
||
date: '2022-11-10',
|
||
images: 'images/cases/case3.png',
|
||
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',
|
||
images: 'images/cases/case4.png',
|
||
summary: '通過AWS工業互聯網解決方案，實現了生產設備智能監控和預測性維護，提高了生產效率，降低了設備故障率。',
|
||
background: '該客戶是一家大型製造企業，擁有多個生產基地和數千台生產設備。傳統的設備維護模式效率低下，難以預防突發故障，導致生產線停機和效率損失。',
|
||
challenges: [
|
||
'設備分散在多個地區，管理和監控困難',
|
||
'缺乏有效的設備健康狀態監測手段',
|
||
'計劃外停機造成巨大的生產損失',
|
||
'海量設備數據無法有效收集和分析'
|
||
],
|
||
solution: '我們基於AWS IoT服務構建了工業互聯網平台，實現設備數據實時收集和分析。通過AWS IoT Core連接設備，利用Kinesis處理實時數據流，結合SageMaker構建預測性維護模型，最終通過可視化儀表板展示設備健康狀態和預警信息。',
|
||
results: [
|
||
'實現了5000多台設備的實時監控和健康管理',
|
||
'設備計劃外停機時間減少70%，生產效率提升25%',
|
||
'維護成本降低40%，設備使用壽命延長15%',
|
||
'通過預測性維護，每年節約維修成本數百萬元',
|
||
'建立了數據驅動的智能製造基礎，支持企業數字化轉型'
|
||
]
|
||
},
|
||
{
|
||
title: '某大型物流企業',
|
||
industry: '物流',
|
||
date: '2022-07-15',
|
||
images: 'images/cases/case5.png',
|
||
summary: '利用AWS的大數據和機器學習服務，優化了配送路線和資源調度，提高了配送效率，降低了運營成本。',
|
||
background: '該客戶是一家覆蓋全國的綜合物流服務提供商，日處理訂單量超過100萬單。隨著業務規模擴大，傳統的人工調度方式難以應對複雜多變的配送需求，效率低下且成本高昂。',
|
||
challenges: [
|
||
'配送路線規劃複雜，人工調度效率低',
|
||
'車輛和人力資源分配不均衡，利用率低',
|
||
'無法根據實時路況和訂單變化做出快速調整',
|
||
'缺乏數據支持的決策機制，難以持續優化'
|
||
],
|
||
solution: '我們為客戶構建了基於AWS的智能物流調度平台。利用AWS的大數據服務處理和分析海量訂單和位置數據，通過機器學習算法建立智能路徑規劃和資源調度模型，並結合地圖服務實現實時路況感知和動態調整。',
|
||
results: [
|
||
'配送效率提升30%，平均配送時間縮短1.5小時',
|
||
'車輛利用率提高40%，每年節約燃油成本數百萬元',
|
||
'客戶滿意度提升25%，準時送達率達到98%',
|
||
'系統自動化程度高，調度人員需求減少50%',
|
||
'建立了數據驅動的持續優化機制，物流成本逐年下降'
|
||
]
|
||
},
|
||
{
|
||
title: '某線上教育平台',
|
||
industry: '教育',
|
||
date: '2022-05-08',
|
||
images: 'images/cases/case6.png',
|
||
summary: '通過AWS雲服務，構建了高可靠、低延遲的線上教育直播和點播平台，支持百萬級學生同時在線學習。',
|
||
background: '該客戶是一家專注K12領域的線上教育平台，提供直播和點播課程服務。隨著用戶規模快速增長，特別是在疫情期間，平台面臨巨大的並發訪問壓力和用戶體驗挑戰。',
|
||
challenges: [
|
||
'高峰期需支持百萬級用戶同時在線學習',
|
||
'直播課程對系統穩定性和延遲要求高',
|
||
'教學視頻存儲和分發成本高',
|
||
'用戶分布廣泛，跨地區服務質量難以保證'
|
||
],
|
||
solution: '我們基於AWS設計了可彈性擴展的線上教育平台解決方案。使用EC2和Auto Scaling服務支持高並發訪問，通過MediaLive和MediaPackage提供低延遲直播服務，利用S3和CloudFront實現視頻內容的高效存儲和分發，同時通過多區域部署確保全國範圍內的服務質量。',
|
||
results: [
|
||
'成功支持200萬+用戶同時在線學習，系統穩定無卡頓',
|
||
'直播延遲控制在2秒以內，大幅提升師生互動體驗',
|
||
'通過內容分發網絡，全國各地用戶訪問速度提升60%',
|
||
'視頻存儲和分發成本降低50%，支持業務快速擴張',
|
||
'平台可用性達到99.99%，贏得用戶信賴'
|
||
]
|
||
}
|
||
];
|
||
|
||
const caseStudiesEn: CaseStudy[] = [
|
||
{
|
||
title: 'Major E-commerce Platform',
|
||
industry: 'E-commerce',
|
||
date: '2023-05-15',
|
||
images: 'images/cases/case1.png',
|
||
summary: 'Successfully handled annual Double 11 sales peak through AWS cloud services, improving website performance and user experience while reducing operating costs.',
|
||
background: 'The client is a leading e-commerce platform in China with annual transactions exceeding 10 billion yuan and over 10 million registered users. As the business rapidly developed, especially during promotional periods, their traditional IT architecture struggled to handle traffic peaks.',
|
||
challenges: [
|
||
'Traditional IT infrastructure unable to handle 10x traffic spikes during promotions',
|
||
'Long system expansion cycles, difficult to quickly respond to business needs',
|
||
'High maintenance costs and limited human resources',
|
||
'Strict data security and compliance requirements'
|
||
],
|
||
solution: 'We designed and implemented an AWS-based elastic scaling solution for the client. Using EC2 elastic computing instances and Auto Scaling services, we achieved automatic scaling based on traffic; deployed Amazon RDS for highly available database services; used ElastiCache to accelerate data access; and implemented CloudFront CDN to accelerate nationwide content delivery.',
|
||
results: [
|
||
'Successfully handled 20x traffic growth during promotions with zero downtime',
|
||
'Reduced page loading time by 40%, significantly improving user experience',
|
||
'Reduced operations workload by 60%, allowing IT teams to focus more on business innovation',
|
||
'Lowered overall IT costs by 30%, especially during non-promotional periods',
|
||
'Improved system reliability to 99.99%'
|
||
]
|
||
},
|
||
{
|
||
title: 'Joint-Stock Bank',
|
||
industry: 'Finance',
|
||
date: '2023-03-20',
|
||
images: 'images/cases/case2.png',
|
||
summary: 'Adopted AWS financial cloud solutions to build highly secure and available core business systems that meet strict financial regulatory requirements.',
|
||
background: 'The client is a national joint-stock bank with over 50 branches. To adapt to their digital transformation strategy, they needed to upgrade their core business systems to improve business agility and customer experience.',
|
||
challenges: [
|
||
'Extremely high security and availability requirements for financial systems',
|
||
'Need to meet strict financial regulatory compliance requirements',
|
||
'Large amounts of sensitive data requiring high-level protection',
|
||
'System upgrades cannot affect normal business operations'
|
||
],
|
||
solution: 'We provided the client with a comprehensive solution based on AWS Financial Cloud, including multi-region high-availability architecture design, comprehensive security protection systems, data encryption and access control, disaster recovery and business continuity solutions, etc. Through close collaboration with the client\'s IT team, we implemented system migration and upgrades in phases.',
|
||
results: [
|
||
'Successfully built a highly compliant cloud platform meeting CBRC regulatory requirements',
|
||
'System availability reached 99.999%, meeting financial business continuity requirements',
|
||
'Zero data security incidents, passed multiple security audits',
|
||
'Business processing capacity increased 3x, supporting rapid innovation',
|
||
'New business launch time reduced from months to weeks'
|
||
]
|
||
},
|
||
{
|
||
title: 'Healthcare Organization',
|
||
industry: 'Healthcare',
|
||
date: '2022-11-10',
|
||
images: 'images/cases/case3.png',
|
||
summary: 'Leveraged AWS AI/ML services to build an intelligent medical imaging analysis system, improving diagnostic efficiency and accuracy.',
|
||
background: 'The client is a medical group with multiple hospitals, facing challenges of surging medical imaging data and shortage of professional radiologists. They hoped to improve the efficiency and accuracy of medical image diagnosis through AI technology.',
|
||
challenges: [
|
||
'Massive medical imaging data generated daily, creating storage and processing pressure',
|
||
'Limited professional radiologist resources with heavy workloads',
|
||
'Traditional diagnostic methods are time-consuming and struggle to meet rapidly growing demand',
|
||
'High requirements for medical data security and patient privacy protection'
|
||
],
|
||
solution: 'Based on AWS medical solutions, we built a cloud-based medical image storage and AI-assisted diagnostic system. We used S3 to store massive image data, built and deployed AI diagnostic models through SageMaker, and combined medical-specific security and compliance measures to ensure data security and patient privacy.',
|
||
results: [
|
||
'Medical image diagnostic efficiency improved by 60%, significantly reducing physician workload',
|
||
'AI-assisted diagnostic system accuracy reached over 95%, exceeding industry average',
|
||
'Patient waiting time reduced from an average of 24 hours to 6 hours',
|
||
'Medical data security comprehensively protected, complying with national regulations',
|
||
'Established a sustainable medical AI innovation platform with continuously improving diagnostic capabilities'
|
||
]
|
||
},
|
||
{
|
||
title: 'Manufacturing Giant',
|
||
industry: 'Manufacturing',
|
||
date: '2022-09-05',
|
||
images: 'images/cases/case4.png',
|
||
summary: 'Implemented intelligent monitoring and predictive maintenance of production equipment through AWS industrial IoT solutions, improving production efficiency and reducing equipment failure rates.',
|
||
background: 'The client is a large manufacturing enterprise with multiple production bases and thousands of production equipment. Traditional equipment maintenance models were inefficient and struggled to prevent unexpected failures, leading to production line downtime and efficiency losses.',
|
||
challenges: [
|
||
'Equipment scattered across multiple regions, difficult to manage and monitor',
|
||
'Lack of effective equipment health monitoring means',
|
||
'Unplanned downtime causing significant production losses',
|
||
'Massive equipment data cannot be effectively collected and analyzed'
|
||
],
|
||
solution: 'We built an industrial internet platform based on AWS IoT services for real-time collection and analysis of equipment data. We connected devices through AWS IoT Core, processed real-time data streams with Kinesis, built predictive maintenance models with SageMaker, and ultimately displayed equipment health status and early warnings through visualization dashboards.',
|
||
results: [
|
||
'Achieved real-time monitoring and health management of over 5,000 devices',
|
||
'Reduced unplanned equipment downtime by 70%, improving production efficiency by 25%',
|
||
'Reduced maintenance costs by 40%, extended equipment life by 15%',
|
||
'Saved millions in repair costs annually through predictive maintenance',
|
||
'Established data-driven smart manufacturing foundation supporting enterprise digital transformation'
|
||
]
|
||
},
|
||
{
|
||
title: 'Major Logistics Enterprise',
|
||
industry: 'Logistics',
|
||
date: '2022-07-15',
|
||
images: 'images/cases/case5.png',
|
||
summary: 'Optimized delivery routes and resource scheduling using AWS big data and machine learning services, improving delivery efficiency and reducing operating costs.',
|
||
background: 'The client is a nationwide comprehensive logistics service provider processing over 1 million orders daily. As business scale expanded, traditional manual scheduling methods struggled to cope with complex and changing delivery demands, resulting in low efficiency and high costs.',
|
||
challenges: [
|
||
'Complex delivery route planning, low efficiency of manual scheduling',
|
||
'Unbalanced allocation of vehicles and human resources, low utilization',
|
||
'Unable to make quick adjustments based on real-time road conditions and order changes',
|
||
'Lack of data-supported decision mechanisms, difficult to continuously optimize'
|
||
],
|
||
solution: 'We built an intelligent logistics scheduling platform based on AWS for the client. Using AWS big data services to process and analyze massive order and location data, we established intelligent path planning and resource scheduling models through machine learning algorithms, and combined map services to achieve real-time road condition awareness and dynamic adjustments.',
|
||
results: [
|
||
'Delivery efficiency improved by 30%, average delivery time shortened by 1.5 hours',
|
||
'Vehicle utilization increased by 40%, saving millions in fuel costs annually',
|
||
'Customer satisfaction improved by 25%, on-time delivery rate reached 98%',
|
||
'High system automation degree, scheduling personnel requirements reduced by 50%',
|
||
'Established data-driven continuous optimization mechanism, logistics costs decreasing year by year'
|
||
]
|
||
},
|
||
{
|
||
title: 'Online Education Platform',
|
||
industry: 'Education',
|
||
date: '2022-05-08',
|
||
images: 'images/cases/case6.png',
|
||
summary: 'Built a highly reliable, low-latency online education live and on-demand platform supporting millions of students learning simultaneously using AWS cloud services.',
|
||
background: 'The client is an online education platform focused on K12 education, providing live and on-demand course services. With rapidly growing user scale, especially during the pandemic, the platform faced enormous concurrent access pressure and user experience challenges.',
|
||
challenges: [
|
||
'Need to support millions of users learning simultaneously during peak periods',
|
||
'Live courses require high system stability and low latency',
|
||
'High storage and distribution costs for teaching videos',
|
||
'Widely distributed users, difficult to ensure service quality across regions'
|
||
],
|
||
solution: 'We designed an elastically scalable online education platform solution based on AWS. Using EC2 and Auto Scaling services to support high concurrent access, MediaLive and MediaPackage to provide low-latency live services, S3 and CloudFront for efficient storage and distribution of video content, and multi-region deployment to ensure service quality nationwide.',
|
||
results: [
|
||
'Successfully supported 2 million+ users learning simultaneously with stable system performance',
|
||
'Live broadcast latency controlled within 2 seconds, greatly enhancing teacher-student interaction',
|
||
'Access speed improved by 60% for users across the country through content delivery network',
|
||
'Video storage and distribution costs reduced by 50%, supporting rapid business expansion',
|
||
'Platform availability reached 99.99%, winning user trust'
|
||
]
|
||
}
|
||
];
|
||
|
||
// 根据当前语言选择案例数据
|
||
const caseStudies = computed(() => {
|
||
if (locale.value === 'zh') {
|
||
return caseStudiesZh;
|
||
} else if (locale.value === 'zh-TW') {
|
||
return caseStudiesZhTW;
|
||
} else {
|
||
return caseStudiesEn;
|
||
}
|
||
});
|
||
|
||
// 行业筛选方法
|
||
const toggleIndustryFilter = (industry: string) => {
|
||
if (selectedIndustries.value.includes(industry)) {
|
||
selectedIndustries.value = selectedIndustries.value.filter(item => item !== industry);
|
||
} else {
|
||
selectedIndustries.value.push(industry);
|
||
}
|
||
};
|
||
|
||
// 清除筛选条件
|
||
const clearIndustryFilters = () => {
|
||
selectedIndustries.value = [];
|
||
};
|
||
|
||
// 打开案例详情
|
||
const openCaseDetail = (case_item: any) => {
|
||
selectedCase.value = case_item;
|
||
};
|
||
|
||
// 根据筛选条件和排序获取案例列表
|
||
const filteredCases = computed(() => {
|
||
let result = [...caseStudies.value];
|
||
|
||
// 应用行业筛选
|
||
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;
|
||
});
|
||
</script> |