pendulum/web/src/components/SolutionLayout/index.vue

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { computed } from 'vue';

interface Feature {
  title: string;
  description: string;
}

interface Scenario {
  title: string;
  description: string;
}

interface SolutionConfig {
  type: 'emergency' | 'lawEnforcement' | 'publicSafety' | 'safetyProduction';
  title: string;
  description: string;
  features: Feature[];
  scenarios: Scenario[];
}

// 应急救援配置
const emergencyConfigs: Record<string, SolutionConfig> = {
  flood: {
    type: 'emergency',
    title: '洪涝灾害救援解决方案',
    description: '为洪涝灾害提供全方位的应急救援解决方案，助力快速响应和高效救援。',
    features: [
      { title: '灾情侦察', description: '无人机快速侦察灾区情况，绘制实时灾情地图' },
      { title: '搜救支持', description: '利用热成像技术辅助搜寻受困人员' },
      { title: '物资投放', description: '向受灾区域精准投放应急物资' },
      { title: '通信保障', description: '建立临时通信网络，保障救援指挥' }
    ],
    scenarios: [
      { title: '城市内涝', description: '城市暴雨导致的内涝灾害救援' },
      { title: '河流决堤', description: '河流决堤造成的洪涝灾害救援' },
      { title: '山洪暴发', description: '山区突发性洪水灾害救援' }
    ]
  },
  earthquake: {
    type: 'emergency',
    title: '地震与地质灾害救援解决方案',
    description: '为地震等地质灾害提供专业的应急救援解决方案，实现快速响应和科学救援。',
    features: [
      { title: '灾情评估', description: '无人机快速评估受灾范围和程度' },
      { title: '建筑损伤分析', description: 'AI分析建筑物损伤程度，评估二次灾害风险' },
      { title: '搜救规划', description: '基于实时数据制定最优搜救路线' },
      { title: '物资配送', description: '无人机向受困区域投送应急物资' }
    ],
    scenarios: [
      { title: '地震救援', description: '地震灾害现场搜救及救援' },
      { title: '滑坡救援', description: '山体滑坡灾害现场救援' },
      { title: '塌陷救援', description: '地面塌陷事故现场救援' }
    ]
  },
  forestFire: {
    type: 'emergency',
    title: '森林火灾救援解决方案',
    description: '为森林火灾提供智能化应急救援解决方案，提升救援效率和安全性。',
    features: [
      { title: '火情监测', description: '实时监测火情发展，预测火势蔓延' },
      { title: '救援规划', description: '智能规划最优灭火路线和方案' },
      { title: '物资投放', description: '向火场精准投放灭火物资' },
      { title: '人员疏散', description: '协助规划人员疏散路线' }
    ],
    scenarios: [
      { title: '林区火灾', description: '森林地区火灾扑救' },
      { title: '草原火灾', description: '草原地区火灾扑救' },
      { title: '交界火灾', description: '林区与居民区交界处火灾处置' }
    ]
  },
  mountainRescue: {
    type: 'emergency',
    title: '山岳搜救解决方案',
    description: '为山岳地区遇险人员提供专业的搜救解决方案，提高搜救效率和成功率。',
    features: [
      { title: '区域搜索', description: '无人机快速搜索大面积区域' },
      { title: '热成像侦测', description: '利用热成像技术定位遇险人员' },
      { title: '地形分析', description: '3D地形分析，规划最优救援路线' },
      { title: '通信支援', description: '建立应急通信网络，保障救援通信' }
    ],
    scenarios: [
      { title: '登山救援', description: '登山遇险人员搜救' },
      { title: '雪崩救援', description: '雪崩灾害现场搜救' },
      { title: '峡谷救援', description: '峡谷探险遇险救援' }
    ]
  }
};

// 执法管理配置
const lawEnforcementConfigs: Record<string, SolutionConfig> = {
  patrol: {
    type: 'lawEnforcement',
    title: '治安巡逻解决方案',
    description: '为公安机关提供智能化治安巡逻解决方案，提升巡逻效率和治安管理水平。',
    features: [
      { title: '空中巡逻', description: '无人机协助进行区域巡逻监控' },
      { title: '异常识别', description: 'AI识别可疑人员和异常行为' },
      { title: '快速响应', description: '发现问题快速定位和处置' },
      { title: '数据分析', description: '治安数据分析，优化巡逻路线' }
    ],
    scenarios: [
      { title: '社区巡逻', description: '居民社区治安巡逻' },
      { title: '重点区域', description: '重点区域安保巡逻' },
      { title: '大型活动', description: '大型活动现场安保' }
    ]
  },
  traffic: {
    type: 'lawEnforcement',
    title: '交通治理解决方案',
    description: '为交通管理部门提供智能化交通治理解决方案，提升交通管理效率。',
    features: [
      { title: '交通监控', description: '实时监控交通流量和违法行为' },
      { title: '事故处理', description: '快速响应交通事故，协助现场处置' },
      { title: '违章取证', description: '自动记录交通违法行为' },
      { title: '指挥调度', description: '智能交通指挥和调度系统' }
    ],
    scenarios: [
      { title: '城市道路', description: '城市道路交通管理' },
      { title: '高速公路', description: '高速公路交通监控' },
      { title: '事故现场', description: '交通事故现场处置' }
    ]
  },
  cityManagement: {
    type: 'lawEnforcement',
    title: '城管巡查解决方案',
    description: '为城市管理部门提供智能化巡查解决方案，提升城市管理效率和市容市貌监管水平。',
    features: [
      { title: '违建监测', description: '无人机巡查违法建筑，自动比对分析' },
      { title: '环境监管', description: '城市环境卫生和污染源实时监控' },
      { title: '占道管理', description: '违规占道经营和乱摆摊点智能识别' },
      { title: '市政设施巡检', description: '市政设施完好度巡查和维护管理' }
    ],
    scenarios: [
      { title: '日常巡查', description: '常态化巡查监管，及时发现城市管理问题' },
      { title: '专项整治', description: '重点区域和专项问题集中整治行动' },
      { title: '应急处置', description: '突发事件快速响应和现场指挥' }
    ]
  },
  investigation: {
    type: 'lawEnforcement',
    title: '刑事侦查解决方案',
    description: '为刑侦部门提供智能化侦查解决方案，提升破案效率和侦查能力。',
    features: [
      { title: '现场勘查', description: '无人机协助现场勘查取证' },
      { title: '轨迹追踪', description: '嫌疑人轨迹分析和追踪' },
      { title: '证据采集', description: '智能化证据采集和保全' },
      { title: '案情分析', description: '大数据辅助案情分析' }
    ],
    scenarios: [
      { title: '现场勘查', description: '案发现场勘查取证' },
      { title: '追踪布控', description: '嫌疑人追踪布控' },
      { title: '案情分析', description: '复杂案情分析研判' }
    ]
  }
};

// 公共安全配置
const publicSafetyConfigs: Record<string, SolutionConfig> = {
  forestry: {
    type: 'publicSafety',
    title: '林业安全解决方案',
    description: '为林业部门提供智能化森林资源监管和保护解决方案。',
    features: [
      { title: '资源监测', description: '森林资源动态监测和评估' },
      { title: '火情预警', description: '森林火险预警和监测' },
      { title: '病虫害防治', description: '林业病虫害监测和防治' },
      { title: '资源保护', description: '野生动植物资源保护' }
    ],
    scenarios: [
      { title: '资源普查', description: '森林资源动态普查' },
      { title: '火情监测', description: '森林火情实时监测' },
      { title: '执法巡查', description: '林业执法巡查' }
    ]
  },
  mapping: {
    type: 'publicSafety',
    title: '测绘应用解决方案',
    description: '为测绘部门提供高精度地理信息采集和处理解决方案。',
    features: [
      { title: '地形测绘', description: '高精度地形图测绘' },
      { title: '实景建模', description: '三维实景模型构建' },
      { title: '变化监测', description: '地理要素变化监测' },
      { title: '应急测绘', description: '突发事件应急测绘' }
    ],
    scenarios: [
      { title: '地形测量', description: '地形地貌测量' },
      { title: '工程测绘', description: '工程建设测绘' },
      { title: '灾害测绘', description: '灾害现场测绘' }
    ]
  },
  oilGas: {
    type: 'publicSafety',
    title: '油气管线巡检解决方案',
    description: '为油气管线提供智能化巡检和安全监管解决方案。',
    features: [
      { title: '管线巡检', description: '油气管线定期巡检' },
      { title: '泄漏检测', description: '管线泄漏实时监测' },
      { title: '隐患排查', description: '管线安全隐患排查' },
      { title: '应急处置', description: '管线事故应急处置' }
    ],
    scenarios: [
      { title: '日常巡检', description: '管线日常巡检' },
      { title: '应急处置', description: '管线事故处置' },
      { title: '工程监理', description: '管线工程监理' }
    ]
  },
  power: {
    type: 'publicSafety',
    title: '电力巡检解决方案',
    description: '为电力部门提供智能化电力设施巡检和维护解决方案。',
    features: [
      { title: '线路巡检', description: '输电线路智能巡检' },
      { title: '设备检测', description: '电力设备状态监测' },
      { title: '故障诊断', description: '设备故障智能诊断' },
      { title: '应急处置', description: '电力事故应急处置' }
    ],
    scenarios: [
      { title: '日常巡检', description: '电力设施日常巡检' },
      { title: '故障处理', description: '电力故障现场处理' },
      { title: '应急抢修', description: '电力设施应急抢修' }
    ]
  },
  water: {
    type: 'publicSafety',
    title: '水利设施监管解决方案',
    description: '为水利部门提供智能化水利设施监管和防汛抗旱解决方案。',
    features: [
      { title: '设施巡检', description: '水利设施智能巡检' },
      { title: '水情监测', description: '水文水情实时监测' },
      { title: '灾害预警', description: '洪涝灾害预警' },
      { title: '应急调度', description: '防汛抗旱应急调度' }
    ],
    scenarios: [
      { title: '日常监管', description: '水利设施日常监管' },
      { title: '防汛抗旱', description: '防汛抗旱应急响应' },
      { title: '工程监理', description: '水利工程建设监理' }
    ]
  }
};

// 安全生产配置
const safetyProductionConfigs: Record<string, SolutionConfig> = {
  supervision: {
    type: 'safetyProduction',
    title: '安全生产监管解决方案',
    description: '为安全生产监管部门提供智能化监管和隐患排查解决方案。',
    features: [
      { title: '隐患排查', description: '生产安全隐患智能排查' },
      { title: '风险评估', description: '安全生产风险评估' },
      { title: '应急预案', description: '安全生产应急预案管理' },
      { title: '监管执法', description: '安全生产监管执法支持' }
    ],
    scenarios: [
      { title: '日常监管', description: '企业安全生产日常监管' },
      { title: '专项检查', description: '安全生产专项检查' },
      { title: '事故调查', description: '生产安全事故调查' }
    ]
  },
  selfInspection: {
    type: 'safetyProduction',
    title: '企业安全自查解决方案',
    description: '为企业提供安全生产自查和隐患自纠自改解决方案。',
    features: [
      { title: '隐患自查', description: '企业安全隐患自查系统' },
      { title: '整改跟踪', description: '隐患整改跟踪管理' },
      { title: '风险评估', description: '企业安全风险自评' },
      { title: '应急演练', description: '安全生产应急演练支持' }
    ],
    scenarios: [
      { title: '日常自查', description: '企业安全生产日常自查' },
      { title: '专项自查', description: '重点领域专项安全自查' },
      { title: '整改验收', description: '隐患整改自查验收' }
    ]
  },
  accidentHandling: {
    type: 'safetyProduction',
    title: '安全事故处置解决方案',
    description: '为安全生产事故提供智能化应急处置和事故调查解决方案。',
    features: [
      { title: '事故报告', description: '安全事故快速报告系统' },
      { title: '应急响应', description: '事故现场应急响应支持' },
      { title: '事故调查', description: '安全事故智能调查系统' },
      { title: '教训总结', description: '事故案例分析和经验教训总结' }
    ],
    scenarios: [
      { title: '事故处置', description: '生产安全事故现场处置' },
      { title: '应急救援', description: '重大事故应急救援' },
      { title: '事故调查', description: '安全事故原因调查' }
    ]
  }
};

const route = useRoute();
const currentPath = computed(() => route.path);

const getConfig = (path: string): SolutionConfig | undefined => {
  const pathSegments = path.split('/');
  const lastSegment = pathSegments[pathSegments.length - 1];

  if (path.includes('emergency')) {
    return emergencyConfigs[lastSegment];
  } else if (path.includes('law-enforcement')) {
    return lawEnforcementConfigs[lastSegment];
  } else if (path.includes('public-safety')) {
    return publicSafetyConfigs[lastSegment];
  } else if (path.includes('safety-production')) {
    return safetyProductionConfigs[lastSegment];
  }

  return undefined;
};

const config = computed(() => getConfig(currentPath.value));
</script>

<template>
  <div v-if="config" class="solution-layout">
    <h1>{{ config.title }}</h1>
    <p class="description">{{ config.description }}</p>

    <section class="features">
      <h2>核心功能</h2>
      <ul>
        <li v-for="feature in config.features" :key="feature.title">
          <h3>{{ feature.title }}</h3>
          <p>{{ feature.description }}</p>
        </li>
      </ul>
    </section>

    <section class="scenarios">
      <h2>应用场景</h2>
      <ul>
        <li v-for="scenario in config.scenarios" :key="scenario.title">
          <h3>{{ scenario.title }}</h3>
          <p>{{ scenario.description }}</p>
        </li>
      </ul>
    </section>
  </div>
</template>

<style scoped lang="scss">
@use '@/assets/styles/variables' as v;
@use '@/assets/styles/mixins' as m;

.solution-layout {
  padding: v.$spacing-xl;
  max-width: 1200px;
  margin: 0 auto;

  h1 {
    font-size: v.$font-size-xxl;
    color: v.$text-primary;
    margin-bottom: v.$spacing-lg;
  }

  .description {
    font-size: v.$font-size-lg;
    color: v.$text-secondary;
    margin-bottom: v.$spacing-xl;
  }

  section {
    margin-bottom: v.$spacing-xxl;

    h2 {
      font-size: v.$font-size-xl;
      color: v.$text-primary;
      margin-bottom: v.$spacing-lg;
    }

    ul {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: v.$spacing-lg;
      list-style: none;
      padding: 0;

      li {
        background: v.$background-light;
        border-radius: v.$border-radius-lg;
        padding: v.$spacing-lg;
        box-shadow: v.$shadow-sm;

        h3 {
          font-size: v.$font-size-lg;
          color: v.$primary-color;
          margin-bottom: v.$spacing-sm;
        }

        p {
          color: v.$text-secondary;
        }
      }
    }
  }
}
</style>