赋能案例

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

@@ -13,7 +13,7 @@
       <div class="assign-case-detail-page-header-son">
         <div
           class="assign-case-detail-page-header-son-left"
-          :style="`background:url(${pictureFormat(dataFrom.name)})`"
+          :style="`background:url(${dataFrom.note1})`"
         ></div>
         <div class="assign-case-detail-page-header-son-right">
           <div class="assign-case-detail-page-header-son-right-title">
@@ -21,7 +21,7 @@
           </div>
           <div
             class="assign-case-detail-page-header-son-right-click"
-            @click="clickToView(dataFrom.name)"
+            @click="clickToView(dataFrom.apiUrl)"
           >
             <span>点击查看</span>
             <span></span>
@@ -37,33 +37,33 @@
             id="assign-case-detail-page-content-left-border-id"
           >
             <div
-              v-for="(item, index) in dataFrom.content"
+              v-for="(item, index) in dataFrom.infoList"
               :key="index"
               @click="tabSwitch(item, index)"
               :class="
-                tabName == item.title
+                tabName == item.attrType
                   ? 'assign-case-detail-page-content-left-border-click'
                   : ''
               "
             >
-              {{ item.title }}
+              {{ item.attrType }}
             </div>
           </div>
         </div>
         <div class="assign-case-detail-page-content-center">
           <div
             class="assign-case-detail-page-content-center-card"
-            v-for="(item, index) in dataFrom.content"
+            v-for="(item, index) in dataFrom.infoList"
             :key="index"
             :id="'assign-case-detail-page-content-center-card' + index"
           >
             <div class="assign-case-detail-page-content-center-card-title">
-              {{ item.title }}
+              {{ item.attrType }}
             </div>
             <div
               class="assign-case-detail-page-content-center-card-description"
             >
-              {{ item.description }}
+              {{ item.attrValue }}
               <div v-if="item.descriptions">
                 <p
                   v-for="(
@@ -86,10 +86,12 @@
             <div class="assign-case-detail-page-content-right-card-content">
               <div
                 class="assign-case-detail-page-content-right-card-content-card"
-                @click="routerClick(dataFrom.else.name)"
+                v-for="(item, index) in dataList"
+                :key="index"
+                @click="routerClick(item.id)"
               >
-                <p>{{ dataFrom.else.name }}</p>
+                <p>{{ item.name }}</p>
-                <p>{{ dataFrom.else.time }}</p>
+                <p>{{ item.createDate }}</p>
               </div>
             </div>
             <div class="no-data">暂无更多</div>
@@ -106,116 +108,66 @@
   import HomeHeader from '@/views/home/components/header'
   import HomeFooter from '@/views/newHome/components/Footer'
   import { useRouter } from 'vue-router'
+  import { selectOne, pageWithAttrs } from '@/api/home'
   const router = useRouter()
-  let val = router.currentRoute.value.query.val
+  let val = router.currentRoute.value.query.id
   const scrollTop = ref(0)
   let dataFrom = ref({})
   const domArr = ref([])
   const selectNow = ref('')
+  const dataList = ref([])
   let tabName = ref('案例背景')
-  console.log('val', val)
-  //图片样式切换
-  function pictureFormat(name) {
-    if (name == '道路保洁监管场景') {
-      return require('@/assets/assignCase/road.png')
-    } else {
-      return require('@/assets/assignCase/city.png')
-    }
-  }
   //路由跳转事件
-  const routerClick = (name) => {
+  const routerClick = (id) => {
-    val = name
+    router.push({ path: 'AssignCaseDetailPage', query: { id: id } })
-    router.push({ path: 'AssignCaseDetailPage', query: { val } })
   }
+  //初始化数据
   const init = () => {
-    val = router.currentRoute.value.query.val
+    pageWithAttrsFunction(router.currentRoute.value.query.id)
+    val = router.currentRoute.value.query.id
     tabName.value = '案例背景'
-    if (val == '道路保洁监管场景') {
+    selectOne(val).then((res) => {
-      dataFrom.value = {
+      res.data.data.infoList.map((item, index) => {
-        name: '道路保洁监管场景',
+        console.log('res.data.data.infoList', res.data.data.infoList)
-        content: [
+        if (item.attrType == '图片') {
-          {
+          res.data.data.infoList.splice(index, 1)
-            title: '案例背景',
+        }
-            description:
+      })
-              '融合市生态环境局出租车走航大气检测数据、城管局渣土车及环卫作业数据、住建局建筑工地数据、城市云脑视频监控等数据，结合时空大数据分析、预测预警分析等手段，对全市道路污染重点路段进行线索分析、作业辅导',
+      res.data.data.infoList.map((item, index) => {
-          },
+        console.log('res.data.data.infoList', res.data.data.infoList)
-          {
+        if (item.attrType == '应用领域') {
-            title: '业务挑战',
+          res.data.data.infoList.splice(index, 1)
-            description:
+        }
-              '目前城市道路污染情况缺少主动发现手段，对渣土车及污染投诉事件，缺乏可参考线索等辅助执法手段',
+      })
-          },
+      dataFrom.value = res.data.data
-          {
+      console.log('dataFrom.value', dataFrom.value)
-            title: '解决方案',
+    })
-            description:
+  }
-              '当道路发生污染(PM10数值>200)时，触发道路污染事件，并通过时空算法模型智能分析污染线索，如建筑工地扬尘外溢、渣土车遗撒、环卫作业问题等。',
+  //其他案例
-            descriptions: [
+  const pageWithAttrsFunction = (id) => {
-              '系统实现预警事件与地图图层数据关联展示，当用户点击预警事件后，中间地图也会展示预警事件发生时段内的污染路段名称、污染状态，以及路段周边的工地、渣土车、环卫车轨迹及监控摄像头位置。同时屏幕右侧显示对应的工地、渣土车、摄像头列表信息。',
+    let params = {
-            ],
+      deptIds: [],
-          },
+      districtId: '',
-          {
+      infoList: [],
-            title: '案例成效',
+      orderField: 'create_date',
-            description:
+      orderType: 'DESC',
-              '实现城市运行智能监测，自动告警预警问题路段。为城管局渣土车执法提供线索，也可以快速定位疑似问题工地和渣土车。',
+      pageNum: 1,
-            descriptions: [
+      pageSize: 99,
-              '根据道路污染情况，对环卫作业进行调度部署、辅助决策，实现环卫作业调度智能化。',
+      type: '赋能案例',
-            ],
+    }
-          },
+    pageWithAttrs(params).then((res) => {
-        ],
+      res.data.data.records.map((item, index) => {
-        else: {
+        if (item.id == id) {
-          name: '文明创城案例',
+          res.data.data.records.splice(index, 1)
-          time: '2022-01-01 12:00',
+        }
-        },
+      })
-      }
+      dataList.value = res.data.data.records
-    } else {
+      console.log('dataList.value', dataList.value)
-      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,
+    () => router.currentRoute.value.query.id,
     () => {
       init()
     },
@@ -263,6 +215,7 @@
     }
   }
   onMounted(() => {
+    init()
     // console.clear()
     window.addEventListener('scroll', () => {
       domArr.value = document.querySelectorAll(
@@ -291,12 +244,8 @@
     })
   })
   //点击查看事件
-  const clickToView = (name) => {
+  const clickToView = (link) => {
-    if (name == '道路保洁监管场景') {
+    window.open(link)
-      window.open('http://15.72.183.90:7001/#/road')
-    } else {
-      window.open('http://15.72.183.90:7001/#/city')
-    }
   }
 </script>
 
@@ -325,7 +274,7 @@
           width: 2.9rem;
           background-repeat: no-repeat;
           background-position: center;
-          background-size: cover;
+          background-size: 100%;
           margin-right: 0.3rem;
         }
         .assign-case-detail-page-header-son-right {
@@ -414,13 +363,12 @@
       }
       .assign-case-detail-page-content-right {
         width: 2.7rem;
-        height: 2.6rem;
         display: inline-block;
         .assign-case-detail-page-content-right-card {
           width: 2.7rem;
-          height: 2.6rem;
           border: 1px #e5e5e5 solid;
           position: relative;
+          padding-bottom: 0.6rem;
           .assign-case-detail-page-content-right-card-title {
             padding-left: 15px;
             background: linear-gradient(

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

@@ -27,7 +27,12 @@
                 :ref="txttype"
                 :class="hidetext == true ? 'hidetext' : ''"
               >
-                <span v-for="(item, index) in tabClickData" :key="index">
+                <span
+                  v-for="(item, index) in tabClickData"
+                  :key="index"
+                  :class="listBg == item.name ? 'down' : ''"
+                  @click="switchList(item.name)"
+                >
                   {{ item.name }}
                 </span>
               </div>
@@ -42,23 +47,19 @@
           </div>
         </div>
         <main>
-          <div class="content">
+          <div class="content" v-if="resourceTotal != '0'">
             <div
               class="contenBox"
               v-for="(item, index) in contenBox"
               :key="index"
             >
-              <img :src="item.photo || ''" alt="" />
+              <img :src="item.note1 || ''" alt="" />
               <h3>{{ item.name }}</h3>
               <p>
                 发布时间
-                <span>{{ item.time }}</span>
+                <span>{{ item.createDate }}</span>
               </p>
-              <div class="look" @click="lookContent(item.name)">查看详情</div>
+              <div class="look" @click="lookContent(item.id)">查看详情</div>
-            </div>
-            <div class="contenBox contenBoxImg" v-if="contenBox.length < 3">
-              <img :src="hopeing" alt="" class="hopeingImg" />
-              <p>正在研发中...</p>
             </div>
           </div>
           <div class="pagination">
@@ -80,38 +81,24 @@
 <script setup>
   import { ref, onMounted } from 'vue'
   // import { useStore } from 'vuex'
+  import { pageWithAttrs } from '@/api/home.js'
   import { useRouter } from 'vue-router'
   // import { pinyin } from 'pinyin-pro'
   // import { Empty } from 'ant-design-vue'
 
   const router = useRouter()
-
+  const listBg = ref('')
-  const contenBox = ref([
+  const contenBox = ref([])
-    {
+  // const hopeing = require('@/assets/assignCase/hopeing.png')
-      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',
-    },
-    {
-      photo: require('@/assets/assignCase/important.png'),
-      name: '重点区域监控平台',
-      time: '2022-01-01 12:00',
-    },
-  ])
-  const hopeing = require('@/assets/assignCase/hopeing.png')
   // 分页
-  const resourceTotal = contenBox.value.length
+  const resourceTotal = ref('')
-  // const resourceTotal = ref(15)
   const currentPage = ref(1)
   const currentPageSize = ref(3)
   const pageChange = (val) => {
     console.log(val)
     currentPage.value = val
+    //每次改变页码调用接口
+    init()
   }
   // 选项卡
   const titleName = ref([
@@ -180,6 +167,8 @@
     if (val == 1) {
       tabClickShow.value = true
     } else {
+      let list = []
+      init(list)
       tabClickShow.value = false
     }
   }
@@ -195,11 +184,40 @@
       moretext.value = '收起'
     }
   }
-  onMounted(() => {})
+  //点击筛选
+  const switchList = (name) => {
+    listBg.value = name
+    //每次点击应用领域调用接口
+    let params = []
+    params[0] = { attrType: '应用领域', attrValue: name }
+    init(params)
+  }
+  //查询分页接口
+  const init = (list) => {
+    let params = {
+      deptIds: [],
+      districtId: '',
+      infoList: list || [],
+      orderField: 'create_date',
+      orderType: 'DESC',
+      pageNum: currentPage.value,
+      pageSize: 3,
+      type: '赋能案例',
+    }
+    pageWithAttrs(params).then((res) => {
+      console.log('res', res.data.data)
+      resourceTotal.value = res.data.data.total
+      contenBox.value = res.data.data.records
+    })
+  }
+
+  onMounted(() => {
+    init()
+  })
 
   // 跳转
-  const lookContent = (val) => {
+  const lookContent = (id) => {
-    router.push({ path: 'AssignCaseDetailPage', query: { val } })
+    router.push({ path: 'AssignCaseDetailPage', query: { id } })
   }
 </script>
 <style scoped lang="less">
@@ -292,6 +310,14 @@
               center;
             transform: rotate(90deg);
           }
+          .down {
+            display: inline-block;
+            line-height: 30px;
+            padding: 5px 10px;
+            background-color: #0087ff;
+            color: #ffffff;
+            border-radius: 0.16rem;
+          }
         }
         .tabClick {
           height: 80px;