Merge branch 'hi-ucs-dev' of http://192.168.124.50:3000/wuhongjian/hi-ucs into hi-ucs-dev

back/src/views/modules/ability/IntegratedServices-add.vue

@@ -53,10 +53,8 @@
             <div class="title">
               组合能力
             </div>
-            <!-- <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施" ref="jcssDom"
-              :getDataParams="getListParams['基础设施']"></combine-ability> -->
             <InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
-              ref="jcssDom"></InfrastructureModal>
+              :modalType="modalType" ref="jcssDom"></InfrastructureModal>
             <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="数据资源" ref="sjzyDom"
               :getDataParams="getListParams['数据资源']"></combine-ability>
             <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="组件服务" ref="zjfwDom"
@@ -298,14 +296,10 @@ export default {
         file.type === 'image/jpeg' ||
         file.type === 'image/jpg' ||
         file.type === 'image/png'
-      // const isLt2M = file.size / 1024 / 1024 < 2
 
       if (!isImage) {
         this.$message.error('上传头像图片只能是 jpg/png 格式!')
       }
-      // if (!isLt2M) {
-      //   this.$message.error('上传头像图片大小不能超过 2MB!')
-      // }
       return isImage
     },
     addUploadRemoveFile(file, fileList) {
@@ -317,14 +311,9 @@ export default {
         file.type === 'image/jpeg' ||
         file.type === 'image/jpg' ||
         file.type === 'image/png'
-      // const isLt2M = file.size / 1024 / 1024 < 2
-
       if (!isImage) {
         this.$message.error('上传头像图片只能是 jpg/png 格式!')
       }
-      // if (!isLt2M) {
-      //   this.$message.error('上传头像图片大小不能超过 2MB!')
-      // }
       return isImage
     },
     editUploadRemoveFile(file, fileList) {

back/src/views/modules/ability/assignedScene/add-update-scene.vue

@@ -62,7 +62,7 @@
               组合能力
             </div>
             <InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
-              ref="jcssDom"></InfrastructureModal>
+              :modalType="modalType" ref="jcssDom"></InfrastructureModal>
             <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="数据资源" ref="sjzyDom"
               :getDataParams="getListParams['数据资源']"></combine-ability>
             <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="组件服务" ref="zjfwDom"
@@ -269,6 +269,7 @@ export default {
       handler(newVal) {
         this.addOrUpdateVisibleCopy = newVal;
         if (this.modalType == 'add' && newVal) {
+          localStorage.setItem('InfrastructureSearchData', JSON.stringify({}))
           this.getDetail(this.dataForm)
         }
       },
@@ -361,6 +362,7 @@ export default {
     ),
     // 详情
     getDetail(data) {
+      console.log('data---详情--------->', data);
       this.dataForm = data;
       this.$nextTick(() => {
         for (const key in this.refsParseArray) {
@@ -369,7 +371,7 @@ export default {
         let _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {};
         this.imageUrl = _imgObj.attrValue;
 
-        // 组合能力
+        // 组合能力--特殊处理
         Object.keys(this.getListParams).map(k => {
           let arr = data.fuseResourceList.filter(v => v.type == k);
           let arr2 = [];
@@ -391,14 +393,9 @@ export default {
         file.type === 'image/jpeg' ||
         file.type === 'image/jpg' ||
         file.type === 'image/png'
-      // const isLt2M = file.size / 1024 / 1024 < 2
-
       if (!isImage) {
         this.$message.error('上传头像图片只能是 jpg/png 格式!')
       }
-      // if (!isLt2M) {
-      //   this.$message.error('上传头像图片大小不能超过 2MB!')
-      // }
       return isImage
     },
     addUploadRemoveFile(file, fileList) {
@@ -410,14 +407,10 @@ export default {
         file.type === 'image/jpeg' ||
         file.type === 'image/jpg' ||
         file.type === 'image/png'
-      // const isLt2M = file.size / 1024 / 1024 < 2
 
       if (!isImage) {
         this.$message.error('上传头像图片只能是 jpg/png 格式!')
       }
-      // if (!isLt2M) {
-      //   this.$message.error('上传头像图片大小不能超过 2MB!')
-      // }
       return isImage
     },
     editUploadRemoveFile(file, fileList) {
@@ -429,7 +422,6 @@ export default {
         return this.$message.error(res.msg)
       }
       this.imageUrl = res.data
-      // this.imageUrl = URL.createObjectURL(file.raw);
     },
   },
   beforeDestroy() {

back/src/views/modules/ability/assignedScene/components/infrastructure-modal.vue

@@ -2,7 +2,8 @@
     <div>
         <div class="top flex-row-start">
             <div class="type">{{ type }}</div>
-            <el-button type="primary" size="small" @click="showModal = true">添加</el-button>
+            <el-button type="primary" size="small" @click="showModal = true">{{ modalType == 'add' ? '添加' : '编辑' }}
+            </el-button>
         </div>
         <el-dialog class="modal-box" :visible.sync="showModal" title="请选择" @close="close" :close-on-click-modal="false"
             :close-on-press-escape="false" :key="showKey" append-to-body>
@@ -34,8 +35,8 @@
                     </div>
                     <div class="flex-row-start" style="margin-bottom:10px;align-items: flex-start;">
                         <div class="left-text" style="margin-top: 10px;">关键词</div>
-                        <el-input style="margin-left:10px;width: 200px;" v-model="cameraName" placeholder="名称"
+                        <el-input style="margin-left:10px;width: 200px;" v-model="searchData.cameraName"
-                            clearable>
+                            placeholder="名称" clearable>
                         </el-input>
                         <el-button type="primary" style="margin-left:10px;margin-top:4px" size="small" @click="getData">
                             搜索
@@ -59,8 +60,8 @@
                             <el-table-column prop="nodeName" label="归属" header-align="center" align="center">
                             </el-table-column>
                         </el-table>
-                        <el-pagination style="justify-content: center;display: flex;" :current-page="pageData.page"
+                        <el-pagination style="justify-content: center;display: flex;" :current-page="searchData.pageNum"
-                            :page-sizes="[10, 20, 50, 100]" :page-size="pageData.limit" :total="pageData.total"
+                            :page-sizes="[10, 20, 50, 100]" :page-size="searchData.pageSize" :total="pageData.total"
                             layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
                             @current-change="pageCurrentChangeHandle">
                         </el-pagination>
@@ -75,7 +76,7 @@
             </template>
         </el-dialog>
 
-        <DisplayList :displayList="displayList"></DisplayList>
+        <DisplayList :displayList="displayList" showKey="channelName"></DisplayList>
     </div>
 </template>
 
@@ -98,6 +99,10 @@ export default {
             type: String,
             default: "基础设施"
         },
+        modalType: {
+            type: String,
+            default: 'add'
+        }
     },
     data() {
         const getYunList = () => {
@@ -109,9 +114,7 @@ export default {
         return {
             showKey: 0,
             showModal: false,
-            transferData: [], // 穿梭框所有数据
             selectedArray: [], // 已选择的数据id
-            allData: [],
             displayList: [], // 用于展示的list
             btnList: ['视频资源', '云资源', '感知资源'],
             showText: {
@@ -133,35 +136,41 @@ export default {
                     list: []
                 },
             ],
-            activeBtn: '视频资源',
-            checkList: [],
             currentList: [],
             dataListLoading: false,
             dataList: [],
             pageData: {
-                limit: 10,
-                page: 1,
                 total: 0,
             },
             cameraName: '',
+            postData: {},
+            activeBtn: '视频资源',
+            checkList: [],
+            searchData: {
+                cameraName: '',
+                pageSize: 10,
+                pageNum: 1,
+                parentId: ''
+            },
+            dataFormCopy: {}
         }
     },
     watch: {
         async showModal(newVal) {
             if (newVal) {
-                await this.getData();
                 // 默认选中复选框
                 this.$nextTick(() => {
                     this.selectCheckbox()
                 })
+                if (this.modalType == 'add') {
+                    this.clear()
+                }
             }
         }
     },
     mounted() {
         // 获取视频资源
         this.getVideoBtn()
-        // 获取列表
-        this.getData()
     },
     methods: {
         selectCheckbox() {
@@ -176,24 +185,24 @@ export default {
                 })
                 if (list.length) {
                     list.forEach((row) => {
-                        this.$refs.dataTable.toggleRowSelection(row, true)
+                        this.$refs.dataTable && this.$refs.dataTable.toggleRowSelection(row, true)
                     })
                 }
             }
         },
+        showAction() {
+            this.showModal = true;
+        },
+        // 详情
         async getDataInfo(dataForm) {
+            this.modalType == 'edit'
+            this.dataFormCopy = dataForm;
             await this.getVideoBtn();
-            await this.getData();
             let arr = [];
             let attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type);
             if (attrValue.length > 0) {
                 attrValue.map(val => {
-                    let item = this.dataList.find(v => v.idtCameraChannel == val.resourceId) || {};
+                    let _obj = Object.assign({}, val, val.resource)
-                    let _obj = {
-                        type: val.type,
-                        idtCameraChannel: val.resourceId,
-                        name: item.channelName
-                    };
                     arr.push(_obj);
                 });
             }
@@ -201,28 +210,31 @@ export default {
             this.displayList = JSON.parse(JSON.stringify(arr));
             // 已选中
             this.selectedArray = arr.map(v => v.idtCameraChannel);
-        },
+            this.dataList = JSON.parse(JSON.stringify(arr));
-        handleShowModal() {
+            this.pageData.total = arr.length;
-            this.showModal = true;
+            // 默认选中复选框
+            this.$nextTick(() => {
+                this.selectCheckbox()
+            })
         },
         // 点击复选框
         dataListSelectionChangeHandle(data) {
             this.selectedArray = data;
         },
-        pageCurrentChangeHandle(page) {
+        pageCurrentChangeHandle(pageNum) {
-            this.pageData.page = page;
+            this.searchData.pageNum = pageNum;
             this.getData()
         },
-        pageSizeChangeHandle(limit) {
+        pageSizeChangeHandle(pageSize) {
-            this.pageData.limit = limit;
+            this.searchData.pageSize = pageSize;
             this.getData()
         },
         changeBtn(btn) {
             this.activeBtn = btn;
+            this.currentList = this.tabData.find(v => v.tabName == btn).list || [];
             this.checkList = [];
-            this.cameraName = '';
+            this.searchData.cameraName = '';
             this.getData()
-            this.currentList = this.tabData.find(v => v.tabName == btn).list || []
         },
         // 获取视频标签列表
         getVideoBtn() {
@@ -234,7 +246,12 @@ export default {
                     }
                     this.tabData[0].list = res.data.data || [];
 
-                    this.changeBtn(this.activeBtn)
+                    this.$nextTick(() => {
+                        this.currentList = this.tabData.find(v => v.tabName == this.activeBtn).list || [];
+                        if (this.modalType == 'add') {
+                            this.clear()
+                        }
+                    })
                 }).catch(err => {
                     reject(err)
                     this.$message.error(err);
@@ -255,23 +272,19 @@ export default {
             } else {
                 this.checkList.push(item.labelCode)
             }
-            console.log('this.checkList------------>', this.checkList);
+            this.$nextTick(() => {
                 this.getData()
+            })
         },
         // 获取列表
-        getData(parentId = '') {
+        getData() {
-            this.allData = [];
+            let postData = Object.assign({}, {
-            let postData = {
-                parentId: parentId,
-                cameraName: this.cameraName,
                 checkStatus: 1,
-                pageNum: this.pageData.page,
-                pageSize: this.pageData.limit,
                 gpsX: '',
                 gpsY: '',
                 radius: '',
                 labelCodes: this.checkList.join(),
-            }
+            }, this.searchData);
             return new Promise((resolve, reject) => {
                 this.$http.get('/api/project/selectByParentIdNew', { params: postData }).then(res => {
                     resolve(res)
@@ -285,10 +298,9 @@ export default {
                     this.$message.error(err);
                 })
             })
-
         },
         changeParentId(parentId) {
-            console.log('parentId------------>', parentId);
+            this.searchData.parentId = parentId;
             this.getData(parentId)
         },
         confirmSubmitHandle() {
@@ -301,7 +313,7 @@ export default {
             this.dataList.map(v => {
                 if (idtCameraChannelArray.includes(v.idtCameraChannel)) {
                     this.displayList.push({
-                        name: v.channelName
+                        channelName: v.channelName
                     })
                 }
             })
@@ -312,16 +324,12 @@ export default {
         },
         close() {
             this.showModal = false;
-            this.cameraName = ''
+            this.searchData.cameraName = ''
             this.selectedArray = [];
-            this.allData = [];
-            this.transferData = [];
             this.$emit('closeModal');
         },
         clear() {
-            this.cameraName = ''
+            this.changeBtn('视频资源')
-            this.selectedArray = [];
-            this.getData()
         },
     }
 

back/src/views/modules/workBench/components/bottom-view.vue

@@ -167,7 +167,8 @@ export default {
 
 .dynamic-box {
   width: 770px;
-  height: 335px;
+  height: 285px;
+  position: relative;
 }
 
 .dynamicView {
@@ -223,6 +224,9 @@ export default {
   width: 100%;
   color: #2b2b2b;
   font-size: 14px;
+  position: absolute;
+  right: 15px;
+  bottom: 10px;
 }
 
 .recommendView {

front/public/index.html

@@ -1,8 +1,8 @@
 <!--
  * @Author: hisense.wuhongjian
  * @Date: 2022-03-29 16:45:25
- * @LastEditors: hisense.wuhongjian
+ * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-08-09 11:47:38
+ * @LastEditTime: 2022-08-09 09:24:43
  * @Description: 告诉大家这是什么
 -->
 <!DOCTYPE html>
@@ -48,18 +48,17 @@
     // window.SITE_CONFIG['websocketURL'] = '15.2.21.243:8888/renren-admin';
     // window.SITE_CONFIG['POI_URL'] = 'http://15.2.21.238:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
     // 西海岸版本
-    // window.SITE_CONFIG['backUrl'] = 'http://10.134.135.9:9797';
+    window.SITE_CONFIG['backUrl'] = 'http://10.134.135.9:9797';
-    // window.SITE_CONFIG['previewUrl'] = 'http://10.134.135.9:9796/';
+    window.SITE_CONFIG['previewUrl'] = 'http://10.134.135.9:9796/';
-    // window.SITE_CONFIG['frontUrl'] = 'http://10.134.135.9:9796/document/#/devModelFile/';
+    window.SITE_CONFIG['frontUrl'] = 'http://10.134.135.9:9796/document/#/devModelFile/';
-    // window.SITE_CONFIG['websocketURL'] = '10.134.135.9:8888/renren-admin';
+    window.SITE_CONFIG['apiURL'] = 'http://10.134.135.9:8888/renren-admin';
-    // window.SITE_CONFIG['apiURL'] = 'http://10.134.135.9:8888/renren-admin';
     // 开发
-    window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
+    // window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
-    window.SITE_CONFIG['backUrl'] = 'http://localhost:8001';
+    // window.SITE_CONFIG['backUrl'] = 'http://localhost:8001';
-    window.SITE_CONFIG['previewUrl'] = 'http://192.168.124.236:9796/';
+    // window.SITE_CONFIG['previewUrl'] = 'http://192.168.124.236:9796/';
-    window.SITE_CONFIG['frontUrl'] = 'http://192.168.124.236:9796/document/#/devModelFile/';
+    // window.SITE_CONFIG['frontUrl'] = 'http://192.168.124.236:9796/document/#/devModelFile/';
-    window.SITE_CONFIG['apiURL'] = 'http://192.168.124.236:8888/renren-admin';
+    // window.SITE_CONFIG['apiURL'] = 'http://192.168.124.236:8888/renren-admin';
-    window.SITE_CONFIG['websocketURL'] = '192.168.124.236:8888/renren-admin';
+    // window.SITE_CONFIG['websocketURL'] = '192.168.124.236:8888/renren-admin';
     // window.SITE_CONFIG['POI_URL'] = 'http://192.168.124.236:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
     // 穿透版本
     // window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797';

front/public/static/config/location.js

@@ -2,7 +2,7 @@
  * @Author: hisense.wuhongjian
  * @Date: 2020-07-07 16:03:23
  * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-08-09 11:46:27
+ * @LastEditTime: 2022-08-06 10:43:53
  * @Description: 数据资源参数配置
  */
 const newLocation = 'qingdao'

front/src/api/home.js

@@ -2,7 +2,7 @@
  * @Author: hisense.wuhongjian
  * @Date: 2022-04-01 19:19:40
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-07-18 16:24:44
+ * @LastEditTime: 2022-08-09 10:37:31
  * @Description: 告诉大家这是什么
  */
 import request from '@/utils/request'
@@ -370,3 +370,11 @@ export function getDevelopDocTree(params) {
     params,
   })
 }
+// 能力广场 应用资源
+export function selectAppList(params) {
+  return request({
+    url: '/resource/selectAppList',
+    method: 'get',
+    params,
+  })
+}

front/src/router/index.js

@@ -64,6 +64,15 @@ export const constantRoutes = [
       icon: 'error-warning-line',
     },
   },
+  {
+    path: '/capacitySquare',
+    name: 'capacitySquare',
+    component: () => import('@/views/capacitySquare'),
+    meta: {
+      title: '能力广场',
+      icon: 'error-warning-line',
+    },
+  },
   {
     path: '/mapTest',
     name: 'mapTest',

front/src/views/capacitySquare/components/algorithm.vue

@@ -0,0 +1,172 @@
+<!-- 智能算法 -->
+<template>
+  <div class="algorithm">
+    <div class="algorithm-class">
+      <div
+        v-for="(item, index) in dataList"
+        :key="`algorithm-${index}`"
+        class="algorithm-card"
+      >
+        <a-image
+          :src="algorithmCardPhoto(item.infoList)"
+          :width="525"
+          :height="275"
+          :fallback="imgSrc"
+          :preview="false"
+        ></a-image>
+
+        <a-tooltip>
+          <template #title>{{ item.name }}</template>
+          <div class="algorithm-card-title" @click="detailFunction(item.id)">
+            <span>{{ item.name }}</span>
+            <span>{{ item.deptName }}</span>
+          </div>
+        </a-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { pageWithAttrs } from '@/api/abilityStatistics'
+  import { ref, onMounted } from 'vue'
+  const dataList = ref([])
+  const params = {
+    deptIds: [],
+    districtId: '',
+    infoList: [{ attrType: '组件类型', attrValue: '智能算法' }],
+    orderField: 'visits',
+    orderType: 'DESC',
+    pageNum: 1,
+    pageSize: 9,
+    type: '组件服务',
+  }
+  const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo.jpg'))
+  const dataLength = ref(true)
+  const isNoMore = ref(false)
+  let url = ref('')
+  const pageWithAttrsFunction = () => {
+    pageWithAttrs(params).then((res) => {
+      dataList.value = res.data.data.records
+      if (res.data.data.records.length < 9) {
+        dataLength.value = false
+      }
+    })
+  }
+  pageWithAttrsFunction()
+  //图片显示
+  const algorithmCardPhoto = (List) => {
+    List.map((item) => {
+      if (item.attrType === '图层缩略图') {
+        url.value = item.attrValue
+      }
+    })
+    return url.value
+  }
+  //跳转详情页
+  const detailFunction = (id) => {
+    window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
+  }
+  onMounted(() => {
+    const algorithmclass = document.querySelector('.algorithm-class')
+    if (dataLength.value) {
+      //监听滚动事件
+      algorithmclass.addEventListener('scroll', (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) {
+          // 当前滚动条已经触底
+          isNoMore.value = true
+          params.pageNum++
+          pageWithAttrs(params).then((res) => {
+            dataList.value.push(...res.data.data.records)
+            if (res.data.data.records.length < 9) {
+              dataLength.value = false
+            }
+          })
+        } else {
+          isNoMore.value = false
+        }
+      })
+    }
+  })
+</script>
+
+<style lang="less" scoped>
+  .algorithm {
+    .algorithm-class {
+      margin-top: 0.6rem;
+      margin-bottom: 0.59rem;
+      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%;
+        margin-bottom: 0.3rem;
+        margin-right: 0.65rem;
+        position: relative;
+        :deep(.ant-image) {
+          img {
+            margin-top: 0.15rem;
+            height: 2.6rem;
+            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;
+          width: 100%;
+          color: #ffffff;
+          font-size: 0.22rem;
+          font-family: alibaba;
+          bottom: 0;
+          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>

front/src/views/capacitySquare/components/application.vue

@@ -0,0 +1,264 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-08-09 09:31:25
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-08-09 16:53:01
+ * @Description: 应用资源
+-->
+<template>
+  <div class="application">
+    <div class="select">
+      <div class="top" @click="selectFlag = true">
+        {{ typeName }}
+        <div class="light"></div>
+      </div>
+      <div class="bottom" v-show="selectFlag">
+        <span class="light"></span>
+        <div @click="getList('全市')">全市</div>
+        <div @click="getList('市级')">市级</div>
+        <div @click="getList('区级')">区级</div>
+        <div @click="getList('企业')">企业</div>
+      </div>
+    </div>
+    <div class="item-box">
+      <div class="item" v-for="item in data.list" :key="item.id">
+        <a-image
+          :width="527"
+          :height="270"
+          :preview="false"
+          :src="item.pic"
+          :fallback="item.pic2"
+        />
+        <div class="bottom" @click="goToView(item.id)">
+          <div class="name">{{ item.name }}</div>
+          <div class="dept">{{ item.deptName || '--' }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { onMounted, reactive, onBeforeUnmount, ref, nextTick } from 'vue'
+  import { selectAppList } from '@/api/home'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const pageNum = ref(1)
+  const flag = ref(true)
+  const type = ref(null)
+  const typeName = ref('全市')
+  const data = reactive({ list: [] })
+  const selectFlag = ref(false)
+  let dom = null
+  const goToView = (id) => {
+    router.push({
+      path: '/details',
+      query: {
+        id: id,
+      },
+    })
+  }
+  const getList = (str) => {
+    if (str) {
+      dom.scrollTop = 0
+      switch (str) {
+        case '全市':
+          type.value = null
+          typeName.value = '全 市'
+          break
+        case '市级':
+          type.value = 2
+          typeName.value = '市 级'
+          break
+        case '区级':
+          type.value = 3
+          typeName.value = '区 级'
+          break
+        case '企业':
+          type.value = 4
+          typeName.value = '企 业'
+          break
+      }
+      pageNum.value = 1
+      data.list = []
+    }
+    selectAppList({ pageNum: pageNum.value, type: type.value }).then((res) => {
+      if (res.data.data.length < 9) {
+        dom.removeEventListener('scroll', viewMonitor, true)
+      }
+      res.data.data.map((val) => {
+        if (!val.pic) {
+          val.pic = require('@/assets/capacitySquare/yyzy.jpg')
+        }
+        val.pic2 = require('@/assets/capacitySquare/yyzy.jpg')
+      })
+      data.list.push(...res.data.data)
+      selectFlag.value = false
+      nextTick(() => {
+        dom = document.querySelector('.item-box')
+        flag.value = true
+        if (str) {
+          dom.removeEventListener('scroll', viewMonitor, true)
+          dom.addEventListener('scroll', viewMonitor, true)
+        }
+      })
+    })
+  }
+  getList()
+  const viewMonitor = () => {
+    const clientHeight = dom.clientHeight
+    const scrollTop = dom.scrollTop
+    const scrollHeight = dom.scrollHeight
+    // console.log('滚动条滚动', clientHeight, scrollTop, scrollHeight, dom)
+    if (clientHeight + scrollTop === scrollHeight) {
+      console.log('竖向滚动条已经滚动到底部')
+      if (flag.value) {
+        flag.value = false
+        pageNum.value++
+        getList()
+      }
+    }
+  }
+  onMounted(() => {
+    dom = document.querySelector('.item-box')
+    console.log('box============', dom)
+    dom.addEventListener('scroll', viewMonitor, true)
+  })
+  onBeforeUnmount(() => {
+    dom.removeEventListener('scroll', viewMonitor, true)
+  })
+</script>
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'webfont';
+    src: url('~@/assets/capacitySquare/webfont.ttf');
+  }
+  .application {
+    padding: 0 0.15rem;
+    .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%;
+        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;
+          text-align: center;
+          border-top: 1px solid #aed5ff;
+        }
+        & > div:nth-of-type(1) {
+          border: none;
+        }
+      }
+    }
+    .item-box {
+      margin-bottom: 0.15rem;
+      height: 8.8rem;
+      padding: 0 0.9rem 0 1rem;
+      overflow-y: scroll;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      .item {
+        width: 5.25rem;
+        height: 2.75rem;
+        margin-bottom: 0.3rem;
+        position: relative;
+        background: url('~@/assets/capacitySquare/algorithm-bg.png') no-repeat;
+        background-size: 100%;
+        background-position: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        :deep(.ant-image-img) {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+        .bottom {
+          cursor: pointer;
+          width: 100%;
+          height: 0.6rem;
+          padding-left: 0.3rem;
+          background: url('~@/assets/capacitySquare/bt-bg.png') no-repeat;
+          background-size: 100%;
+          color: #fff;
+          font-family: webfont;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          .name {
+            height: 0.44rem;
+            line-height: 0.44rem;
+            font-size: 0.22rem;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            -o-text-overflow: ellipsis;
+            word-break: break-all;
+          }
+          .dept {
+            height: 0.12rem;
+            line-height: 0.04rem;
+            font-size: 0.12rem;
+            color: #bbb;
+          }
+        }
+      }
+    }
+  }
+  .item-box::-webkit-scrollbar-track-piece {
+    background: #a5bcdb;
+    border-radius: 0.08rem;
+  }
+  .item-box::-webkit-scrollbar-thumb {
+    height: 3.2rem;
+    background: linear-gradient(to bottom, #47d7f5, #3dc6e3);
+  }
+  .item-box::-webkit-scrollbar {
+    height: 8.8rem;
+    width: 0.08rem;
+    border-radius: 0.08rem;
+  }
+</style>

front/src/views/capacitySquare/components/layer.vue

@@ -0,0 +1,172 @@
+<!-- 图层服务 -->
+<template>
+  <div class="algorithm">
+    <div class="algorithm-class">
+      <div
+        v-for="(item, index) in dataList"
+        :key="`algorithm-${index}`"
+        class="algorithm-card"
+      >
+        <a-image
+          :src="algorithmCardPhoto(item.infoList)"
+          :width="525"
+          :height="275"
+          :fallback="imgSrc"
+          :preview="false"
+        ></a-image>
+
+        <a-tooltip>
+          <template #title>{{ item.name }}</template>
+          <div class="algorithm-card-title" @click="detailFunction(item.id)">
+            <span>{{ item.name }}</span>
+            <span>{{ item.deptName }}</span>
+          </div>
+        </a-tooltip>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { pageWithAttrs } from '@/api/abilityStatistics'
+  import { ref, onMounted } from 'vue'
+  const dataList = ref([])
+  const params = {
+    deptIds: [],
+    districtId: '',
+    infoList: [{ attrType: '组件类型', attrValue: '图层服务' }],
+    orderField: 'visits',
+    orderType: 'DESC',
+    pageNum: 1,
+    pageSize: 9,
+    type: '组件服务',
+  }
+  const imgSrc = ref(require('@/assets/capacitySquare/algorithm-photo2.jpg'))
+  const dataLength = ref(true)
+  const isNoMore = ref(false)
+  let url = ref('')
+  const pageWithAttrsFunction = () => {
+    pageWithAttrs(params).then((res) => {
+      dataList.value = res.data.data.records
+      if (res.data.data.records.length < 9) {
+        dataLength.value = false
+      }
+    })
+  }
+  pageWithAttrsFunction()
+  //图片显示
+  const algorithmCardPhoto = (List) => {
+    List.map((item) => {
+      if (item.attrType === '图层缩略图') {
+        url.value = item.attrValue
+      }
+    })
+    return url.value
+  }
+  //跳转详情页
+  const detailFunction = (id) => {
+    window.open(window.SITE_CONFIG.previewUrl + `#/details?id=${id}`)
+  }
+  onMounted(() => {
+    const algorithmclass = document.querySelector('.algorithm-class')
+    if (dataLength.value) {
+      //监听滚动事件
+      algorithmclass.addEventListener('scroll', (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) {
+          // 当前滚动条已经触底
+          isNoMore.value = true
+          params.pageNum++
+          pageWithAttrs(params).then((res) => {
+            dataList.value.push(...res.data.data.records)
+            if (res.data.data.records.length < 9) {
+              dataLength.value = false
+            }
+          })
+        } else {
+          isNoMore.value = false
+        }
+      })
+    }
+  })
+</script>
+
+<style lang="less" scoped>
+  .algorithm {
+    .algorithm-class {
+      margin-top: 0.6rem;
+      margin-bottom: 0.59rem;
+      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.23rem;
+        background: url('~@/assets/capacitySquare/algorithm-bg.png') no-repeat;
+        background-size: 100%;
+        margin-bottom: 0.3rem;
+        margin-right: 0.65rem;
+        position: relative;
+        :deep(.ant-image) {
+          img {
+            margin-top: 0.15rem;
+            height: 2.6rem;
+            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;
+          width: 100%;
+          color: #ffffff;
+          font-size: 0.22rem;
+          font-family: alibaba;
+          bottom: 0;
+          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>

front/src/views/capacitySquare/index.vue

@@ -0,0 +1,118 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-08-09 11:32:47
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-08-09 15:26:57
+ * @Description: 告诉大家这是什么
+-->
+<template>
+  <div class="capacitySquare">
+    <div class="header">
+      <div class="left">城市云脑通用能力服务平台(UCS)</div>
+      {{ squareType }}
+      <div class="right" @click="backClick">返回集市</div>
+    </div>
+    <div class="light"></div>
+    <div class="box">
+      <algorithm v-if="show === 'algorithm'"></algorithm>
+      <layer v-else-if="show === 'layer'"></layer>
+      <application v-else-if="show === 'application'"></application>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref } from 'vue'
+  import algorithm from './components/algorithm.vue'
+  import layer from './components/layer.vue'
+  import application from './components/application.vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+  const abilityToType = router.currentRoute.value.query.abilityToType
+  const show = ref('algorithm')
+  const squareType = ref('应用广场')
+  if (abilityToType === '应用资源') {
+    show.value = 'application'
+    squareType.value = '应用广场'
+  } else if (abilityToType === '图层服务') {
+    show.value = 'layer'
+    squareType.value = '图层广场'
+  } else if (abilityToType === '智能算法') {
+    show.value = 'algorithm'
+    squareType.value = '算法广场'
+  } else {
+    console.log('no')
+  }
+  // 返回集市
+  const backClick = () => {
+    const newpage = router.resolve({
+      path: '/DetailsPageconetent',
+      query: {
+        select: '组件服务',
+      },
+    })
+    window.location.href = newpage.href
+  }
+</script>
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'webfont';
+    src: url('~@/assets/capacitySquare/webfont.ttf');
+  }
+  .capacitySquare {
+    width: 100%;
+    height: 100%;
+    background: url('~@/assets/capacitySquare/bg.png') no-repeat;
+    background-size: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    .header {
+      width: 100%;
+      height: 0.8rem;
+      background: url('~@/assets/capacitySquare/header-bg.png') no-repeat;
+      background-size: 100%;
+      color: #fff;
+      text-align: center;
+      font-family: webfont;
+      font-size: 0.5rem;
+      font-weight: 600;
+      .left {
+        position: absolute;
+        top: 0.05rem;
+        left: 1.5rem;
+        font-size: 0.18rem;
+        font-weight: 500;
+      }
+      .right {
+        width: 1rem;
+        height: 0.3rem;
+        line-height: 0.3rem;
+        position: absolute;
+        top: 0.05rem;
+        right: 0.2rem;
+        font-size: 0.14rem;
+        font-weight: 500;
+        background: url('~@/assets/capacitySquare/backShop.png') no-repeat;
+        background-size: 100% 100%;
+        cursor: pointer;
+      }
+    }
+    .light {
+      position: absolute;
+      top: 0.25rem;
+      left: 6.25rem;
+      z-index: 10;
+      width: 6.64rem;
+      height: 1.64rem;
+      background: url('~@/assets/capacitySquare/header-light.png') no-repeat;
+      background-size: 100%;
+      background-position: center;
+    }
+    .box {
+      flex: 1;
+      // padding: 0.5rem 0;
+      font-family: alibaba;
+      src: url('~@/assets/capacitySquare/webfont.ttf');
+    }
+  }
+</style>

front/src/views/newHome/components/WorkDynamics.vue

@@ -113,6 +113,37 @@
           </div>
         </a-modal>
       </div>
+      <div @click="showAbilitySquare">
+        <p></p>
+        <p>能力广场</p>
+        <a-modal
+          v-model:visible="visibleAbilitySquare"
+          @ok="handleOkAbilitySquare"
+          class="shangjia-class"
+          @cancel="handlecancelAbilitySquare"
+        >
+          <div class="ant-modal-title" id="vcDialogTitle1">
+            <div class="showBg"></div>
+            能力广场目录
+          </div>
+          <div class="ability-to-type">
+            <div class="ability-to-type-content">
+              <div
+                v-for="item in abilitySquare"
+                :key="item"
+                @click="abilitySquareFunction(item)"
+                :class="
+                  abilitySquareFunctionData == item
+                    ? 'ability-to-type-down'
+                    : ''
+                "
+              >
+                {{ item }}
+              </div>
+            </div>
+          </div>
+        </a-modal>
+      </div>
     </div>
   </div>
 </template>
@@ -142,6 +173,7 @@
     abilityToTypeFunctionData.value = item
   }
   let abilityToType = ref(['组件服务', '应用资源'])
+  let abilitySquare = ref(['智能算法', '图层服务', '应用资源'])
   let componentType = ref([
     '智能算法',
     '图层服务',
@@ -154,6 +186,11 @@
   const showModal = () => {
     visible.value = true
   }
+  // 能力广场
+  const visibleAbilitySquare = ref(false)
+  const showAbilitySquare = () => {
+    visibleAbilitySquare.value = true
+  }
   let componentTypeValueOld = ref('')
   function componentTypeValueFunction(item) {
     if (componentTypeValueOld.value != item) {
@@ -252,6 +289,28 @@
   watch(abilityToTypeFunctionData, () => {
     componentTypeValue.value = ''
   })
+  // 能力广场
+  const handleOkAbilitySquare = (e) => {
+    let snumSquare = ref({})
+    snumSquare.value = {
+      abilityToType: abilitySquareFunctionData.value,
+    }
+    const applypage = router.resolve({
+      path: '/capacitySquare', // 跳转的页面路由
+      query: snumSquare.value,
+    })
+    window.open(applypage.href, '_blank')
+    console.log(e, abilitySquareFunctionData.value, 'hahhaha')
+    visibleAbilitySquare.value = false
+    abilitySquareFunctionData.value = '智能算法'
+  }
+  let abilitySquareFunctionData = ref('智能算法')
+  function abilitySquareFunction(item) {
+    abilitySquareFunctionData.value = item
+  }
+  function handlecancelAbilitySquare() {
+    abilitySquareFunctionData.value = '智能算法'
+  }
 </script>
 <style lang="less">
   .shangjia-class {
@@ -520,7 +579,7 @@
   }
 
   .fixedmount {
-    height: 1.5rem;
+    height: 2.3rem;
     display: flex;
     position: fixed;
     bottom: 2.56rem;
@@ -571,4 +630,11 @@
     background-size: contain;
     background-position: center;
   }
+  .fixedmount div:nth-child(3) p:nth-child(1) {
+    height: 0.24rem;
+    width: 0.24rem;
+    background: url('~@/assets/home/abilitysquare.png') no-repeat;
+    background-size: 140% 126%;
+    background-position: center;
+  }
 </style>