应用资源详情样式修改

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

@@ -11,12 +11,18 @@
     <!--详情页头部-->
     <div class="assign-case-detail-page-header">
       <div class="assign-case-detail-page-header-son">
-        <div class="assign-case-detail-page-header-son-left" :style="`background:url(${pictureFormat(dataFrom.name)})`"></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 }}
           </div>
-          <div class="assign-case-detail-page-header-son-right-click">
+          <div
+            class="assign-case-detail-page-header-son-right-click"
+            @click="clickToView(dataFrom.name)"
+          >
             <span>点击查看</span>
             <span></span>
           </div>
@@ -78,9 +84,15 @@
               <span>其他案例</span>
             </div>
             <div class="assign-case-detail-page-content-right-card-content">
-              <p>{{ dataFrom.else.name }}</p>
+              <div
-              <p>{{ dataFrom.else.time }}</p>
+                class="assign-case-detail-page-content-right-card-content-card"
+                @click="routerClick(dataFrom.else.name)"
+              >
+                <p>{{ dataFrom.else.name }}</p>
+                <p>{{ dataFrom.else.time }}</p>
+              </div>
             </div>
+            <div class="no-data">暂无更多</div>
           </div>
         </div>
       </div>
@@ -90,120 +102,125 @@
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  import { ref, watch, onMounted } from 'vue'
   import HomeHeader from '@/views/home/components/header'
   import HomeFooter from '@/views/newHome/components/Footer'
   import { useRouter } from 'vue-router'
   const router = useRouter()
-  const val = router.currentRoute.value.query.val
+  let val = router.currentRoute.value.query.val
   console.log('val', val)
-  //   const contenBox = ref([
-  //   {
-  //     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){
+  function pictureFormat(name) {
-    if(name=='道路保洁监管场景'){
+    if (name == '道路保洁监管场景') {
       return require('@/assets/assignCase/road.png')
-    }
+    } else {
-    else{
       return require('@/assets/assignCase/city.png')
     }
   }
+  //路由跳转事件
+  const routerClick = (name) => {
+    val = name
+    router.push({ path: 'AssignCaseDetailPage', query: { val } })
+  }
   let dataFrom = ref({})
-  if (val == '道路保洁监管场景') {
+  const init = () => {
-    dataFrom.value = {
+    val = router.currentRoute.value.query.val
-      name: '道路保洁监管场景',
+    if (val == '道路保洁监管场景') {
-      content: [
+      dataFrom.value = {
-        {
-          title: '案例背景',
-          description:
-            '融合市生态环境局出租车走航大气检测数据、城管局渣土车及环卫作业数据、住建局建筑工地数据、城市云脑视频监控等数据，结合时空大数据分析、预测预警分析等手段，对全市道路污染重点路段进行线索分析、作业辅导',
-        },
-        {
-          title: '业务挑战',
-          description:
-            '目前城市道路污染情况缺少主动发现手段，对渣土车及污染投诉事件，缺乏可参考线索等辅助执法手段',
-        },
-        {
-          title: '解决方案',
-          description:
-            '当道路发生污染(PM10数值>200)时，触发道路污染事件，并通过时空算法模型智能分析污染线索，如建筑工地扬尘外溢、渣土车遗撒、环卫作业问题等。',
-          descriptions: [
-            '系统实现预警事件与地图图层数据关联展示，当用户点击预警事件后，中间地图也会展示预警事件发生时段内的污染路段名称、污染状态，以及路段周边的工地、渣土车、环卫车轨迹及监控摄像头位置。同时屏幕右侧显示对应的工地、渣土车、摄像头列表信息。',
-          ],
-        },
-        {
-          title: '案例成效',
-          description:
-            '实现城市运行智能监测，自动告警预警问题路段。为城管局渣土车执法提供线索，也可以快速定位疑似问题工地和渣土车。',
-          descriptions: [
-            '根据道路污染情况，对环卫作业进行调度部署、辅助决策，实现环卫作业调度智能化。',
-          ],
-        },
-      ],
-      else: {
-        name: '文明创城案例',
-        time: '2022-01-01 12:00',
-      },
-    }
-  } else {
-    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',
+        content: [
-      },
+          {
+            title: '案例背景',
+            description:
+              '融合市生态环境局出租车走航大气检测数据、城管局渣土车及环卫作业数据、住建局建筑工地数据、城市云脑视频监控等数据，结合时空大数据分析、预测预警分析等手段，对全市道路污染重点路段进行线索分析、作业辅导',
+          },
+          {
+            title: '业务挑战',
+            description:
+              '目前城市道路污染情况缺少主动发现手段，对渣土车及污染投诉事件，缺乏可参考线索等辅助执法手段',
+          },
+          {
+            title: '解决方案',
+            description:
+              '当道路发生污染(PM10数值>200)时，触发道路污染事件，并通过时空算法模型智能分析污染线索，如建筑工地扬尘外溢、渣土车遗撒、环卫作业问题等。',
+            descriptions: [
+              '系统实现预警事件与地图图层数据关联展示，当用户点击预警事件后，中间地图也会展示预警事件发生时段内的污染路段名称、污染状态，以及路段周边的工地、渣土车、环卫车轨迹及监控摄像头位置。同时屏幕右侧显示对应的工地、渣土车、摄像头列表信息。',
+            ],
+          },
+          {
+            title: '案例成效',
+            description:
+              '实现城市运行智能监测，自动告警预警问题路段。为城管局渣土车执法提供线索，也可以快速定位疑似问题工地和渣土车。',
+            descriptions: [
+              '根据道路污染情况，对环卫作业进行调度部署、辅助决策，实现环卫作业调度智能化。',
+            ],
+          },
+        ],
+        else: {
+          name: '文明创城案例',
+          time: '2022-01-01 12:00',
+        },
+      }
+    } else {
+      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',
+        },
+      }
     }
   }
+  init()
+  //监听路由发生变化
+  watch(
+    () => router.currentRoute.value.query.val,
+    () => {
+      init()
+    },
+    { immediate: true }
+  )
   let tabName = ref('案例背景')
+  //tab点击事件
   const tabSwitch = (item, index) => {
     tabName.value = item.title
-    if (index != 0) {
+    if (index != 0 && index != 3) {
       let top =
         document.querySelector(
           '#assign-case-detail-page-content-center-card' + index
@@ -221,7 +238,7 @@
       console.log('view.style.top', view.style.top)
       document.documentElement.scrollTop = top
       document.body.scrollTop = top
-    } else {
+    } else if (index == 0) {
       let top = 0
       let view = document.getElementById(
         'assign-case-detail-page-content-left-border-id'
@@ -229,6 +246,56 @@
       document.documentElement.scrollTop = top
       document.body.scrollTop = top
       view.style.top = '490px'
+    } else if (index == 3) {
+      let top = document.querySelector(
+        '#assign-case-detail-page-content-center-card' + index
+      ).offsetTop
+      let view = document.getElementById(
+        'assign-case-detail-page-content-left-border-id'
+      )
+      document.documentElement.scrollTop = top
+      document.body.scrollTop = top
+      view.style.top = '220px'
+    }
+  }
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const selectNow = ref('')
+  onMounted(() => {
+    // console.clear()
+    window.addEventListener('scroll', () => {
+      debugger
+      domArr.value = document.querySelectorAll(
+        '.assign-case-detail-page-content-center-card'
+      )
+      scrollTop.value =
+        document.documentElement.scrollTop || document.body.scrollTop
+      for (let i = 0; i < domArr.value.length; i++) {
+        if (i === 0) {
+          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else if (i == domArr.value.length - 1) {
+          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else {
+          if (
+            scrollTop.value > domArr.value[i].offsetTop - 50 &&
+            scrollTop.value < domArr.value[i + 1].offsetTop - 50
+          ) {
+            selectNow.value = domArr.value[i].id
+          }
+        }
+      }
+    })
+  })
+  //点击查看事件
+  const clickToView = (name) => {
+    if (name == '道路保洁监管场景') {
+      window.open('http://15.72.183.90:7001/#/road')
+    } else {
+      window.open('http://15.72.183.90:7001/#/city')
     }
   }
 </script>
@@ -236,42 +303,42 @@
 <style lang="less" scoped>
   .assign-case-detail-page {
     position: relative;
-    top: 64px;
+    top: 0.64rem;
     .assign-case-detail-page-header {
-      height: 370px;
+      height: 3.7rem;
       background: url('~@/assets/assignCase/assignCase_bg2.png') no-repeat;
       background-position: center;
       background-size: cover;
-      padding-top: 120px;
+      padding-top: 1.2rem;
       .assign-case-detail-page-header-son {
-        width: 900px;
+        width: 9rem;
-        height: 250px;
+        height: 2.5rem;
-        border-radius: 10px;
+        border-radius: 0.01rem;
         background: #fff;
         margin: auto;
         box-shadow: 5px 5px 20px #f2f3fb;
         display: flex;
         align-items: center;
-        padding: 20px;
+        padding: 0.2rem;
         .assign-case-detail-page-header-son-left {
-          height: 200px;
+          height: 2rem;
-          width: 290px;
+          width: 2.9rem;
           background-repeat: no-repeat;
           background-position: center;
           background-size: cover;
-          margin-right: 30px;
+          margin-right: 0.3rem;
         }
         .assign-case-detail-page-header-son-right {
           .assign-case-detail-page-header-son-right-title {
             color: #000000;
-            font-size: 36px;
+            font-size: 0.36rem;
-            line-height: 36px;
+            line-height: 0.36rem;
-            margin-bottom: 40px;
+            margin-bottom: 0.4rem;
           }
           .assign-case-detail-page-header-son-right-click {
             color: #526aff;
-            font-size: 20px;
+            font-size: 0.2rem;
-            line-height: 20px;
+            line-height: 0.2rem;
             cursor: pointer;
             span {
               display: inline-block;
@@ -280,7 +347,7 @@
               margin-right: 10px;
             }
             span:last-child {
-              width: 20px;
+              width: 0.2rem;
               height: 10px;
               background: url('~@/assets/assignCase/assignCase_click.png')
                 no-repeat;
@@ -292,67 +359,68 @@
       }
     }
     .assign-case-detail-page-content {
-      padding-top: 60px;
+      padding-top: 0.6rem;
       display: flex;
       justify-content: center;
       .assign-case-detail-page-content-son {
-        width: 1300px;
+        width: 13rem;
         display: flex;
       }
       .assign-case-detail-page-content-left {
-        width: 167px;
+        width: 1.67rem;
         .assign-case-detail-page-content-left-border {
           border-right: 1px #e5e5e5 solid;
           padding-top: 5px;
           padding-bottom: 5px;
           position: fixed;
-          top: 490px;
+          top: 4.9rem;
           div {
-            height: 30px;
+            height: 0.3rem;
-            padding-right: 70px;
+            padding-right: 0.7rem;
-            margin-bottom: 30px;
+            margin-bottom: 0.3rem;
             font-size: 24px;
             color: #666666;
-            line-height: 30px;
+            line-height: 0.3rem;
             cursor: pointer;
           }
           div:last-child {
             margin-bottom: 0px;
           }
           .assign-case-detail-page-content-left-border-click {
-            padding-right: 66px;
+            padding-right: 0.66rem;
             border-right: 4px #526aff solid;
             color: #526aff;
           }
         }
       }
       .assign-case-detail-page-content-center {
-        width: 845px;
+        width: 8.45rem;
-        padding: 0 40px 100px 35px;
+        padding: 0 0.4rem 1rem 0.35rem;
         .assign-case-detail-page-content-center-card {
-          margin-bottom: 60px;
+          margin-bottom: 0.6rem;
           .assign-case-detail-page-content-center-card-title {
-            font-size: 28px;
+            font-size: 0.28rem;
             color: #000000;
             font-weight: bold;
-            line-height: 28px;
+            line-height: 0.28rem;
-            margin-bottom: 35px;
+            margin-bottom: 0.35rem;
           }
           .assign-case-detail-page-content-center-card-description {
             color: #333333;
-            font-size: 20px;
+            font-size: 0.2rem;
-            line-height: 34px;
+            line-height: 0.34rem;
           }
         }
       }
       .assign-case-detail-page-content-right {
-        width: 270px;
+        width: 2.7rem;
-        height: 260px;
+        height: 2.6rem;
         display: inline-block;
         .assign-case-detail-page-content-right-card {
-          width: 270px;
+          width: 2.7rem;
-          height: 260px;
+          height: 2.6rem;
           border: 1px #e5e5e5 solid;
+          position: relative;
           .assign-case-detail-page-content-right-card-title {
             padding-left: 15px;
             background: linear-gradient(
@@ -360,10 +428,10 @@
               rgba(113, 132, 252, 0.8),
               rgba(148, 163, 252, 0.8)
             );
-            height: 64px;
+            height: 0.64rem;
             color: #fff;
             font-size: 24px;
-            line-height: 64px;
+            line-height: 0.64rem;
             margin-bottom: 30px;
             border-radius: 10px 10px 0 0;
             span:first-child {
@@ -378,21 +446,33 @@
             }
           }
           .assign-case-detail-page-content-right-card-content {
-            padding-left: 20px;
+            padding: 0 20px;
             border-radius: 0px 0px 10px 10px;
-            p:first-child {
+            .assign-case-detail-page-content-right-card-content-card {
-              font-size: 20px;
+              cursor: pointer;
-              line-height: 20px;
+              border-bottom: 1px solid #ebebeb;
-              margin-bottom: 20px;
+              p:first-child {
-              color: #333;
+                font-size: 20px;
-            }
+                line-height: 20px;
-            p:last-child {
+                margin-bottom: 20px;
-              font-size: 18px;
+                color: #333;
-              line-height: 18px;
+              }
-              margin-bottom: 30px;
+              p:last-child {
-              color: #999;
+                font-size: 18px;
+                line-height: 18px;
+                margin-bottom: 30px;
+                color: #999;
+              }
             }
           }
+          .no-data {
+            position: absolute;
+            bottom: 0.2rem;
+            font-size: 0.18rem;
+            color: #cccccc;
+            width: 2.3rem;
+            text-align: center;
+          }
         }
       }
     }

front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue

@@ -49,7 +49,7 @@
   })
   const router = useRouter()
   const applicationArea = ref('')
-  // 加入申购车
+  //加入申购车
   const addShoppingCart = () => {
     console.log('加入申购车==================>', props.dataList)
     sgcInsert({
@@ -62,7 +62,7 @@
       mybus.emit('getSgcNum')
     })
   }
-  // 立即申请
+  //立即申请
   function toView() {
     // window.open(newpage.href, '_blank')
     router.push({
@@ -115,10 +115,10 @@
           font-size: 14px;
         }
         .name {
-          max-width: 330px;
+          // max-width: 330px;
-          overflow: hidden;
+          // overflow: hidden;
-          text-overflow: ellipsis;
+          // text-overflow: ellipsis;
-          white-space: nowrap;
+          // white-space: nowrap;
           font-size: 40px;
           margin-right: 20px;
         }

front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue

@@ -22,14 +22,14 @@
         </div>
       </div>
       <div class="bottom" v-if="props.dataList.id">
-        <a-button type="primary" @click="toView()">
+        <!-- <a-button type="primary" @click="toView()">
           <template #icon><form-outlined /></template>
           申请使用
         </a-button>
         <a-button type="primary" @click="addShoppingCart()">
           <template #icon><shopping-cart-outlined /></template>
           加入购物车
-        </a-button>
+        </a-button> -->
         <a-button type="primary" @click="goTOCollection()">收藏</a-button>
       </div>
     </div>
@@ -37,42 +37,42 @@
   </div>
 </template>
 <script setup>
-  import { FormOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue'
+  // import { ShoppingCartOutlined } from '@ant-design/icons-vue'
   import { defineProps, ref, watch } from 'vue'
   import { scInsert } from '@/api/personalCenter'
-  import { sgcInsert } from '@/api/home'
+  // import { sgcInsert } from '@/api/home'
-  import { useRouter } from 'vue-router'
+  // import { useRouter } from 'vue-router'
-  import mybus from '@/myplugins/mybus'
+  // import mybus from '@/myplugins/mybus'
   import { message } from 'ant-design-vue'
   const props = defineProps({
     dataList: { type: Object, default: null },
   })
-  const router = useRouter()
+  // const router = useRouter()
   const applicationArea = ref('')
-  // 加入申购车
+  // // 加入申购车
-  const addShoppingCart = () => {
+  // const addShoppingCart = () => {
-    console.log('加入申购车==================>', props.dataList)
+  //   console.log('加入申购车==================>', props.dataList)
-    sgcInsert({
+  //   sgcInsert({
-      delFlag: '0',
+  //     delFlag: '0',
-      resourceId: props.dataList.id,
+  //     resourceId: props.dataList.id,
-      // userId: userId.value,
+  //     // userId: userId.value,
-    }).then((res) => {
+  //   }).then((res) => {
-      console.log(res)
+  //     console.log(res)
-      message.success('添加申购车成功！')
+  //     message.success('添加申购车成功！')
-      mybus.emit('getSgcNum')
+  //     mybus.emit('getSgcNum')
-    })
+  //   })
-  }
+  // }
-  // 立即申请
+  // // 立即申请
-  function toView() {
+  // function toView() {
-    // window.open(newpage.href, '_blank')
+  //   // window.open(newpage.href, '_blank')
-    router.push({
+  //   router.push({
-      path: '/apply',
+  //     path: '/apply',
-      query: {
+  //     query: {
-        name: props.dataList.name,
+  //       name: props.dataList.name,
-        resourceId: [props.dataList.id],
+  //       resourceId: [props.dataList.id],
-      },
+  //     },
-    })
+  //   })
-  }
+  // }
   // 收藏
   const goTOCollection = () => {
     console.log('收藏===================》', props.dataList)
@@ -115,10 +115,10 @@
           font-size: 0.14rem;
         }
         .name {
-          max-width: 3.3rem;
+          // max-width: 3.3rem;
-          overflow: hidden;
+          // overflow: hidden;
-          text-overflow: ellipsis;
+          // text-overflow: ellipsis;
-          white-space: nowrap;
+          // white-space: nowrap;
           font-size: 0.4rem;
           margin-right: 0.2rem;
         }