From d065f76217f775558a1e3d8914a5457a42960695 Mon Sep 17 00:00:00 2001
From: a0049873 <79py69t9wb@privaterelay.appleid.com>
Date: Tue, 29 Nov 2022 14:49:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B9=BF=E5=9C=BA=E6=A8=A1=E5=BC=8F=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E9=BB=98=E8=AE=A4=E9=80=89=E4=B8=AD=20=20=E5=BA=94?=
 =?UTF-8?q?=E7=94=A8=E9=A2=86=E5=9F=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../capacitySquare/components/algorithm.vue   | 567 +++++++++---------
 .../capacitySquare/components/application.vue |  13 +-
 .../views/capacitySquare/components/layer.vue |   8 +-
 3 files changed, 314 insertions(+), 274 deletions(-)

diff --git a/front/src/views/capacitySquare/components/algorithm.vue b/front/src/views/capacitySquare/components/algorithm.vue
index 47d6b958..502547f2 100644
--- a/front/src/views/capacitySquare/components/algorithm.vue
+++ b/front/src/views/capacitySquare/components/algorithm.vue
@@ -22,7 +22,11 @@
         </div>
         <div class="bottom" v-show="selectFlag2">
           <span class="light"></span>
-          <div v-for="val in dictList" :key="val" @click="changeAreaFunction(val)">
+          <div
+            v-for="val in dictList"
+            :key="val"
+            @click="changeAreaFunction(val)"
+          >
             {{ val }}
           </div>
         </div>
@@ -30,9 +34,18 @@
     </div>
 
     <div class="algorithm-class">
-      <div v-for="(item, index) in dataList" :key="`algorithm-${index}`" class="algorithm-card">
-        <a-image :src="algorithmCardPhoto(item)" :width="525" :height="275" :fallback="imgSrc" :preview="false">
-        </a-image>
+      <div
+        v-for="(item, index) in dataList"
+        :key="`algorithm-${index}`"
+        class="algorithm-card"
+      >
+        <a-image
+          :src="algorithmCardPhoto(item)"
+          :width="525"
+          :height="275"
+          :fallback="imgSrc"
+          :preview="false"
+        ></a-image>
 
         <a-tooltip>
           <template #title>{{ item.name }}</template>
@@ -46,308 +59,324 @@
   </div>
 </template>
 <script setup>
-import { getCategoryTreePage } from '@/api/personalCenter'
-import { getGisByArea } from '@/api/home'
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
-
-
-const deptType = ref(null)
-const typeName = ref('全市')
-const typeName2 = ref('全部')
-const dictList = ref([])
-const dataList = ref([])
-const selectFlag2 = ref(false)
-const selectFlag = ref(false)
-getCategoryTreePage({
-  page: 1,
-  limit: 99,
-  dictTypeId: '1513712507692818433',
-}).then((res) => {
-  dictList.value = ['全部']
-  res.data.data.list.map((val) => {
-    // if (val.dictLabel !== '其他') {
-    dictList.value.push(val.dictLabel)
-    // }
-  })
-})
-const params = {
-  pageNum: 1,
-  type: '智能算法',
-  area: typeName2.value == '全部' ? '' : typeName2.value,
-  pageSize: 9 // 固定9
-}
-
-// 切换领域
-const changeAreaFunction = (val) => {
-  params.pageNum = 1;
-  typeName2.value = val
-  params.area = typeName2.value == '全部' ? '' : typeName2.value;
-  selectFlag2.value = false
-  pageWithAttrsFunction()
-}
-let algorithmclassDom = null
-const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg'))
-const dataLength = ref(true)
-const isNoMore = ref(false)
-let url = ref('')
-const pageWithAttrsFunction = () => {
-  getGisByArea(params).then((res) => {
-    dataList.value = res.data.data.list
-    if (res.data.data.list.length < 9) {
-      dataLength.value = false
-    }
-  })
-}
-pageWithAttrsFunction()
-
-//图片显示
-const algorithmCardPhoto = (item) => {
-  let _arr = []
-  if(item.pic && typeof item.pic == 'string') {
-    _arr = JSON.parse(item.pic)
+  import { getCategoryTreePage } from '@/api/personalCenter'
+  import { getGisByArea } from '@/api/home'
+  import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const area = router.currentRoute.value.query.area
+  const deptType = ref(null)
+  const typeName = ref('全市')
+  const typeName2 = ref('全部')
+  if (area) {
+    typeName2.value = area
   }
-  let _img = _arr[0] && _arr[0].img || imgSrc.value;
-  console.log('_img------------>', _img);
-  return _img
-}
-//跳转详情页
-const detailFunction = (id) => {
-  window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
-}
-const algorithmFunction = (e) => {
-  var scrollTop = e.currentTarget.scrollTop
-  var windowHeight = e.currentTarget.clientHeight
-  var scrollHeight = e.currentTarget.scrollHeight
-  console.log(scrollTop, windowHeight, scrollHeight, '123')
-  if (
-    scrollTop + windowHeight <= scrollHeight + 1 &&
-    scrollTop + windowHeight >= scrollHeight - 1
-  ) {
-    // 当前滚动条已经触底
-    isNoMore.value = true
-    params.pageNum++
+  const dictList = ref([])
+  const dataList = ref([])
+  const selectFlag2 = ref(false)
+  const selectFlag = ref(false)
+  getCategoryTreePage({
+    page: 1,
+    limit: 99,
+    dictTypeId: '1513712507692818433',
+  }).then((res) => {
+    dictList.value = ['全部']
+    res.data.data.list.map((val) => {
+      // if (val.dictLabel !== '其他') {
+      dictList.value.push(val.dictLabel)
+      // }
+    })
+  })
+  const params = {
+    pageNum: 1,
+    type: '智能算法',
+    area: typeName2.value == '全部' ? '' : typeName2.value,
+    pageSize: 9, // 固定9
+  }
+
+  // 切换领域
+  const changeAreaFunction = (val) => {
+    params.pageNum = 1
+    typeName2.value = val
+    params.area = typeName2.value == '全部' ? '' : typeName2.value
+    selectFlag2.value = false
+    pageWithAttrsFunction()
+  }
+  let algorithmclassDom = null
+  const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg'))
+  const dataLength = ref(true)
+  const isNoMore = ref(false)
+  let url = ref('')
+  const pageWithAttrsFunction = () => {
     getGisByArea(params).then((res) => {
-      dataList.value.push(...res.data.data.list)
+      dataList.value = res.data.data.list
       if (res.data.data.list.length < 9) {
         dataLength.value = false
       }
     })
-  } else {
-    isNoMore.value = false
   }
-}
+  pageWithAttrsFunction()
 
-// 切换区市
-const changeDeptType = (str) => {
-  if (str) {
-    if (algorithmclassDom) {
-      algorithmclassDom.scrollTop = 0;
+  //图片显示
+  const algorithmCardPhoto = (item) => {
+    let _arr = []
+    if (item.pic && typeof item.pic == 'string') {
+      _arr = JSON.parse(item.pic)
     }
-    switch (str) {
-      case '全市':
-        deptType.value = null
-        typeName.value = '全 市'
-        break
-      case '市级':
-        deptType.value = 2
-        typeName.value = '市 级'
-        break
-      case '区级':
-        deptType.value = 3
-        typeName.value = '区 级'
-        break
-      case '企业':
-        deptType.value = 4
-        typeName.value = '企 业'
-        break
+    let _img = (_arr[0] && _arr[0].img) || imgSrc.value
+    console.log('_img------------>', _img)
+    return _img
+  }
+  //跳转详情页
+  const detailFunction = (id) => {
+    window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
+  }
+  const algorithmFunction = (e) => {
+    var scrollTop = e.currentTarget.scrollTop
+    var windowHeight = e.currentTarget.clientHeight
+    var scrollHeight = e.currentTarget.scrollHeight
+    console.log(scrollTop, windowHeight, scrollHeight, '123')
+    if (
+      scrollTop + windowHeight <= scrollHeight + 1 &&
+      scrollTop + windowHeight >= scrollHeight - 1
+    ) {
+      // 当前滚动条已经触底
+      isNoMore.value = true
+      params.pageNum++
+      getGisByArea(params).then((res) => {
+        dataList.value.push(...res.data.data.list)
+        if (res.data.data.list.length < 9) {
+          dataLength.value = false
+        }
+      })
+    } else {
+      isNoMore.value = false
     }
-    params.pageNum = 1;
-    if(deptType.value !== null && deptType.value !== undefined) {
-      params.deptType = deptType.value;
-    }else {
-      if(Object.keys(params).includes('deptType')) {
-        delete params.deptType
+  }
+
+  // 切换区市
+  const changeDeptType = (str) => {
+    if (str) {
+      if (algorithmclassDom) {
+        algorithmclassDom.scrollTop = 0
+      }
+      switch (str) {
+        case '全市':
+          deptType.value = null
+          typeName.value = '全 市'
+          break
+        case '市级':
+          deptType.value = 2
+          typeName.value = '市 级'
+          break
+        case '区级':
+          deptType.value = 3
+          typeName.value = '区 级'
+          break
+        case '企业':
+          deptType.value = 4
+          typeName.value = '企 业'
+          break
+      }
+      params.pageNum = 1
+      if (deptType.value !== null && deptType.value !== undefined) {
+        params.deptType = deptType.value
+      } else {
+        if (Object.keys(params).includes('deptType')) {
+          delete params.deptType
+        }
       }
     }
+    selectFlag.value = false
+    getData(str)
   }
-  selectFlag.value = false
-  getData(str)
-}
 
-const getData = (str) => {
-  getGisByArea(params).then((res) => {
-    const resData = res.data.data || {}
-    if (resData.list.length > 0 && resData.list.length < 9 && algorithmclassDom) {
-      algorithmclassDom.removeEventListener('scroll', algorithmFunction, true)
-    }
-    dataList.value = resData.list || []
-    nextTick(() => {
-      algorithmclassDom = document.querySelector('.algorithm-box')
-      if (str && algorithmclassDom) {
+  const getData = (str) => {
+    getGisByArea(params).then((res) => {
+      const resData = res.data.data || {}
+      if (
+        resData.list.length > 0 &&
+        resData.list.length < 9 &&
+        algorithmclassDom
+      ) {
         algorithmclassDom.removeEventListener('scroll', algorithmFunction, true)
-        algorithmclassDom.addEventListener('scroll', algorithmFunction, true)
       }
+      dataList.value = resData.list || []
+      nextTick(() => {
+        algorithmclassDom = document.querySelector('.algorithm-box')
+        if (str && algorithmclassDom) {
+          algorithmclassDom.removeEventListener(
+            'scroll',
+            algorithmFunction,
+            true
+          )
+          algorithmclassDom.addEventListener('scroll', algorithmFunction, true)
+        }
+      })
     })
-  })
-}
-
-onMounted(() => {
-  algorithmclassDom = document.querySelector('.algorithm-class')
-  if (dataLength.value) {
-    //监听滚动事件
-    algorithmclassDom.addEventListener('scroll', algorithmFunction, true)
   }
-})
-onBeforeUnmount(() => {
-  algorithmclassDom.removeEventListener('scroll', algorithmFunction, true)
-})
+
+  onMounted(() => {
+    algorithmclassDom = document.querySelector('.algorithm-class')
+    if (dataLength.value) {
+      //监听滚动事件
+      algorithmclassDom.addEventListener('scroll', algorithmFunction, true)
+    }
+  })
+  onBeforeUnmount(() => {
+    algorithmclassDom.removeEventListener('scroll', algorithmFunction, true)
+  })
 </script>
 
 <style lang="less" scoped>
-.algorithm {
-  .select {
-    margin: 0.1rem 0 0.1rem 0.2rem;
-    color: #fff;
-    font-size: 0.2rem;
-    font-family: webfont;
-    position: relative;
-
-    .top {
-      cursor: pointer;
-      width: 3.61rem;
-      height: 0.85rem;
-      font-weight: 600;
-      text-align: center;
-      padding-top: 0.1rem;
-      background: url('~@/assets/capacitySquare/select-bg.png') no-repeat;
-      background-size: 100%;
+  .algorithm {
+    .select {
+      margin: 0.1rem 0 0.1rem 0.2rem;
+      color: #fff;
+      font-size: 0.2rem;
+      font-family: webfont;
       position: relative;
 
-      .light {
-        width: 0.56rem;
-        height: 3px;
-        position: absolute;
-        top: 0.4rem;
-        left: 1.52rem;
-        background: url('~@/assets/capacitySquare/select-light1.png') no-repeat;
-        background-size: 100%;
-      }
-    }
-
-    .bottom {
-      cursor: pointer;
-      position: absolute;
-      top: 0.5rem;
-      left: 0.9rem;
-      z-index: 1000;
-      background: rgba(57, 134, 239, 0.68);
-      border: 1px solid #aed5ff;
-
-      .light {
-        display: inline-block;
-        width: 2.39rem;
-        height: 5px;
-        position: absolute;
-        top: -0.08rem;
-        left: -0.3rem;
-        background: url('~@/assets/capacitySquare/select-light2.png') no-repeat;
-        background-size: 100%;
-      }
-
-      &>div {
-        width: 1.8rem;
-        height: 0.4rem;
-        line-height: 0.4rem;
+      .top {
+        cursor: pointer;
+        width: 3.61rem;
+        height: 0.85rem;
+        font-weight: 600;
         text-align: center;
-        border-top: 1px solid #aed5ff;
-      }
+        padding-top: 0.1rem;
+        background: url('~@/assets/capacitySquare/select-bg.png') no-repeat;
+        background-size: 100%;
+        position: relative;
 
-      &>div:nth-of-type(1) {
-        border: none;
-      }
-    }
-  }
-
-  .algorithm-class {
-    // margin-top: 0.6rem;
-    margin-bottom: 0.18rem;
-    display: grid;
-    grid-template-columns: repeat(3, 33%);
-    height: 8.8rem;
-    overflow: auto;
-    margin-left: 1.15rem;
-    margin-right: 0.15rem;
-
-    .algorithm-card {
-      height: 2.75rem;
-      width: 5.25rem;
-      background: url('~@/assets/capacitySquare/algorithm-bg.png') no-repeat;
-      background-size: 100% 100%;
-      margin-bottom: 0.4rem;
-      margin-right: 0.65rem;
-      position: relative;
-
-      :deep(.ant-image) {
-        img {
-          margin-top: 0.15rem;
-          height: 2.45rem;
-          width: 5.05rem;
-          margin-left: 0.1rem;
+        .light {
+          width: 0.56rem;
+          height: 3px;
+          position: absolute;
+          top: 0.4rem;
+          left: 1.52rem;
+          background: url('~@/assets/capacitySquare/select-light1.png')
+            no-repeat;
+          background-size: 100%;
         }
       }
 
-      .algorithm-card-photo {
-        height: 100%;
-        width: 100%;
-        background: url('~@/assets/capacitySquare/algorithm-photo.jpg') no-repeat;
-        background-size: 100%;
-      }
-
-      .algorithm-card-title {
+      .bottom {
+        cursor: pointer;
         position: absolute;
-        height: 0.6rem;
-        margin-left: 0.08rem;
-        width: 97%;
-        color: #ffffff;
-        font-size: 0.22rem;
-        font-family: alibaba;
-        bottom: 0.15rem;
-        padding-left: 0.22rem;
-        background: url('~@/assets/capacitySquare/algorithm-title-bg.png') no-repeat;
-        background-size: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
+        top: 0.5rem;
+        left: 0.9rem;
+        z-index: 1000;
+        background: rgba(57, 134, 239, 0.68);
+        border: 1px solid #aed5ff;
 
-        span {
-          line-height: 0.24rem;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          cursor: pointer;
+        .light {
+          display: inline-block;
+          width: 2.39rem;
+          height: 5px;
+          position: absolute;
+          top: -0.08rem;
+          left: -0.3rem;
+          background: url('~@/assets/capacitySquare/select-light2.png')
+            no-repeat;
+          background-size: 100%;
         }
 
-        span:last-child {
-          font-size: 0.14rem;
+        & > div {
+          width: 1.8rem;
+          height: 0.4rem;
+          line-height: 0.4rem;
+          text-align: center;
+          border-top: 1px solid #aed5ff;
+        }
+
+        & > div:nth-of-type(1) {
+          border: none;
         }
       }
     }
-  }
 
-  .algorithm-class::-webkit-scrollbar-track-piece {
-    background: #a5bcdb;
-    border-radius: 0.08rem;
-  }
+    .algorithm-class {
+      // margin-top: 0.6rem;
+      margin-bottom: 0.18rem;
+      display: grid;
+      grid-template-columns: repeat(3, 33%);
+      height: 8.8rem;
+      overflow: auto;
+      margin-left: 1.15rem;
+      margin-right: 0.15rem;
 
-  .algorithm-class::-webkit-scrollbar-thumb {
-    height: 3.2rem;
-    background: linear-gradient(to bottom, #47d7f5, #3dc6e3);
-  }
+      .algorithm-card {
+        height: 2.75rem;
+        width: 5.25rem;
+        background: url('~@/assets/capacitySquare/algorithm-bg.png') no-repeat;
+        background-size: 100% 100%;
+        margin-bottom: 0.4rem;
+        margin-right: 0.65rem;
+        position: relative;
 
-  .algorithm-class::-webkit-scrollbar {
-    height: 8.8rem;
-    width: 0.08rem;
-    border-radius: 0.08rem;
+        :deep(.ant-image) {
+          img {
+            margin-top: 0.15rem;
+            height: 2.45rem;
+            width: 5.05rem;
+            margin-left: 0.1rem;
+          }
+        }
+
+        .algorithm-card-photo {
+          height: 100%;
+          width: 100%;
+          background: url('~@/assets/capacitySquare/algorithm-photo.jpg')
+            no-repeat;
+          background-size: 100%;
+        }
+
+        .algorithm-card-title {
+          position: absolute;
+          height: 0.6rem;
+          margin-left: 0.08rem;
+          width: 97%;
+          color: #ffffff;
+          font-size: 0.22rem;
+          font-family: alibaba;
+          bottom: 0.15rem;
+          padding-left: 0.22rem;
+          background: url('~@/assets/capacitySquare/algorithm-title-bg.png')
+            no-repeat;
+          background-size: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+
+          span {
+            line-height: 0.24rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            cursor: pointer;
+          }
+
+          span:last-child {
+            font-size: 0.14rem;
+          }
+        }
+      }
+    }
+
+    .algorithm-class::-webkit-scrollbar-track-piece {
+      background: #a5bcdb;
+      border-radius: 0.08rem;
+    }
+
+    .algorithm-class::-webkit-scrollbar-thumb {
+      height: 3.2rem;
+      background: linear-gradient(to bottom, #47d7f5, #3dc6e3);
+    }
+
+    .algorithm-class::-webkit-scrollbar {
+      height: 8.8rem;
+      width: 0.08rem;
+      border-radius: 0.08rem;
+    }
   }
-}
 </style>
diff --git a/front/src/views/capacitySquare/components/application.vue b/front/src/views/capacitySquare/components/application.vue
index c4372edc..098d9882 100644
--- a/front/src/views/capacitySquare/components/application.vue
+++ b/front/src/views/capacitySquare/components/application.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: hisense.liangjunhua
  * @Date: 2022-08-09 09:31:25
- * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-10-24 10:44:50
+ * @LastEditors: Light
+ * @LastEditTime: 2022-11-29 14:41:49
  * @Description: 应用资源
 -->
 <template>
@@ -57,12 +57,17 @@
   import { selectAppList } from '@/api/home'
   import { useRouter } from 'vue-router'
   const router = useRouter()
+  const selectArea = router.currentRoute.value.query.area
   const pageNum = ref(1)
   const flag = ref(true)
   const type = ref(null)
   const area = ref(null)
   const typeName = ref('全市')
   const typeName2 = ref('全部')
+  if (selectArea && selectArea !== '全部') {
+    typeName2.value = selectArea
+    area.value = selectArea
+  }
   const dictList = ref([])
   const data = reactive({ list: [] })
   const selectFlag = ref(false)
@@ -121,8 +126,8 @@
       type: type.value,
       area: area.value,
     }).then((res) => {
-      console.log('res---应用广场--------->', res);
-      
+      console.log('res---应用广场--------->', res)
+
       if (res.data.data.total.length < 9) {
         dom.removeEventListener('scroll', viewMonitor, true)
       }
diff --git a/front/src/views/capacitySquare/components/layer.vue b/front/src/views/capacitySquare/components/layer.vue
index 01486aac..3173e6e2 100644
--- a/front/src/views/capacitySquare/components/layer.vue
+++ b/front/src/views/capacitySquare/components/layer.vue
@@ -60,9 +60,15 @@
   import { getCategoryTreePage } from '@/api/personalCenter'
   import { getGisByArea } from '@/api/home'
   import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const area = router.currentRoute.value.query.area
   const deptType = ref(null)
   const typeName = ref('全市')
   const typeName2 = ref('全部')
+  if (area) {
+    typeName2.value = area
+  }
   const dictList = ref([])
   const dataList = ref([])
   const selectFlag2 = ref(false)
@@ -337,4 +343,4 @@
       border-radius: 0.08rem;
     }
   }
-</style>
\ No newline at end of file
+</style>