Merge branch 'hi-ucs-dev' of http://192.168.124.50:3000/wuhongjian/hi-ucs into hi-ucs-dev
This commit is contained in:
commit
e026c97a73
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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="名称"
|
||||
clearable>
|
||||
<el-input style="margin-left:10px;width: 200px;" v-model="searchData.cameraName"
|
||||
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"
|
||||
:page-sizes="[10, 20, 50, 100]" :page-size="pageData.limit" :total="pageData.total"
|
||||
<el-pagination style="justify-content: center;display: flex;" :current-page="searchData.pageNum"
|
||||
: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 = {
|
||||
type: val.type,
|
||||
idtCameraChannel: val.resourceId,
|
||||
name: item.channelName
|
||||
};
|
||||
let _obj = Object.assign({}, val, val.resource)
|
||||
arr.push(_obj);
|
||||
});
|
||||
}
|
||||
|
|
@ -201,28 +210,31 @@ export default {
|
|||
this.displayList = JSON.parse(JSON.stringify(arr));
|
||||
// 已选中
|
||||
this.selectedArray = arr.map(v => v.idtCameraChannel);
|
||||
},
|
||||
handleShowModal() {
|
||||
this.showModal = true;
|
||||
this.dataList = JSON.parse(JSON.stringify(arr));
|
||||
this.pageData.total = arr.length;
|
||||
// 默认选中复选框
|
||||
this.$nextTick(() => {
|
||||
this.selectCheckbox()
|
||||
})
|
||||
},
|
||||
// 点击复选框
|
||||
dataListSelectionChangeHandle(data) {
|
||||
this.selectedArray = data;
|
||||
},
|
||||
pageCurrentChangeHandle(page) {
|
||||
this.pageData.page = page;
|
||||
pageCurrentChangeHandle(pageNum) {
|
||||
this.searchData.pageNum = pageNum;
|
||||
this.getData()
|
||||
},
|
||||
pageSizeChangeHandle(limit) {
|
||||
this.pageData.limit = limit;
|
||||
pageSizeChangeHandle(pageSize) {
|
||||
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.getData()
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
// 获取列表
|
||||
getData(parentId = '') {
|
||||
this.allData = [];
|
||||
let postData = {
|
||||
parentId: parentId,
|
||||
cameraName: this.cameraName,
|
||||
getData() {
|
||||
let postData = Object.assign({}, {
|
||||
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.selectedArray = [];
|
||||
this.getData()
|
||||
this.changeBtn('视频资源')
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<!--
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-03-29 16:45:25
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-08-09 11:47:38
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @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['previewUrl'] = 'http://10.134.135.9:9796/';
|
||||
// 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['backUrl'] = 'http://10.134.135.9:9797';
|
||||
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['apiURL'] = 'http://10.134.135.9:8888/renren-admin';
|
||||
// 开发
|
||||
window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
|
||||
window.SITE_CONFIG['backUrl'] = 'http://localhost:8001';
|
||||
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['apiURL'] = 'http://192.168.124.236:8888/renren-admin';
|
||||
window.SITE_CONFIG['websocketURL'] = '192.168.124.236:8888/renren-admin';
|
||||
// window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
|
||||
// window.SITE_CONFIG['backUrl'] = 'http://localhost:8001';
|
||||
// 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['apiURL'] = 'http://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';
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 394 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 346 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 641 B |
Binary file not shown.
|
After Width: | Height: | Size: 379 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 641 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 263 B |
Binary file not shown.
|
After Width: | Height: | Size: 536 B |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 471 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 898 B |
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue