EmergencyPostEvaluation.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <template>
  2. <div id="RagPostEvaluation" class="content-block">
  3. <h2>灾后评估与分析</h2>
  4. <div class="row">
  5. <div class="col-xs-12 col-sm-12 col-md-12">
  6. <p class="lead">利用无人机航拍影像和三维建模技术,对灾害损失进行快速评估,为灾后重建提供科学依据。</p>
  7. </div>
  8. </div>
  9. <div class="row">
  10. <div class="col-xs-12 col-sm-6 col-md-6 wow fadeInLeft">
  11. <h3>评估内容</h3>
  12. <ul class="feature-list">
  13. <li><i class="glyphicon glyphicon-list-alt"></i> <strong>建筑物损毁评估</strong> - 识别倒塌、裂缝、倾斜等损坏情况</li>
  14. <li><i class="glyphicon glyphicon-list-alt"></i> <strong>基础设施评估</strong> - 道路、桥梁、电力设施损坏程度</li>
  15. <li><i class="glyphicon glyphicon-list-alt"></i> <strong>地质灾害评估</strong> - 滑坡、泥石流、地面塌陷范围</li>
  16. <li><i class="glyphicon glyphicon-list-alt"></i> <strong>淹没面积统计</strong> - 洪涝灾害淹没区域精确测量</li>
  17. <li><i class="glyphicon glyphicon-list-alt"></i> <strong>经济损失估算</strong> - 基于损毁数据的损失评估</li>
  18. </ul>
  19. </div>
  20. <div class="col-xs-12 col-sm-6 col-md-6 wow fadeInRight">
  21. <img class="img-responsive center-block" src="@/assets/img/service2.jpg" alt="灾后评估">
  22. </div>
  23. </div>
  24. <div class="row" style="margin-top: 40px;">
  25. <div class="col-xs-12 col-sm-12 col-md-12">
  26. <h3>技术流程</h3>
  27. </div>
  28. <div class="col-xs-12 col-sm-3 col-md-3 text-center wow zoomIn">
  29. <div class="process-step">
  30. <div class="step-number">1</div>
  31. <h5>数据采集</h5>
  32. <p>无人机倾斜摄影获取影像</p>
  33. </div>
  34. </div>
  35. <div class="col-xs-12 col-sm-3 col-md-3 text-center wow zoomIn">
  36. <div class="process-step">
  37. <div class="step-number">2</div>
  38. <h5>三维建模</h5>
  39. <p>生成实景三维模型和 DOM</p>
  40. </div>
  41. </div>
  42. <div class="col-xs-12 col-sm-3 col-md-3 text-center wow zoomIn">
  43. <div class="process-step">
  44. <div class="step-number">3</div>
  45. <h5>智能解译</h5>
  46. <p>AI 识别损毁目标和范围</p>
  47. </div>
  48. </div>
  49. <div class="col-xs-12 col-sm-3 col-md-3 text-center wow zoomIn">
  50. <div class="process-step">
  51. <div class="step-number">4</div>
  52. <h5>报告生成</h5>
  53. <p>自动输出评估报告和数据</p>
  54. </div>
  55. </div>
  56. </div>
  57. <div class="row" style="margin-top: 40px;">
  58. <div class="col-xs-12 col-sm-12 col-md-12">
  59. <h3>成果输出</h3>
  60. </div>
  61. <div class="col-xs-12 col-sm-6 col-md-3 wow zoomIn">
  62. <div class="deliverable-card">
  63. <div class="deliverable-icon">
  64. <i class="glyphicon glyphicon-picture"></i>
  65. </div>
  66. <h5>正射影像图</h5>
  67. <p>DOM 成果</p>
  68. </div>
  69. </div>
  70. <div class="col-xs-12 col-sm-6 col-md-3 wow zoomIn">
  71. <div class="deliverable-card">
  72. <div class="deliverable-icon">
  73. <i class="glyphicon glyphicon-th"></i>
  74. </div>
  75. <h5>三维实景模型</h5>
  76. <p>倾斜摄影模型</p>
  77. </div>
  78. </div>
  79. <div class="col-xs-12 col-sm-6 col-md-3 wow zoomIn">
  80. <div class="deliverable-card">
  81. <div class="deliverable-icon">
  82. <i class="glyphicon glyphicon-map-marker"></i>
  83. </div>
  84. <h5>数字线划图</h5>
  85. <p>DLG 矢量数据</p>
  86. </div>
  87. </div>
  88. <div class="col-xs-12 col-sm-6 col-md-3 wow zoomIn">
  89. <div class="deliverable-card">
  90. <div class="deliverable-icon">
  91. <i class="glyphicon glyphicon-file"></i>
  92. </div>
  93. <h5>评估分析报告</h5>
  94. <p>文字和统计数据</p>
  95. </div>
  96. </div>
  97. </div>
  98. <div class="row" style="margin-top: 40px;">
  99. <div class="col-xs-12 col-sm-12 col-md-12">
  100. <div class="info-box">
  101. <h4><i class="glyphicon glyphicon-stats"></i> 应用价值</h4>
  102. <p>无人机灾后评估可在<strong>24 小时内</strong>完成大范围灾害数据采集和处理,相比传统人工调查效率提升<strong>10 倍以上</strong>,为灾后重建规划和资金申请提供<strong>准确、客观、可视化</strong>的数据支撑。</p>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. </template>
  108. <script>
  109. export default {
  110. name: "EmergencyPostEvaluation"
  111. };
  112. </script>
  113. <style scoped>
  114. /* 样式已全局定义:rag-solutions.css */
  115. </style>