赋能案例-详情页路由

front/src/views/assignCase/components/AssignCaseDetailPage.vue

@@ -11,7 +11,7 @@
     <!--详情页头部-->
     <div class="assign-case-detail-page-header">
       <div class="assign-case-detail-page-header-son">
-        <div class="assign-case-detail-page-header-son-left"></div>
+        <div class="assign-case-detail-page-header-son-left" :style="`background:url(${pictureFormat(dataFrom.name)})`"></div>
         <div class="assign-case-detail-page-header-son-right">
           <div class="assign-case-detail-page-header-son-right-title">
             {{ dataFrom.name }}
@@ -58,7 +58,16 @@
               class="assign-case-detail-page-content-center-card-description"
             >
               {{ item.description }}
-              <p v-if="item.descriptions">{{ item.descriptions }}</p>
+              <div v-if="item.descriptions">
+                <p
+                  v-for="(
+                    itemDescriptions, indexDescriptions
+                  ) in item.descriptions"
+                  :key="indexDescriptions"
+                >
+                  {{ itemDescriptions }}
+                </p>
+              </div>
             </div>
           </div>
         </div>
@@ -84,39 +93,113 @@
   import { ref } from 'vue'
   import HomeHeader from '@/views/home/components/header'
   import HomeFooter from '@/views/newHome/components/Footer'
-  let dataFrom = ref({
+  import { useRouter } from 'vue-router'
-    name: '道路保洁监管场景',
+  const router = useRouter()
-    content: [
+  const val = router.currentRoute.value.query.val
-      {
+  console.log('val', val)
-        title: '案例背景',
+  //   const contenBox = ref([
-        description:
+  //   {
-          '融合市生态环境局出租车走航大气检测数据、城管局渣土车及环卫作业数据、住建局建筑工地数据、城市云脑视频监控等数据，结合时空大数据分析、预测预警分析等手段，对全市道路污染重点路段进行线索分析、作业辅导',
+  //     photo: require('@/assets/assignCase/road.png'),
+  //     name: '道路保洁监管场景',
+  //     time: '2022-01-01 12:00',
+  //   },
+  //   {
+  //     photo: require('@/assets/assignCase/city.png'),
+  //     name: '文明创城场景',
+  //     time: '2022-01-01 12:00',
+  //   },
+  // ])
+  //图片样式切换
+  function pictureFormat(name){
+    if(name=='道路保洁监管场景'){
+      return require('@/assets/assignCase/road.png')
+    }
+    else{
+      return require('@/assets/assignCase/city.png')
+    }
+  }
+  let dataFrom = ref({})
+  if (val == '道路保洁监管场景') {
+    dataFrom.value = {
+      name: '道路保洁监管场景',
+      content: [
+        {
+          title: '案例背景',
+          description:
+            '融合市生态环境局出租车走航大气检测数据、城管局渣土车及环卫作业数据、住建局建筑工地数据、城市云脑视频监控等数据，结合时空大数据分析、预测预警分析等手段，对全市道路污染重点路段进行线索分析、作业辅导',
+        },
+        {
+          title: '业务挑战',
+          description:
+            '目前城市道路污染情况缺少主动发现手段，对渣土车及污染投诉事件，缺乏可参考线索等辅助执法手段',
+        },
+        {
+          title: '解决方案',
+          description:
+            '当道路发生污染(PM10数值>200)时，触发道路污染事件，并通过时空算法模型智能分析污染线索，如建筑工地扬尘外溢、渣土车遗撒、环卫作业问题等。',
+          descriptions: [
+            '系统实现预警事件与地图图层数据关联展示，当用户点击预警事件后，中间地图也会展示预警事件发生时段内的污染路段名称、污染状态，以及路段周边的工地、渣土车、环卫车轨迹及监控摄像头位置。同时屏幕右侧显示对应的工地、渣土车、摄像头列表信息。',
+          ],
+        },
+        {
+          title: '案例成效',
+          description:
+            '实现城市运行智能监测，自动告警预警问题路段。为城管局渣土车执法提供线索，也可以快速定位疑似问题工地和渣土车。',
+          descriptions: [
+            '根据道路污染情况，对环卫作业进行调度部署、辅助决策，实现环卫作业调度智能化。',
+          ],
+        },
+      ],
+      else: {
+        name: '文明创城案例',
+        time: '2022-01-01 12:00',
       },
-      {
+    }
-        title: '业务挑战',
+  } else {
-        description:
+    dataFrom.value = {
-          '目前城市道路污染情况缺少主动发现手段，对渣土车及污染投诉事件，缺乏可参考线索等辅助执法手段',
+      name: '文明创城场景',
+      content: [
+        {
+          title: '案例背景',
+          description:
+            '通过融合视频共享平台、标准地址库、运营商手机信令等数据，结合道路不洁、占道经营、沿街晾晒、违章停放、违规广告等视频AI算法，打造文明创城专题场景。',
+        },
+        {
+          title: '业务挑战',
+          description:
+            '1)城管工作人员日常通过视频监控巡检创城工作时，需要一个一个查找视频，无法快速调取重点区域视频监控，工作效率较低。',
+          descriptions: [
+            '2)事件发生时，想要查看事件附近的视频监控进行核查时，要通过放大和拖拉拽地图查找事发地，无法快速定位。',
+            '3)由于破坏市容市貌事件类型多样，且需监测点位较多，工作人员有限，人工巡检不能做到及时发现。',
+            '4)城管重点关注人流密集的区域，但目前缺乏高效的监控手段。',
+          ],
+        },
+        {
+          title: '解决方案',
+          description:
+            '1)通过对接自规局标准地址库，实现按地址搜索的功能，通过快速定位，可以让用户很快找到定位位置周边的视频监控。',
+          descriptions: [
+            '2)实现视频标签功能，给视频监控打标签后，用户通过在页面选择兴趣标签，地图显示相关视频。',
+            '3)结合运营商手机信令数据，实现人流热力图，辅助用户监控人流量密集的区域。',
+            '4)依托视频监控平台，结合视频AI算法，智能发现环境卫生、沿街晾晒、违章停放、占道经营、违规广告等破坏市容市貌的事件，推送到城管案件系统中，辅助城管局创城工作开展。',
+          ],
+        },
+        {
+          title: '案例成效',
+          description:
+            '1)智能发现不文明事件，并快速定位附近的视频监控，辅助城管、环保等各单位开展创城工作；',
+          descriptions: [
+            '2)显示实时人流热力图，城市管理部门可快速定位人群密集区域，并通过查看周边摄像头进行实时监控；',
+            '3)通过视频定时截图功能，可截取便民摊点营业时间外的视频画面并智能分析，辅助城管执法单位及时发现问题进行处置，同时该功能也可以在工地及景区监管中发挥作用。',
+          ],
+        },
+      ],
+      else: {
+        name: '道路保洁监管场景',
+        time: '2022-01-01 12:00',
       },
-      {
+    }
-        title: '解决方案',
+  }
-        description:
-          '当道路发生污染(PM10数值>200)时，触发道路污染事件，并通过时空算法模型智能分析污染线索，如建筑工地扬尘外溢、渣土车遗撒、环卫作业问题等。',
-        descriptions:
-          '系统实现预警事件与地图图层数据关联展示，当用户点击预警事件后，中间地图也会展示预警事件发生时段内的污染路段名称、污染状态，以及路段周边的工地、渣土车、环卫车轨迹及监控摄像头位置。同时屏幕右侧显示对应的工地、渣土车、摄像头列表信息。',
-      },
-      {
-        title: '案例成效',
-        description:
-          '实现城市运行智能监测，自动告警预警问题路段。为城管局渣土车执法提供线索，也可以快速定位疑似问题工地和渣土车。',
-        descriptions:
-          '根据道路污染情况，对环卫作业进行调度部署、辅助决策，实现环卫作业调度智能化。',
-      },
-    ],
-    else: {
-      name: '文明创城案例',
-      time: '2022-01-01 12:00',
-    },
-  })
   let tabName = ref('案例背景')
   const tabSwitch = (item, index) => {
     tabName.value = item.title
@@ -173,8 +256,7 @@
         .assign-case-detail-page-header-son-left {
           height: 200px;
           width: 290px;
-          background: url('~@/assets/assignCase/assignCase_roadebg.png')
+          background-repeat: no-repeat;
-            no-repeat;
           background-position: center;
           background-size: cover;
           margin-right: 30px;
@@ -265,7 +347,53 @@
       }
       .assign-case-detail-page-content-right {
         width: 270px;
-        border: 1px red solid;
+        height: 260px;
+        display: inline-block;
+        .assign-case-detail-page-content-right-card {
+          width: 270px;
+          height: 260px;
+          border: 1px #e5e5e5 solid;
+          .assign-case-detail-page-content-right-card-title {
+            padding-left: 15px;
+            background: linear-gradient(
+              to right,
+              rgba(113, 132, 252, 0.8),
+              rgba(148, 163, 252, 0.8)
+            );
+            height: 64px;
+            color: #fff;
+            font-size: 24px;
+            line-height: 64px;
+            margin-bottom: 30px;
+            border-radius: 10px 10px 0 0;
+            span:first-child {
+              display: inline-block;
+              width: 15px;
+              height: 15px;
+              background: url('~@/assets/assignCase/assignCase_else.png')
+                no-repeat;
+              background-position: center;
+              background-size: cover;
+              margin-right: 15px;
+            }
+          }
+          .assign-case-detail-page-content-right-card-content {
+            padding-left: 20px;
+            border-radius: 0px 0px 10px 10px;
+            p:first-child {
+              font-size: 20px;
+              line-height: 20px;
+              margin-bottom: 20px;
+              color: #333;
+            }
+            p:last-child {
+              font-size: 18px;
+              line-height: 18px;
+              margin-bottom: 30px;
+              color: #999;
+            }
+          }
+        }
       }
     }
   }