wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

合并冲突

This commit is contained in:
guoyue 2022-07-11 10:29:34 +08:00
parent 324aa70b51 23324f50ad
commit c4a99bf8de
106 changed files with 9342 additions and 5483 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
back/public/index.html
View File

@ -1,8 +1,8 @@
<!-- <!--
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2022-04-11 10:11:40 * @Date: 2022-04-11 10:11:40
* @LastEditors: hisense.wuhongjian * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-29 19:38:17 * @LastEditTime: 2022-07-08 14:13:20
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
--> -->
<!DOCTYPE html> <!DOCTYPE html>
@ -43,8 +43,8 @@
<script> <script>
// window.SITE_CONFIG['apiURL'] = 'http://15.2.21.166:8888/renren-admin'; // window.SITE_CONFIG['apiURL'] = 'http://15.2.21.166:8888/renren-admin';
// window.SITE_CONFIG['apiURL'] = 'http://124.222.94.39:8888/renren-admin'; // window.SITE_CONFIG['apiURL'] = 'http://124.222.94.39:8888/renren-admin';
window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin'; window.SITE_CONFIG['apiURL'] = 'http://10.16.5.35:8888/renren-admin';
window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796/'; // window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
// window.SITE_CONFIG['apiURL'] = 'http://15.2.23.141:8000/renren-admin'; // window.SITE_CONFIG['apiURL'] = 'http://15.2.23.141:8000/renren-admin';
// WebSocket地址 // WebSocket地址
window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket'; window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket';

BIN
back/src/assets/img/putOnTheShelf/del.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

342
back/src/views/modules/ability/bsabilityai.vue
View File

@ -27,6 +27,13 @@
>挂接</el-button >挂接</el-button
> >
</el-form-item> </el-form-item>
<el-form-item>
<el-button
type="primary"
@click="showPutOnTheShelf()"
>上架</el-button
>
</el-form-item>
<el-form-item> <el-form-item>
<el-button <el-button
v-if="$hasPermission('ability:bsabilityai:delete')" v-if="$hasPermission('ability:bsabilityai:delete')"
@ -55,12 +62,16 @@
width="50" width="50"
></el-table-column> ></el-table-column>
<af-table-column <af-table-column
:show-overflow-tooltip="true"
width="280"
prop="name" prop="name"
label="组件名称" label="组件名称"
header-align="center" header-align="center"
align="center" align="center"
></af-table-column> ></af-table-column>
<af-table-column <af-table-column
:show-overflow-tooltip="true"
width="300"
v-for="(item, index) in dataList[0].infoList" v-for="(item, index) in dataList[0].infoList"
:key="index" :key="index"
:label="item.attrType" :label="item.attrType"
@ -122,36 +133,84 @@
></add-or-update> ></add-or-update>
<relate-application v-if="relateApplicationVisible" ref="relateApplication" :nameArray="['未关联应用名称', '已关联应用名称']" :relateInfo="relateInfo" @isShowRelatePopup="handleIsShowRelatePopup"></relate-application> <relate-application v-if="relateApplicationVisible" ref="relateApplication" :nameArray="['未关联应用名称', '已关联应用名称']" :relateInfo="relateInfo" @isShowRelatePopup="handleIsShowRelatePopup"></relate-application>
</div> </div>
<el-dialog
title="选择组件类型"
:visible.sync="showPutOnTheShelfFlag"
:close-on-click-modal='false'
:close-on-press-escape='false'
:before-close='clear'
width="30%">
<el-radio v-model="radio" label="智能算法">智能算法</el-radio>
<el-radio v-model="radio" label="图层服务">图层服务</el-radio>
<el-radio v-model="radio" label="开发组件">开发组件</el-radio>
<el-radio v-model="radio" label="业务组件">业务组件</el-radio>
<span slot="footer" class="dialog-footer">
<el-button @click="clear">取 消</el-button>
<el-button type="primary" @click="showPutOnTheShelfVue">确 定</el-button>
</span>
</el-dialog>
<el-dialog
:title="'上架'+radio"
:visible.sync="showPutOnTheShelfFlag2"
:close-on-click-modal='false'
:close-on-press-escape='false'
:destroy-on-close='true'
:before-close='clear'
width="50%">
<putOnTheShelf :putOnTheShelfList='putOnTheShelfList' @changeInfoList='changeInfoList' :type='radio'></putOnTheShelf>
<span slot="footer" class="dialog-footer">
<el-button @click="clear">取 消</el-button>
<el-button type="primary" @click="submitData">确 定</el-button>
</span>
</el-dialog>
</el-card> </el-card>
</template> </template>
<script> <script>
import mixinViewModule from "@/mixins/view-module"; import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from "./bsabilityai-add-or-update"; import AddOrUpdate from './bsabilityai-add-or-update'
import dictionaries from "@/utils/dictionaries"; import dictionaries from '@/utils/dictionaries'
import qs from "qs"; import qs from 'qs'
import RelateApplication from "./bsabilityai-relate-application.vue" import RelateApplication from './bsabilityai-relate-application.vue'
import putOnTheShelf from '@/views/modules/putOnTheShelf'
export default { export default {
mixins: [mixinViewModule], mixins: [mixinViewModule],
data() { data () {
return { return {
insertList: [],
putOnTheShelfList: [],
radio: '',
showPutOnTheShelfFlag: false,
showPutOnTheShelfFlag2: false,
submitFrom: {
type: '组件服务',
deptId: '',
delFlag: 0,
infoList: [
{
attrType: '组件类型',
attrValue: '',
delFlag: 0
}
]
},
mixinViewModuleOptions: { mixinViewModuleOptions: {
getDataListURL: "/resource/page", getDataListURL: '/resource/page',
getDataListIsPage: true, getDataListIsPage: true,
exportURL: "/ability/bsabilityai/export", exportURL: '/ability/bsabilityai/export',
deleteURL: "/resource/delete", deleteURL: '/resource/delete',
deleteIsBatch: true, deleteIsBatch: true
}, },
disabled: false, disabled: false,
sceneArr: dictionaries.sceneArr, sceneArr: dictionaries.sceneArr,
fieldArr: dictionaries.fieldArr, fieldArr: dictionaries.fieldArr,
shareFormArr: dictionaries.shareFormArr, shareFormArr: dictionaries.shareFormArr,
dataForm: { dataForm: {
name: "", name: '',
creator: "", creator: '',
delFlag: 0, delFlag: 0,
selectType: 0, selectType: 0,
type: "组件服务", type: '组件服务'
}, },
qp: false, qp: false,
// 关联应用弹窗 // 关联应用弹窗
@ -161,190 +220,293 @@ export default {
responseData: {}, responseData: {},
linkType: '' linkType: ''
} }
}; }
}, },
watch: {}, watch: {},
components: { components: {
AddOrUpdate, AddOrUpdate,
RelateApplication RelateApplication,
putOnTheShelf
}, },
created() { created () {
this.dataForm.name = ""; this.dataForm.name = ''
this.dataForm.type = "组件服务"; this.dataForm.type = '组件服务'
}, },
mounted() { mounted () {
window.addEventListener("resize", this.a); window.addEventListener('resize', this.a)
this.fullScreen(); this.fullScreen()
}, },
methods: { methods: {
reset() { reset () {
this.$http this.$http
.get( .get(
this.mixinViewModuleOptions.getDataListURL + this.mixinViewModuleOptions.getDataListURL +
"?" + '?' +
qs.stringify({ qs.stringify({
// order: this.order, // order: this.order,
// orderField: this.orderField, // orderField: this.orderField,
// type: '组件服务', // type: '组件服务',
page: 1, page: 1,
limit: 10, limit: 10,
creator: "", creator: '',
selectType: 0, selectType: 0,
delFlag: 0, delFlag: 0,
type: "组件服务", type: '组件服务',
name: "", name: ''
}) })
) )
.then(({ data: res }) => { .then(({ data: res }) => {
this.dataForm.name = ""; this.dataForm.name = ''
if (res.code !== 0) { if (res.code !== 0) {
this.dataList = []; this.dataList = []
this.total = 0; this.total = 0
return this.$message.error(res.msg); return this.$message.error(res.msg)
} }
this.dataList = this.mixinViewModuleOptions.getDataListIsPage this.dataList = this.mixinViewModuleOptions.getDataListIsPage
? res.data.list ? res.data.list
: res.data; : res.data
this.total = this.mixinViewModuleOptions.getDataListIsPage this.total = this.mixinViewModuleOptions.getDataListIsPage
? res.data.total ? res.data.total
: 0; : 0
if (this.mixinViewModuleOptions.requestCallback) { if (this.mixinViewModuleOptions.requestCallback) {
this.mixinViewModuleOptions.requestCallback(res.data); this.mixinViewModuleOptions.requestCallback(res.data)
} }
this.dataListLoading = false; this.dataListLoading = false
}) })
.catch(() => { .catch(() => {
this.dataListLoading = false; this.dataListLoading = false
}); })
}, },
findValue(list, type) { findValue (list, type) {
const found = list.find((item) => item.attrType === type); const found = list.find((item) => item.attrType === type)
if (found) { if (found) {
return found.attrValue; return found.attrValue
} else { } else {
return "暂无数据"; return '暂无数据'
} }
}, },
showDetail(val) { showDetail (val) {
// this.addOrUpdateHandle(id) // this.addOrUpdateHandle(id)
this.addOrUpdateVisible = true; this.addOrUpdateVisible = true
this.disabled = false; this.disabled = false
console.log("显示数据=============》", val); console.log('显示数据=============》', val)
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.addOrUpdate.UpdateState = false; this.$refs.addOrUpdate.UpdateState = false
this.$refs.addOrUpdate.dataFormShowDetails = val; this.$refs.addOrUpdate.dataFormShowDetails = val
this.$refs.addOrUpdate.init(); this.$refs.addOrUpdate.init()
}); })
this.disabled = true; this.disabled = true
}, },
showDocument(val) { showDocument (val) {
console.log(val); console.log(val)
window.open( window.open(
window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type, window.SITE_CONFIG.frontUrl + '?id=' + val.id + '&&type=' + val.type,
"_blank" '_blank'
); )
}, },
getDataList2(names) { getDataList2 (names) {
if (names != null) { if (names != null) {
this.$http this.$http
.get( .get(
this.mixinViewModuleOptions.getDataListURL + this.mixinViewModuleOptions.getDataListURL +
"?" + '?' +
qs.stringify({ qs.stringify({
// order: this.order, // order: this.order,
// orderField: this.orderField, // orderField: this.orderField,
// type: '组件服务', // type: '组件服务',
pageNum: 1, pageNum: 1,
pageSize: this.limit, pageSize: this.limit,
type: "组件服务", type: '组件服务',
creator: "", creator: '',
selectType: 0, selectType: 0,
delFlag: 0, delFlag: 0,
name: names, name: names
}) })
) )
.then(({ data: res }) => { .then(({ data: res }) => {
console.log("res", res); console.log('res', res)
if (res.code !== 0) { if (res.code !== 0) {
this.dataList = []; this.dataList = []
this.total = 0; this.total = 0
return this.$message.error(res.msg); return this.$message.error(res.msg)
} }
if (res.data.list.length !== 0) { if (res.data.list.length !== 0) {
this.dataList = res.data.list; this.dataList = res.data.list
this.total = this.mixinViewModuleOptions.getDataListIsPage this.total = this.mixinViewModuleOptions.getDataListIsPage
? res.data.total ? res.data.total
: 0; : 0
if (this.mixinViewModuleOptions.requestCallback) { if (this.mixinViewModuleOptions.requestCallback) {
this.mixinViewModuleOptions.requestCallback(res.data); this.mixinViewModuleOptions.requestCallback(res.data)
} }
this.dataListLoading = false; this.dataListLoading = false
} else { } else {
this.$message.error("未查询到相关信息"); this.$message.error('未查询到相关信息')
this.reset(); this.reset()
} }
}) })
.catch(() => { .catch(() => {
this.dataListLoading = false; this.dataListLoading = false
}); })
} else { } else {
this.$message.error("查询信息不能为空"); this.$message.error('查询信息不能为空')
} }
}, },
fullScreen() { fullScreen () {
if (window.outerHeight === screen.availHeight) { if (window.outerHeight === screen.availHeight) {
if (window.outerWidth === screen.availWidth) { if (window.outerWidth === screen.availWidth) {
console.log( console.log(
"全屏1", '全屏1',
window.outerHeight, window.outerHeight,
screen.availHeight, screen.availHeight,
window.outerWidth, window.outerWidth,
screen.availWidth screen.availWidth
); )
this.qp = false; this.qp = false
} else { } else {
console.log( console.log(
"不是全屏2", '不是全屏2',
window.outerHeight, window.outerHeight,
screen.availHeight, screen.availHeight,
window.outerWidth, window.outerWidth,
screen.availWidth screen.availWidth
); )
this.qp = true; this.qp = true
} }
} else { } else {
console.log( console.log(
"不是全屏3", '不是全屏3',
window.outerHeight, window.outerHeight,
screen.availHeight, screen.availHeight,
window.outerWidth, window.outerWidth,
screen.availWidth screen.availWidth
); )
this.qp = true; this.qp = true
} }
}, },
// 点击关联应用按钮 // 点击关联应用按钮
showRelateApplication(row){ showRelateApplication (row) {
this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => { this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
if( res && res.data ) { if (res && res.data) {
this.relateApplicationVisible = true; this.relateApplicationVisible = true
this.relateInfo = { this.relateInfo = {
id: row.id, id: row.id,
responseData: res.data, responseData: res.data,
linkType: '2' linkType: '2'
}; }
} }
}).catch(() => { }) }).catch(() => { })
}, },
// 是否展示关联应用弹窗 // 是否展示关联应用弹窗
handleIsShowRelatePopup(type) { handleIsShowRelatePopup (type) {
this.relateApplicationVisible = type; this.relateApplicationVisible = type
},
// 新挂载
clear () {
this.showPutOnTheShelfFlag = false
this.showPutOnTheShelfFlag2 = false
this.radio = ''
this.submitFrom = {
type: '组件服务',
deptId: '',
delFlag: 0,
infoList: [
{
attrType: '组件类型',
attrValue: '',
delFlag: 0
}
]
}
},
showPutOnTheShelf () {
this.showPutOnTheShelfFlag = true
this.$http.get('/category/getCategoryTree').then(res => {
this.insertList = res.data.data.filter(item => item.name === '组件服务一')[0]
})
},
showPutOnTheShelfVue () {
this.showPutOnTheShelfFlag = false
this.showPutOnTheShelfFlag2 = true
this.submitFrom.infoList[0].attrValue = this.radio
this.putOnTheShelfList = this.insertList.children.filter(item => item.name === this.radio)[0].children
console.log('radio', this.radio)
},
changeInfoList (obj) {
this.submitFrom.infoList = this.submitFrom.infoList.filter((item) => item.attrType !== obj.attrType)
this.submitFrom.infoList.push(obj)
},
submitData () {
const arr = []
this.putOnTheShelfList.map(item => {
item.children.map(child => {
if (child.children) {
if (child.name === '算法优势' || child.name === '应用场景' || child.name === '功能介绍') {
arr.push(child.name)
}
child.children.map(val => {
arr.push(val.name)
if (val.type === 'input' || val.type === 'textArea' || val.type === 'select' || val.type === 'checkBox' || val.type === 'radio') {
this.submitFrom.infoList = this.submitFrom.infoList.filter((item) => item.attrType !== val.name)
}
if (val.note1) {
switch (val.name) {
case '算法名称':
case '应用名称':
case '组件名称':
case '图层名称':
this.submitFrom.name = val.note1
break
case '算法描述':
case '应用描述':
case '组件描述':
case '图层描述':
this.submitFrom.description = val.note1
break
case '共享条件':
this.submitFrom.shareCondition = val.note1
break
case '共享类型':
this.submitFrom.shareType = val.note1
break
case '服务接口':
this.submitFrom.apiUrl = val.note1
break
case '接口请求方式':
this.submitFrom.apiMethodType = val.note1
break
case '访问地址':
this.submitFrom.link = val.note1
break
case '部门联系人':
this.submitFrom.deptContacts = val.note1
break
case '部门联系人电话':
this.submitFrom.deptPhone = val.note1
break
default:
this.submitFrom.infoList.push({
attrType: val.name,
attrValue: val.note1,
delFlag: 0
})
break
}
}
})
}
})
})
this.submitFrom.infoList = this.submitFrom.infoList.sort((a, b) => arr.indexOf(a.attrType) - arr.indexOf(b.attrType))
console.log('表单数据=================>', this.submitFrom, this.putOnTheShelfList, arr)
} }
}, }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-tooltip__popper { .el-tooltip__popper {
max-width: 50%; max-width: 50%;
} }
::v-deep .el-table .cell {
width: 200px;
}
</style> </style>

6
back/src/views/modules/ability/bsdataresources.vue
View File

@ -84,7 +84,11 @@ export default {
methods: { methods: {
// 重置 // 重置
resetDataList () { resetDataList () {
this.dataForm = this.noDataForm this.dataForm = {
orderId: '',
status: '',
userId: ''
},
this.page = 1 // 当前页码 this.page = 1 // 当前页码
this.query() this.query()
}, },

27
back/src/views/modules/abilityStatistics/applicationResources.vue
View File

@ -48,7 +48,7 @@
</div> </div>
<div class='container-body8'> <div class='container-body8'>
<span style='font-size:18px;color;#000000;'>应用领域分布情况</span> <span style='font-size:18px;color;#000000;'>应用领域分布情况</span>
<div id="main8" style="width: 300px;height:200px;"></div> <div id="main8" style="width: 300px;height:200px;margin-left:-20px;"></div>
</div> </div>
<div class='container-body9'> <div class='container-body9'>
<span style='font-size:18px;color;#000000;'>应用状态分布情况</span> <span style='font-size:18px;color;#000000;'>应用状态分布情况</span>
@ -114,8 +114,9 @@ export default {
getDistributedList () { getDistributedList () {
this.$http.get('/census/center/v3/assemblerUseProjectInfo/' ,{ this.$http.get('/census/center/v3/assemblerUseProjectInfo/' ,{
params : { params : {
keyId:'1522550195034857476' id:
// this.tableId // '1522550195034857476'
this.tableId
} }
}).then(res => { }).then(res => {
let arry=[] let arry=[]
@ -147,8 +148,8 @@ export default {
arry=res.data.data arry=res.data.data
arry.forEach((item)=>{ arry.forEach((item)=>{
const single={ const single={
value:item.useNum, value:item.appNum,
name:item.name name:item.attr_value
} }
this.data3.push(single.name) this.data3.push(single.name)
this.data4.push(single.value) this.data4.push(single.value)
@ -377,7 +378,7 @@ export default {
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += Number(data[i].value);
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }
@ -599,7 +600,7 @@ export default {
}, },
series: [ series: [
{ {
data: [5, 5, 5, 5, 5, 5], data: [1, 1, 1, 1, 1, 1],
type: 'bar', type: 'bar',
barWidth: 14, barWidth: 14,
stack: '1', stack: '1',
@ -654,7 +655,7 @@ export default {
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += Number(data[i].value);
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }
@ -725,7 +726,7 @@ export default {
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += Number(data[i].value);
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }
@ -804,7 +805,7 @@ export default {
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += Number(data[i].value);
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }
@ -822,9 +823,9 @@ export default {
a: { a: {
// 设置文字、数学、英语这一列的样式 // 设置文字、数学、英语这一列的样式
width: 80, width: 80,
color: "#000000", color: "#666666",
fontSize: 12, fontSize: 12,
fontWeight: "bolder", // fontWeight: "bolder",
}, },
b: { b: {
// 设置10分、20分、30分这一列的样式 // 设置10分、20分、30分这一列的样式
@ -899,7 +900,7 @@ export default {
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += Number(data[i].value);
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }

12
back/src/views/modules/abilityStatistics/componentServices.vue
View File

@ -200,7 +200,7 @@ export default {
this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{ this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{
params : { params : {
id:this.tableId, id:this.tableId,
resourceType:"应用资源" resourceType:"组件服务"
// pageNo: pageNo || 1, // pageNo: pageNo || 1,
// pageSize: 20 // pageSize: 20
} }
@ -231,7 +231,7 @@ export default {
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += Number(data[i].value);
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }
@ -295,7 +295,7 @@ export default {
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += Number(data[i].value);
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }
@ -361,7 +361,7 @@ export default {
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += Number(data[i].value);
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }
@ -377,9 +377,9 @@ export default {
a: { a: {
// 设置文字、数学、英语这一列的样式 // 设置文字、数学、英语这一列的样式
width: 100, width: 100,
color: "#000000", color: "#666666",
fontSize: 12, fontSize: 12,
fontWeight: "bolder", // fontWeight: "bolder",
}, },
b: { b: {
// 设置10分、20分、30分这一列的样式 // 设置10分、20分、30分这一列的样式

49
back/src/views/modules/abilityStatistics/componentUsed.vue
View File

@ -17,11 +17,11 @@
</div> </div>
<div class='container-body3'> <div class='container-body3'>
<span style='font-size:18px;color;#000000;'>使用组件应用领域分布情况</span> <span style='font-size:18px;color;#000000;'>使用组件应用领域分布情况</span>
<div id="main8" style="width: 400px;height:200px;"></div> <div id="main3" style="width: 400px;height:200px;"></div>
</div> </div>
<div class='container-body4'> <div class='container-body4'>
<div style='margin-bottom:30px'> <div style='margin-bottom:30px'>
<span style='font-size:18px;color;#000000;'>被调用组件及数量</span> <span style='font-size:18px;color;#000000;'>Top5使用组件</span>
<img src="@/assets/img/TOP5.png" style='margin-left:10px'> <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
</div> </div>
<div v-for="(item,index) in usedList" :key='index' > <div v-for="(item,index) in usedList" :key='index' >
@ -30,13 +30,13 @@
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span> <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
</div> </div>
<span class='num-style'>{{item.name}}</span> <span class='num-style'>{{item.name}}</span>
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span> <span class='count-style' :style="{color:numColorList[index%5]}">{{item.useNum}}</span>
</div> </div>
</div> </div>
</div> </div>
<div class='container-body5'> <div class='container-body5'>
<div style='margin-bottom:30px'> <div style='margin-bottom:30px'>
<span style='font-size:18px;color;#000000;'>被申请组件及数量</span> <span style='font-size:18px;color;#000000;'>使用组件评分</span>
<img src="@/assets/img/TOP5.png" style='margin-left:10px'> <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
</div> </div>
<div v-for="(item,index) in applicationList" :key='index' > <div v-for="(item,index) in applicationList" :key='index' >
@ -45,7 +45,7 @@
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span> <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
</div> </div>
<span class='num-style'>{{item.name}}</span> <span class='num-style'>{{item.name}}</span>
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span> <span class='count-style' :style="{color:numColorList[index%5]}">{{item.score}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -86,8 +86,8 @@ export default {
colorList:['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',], colorList:['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
widthList:['90px','80px','70px','60px','50px'], widthList:['90px','80px','70px','60px','50px'],
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'], numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
usedList:[{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称四',resourceCarNum:111},{name:'组件名称五',resourceCarNum:111},], usedList:[{name:'组件名称一',useNum:111},{name:'组件名称一',useNum:111},{name:'组件名称一',useNum:111},{name:'组件名称四',useNum:111},{name:'组件名称五',useNum:111},],
applicationList:[{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称四',resourceCarNum:111},{name:'组件名称五',resourceCarNum:111},] applicationList:[{name:'组件名称一',score:111},{name:'组件名称一',score:111},{name:'组件名称一',score:111},{name:'组件名称四',score:111},{name:'组件名称五',score:111},]
} }
}, },
created(){ created(){
@ -161,10 +161,10 @@ export default {
}, },
// 应用领域分布 // 应用领域分布
getDistributed () { getDistributed () {
this.$http.get('/census/center/v3/applicationAreaCapabilityList' ,{ this.$http.get('/census/center/v3/applicationUsedAreaCapabilityList' ,{
params : { params : {
id:this.tableId, id:this.tableId,
resourceType:"应用资源" resourceType:"组件服务"
} }
}).then(res => { }).then(res => {
let arry=[] let arry=[]
@ -174,30 +174,28 @@ export default {
value:item.total, value:item.total,
name:item.type name:item.type
} }
const newList=[]
this.data3.push(single) this.data3.push(single)
// this.data2=newList
this.myEcharts3() this.myEcharts3()
}) })
}) })
}, },
// 被调用组件及数量 // top5使用组件
getBeCalled () { getBeCalled () {
this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{ this.$http.get('/census/center/v3/assemblerUseTopInfo' ,{
params : { params : {
id:this.tableId, id:this.tableId,
resourceType:"应用资源" resourceType:"组件服务"
// pageNo: pageNo || 1, // pageNo: pageNo || 1,
// pageSize: 20 // pageSize: 20
} }
}).then(res => { }).then(res => {
this.applicationList =res.data.data this.usedList =res.data.data
}) })
}, },
// 被申请组件及数量 // 使用组件评分5
getBeApplied () { getBeApplied () {
this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{ this.$http.get('/census/center/v3/assemblerUseScoreTopInfo' ,{
params : { params : {
id:this.tableId, id:this.tableId,
resourceType:"应用资源" resourceType:"应用资源"
@ -231,7 +229,7 @@ export default {
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += Number(data[i].value);
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }
@ -295,7 +293,7 @@ export default {
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += Number(data[i].value);
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }
@ -361,13 +359,14 @@ export default {
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += Number(data[i].value);
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }
} }
var v = tarValue; // var v = tarValue;
var p = Math.round(((tarValue / total) * 100)); var p = Math.round(((tarValue / total) * 100));
console.log('@@@@', tarValue, total)
return `{a|${name}} {b|${p}%}`; return `{a|${name}} {b|${p}%}`;
}, },
itemStyle:{}, itemStyle:{},
@ -428,7 +427,7 @@ export default {
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
backBtn(){ backBtn(){
this.$emit('closeChild') this.$emit('closeChild2')
} }
} }
} }
@ -541,9 +540,13 @@ export default {
position:absolute; position:absolute;
display: flex; display: flex;
margin-left:90px; margin-left:90px;
width:200px;
margin-top:5px; margin-top:5px;
color:#333333; color:#333333;
font-size: 16px; font-size: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.count-style{ .count-style{
position:absolute; position:absolute;

50
back/src/views/modules/abilityStatistics/index.vue
View File

@ -50,46 +50,56 @@
label="部门名称" label="部门名称"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column v-if='this.departmentId===1'
prop="resourceNum" prop="resourceNum"
label="发布总数" label="发布总数"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column v-if="this.choseId===0" <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
prop="resourceCarNum" prop="resourceCarNum"
label="被申请总数" label="被申请总数"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column v-if="this.departmentId===1"
prop="resourceBrowseNum" prop="resourceBrowseNum"
label="浏览总量" label="浏览总量"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column v-if="this.departmentId===1"
prop="resourceCollectionNum" prop="resourceCollectionNum"
label="收藏量" label="收藏量"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column v-if="this.choseId===0" <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
prop="resourceVisits" prop="resourceVisits"
label="被调用总数" label="被调用总数"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column v-if="this.choseId===0" <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
prop="resourceRelNum" prop="resourceRelNum"
label="被应用总数" label="被应用总数"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column v-if="this.choseId===0" <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
prop="resourceShareNum" prop="resourceShareNum"
label="需申请数量" label="需申请数量"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column v-if="this.choseId===0" <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
prop="resourceShareNonNum" prop="resourceShareNonNum"
label="免批数量" label="免批数量"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column v-if="this.departmentId===2"
prop="resourceUseNum"
label="使用总数"
min-width="100%">
</el-table-column>
<el-table-column v-if="this.departmentId===2"
prop="resourceCallNum"
label="申请总数"
min-width="100%">
</el-table-column>
<el-table-column <el-table-column
label="操作" label="操作"
min-width="92%"> min-width="92%">
@ -111,14 +121,13 @@
</div> </div>
</el-card> </el-card>
</div> </div>
<component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-used> <component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild2='closeChild2'></component-used>
<component-services v-if='servicesIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-services> <component-services v-if='servicesIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-services>
<application-resources v-if='resourcesIsShow' :tableId='tableId' :fatherId='fatherId' @closeApplication='closeApplication'></application-resources> <application-resources v-if='resourcesIsShow' :tableId='tableId' :fatherId='fatherId' @closeApplication='closeApplication'></application-resources>
</div> </div>
</template> </template>
<script> <script>
import componentServices from './componentServices.vue' import componentServices from './componentServices.vue'
import componentUsed from './componentUsed.vue'
import applicationResources from './applicationResources.vue' import applicationResources from './applicationResources.vue'
import ComponentUsed from './componentUsed.vue' import ComponentUsed from './componentUsed.vue'
export default { export default {
@ -216,7 +225,7 @@ export default {
// pageSize: 20 // pageSize: 20
} }
}).then(res => { }).then(res => {
// this.tableData =res.data.data this.tableData =res.data.data
}) })
}, },
// // 获取部门列表 // // 获取部门列表
@ -244,7 +253,7 @@ export default {
resourceType:'组件服务' resourceType:'组件服务'
} }
}).then(res => { }).then(res => {
// this.tableData =res.data.data.list this.tableData =res.data.data.list
this.total = res.data.data.total this.total = res.data.data.total
}) })
}, },
@ -258,7 +267,7 @@ export default {
resourceType:'组件服务' resourceType:'组件服务'
} }
}).then(res => { }).then(res => {
// this.tableData =res.data.data.list this.tableData =res.data.data.list
}) })
}, },
@ -272,7 +281,7 @@ export default {
resourceType:'应用资源' resourceType:'应用资源'
} }
}).then(res => { }).then(res => {
// this.tableData =res.data.data.list this.tableData =res.data.data.list
this.total = res.data.data.total this.total = res.data.data.total
}) })
@ -287,7 +296,7 @@ export default {
resourceType:'应用资源' resourceType:'应用资源'
} }
}).then(res => { }).then(res => {
// this.tableData =res.data.data.list this.tableData =res.data.data.list
}) })
}, },
@ -304,13 +313,12 @@ export default {
this.tableId=row.deptId this.tableId=row.deptId
this.fatherId=1 this.fatherId=1
} }
else if(this.choseId===1){ } else if(this.choseId===1){
this.homeIsShow=false this.homeIsShow=false
this.resourcesIsShow=true this.resourcesIsShow=true
this.tableId=row.deptId this.tableId=row.deptId
this.fatherId=2 this.fatherId=2
} }
}
}, },
@ -354,10 +362,18 @@ export default {
closeChild(){ closeChild(){
this.homeIsShow=true this.homeIsShow=true
this.servicesIsShow=false this.servicesIsShow=false
this. handleCurrentChange(1)
},
closeChild2(){
this.homeIsShow=true
this.UsedIsShow=false
this. handleCurrentChange(1)
}, },
closeApplication(){ closeApplication(){
this.homeIsShow=true this.homeIsShow=true
this.resourcesIsShow=false this.resourcesIsShow=false
this. handleCurrentChange(1)
} }
}, },

490
back/src/views/modules/bscatalogue/ManagementPop.vue
View File

@ -6,130 +6,206 @@
* @Description: 编目弹窗 * @Description: 编目弹窗
--> -->
<template> <template>
<div class="management-pop"> <div class="management-pop">
<div class="top"> <div class="top">
<a-button series="primary" @click="showAdd()"> <a-button series="primary" @click="showAdd()"> 新增 </a-button>
新增 <a-popconfirm
</a-button> title="是否删除选中字段?"
okText="是"
cancelText="否"
@confirm="confirmDel"
@cancel="cancelDel"
>
<!-- <a-button series="primary">批量删除</a-button> -->
</a-popconfirm>
</div>
<a-table
:columns="columns"
:data-source="data"
:expanded-row-keys.sync="expandedRowKeys"
:pagination="false"
ref="aTable"
:key="showKey"
:scroll="{ x: 1200, y: 500 }"
>
<template
v-for="col in [
'name',
'isAttr',
'isLinkToDic',
'linkValue',
'isFilterCriteria',
'type',
'xh',
'operation'
]"
:slot="col"
slot-scope="text, record, index"
class="text"
>
<div :key="col" style="display: inline-block" v-if="col === 'name'">
<a-input
v-if="record.editable"
style="margin: -5px 0"
:value="text"
@change="(e) => handleChange(e.target.value, record.key, col)"
/>
<template v-else>
{{ text }}
</template>
</div>
<div
:key="col"
style="display: inline-block"
v-else-if="col === 'isAttr'"
>
<a-switch
v-if="record.editable && !record.children"
default-checked
@change="isAttrOnChange"
:checked="text"
/>
<template v-else>
<a-switch default-checked :disabled="disabled" :checked="text" />
</template>
</div>
<div
:key="col"
style="display: inline-block"
v-else-if="col === 'isLinkToDic'"
>
<a-switch
v-if="record.editable && record.isAttr"
default-checked
@change="isLinkToDicOnChange"
:checked="text"
/>
<template v-else>
<a-switch default-checked :disabled="disabled" :checked="text" />
</template>
</div>
<div
:key="col"
style="display: inline-block"
v-else-if="col === 'linkValue'"
>
<a-select
:defaultValue="text"
style="width: 150px"
@change="linkValueHandleChange"
:disabled="
record.editable && record.isLinkToDic ? !disabled : disabled
"
>
<a-select-option :value="val.id" v-for="val in zdList" :key="val">
{{ val.dictName }}
</a-select-option>
</a-select>
</div>
<div
:key="col"
style="display: inline-block"
v-else-if="col === 'isFilterCriteria'"
>
<a-switch
v-if="record.editable && record.linkValue"
default-checked
@change="isFilterCriteriaOnChange"
:checked="text"
/>
<template v-else>
<a-switch default-checked :disabled="disabled" :checked="text" />
</template>
</div>
<div
:key="col"
style="display: inline-block"
v-else-if="col === 'type'"
>
<a-select
:defaultValue="text"
style="width: 150px"
@change="typeHandleChange"
:disabled="
record.editable && !record.children ? !disabled : disabled
"
>
<a-select-option
:value="val.dictValue"
v-for="val in fieldTypeList"
:key="val"
>
{{ val.dictLabel }}
</a-select-option>
</a-select>
</div>
<div :key="col" style="display: inline-block" v-else-if="col === 'xh'">
<a-input
v-if="record.editable"
style="margin: -5px 0"
:value="text"
@change="(e) => handleChange(e.target.value, record.key, col)"
/>
<template v-else>
{{ text }}
</template>
</div>
<div
:key="col"
class="editable-row-operations"
v-else-if="col === 'operation'"
>
<span v-if="record.editable">
<a @click="() => save(record.key)">保存</a>
<a-popconfirm <a-popconfirm
title="是否删除选中字段?" title="是否取消修改?"
@confirm="() => cancel(record.key)"
okText="是" okText="是"
cancelText="否" cancelText="否"
@confirm="confirmDel" >
<a>取消</a>
</a-popconfirm>
</span>
<span v-else>
<a
:disabled="editingKey !== ''"
@click="() => add(record.id, record.children)"
v-if="!record.isAttr && record.cengji <= 3"
>新增</a
>
<a :disabled="editingKey !== ''" @click="() => edit(record.key)"
>修改</a
>
<a-popconfirm
title="是否确定删除?"
okText="是"
cancelText="否"
@confirm="del(record)"
@cancel="cancelDel" @cancel="cancelDel"
> >
<!-- <a-button series="primary">批量删除</a-button> --> <a :disabled="editingKey !== ''">删除</a>
</a-popconfirm> </a-popconfirm>
</span>
</div> </div>
<a-table </template>
:columns="columns" </a-table>
:data-source="data" <a-modal
:expanded-row-keys.sync="expandedRowKeys" :visible="visible"
:pagination='false' style="margin-top: 200px"
ref="aTable" title="新增编目"
:key="showKey" okText="新增"
:scroll="{ x: 1200, y: 500 }" cancelText="取消"
> @ok="handleOk"
<template @cancel="handleCancel"
v-for="col in ['name', 'isAttr', 'isLinkToDic', 'linkValue', 'isFilterCriteria', 'type', 'xh', 'operation']" >
:slot="col" 字段名：
slot-scope="text, record, index" <a-input
class="text" style="width: 80%"
> placeholder="请输入字段名"
<div :key="col" style="display: inline-block;" v-if="col==='name'"> v-model="nameTxt"
<a-input />
v-if="record.editable" </a-modal>
style="margin: -5px 0" </div>
:value="text"
@change="e => handleChange(e.target.value, record.key, col)"
/>
<template v-else>
{{ text }}
</template>
</div>
<div :key="col" style="display: inline-block;" v-else-if="col==='isAttr'">
<a-switch v-if="record.editable && !record.children" default-checked @change="isAttrOnChange" :checked="text" />
<template v-else>
<a-switch default-checked :disabled='disabled' :checked="text" />
</template>
</div>
<div :key="col" style="display: inline-block;" v-else-if="col==='isLinkToDic'">
<a-switch v-if="record.editable && record.isAttr" default-checked @change="isLinkToDicOnChange" :checked="text" />
<template v-else>
<a-switch default-checked :disabled='disabled' :checked="text" />
</template>
</div>
<div :key="col" style="display: inline-block;" v-else-if="col==='linkValue'">
<a-select :defaultValue="text" style="width: 150px" @change="linkValueHandleChange" :disabled='(record.editable && record.isLinkToDic)?!disabled:disabled'>
<a-select-option :value="val.id" v-for="val in zdList" :key="val">
{{val.dictName}}
</a-select-option>
</a-select>
</div>
<div :key="col" style="display: inline-block;" v-else-if="col==='isFilterCriteria'">
<a-switch v-if="record.editable && record.linkValue" default-checked @change="isFilterCriteriaOnChange" :checked="text" />
<template v-else>
<a-switch default-checked :disabled='disabled' :checked="text" />
</template>
</div>
<div :key="col" style="display: inline-block;" v-else-if="col==='type'">
<a-select :defaultValue="text" style="width: 150px" @change="typeHandleChange" :disabled='(record.editable && !record.children)?!disabled:disabled'>
<a-select-option :value="val.dictValue" v-for="val in fieldTypeList" :key="val">
{{val.dictLabel}}
</a-select-option>
</a-select>
</div>
<div :key="col" style="display: inline-block;" v-else-if="col==='xh'">
<a-input
v-if="record.editable"
style="margin: -5px 0"
:value="text"
@change="e => handleChange(e.target.value, record.key, col)"
/>
<template v-else>
{{ text }}
</template>
</div>
<div :key="col" class="editable-row-operations" v-else-if="col==='operation'">
<span v-if="record.editable">
<a @click="() => save(record.key)">保存</a>
<a-popconfirm title="是否取消修改?" @confirm="() => cancel(record.key)" okText='是' cancelText='否'>
<a>取消</a>
</a-popconfirm>
</span>
<span v-else>
<a :disabled="editingKey !== ''" @click="() => add(record.id,record.children)" v-if="!record.isAttr&&record.cengji<=3">新增</a>
<a :disabled="editingKey !== ''" @click="() => edit(record.key)">修改</a>
<a-popconfirm
title="是否确定删除?"
okText="是"
cancelText="否"
@confirm="del(record)"
@cancel="cancelDel"
>
<a :disabled="editingKey !== ''">删除</a>
</a-popconfirm>
</span>
</div>
</template>
</a-table>
<a-modal
:visible="visible"
style="margin-top: 200px"
title="新增编目"
okText="新增"
cancelText="取消"
@ok="handleOk"
@cancel="handleCancel"
>
字段名：
<a-input
style="width: 80%"
placeholder="请输入字段名"
v-model="nameTxt"
/>
</a-modal>
</div>
</template> </template>
<script> <script>
import Vue from 'vue' import Vue from 'vue'
@ -184,9 +260,7 @@ const columns = [
] ]
const data = [] const data = []
export default { export default {
components: { components: {},
},
props: { props: {
showItem: { showItem: {
type: Object, type: Object,
@ -198,7 +272,7 @@ export default {
} }
}, },
data () { data () {
this.cacheData = data.map(item => ({ ...item })) this.cacheData = data.map((item) => ({ ...item }))
return { return {
time: true, time: true,
showKey: 0, showKey: 0,
@ -217,19 +291,27 @@ export default {
editingKey: '', editingKey: '',
rowSelection: { rowSelection: {
onChange: (selectedRowKeys, selectedRows) => { onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows) console.log(
`selectedRowKeys: ${selectedRowKeys}`,
'selectedRows: ',
selectedRows
)
this.delList = [] this.delList = []
if (selectedRows) { if (selectedRows) {
selectedRows.forEach((val) => { selectedRows.forEach((val) => {
this.delList.push(val.key) this.delList.push(val.key)
}) })
} }
console.log('delList================>', this.expandedRowKeys, this.delList) console.log(
'delList================>',
this.expandedRowKeys,
this.delList
)
}, },
onSelect: (record, selected, selectedRows) => { onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows) console.log(record, selected, selectedRows)
if (record.children) { if (record.children) {
record.children.forEach(item => { record.children.forEach((item) => {
this.delList.push(item.key) this.delList.push(item.key)
}) })
} }
@ -258,81 +340,16 @@ export default {
}, },
// 查询所有编目 // 查询所有编目
getCategoryTree () { getCategoryTree () {
this.$http.get('/category/getCategoryTree').then(res => { this.$http.get('/category/getCategoryTree').then((res) => {
console.log(res.data.data, this.index) res.data.data.map((item, indexFather) => {
if (item.id === this.showItem.id) {
this.index = indexFather
}
})
this.data = [] this.data = []
if (res.data.data[this.index].children) { if (res.data.data[this.index].children) {
res.data.data[this.index].children.forEach(val => { res.data.data[this.index].children.forEach((val) => {
this.initData(val, this.cengji) this.initData(val, this.cengji)
// if (val.children) {
// if (val.children.length === 0) {
// delete val.children
// } else {
// val.children.forEach(item => {
// item.key = item.id
// item.cengji = '2'
// console.log(item)
// if (item.children && item.children.length === 0) {
// delete item.children
// } else if (item.children) {
// item.children.forEach(child => {
// child.key = child.id
// child.cengji = '3'
// if (child.children && child.children.length === 0) {
// delete child.children
// }
// if (child.isAttr === 'true') {
// child.isAttr = true
// } else if (child.isAttr === 'false') {
// child.isAttr = false
// }
// if (child.isFilterCriteria === 'true') {
// child.isFilterCriteria = true
// } else if (child.isFilterCriteria === 'false') {
// child.isFilterCriteria = false
// }
// if (child.isLinkToDic === 'true') {
// child.isLinkToDic = true
// } else if (child.isLinkToDic === 'false') {
// child.isLinkToDic = false
// }
// })
// }
// if (item.isAttr === 'true') {
// item.isAttr = true
// } else if (item.isAttr === 'false') {
// item.isAttr = false
// }
// if (item.isFilterCriteria === 'true') {
// item.isFilterCriteria = true
// } else if (item.isFilterCriteria === 'false') {
// item.isFilterCriteria = false
// }
// if (item.isLinkToDic === 'true') {
// item.isLinkToDic = true
// } else if (item.isLinkToDic === 'false') {
// item.isLinkToDic = false
// }
// })
// }
// }
// val.key = val.id
// val.cengji = '1'
// if (val.isAttr === 'true') {
// val.isAttr = true
// } else if (val.isAttr === 'false') {
// val.isAttr = false
// }
// if (val.isFilterCriteria === 'true') {
// val.isFilterCriteria = true
// } else if (val.isFilterCriteria === 'false') {
// val.isFilterCriteria = false
// }
// if (val.isLinkToDic === 'true') {
// val.isLinkToDic = true
// } else if (val.isLinkToDic === 'false') {
// val.isLinkToDic = false
// }
}) })
this.data = res.data.data[this.index].children this.data = res.data.data[this.index].children
console.log('data======================>', this.data) console.log('data======================>', this.data)
@ -365,7 +382,7 @@ export default {
delete data.children delete data.children
} else { } else {
cengji++ cengji++
data.children.forEach(item => { data.children.forEach((item) => {
this.initData(item, cengji) this.initData(item, cengji)
}) })
} }
@ -373,17 +390,21 @@ export default {
}, },
// 查询所有字典 // 查询所有字典
selectZd () { selectZd () {
this.$http.get('/sys/dict/type/page?limit=10000&page=1').then(res => { this.$http.get('/sys/dict/type/page?limit=10000&page=1').then((res) => {
this.zdList = res.data.data.list this.zdList = res.data.data.list
console.log(this.zdList) console.log(this.zdList)
}) })
}, },
// 查询表单类型字典 // 查询表单类型字典
selectFieldType () { selectFieldType () {
this.$http.get('/sys/dict/data/page?limit=10000&page=1&dictTypeId=1531163741457014785').then(res => { this.$http
this.fieldTypeList = res.data.data.list .get(
console.log(this.fieldTypeList) '/sys/dict/data/page?limit=10000&page=1&dictTypeId=1531163741457014785'
}) )
.then((res) => {
this.fieldTypeList = res.data.data.list
console.log(this.fieldTypeList)
})
}, },
// 新增弹窗显示 // 新增弹窗显示
showAdd () { showAdd () {
@ -408,39 +429,42 @@ export default {
// 新增编目 // 新增编目
handleOk () { handleOk () {
if (this.nameTxt) { if (this.nameTxt) {
this.$http.post('/category/insert', { this.$http
isAttr: true, .post('/category/insert', {
isFilterCriteria: false, isAttr: true,
isLinkToDic: false, isFilterCriteria: false,
linkValue: '', isLinkToDic: false,
name: this.nameTxt, linkValue: '',
pid: this.pid, name: this.nameTxt,
rootCategory: this.rootCategory, pid: this.pid,
type: 'input', rootCategory: this.rootCategory,
xh: this.px || this.data.length + 1 type: 'input',
}).then(res => { xh: this.px || this.data.length + 1
console.log(res) })
this.visible = false .then((res) => {
this.nameTxt = '' console.log(res)
this.pid = this.showItem.id this.visible = false
this.init() this.nameTxt = ''
}) this.pid = this.showItem.id
this.init()
})
} }
}, },
// 批量删除 // 批量删除
confirmDel () { confirmDel () {
this.$http.post('/category/deleteById', { ids: this.delList }).then(res => { this.$http
console.log(res) .post('/category/deleteById', { ids: this.delList })
this.init() .then((res) => {
}) console.log(res)
this.init()
})
}, },
// 取消修改 // 取消修改
cancelDel () { cancelDel () {},
},
handleChange (value, key, column) { handleChange (value, key, column) {
const newData = [...this.data] const newData = [...this.data]
this.editData = {} this.editData = {}
newData.forEach(val => { newData.forEach((val) => {
this.handleChangeFor(val, key) this.handleChangeFor(val, key)
}) })
if (this.editData) { if (this.editData) {
@ -454,7 +478,7 @@ export default {
this.editData = val this.editData = val
} else { } else {
if (val.children) { if (val.children) {
val.children.forEach(item => { val.children.forEach((item) => {
this.handleChangeFor(item, key) this.handleChangeFor(item, key)
}) })
} }
@ -495,7 +519,7 @@ export default {
} }
}, },
editFor (data, key) { editFor (data, key) {
data.forEach(val => { data.forEach((val) => {
if (val.key === key) { if (val.key === key) {
this.editData = val this.editData = val
} else { } else {
@ -515,7 +539,7 @@ export default {
}) })
} else { } else {
this.flag = false this.flag = false
this.$http.post('/category/update', this.editData).then(res => { this.$http.post('/category/update', this.editData).then((res) => {
console.log(res) console.log(res)
this.editingKey = '' this.editingKey = ''
this.init() this.init()
@ -586,12 +610,12 @@ export default {
// } // }
// }) // })
} }
this.$http.post('/category/deleteById', { ids: arr }).then(res => { this.$http.post('/category/deleteById', { ids: arr }).then((res) => {
this.init() this.init()
}) })
}, },
delFor (data, arr) { delFor (data, arr) {
data.forEach(val => { data.forEach((val) => {
arr.push(val.id) arr.push(val.id)
if (val.children) { if (val.children) {
this.delFor(val.children, arr) this.delFor(val.children, arr)
@ -601,7 +625,7 @@ export default {
} }
} }
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.top { .top {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

290
back/src/views/modules/bscatalogue/bscatalogue.vue
View File

@ -24,7 +24,9 @@
<div <div
class="resource-detail-wrap" class="resource-detail-wrap"
:style="{ :style="{
backgroundImage: `url(${topicCardBgImg(slotProps.item.positionNum)})`, backgroundImage: `url(${topicCardBgImg(
slotProps.item.positionNum
)})`
}" }"
> >
<!-- 企业标题 --> <!-- 企业标题 -->
@ -36,11 +38,17 @@
<input <input
v-model="slotProps.item.name" v-model="slotProps.item.name"
class="edit-enterprise-input" class="edit-enterprise-input"
> />
</div> </div>
<!-- 专题资源列表 --> <!-- 专题资源列表 -->
<div class="resource-detail-resource"> <div class="resource-detail-resource">
<div class="num" v-for="item2 in slotProps.item.children" :key="item2.id">{{ item2.name }}</div> <div
class="num"
v-for="item2 in slotProps.item.children"
:key="item2.id"
>
{{ item2.name }}
</div>
<!-- <span class="unit">个</span> --> <!-- <span class="unit">个</span> -->
</div> </div>
<!-- 删除资源按钮 --> <!-- 删除资源按钮 -->
@ -48,7 +56,9 @@
<i <i
v-if="isRemoveCard" v-if="isRemoveCard"
class="resource-detail-remove" class="resource-detail-remove"
@click.stop="removeEnterpriseCard(slotProps.item,slotProps.index)" @click.stop="
removeEnterpriseCard(slotProps.item, slotProps.index)
"
/> />
</transition> </transition>
</div> </div>
@ -61,7 +71,7 @@
</div> </div>
<div> <div>
<span @click.stop="editTopicCard">{{ <span @click.stop="editTopicCard">{{
isRemoveCard ? "完成" : "编辑" isRemoveCard ? '完成' : '编辑'
}}</span> }}</span>
</div> </div>
</div> </div>
@ -75,7 +85,7 @@
:style="{ :style="{
top: cardAddTop, top: cardAddTop,
left: cardAddLeft, left: cardAddLeft,
backgroundImage: `url(${addCardBgImg})`, backgroundImage: `url(${addCardBgImg})`
}" }"
> >
<div v-if="!isAddCard"> <div v-if="!isAddCard">
@ -88,7 +98,7 @@
v-model="addEnterpriseName" v-model="addEnterpriseName"
class="add-enterprise-input" class="add-enterprise-input"
placeholder="请输入目录名称" placeholder="请输入目录名称"
> />
</div> </div>
<div class="add-enterprise-button-wrap"> <div class="add-enterprise-button-wrap">
<el-button <el-button
@ -109,24 +119,26 @@
</div> </div>
</transition> </transition>
<!-- 卡片覆盖层--> <!-- 卡片覆盖层-->
<div class="enterprise-card-cover" :style="{ zIndex: topicCoverZIndex||1000 }"> <div
class="enterprise-card-cover"
:style="{ zIndex: topicCoverZIndex || 1000 }"
>
<div <div
v-for="(item, index) in topicList" v-for="(item, index) in topicList"
:key="index" :key="index"
@click="test(item,index)" @click="test(item, index)"
> ></div>
</div>
</div> </div>
<a-modal <a-modal
:visible="show" :visible="show"
title="编目配置" title="编目配置"
@ok.stop="handleOk" @ok.stop="handleOk"
@cancel.stop="handleCancel" @cancel.stop="handleCancel"
:footer='null' :footer="null"
:key="showKey" :key="showKey"
width="1200px" width="1200px"
> >
<ManagementPop :showItem="showItem" :index='index'></ManagementPop> <ManagementPop :showItem="showItem" :index="index"></ManagementPop>
</a-modal> </a-modal>
</div> </div>
</template> </template>
@ -147,7 +159,8 @@ export default {
ManagementPop ManagementPop
}, },
props: { props: {
enterpriseTypeOption: { // 企业类型字典值 enterpriseTypeOption: {
// 企业类型字典值
type: Array, type: Array,
default: () => { default: () => {
return [] return []
@ -161,6 +174,7 @@ export default {
index: -1, index: -1,
pid: '', pid: '',
showKey: 0, showKey: 0,
showItem: {},
oldId: -1, oldId: -1,
isShowEdit: true, isShowEdit: true,
oldIdList: [], oldIdList: [],
@ -169,8 +183,7 @@ export default {
cardInsideWidth: 360, // 卡片的宽度 cardInsideWidth: 360, // 卡片的宽度
cardOutsideHeight: 198, // 卡片组件的高度 cardOutsideHeight: 198, // 卡片组件的高度
cardInsideHeight: 176, // 卡片的高度 cardInsideHeight: 176, // 卡片的高度
topicList: [ topicList: [],
],
newGroupName: { newGroupName: {
// 修改后的企业新名称 // 修改后的企业新名称
cur: [] cur: []
@ -271,44 +284,47 @@ export default {
}, },
// 初始化卡片列表 // 初始化卡片列表
async initTopicCardList () { async initTopicCardList () {
this.$http.get('/category/getCategoryTree').then(({ data: res }) => { this.$http
// 首先对后端返回的数据进行排序，这是为了方便进行卡片排序 .get('/category/getCategoryTree')
this.oldIdList = res.data .then(({ data: res }) => {
res.data.sort((a, b) => a.sortIndex - b.sortIndex) // 首先对后端返回的数据进行排序，这是为了方便进行卡片排序
this.topicList = res.data this.oldIdList = res.data
res.data.map((resource, index) => { res.data.sort((a, b) => a.sortIndex - b.sortIndex)
this.topicList[index].id = `card_${this.topicList[index].id}` this.topicList = res.data
const indexson = index res.data.map((resource, index) => {
this.$set(this.topicList[index], 'positionNum', indexson + 1) this.topicList[index].id = `card_${this.topicList[index].id}`
}) const indexson = index
console.log('this.topicList', res.data) this.$set(this.topicList[index], 'positionNum', indexson + 1)
if (this.selectIndex !== -1) { })
console.log('showItem=============>', res.data[this.selectIndex]) console.log('this.topicList', res.data)
if (res.data[this.selectIndex].children) { if (this.selectIndex !== -1) {
res.data[this.selectIndex].children.forEach(val => { console.log('showItem=============>', res.data[this.selectIndex])
val.key = val.id if (res.data[this.selectIndex].children) {
if (val.isAttr === 'true') { res.data[this.selectIndex].children.forEach((val) => {
val.isAttr = true val.key = val.id
} else if (val.isAttr === 'false') { if (val.isAttr === 'true') {
val.isAttr = false val.isAttr = true
} } else if (val.isAttr === 'false') {
if (val.isFilterCriteria === 'true') { val.isAttr = false
val.isFilterCriteria = true }
} else if (val.isFilterCriteria === 'false') { if (val.isFilterCriteria === 'true') {
val.isFilterCriteria = false val.isFilterCriteria = true
} } else if (val.isFilterCriteria === 'false') {
if (val.isLinkToDic === 'true') { val.isFilterCriteria = false
val.isLinkToDic = true }
} else if (val.isLinkToDic === 'false') { if (val.isLinkToDic === 'true') {
val.isLinkToDic = false val.isLinkToDic = true
} } else if (val.isLinkToDic === 'false') {
}) val.isLinkToDic = false
}
})
}
console.log('showItem=============>', res.data[this.selectIndex])
this.showItem = res.data[this.selectIndex]
} }
console.log('showItem=============>', res.data[this.selectIndex]) this.cardNum = this.topicList.length
this.showItem = res.data[this.selectIndex] })
} .catch(() => {})
this.cardNum = this.topicList.length
}).catch(() => {})
}, },
// 卡片开始拖拽前的方法 // 卡片开始拖拽前的方法
startDrag () {}, startDrag () {},
@ -348,40 +364,42 @@ export default {
const params = { const params = {
ids: letid ids: letid
} }
this.$http.post('/category/deleteById', params).then(({ data: res }) => { this.$http
let removeIndex = 0 .post('/category/deleteById', params)
this.topicList.forEach((enterprise, index) => { .then(({ data: res }) => {
if ( let removeIndex = 0
enterprise.positionNum && this.topicList.forEach((enterprise, index) => {
if (
enterprise.positionNum &&
enterprise.positionNum > item.positionNum enterprise.positionNum > item.positionNum
) { ) {
enterprise.positionNum = enterprise.positionNum - 1 enterprise.positionNum = enterprise.positionNum - 1
} }
if (item.resourceGroupId === enterprise.resourceGroupId) { if (item.resourceGroupId === enterprise.resourceGroupId) {
enterprise.position = this.topicList.length enterprise.position = this.topicList.length
removeIndex = index removeIndex = index
} }
})
this.topicList.splice(removeIndex, 1)
// 此处需要把删除的对象的id添加回来，否则缺失的id将导致卡片不能再拖动
this.topicList.push({ id: item.id })
this.cardNum -= 1
// 调整编辑框的企业名称顺序
this.resortEditGroupName()
// 隐藏已经删除的卡片 -> 变更为移除已经删除的卡片
this.$refs.cardDragger.$vnode.elm.childNodes.forEach((node) => {
if (node.id === item.id) {
node.style.display = 'none'
this.oldId = item.id
}
})
this.$message.success('删除企业成功！')
// 删除完退出编辑模式
this.initTopicCardList()
this.isRemoveCard = !this.isRemoveCard
this.isEditGroupName = !this.isEditGroupName
this.topicCoverZIndex = this.isEditGroupName ? -999 : 1000
}) })
this.topicList.splice(removeIndex, 1)
// 此处需要把删除的对象的id添加回来，否则缺失的id将导致卡片不能再拖动
this.topicList.push({ id: item.id })
this.cardNum -= 1
// 调整编辑框的企业名称顺序
this.resortEditGroupName()
// 隐藏已经删除的卡片 -> 变更为移除已经删除的卡片
this.$refs.cardDragger.$vnode.elm.childNodes.forEach((node) => {
if (node.id === item.id) {
node.style.display = 'none'
this.oldId = item.id
}
})
this.$message.success('删除企业成功！')
// 删除完退出编辑模式
this.initTopicCardList()
this.isRemoveCard = !this.isRemoveCard
this.isEditGroupName = !this.isEditGroupName
this.topicCoverZIndex = this.isEditGroupName ? -999 : 1000
})
.catch((e) => { .catch((e) => {
console.log('删除企业失败！%o', e) console.log('删除企业失败！%o', e)
this.$message.error('删除企业失败！') this.$message.error('删除企业失败！')
@ -395,9 +413,11 @@ export default {
id: item.id.slice(5), id: item.id.slice(5),
name: item.name name: item.name
} }
this.$http.post('/category/update', params).then(({ data: res }) => { this.$http
item.name = newGroupName .post('/category/update', params)
}) .then(({ data: res }) => {
item.name = newGroupName
})
.catch((e) => { .catch((e) => {
console.log('更新企业名称失败！%o', e) console.log('更新企业名称失败！%o', e)
this.$message.warning('更新企业名称失败！') this.$message.warning('更新企业名称失败！')
@ -437,35 +457,37 @@ export default {
linkValue: '', linkValue: '',
xh: this.topicList.length + 1 xh: this.topicList.length + 1
} }
const response = this.$http.post('/category/insert', params).then(({ data: res }) => { const response = this.$http
if (res.code !== 0) { .post('/category/insert', params)
console.log('response.code', res) .then(({ data: res }) => {
this.$message.error('新增目录失败，请联系管理员！') if (res.code !== 0) {
} else { console.log('response.code', res)
this.$message.success('新增目录成功！') this.$message.error('新增目录失败，请联系管理员！')
const enterprise = { } else {
// id: `id${this.topicList.length + 1}`, this.$message.success('新增目录成功！')
name: this.addEnterpriseName, const enterprise = {
positionNum: this.cardNum + 1 // id: `id${this.topicList.length + 1}`,
name: this.addEnterpriseName,
positionNum: this.cardNum + 1
}
this.topicList.push(enterprise)
this.cardNum += 1
this.newGroupName.cur.push(enterprise.name)
this.addEnterpriseName = ''
if (this.oldId !== -1) {
this.$refs.cardDragger.$vnode.elm.childNodes.forEach((node) => {
if (node.id === this.oldId) {
node.style.display = 'flex'
}
})
}
// 创建完退出编辑模式
this.isRemoveCard = !this.isRemoveCard
this.isEditGroupName = !this.isEditGroupName
this.topicCoverZIndex = this.isEditGroupName ? -999 : 1000
this.initTopicCardList()
} }
this.topicList.push(enterprise) })
this.cardNum += 1
this.newGroupName.cur.push(enterprise.name)
this.addEnterpriseName = ''
if (this.oldId !== -1) {
this.$refs.cardDragger.$vnode.elm.childNodes.forEach((node) => {
if (node.id === this.oldId) {
node.style.display = 'flex'
}
})
}
// 创建完退出编辑模式
this.isRemoveCard = !this.isRemoveCard
this.isEditGroupName = !this.isEditGroupName
this.topicCoverZIndex = this.isEditGroupName ? -999 : 1000
this.initTopicCardList()
}
})
// const response = await resourceGroup({ // const response = await resourceGroup({
// method: 'post', // method: 'post',
// data: { // data: {
@ -548,7 +570,7 @@ export default {
height: 28px; height: 28px;
margin-left: 14px; margin-left: 14px;
margin-top: 9px; margin-top: 9px;
background-image: url("~@/assets/img/capabilityCatalogingManagement/edit-card.png"); background-image: url('~@/assets/img/capabilityCatalogingManagement/edit-card.png');
} }
} }
div:nth-child(2) { div:nth-child(2) {
@ -587,7 +609,7 @@ export default {
left: 50%; left: 50%;
margin-left: -45.5px; margin-left: -45.5px;
margin-top: -45.5px; margin-top: -45.5px;
background-image: url("~@/assets/img/capabilityCatalogingManagement/add.png"); background-image: url('~@/assets/img/capabilityCatalogingManagement/add.png');
cursor: pointer; cursor: pointer;
} }
> span { > span {
@ -596,7 +618,7 @@ export default {
padding-top: 5px; padding-top: 5px;
padding-left: 20px; padding-left: 20px;
font-size: 26px; font-size: 26px;
font-family: "Microsoft YaHei"; font-family: 'Microsoft YaHei';
} }
.add-enterprise-input-wrap { .add-enterprise-input-wrap {
// height: 50px; // height: 50px;
@ -634,7 +656,7 @@ export default {
background: #0fa7f6; background: #0fa7f6;
span { span {
color: #ffffff; color: #ffffff;
font-family: "Microsoft YaHei"; font-family: 'Microsoft YaHei';
font-size: 16px; font-size: 16px;
} }
} }
@ -682,7 +704,7 @@ export default {
text-align: center; text-align: center;
color: #ffffff; color: #ffffff;
font-size: 14px; font-size: 14px;
font-family: "Microsoft YaHei"; font-family: 'Microsoft YaHei';
} }
span:nth-child(2) { span:nth-child(2) {
display: inline-block; display: inline-block;
@ -691,7 +713,7 @@ export default {
text-align: center; text-align: center;
color: #ffffff; color: #ffffff;
font-size: 14px; font-size: 14px;
font-family: "Microsoft YaHei"; font-family: 'Microsoft YaHei';
border: 1px solid rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.5);
padding-top: 4px; padding-top: 4px;
margin-top: 15px; margin-top: 15px;
@ -702,7 +724,7 @@ export default {
.enterprise-card-tip-first:before, .enterprise-card-tip-first:before,
.enterprise-card-tip-first:after { .enterprise-card-tip-first:after {
position: absolute; position: absolute;
content: " "; content: ' ';
top: 32px; top: 32px;
left: -16px; left: -16px;
display: block; display: block;
@ -730,7 +752,7 @@ export default {
text-align: center; text-align: center;
color: #ffffff; color: #ffffff;
font-size: 14px; font-size: 14px;
font-family: "Microsoft YaHei"; font-family: 'Microsoft YaHei';
} }
span:nth-child(2) { span:nth-child(2) {
display: inline-block; display: inline-block;
@ -739,7 +761,7 @@ export default {
text-align: center; text-align: center;
color: #ffffff; color: #ffffff;
font-size: 14px; font-size: 14px;
font-family: "Microsoft YaHei"; font-family: 'Microsoft YaHei';
border: 1px solid rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.5);
padding-top: 4px; padding-top: 4px;
margin-top: 15px; margin-top: 15px;
@ -750,7 +772,7 @@ export default {
.enterprise-card-tip-third:before, .enterprise-card-tip-third:before,
.enterprise-card-tip-third:after { .enterprise-card-tip-third:after {
position: absolute; position: absolute;
content: " "; content: ' ';
top: 32px; top: 32px;
left: 180px; left: 180px;
display: block; display: block;
@ -779,7 +801,7 @@ export default {
text-align: center; text-align: center;
color: #ffffff; color: #ffffff;
font-size: 14px; font-size: 14px;
font-family: "Microsoft YaHei"; font-family: 'Microsoft YaHei';
} }
span:nth-child(2) { span:nth-child(2) {
display: inline-block; display: inline-block;
@ -788,7 +810,7 @@ export default {
text-align: center; text-align: center;
color: #ffffff; color: #ffffff;
font-size: 14px; font-size: 14px;
font-family: "Microsoft YaHei"; font-family: 'Microsoft YaHei';
border: 1px solid rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.5);
padding-top: 4px; padding-top: 4px;
margin-top: 15px; margin-top: 15px;
@ -799,7 +821,7 @@ export default {
.enterprise-card-tip-second:before, .enterprise-card-tip-second:before,
.enterprise-card-tip-second:after { .enterprise-card-tip-second:after {
position: absolute; position: absolute;
content: " "; content: ' ';
top: -15px; top: -15px;
left: 78px; left: 78px;
display: block; display: block;
@ -814,7 +836,7 @@ export default {
width: 100%; width: 100%;
// height: 373px; // height: 373px;
height: 176px; height: 176px;
background-image: url("~@/assets/img/capabilityCatalogingManagement/small-card-orange.png"); background-image: url('~@/assets/img/capabilityCatalogingManagement/small-card-orange.png');
.resource-detail-title { .resource-detail-title {
width: 100%; width: 100%;
height: 40px; height: 40px;
@ -826,7 +848,7 @@ export default {
span { span {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-family: "Microsoft YaHei"; font-family: 'Microsoft YaHei';
font-size: 20px; font-size: 20px;
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
@ -845,7 +867,7 @@ export default {
width: 100%; width: 100%;
height: 30px; height: 30px;
padding-left: 19px; padding-left: 19px;
font-family: "Microsoft YaHei"; font-family: 'Microsoft YaHei';
font-size: 20px; font-size: 20px;
color: white; color: white;
vertical-align: middle; vertical-align: middle;
@ -877,7 +899,7 @@ export default {
position: absolute; position: absolute;
width: 28px; width: 28px;
height: 28px; height: 28px;
background-image: url("~@/assets/img/capabilityCatalogingManagement/remove.png"); background-image: url('~@/assets/img/capabilityCatalogingManagement/remove.png');
top: 0; top: 0;
right: 0; right: 0;
cursor: pointer; cursor: pointer;
@ -886,7 +908,7 @@ export default {
} }
input::-webkit-input-placeholder { input::-webkit-input-placeholder {
font-size: 14px; font-size: 14px;
font-family: "Microsoft YaHei"; font-family: 'Microsoft YaHei';
color: #999999; color: #999999;
} }
</style> </style>

96
back/src/views/modules/components/upload/index.vue Normal file
View File

@ -0,0 +1,96 @@
<!--
* @Author: hisense.liangjunhua
* @Date: 2022-07-08 14:55:19
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-08 17:23:58
* @Description: 告诉大家这是什么
-->
<template>
<el-upload
ref='my-upload'
:action="apiURL"
:accept='accept'
:on-change='handleChange'
:on-preview="handlePreview"
:on-remove="handleRemove"
:limit="maxCount"
:file-list="fileList">
<el-button>上传{{type}}</el-button>
<div slot="tip" class="el-upload__tip">{{tip}}</div>
</el-upload>
</template>
<script>
import Cookies from 'js-cookie'
export default {
name: '',
components: {
},
props: {
title: String,
accept: String,
btnName: String,
type: String,
tip: String,
maxCount: Number,
data: Array,
list: Array,
emitFlag: String,
busType: Number
},
data () {
return {
apiURL: window.SITE_CONFIG.apiURL + '/upload?token=' + Cookies.get('ucsToken'),
fileList: JSON.parse(JSON.stringify(this.list))
}
},
methods: {
handleExceed (file) {
console.log(file)
},
handError (err, file, fileList) {
console.log(err, file, fileList)
},
handlePreview (file) {
console.log(file)
window.open(
window.SITE_CONFIG.previewUrl +
'hisense_office/onlinePreview?url=' +
btoa(encodeURI(file.response.data))
)
},
handleChange (file, fileList) {
console.log(file, fileList)
if (file.status === 'success') {
if (file.response.msg === 'success') {
this.$message({
message: file.name + '上传成功',
type: 'success'
})
// this.data.note1 = file.response.data
this.$emit('changeInfoList', {
attrType: this.title,
attrValue: file.response.data,
delFlag: 0
})
} else {
this.$message.error(file.name + '上传失败')
this.$refs['my-upload'].clearFiles()
}
} else if (file.status === 'error') {
this.$message.error(file.name + '上传失败')
this.$refs['my-upload'].clearFiles()
}
},
handleRemove (file) {
this.$emit('changeInfoList', {
attrType: this.title,
attrValue: '',
delFlag: 0
})
}
}
}
</script>
<style lang='scss' scoped>
</style>

142
back/src/views/modules/hasToDoTasks/AbilityResourceShelf.vue Normal file
View File

@ -0,0 +1,142 @@
<!-- 已办任务-能力资源上架 -->
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-activiti__process">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<el-input
v-model="dataForm.processDefinitionId"
:placeholder="$t('process.name')"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getDataList()">{{
$t('query')
}}</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
@sort-change="dataListSortChangeHandle"
style="width: 100%"
>
<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column> -->
<el-table-column
prop="startUserName"
:label="$t('process.user')"
header-align="center"
align="center"
></el-table-column>
<!-- <el-table-column :label="$t('process.system')" header-align="center" align="center">
<template slot-scope="scope">
<span>{{scope.row && scope.row.resourceName||scope.row.params && scope.row.params.undercarriageReason}}</span>
</template>
</el-table-column> -->
<el-table-column
prop="resourceName"
:label="$t('process.system')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="processInstanceId"
:label="$t('running.id')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="processDefinitionName"
:label="$t('process.processDefinitionName')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="processDefinitionVersion"
:label="$t('process.processDefinitionVersion')"
header-align="center"
align="center"
width="100"
></el-table-column>
<el-table-column
prop="startTime"
:label="$t('process.startTime')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="endTime"
:label="$t('process.endTime')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="showDetail(scope.row)"
>{{ $t('process.viewFlowImage') }}</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import processModule from '@/mixins/process-module'
import qs from 'qs'
export default {
mixins: [mixinViewModule, processModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/act/his/getMyHandledInstancePage',
getDataListIsPage: true,
deleteIsBatch: true,
deleteIsBatchKey: 'deploymentId'
},
dataForm: {
processDefinitionId: '',
processDefinitionKey: 'resourcemountapply'
}
}
},
components: {},
methods: {
showDetail (row) {
if (!row.businessKey) {
return this.$message.error(this.$t('task.detailError'))
}
this.getProcDefRouteSet(row, this.forwardDetail)
}
}
}
</script>

142
back/src/views/modules/hasToDoTasks/AbilityResourcesRemoved.vue Normal file
View File

@ -0,0 +1,142 @@
<!-- 已办任务-能力资源下架 -->
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-activiti__process">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<el-input
v-model="dataForm.processDefinitionId"
:placeholder="$t('process.name')"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getDataList()">{{
$t('query')
}}</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
@sort-change="dataListSortChangeHandle"
style="width: 100%"
>
<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column> -->
<el-table-column
prop="startUserName"
:label="$t('process.user')"
header-align="center"
align="center"
></el-table-column>
<!-- <el-table-column :label="$t('process.system')" header-align="center" align="center">
<template slot-scope="scope">
<span>{{scope.row && scope.row.resourceName||scope.row.params && scope.row.params.undercarriageReason}}</span>
</template>
</el-table-column> -->
<el-table-column
prop="resourceName"
:label="$t('process.system')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="processInstanceId"
:label="$t('running.id')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="processDefinitionName"
:label="$t('process.processDefinitionName')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="processDefinitionVersion"
:label="$t('process.processDefinitionVersion')"
header-align="center"
align="center"
width="100"
></el-table-column>
<el-table-column
prop="startTime"
:label="$t('process.startTime')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="endTime"
:label="$t('process.endTime')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="showDetail(scope.row)"
>{{ $t('process.viewFlowImage') }}</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import processModule from '@/mixins/process-module'
import qs from 'qs'
export default {
mixins: [mixinViewModule, processModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/act/his/getMyHandledInstancePage',
getDataListIsPage: true,
deleteIsBatch: true,
deleteIsBatchKey: 'deploymentId'
},
dataForm: {
processDefinitionId: '',
processDefinitionKey: 'resourcundercarriageapply'
}
}
},
components: {},
methods: {
showDetail (row) {
if (!row.businessKey) {
return this.$message.error(this.$t('task.detailError'))
}
this.getProcDefRouteSet(row, this.forwardDetail)
}
}
}
</script>

142
back/src/views/modules/hasToDoTasks/ApplicationForCompetencyRequirements.vue Normal file
View File

@ -0,0 +1,142 @@
<!-- 已办任务-能力需求申请 -->
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-activiti__process">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<el-input
v-model="dataForm.processDefinitionId"
:placeholder="$t('process.name')"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getDataList()">{{
$t('query')
}}</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
@sort-change="dataListSortChangeHandle"
style="width: 100%"
>
<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column> -->
<el-table-column
prop="startUserName"
:label="$t('process.user')"
header-align="center"
align="center"
></el-table-column>
<!-- <el-table-column :label="$t('process.system')" header-align="center" align="center">
<template slot-scope="scope">
<span>{{scope.row && scope.row.resourceName||scope.row.params && scope.row.params.undercarriageReason}}</span>
</template>
</el-table-column> -->
<el-table-column
prop="resourceName"
:label="$t('process.system')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="processInstanceId"
:label="$t('running.id')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="processDefinitionName"
:label="$t('process.processDefinitionName')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="processDefinitionVersion"
:label="$t('process.processDefinitionVersion')"
header-align="center"
align="center"
width="100"
></el-table-column>
<el-table-column
prop="startTime"
:label="$t('process.startTime')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="endTime"
:label="$t('process.endTime')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="showDetail(scope.row)"
>{{ $t('process.viewFlowImage') }}</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import processModule from '@/mixins/process-module'
import qs from 'qs'
export default {
mixins: [mixinViewModule, processModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/act/his/getMyHandledInstancePage',
getDataListIsPage: true,
deleteIsBatch: true,
deleteIsBatchKey: 'deploymentId'
},
dataForm: {
processDefinitionId: '',
processDefinitionKey: 'abilitydemandapply'
}
}
},
components: {},
methods: {
showDetail (row) {
if (!row.businessKey) {
return this.$message.error(this.$t('task.detailError'))
}
this.getProcDefRouteSet(row, this.forwardDetail)
}
}
}
</script>

142
back/src/views/modules/hasToDoTasks/CommentModeration.vue Normal file
View File

@ -0,0 +1,142 @@
<!-- 已办任务-评论审核 -->
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-activiti__process">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<el-input
v-model="dataForm.processDefinitionId"
:placeholder="$t('process.name')"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getDataList()">{{
$t('query')
}}</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
@sort-change="dataListSortChangeHandle"
style="width: 100%"
>
<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column> -->
<el-table-column
prop="startUserName"
:label="$t('process.user')"
header-align="center"
align="center"
></el-table-column>
<!-- <el-table-column :label="$t('process.system')" header-align="center" align="center">
<template slot-scope="scope">
<span>{{scope.row && scope.row.resourceName||scope.row.params && scope.row.params.undercarriageReason}}</span>
</template>
</el-table-column> -->
<el-table-column
prop="resourceName"
:label="$t('process.system')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="processInstanceId"
:label="$t('running.id')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="processDefinitionName"
:label="$t('process.processDefinitionName')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="processDefinitionVersion"
:label="$t('process.processDefinitionVersion')"
header-align="center"
align="center"
width="100"
></el-table-column>
<el-table-column
prop="startTime"
:label="$t('process.startTime')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="endTime"
:label="$t('process.endTime')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="showDetail(scope.row)"
>{{ $t('process.viewFlowImage') }}</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import processModule from '@/mixins/process-module'
import qs from 'qs'
export default {
mixins: [mixinViewModule, processModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/act/his/getMyHandledInstancePage',
getDataListIsPage: true,
deleteIsBatch: true,
deleteIsBatchKey: 'deploymentId'
},
dataForm: {
processDefinitionId: '',
processDefinitionKey: 'comment_review'
}
}
},
components: {},
methods: {
showDetail (row) {
if (!row.businessKey) {
return this.$message.error(this.$t('task.detailError'))
}
this.getProcDefRouteSet(row, this.forwardDetail)
}
}
}
</script>

142
back/src/views/modules/hasToDoTasks/CompetencyApplication.vue Normal file
View File

@ -0,0 +1,142 @@
<!-- 已办任务-能力申请 -->
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-activiti__process">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<el-input
v-model="dataForm.processDefinitionId"
:placeholder="$t('process.name')"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getDataList()">{{
$t('query')
}}</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
@sort-change="dataListSortChangeHandle"
style="width: 100%"
>
<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column> -->
<el-table-column
prop="startUserName"
:label="$t('process.user')"
header-align="center"
align="center"
></el-table-column>
<!-- <el-table-column :label="$t('process.system')" header-align="center" align="center">
<template slot-scope="scope">
<span>{{scope.row && scope.row.resourceName||scope.row.params && scope.row.params.undercarriageReason}}</span>
</template>
</el-table-column> -->
<el-table-column
prop="resourceName"
:label="$t('process.system')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="processInstanceId"
:label="$t('running.id')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="processDefinitionName"
:label="$t('process.processDefinitionName')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="processDefinitionVersion"
:label="$t('process.processDefinitionVersion')"
header-align="center"
align="center"
width="100"
></el-table-column>
<el-table-column
prop="startTime"
:label="$t('process.startTime')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="endTime"
:label="$t('process.endTime')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="showDetail(scope.row)"
>{{ $t('process.viewFlowImage') }}</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import processModule from '@/mixins/process-module'
import qs from 'qs'
export default {
mixins: [mixinViewModule, processModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/act/his/getMyHandledInstancePage',
getDataListIsPage: true,
deleteIsBatch: true,
deleteIsBatchKey: 'deploymentId'
},
dataForm: {
processDefinitionId: '',
processDefinitionKey: 'abilityprocess_v2'
}
}
},
components: {},
methods: {
showDetail (row) {
if (!row.businessKey) {
return this.$message.error(this.$t('task.detailError'))
}
this.getProcDefRouteSet(row, this.forwardDetail)
}
}
}
</script>

170
back/src/views/modules/myAgent/AbilityResourceShelf.vue Normal file
View File

@ -0,0 +1,170 @@
<!--
* @Author: hisense.liangjunhua
* @Date: 2022-06-27 11:27:22
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-29 16:31:26
* @Description: "能力资源上架"
-->
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-activiti__process">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<el-input
v-model="dataForm.taskName"
:placeholder="$t('process.name')"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getDataList()">{{
$t('query')
}}</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
@sort-change="dataListSortChangeHandle"
style="width: 100%"
>
<el-table-column
type="selection"
header-align="center"
align="center"
width="50"
></el-table-column>
<el-table-column label="申请人" header-align="center" align="center">
<template slot-scope="scope">
<span>{{
(scope.row.params && scope.row.params.user) ||
(scope.row.params && scope.row.params.applyUserName) ||
(scope.row.params && scope.row.params.userName) ||
(scope.row.params && scope.row.params.undercarriageUserName) ||
(scope.row.params && scope.row.params.name)
}}</span>
</template>
</el-table-column>
<el-table-column
:label="$t('process.system')"
header-align="center"
align="center"
>
<template slot-scope="scope">
<span>{{
(scope.row.params && scope.row.params.system) ||
(scope.row.params && scope.row.params.demandSubject) ||
(scope.row.params &&
scope.row.params.resourceDTO &&
scope.row.params.resourceDTO.name) ||
(scope.row.params && scope.row.params.undercarriageReason) ||
(scope.row.params && scope.row.params.comment)
}}</span>
</template>
</el-table-column>
<!-- <el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column>
<el-table-column prop="processInstanceId" :label="$t('running.id')" header-align="center" align="center"></el-table-column> -->
<el-table-column
prop="processDefinitionName"
:label="$t('process.processDefinitionName')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="taskName"
:label="$t('process.taskName')"
header-align="center"
align="center"
></el-table-column>
<!-- <el-table-column prop="startTime" :label="$t('process.startTime')" header-align="center" align="center"></el-table-column> -->
<el-table-column
prop="createTime"
:label="$t('process.createTime')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
:processInstanceId="processInstanceId"
@click="taskHandle(scope.row)"
>{{ $t('manage') }}</el-button
>
<el-button
type="text"
size="small"
@click="taskDetail(scope.row)"
>{{ $t('process.viewFlowImage') }}</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import processModule from '@/mixins/process-module'
export default {
mixins: [mixinViewModule, processModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/act/task/myToDoTaskPage',
getDataListIsPage: true,
activatedIsNeed: true,
deleteIsBatch: true,
deleteIsBatchKey: 'deploymentId'
},
dataForm: {
taskName: '',
taskId: '',
processDefinitionKey: 'resourcemountapply'
},
processInstanceId: ''
}
},
components: {},
methods: {
// 处理
taskHandle (row) {
console.log('row======================>', row, this.forwardHandleUrl)
if (!row.businessKey) {
return this.$message.error(this.$t('task.businessKeyError'))
}
this.getProcDefRouteSet(row, this.forwardHandleUrl)
},
taskDetail (row) {
if (!row.businessKey) {
return this.$message.error(this.$t('task.detailError'))
}
this.getProcDefRouteSet(row, this.forwardTaskDetail)
}
}
}
</script>

170
back/src/views/modules/myAgent/AbilityResourcesRemoved.vue Normal file
View File

@ -0,0 +1,170 @@
<!--
* @Author: hisense.liangjunhua
* @Date: 2022-06-27 11:27:22
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-29 16:31:26
* @Description: "能力资源下架"
-->
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-activiti__process">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<el-input
v-model="dataForm.taskName"
:placeholder="$t('process.name')"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getDataList()">{{
$t('query')
}}</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
@sort-change="dataListSortChangeHandle"
style="width: 100%"
>
<el-table-column
type="selection"
header-align="center"
align="center"
width="50"
></el-table-column>
<el-table-column label="申请人" header-align="center" align="center">
<template slot-scope="scope">
<span>{{
(scope.row.params && scope.row.params.user) ||
(scope.row.params && scope.row.params.applyUserName) ||
(scope.row.params && scope.row.params.userName) ||
(scope.row.params && scope.row.params.undercarriageUserName) ||
(scope.row.params && scope.row.params.name)
}}</span>
</template>
</el-table-column>
<el-table-column
:label="$t('process.system')"
header-align="center"
align="center"
>
<template slot-scope="scope">
<span>{{
(scope.row.params && scope.row.params.system) ||
(scope.row.params && scope.row.params.demandSubject) ||
(scope.row.params &&
scope.row.params.resourceDTO &&
scope.row.params.resourceDTO.name) ||
(scope.row.params && scope.row.params.undercarriageReason) ||
(scope.row.params && scope.row.params.comment)
}}</span>
</template>
</el-table-column>
<!-- <el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column>
<el-table-column prop="processInstanceId" :label="$t('running.id')" header-align="center" align="center"></el-table-column> -->
<el-table-column
prop="processDefinitionName"
:label="$t('process.processDefinitionName')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="taskName"
:label="$t('process.taskName')"
header-align="center"
align="center"
></el-table-column>
<!-- <el-table-column prop="startTime" :label="$t('process.startTime')" header-align="center" align="center"></el-table-column> -->
<el-table-column
prop="createTime"
:label="$t('process.createTime')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
:processInstanceId="processInstanceId"
@click="taskHandle(scope.row)"
>{{ $t('manage') }}</el-button
>
<el-button
type="text"
size="small"
@click="taskDetail(scope.row)"
>{{ $t('process.viewFlowImage') }}</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import processModule from '@/mixins/process-module'
export default {
mixins: [mixinViewModule, processModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/act/task/myToDoTaskPage',
getDataListIsPage: true,
activatedIsNeed: true,
deleteIsBatch: true,
deleteIsBatchKey: 'deploymentId'
},
dataForm: {
taskName: '',
taskId: '',
processDefinitionKey: 'resourcundercarriageapply'
},
processInstanceId: ''
}
},
components: {},
methods: {
// 处理
taskHandle (row) {
console.log('row======================>', row, this.forwardHandleUrl)
if (!row.businessKey) {
return this.$message.error(this.$t('task.businessKeyError'))
}
this.getProcDefRouteSet(row, this.forwardHandleUrl)
},
taskDetail (row) {
if (!row.businessKey) {
return this.$message.error(this.$t('task.detailError'))
}
this.getProcDefRouteSet(row, this.forwardTaskDetail)
}
}
}
</script>

170
back/src/views/modules/myAgent/ApplicationforCompetencyRequirements.vue Normal file
View File

@ -0,0 +1,170 @@
<!--
* @Author: hisense.liangjunhua
* @Date: 2022-06-27 11:27:22
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-29 16:31:26
* @Description: "能力需求申请"
-->
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-activiti__process">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<el-input
v-model="dataForm.taskName"
:placeholder="$t('process.name')"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getDataList()">{{
$t('query')
}}</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
@sort-change="dataListSortChangeHandle"
style="width: 100%"
>
<el-table-column
type="selection"
header-align="center"
align="center"
width="50"
></el-table-column>
<el-table-column label="申请人" header-align="center" align="center">
<template slot-scope="scope">
<span>{{
(scope.row.params && scope.row.params.user) ||
(scope.row.params && scope.row.params.applyUserName) ||
(scope.row.params && scope.row.params.userName) ||
(scope.row.params && scope.row.params.undercarriageUserName) ||
(scope.row.params && scope.row.params.name)
}}</span>
</template>
</el-table-column>
<el-table-column
:label="$t('process.system')"
header-align="center"
align="center"
>
<template slot-scope="scope">
<span>{{
(scope.row.params && scope.row.params.system) ||
(scope.row.params && scope.row.params.demandSubject) ||
(scope.row.params &&
scope.row.params.resourceDTO &&
scope.row.params.resourceDTO.name) ||
(scope.row.params && scope.row.params.undercarriageReason) ||
(scope.row.params && scope.row.params.comment)
}}</span>
</template>
</el-table-column>
<!-- <el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column>
<el-table-column prop="processInstanceId" :label="$t('running.id')" header-align="center" align="center"></el-table-column> -->
<el-table-column
prop="processDefinitionName"
:label="$t('process.processDefinitionName')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="taskName"
:label="$t('process.taskName')"
header-align="center"
align="center"
></el-table-column>
<!-- <el-table-column prop="startTime" :label="$t('process.startTime')" header-align="center" align="center"></el-table-column> -->
<el-table-column
prop="createTime"
:label="$t('process.createTime')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
:processInstanceId="processInstanceId"
@click="taskHandle(scope.row)"
>{{ $t('manage') }}</el-button
>
<el-button
type="text"
size="small"
@click="taskDetail(scope.row)"
>{{ $t('process.viewFlowImage') }}</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import processModule from '@/mixins/process-module'
export default {
mixins: [mixinViewModule, processModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/act/task/myToDoTaskPage',
getDataListIsPage: true,
activatedIsNeed: true,
deleteIsBatch: true,
deleteIsBatchKey: 'deploymentId'
},
dataForm: {
taskName: '',
taskId: '',
processDefinitionKey: 'abilitydemandapply'
},
processInstanceId: ''
}
},
components: {},
methods: {
// 处理
taskHandle (row) {
console.log('row======================>', row, this.forwardHandleUrl)
if (!row.businessKey) {
return this.$message.error(this.$t('task.businessKeyError'))
}
this.getProcDefRouteSet(row, this.forwardHandleUrl)
},
taskDetail (row) {
if (!row.businessKey) {
return this.$message.error(this.$t('task.detailError'))
}
this.getProcDefRouteSet(row, this.forwardTaskDetail)
}
}
}
</script>

170
back/src/views/modules/myAgent/CommentModeration.vue Normal file
View File

@ -0,0 +1,170 @@
<!--
* @Author: hisense.liangjunhua
* @Date: 2022-06-27 11:27:22
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-29 16:31:26
* @Description: "评论审核"
-->
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-activiti__process">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<el-input
v-model="dataForm.taskName"
:placeholder="$t('process.name')"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getDataList()">{{
$t('query')
}}</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
@sort-change="dataListSortChangeHandle"
style="width: 100%"
>
<el-table-column
type="selection"
header-align="center"
align="center"
width="50"
></el-table-column>
<el-table-column label="申请人" header-align="center" align="center">
<template slot-scope="scope">
<span>{{
(scope.row.params && scope.row.params.user) ||
(scope.row.params && scope.row.params.applyUserName) ||
(scope.row.params && scope.row.params.userName) ||
(scope.row.params && scope.row.params.undercarriageUserName) ||
(scope.row.params && scope.row.params.name)
}}</span>
</template>
</el-table-column>
<el-table-column
:label="$t('process.system')"
header-align="center"
align="center"
>
<template slot-scope="scope">
<span>{{
(scope.row.params && scope.row.params.system) ||
(scope.row.params && scope.row.params.demandSubject) ||
(scope.row.params &&
scope.row.params.resourceDTO &&
scope.row.params.resourceDTO.name) ||
(scope.row.params && scope.row.params.undercarriageReason) ||
(scope.row.params && scope.row.params.comment)
}}</span>
</template>
</el-table-column>
<!-- <el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column>
<el-table-column prop="processInstanceId" :label="$t('running.id')" header-align="center" align="center"></el-table-column> -->
<el-table-column
prop="processDefinitionName"
:label="$t('process.processDefinitionName')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="taskName"
:label="$t('process.taskName')"
header-align="center"
align="center"
></el-table-column>
<!-- <el-table-column prop="startTime" :label="$t('process.startTime')" header-align="center" align="center"></el-table-column> -->
<el-table-column
prop="createTime"
:label="$t('process.createTime')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
:processInstanceId="processInstanceId"
@click="taskHandle(scope.row)"
>{{ $t('manage') }}</el-button
>
<el-button
type="text"
size="small"
@click="taskDetail(scope.row)"
>{{ $t('process.viewFlowImage') }}</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import processModule from '@/mixins/process-module'
export default {
mixins: [mixinViewModule, processModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/act/task/myToDoTaskPage',
getDataListIsPage: true,
activatedIsNeed: true,
deleteIsBatch: true,
deleteIsBatchKey: 'deploymentId'
},
dataForm: {
taskName: '',
taskId: '',
processDefinitionKey: 'comment_review'
},
processInstanceId: ''
}
},
components: {},
methods: {
// 处理
taskHandle (row) {
console.log('row======================>', row, this.forwardHandleUrl)
if (!row.businessKey) {
return this.$message.error(this.$t('task.businessKeyError'))
}
this.getProcDefRouteSet(row, this.forwardHandleUrl)
},
taskDetail (row) {
if (!row.businessKey) {
return this.$message.error(this.$t('task.detailError'))
}
this.getProcDefRouteSet(row, this.forwardTaskDetail)
}
}
}
</script>

273
back/src/views/modules/myAgent/demo/ability-resource-shelf.vue Normal file
View File

@ -0,0 +1,273 @@
<template>
<div class="wrapper">
<div>
<el-form
:model="dataForm"
ref="dataForm"
@keyup.enter.native="dataFormSubmitHandle()"
:label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'"
>
<div v-if="shifoushizujian">
<el-form-item label="应用名称">
<el-input
v-model="dataForm.name"
:disabled="fieldDisabled"
placeholder="应用名称"
></el-input>
</el-form-item>
<el-form-item label="应用描述">
<el-tooltip
effect="dark"
:content="dataForm.description"
placement="top"
popper-class="kuandukuandukuandu"
>
<el-input
v-model="dataForm.description"
:disabled="fieldDisabled"
placeholder="应用描述"
></el-input>
</el-tooltip>
</el-form-item>
<el-form-item label="部门联系人">
<el-input
v-model="dataForm.deptContacts"
:disabled="fieldDisabled"
placeholder="部门联系人"
></el-input>
</el-form-item>
<el-form-item label="共享类型">
<el-input
v-model="dataForm.shareType"
:disabled="fieldDisabled"
placeholder="共享类型"
></el-input>
</el-form-item>
<el-form-item label="共享方式">
<el-input
v-model="dataForm.shareMode"
:disabled="fieldDisabled"
placeholder="共享方式"
></el-input>
</el-form-item>
<el-form-item label="共享条件">
<el-input
v-model="dataForm.shareCondition"
:disabled="fieldDisabled"
placeholder="共享方条件"
></el-input>
</el-form-item>
<el-form-item label="访问地址">
<el-input
v-model="dataForm.link"
:disabled="fieldDisabled"
placeholder="访问地址"
></el-input>
</el-form-item>
</div>
<div v-if="!shifoushizujian">
<el-form-item label="组件名称" v-if="algorithmShow">
<el-input
v-model="dataForm.name"
:disabled="fieldDisabled"
placeholder="组件名称"
></el-input>
</el-form-item>
<el-form-item label="算法名称" v-if="nameNotShow">
<el-input
v-model="dataForm.name"
:disabled="fieldDisabled"
placeholder="算法名称"
></el-input>
</el-form-item>
<el-form-item label="应用描述" v-if="algorithmShow">
<el-input
v-model="dataForm.description"
:disabled="fieldDisabled"
placeholder="应用描述"
></el-input>
</el-form-item>
<el-form-item label="算法描述" v-if="nameNotShow">
<el-input
v-model="dataForm.description"
:disabled="fieldDisabled"
placeholder="算法描述"
></el-input>
</el-form-item>
<el-form-item label="部门联系人" v-if="algorithmShow">
<el-input
v-model="dataForm.deptContacts"
:disabled="fieldDisabled"
placeholder="部门联系人"
></el-input>
</el-form-item>
<el-form-item label="共享类型">
<el-input
v-model="dataForm.shareType"
:disabled="fieldDisabled"
placeholder="共享类型"
></el-input>
</el-form-item>
<el-form-item
label="共享方式"
v-if="coverageNotShow && algorithmShow"
>
<el-input
v-model="dataForm.shareMode"
:disabled="fieldDisabled"
placeholder="共享方式"
></el-input>
</el-form-item>
<el-form-item label="共享条件">
<el-input
v-model="dataForm.shareCondition"
:disabled="fieldDisabled"
placeholder="共享方条件"
></el-input>
</el-form-item>
<el-form-item label="服务接口" v-if="coverageNotShow">
<el-input
v-model="dataForm.apiUrl"
:disabled="fieldDisabled"
placeholder="服务接口"
></el-input>
</el-form-item>
<el-form-item label="接口请求方式" v-if="coverageNotShow">
<el-input
v-model="dataForm.apiMethodType"
:disabled="fieldDisabled"
placeholder="接口请求方式"
></el-input>
</el-form-item>
</div>
<el-form-item
v-for="item in dataForm.infoList"
:key="item.index"
:label="item.attrType"
:disabled="fieldDisabled"
>
<el-input
v-model="item.attrValue"
:placeholder="item.attrType"
:disabled="fieldDisabled"
></el-input>
</el-form-item>
<el-form-item
v-if="dataForm.enclosure"
label="申请附件"
prop="enclosure"
>
<el-button @click="downloadFile(dataForm.enclosure, '申请附件')"
>附件下载</el-button
>
</el-form-item>
</el-form>
</div>
<!-- 流程综合组件 -->
<ren-process-multiple
v-if="processVisible"
updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
saveFormUrl="/processForm/tabilityapplication"
dataFormName="dataForm"
ref="renProcessMultiple"
></ren-process-multiple>
</div>
</template>
<script>
import processModule from '@/mixins/process-module'
export default {
// 注入公共方法
mixins: [processModule],
components: {},
props: {
// fromList: {
// // type: Array,
// // default: () => {
// // return []
// // }
// }
},
data () {
return {
// processVisible: true,
visible: false,
// 表单属性是否可编辑
fieldDisabled: false,
dataForm: [],
id: '',
shifoushizujian: true,
coverageNotShow: true,
nameNotShow: false,
algorithmShow: true
}
},
watch: {},
computed: {},
methods: {
init () {
this.visible = true
// this.getInfo(this.$router.currentRoute.params.params.params.resourceDTO.id)
// this.dataForm = this.$router.currentRoute.params.params.params.resourceDTO
// this.id=this.$router.currentRoute
this.$nextTick(() => {
this.$refs.dataForm.resetFields()
// if (this.dataForm.id) {
// 如业务KEY已存在，不允许编辑
this.fieldDisabled = true
// this.id = this.$router.currentRoute.businessKey
this.getInfo(this.$router.currentRoute.params.businessKey)
console.log('id', this.$router.currentRoute.params.businessKey)
// }
})
},
getInfo (id) {
this.$http.get('/resourceMountApply/' + id).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = res.data.resourceDTO
if (this.dataForm.type != '应用资源') {
this.shifoushizujian = false
this.dataForm.infoList.forEach((val) => {
if (val.attrValue === '图层服务') {
this.coverageNotShow = false
} else if (val.attrValue === '智能算法') {
this.nameNotShow = true
this.algorithmShow = false
console.log(this.nameNotShow, 'wowowo')
}
})
} else {
this.shifoushizujian = true
}
console.log('this.dataForm', this.dataForm)
})
}
},
created () {
// this.dataForm = this.$router.currentRoute.params.id
this.init()
console.log('fromList', this.$router.currentRoute.params.businessKey)
// this.dataForm = this.$router.currentRoute.params.params.params.resourceDTO
var callbacks = {
startProcessSuccessCallback: this.closeCurrentTab,
startProcessErrorCallback: this.startProcessErrorCallback,
taskHandleSuccessCallback: this.closeCurrentTab,
taskHandleErrorCallback: this.taskHandleErrorCallback,
formSaveSuccessCallback: null,
formSaveErrorCallback: null
}
// 初始化综合组件
this.initProcessMultiple(callbacks)
},
mounted () {}
}
</script>
<style lang="scss">
.kuandukuandukuandu {
max-width: 1500px;
}
.wrapper {
}
</style>

3
back/src/views/modules/myAgent/demo/competency-application.vue
View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-29 15:59:51 * @Date: 2022-06-29 15:59:51
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-01 09:29:57 * @LastEditTime: 2022-07-04 16:17:22
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
--> -->
<!-- 流程业务表单 --> <!-- 流程业务表单 -->
@ -157,6 +157,7 @@ export default {
}) })
}, },
downloadFile2 (url) { downloadFile2 (url) {
console.log(window.SITE_CONFIG.previewUrl)
window.open( window.open(
window.SITE_CONFIG.previewUrl + window.SITE_CONFIG.previewUrl +
'hisense_office/onlinePreview?url=' + 'hisense_office/onlinePreview?url=' +

179
back/src/views/modules/putOnTheShelf/components/inputSelectCheckbox.vue Normal file
View File

@ -0,0 +1,179 @@
<!--
*传参示例
html:
<input-select-checkbox
:type="typeSon"
:name="nameSon"
:value="valueSon"
:options="optionSon">
</input-select-checkbox>
js:
this.typeSon = 'select'//类型
this.nameSon = '算法描述'//名称
this.valueSon = '这是一个描述'//内容
this.optionSon = ['1', '2', '3']//选项
-->
<template>
<div id="inputSelectCheckbox">
<!-- input框 -->
<a-input v-if="type == 'input'" v-model:value="data.note1" :placeholder="'请输入' + name" />
<!-- 下拉框 -->
<el-select
v-else-if="type === 'select' || type == 'radio'"
style="width: 240px"
v-model:value="data.note1"
:placeholder="'请选择' + name">
<el-option
:value="itemSelect.dictLabel"
v-for="(itemSelect, indexSelect) in options"
:key="indexSelect">
{{ itemSelect.dictLabel }}
</el-option>
</el-select>
<!-- 多选 -->
<div
v-else-if="type === 'checkBox'"
>
<el-checkbox-group v-model="valueCheckBox" @change='chekBoxChange'>
<el-checkbox-button v-for="val in options" :label="val.dictLabel" :key="val.dictLabel">{{val.dictLabel}}</el-checkbox-button>
</el-checkbox-group>
</div>
<!-- 不可点的input框 -->
<el-input
v-else-if="type === 'disabled'"
v-model="value"
:placeholder="'请输入' + name"
:disabled="true"
/>
<!-- 单选 -->
<!-- <el-radio-group v-model:value="data.note1" v-else-if="type == 'radio'">
<el-radio v-for="item in options" :label="item.dictLabel" :key="item.dictLabel">{{item.dictLabel}}</el-radio>
</el-radio-group> -->
<a-textarea v-else-if="type == 'textArea'" v-model:value="data.note1" :showCount="true" :maxlength="200" :placeholder="'请填写' + name" />
</div>
</template>
<script>
export default {
name: 'inputSelectCheckbox',
components: {
},
props: {
type: String,
data: Array,
name: String,
value: String,
options: {
type: Array,
default: null
}
},
data () {
return {
// 多选放数据的数组
valueCheckBox: [],
// 单选数据
regionSelect: '',
showKey: 0
}
},
methods: {
selectOptions () {
if (this.data.isLinkToDic === 'true' && this.data.linkValue) {
this.$http
.get(`/sys/dict/data/page?page=1&limit=20&dictTypeId=${this.data.linkValue}&deFlage=0`).then(({ data: res }) => {
console.log(res, 'res')
const dataList = []
res.data.list.forEach((element) => {
dataList.push(element)
console.log(dataList, 'this.options')
})
this.options = dataList
console.log(this.options)
})
.catch(() => {})
}
},
chekBoxChange (list) {
let str = ''
list.map((val, index) => {
str += val
if (index < list.length - 1) {
str += ';'
}
})
// console.log(str)
this.data.note1 = str
}
},
mounted () {
this.selectOptions()
}
}
</script>
<style lang='scss' scoped>
#inputSelectCheckbox {
// margin-top: 20px;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
span:first-child {
display: block;
width: 120px;
}
::v-deep .el-select {
.el-input__inner {
resize: none;
width: 240px;
}
}
::v-deep .ant-input {
width: 100%;
}
::v-deep .el-input__inner {
resize: none;
width: 100%;
}
::v-deep .el-textarea {
width: 100%;
}
::v-deep .el-textarea__inner {
width: 100%;
height: 76px;
min-height: 32px;
resize: none;
}
::v-deep .el-input__count {
bottom: -20px;
right: 5px;
}
::v-deep .el-checkbox-group {
width: 100%;
display: grid;
margin-top: -5px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
::v-deep .el-checkbox-button__inner {
cursor: pointer;
font-size: 14px;
width: 90px;
height: 26px;
border-radius: 13px;
color: #333333;
background: #f5f5f5;
border: 1px #cccccc solid;
display: flex;
justify-content: center;
align-items: center;
margin: 10px 5px 0;
font-weight: 500;
}
::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner {
background: #0087ff;
color: #fff;
box-shadow: unset;
}
}
</style>

311
back/src/views/modules/putOnTheShelf/components/special.vue Normal file
View File

@ -0,0 +1,311 @@
<!--
* @Author: hisense.liangjunhua
* @Date: 2022-07-08 09:54:50
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-09 10:54:48
* @Description: 多条数据特殊处理
-->
<template>
<div class="special">
<div class="top">{{configure.name}}</div>
<div class="bottom">
<div class="items" v-show="data.length > 0">
<div class="item" v-for="(val, index) in data" :key="'key1' + val.name + index">
<p>
<span>{{ configure.name }}-{{ index + 1 }}</span>
<span></span>
</p>
<p v-for="(attr,index2) in configure.list" :key="'key2' + attr.name + index2">
<span>{{ attr.name }}</span>
<span v-if="attr.type === 'image'">
<!-- <a-image :width="85" :height="60" :src="val.img" /> -->
<el-image
style="width: 85px; height: 60px"
:src="val.img"
:preview-src-list="[val.img]">
</el-image>
</span>
<span v-else>{{ val[attr.field] + (attr.company || '') }}</span>
</p>
<div class="del">
<i class="delImg" @click="del( index)"></i>
<div @click="del(configure.name, index)">删除</div>
</div>
</div>
</div>
<div class="add">添加更多{{ configure.name }}</div>
<div class="form" v-for="(val, index) in configure.list" :key="'key3' + val.name + index">
<span>{{ val.name }}</span>
<a-input v-model:value="val.note1" :maxlength="24" :placeholder="'请填写' + val.name + ',不超过24个字符'"
v-if="val.type == 'input'"/>
<a-textarea v-model:value="val.note1" :showCount="true" :maxlength="200" :placeholder="'请填写' + val.name"
v-else-if="val.type == 'textArea'"/>
<a-input-number v-model:value="val.note1" :min="0" :max="9999" :step="0.01" string-mode
:placeholder="'请填写' + val.name" v-else-if="val.type == 'number'" />
<a-radio-group v-model:value="val.note1" :options="val.options" v-else-if="val.type == 'radio'" />
<!-- <upload :key="showKey" type="图片" btnName="上传图片" :maxCount="1" :data="val" :list="[]" tip="支持图片类型，大小不超过100M"
v-else-if="val.type == 'image'"></upload> -->
<upload :key="showKey" :child='val' limit='1' accept='.jpg,.png' v-else-if="val.type == 'image'"></upload>
</div>
<div class="submit">
<a-button type="primary" @click="add(configure.name)">提交</a-button>
</div>
</div>
</div>
</template>
<script>
import upload from '@/views/modules/ability/upload.vue'
// import upload from '@/views/modules/components/upload'
export default {
name: '',
components: {
upload
},
props: {
configure: Object
},
data () {
return {
data: [],
showKey: 0
}
},
methods: {
add (title) {
const list = this.configure.list
let flag = true
list.forEach((item) => {
console.log(item)
if (item.type !== 'number' && !item.note1.length > 0) {
flag = false
} else if (item.type === 'number' && !item.note1 > 0) {
flag = false
}
})
if (flag) {
const obj = {}
list.forEach((item) => {
obj[item.field] = item.note1
})
this.data.push(obj)
// console.log(data.value[title])
this.$emit('changeInfoList', {
attrType: title,
attrValue: JSON.stringify(this.data),
delFlag: 0
})
list.forEach((item) => {
item.note1 = ''
})
this.showKey++
} else {
this.$message.warning('请填写完整')
}
},
del (title, index) {
this.data.splice(index, 1)
this.$emit('changeInfoList', {
attrType: title,
attrValue: JSON.stringify(this.data),
delFlag: 0
})
}
}
}
</script>
<style lang='scss' scoped>
.top {
color: #333333;
font-size: 22px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 25px;
div:first-child,
div:last-child {
width: 245px;
height: 1px;
background: #f0f0f0;
}
div:nth-child(2) {
margin: 0 30px;
}
}
.bottom {
margin-top: 25px;
margin-bottom: 25px;
.items {
background: #fafafa;
padding: 10px;
p {
display: flex;
justify-content: space-between;
span:nth-of-type(1) {
width: 200px;
}
span:nth-of-type(2) {
width: 100%;
font-weight: 600;
}
}
p:nth-of-type(1) > span:nth-of-type(1) {
font-size: 18px;
font-weight: 600;
}
.del {
display: flex;
justify-content: flex-end;
align-items: center;
.delImg {
cursor: pointer;
display: inline-block;
width: 16px;
height: 18px;
background: url(~@/assets/img/putOnTheShelf/del.png) no-repeat;
margin-right: 5px;
}
div {
cursor: pointer;
}
}
}
.add {
margin-top: 10px;
font-size: 16px;
color: #007efb;
}
.form {
margin-top: 20px;
display: flex;
align-items: center;
span:first-child {
width: 120px;
}
:deep(.ant-input-textarea) {
width: 570px;
}
:deep(.ant-radio-group) {
width: 570px;
}
:deep(.ant-input-number) {
width: 200px;
}
:deep(.ant-input) {
resize: none;
width: 570px;
}
.ant-btn {
width: 160px;
height: 32px;
text-align: center;
background: #edf4fc;
color: #0087ff;
border: 1px solid #bbd3ef;
border-radius: 6px;
}
}
.submit {
margin-top: 40px;
display: flex;
justify-content: flex-end;
.ant-btn {
width: 80px;
height: 28px;
text-align: center;
background: #d9ebff;
color: #0087ff;
border: 1px solid #0087ff;
border-radius: 6px;
}
}
}
::v-deep .el-image__preview {
width: 100%;
height: 100%;
object-fit: contain;
}
::v-deep .ant-modal {
width: 960px;
}
::v-deep .ant-transfer-list {
width: 39.5%;
height: 520px;
}
::v-deep .ant-transfer-operation {
flex-direction: row-reverse;
margin: 0 30px;
}
::v-deep .ant-btn {
// width: 56px;
// height: 40px;
border-radius: 4px;
}
::v-deep .ant-btn:first-child {
margin-left: 4px;
}
::v-deep .ant-modal-footer {
border: 0;
}
::v-deep .ant-modal-header {
border: 0;
}
::v-deep .ant-modal-title {
line-height: 24px;
font-size: 18px;
color: #303133;
}
::v-deep .ant-transfer-list-header {
background: #f5f7fa;
}
::v-deep .ant-transfer-list-header-selected {
display: flex;
width: 90%;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
::v-deep .ant-input-number {
width: 200px;
}
::v-deep .ant-transfer-list-header-title {
font-size: 16px;
color: #303133;
font-weight: 400;
text-align: left;
}
textarea {
height: 100px;
resize: none;
font-size: 14px;
}
</style>

213
back/src/views/modules/putOnTheShelf/index.vue Normal file
View File

@ -0,0 +1,213 @@
<!--
* @Author: hisense.liangjunhua
* @Date: 2022-07-08 09:48:52
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-09 10:57:07
* @Description: 告诉大家这是什么
-->
<template>
<div class="put-on-the-shelf">
<div v-for="parent in putOnTheShelfList" :key='parent.id'>
<div v-for='child in parent.children' :key='child.id'>
<template v-if='judgmentType.filter(item => item.name==child.name).length === 0'>
<div class="top">{{child.name}}</div>
<div v-for="item in child.children" :key="item.id" class='item'>
<span v-if="item.name != '来源应用'">{{ item.name }}</span>
<upload :list="[]" v-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1" :data="item"
tip="支持图片类型，大小不超过100M"></upload>
<upload @changeInfoList='changeInfoList' :title='item.name' accept='.pdf,.ppt,.xlsx,.doc,.docx' :list="[]" v-else-if="item.type == 'file' && item.name !== '使用手册'" type="文件" btnName="上传附件" :maxCount="1"
:dataList="item" tip="支持文件类型，大小不超过100M"></upload>
<upload @changeInfoList='changeInfoList' :title='item.name' accept='.pdf,.ppt,.xlsx,.doc,.docx' :list="[]" v-else-if="item.name == '使用手册'" type="文件" btnName="上传附件" :maxCount="1" :dataList="item" :busType="2"
tip="支持文件类型，大小不超过100M"></upload>
<upload @changeInfoList='changeInfoList' :title='item.name' accept='.mp4' :list="[]" v-else-if="item.type == 'video'" type="视频" btnName="上传视频" :maxCount="1" :dataList="item"
tip="支持视频类型，大小不超过100M"></upload>
<input-select-checkbox :list="[]" v-else-if="item.type == 'text'" type="disabled" :data="item" :name="item.name" value="组件服务"></input-select-checkbox>
<input-select-checkbox :list="[]" v-else-if="item.type == 'text2'" type="disabled" :data="item" :name="item.name" :value="type"></input-select-checkbox>
<input-select-checkbox :list="[]" v-else-if="item.type == 'input'" type="input" :data="item" :name="item.name"></input-select-checkbox>
<input-select-checkbox :list="[]" v-else-if="item.type == 'select'" type="select" :data="item" :name="item.name" :options="item.options"></input-select-checkbox>
<input-select-checkbox :list="[]" v-else-if="item.type == 'checkBox'" type="checkBox" :data="item" :name="item.name" :options="item.options"></input-select-checkbox>
<input-select-checkbox :list="[]" v-else-if="item.type == 'radio'" type="radio" :data="item" :name="item.name" :options="item.options"></input-select-checkbox>
<input-select-checkbox :list="[]" v-else-if="item.type == 'textArea'" type="textArea" :data="item" :name="item.name"></input-select-checkbox>
</div>
</template>
<template v-else>
<special :configure='judgmentType.filter(item => item.name==child.name)[0]' @changeInfoList='changeInfoList'></special>
</template>
</div>
</div>
</div>
</template>
<script>
import inputSelectCheckbox from './components/inputSelectCheckbox'
import special from './components/special'
import upload from '@/views/modules/components/upload'
export default {
name: '',
components: {
special,
upload,
inputSelectCheckbox
},
props: {
type: String,
putOnTheShelfList: Array
},
data () {
return {
judgmentType: [
{
name: '算法优势',
list: [
{
name: '算法优势名称',
field: 'name',
type: 'input',
note1: ''
},
{
name: '算法优势描述',
field: 'desc',
type: 'textArea',
note1: ''
}
]
},
{
name: '应用场景',
list: [
{
name: '应用场景名称',
field: 'name',
type: 'input',
note1: ''
},
{
name: '应用场景描述',
field: 'desc',
type: 'textArea',
note1: ''
},
{
name: '应用场景图片',
field: 'img',
type: 'image',
note1: ''
}
]
},
{
name: '计费标准信息',
list: [
{
name: '计费方式',
field: 'type',
type: 'radio',
options: ['一次性买断', '按调用次数', '按并发路数', '按年计费'],
note1: ''
},
{
name: '计费标准',
field: 'price',
type: 'number',
company: '元',
note1: ''
},
{
name: '计费标准描述',
field: 'desc',
type: 'textArea',
note1: ''
}
]
},
{
name: '常见问题',
list: [
{
name: '问题',
field: 'question',
type: 'textArea',
note1: ''
},
{
name: '答复',
field: 'answer',
type: 'textArea',
note1: ''
}
]
},
{
name: '功能介绍',
list: [
{
name: '功能名称',
field: 'name',
type: 'input',
note1: ''
},
{
name: '功能描述',
field: 'desc',
type: 'textArea',
note1: ''
},
{
name: '功能图片',
field: 'img',
type: 'image',
note1: ''
}
]
}
]
}
},
methods: {
changeInfoList (obj) {
this.$emit('changeInfoList', obj)
},
goToRichText () {
}
}
}
</script>
<style lang='scss' scoped>
.put-on-the-shelf {
height: 500px;
padding: 0 50px;
overflow-y: scroll;
}
.put-on-the-shelf::-webkit-scrollbar {
width: 0;
}
.top {
color: #333333;
font-size: 22px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 25px;
div:first-child,
div:last-child {
width: 245px;
height: 1px;
background: #f0f0f0;
}
div:nth-child(2) {
margin: 0 30px;
}
}
.item {
display: flex;
align-items: center;
margin: 25px 0;
& > span:nth-of-type(1) {
width: 105px;
}
}
</style>

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

@ -28,108 +28,108 @@
</div> </div>
</template> </template>
<script> <script>
import contentTitle from "./content-title"; import contentTitle from './content-title'
import * as Apis from '../api'; import * as Apis from '../api'
export default { export default {
components: { components: {
contentTitle contentTitle
}, },
data() { data () {
return { return {
title: { dynamic: "部门发布动态", recommend: "部门推荐能力" }, title: { dynamic: '部门发布动态', recommend: '部门推荐能力' },
list: [], list: [],
columns: [ columns: [
{ {
title: "名称", title: '名称',
key: "name", key: 'name',
dataIndex: "name", dataIndex: 'name',
width: 250 width: 250
}, },
{ {
title: "类型", title: '类型',
key: "type", key: 'type',
dataIndex: "type", dataIndex: 'type',
width: 76 width: 76
}, },
{ {
title: "单位", title: '单位',
key: "deptContacts", key: 'deptContacts',
dataIndex: "deptContacts", dataIndex: 'deptContacts',
width: 144 width: 144
}, },
{ {
title: "时间", title: '时间',
key: "createDate", key: 'createDate',
dataIndex: "createDate", dataIndex: 'createDate',
width: 153 width: 153
}, },
{ {
title: "当前申请数", title: '当前申请数',
key: "applyCount", key: 'applyCount',
dataIndex: "applyCount", dataIndex: 'applyCount',
width: 145 width: 145
}, }
], ],
tableData: [], tableData: [],
maxSize: { y: 195 }, maxSize: { y: 195 },
loadingDynamic: false, loadingDynamic: false,
loadingTable: false, loadingTable: false
}; }
}, },
mounted() { mounted () {
this.getResourceByDept(); this.getResourceByDept()
this.getApplyByDept() this.getApplyByDept()
}, },
methods: { methods: {
// 发布动态 // 发布动态
getResourceByDept() { getResourceByDept () {
let data = { const data = {
limit: 5, limit: 5,
page: 1 page: 1
}; }
this.loadingDynamic = true; this.loadingDynamic = true
Apis.getResourceByDept( Apis.getResourceByDept(
data, data,
res => { res => {
this.loadingDynamic = false; this.loadingDynamic = false
if (res.data.code !== 0) { if (res.data.code !== 0) {
return this.$message.error(res.data.msg) return this.$message.error(res.data.msg)
} }
console.log('res.data----发布动态-------->', res.data); console.log('res.data----发布动态-------->', res.data)
this.list = res.data.data.list || [] this.list = res.data.data.list || []
this.list.push(this.list[0]) // this.list.push({})
this.list.push(this.list[0]) // this.list.push({})
}, },
err => { err => {
this.loadingDynamic = false; this.loadingDynamic = false
this.$message.error(err) this.$message.error(err)
console.log('err-----发布动态------->', err); console.log('err-----发布动态------->', err)
} }
); )
}, },
// 部门推荐能力 // 部门推荐能力
getApplyByDept() { getApplyByDept () {
let data = { const data = {
limit: 5, limit: 5,
page: 1 page: 1
}; }
this.loadingTable = true; this.loadingTable = true
Apis.getApplyByDept( Apis.getApplyByDept(
data, data,
res => { res => {
this.loadingTable = false; this.loadingTable = false
if (res.data.code !== 0) { if (res.data.code !== 0) {
return this.$message.error(res.data.msg) return this.$message.error(res.data.msg)
} }
console.log('res.data------部门推荐能力------>', res.data); console.log('res.data------部门推荐能力------>', res.data)
this.tableData = res.data.data.list || []; this.tableData = res.data.data.list || []
}, },
err => { err => {
this.loadingTable = false; this.loadingTable = false
this.$message.error(err) this.$message.error(err)
console.log("err", err); console.log('err', err)
} }
); )
} }
} }
} }
@ -142,7 +142,6 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.bottom-view { .bottom-view {
width: 100%; width: 100%;
height: 335px; height: 335px;
@ -220,4 +219,4 @@ export default {
::v-deep .ant-table-thead { ::v-deep .ant-table-thead {
background-color: #f4f5f8; background-color: #f4f5f8;
} }
</style> </style>

258
back/src/views/modules/workBench/components/frequency-top5-view.vue
View File

@ -25,7 +25,7 @@
</div> </div>
<div class="flex-row-between row-name" v-for="(data, i) in listInfo" :key="i"> <div class="flex-row-between row-name" v-for="(data, i) in listInfo" :key="i">
<div class="left"> <div class="left">
<div class="row-index">{{ i + 3 }}</div> <div class="row-index">{{ i + 4 }}</div>
<el-tooltip effect="dark" :content="data.name" placement="top"> <el-tooltip effect="dark" :content="data.name" placement="top">
<div class="name-text ellipsis">{{ data.name || '--' }}</div> <div class="name-text ellipsis">{{ data.name || '--' }}</div>
</el-tooltip> </el-tooltip>
@ -41,185 +41,181 @@
import * as Apis from '../api.js' import * as Apis from '../api.js'
import contentTitle from './content-title.vue' import contentTitle from './content-title.vue'
export default { export default {
data() { data () {
return { return {
listInfo: [], listInfo: [],
colorObj: { colorObj: {
1: '#4658710', 1: '#4658710',
2: '#734204', 2: '#734204',
3: '#805932', 3: '#805932'
}, },
no1Obj: { no1Obj: {
name: '', name: '',
count: '', count: ''
}, },
no2Obj: { no2Obj: {
name: '', name: '',
count: '', count: ''
}, },
no3Obj: { no3Obj: {
name: '', name: '',
count: '', count: ''
}, },
noData: false, noData: false,
loading: true, loading: true
}; }
}, },
mounted() { mounted () {
this.getData(); this.getData()
}, },
methods: { methods: {
// 频率 // 频率
getData() { getData () {
let data = { const data = {
limit: 5, limit: 5,
page: 1, page: 1
}; }
this.loading = true this.loading = true
Apis.getFrequence(data, res => { Apis.getFrequence(data, res => {
this.loading = false; this.loading = false
if (res.data.code !== 0) { if (res.data.code !== 0) {
return this.$message.error(res.data.msg); return this.$message.error(res.data.msg)
}
console.log("res----频率-------->", res.data);
let _arr = res.data.data.records || [];
if (_arr.length == 0) {
this.noData = true
return;
}
for (let i = 0; i < 3; i++) {
let k = i + 1;
this[`no${k}Obj`].name = _arr[i].name
this[`no${k}Obj`].count = _arr[i].count
}
this.listInfo = []
this.listInfo.push(_arr[3] || {})
this.listInfo.push(_arr[4] || {})
}, err => {
this.loading = false;
this.$message.error(err);
});
},
formatCount(count) {
return count || count === 0 ? count : '--'
} }
console.log('res----频率-------->', res.data)
const _arr = res.data.data.records || []
if (_arr.length == 0) {
this.noData = true
return
}
for (let i = 0; i < 3; i++) {
const k = i + 1
this[`no${k}Obj`].name = _arr[i].name
this[`no${k}Obj`].count = _arr[i].count
}
this.listInfo = []
this.listInfo.push(_arr[3] || {})
this.listInfo.push(_arr[4] || {})
}, err => {
this.loading = false
this.$message.error(err)
})
}, },
components: { contentTitle } formatCount (count) {
return count || count === 0 ? count : '--'
}
},
components: { contentTitle }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.ellipsis { .ellipsis {
//超出一行省略号 //超出一行省略号
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.flex-row-between { .flex-row-between {
display: flex; display: flex;
width: 100%; width: 100%;
margin-bottom: 8px; margin-bottom: 8px;
height: 52px; height: 52px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding-left: 10px; padding-left: 10px;
padding-right: 16px; padding-right: 16px;
box-sizing: border-box; box-sizing: border-box;
} }
.left { .left {
display: flex; display: flex;
} }
.frequency { .frequency {
width: 540px; width: 540px;
height: 335px; height: 335px;
background: #fff; background: #fff;
padding: 0 16px; padding: 0 16px;
box-sizing: border-box; box-sizing: border-box;
} }
.no-box { .no-box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
margin-bottom: 24px; margin-bottom: 24px;
} }
.no1 { .no1 {
width: 170px; width: 170px;
height: 120px; height: 120px;
margin-top: -20px; margin-top: -20px;
background-image: url("~@/assets/img/workBench/NO1.png"); background-image: url("~@/assets/img/workBench/NO1.png");
} }
.no { .no {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
.no2 { .no2 {
width: 170px; width: 170px;
height: 120px; height: 120px;
margin-top: 10px; margin-top: 10px;
background-image: url("~@/assets/img/workBench/NO2.png"); background-image: url("~@/assets/img/workBench/NO2.png");
} }
.no3 { .no3 {
width: 170px; width: 170px;
height: 120px; height: 120px;
margin-top: 10px; margin-top: 10px;
background-image: url("~@/assets/img/workBench/NO3.png"); background-image: url("~@/assets/img/workBench/NO3.png");
} }
.name { .name {
font-size: 16px; font-size: 16px;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 70px; margin-top: 70px;
width: 150px; width: 150px;
text-align: center; text-align: center;
} }
.count { .count {
font-size: 18px; font-size: 18px;
color: #2b2b2b; color: #2b2b2b;
} }
.row-name { .row-name {
background: #f4f5f8; background: #f4f5f8;
border-radius: 1px; border-radius: 1px;
} }
.row-index { .row-index {
font-size: 16px; font-size: 16px;
color: #414d60; color: #414d60;
} }
.name-text { .name-text {
font-size: 16px; font-size: 16px;
color: #464545; color: #464545;
margin-left: 10px; margin-left: 10px;
width: 430px; width: 430px;
} }
.num-text { .num-text {
font-size: 14px; font-size: 14px;
color: #2b2b2b; color: #2b2b2b;
} }
.no-data { .no-data {
width: 540px; width: 540px;
height: 300px; height: 300px;
background: #fff; background: #fff;
line-height: 232px; line-height: 232px;
font-size: 16px; font-size: 16px;
color: #212121; color: #212121;
text-align: center; text-align: center;
} }
</style> </style>

4
front/package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "HiIRS", "name": "HiUCS",
"version": "0.8.0", "version": "0.8.0",
"private": true, "private": true,
"scripts": { "scripts": {
@ -38,6 +38,7 @@
"pinyin-pro": "^3.8.3", "pinyin-pro": "^3.8.3",
"postprocessing": "^5.3.2", "postprocessing": "^5.3.2",
"remixicon": "^2.5.0", "remixicon": "^2.5.0",
"swiper": "^8.2.6",
"three": "^0.98.0", "three": "^0.98.0",
"three.meshline": "^1.1.0", "three.meshline": "^1.1.0",
"vue": "^3.1.4", "vue": "^3.1.4",
@ -70,6 +71,7 @@
"stylus": "^0.54.5", "stylus": "^0.54.5",
"stylus-loader": "^3.0.2", "stylus-loader": "^3.0.2",
"svg-sprite-loader": "^6.0.9", "svg-sprite-loader": "^6.0.9",
"swiper": "^8.0.0",
"vab-config": "0.0.8", "vab-config": "0.0.8",
"webpackbar": "^5.0.0-3" "webpackbar": "^5.0.0-3"
}, },

166
front/public/index.html
View File

@ -2,36 +2,38 @@
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2022-03-29 16:45:25 * @Date: 2022-03-29 16:45:25
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-01 17:06:39 * @LastEditTime: 2022-07-09 15:05:57
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
--> -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" /> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title><%= htmlWebpackPlugin.options.title %></title> <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<meta <title>
content="vab,vab官网,后台管理框架,vue后台管理框架,vue-admin-beautiful,vue-admin-beautiful-pro,vue-admin-beautiful官网,vue-admin-beautiful文档,vue-element-admin,vue-element-admin官网,vue-element-admin文档,vue-admin,vue-admin官网,vue-admin文档" <%= htmlWebpackPlugin.options.title %>
name="keywords" </title>
/> <meta
<meta content="vab,vab官网,后台管理框架,vue后台管理框架,vue-admin-beautiful,vue-admin-beautiful-pro,vue-admin-beautiful官网,vue-admin-beautiful文档,vue-element-admin,vue-element-admin官网,vue-element-admin文档,vue-admin,vue-admin官网,vue-admin文档"
content="<%= VUE_APP_TITLE %>官网与文档基于vue-admin-beautiful-pro构建，简称vab（是一款超棒的vue+element中后台前端快速开发框架），QQ群972435319，作者：<%= VUE_APP_AUTHOR %>" name="keywords" />
name="description" <meta
/> content="<%= VUE_APP_TITLE %>官网与文档基于vue-admin-beautiful-pro构建，简称vab（是一款超棒的vue+element中后台前端快速开发框架），QQ群972435319，作者：<%= VUE_APP_AUTHOR %>"
<meta content="<%= VUE_APP_AUTHOR %>" name="author" /> name="description" />
<link href="<%= BASE_URL %>static/css/loading.css" rel="stylesheet" /> <meta content="<%= VUE_APP_AUTHOR %>" name="author" />
<script> <link href="<%= BASE_URL %>static/css/loading.css" rel="stylesheet" />
</script> <script>
<!-- 站点配置 --> </script>
<!-- 站点配置 -->
<script> <script>
window.SITE_CONFIG = {}; window.SITE_CONFIG = {};
// window.SITE_CONFIG['backUrl'] = 'http://15.72.183.90:8001'; // window.SITE_CONFIG['backUrl'] = 'http://15.72.183.90:8001';
// window.SITE_CONFIG['previewUrl'] = 'http://15.72.183.90:7008/'; // window.SITE_CONFIG['previewUrl'] = 'http://15.72.183.90:7008/';
// window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/document/#/devModelFile/'; // window.SITE_CONFIG['frontUrl'] = 'http://15.72.183.90:7008/document/#/devModelFile/';
// window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin'; // window.SITE_CONFIG['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
// window.SITE_CONFIG['POI_URL'] = 'http://15.72.178.129:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
// 包头 // 包头
// window.SITE_CONFIG['backUrl'] = 'http://10.110.205.1:8001'; // window.SITE_CONFIG['backUrl'] = 'http://10.110.205.1:8001';
// window.SITE_CONFIG['previewUrl'] = 'http://10.110.205.1:8002/'; // window.SITE_CONFIG['previewUrl'] = 'http://10.110.205.1:8002/';
@ -40,7 +42,7 @@
// 西海岸版本 // 西海岸版本
// 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['apiURL'] = 'http://10.134.135.9:8888/renren-admin'; // window.SITE_CONFIG['apiURL'] = 'http://10.134.135.9:8888/renren-admin';
// 开发 // 开发
@ -56,68 +58,72 @@
// window.SITE_CONFIG['apiURL'] = 'http://124.222.94.39:8888/renren-admin'; // window.SITE_CONFIG['apiURL'] = 'http://124.222.94.39:8888/renren-admin';
</script> </script>
<link href="./leaflet/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet"> <link href="./leaflet/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet">
<link href="./leaflet/dist/leaflet/iclient-leaflet.css" rel="stylesheet"> <link href="./leaflet/dist/leaflet/iclient-leaflet.css" rel="stylesheet">
<link href="./leaflet/libs/leaflet/plugins/leaflet.draw/leaflet.draw.css" rel="stylesheet"> <link href="./leaflet/libs/leaflet/plugins/leaflet.draw/leaflet.draw.css" rel="stylesheet">
<link href="./leaflet/libs/leaflet.markercluster/dist/MarkerCluster.css" rel="stylesheet"> <link href="./leaflet/libs/leaflet.markercluster/dist/MarkerCluster.css" rel="stylesheet">
<link href="./leaflet/libs/leaflet.markercluster/dist/MarkerCluster.Default.css" rel="stylesheet"> <link href="./leaflet/libs/leaflet.markercluster/dist/MarkerCluster.Default.css" rel="stylesheet">
<link href="./supermap/css/supermap.css" rel="stylesheet"> <link href="./supermap/css/supermap.css" rel="stylesheet">
<link href="./static/css/widgets.css" rel="stylesheet"> <link href="./static/css/widgets.css" rel="stylesheet">
<script type="text/javascript" src="./static/config/basicConfig.js"></script> <script type="text/javascript" src="./static/config/basicConfig.js"></script>
<script type="text/javascript" src="./static/config/mapConfig.js"></script> <script type="text/javascript" src="./static/config/mapConfig.js"></script>
<script type="text/javascript" src="./static/config/footerData.js"></script> <script type="text/javascript" src="./static/config/footerData.js"></script>
<script type="text/javascript" src="./static/config/location.js"></script> <script type="text/javascript" src="./static/config/location.js"></script>
<!-- ==========地图相关配置========== --> <!-- ==========地图相关配置========== -->
<script type="text/javascript" src="./leaflet/libs/leaflet/1.3.1/leaflet.js"></script> <script type="text/javascript" src="./leaflet/libs/leaflet/1.3.1/leaflet.js"></script>
<script type="text/javascript" src="./static/js/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="./static/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="./leaflet/dist/leaflet/iclient-leaflet.min.js"></script> <script type="text/javascript" src="./leaflet/dist/leaflet/iclient-leaflet.min.js"></script>
<script type="text/javascript" src="./leaflet/libs/leaflet/plugins/leaflet.draw/leaflet.draw.js"></script> <script type="text/javascript" src="./leaflet/libs/leaflet/plugins/leaflet.draw/leaflet.draw.js"></script>
<!-- <script type="text/javascript" src="./leaflet/libs/leaflet.markercluster/dist/leaflet.markercluster.js"></script> --> <!-- <script type="text/javascript" src="./leaflet/libs/leaflet.markercluster/dist/leaflet.markercluster.js"></script> -->
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet-ant-path.js"></script> <script type="text/javascript" src="./leaflet/dist/leaflet/leaflet-ant-path.js"></script>
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.textpath.js"></script> <script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.textpath.js"></script>
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.polylineoffset.js"></script> <script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.polylineoffset.js"></script>
<script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.polylineDecorator.js"></script> <script type="text/javascript" src="./leaflet/dist/leaflet/leaflet.polylineDecorator.js"></script>
<script type="text/javascript" src="./leaflet/ersi-leaflet.js"></script> <script type="text/javascript" src="./leaflet/ersi-leaflet.js"></script>
<script type="text/javascript" src="./leaflet/libs/proj4/proj4.js"></script> <script type="text/javascript" src="./leaflet/libs/proj4/proj4.js"></script>
<script type="text/javascript" src="./static/js/proj4leaflet.js"></script> <script type="text/javascript" src="./static/js/proj4leaflet.js"></script>
<script type="text/javascript" src="./supermap/atmosphere.js"></script> <script type="text/javascript" src="./supermap/atmosphere.js"></script>
<script type="text/javascript" src="./leaflet/MovingMarker.js"></script> <script type="text/javascript" src="./leaflet/MovingMarker.js"></script>
<script type="text/javascript" src="./leaflet/leaflet.motion.min.js"></script> <script type="text/javascript" src="./leaflet/leaflet.motion.min.js"></script>
<script type="text/javascript" src="./leaflet/leaflet.polylineDecorator.js"></script> <script type="text/javascript" src="./leaflet/leaflet.polylineDecorator.js"></script>
<script type="text/javascript" src="./leaflet/leaflet-tooltip-layout.dist.js"></script> <script type="text/javascript" src="./leaflet/leaflet-tooltip-layout.dist.js"></script>
<script type="text/javascript" src="./leaflet/leaflet.canvas-markers.js"></script> <script type="text/javascript" src="./leaflet/leaflet.canvas-markers.js"></script>
<script type="text/javascript" src="./leaflet/leaflet.markercluster.js"></script> <script type="text/javascript" src="./leaflet/leaflet.markercluster.js"></script>
<script type="text/javascript" src="./leaflet/TextIconOverlay_min.js"></script> <script type="text/javascript" src="./leaflet/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="./leaflet/MarkerClusterer_min.js"></script> <script type="text/javascript" src="./leaflet/MarkerClusterer_min.js"></script>
<!-- 热力图 --> <!-- 热力图 -->
<script type="text/javascript" src="./leaflet/leaflet-heat.js"></script> <script type="text/javascript" src="./leaflet/leaflet-heat.js"></script>
<!-- 大华平台相关包 --> <!-- 大华平台相关包 -->
<script type="text/javascript" src="./static/js/encrypt.js"></script> <script type="text/javascript" src="./static/js/encrypt.js"></script>
<script type="text/javascript" src="./static/js/DHWs.js"></script> <script type="text/javascript" src="./static/js/DHWs.js"></script>
</head> </head>
<body>
<noscript> <body>
<strong> <noscript>
We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work <strong>
We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to continue. properly without JavaScript enabled. Please enable it to continue.
</strong> </strong>
</noscript> </noscript>
<div id="app"> <div id="app">
<div class="first-loading-wrp"> <div class="first-loading-wrp">
<div class="loading-wrp"> <div class="loading-wrp">
<span class="dot dot-spin"> <span class="dot dot-spin">
<i></i> <i></i>
<i></i> <i></i>
<i></i> <i></i>
<i></i> <i></i>
</span> </span>
</div>
<h1><%= VUE_APP_TITLE %></h1>
</div> </div>
<h1>
<%= VUE_APP_TITLE %>
</h1>
</div> </div>
<!-- built files will be auto injected --> </div>
</body> <!-- built files will be auto injected -->
</html> </body>
</html>

11
front/public/leaflet/ersi-leaflet.js
View File

File diff suppressed because one or more lines are too long

14
front/public/static/config/location.js
View File

@ -2,12 +2,12 @@
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2020-07-07 16:03:23 * @Date: 2020-07-07 16:03:23
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-01 17:40:37 * @LastEditTime: 2022-07-08 08:53:41
* @Description: 数据资源参数配置 * @Description: 数据资源参数配置
*/ */
const newLocation = 'qingdao' const newLocation = 'qingdao'
// const newLocation = 'baotou' // const newLocation = 'baotou'
// const newLocation = 'xihaian' // const newLocation = 'xihaian'
// 数据资源数据 // 数据资源数据
const whoShow = {} const whoShow = {}
@ -62,12 +62,12 @@ if (newLocation === 'qingdao') {
{ {
name: '基础设施', name: '基础设施',
key: 'lsjcss', key: 'lsjcss',
num: '20135路', num: '20135个',
}, },
{ {
name: '数据资源', name: '数据资源',
key: 'lsjcss', key: 'lsjcss',
num: '857条', num: '857项',
}, },
{ {
name: '应用资源', name: '应用资源',
@ -79,12 +79,12 @@ if (newLocation === 'qingdao') {
{ {
name: '基础设施', name: '基础设施',
key: 'xhajcss', key: 'xhajcss',
num: '35282路', num: '35282个',
}, },
{ {
name: '数据资源', name: '数据资源',
key: 'xhajcss', key: 'xhajcss',
num: '11条', num: '11项',
}, },
{ {
name: '应用资源', name: '应用资源',
@ -163,7 +163,7 @@ else if (newLocation === 'xihaian') {
footerDataList.footerList = { footerDataList.footerList = {
company: { company: {
left: '青岛西海岸新区大数据发展促进局建设', left: '青岛西海岸新区大数据发展促进局建设',
right: 'v0.81', right: 'v0.8.1.5',
}, },
address: [ address: [
{ {

BIN
front/public/static/image/test.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 25 KiB

3
front/public/static/js/rem.js
View File

@ -2,7 +2,7 @@
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2021-06-15 18:50:17 * @Date: 2021-06-15 18:50:17
* @LastEditors: hisense.wuhongjian * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-10 15:45:52 * @LastEditTime: 2022-07-06 10:54:11
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
*/ */
;(function (doc, win) { ;(function (doc, win) {
@ -19,6 +19,7 @@
} */ } */
clientWidth > 1920 ? (clientWidth = 1920) : clientWidth clientWidth > 1920 ? (clientWidth = 1920) : clientWidth
docEl.style.fontSize = clientWidth / 19.2 + 'px' docEl.style.fontSize = clientWidth / 19.2 + 'px'
docEl.style.overflowY = 'auto'
} }
if (!doc.addEventListener) return if (!doc.addEventListener) return
recalc() recalc()

2
front/src/App.vue
View File

@ -28,7 +28,7 @@
@import '~@/vab/styles/vab.less'; @import '~@/vab/styles/vab.less';
#vue-admin-beautiful{ #vue-admin-beautiful{
max-width: 1920px; max-width: 1920px;
max-height: 1080px; // max-height: 1080px;
margin: auto; margin: auto;
height: 100%; height: 100%;
position: relative; position: relative;

9
front/src/api/home.js
View File

@ -199,7 +199,14 @@ export function updateVisits(params) {
params, params,
}) })
} }
// 保存浏览记录
export function browsingInsert(data) {
return request({
url: '/resourceBrowse/insert',
method: 'post',
data,
})
}
// 最新能力 // 最新能力
export function selectNewest(data) { export function selectNewest(data) {
return request({ return request({

16
front/src/api/personalCenter.js
View File

@ -215,3 +215,19 @@ export function selectResourceListByDept(params) {
params, params,
}) })
} }
// 获取来源应用列表
export function queryApplicationRelByResourceId(params) {
return request({
url: '/dataResourceRel/queryApplicationRelByResourceId',
method: 'get',
params,
})
}
// 获取关联组件列表
export function queryResourceRelByKeyId(params) {
return request({
url: '/dataResourceRel/queryResourceRelByKeyId',
method: 'get',
params,
})
}

BIN
front/src/assets/newHome/newHome-title-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

10
front/src/main.js
View File

@ -1,8 +1,8 @@
/* /*
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2022-03-29 17:48:03 * @Date: 2022-03-29 17:48:03
* @LastEditors: hisense.wuhongjian * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-10 15:45:34 * @LastEditTime: 2022-07-07 09:22:56
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
*/ */
import { createApp } from 'vue' import { createApp } from 'vue'
@ -45,3 +45,9 @@ app
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component) app.component(key, component)
} }
router.beforeEach((to, from, next) => {
// console.log('跳转路由=========>', to, from, next)
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
next()
})

354
front/src/store/modules/user.js
View File

@ -2,182 +2,182 @@
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 登录、获取用户信息、退出登录、清除accessToken逻辑，不建议修改 * @description 登录、获取用户信息、退出登录、清除accessToken逻辑，不建议修改
*/ */
import { getUserInfo, login, logout } from '@/api/user' import { getUserInfo, login, logout } from '@/api/user'
import { import {
getAccessToken, getAccessToken,
removeAccessToken, removeAccessToken,
setAccessToken, setAccessToken,
} from '@/utils/accessToken' } from '@/utils/accessToken'
import { title, tokenName } from '@/config' import { title, tokenName } from '@/config'
import { message, notification } from 'ant-design-vue' import { message, notification } from 'ant-design-vue'
const state = () => ({ const state = () => ({
accessToken: getAccessToken(), accessToken: getAccessToken(),
username: '', username: '',
userId: '', userId: '',
avatar: '', avatar: '',
role: 0, // 用户管理员权限 role: 0, // 用户管理员权限
}) })
const getters = { const getters = {
accessToken: (state) => state.accessToken, accessToken: (state) => state.accessToken,
username: (state) => state.username, username: (state) => state.username,
avatar: (state) => state.avatar, avatar: (state) => state.avatar,
role: (state) => state.role, role: (state) => state.role,
userId: (state) => state.userId, userId: (state) => state.userId,
} }
const mutations = { const mutations = {
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 设置accessToken * @description 设置accessToken
* @param {*} state * @param {*} state
* @param {*} accessToken * @param {*} accessToken
*/ */
setAccessToken(state, accessToken) { setAccessToken(state, accessToken) {
state.accessToken = accessToken state.accessToken = accessToken
setAccessToken(accessToken) setAccessToken(accessToken)
}, },
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 设置用户名 * @description 设置用户名
* @param {*} state * @param {*} state
* @param {*} username * @param {*} username
*/ */
setUsername(state, username) { setUsername(state, username) {
state.username = username state.username = username
}, },
// 设置角色 // 设置角色
setRole(state, role) { setRole(state, role) {
state.role = role state.role = role
}, },
// 设置用户userId // 设置用户userId
setUserId(state, id) { setUserId(state, id) {
state.userId = id state.userId = id
}, },
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 设置头像 * @description 设置头像
* @param {*} state * @param {*} state
* @param {*} avatar * @param {*} avatar
*/ */
setAvatar(state, avatar) { setAvatar(state, avatar) {
state.avatar = avatar state.avatar = avatar
}, },
} }
const actions = { const actions = {
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 登录拦截放行时，设置虚拟角色 * @description 登录拦截放行时，设置虚拟角色
* @param {*} { commit, dispatch } * @param {*} { commit, dispatch }
*/ */
setVirtualRoles({ commit, dispatch }) { setVirtualRoles({ commit, dispatch }) {
dispatch('acl/setFull', true, { dispatch('acl/setFull', true, {
root: true, root: true,
}) })
commit('setAvatar', 'https://i.gtimg.cn/club/item/face/img/2/15922_100.gif') commit('setAvatar', 'https://i.gtimg.cn/club/item/face/img/2/15922_100.gif')
commit('setUsername', 'admin(未开启登录拦截)') commit('setUsername', 'admin(未开启登录拦截)')
}, },
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 登录 * @description 登录
* @param {*} { commit } * @param {*} { commit }
* @param {*} userInfo * @param {*} userInfo
*/ */
async login({ commit }, userInfo) { async login({ commit }, userInfo) {
const { data } = await login(userInfo) const { data } = await login(userInfo)
// debugger // debugger
const accessToken = data.data[tokenName] const accessToken = data.data[tokenName]
if (accessToken) { if (accessToken) {
commit('setAccessToken', accessToken) commit('setAccessToken', accessToken)
const hour = new Date().getHours() const hour = new Date().getHours()
const thisTime = const thisTime =
hour < 8 hour < 8
? '早上好' ? '早上好'
: hour <= 11 : hour <= 11
? '上午好' ? '上午好'
: hour <= 13 : hour <= 13
? '中午好' ? '中午好'
: hour < 18 : hour < 18
? '下午好' ? '下午好'
: '晚上好' : '晚上好'
notification.open({ notification.open({
message: `欢迎登录${title}`, message: `欢迎登录${title}`,
description: `${thisTime}！`, description: `${thisTime}！`,
}) })
} else { } else {
message.error(`登录接口异常，未正确返回${tokenName}...`) message.error(`登录接口异常，未正确返回${tokenName}...`)
} }
}, },
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 获取用户信息接口 这个接口非常非常重要，如果没有明确底层前逻辑禁止修改此方法，错误的修改可能造成整个框架无法正常使用 * @description 获取用户信息接口 这个接口非常非常重要，如果没有明确底层前逻辑禁止修改此方法，错误的修改可能造成整个框架无法正常使用
* @param {*} { commit, dispatch, state } * @param {*} { commit, dispatch, state }
* @returns * @returns
*/ */
async getUserInfo({ commit }) { async getUserInfo({ commit }) {
const { data } = await getUserInfo() const { data } = await getUserInfo()
if (!data) { if (!data) {
message.error(`验证失败，请重新登录...`) message.error(`验证失败，请重新登录...`)
return false return false
} }
// debugger // debugger
commit('setUsername', data.data.username) commit('setUsername', data.data.username)
commit('setRole', data.data.roleIdList.length) commit('setRole', data.data.roleIdList.length)
commit('setUserId', data.data.id) commit('setUserId', data.data.id)
// TODO 获取用户信息，后续执行部分操作 // TODO 获取用户信息，后续执行部分操作
// let { username, avatar, roles, ability } = data // let { username, avatar, roles, ability } = data
// if (username && roles && Array.isArray(roles)) { // if (username && roles && Array.isArray(roles)) {
// dispatch('acl/setRole', roles, { // dispatch('acl/setRole', roles, {
// root: true, // root: true,
// }) // })
// if (ability && ability.length > 0) // if (ability && ability.length > 0)
// dispatch('acl/setAbility', ability, { // dispatch('acl/setAbility', ability, {
// root: true, // root: true,
// }) // })
// commit('setUsername', username) // commit('setUsername', username)
// commit('setAvatar', avatar) // commit('setAvatar', avatar)
// } else { // } else {
// message.error('用户信息接口异常') // message.error('用户信息接口异常')
// } // }
}, },
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 退出登录 * @description 退出登录
* @param {*} { dispatch } * @param {*} { dispatch }
*/ */
async logout({ dispatch }) { async logout({ dispatch }) {
await logout(state.accessToken) await logout(state.accessToken)
await dispatch('resetAll') await dispatch('resetAll')
}, },
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 重置accessToken、roles、ability、router等 * @description 重置accessToken、roles、ability、router等
* @param {*} { commit, dispatch } * @param {*} { commit, dispatch }
*/ */
async resetAll({ dispatch }) { async resetAll({ dispatch }) {
await dispatch('setAccessToken', '') await dispatch('setAccessToken', '')
await dispatch('acl/setFull', false, { await dispatch('acl/setFull', false, {
root: true, root: true,
}) })
await dispatch('acl/setRole', [], { await dispatch('acl/setRole', [], {
root: true, root: true,
}) })
await dispatch('acl/setAbility', [], { await dispatch('acl/setAbility', [], {
root: true, root: true,
}) })
removeAccessToken() removeAccessToken()
}, },
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 设置token * @description 设置token
*/ */
setAccessToken({ commit }, accessToken) { setAccessToken({ commit }, accessToken) {
commit('setAccessToken', accessToken) commit('setAccessToken', accessToken)
}, },
} }
export default { export default {
state, state,
getters, getters,
mutations, mutations,
actions, actions,
} }

88
front/src/utils/request.js
View File

@ -12,7 +12,7 @@ import qs from 'qs'
import router from '@/router' import router from '@/router'
// import { isArray } from '@/utils/validate' // import { isArray } from '@/utils/validate'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { setAccessToken } from '@/utils/accessToken' import { getAccessToken, setAccessToken } from '@/utils/accessToken'
let loadingInstance let loadingInstance
@ -22,15 +22,24 @@ let loadingInstance
* @param {*} code * @param {*} code
* @param {*} msg * @param {*} msg
*/ */
const handleCode = (code, msg, redirect) => { const handleCode = (code, msg, res) => {
debugger
switch (code) { switch (code) {
case 401: case 401:
// message.error(msg || '登录失效') // message.error(msg || '登录失效')
store.dispatch('user/resetAll').catch(() => {}) store.dispatch('user/resetAll').catch(() => {})
// // location.reload() if (res.token) {
if (redirect) { console.log('存在token信息', res.token)
window.location.href = redirect setAccessToken(res.token)
const token = getAccessToken()
console.log('验证token信息', token)
} }
// // location.reload()
// if (redirect) {
// window.location.href = res.redirect
// }
break break
case 403: case 403:
router.push({ path: '/401' }).catch(() => {}) router.push({ path: '/401' }).catch(() => {})
@ -87,10 +96,21 @@ instance.interceptors.request.use(
*/ */
instance.interceptors.response.use( instance.interceptors.response.use(
(response) => { (response) => {
// console.log('接口返回', response) console.log('接口返回', response)
// console.log('接口返回headers', response.headers) console.log('接口返回headers', response.headers)
// console.log('接口返回REDIRECT', response.headers.redirect) console.log('接口返回REDIRECT', response.headers.redirect)
response['Access-Control-Expose-Headers'] = 'redirect'
const { code, message } = response.data
if (response.headers.token) {
setAccessToken(response.headers.token)
} else {
if (response.headers.redirect) {
// window.location.href = response.headers.redirect
window.location.replace(response.headers.redirect)
return
// location.reload()
}
}
if (response.headers.redirect === '/#/login') { if (response.headers.redirect === '/#/login') {
var keys = document.cookie.match(/[^ =;]+(?=\=)/g) var keys = document.cookie.match(/[^ =;]+(?=\=)/g)
if (keys) { if (keys) {
@ -109,25 +129,12 @@ instance.interceptors.response.use(
new Date(0).toUTCString() //清除一级域名下的或指定的，例如 .kevis.com new Date(0).toUTCString() //清除一级域名下的或指定的，例如 .kevis.com
} }
} }
// console.log('已清除') console.log('已清除')
setTimeout(() => { setTimeout(() => {
location.reload() location.reload()
}, 1000) }, 1000)
} }
response['Access-Control-Expose-Headers'] = 'redirect' handleCode(code, message, response.headers)
const { code, message } = response.data
if (response.headers.token) {
setAccessToken(response.headers.token)
} else {
if (response.headers.redirect) {
// window.location.href = response.headers.redirect
window.location.replace(response.headers.redirect)
return
// location.reload()
}
}
handleCode(code, message, response.headers.redirect)
if (loadingInstance) loadingInstance.close() if (loadingInstance) loadingInstance.close()
// const { data, config } = response // const { data, config } = response
// const { code, msg } = data // const { code, msg } = data
@ -147,38 +154,15 @@ instance.interceptors.response.use(
// } // }
}, },
(error) => { (error) => {
// console.log('接口error', error) console.log('接口error', error)
if (loadingInstance) loadingInstance.close() if (loadingInstance) loadingInstance.close()
const { response, message } = error const { response, message } = error
if (error.response && error.response.data) { if (error.response && error.response.data) {
// console.log('接口返回', response) console.log('接口返回', response)
// console.log('接口返回headers', response.headers) console.log('接口返回headers', response.headers)
// console.log('接口返回REDIRECT1111', response.headers.redirect) console.log('接口返回REDIRECT', response.headers.redirect)
if (response.headers.redirect === '/#/login') {
var keys = document.cookie.match(/[^ =;]+(?=\=)/g)
if (keys) {
for (var i = keys.length; i--; ) {
document.cookie =
keys[i] + '=0;path=/;expires=' + new Date(0).toUTCString() //清除当前域名下的,例如：m.kevis.com
document.cookie =
keys[i] +
'=0;path=/;domain=' +
document.domain +
';expires=' +
new Date(0).toUTCString() //清除当前域名下的，例如 .m.kevis.com
document.cookie =
keys[i] +
'=0;path=/;domain=kevis.com;expires=' +
new Date(0).toUTCString() //清除一级域名下的或指定的，例如 .kevis.com
}
}
// console.log('已清除')
setTimeout(() => {
location.reload()
}, 1000)
}
if (response.headers.redirect) { if (response.headers.redirect) {
window.location.href = response.headers.redirect window.location.replace(response.headers.redirect)
return Promise.reject(error) return Promise.reject(error)
} }
const { status, data } = response const { status, data } = response

104
front/src/vab/plugins/permissions.js
View File

@ -1,58 +1,64 @@
/* /*
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2022-04-01 17:23:11 * @Date: 2022-04-01 17:23:11
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-29 09:54:19 * @LastEditTime: 2022-07-08 18:55:28
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
*/ */
/** /**
* @author chuzhixin 1204505056@qq.com * @author chuzhixin 1204505056@qq.com
* @description 路由守卫，目前两种模式：all模式与intelligence模式 * @description 路由守卫，目前两种模式：all模式与intelligence模式
*/ */
import router from '@/router' import router from '@/router'
import store from '@/store' import store from '@/store'
import getPageTitle from '@/utils/pageTitle' import getPageTitle from '@/utils/pageTitle'
import { import { getUserInfo } from '@/api/user'
// authentication, import {
loginInterception, // authentication,
// recordRoute, loginInterception,
routesWhiteList, // recordRoute,
} from '@/config' routesWhiteList,
import { setAccessToken, getAccessToken } from '@/utils/accessToken' } from '@/config'
router.beforeEach(async (to, from, next) => { import { setAccessToken, getAccessToken } from '@/utils/accessToken'
// debugger router.beforeEach(async (to, from, next) => {
// const SSOTOKEN = to.query.SSOToken // debugger
// if (SSOTOKEN) { // const SSOTOKEN = to.query.SSOToken
// setAccessToken(SSOTOKEN) // if (SSOTOKEN) {
// } // setAccessToken(SSOTOKEN)
const token = getAccessToken() // }
// console.log('token', token) const token = getAccessToken()
let hasToken = token || store.getters['user/accessToken'] console.log('token', token)
// debugger let hasToken = token || store.getters['user/accessToken']
if (!loginInterception) hasToken = true // debugger
// console.log('hasToken存在巨大问题', hasToken) if (!loginInterception) hasToken = true
if (hasToken) { console.log('hasToken存在巨大问题', hasToken)
setAccessToken(hasToken) if (hasToken) {
await store.dispatch('user/getUserInfo') setAccessToken(hasToken)
next() await store.dispatch('user/getUserInfo')
} else { next()
let accessRoutes = [] } else {
accessRoutes = await store.dispatch('routes/setRoutes') let accessRoutes = []
accessRoutes.forEach((item) => { accessRoutes = await store.dispatch('routes/setRoutes')
router.addRoute(item) accessRoutes.forEach((item) => {
}) router.addRoute(item)
if (routesWhiteList.indexOf(to.path) !== -1) { })
next() if (routesWhiteList.indexOf(to.path) !== -1) {
} else { next()
await store.dispatch('user/getUserInfo') } else {
// if (recordRoute) getUserInfo().then(res=>{
// next({ path: '/login', query: { redirect: to.path }, replace: true }) console.log(res)
// else next({ path: '/login', replace: true }) router.replace('/home')
next() })
// window.open('http://www.baidu.com', '_self') // await store.dispatch('user/getUserInfo')
} // next()
} // if (recordRoute)
}) // next({ path: '/login', query: { redirect: to.path }, replace: true })
router.afterEach((to) => { // else next({ path: '/login', replace: true })
document.title = getPageTitle(to.meta.title) // next()
}) // window.open('http://www.baidu.com', '_self')
}
}
})
router.afterEach((to) => {
document.title = getPageTitle(to.meta.title)
})

17
front/src/views/abilityStatistics/components/AtlasResources.vue
View File

@ -31,7 +31,9 @@
v-for="(item, index) in bubbleList" v-for="(item, index) in bubbleList"
:key="item.id" :key="item.id"
class="bubble-item" class="bubble-item"
@click.stop.prevent="index == 0 ? showDepartmentList() : ''" @click.stop.prevent="
index == 0 ? showDepartmentList() : goToDetails(item)
"
> >
<a-tooltip> <a-tooltip>
<template #title>{{ item.name }}</template> <template #title>{{ item.name }}</template>
@ -58,7 +60,7 @@
</span> </span>
</nav> </nav>
</article> </article>
<p>查看更多&gt;</p> <!-- <p>查看更多&gt;</p> -->
</div> </div>
<div class="itemList" v-else-if="navSelect.indexOf('应用领域') > 0"> <div class="itemList" v-else-if="navSelect.indexOf('应用领域') > 0">
<div class="item" v-for="item in dataList" :key="item.deptId"> <div class="item" v-for="item in dataList" :key="item.deptId">
@ -136,6 +138,8 @@
provideDeptTopN, provideDeptTopN,
applyDeptTopN, applyDeptTopN,
} from '@/api/abilityStatistics' } from '@/api/abilityStatistics'
// import { useRouter } from 'vue-router'
// const router = useRouter()
// 左侧导航 // 左侧导航
const navList = ref([ const navList = ref([
'能力共享方-应用领域', '能力共享方-应用领域',
@ -149,6 +153,15 @@
]) ])
const navSelect = ref('能力共享方-应用领域') const navSelect = ref('能力共享方-应用领域')
const departmentListFlag = ref(false) const departmentListFlag = ref(false)
const goToDetails = (item) => {
// console.log('点击气泡===============>', item)
// router.push({
// path: '/details',
// query: {
// id: item.id,
// },
// })
}
// 点击导航 // 点击导航
const selectNav = (name) => { const selectNav = (name) => {
navSelect.value = name navSelect.value = name

4
front/src/views/abilityStatistics/components/ResourceAggregation.vue
View File

@ -147,6 +147,10 @@
break break
} }
}) })
let arr = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
dataList.value.dataList.sort((a, b) => {
return arr.indexOf(a.type) - arr.indexOf(b.type)
})
}) })
let datas = ref([]) let datas = ref([])
let laiyuanDataList = ref([]) let laiyuanDataList = ref([])

158
front/src/views/assignCase/components/AssignCaseDetailPage.vue
View File

@ -2,7 +2,7 @@
* @Author: hisense.zhangfeihu * @Author: hisense.zhangfeihu
* @Date: 2022-06-13 10:22:27 * @Date: 2022-06-13 10:22:27
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-20 18:58:40 * @LastEditTime: 2022-07-05 11:25:25
* @Description: 赋能案例-详情页 * @Description: 赋能案例-详情页
--> -->
<template> <template>
@ -131,19 +131,16 @@
tabName.value = '案例背景' tabName.value = '案例背景'
selectOne(val).then((res) => { selectOne(val).then((res) => {
res.data.data.infoList.map((item, index) => { res.data.data.infoList.map((item, index) => {
console.log('res.data.data.infoList', res.data.data.infoList)
if (item.attrType == '图片') { if (item.attrType == '图片') {
res.data.data.infoList.splice(index, 1) res.data.data.infoList.splice(index, 1)
} }
}) })
res.data.data.infoList.map((item, index) => { res.data.data.infoList.map((item, index) => {
console.log('res.data.data.infoList', res.data.data.infoList)
if (item.attrType == '应用领域') { if (item.attrType == '应用领域') {
res.data.data.infoList.splice(index, 1) res.data.data.infoList.splice(index, 1)
} }
}) })
dataFrom.value = res.data.data dataFrom.value = res.data.data
console.log('dataFrom.value', dataFrom.value)
}) })
} }
//其他案例 //其他案例
@ -165,84 +162,113 @@
} }
}) })
dataList.value = res.data.data.records dataList.value = res.data.data.records
console.log('dataList.value', dataList.value)
}) })
} }
//监听路由发生变化 //监听路由发生变化
watch( watch(
() => router.currentRoute.value.query.id, () => router.currentRoute.value.query.id,
() => { () => {
init() if (router.currentRoute.value.name == 'AssignCaseDetailPage') {
init()
}
}, },
{ immediate: true } { immediate: true }
) )
//tab点击事件 //tab点击事件
const tabSwitch = (item, index) => { const tabSwitch = (item, index) => {
tabName.value = item.attrType tabName.value = item.attrType
if (index != 0 && index != 3) { let top =
let top = document.querySelector(
document.querySelector(
'#assign-case-detail-page-content-center-card' + index
).offsetTop -
document.querySelector(
'#assign-case-detail-page-content-center-card' + (index - 1)
).offsetHeight
let view = document.getElementById(
'assign-case-detail-page-content-left-border-id'
)
view.style.top =
document.querySelector(
'#assign-case-detail-page-content-center-card' + (index - 1)
).offsetHeight + 'px'
console.log('view.style.top', view.style.top)
document.documentElement.scrollTop = top
document.body.scrollTop = top
} else if (index == 0) {
let top = 0
let view = document.getElementById(
'assign-case-detail-page-content-left-border-id'
)
document.documentElement.scrollTop = top
document.body.scrollTop = top
view.style.top = '490px'
} else if (index == 3) {
let top = document.querySelector(
'#assign-case-detail-page-content-center-card' + index '#assign-case-detail-page-content-center-card' + index
).offsetTop ).offsetTop -
let view = document.getElementById( 330 -
'assign-case-detail-page-content-left-border-id' 60 * index
) document.documentElement.scrollTop = top
document.documentElement.scrollTop = top document.body.scrollTop = top
document.body.scrollTop = top
view.style.top = '220px'
}
} }
onMounted(() => { onMounted(() => {
init() // init()
// console.clear() // console.clear()
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
domArr.value = document.querySelectorAll( let top = document.documentElement.scrollTop
'.assign-case-detail-page-content-center-card' if (
) top <
scrollTop.value = 100 +
document.documentElement.scrollTop || document.body.scrollTop document.querySelector(
for (let i = 0; i < domArr.value.length; i++) { '#assign-case-detail-page-content-center-card0'
if (i === 0) { ).offsetHeight -
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) { 1
selectNow.value = domArr.value[i].id ) {
} tabName.value = '案例背景'
} else if (i == domArr.value.length - 1) { } else if (
if (scrollTop.value >= domArr.value[i].offsetTop - 50) { top >=
selectNow.value = domArr.value[i].id 100 +
} document.querySelector(
} else { '#assign-case-detail-page-content-center-card0'
if ( ).offsetHeight &&
scrollTop.value >= domArr.value[i].offsetTop - 50 && top <
scrollTop.value <= domArr.value[i + 1].offsetTop - 50 100 +
) { document.querySelector(
selectNow.value = domArr.value[i].id '#assign-case-detail-page-content-center-card0'
} ).offsetHeight +
} document.querySelector(
'#assign-case-detail-page-content-center-card1'
).offsetHeight -
1
) {
tabName.value = '业务挑战'
} else if (
top >=
100 +
document.querySelector(
'#assign-case-detail-page-content-center-card0'
).offsetHeight +
document.querySelector(
'#assign-case-detail-page-content-center-card1'
).offsetHeight &&
top <
100 +
document.querySelector(
'#assign-case-detail-page-content-center-card0'
).offsetHeight +
document.querySelector(
'#assign-case-detail-page-content-center-card1'
).offsetHeight +
document.querySelector(
'#assign-case-detail-page-content-center-card2'
).offsetHeight -
1
) {
tabName.value = '解决方案'
} else if (
top >=
100 +
document.querySelector(
'#assign-case-detail-page-content-center-card0'
).offsetHeight +
document.querySelector(
'#assign-case-detail-page-content-center-card1'
).offsetHeight +
document.querySelector(
'#assign-case-detail-page-content-center-card2'
).offsetHeight &&
top <
100 +
document.querySelector(
'#assign-case-detail-page-content-center-card0'
).offsetHeight +
document.querySelector(
'#assign-case-detail-page-content-center-card1'
).offsetHeight +
document.querySelector(
'#assign-case-detail-page-content-center-card2'
).offsetHeight +
document.querySelector(
'#assign-case-detail-page-content-center-card3'
).offsetHeight -
1
) {
tabName.value = '案例成效'
} }
}) })
}) })
@ -325,7 +351,7 @@
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
position: fixed; position: fixed;
top: 4.9rem; top: 3.9rem;
div { div {
height: 0.3rem; height: 0.3rem;
padding-right: 0.7rem; padding-right: 0.7rem;

14
front/src/views/assignCase/components/queryPage.vue
View File

@ -53,7 +53,10 @@
v-for="(item, index) in contenBox" v-for="(item, index) in contenBox"
:key="index" :key="index"
> >
<img :src="item.note1 || ''" alt="" /> <img
:src="item.note1"
alt=""
/>
<h3>{{ item.name }}</h3> <h3>{{ item.name }}</h3>
<p> <p>
发布时间 发布时间
@ -315,7 +318,6 @@
height: 20px; height: 20px;
background: url(../../../assets/assignCase/left.png) no-repeat background: url(../../../assets/assignCase/left.png) no-repeat
center; center;
margin-top: 30px; margin-top: 30px;
transform: rotate(-90deg); transform: rotate(-90deg);
} }
@ -343,6 +345,10 @@
color: #333333; color: #333333;
margin-right: 30px; margin-right: 30px;
cursor: pointer; cursor: pointer;
display: inline-block;
line-height: 30px;
padding: 5px 10px;
border-radius: 0.16rem;
} }
span:nth-of-type(8n) { span:nth-of-type(8n) {
margin-right: 50px; margin-right: 50px;
@ -376,9 +382,11 @@
border-radius: 6px; border-radius: 6px;
box-shadow: 5px 5px 20px 0 #f2f3fb; box-shadow: 5px 5px 20px 0 #f2f3fb;
img { img {
// width: 370px; width: 355px;
height: 200px; height: 200px;
border-radius: 6px; border-radius: 6px;
object-fit: cover;
object-position: 50% 20%;
} }
h3 { h3 {
margin: 30px 0 20px; margin: 30px 0 20px;

11
front/src/views/capabilityCloud/components/ApplicationResources.vue
View File

@ -1,8 +1,8 @@
<!-- <!--
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-19 10:16:10 * @Date: 2022-06-19 10:16:10
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-19 17:52:19 * @LastEditTime: 2022-07-05 21:26:40
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
--> -->
<template> <template>
@ -44,6 +44,7 @@
<div <div
:class="{ select: select == '区市应用资源排名' }" :class="{ select: select == '区市应用资源排名' }"
@click="selectNav('区市应用资源排名')" @click="selectNav('区市应用资源排名')"
v-if="!whoShow1.itShowXiHaiAn"
> >
区市应用资源排名 区市应用资源排名
<i v-show="select == '区市应用资源排名'"></i> <i v-show="select == '区市应用资源排名'"></i>
@ -67,6 +68,8 @@
const num3 = ref(0) const num3 = ref(0)
const select = ref('区市应用资源排名') const select = ref('区市应用资源排名')
let myChart = null let myChart = null
// eslint-disable-next-line no-undef
const whoShow1 = whoShow
const selectNav = (val) => { const selectNav = (val) => {
select.value = val select.value = val
switch (val) { switch (val) {
@ -259,6 +262,7 @@
} }
onMounted(() => { onMounted(() => {
echarts.init(document.getElementById('echarts-box2')).dispose()
const chart = document.getElementById('echarts-box2') const chart = document.getElementById('echarts-box2')
if (chart) { if (chart) {
myChart = echarts.init(chart) myChart = echarts.init(chart)
@ -365,11 +369,12 @@
position: relative; position: relative;
.nav { .nav {
position: absolute; position: absolute;
width: 7.5rem;
z-index: 10; z-index: 10;
top: 0.3rem; top: 0.3rem;
left: 0; left: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-around;
padding: 0 1.5rem; padding: 0 1.5rem;
& > div { & > div {
cursor: pointer; cursor: pointer;

56
front/src/views/capabilityCloud/components/ComponentServices.vue
View File

@ -168,6 +168,7 @@
} }
}) })
} else { } else {
callTheTrendData.value.snum = ['0', '0', '0', '0', '0', '0', '0']
callTheTrend(callTheTrendData.value) callTheTrend(callTheTrendData.value)
} }
} else { } else {
@ -185,14 +186,23 @@
if (!xinhaianIsShow) { if (!xinhaianIsShow) {
callTheTrendPort(start, end, 86400).then((res) => { callTheTrendPort(start, end, 86400).then((res) => {
if (res.data.data.result) { if (res.data.data.result) {
// res.data.data.result.splice(0, 1)
callTheTrendData.value.snum = [] callTheTrendData.value.snum = []
res.data.data.result[0].values.map((item) => { res.data.data.result[0].values.map((item) => {
callTheTrendData.value.snum.push(
moment(item[0] * 1000).format('MM-DD')
)
callTheTrendData.value.snum.push(parseInt(item[1])) callTheTrendData.value.snum.push(parseInt(item[1]))
}) })
if (res.data.data.result[0].values.length < 30) {
for (
let i = 0;
i < 30 - res.data.data.result[0].values.length;
i++
) {
callTheTrendData.value.snum.push(0)
}
}
console.log(
'callTheTrendData.value.snum',
callTheTrendData.value.snum
)
callTheTrend(callTheTrendData.value) callTheTrend(callTheTrendData.value)
} else { } else {
for (let i = 0; i < 30; i++) { for (let i = 0; i < 30; i++) {
@ -202,6 +212,39 @@
} }
}) })
} else { } else {
callTheTrendData.value.snum = [
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
]
callTheTrend(callTheTrendData.value) callTheTrend(callTheTrendData.value)
} }
} }
@ -228,8 +271,8 @@
}, },
grid: { grid: {
top: '10%', top: '10%',
left: '0%', left: '10%',
right: '5%', right: '10%',
bottom: '0%', bottom: '0%',
containLabel: true, containLabel: true,
}, },
@ -253,6 +296,7 @@
], ],
yAxis: [ yAxis: [
{ {
minInterval: 1,
name: '个', name: '个',
type: 'value', type: 'value',
axisTick: { axisTick: {

7
front/src/views/capabilityCloud/components/PlatformOverview.vue
View File

@ -1,8 +1,8 @@
<!-- <!--
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-19 10:15:33 * @Date: 2022-06-19 10:15:33
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-19 17:52:04 * @LastEditTime: 2022-07-05 21:25:47
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
--> -->
<template> <template>
@ -134,7 +134,7 @@
}, },
grid: { grid: {
top: '14%', top: '14%',
left: '4%', left: '6%',
right: '5%', right: '5%',
bottom: '12%', bottom: '12%',
containLabel: true, containLabel: true,
@ -172,6 +172,7 @@
series: lineY, series: lineY,
} }
onMounted(() => { onMounted(() => {
echarts.init(document.getElementById('echarts-box')).dispose()
trafficStatistics({ trafficStatistics({
startDate: dateList[0], startDate: dateList[0],
endDate: dateList[dateList.length - 1], endDate: dateList[dateList.length - 1],

13
front/src/views/capabilityCloud/index.vue
View File

@ -1,13 +1,15 @@
<!-- <!--
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-19 10:11:03 * @Date: 2022-06-19 10:11:03
* @LastEditors: hisense.wuhongjian * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-19 17:57:14 * @LastEditTime: 2022-07-05 19:47:07
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
--> -->
<template> <template>
<div class="capability-cloud"> <div class="capability-cloud">
<div class="header"><span class="title">数字资源驾驶舱</span></div> <div class="header">
<span class="title" @click="goHome">数字能力超市</span>
</div>
<div class="main"> <div class="main">
<platform-overview></platform-overview> <platform-overview></platform-overview>
<application-resources></application-resources> <application-resources></application-resources>
@ -27,6 +29,11 @@
import Infrastructure from '@/views/capabilityCloud/components/Infrastructure.vue' import Infrastructure from '@/views/capabilityCloud/components/Infrastructure.vue'
import DataResources from '@/views/capabilityCloud/components/DataResources.vue' import DataResources from '@/views/capabilityCloud/components/DataResources.vue'
import KnowledgeBase from '@/views/capabilityCloud/components/KnowledgeBase.vue' import KnowledgeBase from '@/views/capabilityCloud/components/KnowledgeBase.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const goHome = () => {
router.push('/home')
}
</script> </script>
<style lang="less"> <style lang="less">
@font-face { @font-face {

2
front/src/views/capacityOnTheShelf/Application.vue
View File

@ -391,7 +391,7 @@
} }
.line { .line {
margin-left: 10px; margin-left: 10px;
width: 140px; width: 280px;
height: 1px; height: 1px;
background: #999; background: #999;
} }

1083
front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
View File

File diff suppressed because it is too large Load Diff

293
front/src/views/detailsAll/AlgorithmDetails.vue
View File

@ -10,182 +10,159 @@
<!-- 头部基本信息 --> <!-- 头部基本信息 -->
<algorithm-top-details :dataList="dataList.data"></algorithm-top-details> <algorithm-top-details :dataList="dataList.data"></algorithm-top-details>
<!-- 导航 --> <!-- 导航 -->
<algorithm-navigation <algorithm-navigation :dataList="dataList.data" :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow">
:dataList="dataList.data" </algorithm-navigation>
:class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow"
></algorithm-navigation>
<!-- 算法展示 视频 -->
<algorithm-display
:dataList="dataList.data"
id="algorithm-display"
class="scrollBox"
></algorithm-display>
<!-- 关联能力 --> <!-- 关联能力 -->
<algorithm-associated-ability <algorithm-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
v-if="!loading" id="algorithm-associated-ability" class="scrollBox"></algorithm-associated-ability>
:associatedComponents="associatedComponents" <!-- 算法展示 视频 -->
id="algorithm-associated-ability" <algorithm-display :dataList="dataList.data" id="algorithm-display" class="scrollBox"></algorithm-display>
class="scrollBox"
></algorithm-associated-ability>
<!-- 算法优势 --> <!-- 算法优势 -->
<algorithm-advantage <algorithm-advantage :dataList="dataList.data" id="algorithm-advantage" class="scrollBox"></algorithm-advantage>
:dataList="dataList.data"
id="algorithm-advantage"
class="scrollBox"
></algorithm-advantage>
<!-- 应用场景和应用案例 --> <!-- 应用场景和应用案例 -->
<!-- <application-scenarios-and-case <!-- <application-scenarios-and-case
id="application-scenarios-and-case" id="application-scenarios-and-case"
class="scrollBox" class="scrollBox"
></application-scenarios-and-case> --> ></application-scenarios-and-case> -->
<algorithm-application-scenarios <algorithm-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
:dataList="dataList.data" </algorithm-application-scenarios>
id="application-scenarios" <algorithm-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
class="scrollBox" </algorithm-application-case>
></algorithm-application-scenarios>
<algorithm-application-case
:dataList="dataList.data"
id="application-case"
class="scrollBox"
></algorithm-application-case>
<!-- 算法试用 --> <!-- 算法试用 -->
<algorithm-on-trial <algorithm-on-trial :dataList="dataList.data" id="algorithm-on-trial" class="scrollBox"></algorithm-on-trial>
:dataList="dataList.data"
id="algorithm-on-trial"
class="scrollBox"
></algorithm-on-trial>
<!-- 计费标准 --> <!-- 计费标准 -->
<algorithm-charging-standard <algorithm-charging-standard :dataList="dataList.data" id="charging-standard" class="scrollBox">
:dataList="dataList.data" </algorithm-charging-standard>
id="charging-standard"
class="scrollBox"
></algorithm-charging-standard>
<!-- 使用方式 --> <!-- 使用方式 -->
<algorithm-usage-mode <algorithm-usage-mode :dataList="dataList.data" id="usage-mode" class="scrollBox"></algorithm-usage-mode>
:dataList="dataList.data"
id="usage-mode"
class="scrollBox"
></algorithm-usage-mode>
<!-- 常见问题--> <!-- 常见问题-->
<algorithm-common-problem <algorithm-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
:dataList="dataList.data" </algorithm-common-problem>
id="common-problem"
class="scrollBox"
></algorithm-common-problem>
</div> </div>
</template> </template>
<script setup> <script setup>
import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue' import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue' import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue' import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue' import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue' import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
import AlgorithmOnTrial from '@/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue' import AlgorithmOnTrial from '@/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue'
import AlgorithmApplicationScenarios from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios' import AlgorithmApplicationScenarios from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios'
import AlgorithmApplicationCase from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationCase' import AlgorithmApplicationCase from '@/views/detailsAll/components/Algorithm/AlgorithmApplicationCase'
import AlgorithmUsageMode from '@/views/detailsAll/components/Algorithm/AlgorithmUsageMode' //使用方式 import AlgorithmUsageMode from '@/views/detailsAll/components/Algorithm/AlgorithmUsageMode' //使用方式
import AlgorithmChargingStandard from '@/views/detailsAll/components/Algorithm/AlgorithmChargingStandard' //计费标准 import AlgorithmChargingStandard from '@/views/detailsAll/components/Algorithm/AlgorithmChargingStandard' //计费标准
import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题 import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue' import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home' import {
import mybus from '@/myplugins/mybus' updateVisits,
const router = useRouter() selectOne,
const scrollTop = ref(0) queryPartAppByKeyId2,
const domArr = ref([]) browsingInsert,
const loading = ref(true) } from '@/api/home'
const selectNow = ref('') import mybus from '@/myplugins/mybus'
const dataList = reactive({ data: {} }) const router = useRouter()
const id = router.currentRoute.value.query.id const scrollTop = ref(0)
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const domArr = ref([])
const associatedComponents = ref([{ type: '应用资源', dataList: [] }]) const loading = ref(true)
document.documentElement.style.transition = 'all 0.3s ease' const selectNow = ref('')
document.documentElement.scrollTop = 0 const dataList = reactive({ data: {} })
document.body.style.transition = 'all 0.3s ease' const id = router.currentRoute.value.query.id
document.body.scrollTop = 0 const obj = JSON.parse(window.sessionStorage.getItem('preview'))
mybus.on('flyToView', (id) => { const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
let top = document.querySelector('#' + id).offsetTop - 50 document.documentElement.style.transition = 'all 0.3s ease'
// console.log(top, document.querySelector('#' + id).offsetTop) document.documentElement.scrollTop = 0
document.documentElement.scrollTop = top document.body.style.transition = 'all 0.3s ease'
document.body.scrollTop = top document.body.scrollTop = 0
}) mybus.on('flyToView', (id) => {
onMounted(() => { let top = document.querySelector('#' + id).offsetTop - 50
// console.clear() // console.log(top, document.querySelector('#' + id).offsetTop)
window.addEventListener('scroll', () => { document.documentElement.scrollTop = top
domArr.value = document.querySelectorAll('.scrollBox') document.body.scrollTop = top
scrollTop.value = })
document.documentElement.scrollTop || document.body.scrollTop onMounted(() => {
for (let i = 0; i < domArr.value.length; i++) { // console.clear()
if (i === 0) { window.addEventListener('scroll', () => {
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) { domArr.value = document.querySelectorAll('.scrollBox')
selectNow.value = domArr.value[i].id scrollTop.value =
} document.documentElement.scrollTop || document.body.scrollTop
} else if (i == domArr.value.length - 1) { for (let i = 0; i < domArr.value.length; i++) {
if (scrollTop.value >= domArr.value[i].offsetTop - 50) { if (i === 0) {
selectNow.value = domArr.value[i].id if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
} selectNow.value = domArr.value[i].id
} else { }
if ( } else if (i == domArr.value.length - 1) {
scrollTop.value >= domArr.value[i].offsetTop - 50 && if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
scrollTop.value <= domArr.value[i + 1].offsetTop - 50 selectNow.value = domArr.value[i].id
) { }
selectNow.value = domArr.value[i].id } else {
} if (
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
) {
selectNow.value = domArr.value[i].id
} }
} }
})
})
const init = (id) => {
console.log(id, '-------------------------------------------------')
if (id) {
selectOne(id).then((res) => {
// console.clear()
dataList.data = res.data.data
console.log('初始化详情页=========================>', dataList.data)
const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
if (arrList.value.indexOf(id) === -1) {
arrList.value.push(id)
updateVisits({
id: res.data.data.id,
visits: res.data.data.visits || '0',
}).then(() => {
window.sessionStorage.setItem(
'visits',
JSON.stringify(arrList.value)
)
})
}
})
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
}
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
loading.value = false
})
})
} else if (obj) {
dataList.data = obj
console.log('预览==============', obj)
} }
}
init(id)
onBeforeUnmount(() => {
mybus.off('flyToView')
}) })
})
const init = (id) => {
console.log(id, '-------------------------------------------------')
if (id) {
selectOne(id).then((res) => {
// console.clear()
dataList.data = res.data.data
console.log('初始化详情页=========================>', dataList.data)
const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
if (arrList.value.indexOf(id) === -1) {
arrList.value.push(id)
updateVisits({
id: res.data.data.id,
visits: res.data.data.visits || '0',
}).then(() => {
window.sessionStorage.setItem(
'visits',
JSON.stringify(arrList.value)
)
})
}
// 浏览记录
browsingInsert({
resourceId: res.data.data.id,
}).then(() => {
console.log('浏览记录+1')
})
})
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
}
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
loading.value = false
})
})
} else if (obj) {
dataList.data = obj
console.log('预览==============', obj)
}
}
init(id)
onBeforeUnmount(() => {
mybus.off('flyToView')
})
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.fixed { .fixed {
position: fixed; position: fixed;
z-index: 2000; z-index: 2000;
top: 0; top: 0;
left: 0; left: 0;
} }
.fixed2 > div:nth-of-type(3) {
margin-top: 0.84rem; .fixed2>div:nth-of-type(3) {
} margin-top: 0.84rem;
}
</style> </style>

313
front/src/views/detailsAll/ApplicationDetails.vue
View File

@ -8,181 +8,172 @@
<template> <template>
<div class="application-details" :class="{ fixed2: scrollTop >= 600 }"> <div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
<!-- 头部基本信息 --> <!-- 头部基本信息 -->
<application-top-details <application-top-details :dataList="dataList.data"></application-top-details>
:dataList="dataList.data"
></application-top-details>
<!-- 导航 --> <!-- 导航 -->
<application-navigation <application-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
:dataList="dataList.data" :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></application-navigation>
:class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow"
></application-navigation>
<!-- 应用展示 视频 -->
<application-presentation
:dataList="dataList.data"
id="application-presentation"
class="scrollBox"
></application-presentation>
<!-- 关联组件 -->
<application-associated-components
:dataList="dataList.data"
id="application-associated-components"
class="scrollBox"
></application-associated-components>
<!-- 关联能力 --> <!-- 关联能力 -->
<application-associated-ability <application-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
:associatedComponents="associatedComponents" id="application-associated-ability" class="scrollBox"></application-associated-ability>
id="application-associated-ability" <!-- 应用展示 视频 -->
class="scrollBox" <application-presentation :dataList="dataList.data" id="application-presentation" class="scrollBox">
></application-associated-ability> </application-presentation>
<!-- 关联组件 -->
<application-associated-components :dataList="dataList.data" id="application-associated-components"
class="scrollBox" v-if="false"></application-associated-components>
<!-- 功能介绍--> <!-- 功能介绍-->
<application-function-intorduction <application-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
:dataList="dataList.data" </application-function-intorduction>
id="function-introduction"
class="scrollBox"
></application-function-intorduction>
<!-- 使用能力 --> <!-- 使用能力 -->
<application-ability-toise <application-ability-toise :dataList="dataList.data" id="ability-to-use" class="scrollBox">
:dataList="dataList.data" </application-ability-toise>
id="ability-to-use"
class="scrollBox"
></application-ability-toise>
<!-- 部署与安全--> <!-- 部署与安全-->
<application-deployment-and-security <application-deployment-and-security :dataList="dataList.data" id="deployment-and-security" class="scrollBox">
:dataList="dataList.data" </application-deployment-and-security>
id="deployment-and-security"
class="scrollBox"
></application-deployment-and-security>
<!-- 归属部门与服务商--> <!-- 归属部门与服务商-->
<application-owning-department-and-service-provider <application-owning-department-and-service-provider :dataList="dataList.data" id="department-and-service-provider"
:dataList="dataList.data" class="scrollBox"></application-owning-department-and-service-provider>
id="department-and-service-provider"
class="scrollBox"
></application-owning-department-and-service-provider>
<!-- 常见问题--> <!-- 常见问题-->
<application-common-problem <application-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
:dataList="dataList.data" </application-common-problem>
id="common-problem"
class="scrollBox"
></application-common-problem>
</div> </div>
</template> </template>
<script setup> <script setup>
import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue' import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue' import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue'
import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue' import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue'
import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue' import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue'
import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue' import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue'
import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue' import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue'
import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue' import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
import ApplicationNavigation from '@/views/detailsAll/components/Application/ApplicationNavigation.vue' import ApplicationNavigation from '@/views/detailsAll/components/Application/ApplicationNavigation.vue'
import ApplicationPresentation from '@/views/detailsAll/components/Application/ApplicationPresentation.vue' import ApplicationPresentation from '@/views/detailsAll/components/Application/ApplicationPresentation.vue'
import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题 import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue' import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home' import {
import mybus from '@/myplugins/mybus' updateVisits,
const associatedComponents = ref([ selectOne,
{ type: '组件服务', dataList: [] }, queryPartAppByKeyId,
{ type: '数据资源', dataList: [] }, browsingInsert,
{ type: '基础设施', dataList: [] }, } from '@/api/home'
]) import mybus from '@/myplugins/mybus'
const router = useRouter() const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
const scrollTop = ref(0) let loading = ref(true)
const domArr = ref([]) const router = useRouter()
const selectNow = ref('') const scrollTop = ref(0)
const dataList = reactive({ data: {} }) const domArr = ref([])
const id = router.currentRoute.value.query.id const selectNow = ref('')
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const dataList = reactive({ data: {} })
document.documentElement.style.transition = 'all 0.3s ease' const id = router.currentRoute.value.query.id
document.documentElement.scrollTop = 0 const obj = JSON.parse(window.sessionStorage.getItem('preview'))
document.body.style.transition = 'all 0.3s ease' document.documentElement.style.transition = 'all 0.3s ease'
document.body.scrollTop = 0 document.documentElement.scrollTop = 0
mybus.on('flyToView', (id) => { document.body.style.transition = 'all 0.3s ease'
let top = document.querySelector('#' + id).offsetTop - 50 document.body.scrollTop = 0
// console.log(top, document.querySelector('#' + id).offsetTop-50) mybus.on('flyToView', (id) => {
document.documentElement.scrollTop = top let top = document.querySelector('#' + id).offsetTop - 50
document.body.scrollTop = top // console.log(top, document.querySelector('#' + id).offsetTop-50)
}) document.documentElement.scrollTop = top
onMounted(() => { document.body.scrollTop = top
// console.clear() })
window.addEventListener('scroll', () => { onMounted(() => {
domArr.value = document.querySelectorAll('.scrollBox') // console.clear()
scrollTop.value = window.addEventListener('scroll', () => {
document.documentElement.scrollTop || document.body.scrollTop domArr.value = document.querySelectorAll('.scrollBox')
for (let i = 0; i < domArr.value.length; i++) { scrollTop.value =
if (i === 0) { document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) { for (let i = 0; i < domArr.value.length; i++) {
selectNow.value = domArr.value[i].id if (i === 0) {
} if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
} else if (i == domArr.value.length - 1) { selectNow.value = domArr.value[i].id
if (scrollTop.value >= domArr.value[i].offsetTop - 50) { }
selectNow.value = domArr.value[i].id } else if (i == domArr.value.length - 1) {
} if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
} else { selectNow.value = domArr.value[i].id
if ( }
scrollTop.value >= domArr.value[i].offsetTop - 50 && } else {
scrollTop.value <= domArr.value[i + 1].offsetTop - 50 if (
) { scrollTop.value >= domArr.value[i].offsetTop - 50 &&
selectNow.value = domArr.value[i].id scrollTop.value <= domArr.value[i + 1].offsetTop - 50
} ) {
selectNow.value = domArr.value[i].id
} }
} }
})
})
const init = (id) => {
if (id) {
selectOne(id).then((res) => {
// console.clear()
dataList.data = res.data.data
const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
console.log(
'初始化详情页=========================>',
dataList.data,
arrList.value
)
if (arrList.value && arrList.value.indexOf(id) === -1) {
arrList.value.push(id)
updateVisits({
id: res.data.data.id,
visits: res.data.data.visits || '0',
}).then(() => {
window.sessionStorage.setItem(
'visits',
JSON.stringify(arrList.value)
)
})
}
})
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
type: item.type,
}
queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
})
})
} else if (obj) {
dataList.data = obj
console.log('预览==============', obj)
} }
}
init(id)
onBeforeUnmount(() => {
mybus.off('flyToView')
}) })
})
const init = (id) => {
if (id) {
selectOne(id).then((res) => {
// console.clear()
dataList.data = res.data.data
const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
console.log(
'初始化详情页=========================>',
dataList.data,
arrList.value
)
if (arrList.value && arrList.value.indexOf(id) === -1) {
arrList.value.push(id)
updateVisits({
id: res.data.data.id,
visits: res.data.data.visits || '0',
}).then(() => {
window.sessionStorage.setItem(
'visits',
JSON.stringify(arrList.value)
)
})
}
// 浏览记录
browsingInsert({
resourceId: res.data.data.id,
}).then(() => {
console.log('浏览记录+1')
})
})
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
type: item.type,
}
queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[0].dataList = res.data.data
loading.value = false
})
})
} else if (obj) {
dataList.data = obj
console.log('预览==============', obj)
}
}
const associatedComponentsFunction = () => {
if (
associatedComponents.value[0].dataList.length > 0 ||
associatedComponents.value[1].dataList.length > 0 ||
associatedComponents.value[2].dataList.length > 0
) {
return associatedComponents.value
}
}
init(id)
onBeforeUnmount(() => {
mybus.off('flyToView')
})
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.fixed { .fixed {
position: fixed; position: fixed;
z-index: 2000; z-index: 2000;
top: 0; top: 0;
left: 0; left: 0;
} }
.fixed2 > div:nth-of-type(3) {
margin-top: 0.84rem; .fixed2>div:nth-of-type(3) {
} margin-top: 0.84rem;
}
</style> </style>

271
front/src/views/detailsAll/BusinessDetails.vue
View File

@ -10,162 +10,149 @@
<!-- 头部基本信息 --> <!-- 头部基本信息 -->
<business-top-details :dataList="dataList.data"></business-top-details> <business-top-details :dataList="dataList.data"></business-top-details>
<!-- 导航 --> <!-- 导航 -->
<business-navigation <business-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
:dataList="dataList.data" :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></business-navigation>
:associatedComponents="associatedComponents"
:class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow"
></business-navigation>
<!-- 关联能力 --> <!-- 关联能力 -->
<business-associated-ability <business-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
:associatedComponents="associatedComponents" id="business-associated-ability" class="scrollBox"></business-associated-ability>
id="business-associated-ability"
class="scrollBox"
></business-associated-ability>
<!-- 组件展示 --> <!-- 组件展示 -->
<business-presentation <business-presentation :dataList="dataList.data" id="business-presentation" class="scrollBox">
:dataList="dataList.data" </business-presentation>
id="business-presentation"
class="scrollBox"
></business-presentation>
<!-- 功能介绍--> <!-- 功能介绍-->
<business-function-intorduction <business-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
:dataList="dataList.data" </business-function-intorduction>
id="function-introduction"
class="scrollBox"
></business-function-intorduction>
<!-- 应用场景 --> <!-- 应用场景 -->
<business-application-scenarios <business-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
:dataList="dataList.data" </business-application-scenarios>
id="application-scenarios"
class="scrollBox"
></business-application-scenarios>
<!-- 应用案例 --> <!-- 应用案例 -->
<business-application-case <business-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
:dataList="dataList.data" </business-application-case>
id="application-case"
class="scrollBox"
></business-application-case>
<!-- 使用方式 --> <!-- 使用方式 -->
<business-usage-mode <business-usage-mode :dataList="dataList.data" id="business-usage-mode" class="scrollBox"></business-usage-mode>
:dataList="dataList.data"
id="business-usage-mode"
class="scrollBox"
></business-usage-mode>
<!-- 常见问题--> <!-- 常见问题-->
<business-common-problem <business-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox"></business-common-problem>
:dataList="dataList.data"
id="common-problem"
class="scrollBox"
></business-common-problem>
</div> </div>
</template> </template>
<script setup> <script setup>
import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例 import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue' import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue'
import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景 import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍 import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息 import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
import BusinessNavigation from '@/views/detailsAll/components/Business/BusinessNavigation.vue' //导航条 import BusinessNavigation from '@/views/detailsAll/components/Business/BusinessNavigation.vue' //导航条
import BusinessPresentation from '@/views/detailsAll/components/Business/BusinessPresentation.vue' //组件展示 import BusinessPresentation from '@/views/detailsAll/components/Business/BusinessPresentation.vue' //组件展示
import BusinessUsageMode from '@/views/detailsAll/components/Business/BusinessUsageMode.vue' //使用方式 import BusinessUsageMode from '@/views/detailsAll/components/Business/BusinessUsageMode.vue' //使用方式
import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题 import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue' import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home' import {
import mybus from '@/myplugins/mybus' updateVisits,
const router = useRouter() selectOne,
const scrollTop = ref(0) queryPartAppByKeyId2,
const domArr = ref([]) browsingInsert,
const selectNow = ref('') } from '@/api/home'
const dataList = reactive({ data: {} }) import mybus from '@/myplugins/mybus'
const id = router.currentRoute.value.query.id const router = useRouter()
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const scrollTop = ref(0)
const associatedComponents = ref([{ type: '应用资源', dataList: [] }]) const domArr = ref([])
document.documentElement.style.transition = 'all 0.3s ease' const selectNow = ref('')
document.documentElement.scrollTop = 0 const dataList = reactive({ data: {} })
document.body.style.transition = 'all 0.3s ease' const id = router.currentRoute.value.query.id
document.body.scrollTop = 0 const obj = JSON.parse(window.sessionStorage.getItem('preview'))
mybus.on('flyToView', (id) => { const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
let top = document.querySelector('#' + id).offsetTop - 50 let loading = ref(true)
// console.log(top, document.querySelector('#' + id).offsetTop) document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = top document.documentElement.scrollTop = 0
document.body.scrollTop = top document.body.style.transition = 'all 0.3s ease'
}) document.body.scrollTop = 0
onMounted(() => { mybus.on('flyToView', (id) => {
// console.clear() let top = document.querySelector('#' + id).offsetTop - 50
window.addEventListener('scroll', () => { // console.log(top, document.querySelector('#' + id).offsetTop)
domArr.value = document.querySelectorAll('.scrollBox') document.documentElement.scrollTop = top
scrollTop.value = document.body.scrollTop = top
document.documentElement.scrollTop || document.body.scrollTop })
for (let i = 0; i < domArr.value.length; i++) { onMounted(() => {
if (i === 0) { // console.clear()
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) { window.addEventListener('scroll', () => {
selectNow.value = domArr.value[i].id domArr.value = document.querySelectorAll('.scrollBox')
} scrollTop.value =
} else if (i == domArr.value.length - 1) { document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop.value >= domArr.value[i].offsetTop - 50) { for (let i = 0; i < domArr.value.length; i++) {
selectNow.value = domArr.value[i].id if (i === 0) {
} if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
} else { selectNow.value = domArr.value[i].id
if ( }
scrollTop.value >= domArr.value[i].offsetTop - 50 && } else if (i == domArr.value.length - 1) {
scrollTop.value <= domArr.value[i + 1].offsetTop - 50 if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
) { selectNow.value = domArr.value[i].id
selectNow.value = domArr.value[i].id }
} } else {
if (
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
) {
selectNow.value = domArr.value[i].id
} }
} }
})
})
const init = (id) => {
if (id) {
selectOne(id).then((res) => {
// console.clear()
dataList.data = res.data.data
console.log('初始化详情页=========================>', dataList.data)
const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
if (arrList.value && arrList.value.indexOf(id) === -1) {
arrList.value.push(id)
updateVisits({
id: res.data.data.id,
visits: res.data.data.visits || '0',
}).then(() => {
window.sessionStorage.setItem(
'visits',
JSON.stringify(arrList.value)
)
})
}
})
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
}
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
})
})
} else if (obj) {
dataList.data = obj
console.log('预览==============', obj)
} }
}
init(id)
onBeforeUnmount(() => {
mybus.off('flyToView')
}) })
})
const init = (id) => {
if (id) {
selectOne(id).then((res) => {
// console.clear()
dataList.data = res.data.data
console.log('初始化详情页=========================>', dataList.data)
const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
if (arrList.value && arrList.value.indexOf(id) === -1) {
arrList.value.push(id)
updateVisits({
id: res.data.data.id,
visits: res.data.data.visits || '0',
}).then(() => {
window.sessionStorage.setItem(
'visits',
JSON.stringify(arrList.value)
)
})
}
// 浏览记录
browsingInsert({
resourceId: res.data.data.id,
}).then(() => {
console.log('浏览记录+1')
})
})
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
}
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
loading.value = false
})
})
} else if (obj) {
dataList.data = obj
console.log('预览==============', obj)
}
}
init(id)
onBeforeUnmount(() => {
mybus.off('flyToView')
})
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.fixed { .fixed {
position: fixed; position: fixed;
z-index: 2000; z-index: 2000;
top: 0; top: 0;
left: 0; left: 0;
} }
.fixed2 > div:nth-of-type(3) {
margin-top: 0.84rem; .fixed2>div:nth-of-type(3) {
} margin-top: 0.84rem;
}
</style> </style>

286
front/src/views/detailsAll/DeveloperComponents.vue
View File

@ -10,169 +10,157 @@
<!-- 头部基本信息 --> <!-- 头部基本信息 -->
<developer-top-details :dataList="dataList.data"></developer-top-details> <developer-top-details :dataList="dataList.data"></developer-top-details>
<!-- 导航 --> <!-- 导航 -->
<developer-navigation <developer-navigation :dataList="dataList.data" :associatedComponents="associatedComponentsFunction()"
:dataList="dataList.data" :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></developer-navigation>
:associatedComponents="associatedComponents"
:class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow"
></developer-navigation>
<!-- 组件展示 视频 -->
<Developer-presentation
:dataList="dataList.data"
id="eveloper-presentation"
class="scrollBox"
></Developer-presentation>
<!-- 关联能力 --> <!-- 关联能力 -->
<developer-associated-ability <developer-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
:associatedComponents="associatedComponents" id="developer-associated-ability" class="scrollBox"></developer-associated-ability>
id="developer-associated-ability" <!-- 组件展示 视频 -->
class="scrollBox" <Developer-presentation :dataList="dataList.data" id="eveloper-presentation" class="scrollBox">
></developer-associated-ability> </Developer-presentation>
<!-- 功能介绍--> <!-- 功能介绍-->
<developer-function-intorduction <developer-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
:dataList="dataList.data" </developer-function-intorduction>
id="function-introduction"
class="scrollBox"
></developer-function-intorduction>
<!-- 应用场景 --> <!-- 应用场景 -->
<developer-application-scenarios <developer-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
:dataList="dataList.data" </developer-application-scenarios>
id="application-scenarios"
class="scrollBox"
></developer-application-scenarios>
<!-- 应用案例 --> <!-- 应用案例 -->
<developer-application-case <developer-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
:dataList="dataList.data" </developer-application-case>
id="application-case"
class="scrollBox"
></developer-application-case>
<!-- 组件试用 --> <!-- 组件试用 -->
<developer-trial <developer-trial :dataList="dataList.data" id="developer-trial" class="scrollBox"></developer-trial>
:dataList="dataList.data"
id="developer-trial"
class="scrollBox"
></developer-trial>
<!-- 归属部门与服务商--> <!-- 归属部门与服务商-->
<developer-owning-department-and-service-provider <developer-owning-department-and-service-provider :dataList="dataList.data" id="department-and-service-provider"
:dataList="dataList.data" class="scrollBox"></developer-owning-department-and-service-provider>
id="department-and-service-provider"
class="scrollBox"
></developer-owning-department-and-service-provider>
<!-- 常见问题--> <!-- 常见问题-->
<developer-common-problem <developer-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
:dataList="dataList.data" </developer-common-problem>
id="common-problem"
class="scrollBox"
></developer-common-problem>
</div> </div>
</template> </template>
<script setup> <script setup>
import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景 import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue' import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue'
import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式 import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍 import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例 import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
import DeveloperTopDetails from '@/views/detailsAll/components/Developer/DeveloperTopDetails.vue' //头部基本信息 import DeveloperTopDetails from '@/views/detailsAll/components/Developer/DeveloperTopDetails.vue' //头部基本信息
import DeveloperNavigation from '@/views/detailsAll/components/Developer/DeveloperNavigation.vue' import DeveloperNavigation from '@/views/detailsAll/components/Developer/DeveloperNavigation.vue'
import DeveloperPresentation from '@/views/detailsAll/components/Developer/DeveloperPresentation.vue' //组件展示 import DeveloperPresentation from '@/views/detailsAll/components/Developer/DeveloperPresentation.vue' //组件展示
import DeveloperCommonProblem from '@/views/detailsAll/components/Developer/DeveloperCommonProblem' //常见问题 import DeveloperCommonProblem from '@/views/detailsAll/components/Developer/DeveloperCommonProblem' //常见问题
import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用 import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue' import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home' import {
import mybus from '@/myplugins/mybus' updateVisits,
const router = useRouter() selectOne,
const scrollTop = ref(0) queryPartAppByKeyId2,
const domArr = ref([]) browsingInsert,
const selectNow = ref('') } from '@/api/home'
const dataList = reactive({ data: {} }) import mybus from '@/myplugins/mybus'
const id = router.currentRoute.value.query.id const router = useRouter()
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const scrollTop = ref(0)
const associatedComponents = ref([{ type: '应用资源', dataList: [] }]) const domArr = ref([])
document.documentElement.style.transition = 'all 0.3s ease' const selectNow = ref('')
document.documentElement.scrollTop = 0 const dataList = reactive({ data: {} })
document.body.style.transition = 'all 0.3s ease' const id = router.currentRoute.value.query.id
document.body.scrollTop = 0 const obj = JSON.parse(window.sessionStorage.getItem('preview'))
mybus.on('flyToView', (id) => { const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
let top = document.querySelector('#' + id).offsetTop - 50 let loading = ref(true)
// console.log(top, document.querySelector('#' + id).offsetTop) document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = top document.documentElement.scrollTop = 0
document.body.scrollTop = top document.body.style.transition = 'all 0.3s ease'
}) document.body.scrollTop = 0
onMounted(() => { mybus.on('flyToView', (id) => {
// console.clear() let top = document.querySelector('#' + id).offsetTop - 50
window.addEventListener('scroll', () => { // console.log(top, document.querySelector('#' + id).offsetTop)
domArr.value = document.querySelectorAll('.scrollBox') document.documentElement.scrollTop = top
scrollTop.value = document.body.scrollTop = top
document.documentElement.scrollTop || document.body.scrollTop })
for (let i = 0; i < domArr.value.length; i++) { onMounted(() => {
if (i === 0) { // console.clear()
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) { window.addEventListener('scroll', () => {
selectNow.value = domArr.value[i].id domArr.value = document.querySelectorAll('.scrollBox')
} scrollTop.value =
} else if (i == domArr.value.length - 1) { document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop.value >= domArr.value[i].offsetTop - 50) { for (let i = 0; i < domArr.value.length; i++) {
selectNow.value = domArr.value[i].id if (i === 0) {
} if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
} else { selectNow.value = domArr.value[i].id
if ( }
scrollTop.value >= domArr.value[i].offsetTop - 50 && } else if (i == domArr.value.length - 1) {
scrollTop.value <= domArr.value[i + 1].offsetTop - 50 if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
) { selectNow.value = domArr.value[i].id
selectNow.value = domArr.value[i].id }
} } else {
if (
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
) {
selectNow.value = domArr.value[i].id
} }
} }
})
})
const init = (id) => {
if (id) {
selectOne(id).then((res) => {
// console.clear()
dataList.data = res.data.data
console.log('初始化详情页=========================>', dataList.data)
const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
if (arrList.value && arrList.value.indexOf(id) === -1) {
arrList.value.push(id)
updateVisits({
id: res.data.data.id,
visits: res.data.data.visits || '0',
}).then(() => {
window.sessionStorage.setItem(
'visits',
JSON.stringify(arrList.value)
)
})
}
})
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
}
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
})
})
} else if (obj) {
dataList.data = obj
console.log('预览==============', obj)
} }
}
init(id)
onBeforeUnmount(() => {
mybus.off('flyToView')
}) })
})
const init = (id) => {
if (id) {
let queryPartAppByKeyIdParams = {
keyId: id,
}
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[0].dataList = res.data.data
loading.value = false
})
selectOne(id).then((res) => {
// console.clear()
dataList.data = res.data.data
console.log('初始化详情页=========================>', dataList.data)
const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
if (arrList.value && arrList.value.indexOf(id) === -1) {
arrList.value.push(id)
updateVisits({
id: res.data.data.id,
visits: res.data.data.visits || '0',
}).then(() => {
window.sessionStorage.setItem(
'visits',
JSON.stringify(arrList.value)
)
})
}
// 浏览记录
browsingInsert({
resourceId: res.data.data.id,
}).then(() => {
console.log('浏览记录+1')
})
})
associatedComponents.value.map((item, index) => { })
} else if (obj) {
dataList.data = obj
console.log('预览==============', obj)
}
}
init(id)
const associatedComponentsFunction = () => {
if (associatedComponents.value[0].dataList.length > 0) {
return associatedComponents.value
}
}
onBeforeUnmount(() => {
mybus.off('flyToView')
})
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.fixed { .fixed {
position: fixed; position: fixed;
z-index: 2000; z-index: 2000;
top: 0; top: 0;
left: 0; left: 0;
} }
.fixed2 > div:nth-of-type(3) {
margin-top: 0.84rem; .fixed2>div:nth-of-type(3) {
} margin-top: 0.84rem;
}
</style> </style>

285
front/src/views/detailsAll/LayerService.vue
View File

@ -8,173 +8,156 @@
<template> <template>
<div class="application-details" :class="{ fixed2: scrollTop >= 600 }"> <div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
<!-- 头部基本信息 --> <!-- 头部基本信息 -->
<layer-service-top-details <layer-service-top-details :dataList="dataList.data"></layer-service-top-details>
:dataList="dataList.data"
></layer-service-top-details>
<!-- 导航 --> <!-- 导航 -->
<layer-service-navigation <layer-service-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
:dataList="dataList.data" :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></layer-service-navigation>
:associatedComponents="associatedComponents"
:class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow"
></layer-service-navigation>
<!-- 关联能力 --> <!-- 关联能力 -->
<layer-service-associated-ability <layer-service-associated-ability :associatedComponents="associatedComponents" id="layer-service-associated-ability"
:associatedComponents="associatedComponents" class="scrollBox" v-if="!loading"></layer-service-associated-ability>
id="layer-service-associated-ability"
class="scrollBox"
></layer-service-associated-ability>
<!-- 图层展示 视频 --> <!-- 图层展示 视频 -->
<layer-service-presentation <layer-service-presentation :dataList="dataList.data" id="service-presentation" class="scrollBox">
:dataList="dataList.data" </layer-service-presentation>
id="service-presentation"
class="scrollBox"
></layer-service-presentation>
<!-- 图层信息--> <!-- 图层信息-->
<layer-service-information <layer-service-information :dataList="dataList.data" id="service-information" class="scrollBox">
:dataList="dataList.data" </layer-service-information>
id="service-information"
class="scrollBox"
></layer-service-information>
<!-- 应用场景 --> <!-- 应用场景 -->
<layer-service-application-scenarios <layer-service-application-scenarios :dataList="dataList.data" id="service-application-scenarios" class="scrollBox">
:dataList="dataList.data" </layer-service-application-scenarios>
id="service-application-scenarios"
class="scrollBox"
></layer-service-application-scenarios>
<!-- 应用案例 --> <!-- 应用案例 -->
<layer-service-application-case <layer-service-application-case :dataList="dataList.data" id="service-application-case" class="scrollBox">
:dataList="dataList.data" </layer-service-application-case>
id="service-application-case"
class="scrollBox"
></layer-service-application-case>
<!-- 图层预览 --> <!-- 图层预览 -->
<layer-service-preview <layer-service-preview :dataList="dataList.data" id="service-preview" class="scrollBox"></layer-service-preview>
:dataList="dataList.data"
id="service-preview"
class="scrollBox"
></layer-service-preview>
<!-- 使用方式--> <!-- 使用方式-->
<layer-service-usage-mode <layer-service-usage-mode :dataList="dataList.data" id="service-usage-mode" class="scrollBox">
:dataList="dataList.data" </layer-service-usage-mode>
id="service-usage-mode"
class="scrollBox"
></layer-service-usage-mode>
<!-- 常见问题--> <!-- 常见问题-->
<layer-service-common-problem <layer-service-common-problem :dataList="dataList.data" id="service-common-problem" class="scrollBox">
:dataList="dataList.data" </layer-service-common-problem>
id="service-common-problem"
class="scrollBox"
></layer-service-common-problem>
</div> </div>
</template> </template>
<script setup> <script setup>
import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例 import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue' import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue'
import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景 import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景
import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题 import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题
import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息 import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息
import LayerServiceNavigation from '@/views/detailsAll/components/LayerService/LayerServiceNavigation.vue' //导航 import LayerServiceNavigation from '@/views/detailsAll/components/LayerService/LayerServiceNavigation.vue' //导航
import LayerServicePresentation from '@/views/detailsAll/components/LayerService/LayerServicePresentation.vue' //图层展示 import LayerServicePresentation from '@/views/detailsAll/components/LayerService/LayerServicePresentation.vue' //图层展示
import LayerServicePreview from '@/views/detailsAll/components/LayerService/LayerServicePreview.vue' //图层预览 import LayerServicePreview from '@/views/detailsAll/components/LayerService/LayerServicePreview.vue' //图层预览
import LayerServiceTopDetails from '@/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue' //头部基本信息 import LayerServiceTopDetails from '@/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue' //头部基本信息
import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式 import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue' import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home' import {
import mybus from '@/myplugins/mybus' updateVisits,
const router = useRouter() selectOne,
const scrollTop = ref(0) queryPartAppByKeyId2,
const domArr = ref([]) browsingInsert,
const selectNow = ref('') } from '@/api/home'
const dataList = reactive({ data: {} }) import mybus from '@/myplugins/mybus'
const id = router.currentRoute.value.query.id const router = useRouter()
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const scrollTop = ref(0)
const associatedComponents = ref([{ type: '应用资源', dataList: [] }]) const domArr = ref([])
document.documentElement.style.transition = 'all 0.3s ease' const selectNow = ref('')
document.documentElement.scrollTop = 0 const dataList = reactive({ data: {} })
document.body.style.transition = 'all 0.3s ease' const id = router.currentRoute.value.query.id
document.body.scrollTop = 0 const obj = JSON.parse(window.sessionStorage.getItem('preview'))
mybus.on('flyToView', (id) => { const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
let top = document.querySelector('#' + id).offsetTop - 50 let loading = ref(true)
// console.log(top, document.querySelector('#' + id).offsetTop) document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = top document.documentElement.scrollTop = 0
document.body.scrollTop = top document.body.style.transition = 'all 0.3s ease'
}) document.body.scrollTop = 0
onMounted(() => { mybus.on('flyToView', (id) => {
// console.clear() let top = document.querySelector('#' + id).offsetTop - 50
window.addEventListener('scroll', () => { // console.log(top, document.querySelector('#' + id).offsetTop)
domArr.value = document.querySelectorAll('.scrollBox') document.documentElement.scrollTop = top
scrollTop.value = document.body.scrollTop = top
document.documentElement.scrollTop || document.body.scrollTop })
for (let i = 0; i < domArr.value.length; i++) { onMounted(() => {
if (i === 0) { // console.clear()
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) { window.addEventListener('scroll', () => {
selectNow.value = domArr.value[i].id domArr.value = document.querySelectorAll('.scrollBox')
} scrollTop.value =
} else if (i == domArr.value.length - 1) { document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop.value >= domArr.value[i].offsetTop - 50) { for (let i = 0; i < domArr.value.length; i++) {
selectNow.value = domArr.value[i].id if (i === 0) {
} if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
} else { selectNow.value = domArr.value[i].id
if ( }
scrollTop.value >= domArr.value[i].offsetTop - 50 && } else if (i == domArr.value.length - 1) {
scrollTop.value <= domArr.value[i + 1].offsetTop - 50 if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
) { selectNow.value = domArr.value[i].id
selectNow.value = domArr.value[i].id }
} } else {
if (
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
) {
selectNow.value = domArr.value[i].id
} }
} }
})
})
const init = (id) => {
if (id) {
selectOne(id).then((res) => {
// console.clear()
dataList.data = res.data.data
console.log('初始化详情页=========================>', dataList.data)
const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
if (arrList.value && arrList.value.indexOf(id) === -1) {
arrList.value.push(id)
updateVisits({
id: res.data.data.id,
visits: res.data.data.visits || '0',
}).then(() => {
window.sessionStorage.setItem(
'visits',
JSON.stringify(arrList.value)
)
})
}
})
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
}
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
})
})
} else if (obj) {
dataList.data = obj
console.log('预览==============', obj)
} }
}
init(id)
onBeforeUnmount(() => {
mybus.off('flyToView')
}) })
})
const init = (id) => {
if (id) {
selectOne(id).then((res) => {
// console.clear()
dataList.data = res.data.data
console.log('初始化详情页=========================>', dataList.data)
const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
if (arrList.value && arrList.value.indexOf(id) === -1) {
arrList.value.push(id)
updateVisits({
id: res.data.data.id,
visits: res.data.data.visits || '0',
}).then(() => {
window.sessionStorage.setItem(
'visits',
JSON.stringify(arrList.value)
)
})
}
// 浏览记录
browsingInsert({
resourceId: res.data.data.id,
}).then(() => {
console.log('浏览记录+1')
})
})
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
}
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
loading.value = false
})
})
} else if (obj) {
dataList.data = obj
console.log('预览==============', obj)
}
}
init(id)
onBeforeUnmount(() => {
mybus.off('flyToView')
})
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.fixed { .fixed {
position: fixed; position: fixed;
z-index: 2000; z-index: 2000;
top: 0; top: 0;
left: 0; left: 0;
} }
.fixed2 > div:nth-of-type(3) {
margin-top: 0.84rem; .fixed2>div:nth-of-type(3) {
} margin-top: 0.84rem;
}
</style> </style>

84
front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
View File

@ -1,30 +1,79 @@
<template> <template>
<div class="application-associated-ability" v-if="flag"> <div class="application-associated-ability" v-if="flag">
<detals-title title="关联应用" type="ASSOCIATED"></detals-title> <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main"> <div
class="application-associated-ability-main"
v-if="dataFrom[0].dataList.length < 4"
>
<div <div
class="associated-ability-card" class="associated-ability-card"
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList" v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id" :key="dataListitem.id"
@click="switchFunction(dataListitem.id)" @click="switchFunction(dataListitem.id)"
> >
<div class="associated-ability-card-title"> <a-tooltip>
{{ dataListitem.name }} <template #title>{{ dataListitem.name }}</template>
</div> <div class="associated-ability-card-title">
<div class="associated-ability-card-content"> {{ dataListitem.name }}
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div> </div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div> </div>
</div> </div>
</div> </div>
<div class="application-associated-ability-main" v-else>
<swiper
:slidesPerView="3"
:spaceBetween="30"
:pagination="{ clickable: true }"
:modules="modules"
class="mySwiper"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id"
>
<div
class="associated-ability-card"
@click="switchFunction(dataListitem.id)"
>
<a-tooltip>
<template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
const router = useRouter() const router = useRouter()
const modules = ref([Pagination])
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({ const props = defineProps({
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Array, default: null },
@ -40,7 +89,7 @@
// id: id, // id: id,
// }, // },
// }) // })
window.open(window.SITE_CONFIG.previewUrl+ '#/details?id=' + id) window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
// alert(id) // alert(id)
} }
console.log('这个是空值', props.associatedComponents[0]) console.log('这个是空值', props.associatedComponents[0])
@ -78,7 +127,7 @@
<style lang="less" scoped> <style lang="less" scoped>
.application-associated-ability { .application-associated-ability {
padding-top: 0.8rem; padding-top: 0.8rem;
padding-bottom: 0.8rem; padding-bottom: 0.6rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -86,20 +135,31 @@
margin-top: 0.4rem; margin-top: 0.4rem;
width: 13.3rem; width: 13.3rem;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around !important;
:deep(.swiper) {
padding-bottom: 0.6rem;
}
.associated-ability-card { .associated-ability-card {
width: 3.2rem; width: 3.2rem;
height: 2.78rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border: 1px solid #e4e6f5; border: 1px solid #e4e6f5;
border-radius: 0.1rem; border-radius: 0.1rem;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
margin-right: 0.2rem;
margin-top: 0.2rem;
cursor: pointer; cursor: pointer;
.associated-ability-card-title { .associated-ability-card-title {
width: 2.2rem;
padding-top: 0.3rem; padding-top: 0.3rem;
font-size: 0.22rem; font-size: 0.22rem;
text-align: center; text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.associated-ability-card-content { .associated-ability-card-content {
width: 100%; width: 100%;
@ -111,6 +171,10 @@
margin-right: 0.15rem; margin-right: 0.15rem;
margin-top: 0.15rem; margin-top: 0.15rem;
text-align: center; text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
} }
} }
} }

41
front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-08 14:54:01 * @Date: 2022-06-08 14:54:01
* @LastEditors: hisense.wuhongjian * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-30 17:09:40 * @LastEditTime: 2022-07-05 19:38:06
* @Description: 算法详情页导航 * @Description: 算法详情页导航
--> -->
<template> <template>
@ -65,25 +65,27 @@
]) ])
const list = ref([]) const list = ref([])
// 根据能力id查询是否存在关联应用 // 根据能力id查询是否存在关联应用
queryPartAppByKeyId2({ keyId: keyId }).then((res) => { if (keyId) {
console.log('ressssssss', res) queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
if (res.data.data.length > 0) { console.log('ressssssss', res)
// 存在关联应用时在导航栏加入关联应用 if (res.data.data.length > 0) {
navList.value.unshift({ // 存在关联应用时在导航栏加入关联应用
name: '关联应用', navList.value.unshift({
key: 'algorithm-associated-ability', name: '关联应用',
show: true, key: 'algorithm-associated-ability',
}) show: true,
// list.value.push('关联应用') })
console.log('navList', navList) // list.value.push('关联应用')
} console.log('navList', navList)
}) }
})
}
const props = defineProps({ const props = defineProps({
selectNow: { type: String, default: '' }, selectNow: { type: String, default: '' },
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
const select = ref('algorithm-display') const select = ref('algorithm-associated-ability')
const selectNav = (key) => { const selectNav = (key) => {
select.value = key select.value = key
@ -101,7 +103,7 @@
list.value.push(item.attrType) list.value.push(item.attrType)
} else if (item.attrType === '算法介绍视频') { } else if (item.attrType === '算法介绍视频') {
list.value.push('算法展示') list.value.push('算法展示')
} else if (item.attrType === '试用地址') { } else if (item.attrType === '试用地址' && item.attrValue) {
list.value.push('算法试用') list.value.push('算法试用')
} else if (item.attrType === '计费标准信息') { } else if (item.attrType === '计费标准信息') {
list.value.push('计费标准') list.value.push('计费标准')
@ -125,9 +127,8 @@
navList.value.filter((item) => item.name === list.value[0]) navList.value.filter((item) => item.name === list.value[0])
) )
if (navList.value.filter((item) => item.name === list.value[0])[0]) { if (navList.value.filter((item) => item.name === list.value[0])[0]) {
debugger
select.value = navList.value.filter( select.value = navList.value.filter(
(item) => item.name === list.value[0] (item) => (item.name === '关联应用') | (item.name === list.value[0])
)[0].key )[0].key
} }
console.log('11111111111111111111111111', list.value, navList.value) console.log('11111111111111111111111111', list.value, navList.value)
@ -153,7 +154,7 @@
list.value.push(item.attrType) list.value.push(item.attrType)
} else if (item.attrType === '算法介绍视频') { } else if (item.attrType === '算法介绍视频') {
list.value.push('算法展示') list.value.push('算法展示')
} else if (item.attrType === '试用地址') { } else if (item.attrType === '试用地址' && item.attrValue) {
list.value.push('算法试用') list.value.push('算法试用')
} else if (item.attrType === '计费标准信息') { } else if (item.attrType === '计费标准信息') {
list.value.push('计费标准') list.value.push('计费标准')
@ -166,7 +167,7 @@
list.value.push('使用方式') list.value.push('使用方式')
} }
}) })
list.value.push('关联应用') list.value.unshift('关联应用')
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
if (list.value.indexOf(item.name) > -1) { if (list.value.indexOf(item.name) > -1) {

8
front/src/views/detailsAll/components/Algorithm/AlgorithmOnTrial.vue
View File

@ -1,8 +1,8 @@
<!-- <!--
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-09 09:29:29 * @Date: 2022-06-09 09:29:29
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-13 15:21:26 * @LastEditTime: 2022-07-05 20:25:49
* @Description: 算法详情 算法试用 * @Description: 算法详情 算法试用
--> -->
<template> <template>
@ -25,7 +25,7 @@
const onTrial = ref('') const onTrial = ref('')
if (props.dataList.infoList) { if (props.dataList.infoList) {
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => item.attrType === '试用地址' (item) => item.attrType === '试用地址' && item.attrValue
)[0] )[0]
if (!obj) { if (!obj) {
flag.value = false flag.value = false
@ -37,7 +37,7 @@
() => props.dataList, () => props.dataList,
(val) => { (val) => {
if (val) { if (val) {
let obj = val.infoList.filter((item) => item.attrType === '试用地址')[0] let obj = val.infoList.filter((item) => item.attrType === '试用地址' && item.attrValue)[0]
if (!obj) { if (!obj) {
flag.value = false flag.value = false
} else { } else {

15
front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-08 11:56:28 * @Date: 2022-06-08 11:56:28
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-01 14:16:18 * @LastEditTime: 2022-07-05 11:41:52
* @Description: 算法详情页头部 * @Description: 算法详情页头部
--> -->
<template> <template>
@ -18,11 +18,15 @@
<!-- <span class="name">{{ props.dataList.name }}</span> --> <!-- <span class="name">{{ props.dataList.name }}</span> -->
<div class="label-content"> <div class="label-content">
<p class="lable-father"> <p class="lable-father">
<span class="label"> <span class="label" v-if="props.dataList.type">
{{ componentType || props.dataList.type }} {{ props.dataList.type }}
</span>
<span class="label" v-if="props.dataList.shareType">
{{ props.dataList.shareType }}
</span>
<span class="label" v-if="props.dataList.shareCondition">
{{ props.dataList.shareCondition }}
</span> </span>
<span class="label">{{ props.dataList.shareType }}</span>
<span class="label">{{ props.dataList.shareCondition }}</span>
</p> </p>
</div> </div>
<!-- <span class="label">免费</span> --> <!-- <span class="label">免费</span> -->
@ -96,6 +100,7 @@
resourceName: props.dataList.name, resourceName: props.dataList.name,
time: props.dataList.createDate, time: props.dataList.createDate,
type: props.dataList.type, type: props.dataList.type,
componentType: '智能算法',
}, },
], ],
deptId: props.dataList.deptId, deptId: props.dataList.deptId,

43
front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
View File

@ -17,7 +17,10 @@
<div class="content-left-content"> <div class="content-left-content">
<p> <p>
<span>{{ item.link.name }}</span> <span>{{ item.link.name }}</span>
<span>{{ item.link.value }}</span> <a-tooltip>
<template #title>{{ item.link.value }}</template>
<span>{{ item.link.value }}</span>
</a-tooltip>
</p> </p>
<p> <p>
<span>{{ item.postMethod.name }}</span> <span>{{ item.postMethod.name }}</span>
@ -62,6 +65,7 @@
<script setup> <script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { message } from 'ant-design-vue'
import { pinyin } from 'pinyin-pro' import { pinyin } from 'pinyin-pro'
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
let dataFrom = ref({ let dataFrom = ref({
@ -72,7 +76,7 @@
title: '技术对接', title: '技术对接',
titleSon: '调用接口', titleSon: '调用接口',
link: { link: {
name: '接口地址：', name: '服务接口：',
value: '', value: '',
}, },
postMethod: { postMethod: {
@ -181,12 +185,19 @@
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => item.attrType === '技术文档' (item) => item.attrType === '技术文档'
)[0] )[0]
console.log('dataFrom.value.link', obj.attrValue) // console.log('dataFrom.value.link', obj.attrValue)
window.open( if (obj) {
window.SITE_CONFIG.previewUrl + window.open(
'hisense_office/onlinePreview?url=' + window.SITE_CONFIG.previewUrl +
btoa(encodeURI(obj.attrValue)) 'hisense_office/onlinePreview?url=' +
) btoa(encodeURI(obj.attrValue))
)
} else {
message.config({
top: '100px', // 距离顶部的位置
})
message.error('暂未上传技术文档')
}
} }
</script> </script>
@ -225,10 +236,9 @@
color: rgba(33, 41, 86, 0.8); color: rgba(33, 41, 86, 0.8);
line-height: 20px; line-height: 20px;
p { p {
display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; text-overflow: ellipsis;
-webkit-box-orient: vertical; white-space: nowrap;
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
@ -283,13 +293,16 @@
p { p {
// width: 160px; // width: 160px;
height: 20px; height: 20px;
display: -webkit-box; overflow: hidden;
// overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
margin-right: 15px; margin-right: 15px;
span { span {
display: inline-block;
max-width: 1.2rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
} }

29
front/src/views/detailsAll/components/Algorithm/PictureCharacterRecognition.vue
View File

@ -6,11 +6,7 @@
<div> <div>
<div class="title">图片识别</div> <div class="title">图片识别</div>
<div class="box"> <div class="box">
<a-image <a-image :width="510" :height="340" :src="responseUrl" />
:width="510"
:height="340"
:src="responseUrl"
/>
<a-upload <a-upload
v-model:file-list="fileList" v-model:file-list="fileList"
name="file" name="file"
@ -88,18 +84,17 @@
const menuOpenKeys2 = ref(['全文还原']) const menuOpenKeys2 = ref(['全文还原'])
let responseUrl = ref('static/image/test.jpg') let responseUrl = ref('static/image/test.jpg')
const handleChange = (info) => { const handleChange = (info) => {
debugger; if (info.file.status !== 'uploading') {
if (info.file.status !== 'uploading') { console.log(info.file, info.fileList)
console.log(info.file, info.fileList) }
} if (info.file.status === 'done') {
if (info.file.status === 'done') { message.success(`${info.file.name} file uploaded successfully`)
message.success(`${info.file.name} file uploaded successfully`) responseUrl.value = info.file.response.data
responseUrl.value = info.file.response.data checkImage()
checkImage() } else if (info.file.status === 'error') {
} else if (info.file.status === 'error') { message.error(`${info.file.name} file upload failed.`)
message.error(`${info.file.name} file upload failed.`) }
} }
}
const checkImage = () => { const checkImage = () => {
getUrlBase64(responseUrl.value, 'jpg', (base64) => { getUrlBase64(responseUrl.value, 'jpg', (base64) => {
console.log('1111111', base64) console.log('1111111', base64)

143
front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
View File

@ -1,62 +1,118 @@
<template> <template>
<div class="application-associated-ability" v-if="flag"> <div class="application-associated-ability" v-if="flag">
<detals-title title="关联组件" type="RELEVANCE"></detals-title> <detals-title title="关联组件" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main"> <div
class="application-associated-ability-main"
v-if="dataFrom[0].dataList.length < 4"
>
<div <div
class="associated-ability-card" class="associated-ability-card"
v-for="(item, index) in dataFrom" v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="item.type" :key="dataListitem.id"
@click="switchFunction(dataListitem.id)"
:class="cardFunction(dataFrom[0].dataList)"
> >
<div class="associated-ability-card-title"> <div class="icon"></div>
{{ item.type }} <a-tooltip>
</div> <template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-content"> <div class="associated-ability-card-title">
<div
class="associated-ability-card-content-font"
v-for="(dataListitem, dataListindex) in item.dataList"
:key="dataListitem.id"
@click="switchFunction(dataListitem.id)"
>
<span>{{ dataListindex + 1 }}、</span>
{{ dataListitem.name }} {{ dataListitem.name }}
</div> </div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description || '' }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description || '' }}
</div>
</a-tooltip>
</div> </div>
</div> </div>
</div> </div>
<div class="application-associated-ability-main" v-else>
<swiper
:slidesPerView="3"
:spaceBetween="30"
:pagination="{ clickable: true }"
:modules="modules"
class="mySwiper"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id"
>
<div
class="associated-ability-card"
@click="switchFunction(dataListitem.id)"
:class="cardFunction(dataFrom[0].dataList)"
>
<div class="icon"></div>
<a-tooltip>
<template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description || '' }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description || '' }}
</div>
</a-tooltip>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({ const props = defineProps({
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Array, default: null },
}) })
const modules = ref([Pagination])
const dataFrom = ref([]) const dataFrom = ref([])
const flag = ref(true) const flag = ref(true)
const oldid = router.currentRoute.value.query.id const oldid = router.currentRoute.value.query.id
//点击查看详情 //点击查看详情
const switchFunction = (id) => { const switchFunction = (id) => {
router.push({ // router.push({
path: '/details', // path: '/details',
query: { // query: {
id: id, // id: id,
}, // },
}) // })
window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
// alert(id)
} }
if (props.associatedComponents) { if (props.associatedComponents[0].dataList.length != 0) {
console.log('这个是空值', props.associatedComponents)
flag.value = true flag.value = true
dataFrom.value = props.associatedComponents dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value) console.log('dataFrom.value', dataFrom.value)
} else { } else {
flag.value = false flag.value = false
} }
//根据数据多少决定对齐方式
const cardFunction = (item) => {
if (item.length < 5) {
return 'card-function-class'
}
}
watch( watch(
() => props.associatedComponents, () => props.associatedComponents,
(val) => { (val) => {
if (val) { if (val[0].length != 0) {
flag.value = true flag.value = true
dataFrom.value = props.associatedComponents dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value) console.log('dataFrom.value', dataFrom.value)
@ -79,28 +135,47 @@
<style lang="less" scoped> <style lang="less" scoped>
.application-associated-ability { .application-associated-ability {
padding-top: 0.8rem; padding-top: 0.8rem;
padding-bottom: 0.8rem; padding-bottom: 0.6rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.application-associated-ability-main { .application-associated-ability-main {
margin-top: 0.4rem; margin-top: 0.4rem;
width: 13.14rem; width: 13.3rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-around;
position: relative;
:deep(.swiper) {
padding-bottom: 0.6rem;
}
.associated-ability-card { .associated-ability-card {
width: 4.28rem; width: 3.2rem;
height: 2.78rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border: 1px solid #e4e6f5; border: 1px solid #e4e6f5;
border-radius: 0.1rem; border-radius: 0.1rem;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
margin-right: 0.2rem;
margin-top: 0.2rem;
padding-top: 0.3rem;
cursor: pointer; cursor: pointer;
.icon {
width: 82px;
height: 82px;
background: url('~@/assets/detailsAll/sf_icon1.png') no-repeat;
background-size: 100%;
}
.associated-ability-card-title { .associated-ability-card-title {
width: 2.2rem;
padding-top: 0.3rem; padding-top: 0.3rem;
font-size: 0.22rem; font-size: 0.22rem;
text-align: center; text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.associated-ability-card-content { .associated-ability-card-content {
width: 100%; width: 100%;
@ -111,12 +186,18 @@
color: #999; color: #999;
margin-right: 0.15rem; margin-right: 0.15rem;
margin-top: 0.15rem; margin-top: 0.15rem;
} text-align: center;
.associated-ability-card-content-font:hover { display: -webkit-box;
color: #0058e1; overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
} }
} }
} }
.card-function-class {
display: flex;
justify-content: center;
}
.associated-ability-card:hover { .associated-ability-card:hover {
border-radius: 0.02rem; border-radius: 0.02rem;
border: 0.01rem solid #0058e1; border: 0.01rem solid #0058e1;

186
front/src/views/detailsAll/components/Application/ApplicationCommonProblem.vue
View File

@ -23,104 +23,111 @@
</template> </template>
<script setup> <script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
const flag = ref(true) const flag = ref(true)
let dataFrom = ref([]) let dataFrom = ref([])
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
if (props.dataList.infoList) { if (props.dataList.infoList) {
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => item.attrType === '常见问题' (item) => item.attrType === '常见问题'
)[0] )[0]
if (!obj) { if (!obj) {
flag.value = false flag.value = false
} else { } else {
obj.attrValue = JSON.parse(obj.attrValue) obj.attrValue = JSON.parse(obj.attrValue)
obj.attrValue.map((item) => { obj.attrValue.map((item) => {
let params = { let params = {
title: item.question, title: item.question,
answer: item.answer, answer: item.answer,
} }
dataFrom.value.push(params) dataFrom.value.push(params)
}) })
}
} }
watch( }
() => props.dataList, watch(
(val) => { () => props.dataList,
if (val) { (val) => {
let obj = val.infoList.filter((item) => item.attrType === '常见问题')[0] if (val) {
if (!obj) { let obj = val.infoList.filter((item) => item.attrType === '常见问题')[0]
flag.value = false if (!obj) {
} else { flag.value = false
obj.attrValue = JSON.parse(obj.attrValue) } else {
obj.attrValue.map((item) => { obj.attrValue = JSON.parse(obj.attrValue)
let params = { obj.attrValue.map((item) => {
title: item.question, let params = {
answer: item.answer, title: item.question,
} answer: item.answer,
dataFrom.value.push(params) }
}) dataFrom.value.push(params)
} })
} }
} }
) }
)
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.cpmmon-problem { .cpmmon-problem {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-top: 80px; padding-top: 160px;
background: #f7f8fa; background: #f7f8fa;
.content {
width: 1300px; .content {
margin: 20px 0px; width: 1300px;
background: #ffffff; margin: 20px 0px;
padding: 40px; background: #ffffff;
.content-son { padding: 40px;
font-size: 20px;
margin-bottom: 60px; .content-son {
.content-top { font-size: 20px;
display: flex; margin-bottom: 60px;
align-items: center;
margin-bottom: 20px; .content-top {
line-height: 20px; display: flex;
} align-items: center;
.content-bottom { margin-bottom: 20px;
display: flex; line-height: 20px;
line-height: 34px; }
color: #666666;
} .content-bottom {
.content-top, display: flex;
.content-bottom { line-height: 34px;
div:last-child { color: #666666;
width: calc(100% - 54px); }
}
} .content-top,
.top-img { .content-bottom {
width: 34px; div:last-child {
height: 30px; width: calc(100% - 54px);
background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
background-position: center;
background-size: cover;
margin-right: 20px;
}
.bottom-img {
width: 34px;
height: 30px;
background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
ackground-size: cover;
background-position: center;
margin-right: 20px;
} }
} }
.content-son:last-child {
margin-bottom: 0px; .top-img {
width: 34px;
height: 30px;
background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
background-position: center;
background-size: cover;
margin-right: 20px;
} }
.bottom-img {
width: 34px;
height: 30px;
background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
ackground-size: cover;
background-position: center;
margin-right: 20px;
}
}
.content-son:last-child {
margin-bottom: 0px;
} }
} }
@ -131,4 +138,5 @@
padding: 0.5rem 0; padding: 0.5rem 0;
font-size: 0.2rem; font-size: 0.2rem;
} }
}
</style> </style>

67
front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
View File

@ -15,11 +15,21 @@
> >
<div class="card-title">{{ item.childrenTitle }}</div> <div class="card-title">{{ item.childrenTitle }}</div>
<div class="card-content"> <div class="card-content">
<div v-for="carditem in item.childrenContent" :key="carditem"> <div
v-for="carditem in item.childrenContent"
:key="carditem"
:class="
carditem.attrType == '访问地址' ? 'access-to-the-address' : ''
"
>
<span>{{ carditem.attrType }}：</span> <span>{{ carditem.attrType }}：</span>
<a-tooltip> <a-tooltip>
<template #title>{{ carditem.attrValue }}</template> <template #title>{{ carditem.attrValue }}</template>
<span>{{ carditem.attrValue }}</span> <span
@click="addressFunction(carditem.attrType, carditem.attrValue)"
>
{{ carditem.attrValue }}
</span>
</a-tooltip> </a-tooltip>
</div> </div>
</div> </div>
@ -63,6 +73,12 @@
item.attrType === '等保定级' item.attrType === '等保定级'
) { ) {
dataFrom.value.content[1].childrenContent.push(item) dataFrom.value.content[1].childrenContent.push(item)
} else if (item.attrType === '访问地址') {
let obj = {
attrType: '访问地址',
attrValue: item.attrValue || '------',
}
dataFrom.value.content[0].childrenContent.push(obj)
} }
}) })
if (dataFrom.value.content[1].childrenContent.length <= 0) { if (dataFrom.value.content[1].childrenContent.length <= 0) {
@ -80,12 +96,12 @@
dataFrom.value.content[1].childrenContent.push(itemContent) dataFrom.value.content[1].childrenContent.push(itemContent)
}) })
} }
}
let obj = { //访问地址跳转方法
attrType: '访问地址', const addressFunction = (name, itemValue) => {
attrValue: props.dataList.link || '------', if (name == '访问地址') {
window.open(itemValue)
} }
dataFrom.value.content[0].childrenContent.push(obj)
} }
watch( watch(
() => props.dataList, () => props.dataList,
@ -105,6 +121,12 @@
item.attrType === '等保定级' item.attrType === '等保定级'
) { ) {
dataFrom.value.content[1].childrenContent.push(item) dataFrom.value.content[1].childrenContent.push(item)
} else if (item.attrType === '访问地址') {
let obj = {
attrType: '访问地址',
attrValue: item.attrValue || '------',
}
dataFrom.value.content[0].childrenContent.push(obj)
} }
}) })
if (dataFrom.value.content[1].childrenContent.length <= 0) { if (dataFrom.value.content[1].childrenContent.length <= 0) {
@ -122,11 +144,11 @@
dataFrom.value.content[1].childrenContent.push(itemContent) dataFrom.value.content[1].childrenContent.push(itemContent)
}) })
} }
let obj = { // let obj = {
attrType: '访问地址', // attrType: '访问地址',
attrValue: props.dataList.link || '------', // attrValue: props.dataList.link || '------',
} // }
dataFrom.value.content[0].childrenContent.push(obj) // dataFrom.value.content[0].childrenContent.push(obj)
} }
} }
) )
@ -138,13 +160,16 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.title { .title {
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
.content { .content {
display: flex; display: flex;
width: 13rem; width: 13rem;
justify-content: space-between; justify-content: space-between;
.content-card { .content-card {
height: 1.5rem; height: 1.5rem;
width: 6.2rem; width: 6.2rem;
@ -158,12 +183,14 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
.card-title { .card-title {
font-size: 0.26rem; font-size: 0.26rem;
line-height: 0.26rem; line-height: 0.26rem;
color: #212956; color: #212956;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
.card-content { .card-content {
div { div {
display: inline-block; display: inline-block;
@ -172,17 +199,25 @@
font-size: 0.2rem; font-size: 0.2rem;
line-height: 0.2rem; line-height: 0.2rem;
max-width: 5.84rem; max-width: 5.84rem;
overflow: hidden; /*超出的隐藏*/ overflow: hidden;
/*超出的隐藏*/
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; /*超出的设置为省略号*/ text-overflow: ellipsis;
/*超出的设置为省略号*/
span { span {
display: inline-block; display: inline-block;
max-width: 4rem; max-width: 4rem;
overflow: hidden; /*超出的隐藏*/ overflow: hidden;
/*超出的隐藏*/
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; /*超出的设置为省略号*/ text-overflow: ellipsis;
/*超出的设置为省略号*/
} }
} }
.access-to-the-address {
cursor: pointer;
}
} }
} }
} }

391
front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue
View File

@ -7,42 +7,26 @@
<DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle> <DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
</div> </div>
<div class="tab"> <div class="tab">
<div <div v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue" :key="itemSonTitle.name"
v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue" @click="tabSwitch(itemSonTitle.name)" class="tab-son" :class="
:key="itemSonTitle.name"
@click="tabSwitch(itemSonTitle.name)"
class="tab-son"
:class="
tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue) tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
" ">
>
<a-tooltip> <a-tooltip>
<template #title>{{ itemSonTitle.name }}</template> <template #title>{{ itemSonTitle.name }}</template>
<div <div class="tab-top" :class="
class="tab-top" tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
:class=" ">
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
"
>
{{ itemSonTitle.name }} {{ itemSonTitle.name }}
</div> </div>
</a-tooltip> </a-tooltip>
<div <div class="tab-bottom" v-if="tabInitialize() == itemSonTitle.name"></div>
class="tab-bottom"
v-if="tabInitialize() == itemSonTitle.name"
></div>
</div> </div>
</div> </div>
<template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle"> <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
<div class="content" v-if="tabindex == itemSonTitle.name"> <div class="content" v-if="tabindex == itemSonTitle.name">
<div class="content-left"> <div class="content-left">
<div class="content-left-scene" v-if="!itemSonTitle.img"></div> <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
<a-image <a-image :width="635" :height="340" :src="itemSonTitle.img" v-if="itemSonTitle.img"></a-image>
:width="635"
:height="340"
:src="itemSonTitle.img"
v-if="itemSonTitle.img"
></a-image>
</div> </div>
<div class="content-right"> <div class="content-right">
<div class="content-right-scene"> <div class="content-right-scene">
@ -60,194 +44,215 @@
</template> </template>
<script setup> <script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
const flag = ref(true) const flag = ref(true)
let dataFrom = ref([]) let dataFrom = ref([])
// tab切换方法 // tab切换方法
let tabindex = ref('场景说明一') let tabindex = ref('场景说明一')
//数据初始化 //数据初始化
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
if (props.dataList.infoList) { if (props.dataList.infoList) {
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => item.attrType === '功能介绍' (item) => item.attrType === '功能介绍'
)[0] )[0]
if (!obj) { if (!obj) {
flag.value = false flag.value = false
} else { } else {
obj.attrValue = JSON.parse(obj.attrValue) obj.attrValue = JSON.parse(obj.attrValue)
dataFrom.value = obj dataFrom.value = obj
tabindex.value = dataFrom.value.attrValue[0].name tabindex.value = dataFrom.value.attrValue[0].name
}
} }
watch( }
() => props.dataList, watch(
(val) => { () => props.dataList,
if (val) { (val) => {
let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0] if (val) {
if (!obj) { let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
flag.value = false if (!obj) {
} else { flag.value = false
obj.attrValue = JSON.parse(obj.attrValue) } else {
dataFrom.value = obj obj.attrValue = JSON.parse(obj.attrValue)
tabindex.value = dataFrom.value.attrValue[0].name dataFrom.value = obj
} tabindex.value = dataFrom.value.attrValue[0].name
} }
} }
)
//滚动条样式
function tabIndexClass(index, title, content) {
if (title == '功能介绍' && index == 0 && content.length > 6) {
return 'tab-son-class'
}
} }
//初始化tab切换（判断标题不同，点击事件的判断变量不同） )
function tabInitialize() { //滚动条样式
return tabindex.value function tabIndexClass(index, title, content) {
} if (title == '功能介绍' && index == 0 && content.length > 6) {
//tab切换点击事件 return 'tab-son-class'
function tabSwitch(name) {
tabindex.value = name
return tabindex.value
} }
}
//初始化tab切换（判断标题不同，点击事件的判断变量不同）
function tabInitialize() {
return tabindex.value
}
//tab切换点击事件
function tabSwitch(name) {
tabindex.value = name
return tabindex.value
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.function-intorduction { .function-intorduction {
width: 100%; width: 100%;
background: #f7f8fa; background: #f7f8fa;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: unset;
.application-scenarios-and-case-son {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow-x: unset; overflow: unset;
.application-scenarios-and-case-son {
padding-top: 0.8rem; .tab {
padding-bottom: 0.8rem; max-width: 13rem;
overflow-x: auto;
display: flex; display: flex;
flex-direction: column; justify-content: center;
align-items: center; color: #808080;
overflow: unset; border-bottom: 0.01rem #e4e6f5 solid;
.tab { margin-top: 0.45rem;
max-width: 13rem; margin-bottom: 0.4rem;
overflow-x: auto; cursor: pointer;
padding-left: 0.4rem;
padding-right: 0.4rem;
.tab-son {
display: flex; display: flex;
justify-content: center; flex-direction: column;
color: #808080; align-items: center;
border-bottom: 0.01rem #e4e6f5 solid; margin-right: 1rem;
margin-top: 0.45rem;
margin-bottom: 0.4rem; .tab-top {
cursor: pointer; min-width: 1.2rem;
padding-left: 0.4rem; font-size: 0.24rem;
padding-right: 0.4rem; line-height: 0.24rem;
.tab-son { margin-bottom: 0.2rem;
display: flex; max-width: 2rem;
flex-direction: column; height: 0.24rem;
align-items: center;
margin-right: 1rem;
.tab-top {
min-width: 1.2rem;
font-size: 0.24rem;
line-height: 0.24rem;
margin-bottom: 0.2rem;
max-width: 2rem;
height: 0.24rem;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.tab-top-down {
min-width: 1.2rem;
color: #526aff;
margin-bottom: 0.16rem;
}
.tab-bottom {
height: 0.04rem;
width: 0.6rem;
background: #526aff;
}
}
.tab-son-class {
margin-left: 4.3rem;
margin-bottom: 0.02rem;
}
.tab-son-class-two {
margin-left: 2.3rem;
margin-bottom: 0.02rem;
}
.tab-son:last-child {
margin-right: 0rem;
}
}
.tab::-webkit-scrollbar-thumb {
background: rgba(82, 106, 255, 0.4);
}
.content {
display: flex;
position: relative;
width: 100%;
min-width: 13rem;
height: 3.4rem;
.content-left {
position: absolute;
left: 0;
min-width: 6.2rem;
:deep(.ant-image-img) {
width: 100%;
height: 100%;
object-fit: contain;
}
// text-align: center;
.content-top {
text-align: left;
}
}
.content-right {
width: 6.2rem;
height: 3.4rem;
position: absolute;
right: 0;
display: flex;
justify-content: center;
}
.content-right-scene,
.content-right-case {
width: 6.2rem;
height: 3.4rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.content-left-scene,
.content-left-case {
height: 3.4rem;
width: 6.35rem;
border-radius: 0.1rem;
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
background-position: center;
background-size: 6.35rem 3.4rem;
}
.content-top {
font-size: 0.22rem;
line-height: 0.22rem;
color: #000000;
margin-bottom: 0.35rem;
}
.content-bottom {
font-size: 0.18rem;
color: #999999;
line-height: 0.26rem;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 6; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
text-align: center;
}
.tab-top-down {
min-width: 1.2rem;
color: #526aff;
margin-bottom: 0.16rem;
}
.tab-bottom {
height: 0.04rem;
width: 0.6rem;
background: #526aff;
} }
} }
.tab-son-class {
margin-left: 4.3rem;
margin-bottom: 0.02rem;
}
.tab-son-class-two {
margin-left: 2.3rem;
margin-bottom: 0.02rem;
}
.tab-son:last-child {
margin-right: 0rem;
}
} }
.application-scenarios-and-case-son:first-child {
padding-top: 1rem; .tab::-webkit-scrollbar-thumb {
background: rgba(82, 106, 255, 0.4);
}
.content {
display: flex;
position: relative;
width: 100%;
min-width: 13rem;
height: 3.4rem;
.content-left {
position: absolute;
left: 0;
min-width: 6.2rem;
:deep(.ant-image-img) {
width: 100%;
height: 100%;
object-fit: contain;
}
// text-align: center;
.content-top {
text-align: left;
}
}
.content-right {
width: 6.2rem;
height: 3.4rem;
position: absolute;
right: 0;
display: flex;
justify-content: center;
}
.content-right-scene,
.content-right-case {
width: 6.2rem;
height: 3.4rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.content-left-scene,
.content-left-case {
height: 3.4rem;
width: 6.35rem;
border-radius: 0.1rem;
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
background-position: center;
background-size: 6.35rem 3.4rem;
}
.content-top {
font-size: 0.22rem;
line-height: 0.22rem;
color: #000000;
margin-bottom: 0.35rem;
}
.content-bottom {
font-size: 0.18rem;
color: #999999;
line-height: 0.26rem;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
} }
} }
.application-scenarios-and-case-son:first-child {
padding-top: 1rem;
}
}
</style> </style>

311
front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
View File

@ -8,12 +8,7 @@
<template> <template>
<div class="application-navigation" v-if="navList.length > 0"> <div class="application-navigation" v-if="navList.length > 0">
<template v-for="nav in navList" :key="nav.key"> <template v-for="nav in navList" :key="nav.key">
<div <div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
class="nav"
:class="{ select: nav.key == select }"
v-if="nav.show"
@click="selectNav(nav.key)"
>
{{ nav.name }} {{ nav.name }}
<span class="line"></span> <span class="line"></span>
</div> </div>
@ -21,149 +16,179 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
const navList = ref([ import { useRouter } from 'vue-router'
{ import { queryPartAppByKeyId } from '@/api/home'
name: '应用展示', // 获取当前路由地址
key: 'application-presentation', const router = useRouter()
}, const keyId = router.currentRoute.value.query.id
{ const navList = ref([
name: '功能介绍', {
key: 'function-introduction', name: '应用展示',
}, key: 'application-presentation',
{ },
name: '关联组件', {
key: 'application-associated-components', name: '功能介绍',
}, key: 'function-introduction',
{ },
name: '关联组件', {
key: 'application-associated-ability', name: '使用能力',
}, key: 'ability-to-use',
{ },
name: '使用能力', {
key: 'ability-to-use', name: '部署与安全',
}, key: 'deployment-and-security',
{ },
name: '部署与安全', {
key: 'deployment-and-security', name: '归属部门与服务商',
}, key: 'department-and-service-provider',
{ },
name: '归属部门与服务商', {
key: 'department-and-service-provider', name: '常见问题',
}, key: 'common-problem',
{ },
name: '常见问题', ])
key: 'common-problem', const props = defineProps({
}, selectNow: { type: String, default: '' },
]) dataList: { type: Object, default: null },
const props = defineProps({ associatedComponents: { type: Array, default: null },
selectNow: { type: String, default: '' }, })
dataList: { type: Object, default: null }, const select = ref('application-associated-ability')
}) const list = ref([])
const select = ref('algorithm-display') // 根据能力id查询是否存在关联应用
const list = ref([]) if (keyId) {
const selectNav = (key) => { let params = {
select.value = key keyId: keyId,
mybus.emit('flyToView', select.value) type: '组件服务',
} }
if (props.dataList.infoList) { queryPartAppByKeyId(params).then((res) => {
list.value = [] console.log('ressssssss', res)
props.dataList.infoList.map((item) => { if (res.data.data.length != 0) {
if ( // 存在关联应用时在导航栏加入关联应用
item.attrType === '算法优势' || navList.value.unshift({
item.attrType === '常见问题' || name: '关联组件',
item.attrType === '使用能力' || key: 'application-associated-ability',
item.attrType === '关联组件' show: true,
) { })
list.value.push(item.attrType) list.value.unshift('关联组件')
} else if (item.attrType === '应用展示视频') {
list.value.push('应用展示')
}
})
list.value.push('关联组件')
navList.value.forEach((item) => {
console.log(item)
if (list.value.indexOf(item.name) > -1) {
item.show = true
}
})
select.value = navList.value.filter(
(item) => item.name === list.value[0]
)[0].key
console.log('11111111111111111111111111', list.value, navList.value)
}
watch(
() => props.selectNow,
(newValue) => {
select.value = newValue
} }
) })
watch( }
() => props.dataList, const selectNav = (key) => {
(val) => { select.value = key
if (val) { mybus.emit('flyToView', select.value)
list.value = [] }
val.infoList.map((item) => { if (props.dataList.infoList) {
if ( list.value = []
item.attrType === '功能介绍' || props.dataList.infoList.map((item) => {
item.attrType === '常见问题' || if (
item.attrType === '使用能力' || item.attrType === '功能介绍' ||
item.attrType === '关联组件' item.attrType === '常见问题' ||
) { item.attrType === '使用能力' ||
list.value.push(item.attrType) item.attrType === '关联组件'
} else if (item.attrType === '应用展示视频') { ) {
list.value.push('应用展示') list.value.push(item.attrType)
} } else if (item.attrType === '应用展示视频') {
}) list.value.push('应用展示')
list.value.push('关联组件') }
list.value.push('部署与安全') })
list.value.push('归属部门与服务商') list.value.unshift('关联组件')
navList.value.forEach((item) => { list.value.push('部署与安全')
console.log(item) list.value.push('归属部门与服务商')
if (list.value.indexOf(item.name) > -1) { navList.value.forEach((item) => {
item.show = true console.log(item)
} if (list.value.indexOf(item.name) > -1) {
}) item.show = true
if (list.value.length > 0) { }
})
if (list.value.length > 0) {
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
select.value = navList.value.filter(
(item) => (item.name === '关联组件') | (item.name === list.value[0])
)[0].key
}
}
console.log('11111111111111111111111111', list.value, navList.value)
}
watch(
() => props.selectNow,
(newValue) => {
select.value = newValue
}
)
watch(
() => props.dataList,
(val) => {
if (val) {
list.value = []
val.infoList.map((item) => {
if (
item.attrType === '功能介绍' ||
item.attrType === '常见问题' ||
item.attrType === '使用能力' ||
item.attrType === '关联组件'
) {
list.value.push(item.attrType)
} else if (item.attrType === '应用展示视频') {
list.value.push('应用展示')
}
})
list.value.unshift('关联组件')
list.value.push('部署与安全')
list.value.push('归属部门与服务商')
navList.value.forEach((item) => {
console.log(item)
if (list.value.indexOf(item.name) > -1) {
item.show = true
}
})
if (list.value.length > 0) {
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
select.value = navList.value.filter( select.value = navList.value.filter(
(item) => item.name === list.value[0] (item) =>
(item.name === '关联组件') | (item.name === list.value[0])
)[0].key )[0].key
} }
console.log('11111111111111111111111111', list.value, navList.value)
}
}
)
</script>
<style lang="less" scoped>
.application-navigation {
width: 19.12rem;
height: 0.84rem;
line-height: 0.8rem;
display: flex;
justify-content: space-around;
font-size: 0.24rem;
color: #666;
background: #fff;
padding: 0 3rem;
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
position: relative;
.nav {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.line {
width: 0.4rem;
height: 0.04rem;
}
}
.select {
color: #526aff;
.line {
background: #526aff;
} }
console.log('11111111111111111111111111', list.value, navList.value)
} }
} }
)
</script>
<style lang="less" scoped>
.application-navigation {
width: 19.12rem;
height: 0.84rem;
line-height: 0.8rem;
display: flex;
justify-content: space-around;
font-size: 0.24rem;
color: #666;
background: #fff;
padding: 0 3rem;
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
position: relative;
.nav {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.line {
width: 0.4rem;
height: 0.04rem;
}
}
.select {
color: #526aff;
.line {
background: #526aff;
}
}
}
</style> </style>

348
front/src/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue
View File

@ -2,17 +2,10 @@
<template> <template>
<div class="application-deployment-and-security"> <div class="application-deployment-and-security">
<div class="title"> <div class="title">
<DetalsTitle <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
:title="dataFrom.title"
:type="dataFrom.englishTitle"
></DetalsTitle>
</div> </div>
<div class="content"> <div class="content">
<div <div v-for="(item, index) in dataFrom.content" :key="index" class="content-card">
v-for="(item, index) in dataFrom.content"
:key="index"
class="content-card"
>
<div class="card-title">{{ item.childrenTitle }}</div> <div class="card-title">{{ item.childrenTitle }}</div>
<div class="card-content"> <div class="card-content">
<div v-for="carditem in item.childrenContent" :key="carditem"> <div v-for="carditem in item.childrenContent" :key="carditem">
@ -31,185 +24,206 @@
</template> </template>
<script setup> <script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
let dataFrom = ref({ let dataFrom = ref({
title: '归属部门与服务商', title: '归属部门与服务商',
englishTitle: 'DEPARTMENT&ERVICE', englishTitle: 'DEPARTMENT&ERVICE',
content: [ content: [
{ {
childrenTitle: '归属部门信息', childrenTitle: '归属部门信息',
childrenContent: [], childrenContent: [],
}, },
{ {
childrenTitle: '服务商信息', childrenTitle: '服务商信息',
childrenContent: [], childrenContent: [],
}, },
], ],
}) })
console.log(dataFrom.value) console.log(dataFrom.value)
//数据初始化 //数据初始化
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
if (props.dataList.infoList) { if (props.dataList.infoList) {
let obj = { let obj = {
attrType: '部门名称', attrType: '部门名称',
attrValue: props.dataList.deptName || '------', attrValue: props.dataList.deptName || '------',
} }
dataFrom.value.content[0].childrenContent[0] = obj dataFrom.value.content[0].childrenContent[0] = obj
let deptContacts = { let deptContacts = {
attrType: '部门联系人', attrType: '部门联系人',
attrValue: props.dataList.deptContacts || '------', attrValue: '',
} }
dataFrom.value.content[0].childrenContent[1] = deptContacts dataFrom.value.content[0].childrenContent[1] = deptContacts
let deptPhone = { let deptPhone = {
attrType: '部门联系人', attrType: '部门联系电话',
attrValue: props.dataList.deptPhone || '------', attrValue: '',
} }
dataFrom.value.content[0].childrenContent[2] = deptPhone dataFrom.value.content[0].childrenContent[2] = deptPhone
props.dataList.infoList.map((item) => { props.dataList.infoList.map((item) => {
if (
item.attrType === '服务商' ||
item.attrType === '服务商联系人' ||
item.attrType === '服务商联系电话' ||
item.attrType.indexOf('服务商名') != -1
) {
if ( if (
item.attrType === '服务商' || item.attrType === '服务商' ||
item.attrType === '服务商联系人' || item.attrType.indexOf('服务商名') != -1
item.attrType === '服务商联系电话' ||
item.attrType === '服务商名'
) { ) {
if (item.attrType === '服务商' || item.attrType === '服务商名') { dataFrom.value.content[1].childrenContent[0] = item
dataFrom.value.content[1].childrenContent[0] = item if (dataFrom.value.content[1].childrenContent[0].attrValue == '') {
if (dataFrom.value.content[1].childrenContent[0].attrValue == '') { dataFrom.value.content[1].childrenContent[0].attrValue = '------'
dataFrom.value.content[1].childrenContent[0].attrValue = '------' }
} } else if (item.attrType === '服务商联系人') {
} else if (item.attrType === '服务商联系人') { dataFrom.value.content[1].childrenContent[1] = item
dataFrom.value.content[1].childrenContent[1] = item if (dataFrom.value.content[1].childrenContent[1].attrValue == '') {
if (dataFrom.value.content[1].childrenContent[1].attrValue == '') { dataFrom.value.content[1].childrenContent[1].attrValue = '------'
dataFrom.value.content[1].childrenContent[1].attrValue = '------' }
} } else if (item.attrType === '服务商联系电话') {
} else if (item.attrType === '服务商联系电话') { dataFrom.value.content[1].childrenContent[2] = item
dataFrom.value.content[1].childrenContent[2] = item if (dataFrom.value.content[1].childrenContent[2].attrValue == '') {
if (dataFrom.value.content[1].childrenContent[2].attrValue == '') { dataFrom.value.content[1].childrenContent[2].attrValue = '------'
dataFrom.value.content[1].childrenContent[2].attrValue = '------'
}
} }
} }
}) } else if (item.attrType === '部门联系人') {
console.log('obj', dataFrom.value) deptContacts.attrValue = item.attrValue || '------'
} } else if (item.attrType === '部门联系人电话') {
watch( deptPhone.attrValue = item.attrValue || '------'
() => props.dataList, }
(val) => { })
if (val) {
// dataFrom.value.content[0].childrenContent = [] console.log('obj', dataFrom.value)
// dataFrom.value.content[1].childrenContent = [] }
let obj = { watch(
attrType: '部门名称', () => props.dataList,
attrValue: props.dataList.deptName || '------', (val) => {
} if (val) {
dataFrom.value.content[0].childrenContent[0] = obj // dataFrom.value.content[0].childrenContent = []
let deptContacts = { // dataFrom.value.content[1].childrenContent = []
attrType: '部门联系人', let obj = {
attrValue: props.dataList.deptContacts || '------', attrType: '部门名称',
} attrValue: props.dataList.deptName || '------',
dataFrom.value.content[0].childrenContent[1] = deptContacts }
let deptPhone = { dataFrom.value.content[0].childrenContent[0] = obj
attrType: '部门联系人', let deptContacts = {
attrValue: props.dataList.deptPhone || '------', attrType: '部门联系人',
} attrValue: props.dataList.deptContacts || '------',
dataFrom.value.content[0].childrenContent[2] = deptPhone }
props.dataList.infoList.map((item) => { dataFrom.value.content[0].childrenContent[1] = deptContacts
let deptPhone = {
attrType: '部门联系电话',
attrValue: props.dataList.deptPhone || '------',
}
dataFrom.value.content[0].childrenContent[2] = deptPhone
props.dataList.infoList.map((item) => {
if (
item.attrType === '服务商' ||
item.attrType === '服务商联系人' ||
item.attrType === '服务商联系电话' ||
item.attrType.indexOf('服务商名') != -1
) {
if ( if (
item.attrType === '服务商' || item.attrType === '服务商' ||
item.attrType === '服务商联系人' || item.attrType.indexOf('服务商名') != -1
item.attrType === '服务商联系电话' ||
item.attrType === '服务商名'
) { ) {
if (item.attrType === '服务商' || item.attrType === '服务商名') { dataFrom.value.content[1].childrenContent.push(item)
dataFrom.value.content[1].childrenContent.push(item) if (
if ( dataFrom.value.content[1].childrenContent[0].attrValue == ''
dataFrom.value.content[1].childrenContent[0].attrValue == '' ) {
) { dataFrom.value.content[1].childrenContent[0].attrValue =
dataFrom.value.content[1].childrenContent[0].attrValue = '------'
'------' }
} } else if (item.attrType === '服务商联系人') {
} else if (item.attrType === '服务商联系人') { dataFrom.value.content[1].childrenContent[1] = item
dataFrom.value.content[1].childrenContent[1] = item if (
if ( dataFrom.value.content[1].childrenContent[1].attrValue == ''
dataFrom.value.content[1].childrenContent[1].attrValue == '' ) {
) { dataFrom.value.content[1].childrenContent[1].attrValue =
dataFrom.value.content[1].childrenContent[1].attrValue = '------'
'------' }
} } else if (item.attrType === '服务商联系电话') {
} else if (item.attrType === '服务商联系电话') { dataFrom.value.content[1].childrenContent[2] = item
dataFrom.value.content[1].childrenContent[2] = item if (
if ( dataFrom.value.content[1].childrenContent[2].attrValue == ''
dataFrom.value.content[1].childrenContent[2].attrValue == '' ) {
) { dataFrom.value.content[1].childrenContent[2].attrValue =
dataFrom.value.content[1].childrenContent[2].attrValue = '------'
'------'
}
} }
} }
}) } else if (item.attrType === '部门联系人') {
console.log('obj', dataFrom.value) deptContacts.attrValue = item.attrValue || '------'
} } else if (item.attrType === '部门联系人电话') {
deptPhone.attrValue = item.attrValue || '------'
}
})
console.log('obj', dataFrom.value)
} }
) }
)
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.application-deployment-and-security { .application-deployment-and-security {
padding: 0.8rem 0; padding: 0.8rem 0;
display: flex;
flex-direction: column;
align-items: center;
.title {
margin-bottom: 0.3rem;
}
.content {
display: flex; display: flex;
flex-direction: column; width: 13rem;
align-items: center; justify-content: space-between;
.title {
margin-bottom: 0.3rem; .content-card {
} height: 1.5rem;
.content { width: 6.2rem;
display: flex; border-radius: 0.2rem;
width: 13rem; background: linear-gradient(to right,
justify-content: space-between;
.content-card {
height: 1.5rem;
width: 6.2rem;
border-radius: 0.2rem;
background: linear-gradient(
to right,
rgba(113, 132, 252, 0.4), rgba(113, 132, 252, 0.4),
rgba(148, 163, 252, 0.4) rgba(148, 163, 252, 0.4));
); padding: 0 0.3rem;
padding: 0 0.3rem; display: flex;
display: flex; flex-direction: column;
flex-direction: column; justify-content: center;
justify-content: center;
.card-title { .card-title {
font-size: 0.26rem; font-size: 0.26rem;
color: #212956; color: #212956;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
line-height: 0.26rem; line-height: 0.26rem;
} }
.card-content {
white-space: nowrap; .card-content {
white-space: nowrap;
div {
display: inline-block;
margin-right: 0.2rem;
color: rgba(33, 41, 86, 0.8);
font-size: 0.2rem;
max-width: 2.8rem;
div { div {
display: inline-block;
margin-right: 0.2rem;
color: rgba(33, 41, 86, 0.8);
font-size: 0.2rem;
max-width: 2.8rem; max-width: 2.8rem;
div { overflow: hidden;
max-width: 2.8rem; text-overflow: ellipsis;
overflow: hidden; display: -webkit-box;
text-overflow: ellipsis; -webkit-box-orient: vertical;
display: -webkit-box; -webkit-line-clamp: 1;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
}
div:first-child {
display: block;
} }
} }
div:first-child {
display: block;
}
} }
} }
} }
}
</style> </style>

173
front/src/views/detailsAll/components/Application/ApplicationPresentation.vue
View File

@ -8,15 +8,10 @@
<template> <template>
<div class="application-presentation" v-if="flag"> <div class="application-presentation" v-if="flag">
<detals-title title="应用展示" type="IMAGE&VIDEO"></detals-title> <detals-title title="应用展示" type="IMAGE&VIDEO"></detals-title>
<div class="main"> <div class="main" :style="`${img}background-position:center;background-size:cover;`">
<div class="play" @click="showModal"></div> <div class="play" @click="showModal"></div>
</div> </div>
<a-modal <a-modal v-model:visible="visible" title="视频预览" :width="750" destroyOnClose>
v-model:visible="visible"
title="视频预览"
:width="750"
destroyOnClose
>
<template #footer></template> <template #footer></template>
<div style="width: 100%; display: flex; justify-content: center"> <div style="width: 100%; display: flex; justify-content: center">
<div style="width: 100%; height: 100%"> <div style="width: 100%; height: 100%">
@ -27,90 +22,106 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive, defineProps, watch } from 'vue' import { ref, reactive, defineProps, watch } from 'vue'
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const visible = ref(false) const visible = ref(false)
const options = reactive({ const options = reactive({
width: '7.00rem', //播放器宽度 width: '7.00rem', //播放器宽度
height: '4.00rem', //播放器高度 height: '4.00rem', //播放器高度
color: '#409eff', //主题色 color: '#409eff', //主题色
title: '', //视频名称 title: '', //视频名称
src: '', //视频源 src: '', //视频源
muted: false, //静音 muted: false, //静音
webFullScreen: false, webFullScreen: false,
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速 speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
autoPlay: true, //自动播放 autoPlay: true, //自动播放
loop: false, //循环播放 loop: false, //循环播放
mirror: false, //镜像画面 mirror: false, //镜像画面
ligthOff: false, //关灯模式 ligthOff: false, //关灯模式
volume: 0.3, //默认音量大小 volume: 0.3, //默认音量大小
control: true, //是否显示控制 control: true, //是否显示控制
controlBtns: [ controlBtns: [
'audioTrack', 'audioTrack',
'quality', 'quality',
'speedRate', 'speedRate',
'volume', 'volume',
'setting', 'setting',
'pip', 'pip',
'pageFullScreen', 'pageFullScreen',
'fullScreen', 'fullScreen',
], //显示所有按钮, ], //显示所有按钮,
}) })
const showModal = () => { const showModal = () => {
visible.value = true visible.value = true
} }
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
const flag = ref(true) const flag = ref(true)
console.log('111111111111111111111,', props.dataList) const img = ref({})
if (props.dataList.infoList) { console.log('111111111111111111111,', props.dataList)
let obj = props.dataList.infoList.filter( if (props.dataList.infoList) {
(item) => item.attrType === '应用展示视频' let obj = props.dataList.infoList.filter(
(item) => item.attrType === '应用展示视频'
)[0]
console.log('视频==============>', obj)
if (!obj) {
flag.value = false
} else {
let imgindex = props.dataList.infoList.filter(
(item) => item.attrType === '应用图片'
)[0] )[0]
console.log('视频==============>', obj) options.src = obj.attrValue
if (!obj) { if (imgindex) {
flag.value = false img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
} else {
options.src = obj.attrValue
} }
} }
watch( }
() => props.dataList, watch(
(val) => { () => props.dataList,
if (val) { (val) => {
let obj = val.infoList.filter( if (val) {
(item) => item.attrType === '应用展示视频' let obj = val.infoList.filter(
(item) => item.attrType === '应用展示视频'
)[0]
console.log('视频==============>', obj)
if (!obj) {
flag.value = false
} else {
let imgindex = props.dataList.infoList.filter(
(item) => item.attrType === '应用图片'
)[0] )[0]
console.log('视频==============>', obj) options.src = obj.attrValue
if (!obj) { if (imgindex) {
flag.value = false img.value =
} else { 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
options.src = obj.attrValue
} }
} }
} }
) }
)
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.application-presentation { .application-presentation {
padding: 0.8rem 3rem 0; padding: 0.8rem 3rem 0;
.main {
height: 3.4rem; .main {
border-radius: 0.1rem; height: 3.4rem;
background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat; border-radius: 0.1rem;
background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
background-size: 100%;
margin-top: 0.4rem;
display: flex;
justify-content: center;
align-items: center;
.play {
width: 0.96rem;
height: 0.96rem;
background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
background-size: 100%; background-size: 100%;
margin-top: 0.4rem; cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
.play {
width: 0.96rem;
height: 0.96rem;
background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
background-size: 100%;
cursor: pointer;
}
} }
} }
}
</style> </style>

12
front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
View File

@ -18,9 +18,15 @@
<!-- <span class="name">{{ props.dataList.name }}</span> --> <!-- <span class="name">{{ props.dataList.name }}</span> -->
<div class="label-content"> <div class="label-content">
<p class="lable-father"> <p class="lable-father">
<span class="label">{{ props.dataList.type }}</span> <span class="label" v-if="props.dataList.type">
<span class="label">{{ props.dataList.shareType }}</span> {{ props.dataList.type }}
<span class="label">{{ props.dataList.shareCondition }}</span> </span>
<span class="label" v-if="props.dataList.shareType">
{{ props.dataList.shareType }}
</span>
<span class="label" v-if="props.dataList.shareCondition">
{{ props.dataList.shareCondition }}
</span>
</p> </p>
</div> </div>
<!-- <span class="label">免费</span> --> <!-- <span class="label">免费</span> -->

31
front/src/views/detailsAll/components/Application/style.css Normal file
View File

@ -0,0 +1,31 @@
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

104
front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
View File

@ -1,30 +1,79 @@
<template> <template>
<div class="application-associated-ability" v-if="flag"> <div class="application-associated-ability" v-if="flag">
<detals-title title="关联应用" type="RELEVANCE"></detals-title> <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main"> <div
class="application-associated-ability-main"
v-if="dataFrom[0].dataList.length < 4"
>
<div <div
class="associated-ability-card" class="associated-ability-card"
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList" v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id" :key="dataListitem.id"
@click="switchFunction(dataListitem.id)" @click="switchFunction(dataListitem.id)"
> >
<div class="associated-ability-card-title"> <a-tooltip>
{{ dataListitem.name }} <template #title>{{ dataListitem.name }}</template>
</div> <div class="associated-ability-card-title">
<div class="associated-ability-card-content"> {{ dataListitem.name }}
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div> </div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div> </div>
</div> </div>
</div> </div>
<div class="application-associated-ability-main" v-else>
<swiper
:slidesPerView="3"
:spaceBetween="30"
:pagination="{ clickable: true }"
:modules="modules"
class="mySwiper"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id"
>
<div
class="associated-ability-card"
@click="switchFunction(dataListitem.id)"
>
<a-tooltip>
<template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
const router = useRouter() const router = useRouter()
const modules = ref([Pagination])
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({ const props = defineProps({
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Array, default: null },
@ -34,17 +83,20 @@
const oldid = router.currentRoute.value.query.id const oldid = router.currentRoute.value.query.id
//点击查看详情 //点击查看详情
const switchFunction = (id) => { const switchFunction = (id) => {
router.push({ // router.push({
path: '/details', // path: '/details',
query: { // query: {
id: id, // id: id,
}, // },
}) // })
window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
// alert(id)
} }
if (props.associatedComponents[0].dataList.length != 0) { console.log('这个是空值', props.associatedComponents[0])
if (props.associatedComponents[0].dataList.length > 0) {
console.log('这个是空值', props.associatedComponents)
flag.value = true flag.value = true
dataFrom.value = props.associatedComponents dataFrom.value = props.associatedComponents
debugger
console.log('dataFrom.value', dataFrom.value) console.log('dataFrom.value', dataFrom.value)
} else { } else {
flag.value = false flag.value = false
@ -75,7 +127,7 @@
<style lang="less" scoped> <style lang="less" scoped>
.application-associated-ability { .application-associated-ability {
padding-top: 0.8rem; padding-top: 0.8rem;
padding-bottom: 0.8rem; padding-bottom: 0.6rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -83,20 +135,31 @@
margin-top: 0.4rem; margin-top: 0.4rem;
width: 13.3rem; width: 13.3rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-around;
:deep(.swiper) {
padding-bottom: 0.6rem;
}
.associated-ability-card { .associated-ability-card {
width: 3.2rem; width: 3.2rem;
height: 2.78rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border: 1px solid #e4e6f5; border: 1px solid #e4e6f5;
border-radius: 0.1rem; border-radius: 0.1rem;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
margin-right: 0.2rem;
margin-top: 0.2rem;
cursor: pointer; cursor: pointer;
.associated-ability-card-title { .associated-ability-card-title {
width: 2.2rem;
padding-top: 0.3rem; padding-top: 0.3rem;
font-size: 0.22rem; font-size: 0.22rem;
text-align: center; text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.associated-ability-card-content { .associated-ability-card-content {
width: 100%; width: 100%;
@ -107,6 +170,11 @@
color: #999; color: #999;
margin-right: 0.15rem; margin-right: 0.15rem;
margin-top: 0.15rem; margin-top: 0.15rem;
text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
} }
} }
} }

375
front/src/views/detailsAll/components/Business/BusinessNavigation.vue
View File

@ -8,12 +8,7 @@
<template> <template>
<div class="business-navigation" v-if="navList.length > 0"> <div class="business-navigation" v-if="navList.length > 0">
<template v-for="nav in navList" :key="nav.key"> <template v-for="nav in navList" :key="nav.key">
<div <div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
class="nav"
:class="{ select: nav.key == select }"
v-if="nav.show"
@click="selectNav(nav.key)"
>
{{ nav.name }} {{ nav.name }}
<span class="line"></span> <span class="line"></span>
</div> </div>
@ -21,189 +16,217 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch, getCurrentInstance } from 'vue'
import mybus from '@/myplugins/mybus' import { useRouter } from 'vue-router'
const navList = ref([ import mybus from '@/myplugins/mybus'
{ import { queryPartAppByKeyId2 } from '@/api/home'
name: '组件展示', // 获取当前路由地址
key: 'business-presentation', const router = useRouter()
}, const keyId = router.currentRoute.value.query.id
{ const navList = ref([
name: '关联应用', {
key: 'business-associated-ability', name: '组件展示',
}, key: 'business-presentation',
{ },
name: '功能介绍', {
key: 'function-introduction', name: '功能介绍',
}, key: 'function-introduction',
},
{ {
name: '应用场景', name: '应用场景',
key: 'application-scenarios', key: 'application-scenarios',
}, },
{ {
name: '应用案例', name: '应用案例',
key: 'application-case', key: 'application-case',
}, },
{ {
name: '使用方式', name: '使用方式',
key: 'business-usage-mode', key: 'business-usage-mode',
}, },
{ {
name: '常见问题', name: '常见问题',
key: 'common-problem', key: 'common-problem',
}, },
]) ])
const props = defineProps({ const props = defineProps({
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Array, default: null },
selectNow: { type: String, default: '' }, selectNow: { type: String, default: '' },
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
})
const select = ref('business-associated-ability')
const list = ref([])
// 根据能力id查询是否存在关联应用
if (keyId) {
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
console.log('ressssssss', res)
if (res.data.data.length > 0) {
// 存在关联应用时在导航栏加入关联应用
navList.value.unshift({
name: '关联应用',
key: 'business-associated-ability',
show: true,
})
// list.value.push('关联应用')
console.log('navList', navList)
}
}) })
const select = ref('business-presentation') }
const list = ref([]) const selectNav = (key) => {
const selectNav = (key) => { select.value = key
select.value = key console.log(key, select.value)
console.log(key, select.value) mybus.emit('flyToView', select.value)
mybus.emit('flyToView', select.value) }
} if (props.dataList.infoList) {
if (props.dataList.infoList) { list.value = []
list.value = [] let arr = [
let arr = [ '关联应用',
'组件视频介绍', '组件视频介绍',
'关联应用', '功能介绍',
'功能介绍', '应用场景',
'应用场景', '应用案例',
'应用案例', '使用方式',
'使用方式', '常见问题',
'常见问题', ]
] // 排序
// 排序 // eslint-disable-next-line vue/no-mutating-props
// eslint-disable-next-line vue/no-mutating-props props.dataList.infoList.sort((a, b) => {
props.dataList.infoList.sort((a, b) => { return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
return arr.indexOf(a.attrType) - arr.indexOf(b.attrType) })
}) props.dataList.infoList.map((item) => {
props.dataList.infoList.map((item) => { if (
if ( item.attrType === '常见问题' ||
item.attrType === '常见问题' || item.attrType === '功能介绍' ||
item.attrType === '功能介绍' || item.attrType === '应用场景' ||
item.attrType === '应用场景' || item.attrType === '应用案例'
item.attrType === '应用案例' ) {
) { list.value.push(item.attrType)
list.value.push(item.attrType) } else if (item.attrType === '组件视频介绍') {
} else if (item.attrType === '组件视频介绍') { list.value.push('组件展示')
list.value.push('组件展示') }
} })
}) list.value.unshift('关联应用')
list.value.push('关联应用') list.value.push('使用方式')
list.value.push('使用方式') navList.value.forEach((item) => {
navList.value.forEach((item) => { console.log(item)
console.log(item) if (list.value.indexOf(item.name) > -1) {
if (list.value.indexOf(item.name) > -1) { if (item.name == '关联应用') {
if (item.name == '关联应用') { if (props.associatedComponents[0].dataList.length != 0) {
if (props.associatedComponents[0].dataList.length != 0) {
item.show = true
}
} else {
item.show = true item.show = true
} }
} else {
item.show = true
} }
})
select.value = navList.value.filter(
(item) => item.name === list.value[0]
)[0].key
console.log('11111111111111111111111111', list.value, navList.value)
}
watch(
() => props.selectNow,
(newValue) => {
select.value = newValue
} }
) })
watch( if (list.value.length > 0) {
() => props.dataList, if (navList.value.filter((item) => item.name === list.value[0])[0]) {
(val) => { select.value = navList.value.filter(
if (val) { (item) => (item.name === '关联应用') | (item.name === list.value[0])
list.value = [] )[0].key
let arr = [ }
'组件视频介绍', }
'关联应用', console.log('11111111111111111111111111', list.value, navList.value)
'功能介绍', }
'应用场景', watch(
'应用案例', () => props.selectNow,
'使用方式', (newValue) => {
'常见问题', select.value = newValue
] }
// 排序 )
// eslint-disable-next-line vue/no-mutating-props watch(
props.dataList.infoList.sort((a, b) => { () => props.dataList,
// console.log('排序==============>', a, b) (val) => {
return arr.indexOf(a.attrType) - arr.indexOf(b.attrType) if (val) {
}) list.value = []
val.infoList.map((item) => { let arr = [
if ( '关联应用',
item.attrType === '常见问题' || '组件视频介绍',
item.attrType === '功能介绍' || '功能介绍',
item.attrType === '应用场景' || '应用场景',
item.attrType === '应用案例' '应用案例',
) { '使用方式',
list.value.push(item.attrType) '常见问题',
} else if (item.attrType === '组件视频介绍') { ]
list.value.push('组件展示') // 排序
} // eslint-disable-next-line vue/no-mutating-props
}) props.dataList.infoList.sort((a, b) => {
list.value.push('关联应用') // console.log('排序==============>', a, b)
list.value.push('使用方式') return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
navList.value.forEach((item) => { })
console.log(item) val.infoList.map((item) => {
if (list.value.indexOf(item.name) > -1) { if (
if (item.name == '关联应用') { item.attrType === '常见问题' ||
if (props.associatedComponents[0].dataList.length != 0) { item.attrType === '功能介绍' ||
item.show = true item.attrType === '应用场景' ||
} item.attrType === '应用案例'
} else { ) {
list.value.push(item.attrType)
} else if (item.attrType === '组件视频介绍') {
list.value.push('组件展示')
}
})
list.value.unshift('关联应用')
list.value.push('使用方式')
navList.value.forEach((item) => {
console.log(item)
if (list.value.indexOf(item.name) > -1) {
if (item.name == '关联应用') {
if (props.associatedComponents[0].dataList.length != 0) {
item.show = true item.show = true
} }
} else {
item.show = true
} }
}) }
if (list.value.length > 0) { })
if (list.value.length > 0) {
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
select.value = navList.value.filter( select.value = navList.value.filter(
(item) => item.name === list.value[0] (item) =>
(item.name === '关联应用') | (item.name === list.value[0])
)[0].key )[0].key
} }
console.log('11111111111111111111111111', list.value, navList.value)
}
}
)
</script>
<style lang="less" scoped>
.business-navigation {
width: 19.12rem;
height: 0.84rem;
line-height: 0.8rem;
display: flex;
justify-content: space-around;
font-size: 0.24rem;
color: #666;
background: #fff;
padding: 0 3rem;
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
position: relative;
.nav {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.line {
width: 0.4rem;
height: 0.04rem;
}
}
.select {
color: #526aff;
.line {
background: #526aff;
} }
console.log('11111111111111111111111111', list.value, navList.value)
} }
} }
)
</script>
<style lang="less" scoped>
.business-navigation {
width: 19.12rem;
height: 0.84rem;
line-height: 0.8rem;
display: flex;
justify-content: space-around;
font-size: 0.24rem;
color: #666;
background: #fff;
padding: 0 3rem;
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
position: relative;
.nav {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.line {
width: 0.4rem;
height: 0.04rem;
}
}
.select {
color: #526aff;
.line {
background: #526aff;
}
}
}
</style> </style>

43
front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-08 11:56:28 * @Date: 2022-06-08 11:56:28
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-01 14:20:52 * @LastEditTime: 2022-07-05 11:42:27
* @Description: 算法详情页头部 * @Description: 算法详情页头部
--> -->
<template> <template>
@ -18,19 +18,23 @@
<!-- <span class="name">{{ props.dataList.name }}</span> --> <!-- <span class="name">{{ props.dataList.name }}</span> -->
<div class="label-content"> <div class="label-content">
<p class="lable-father"> <p class="lable-father">
<span class="label"> <span class="label" v-if="props.dataList.type">
{{ componentType || props.dataList.type }} {{ props.dataList.type }}
</span>
<span class="label" v-if="props.dataList.shareType">
{{ props.dataList.shareType }}
</span>
<span class="label" v-if="props.dataList.shareCondition">
{{ props.dataList.shareCondition }}
</span> </span>
<span class="label">{{ props.dataList.shareType }}</span>
<span class="label">{{ props.dataList.shareCondition }}</span>
</p> </p>
</div> </div>
<!-- <span class="label">免费</span> --> <!-- <span class="label">免费</span> -->
</div> </div>
<div class="main"> <div class="main">
<a-tooltip placement="top"> <a-tooltip placement="top">
<template #title>应用领域：{{ applicationArea }}</template> <template #title>应用领域：{{ businessArea }}</template>
<div>应用领域：{{ applicationArea }}</div> <div>应用领域：{{ businessArea }}</div>
</a-tooltip> </a-tooltip>
<a-tooltip placement="top"> <a-tooltip placement="top">
<template #title>{{ props.dataList.description }}</template> <template #title>{{ props.dataList.description }}</template>
@ -41,11 +45,15 @@
</div> </div>
<div class="bottom" v-if="props.dataList.id"> <div class="bottom" v-if="props.dataList.id">
<a-button type="primary" @click="toView()"> <a-button type="primary" @click="toView()">
<template #icon><form-outlined /></template> <template #icon>
<form-outlined />
</template>
申请使用 申请使用
</a-button> </a-button>
<a-button type="primary" @click="addShoppingCart()"> <a-button type="primary" @click="addShoppingCart()">
<template #icon><shopping-cart-outlined /></template> <template #icon>
<shopping-cart-outlined />
</template>
加入申购车 加入申购车
</a-button> </a-button>
<a-button type="primary" @click="goTOCollection()">收藏</a-button> <a-button type="primary" @click="goTOCollection()">收藏</a-button>
@ -96,6 +104,7 @@
resourceName: props.dataList.name, resourceName: props.dataList.name,
time: props.dataList.createDate, time: props.dataList.createDate,
type: props.dataList.type, type: props.dataList.type,
componentType: '业务组件',
}, },
], ],
deptId: props.dataList.deptId, deptId: props.dataList.deptId,
@ -152,6 +161,7 @@
background-size: 100%; background-size: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
.left { .left {
max-width: 7.2rem; max-width: 7.2rem;
color: #fff; color: #fff;
@ -160,9 +170,11 @@
.top { .top {
display: flex; display: flex;
align-items: center; align-items: center;
span { span {
font-size: 0.14rem; font-size: 0.14rem;
} }
.name { .name {
// max-width: 3.3rem; // max-width: 3.3rem;
// overflow: hidden; // overflow: hidden;
@ -178,15 +190,18 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.label-content { .label-content {
position: relative; position: relative;
} }
.lable-father { .lable-father {
position: absolute; position: absolute;
min-width: 3.5rem; min-width: 3.5rem;
right: -3.5rem; right: -3.5rem;
top: 0; top: 0;
} }
.label { .label {
padding: 0.01rem 0.1rem; padding: 0.01rem 0.1rem;
margin-right: 0.1rem; margin-right: 0.1rem;
@ -194,15 +209,18 @@
background: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.4);
} }
} }
.main { .main {
margin-top: 0.2rem; margin-top: 0.2rem;
font-size: 0.18rem; font-size: 0.18rem;
line-height: 0.34rem; line-height: 0.34rem;
& > div:nth-of-type(1) { & > div:nth-of-type(1) {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
& > div:nth-of-type(2) { & > div:nth-of-type(2) {
max-height: 1rem; max-height: 1rem;
overflow: hidden; overflow: hidden;
@ -212,9 +230,11 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
} }
.bottom { .bottom {
margin-top: 0.4rem; margin-top: 0.4rem;
display: flex; display: flex;
.ant-btn { .ant-btn {
height: 0.5rem; height: 0.5rem;
margin-right: 0.2rem; margin-right: 0.2rem;
@ -225,15 +245,19 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.ant-btn-primary { .ant-btn-primary {
color: #1890ff; color: #1890ff;
} }
.ant-btn:nth-of-type(1) { .ant-btn:nth-of-type(1) {
width: 1.8rem; width: 1.8rem;
} }
.ant-btn:nth-of-type(2) { .ant-btn:nth-of-type(2) {
width: 2.2rem; width: 2.2rem;
} }
.ant-btn:nth-of-type(3) { .ant-btn:nth-of-type(3) {
width: 1.45rem; width: 1.45rem;
background: #fff; background: #fff;
@ -241,6 +265,7 @@
} }
} }
} }
.right { .right {
width: 5.8rem; width: 5.8rem;
height: 4rem; height: 4rem;

70
front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
View File

@ -16,7 +16,10 @@
<div class="content-left-content"> <div class="content-left-content">
<p> <p>
<span>{{ item.link.name }}</span> <span>{{ item.link.name }}</span>
<span>{{ item.linkValue }}</span> <a-tooltip>
<template #title>{{ item.linkValue }}</template>
<span>{{ item.linkValue }}</span>
</a-tooltip>
</p> </p>
</div> </div>
</div> </div>
@ -30,7 +33,7 @@
<div class="content-right-title">{{ item.contact }}</div> <div class="content-right-title">{{ item.contact }}</div>
<div class="content-right-content"> <div class="content-right-content">
<p> <p>
<span>{{ item.contact }}</span> <span>{{ item.facilitator.name }}</span>
<a-tooltip> <a-tooltip>
<template #title>{{ item.facilitator.value }}</template> <template #title>{{ item.facilitator.value }}</template>
<span>{{ item.facilitator.value }}</span> <span>{{ item.facilitator.value }}</span>
@ -56,7 +59,7 @@
<div class="content-right-title">{{ item.contact2 }}</div> <div class="content-right-title">{{ item.contact2 }}</div>
<div class="content-right-content"> <div class="content-right-content">
<p> <p>
<span>{{ item.contact2 }}</span> <span>{{ item.facilitator2.name }}</span>
<a-tooltip> <a-tooltip>
<template #title>{{ item.facilitator2.value }}</template> <template #title>{{ item.facilitator2.value }}</template>
<span>{{ item.facilitator2.value }}</span> <span>{{ item.facilitator2.value }}</span>
@ -87,6 +90,7 @@
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { pinyin } from 'pinyin-pro' import { pinyin } from 'pinyin-pro'
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
import { message } from 'ant-design-vue'
let dataFrom = ref({ let dataFrom = ref({
title: '使用方式', title: '使用方式',
englishTitle: 'USAGE', englishTitle: 'USAGE',
@ -202,12 +206,18 @@
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => item.attrType === '技术文档' (item) => item.attrType === '技术文档'
)[0] )[0]
console.log('dataFrom.value.link', obj.attrValue) if (obj) {
window.open( window.open(
window.SITE_CONFIG.previewUrl + window.SITE_CONFIG.previewUrl +
'hisense_office/onlinePreview?url=' + 'hisense_office/onlinePreview?url=' +
btoa(encodeURI(obj.attrValue)) btoa(encodeURI(obj.attrValue))
) )
} else {
message.config({
top: '100px', // 距离顶部的位置
})
message.error('暂未上传技术文档')
}
} }
function technicalNew() { function technicalNew() {
// 拼接路径 // 拼接路径
@ -221,11 +231,18 @@
(item) => item.attrType === '使用手册' (item) => item.attrType === '使用手册'
)[0] )[0]
console.log('dataFrom.value.link', obj.attrValue) console.log('dataFrom.value.link', obj.attrValue)
window.open( if (obj) {
window.SITE_CONFIG.previewUrl + window.open(
'hisense_office/onlinePreview?url=' + window.SITE_CONFIG.previewUrl +
btoa(encodeURI(obj.attrValue)) 'hisense_office/onlinePreview?url=' +
) btoa(encodeURI(obj.attrValue))
)
} else {
message.config({
top: '100px', // 距离顶部的位置
})
message.error('暂未上传使用手册')
}
} }
</script> </script>
@ -235,9 +252,11 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0.8rem 0; padding: 0.8rem 0;
.content { .content {
margin-top: 0.3rem; margin-top: 0.3rem;
display: flex; display: flex;
.content-left { .content-left {
height: 1.5rem; height: 1.5rem;
width: 6.2rem; width: 6.2rem;
@ -251,30 +270,40 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 0.35rem; padding: 0 0.35rem;
.left { .left {
.content-left-title { .content-left-title {
font-size: 0.26rem; font-size: 0.26rem;
line-height: 0.26rem; line-height: 0.26rem;
color: #212956; color: #212956;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
span:first-child { span:first-child {
margin-right: 0.1rem; margin-right: 0.1rem;
} }
} }
.content-left-content { .content-left-content {
width: 4.2rem; width: 4.2rem;
font-size: 0.2rem; font-size: 0.2rem;
color: rgba(33, 41, 86, 0.8); color: rgba(33, 41, 86, 0.8);
line-height: 0.2rem; line-height: 0.2rem;
p { p {
display: -webkit-box; display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
margin-bottom: 0.1rem; margin-bottom: 0.1rem;
span:last-of-type {
width: 298px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
} }
} }
} }
.right { .right {
div { div {
height: 0.4rem; height: 0.4rem;
@ -288,11 +317,13 @@
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
div:first-child { div:first-child {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
} }
} }
.content-right { .content-right {
height: 1.5rem; height: 1.5rem;
width: 6.2rem; width: 6.2rem;
@ -306,17 +337,20 @@
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
padding: 0 0.3rem; padding: 0 0.3rem;
.content-right-left { .content-right-left {
border-right: 0.01rem solid #707fe0; border-right: 0.01rem solid #707fe0;
padding-right: 0.1rem; padding-right: 0.1rem;
margin-right: 0.1rem; margin-right: 0.1rem;
} }
.content-right-title { .content-right-title {
font-size: 0.26rem; font-size: 0.26rem;
line-height: 0.26rem; line-height: 0.26rem;
color: #212956; color: #212956;
margin-bottom: 0.15rem; margin-bottom: 0.15rem;
} }
.content-right-content { .content-right-content {
display: flex; display: flex;
font-size: 0.16rem; font-size: 0.16rem;
@ -326,6 +360,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
flex-direction: column; flex-direction: column;
p { p {
// width: 1.60rem; // width: 1.60rem;
height: 0.2rem; height: 0.2rem;
@ -336,6 +371,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin-right: 0.15rem; margin-right: 0.15rem;
span { span {
cursor: pointer; cursor: pointer;
} }

2
front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue
View File

@ -71,7 +71,6 @@
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
if (props.dataList.infoList) { if (props.dataList.infoList) {
debugger
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => item.attrType === '应用场景' (item) => item.attrType === '应用场景'
)[0] )[0]
@ -79,7 +78,6 @@
flag.value = false flag.value = false
} else { } else {
obj.attrValue = JSON.parse(obj.attrValue) obj.attrValue = JSON.parse(obj.attrValue)
debugger
dataFrom.value = obj dataFrom.value = obj
tabindex.value = dataFrom.value.attrValue[0].name tabindex.value = dataFrom.value.attrValue[0].name
} }

108
front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
View File

@ -1,30 +1,79 @@
<template> <template>
<div class="application-associated-ability" v-if="flag"> <div class="application-associated-ability" v-if="flag">
<detals-title title="关联应用" type="RELEVANCE"></detals-title> <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main"> <div
class="application-associated-ability-main"
v-if="dataFrom[0].dataList.length < 4"
>
<div <div
class="associated-ability-card" class="associated-ability-card"
v-for="dataListitem in dataFrom[0].dataList" v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id" :key="dataListitem.id"
@click="switchFunction(dataListitem.id)" @click="switchFunction(dataListitem.id)"
> >
<div class="associated-ability-card-title"> <a-tooltip>
{{ dataListitem.name }} <template #title>{{ dataListitem.name }}</template>
</div> <div class="associated-ability-card-title">
<div class="associated-ability-card-content"> {{ dataListitem.name }}
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div> </div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div> </div>
</div> </div>
</div> </div>
<div class="application-associated-ability-main" v-else>
<swiper
:slidesPerView="3"
:spaceBetween="30"
:pagination="{ clickable: true }"
:modules="modules"
class="mySwiper"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id"
>
<div
class="associated-ability-card"
@click="switchFunction(dataListitem.id)"
>
<a-tooltip>
<template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
const router = useRouter() const router = useRouter()
const modules = ref([Pagination])
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({ const props = defineProps({
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Array, default: null },
@ -34,17 +83,20 @@
const oldid = router.currentRoute.value.query.id const oldid = router.currentRoute.value.query.id
//点击查看详情 //点击查看详情
const switchFunction = (id) => { const switchFunction = (id) => {
router.push({ // router.push({
path: '/details', // path: '/details',
query: { // query: {
id: id, // id: id,
}, // },
}) // })
window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
// alert(id)
} }
if (props.associatedComponents[0].dataList.length != 0) { console.log('这个是空值', props.associatedComponents[0])
if (props.associatedComponents[0].dataList.length > 0) {
console.log('这个是空值', props.associatedComponents)
flag.value = true flag.value = true
dataFrom.value = props.associatedComponents dataFrom.value = props.associatedComponents
debugger
console.log('dataFrom.value', dataFrom.value) console.log('dataFrom.value', dataFrom.value)
} else { } else {
flag.value = false flag.value = false
@ -63,7 +115,7 @@
) )
watch( watch(
() => router.currentRoute.value.query.id, () => router.currentRoute.value.query.id,
() => { (newValue, oldValue) => {
if (oldid != router.currentRoute.value.query.id) { if (oldid != router.currentRoute.value.query.id) {
window.location.reload() window.location.reload()
} }
@ -75,7 +127,7 @@
<style lang="less" scoped> <style lang="less" scoped>
.application-associated-ability { .application-associated-ability {
padding-top: 0.8rem; padding-top: 0.8rem;
padding-bottom: 0.8rem; padding-bottom: 0.6rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -83,20 +135,31 @@
margin-top: 0.4rem; margin-top: 0.4rem;
width: 13.3rem; width: 13.3rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-around;
:deep(.swiper) {
padding-bottom: 0.6rem;
}
.associated-ability-card { .associated-ability-card {
width: 3.2rem; width: 3.2rem;
height: 2.78rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border: 1px solid #e4e6f5; border: 1px solid #e4e6f5;
border-radius: 0.1rem; border-radius: 0.1rem;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
margin-right: 0.2rem;
margin-top: 0.2rem;
cursor: pointer; cursor: pointer;
.associated-ability-card-title { .associated-ability-card-title {
width: 2.2rem;
padding-top: 0.3rem; padding-top: 0.3rem;
font-size: 0.22rem; font-size: 0.22rem;
text-align: center; text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.associated-ability-card-content { .associated-ability-card-content {
width: 100%; width: 100%;
@ -107,6 +170,11 @@
color: #999; color: #999;
margin-right: 0.15rem; margin-right: 0.15rem;
margin-top: 0.15rem; margin-top: 0.15rem;
text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
} }
} }
} }

72
front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
View File

@ -21,17 +21,18 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import { queryPartAppByKeyId2 } from '@/api/home'
// 获取当前路由地址
const router = useRouter()
const keyId = router.currentRoute.value.query.id
const navList = ref([ const navList = ref([
{ {
name: '组件展示', name: '组件展示',
key: 'eveloper-presentation', key: 'eveloper-presentation',
}, },
{
name: '关联应用',
key: 'developer-associated-ability',
},
{ {
name: '功能介绍', name: '功能介绍',
key: 'function-introduction', key: 'function-introduction',
@ -60,10 +61,26 @@
const props = defineProps({ const props = defineProps({
selectNow: { type: String, default: '' }, selectNow: { type: String, default: '' },
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Object, default: null },
}) })
const select = ref('algorithm-display') const select = ref('developer-associated-ability')
const list = ref([]) const list = ref([])
// 根据能力id查询是否存在关联应用
if (keyId) {
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
console.log('ressssssss', res)
if (res.data.data.length > 0) {
// 存在关联应用时在导航栏加入关联应用
navList.value.unshift({
name: '关联应用',
key: 'developer-associated-ability',
show: true,
})
// list.value.push('关联应用')
console.log('navList', navList)
}
})
}
const selectNav = (key) => { const selectNav = (key) => {
select.value = key select.value = key
mybus.emit('flyToView', select.value) mybus.emit('flyToView', select.value)
@ -81,17 +98,17 @@
list.value.push('组件展示') list.value.push('组件展示')
} }
}) })
list.value.push('关联应用') list.value.unshift('关联应用')
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
if (list.value.indexOf(item.name) > -1) { if (list.value.indexOf(item.name) > -1) {
if (item.name == '关联应用') { // if (item.name == '关联应用') {
if (props.associatedComponents[0].dataList.length != 0) { // if (props.associatedComponents[0].dataList.length != 0) {
item.show = true // item.show = true
} // }
} else { // } else {
item.show = true item.show = true
} // }
} }
}) })
select.value = navList.value.filter( select.value = navList.value.filter(
@ -122,25 +139,28 @@
list.value.push('组件展示') list.value.push('组件展示')
} }
}) })
list.value.push('关联应用') list.value.unshift('关联应用')
list.value.push('组件试用') list.value.push('组件试用')
list.value.push('使用方式') list.value.push('使用方式')
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
if (list.value.indexOf(item.name) > -1) { if (list.value.indexOf(item.name) > -1) {
if (item.name == '关联应用') { // if (item.name == '关联应用') {
if (props.associatedComponents[0].dataList.length != 0) { // if (props.associatedComponents[0].dataList.length != 0) {
item.show = true // item.show = true
} // }
} else { // } else {
item.show = true item.show = true
} // }
} }
}) })
if (list.value.length > 0) { if (list.value.length > 0) {
select.value = navList.value.filter( if (navList.value.filter((item) => item.name === list.value[0])[0]) {
(item) => item.name === list.value[0] select.value = navList.value.filter(
)[0].key (item) =>
(item.name === '关联应用') | (item.name === list.value[0])
)[0].key
}
} }
console.log('11111111111111111111111111', list.value, navList.value) console.log('11111111111111111111111111', list.value, navList.value)
} }

25
front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue
View File

@ -57,6 +57,10 @@
{ {
childrenTitle: '归属部门', childrenTitle: '归属部门',
childrenContent: [ childrenContent: [
{
attrType: '归属部门名称',
attrValue: '------',
},
{ {
attrType: '部门联系人', attrType: '部门联系人',
attrValue: '------', attrValue: '------',
@ -65,15 +69,15 @@
attrType: '联系人电话', attrType: '联系人电话',
attrValue: '------', attrValue: '------',
}, },
{
attrType: '归属部门名称',
attrValue: '------',
},
], ],
}, },
{ {
childrenTitle: '服务商信息', childrenTitle: '服务商信息',
childrenContent: [ childrenContent: [
{
attrType: '服务商名称',
attrValue: '------',
},
{ {
attrType: '服务商联系人', attrType: '服务商联系人',
attrValue: '------', attrValue: '------',
@ -82,10 +86,6 @@
attrType: '联系人电话', attrType: '联系人电话',
attrValue: '------', attrValue: '------',
}, },
{
attrType: '服务商名称',
attrValue: '------',
},
], ],
}, },
], ],
@ -117,6 +117,9 @@
} else if (item.attrType == '服务商联系电话') { } else if (item.attrType == '服务商联系电话') {
dataFrom.value.content[1].childrenContent[1].attrValue = dataFrom.value.content[1].childrenContent[1].attrValue =
item.attrValue item.attrValue
} else if (item.attrType == '服务商' || item.attrType == '服务商名') {
dataFrom.value.content[1].childrenContent[2].attrValue =
item.attrValue
} }
}) })
} }
@ -176,6 +179,12 @@
} else if (item.attrType == '服务商联系电话') { } else if (item.attrType == '服务商联系电话') {
dataFrom.value.content[1].childrenContent[1].attrValue = dataFrom.value.content[1].childrenContent[1].attrValue =
item.attrValue item.attrValue
} else if (
item.attrType == '服务商' ||
item.attrType == '服务商名'
) {
dataFrom.value.content[1].childrenContent[2].attrValue =
item.attrValue
} }
}) })
} }

15
front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-08 11:56:28 * @Date: 2022-06-08 11:56:28
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-01 14:21:04 * @LastEditTime: 2022-07-05 11:42:59
* @Description: 开发组件详情页头部 * @Description: 开发组件详情页头部
--> -->
<template> <template>
@ -18,11 +18,15 @@
<!-- <span class="name">{{ props.dataList.name }}</span> --> <!-- <span class="name">{{ props.dataList.name }}</span> -->
<div class="label-content"> <div class="label-content">
<p class="lable-father"> <p class="lable-father">
<span class="label"> <span class="label" v-if="props.dataList.type">
{{ componentType || props.dataList.type }} {{ props.dataList.type }}
</span>
<span class="label" v-if="props.dataList.shareType">
{{ props.dataList.shareType }}
</span>
<span class="label" v-if="props.dataList.shareCondition">
{{ props.dataList.shareCondition }}
</span> </span>
<span class="label">{{ props.dataList.shareType }}</span>
<span class="label">{{ props.dataList.shareCondition }}</span>
</p> </p>
</div> </div>
<!-- <span class="label">免费</span> --> <!-- <span class="label">免费</span> -->
@ -96,6 +100,7 @@
resourceName: props.dataList.name, resourceName: props.dataList.name,
time: props.dataList.createDate, time: props.dataList.createDate,
type: props.dataList.type, type: props.dataList.type,
componentType: '开发组件',
}, },
], ],
deptId: props.dataList.deptId, deptId: props.dataList.deptId,

7
front/src/views/detailsAll/components/Developer/DeveloperTrial.vue
View File

@ -130,6 +130,13 @@
border-right: 0.01rem #ffffff solid; border-right: 0.01rem #ffffff solid;
padding-left: 0.7rem; padding-left: 0.7rem;
padding-right: 1rem; padding-right: 1rem;
& > p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
} }
.main-center { .main-center {
padding-left: 1rem; padding-left: 1rem;

104
front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
View File

@ -1,30 +1,79 @@
<template> <template>
<div class="application-associated-ability" v-if="flag"> <div class="application-associated-ability" v-if="flag">
<detals-title title="关联应用" type="RELEVANCE"></detals-title> <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main"> <div
class="application-associated-ability-main"
v-if="dataFrom[0].dataList.length < 4"
>
<div <div
class="associated-ability-card" class="associated-ability-card"
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList" v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id" :key="dataListitem.id"
@click="switchFunction(dataListitem.id)" @click="switchFunction(dataListitem.id)"
> >
<div class="associated-ability-card-title"> <a-tooltip>
{{ dataListitem.name }} <template #title>{{ dataListitem.name }}</template>
</div> <div class="associated-ability-card-title">
<div class="associated-ability-card-content"> {{ dataListitem.name }}
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div> </div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div> </div>
</div> </div>
</div> </div>
<div class="application-associated-ability-main" v-else>
<swiper
:slidesPerView="3"
:spaceBetween="30"
:pagination="{ clickable: true }"
:modules="modules"
class="mySwiper"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id"
>
<div
class="associated-ability-card"
@click="switchFunction(dataListitem.id)"
>
<a-tooltip>
<template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
const router = useRouter() const router = useRouter()
const modules = ref([Pagination])
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({ const props = defineProps({
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Array, default: null },
@ -34,17 +83,20 @@
const oldid = router.currentRoute.value.query.id const oldid = router.currentRoute.value.query.id
//点击查看详情 //点击查看详情
const switchFunction = (id) => { const switchFunction = (id) => {
router.push({ // router.push({
path: '/details', // path: '/details',
query: { // query: {
id: id, // id: id,
}, // },
}) // })
window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
// alert(id)
} }
if (props.associatedComponents[0].dataList.length != 0) { console.log('这个是空值', props.associatedComponents[0])
if (props.associatedComponents[0].dataList.length > 0) {
console.log('这个是空值', props.associatedComponents)
flag.value = true flag.value = true
dataFrom.value = props.associatedComponents dataFrom.value = props.associatedComponents
debugger
console.log('dataFrom.value', dataFrom.value) console.log('dataFrom.value', dataFrom.value)
} else { } else {
flag.value = false flag.value = false
@ -75,7 +127,7 @@
<style lang="less" scoped> <style lang="less" scoped>
.application-associated-ability { .application-associated-ability {
padding-top: 0.8rem; padding-top: 0.8rem;
padding-bottom: 0.8rem; padding-bottom: 0.6rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -83,20 +135,31 @@
margin-top: 0.4rem; margin-top: 0.4rem;
width: 13.3rem; width: 13.3rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-around;
:deep(.swiper) {
padding-bottom: 0.6rem;
}
.associated-ability-card { .associated-ability-card {
width: 3.2rem; width: 3.2rem;
height: 2.78rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border: 1px solid #e4e6f5; border: 1px solid #e4e6f5;
border-radius: 0.1rem; border-radius: 0.1rem;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
margin-right: 0.2rem;
margin-top: 0.2rem;
cursor: pointer; cursor: pointer;
.associated-ability-card-title { .associated-ability-card-title {
width: 2.2rem;
padding-top: 0.3rem; padding-top: 0.3rem;
font-size: 0.22rem; font-size: 0.22rem;
text-align: center; text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.associated-ability-card-content { .associated-ability-card-content {
width: 100%; width: 100%;
@ -107,6 +170,11 @@
color: #999; color: #999;
margin-right: 0.15rem; margin-right: 0.15rem;
margin-top: 0.15rem; margin-top: 0.15rem;
text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
} }
} }
} }

59
front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
View File

@ -21,13 +21,14 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import { queryPartAppByKeyId2 } from '@/api/home'
// 获取当前路由地址
const router = useRouter()
const keyId = router.currentRoute.value.query.id
const navList = ref([ const navList = ref([
{
name: '关联应用',
key: 'layer-service-associated-ability',
},
{ {
name: '图层展示', name: '图层展示',
key: 'service-presentation', key: 'service-presentation',
@ -62,8 +63,23 @@
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Array, default: null },
}) })
const select = ref('service-presentation')
const list = ref([]) const list = ref([])
// 根据能力id查询是否存在关联应用
if (keyId) {
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
console.log('ressssssss', res)
if (res.data.data.length > 0) {
// 存在关联应用时在导航栏加入关联应用
navList.value.unshift({
name: '关联应用',
key: 'layer-service-associated-ability',
show: true,
})
list.value.unshift('关联应用')
}
})
}
const select = ref('layer-service-associated-ability')
const selectNav = (key) => { const selectNav = (key) => {
select.value = key select.value = key
console.log(key, select.value) console.log(key, select.value)
@ -122,21 +138,15 @@
list.value.push('使用方式') list.value.push('使用方式')
} }
}) })
list.value.push('关联应用') list.value.unshift('关联应用')
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
if (list.value.indexOf(item.name) > -1) { if (list.value.indexOf(item.name) > -1) {
if (item.name == '关联应用') { item.show = true
if (props.associatedComponents[0].dataList.length != 0) {
item.show = true
}
} else {
item.show = true
}
} }
}) })
select.value = navList.value.filter( select.value = navList.value.filter(
(item) => item.name === '图层展示' (item) => item.name === list.value[0]
)[0].key )[0].key
console.log('11111111111111111111111111', list.value, navList.value) console.log('11111111111111111111111111', list.value, navList.value)
} }
@ -203,25 +213,18 @@
list.value.push('使用方式') list.value.push('使用方式')
} }
}) })
list.value.push('关联应用') list.value.unshift('关联应用')
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
if (list.value.indexOf(item.name) > -1) { if (list.value.indexOf(item.name) > -1) {
if (item.name == '关联应用') { item.show = true
if (props.associatedComponents[0].dataList.length != 0) {
item.show = true
}
} else {
item.show = true
}
} }
}) })
if (list.value.length > 0) { if (navList.value.filter((item) => item.name === list.value[0])[0]) {
select.value = navList.value.filter( select.value = navList.value.filter(
(item) => item.name === '图层展示' (item) => item.name === list.value[0]
)[0].key )[0].key
} }
console.log('11111111111111111111111111', list.value, navList.value)
} }
} }
) )
@ -239,19 +242,23 @@
padding: 0 3rem; padding: 0 3rem;
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb; box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
position: relative; position: relative;
.nav { .nav {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.line { .line {
width: 0.4rem; width: 0.4rem;
height: 0.04rem; height: 0.04rem;
} }
} }
.select { .select {
color: #526aff; color: #526aff;
.line { .line {
background: #526aff; background: #526aff;
} }

15
front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-08 11:56:28 * @Date: 2022-06-08 11:56:28
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-01 18:52:34 * @LastEditTime: 2022-07-05 11:43:18
* @Description: 算法详情页头部 * @Description: 算法详情页头部
--> -->
<template> <template>
@ -18,11 +18,15 @@
<!-- <span class="name">{{ props.dataList.name }}</span> --> <!-- <span class="name">{{ props.dataList.name }}</span> -->
<div class="label-content"> <div class="label-content">
<p class="lable-father"> <p class="lable-father">
<span class="label"> <span class="label" v-if="props.dataList.type">
{{ componentType || props.dataList.type }} {{ props.dataList.type }}
</span>
<span class="label" v-if="props.dataList.shareType">
{{ props.dataList.shareType }}
</span>
<span class="label" v-if="props.dataList.shareCondition">
{{ props.dataList.shareCondition }}
</span> </span>
<span class="label">{{ props.dataList.shareType }}</span>
<span class="label">{{ props.dataList.shareCondition }}</span>
</p> </p>
</div> </div>
<!-- <span class="label">免费</span> --> <!-- <span class="label">免费</span> -->
@ -96,6 +100,7 @@
resourceName: props.dataList.name, resourceName: props.dataList.name,
time: props.dataList.createDate, time: props.dataList.createDate,
type: props.dataList.type, type: props.dataList.type,
componentType: '图层服务',
}, },
], ],
deptId: props.dataList.deptId, deptId: props.dataList.deptId,

110
front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
View File

@ -10,16 +10,20 @@
<div class="content" v-for="item in dataFrom.content" :key="item.title"> <div class="content" v-for="item in dataFrom.content" :key="item.title">
<div class="content-left"> <div class="content-left">
<div class="left"> <div class="left">
<div class="content-left-content"> <a-tooltip>
<template #title>{{ item.linkValue }}</template>
<p> <p>
<span>服务地址：</span> 服务地址：
<span>{{ item.linkValue }}</span> {{ item.linkValue }}
</p> </p>
</a-tooltip>
<a-tooltip>
<template #title>{{ item.csslinkValue }}</template>
<p> <p>
<span>样式服务地址：</span> 样式服务地址：
<span>{{ item.csslnkValue }}</span> {{ item.csslinkValue }}
</p> </p>
</div> </a-tooltip>
</div> </div>
<div class="right"> <div class="right">
<div @click="technical()">接口文档</div> <div @click="technical()">接口文档</div>
@ -31,7 +35,7 @@
<div class="content-right-title">{{ item.contact }}</div> <div class="content-right-title">{{ item.contact }}</div>
<div class="content-right-content"> <div class="content-right-content">
<p> <p>
<span>{{ item.contact }}</span> <span>{{ item.facilitator.name }}</span>
<a-tooltip> <a-tooltip>
<template #title>{{ item.facilitator.value }}</template> <template #title>{{ item.facilitator.value }}</template>
<span>{{ item.facilitator.value }}</span> <span>{{ item.facilitator.value }}</span>
@ -57,7 +61,7 @@
<div class="content-right-title">{{ item.contact2 }}</div> <div class="content-right-title">{{ item.contact2 }}</div>
<div class="content-right-content"> <div class="content-right-content">
<p> <p>
<span>{{ item.contact2 }}</span> <span>{{ item.facilitator2.name }}</span>
<a-tooltip> <a-tooltip>
<template #title>{{ item.facilitator2.value }}</template> <template #title>{{ item.facilitator2.value }}</template>
<span>{{ item.facilitator2.value }}</span> <span>{{ item.facilitator2.value }}</span>
@ -86,6 +90,7 @@
<script setup> <script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { message } from 'ant-design-vue'
import { pinyin } from 'pinyin-pro' import { pinyin } from 'pinyin-pro'
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
let dataFrom = ref({ let dataFrom = ref({
@ -99,6 +104,7 @@
name: '接口地址：', name: '接口地址：',
}, },
linkValue: '', linkValue: '',
csslinkValue: '',
contact: '归属部门', contact: '归属部门',
facilitator: { name: '归属部门：', value: '' }, facilitator: { name: '归属部门：', value: '' },
people: { name: '部门联系人：', value: '' }, people: { name: '部门联系人：', value: '' },
@ -142,7 +148,7 @@
dataFrom.value.content[0].phone.value = props.dataList.deptPhone dataFrom.value.content[0].phone.value = props.dataList.deptPhone
console.log('dataList', props.dataList) console.log('dataList', props.dataList)
props.dataList.infoList.map((item) => { props.dataList.infoList.map((item) => {
if (item.attrType === '组件地址') { if (item.attrType === '服务地址') {
dataFrom.value.content[0].linkValue = item.attrValue || '--' dataFrom.value.content[0].linkValue = item.attrValue || '--'
} else if (item.attrType === '服务商') { } else if (item.attrType === '服务商') {
dataFrom.value.content[0].facilitator2.value = item.attrValue || '--' dataFrom.value.content[0].facilitator2.value = item.attrValue || '--'
@ -150,6 +156,8 @@
dataFrom.value.content[0].people2.value = item.attrValue || '--' dataFrom.value.content[0].people2.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系电话') { } else if (item.attrType === '服务商联系电话') {
dataFrom.value.content[0].phone2.value = item.attrValue || '--' dataFrom.value.content[0].phone2.value = item.attrValue || '--'
} else if (item.attrType === '样式服务地址') {
dataFrom.value.content[0].csslinkValue = item.attrValue || '--'
} }
}) })
} }
@ -177,7 +185,7 @@
dataFrom.value.content[0].phone.value = val.deptPhone dataFrom.value.content[0].phone.value = val.deptPhone
console.log('dataList', val) console.log('dataList', val)
val.infoList.map((item) => { val.infoList.map((item) => {
if (item.attrType === '组件地址') { if (item.attrType === '服务地址') {
dataFrom.value.content[0].linkValue = item.attrValue || '--' dataFrom.value.content[0].linkValue = item.attrValue || '--'
} else if (item.attrType === '服务商') { } else if (item.attrType === '服务商') {
dataFrom.value.content[0].facilitator2.value = dataFrom.value.content[0].facilitator2.value =
@ -186,6 +194,8 @@
dataFrom.value.content[0].people2.value = item.attrValue || '--' dataFrom.value.content[0].people2.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系电话') { } else if (item.attrType === '服务商联系电话') {
dataFrom.value.content[0].phone2.value = item.attrValue || '--' dataFrom.value.content[0].phone2.value = item.attrValue || '--'
} else if (item.attrType === '样式服务地址') {
dataFrom.value.content[0].csslinkValue = item.attrValue || '--'
} }
}) })
} }
@ -204,12 +214,18 @@
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => item.attrType === '技术文档' (item) => item.attrType === '技术文档'
)[0] )[0]
console.log('dataFrom.value.link', obj.attrValue) if (obj) {
window.open( window.open(
window.SITE_CONFIG.previewUrl + window.SITE_CONFIG.previewUrl +
'hisense_office/onlinePreview?url=' + 'hisense_office/onlinePreview?url=' +
btoa(encodeURI(obj.attrValue)) btoa(encodeURI(obj.attrValue))
) )
} else {
message.config({
top: '100px', // 距离顶部的位置
})
message.error('暂未上传接口文档')
}
} }
function technicalNew() { function technicalNew() {
// 拼接路径 // 拼接路径
@ -222,12 +238,18 @@
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => item.attrType === '使用手册' (item) => item.attrType === '使用手册'
)[0] )[0]
console.log('dataFrom.value.link', obj.attrValue) if (obj) {
window.open( window.open(
window.SITE_CONFIG.previewUrl + window.SITE_CONFIG.previewUrl +
'hisense_office/onlinePreview?url=' + 'hisense_office/onlinePreview?url=' +
btoa(encodeURI(obj.attrValue)) btoa(encodeURI(obj.attrValue))
) )
} else {
message.config({
top: '100px', // 距离顶部的位置
})
message.error('暂未上传使用手册')
}
} }
</script> </script>
@ -237,9 +259,11 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0.8rem 0; padding: 0.8rem 0;
.content { .content {
margin-top: 0.3rem; margin-top: 0.3rem;
display: flex; display: flex;
.content-left { .content-left {
height: 1.8rem; height: 1.8rem;
width: 6.2rem; width: 6.2rem;
@ -254,36 +278,35 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 0.35rem; padding: 0 0.35rem;
.left { .left {
.content-left-title { .content-left-title {
font-size: 0.26rem; font-size: 0.26rem;
line-height: 0.26rem; line-height: 0.26rem;
color: #212956; color: #212956;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
span:first-child { span:first-child {
margin-right: 0.1rem; margin-right: 0.1rem;
} }
} }
.content-left-content { p {
width: 4.2rem; display: block;
font-size: 0.2rem;
color: rgba(33, 41, 86, 0.8); color: rgba(33, 41, 86, 0.8);
line-height: 0.2rem; width: 4.2rem;
p { overflow: hidden;
display: -webkit-box; text-overflow: ellipsis;
overflow: hidden; white-space: nowrap;
-webkit-line-clamp: 1; font-size: 20px;
-webkit-box-orient: vertical; color: #212956;
// margin-bottom: 0.1rem; line-height: 26px;
font-size: 20px; margin-top: 0.3rem;
color: #212956; }
line-height: 26px; p:first-child {
} margin-top: 0.2rem;
p:last-of-type {
margin-top: 20px;
}
} }
} }
.right { .right {
div { div {
height: 0.4rem; height: 0.4rem;
@ -297,11 +320,13 @@
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
div:first-child { div:first-child {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
} }
} }
.content-right { .content-right {
height: 1.8rem; height: 1.8rem;
width: 6.2rem; width: 6.2rem;
@ -316,17 +341,20 @@
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
padding: 0 0.3rem; padding: 0 0.3rem;
.content-right-left { .content-right-left {
border-right: 0.01rem solid #b0b9f1; // border-right: 0.01rem solid #b0b9f1;
padding-right: 0.1rem; padding-right: 0.1rem;
margin-right: 0.1rem; margin-right: 0.1rem;
} }
.content-right-title { .content-right-title {
font-size: 0.26rem; font-size: 0.26rem;
line-height: 0.26rem; line-height: 0.26rem;
color: #212956; color: #212956;
margin-bottom: 0.15rem; margin-bottom: 0.15rem;
} }
.content-right-content { .content-right-content {
display: flex; display: flex;
font-size: 0.16rem; font-size: 0.16rem;
@ -336,6 +364,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
flex-direction: column; flex-direction: column;
p { p {
// width: 1.60rem; // width: 1.60rem;
height: 0.2rem; height: 0.2rem;
@ -345,6 +374,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin-right: 0.15rem; margin-right: 0.15rem;
span { span {
cursor: pointer; cursor: pointer;
font-size: 20px; font-size: 20px;

346
front/src/views/home/AbilityToApplyFor.vue
View File

@ -1,145 +1,263 @@
<template> <template>
<div class="ability-to-apply-for"> <div class="ability-to-apply-for" :class="{ all: falg }">
<div class="title">申请能力</div> <div class="title">
<div <span>申请能力</span>
v-for="(item, index) in dataForm" <span class="btn" @click="falg = !falg" v-show="!falg">展开</span>
:key="index" <span class="btn" @click="falg = !falg" v-show="falg">收起</span>
class="ability-to-apply-for-content" </div>
> <div v-for="(item, index) in dataForm" :key="index" class="ability-to-apply-for-content">
<div class="dep-name"> <div class="dep-name">
<span></span> <span></span>
{{ item.deptName }} {{ item.deptName }}
</div> </div>
<template v-for="val in item.arr" :key="val.resourceId"> <template v-for="val in item.arr" :key="val.resourceId">
<div class="item"> <div class="item">
<div class="name"> <div class="tx" :class="
<span>{{ val.resourceName }}</span> val.type == '基础设施'
<span>{{ val.type }}</span> ? 'sxt'
</div> : val.componentType == '智能算法'
<div class="description"> ? 'znsf'
{{ : val.componentType == '图层服务'
val.description || ? 'tcfw'
(val.note1 && : val.componentType == '开发组件'
JSON.parse(val.note1)[0].channelName + ? 'kfzj'
'等' + : val.componentType == '业务组件'
JSON.parse(val.note1).length + ? 'ywzj'
'个摄像头') || : ''
'--' "></div>
}} <div class="text">
<div class="name">
<span @click="
showItem(val.resourceId, val.type, val.delFlag, val.note1)
" style="cursor: pointer">
{{ val.resourceName }}
</span>
<span>{{ val.type }}</span>
</div>
<div class="description">
{{
val.description ||
(val.note1 &&
JSON.parse(val.note1)[0].channelName +
'等' +
JSON.parse(val.note1).length +
'个摄像头') ||
'--'
}}
</div>
</div> </div>
<div class="remove" @click="removeFunction(val)"></div> <div class="remove" @click="removeFunction(val)"></div>
</div> </div>
</template> </template>
</div> </div>
</div> </div>
<a-modal v-model:visible="videoVisible" title="已申请摄像头列表" @ok="videoVisible = false">
<a-table :columns="columns" :data-source="xVideoList" bordered :pagination="{ defaultPageSize: 6 }">
<template #bodyCell="{ column, text }">
<!-- <template>
<a>{{ text }}</a>
</template> -->
</template>
</a-table>
</a-modal>
</template> </template>
<script setup> <script setup>
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { ref, defineProps } from 'vue' import { ref, defineProps } from 'vue'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
const props = defineProps({ const router = useRouter()
dataList: { type: Array, default: null }, const props = defineProps({
}) dataList: { type: Array, default: null },
let dataForm = ref([]) })
// eslint-disable-next-line vue/no-setup-props-destructure const falg = ref(false)
dataForm.value = props.dataList let dataForm = ref([])
const router = useRouter() const videoVisible = ref(false)
const arr = const xVideoList = ref([])
router.currentRoute.value.query.name instanceof Array
? router.currentRoute.value.query.name
: [router.currentRoute.value.query.name]
const dataResourceId = router.currentRoute.value.query.resourceId
const depList = ref({ const columns = ref([
Name: [], {
depID: [], title: '摄像头名称',
dataIndex: 'name',
},
])
// eslint-disable-next-line vue/no-setup-props-destructure
dataForm.value = props.dataList
console.log(dataForm.value)
// const router = useRouter()
// const arr =
// router.currentRoute.value.query.name instanceof Array
// ? router.currentRoute.value.query.name
// : [router.currentRoute.value.query.name]
// const dataResourceId = router.currentRoute.value.query.resourceId
// const depList = ref({
// Name: [],
// depID: [],
// })
//移除方法
const removeFunction = (data) => {
dataForm.value.map((val) => {
if (val.arr.length > 1) {
val.arr = val.arr.filter((item) => item.id !== data.id)
} else {
message.error('至少需要提交一条能力申请！')
}
}) })
//移除方法 dataForm.value = dataForm.value.filter((val) => val.arr.length !== 0)
const removeFunction = (data) => { }
dataForm.value.map((val) => { // 详情
if (val.arr.length > 1) { const showItem = (id, type, delFlag, note1) => {
val.arr = val.arr.filter((item) => item.id !== data.id) if (type == '基础设施') {
} else { let arr = JSON.parse(note1)
message.error('至少需要提交一条能力申请！') xVideoList.value = []
} arr.map((val) => {
xVideoList.value.push({ name: val.channelName, key: val.channelId })
}) })
dataForm.value = dataForm.value.filter((val) => val.arr.length !== 0) videoVisible.value = true
} else {
if (delFlag == 0) {
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
mybus.emit('tabsChange', { flag: id })
router.push({
path: '/details',
query: {
id: id,
},
})
}
} }
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.ability-to-apply-for { .ability-to-apply-for {
.title { height: 2.9rem;
font-size: 0.16rem; overflow: hidden;
color: #212121;
border-bottom: 0.01rem #dddee1 solid; .title {
padding-bottom: 0.1rem; font-size: 0.16rem;
color: #212121;
border-bottom: 0.01rem #dddee1 solid;
padding-bottom: 0.1rem;
margin-bottom: 0.2rem;
display: flex;
justify-content: space-between;
}
.ability-to-apply-for-content {
padding-right: 0.5rem;
position: relative;
.dep-name {
color: #0558e1;
font-size: 0.22rem;
display: flex;
align-items: center;
line-height: 0.22rem;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
span {
display: inline-block;
width: 0.05rem;
height: 0.05rem;
background: #0558e1;
border-radius: 0.05rem;
margin-right: 0.05rem;
}
} }
.ability-to-apply-for-content {
// margin-bottom: 0.3rem; .item {
// border-bottom: 0.01rem #dddee1 solid; padding-bottom: 0.1rem;
// padding-bottom: 0.3rem; margin-bottom: 0.1rem;
padding-right: 0.5rem; border-bottom: 1px solid #dddee1;
position: relative; display: flex;
.dep-name { align-items: center;
color: #0558e1;
.text {
margin-left: 0.2rem;
width: 8.8rem;
}
}
.name {
margin-bottom: 0.2rem;
span:first-child {
display: inline-block;
margin-right: 0.08rem;
font-size: 0.18rem; font-size: 0.18rem;
display: flex; color: #000000;
align-items: center;
line-height: 0.18rem;
margin-bottom: 0.2rem;
span {
display: inline-block;
width: 0.05rem;
height: 0.05rem;
background: #0558e1;
border-radius: 0.05rem;
margin-right: 0.05rem;
}
} }
.item {
padding-bottom: 0.1rem; span:last-child {
margin-bottom: 0.1rem; display: inline-block;
border-bottom: 1px solid #dddee1; padding: 0 0.05rem;
position: relative; background: #00b8e6;
} color: #fff;
.name {
margin-bottom: 0.2rem;
span:first-child {
display: inline-block;
margin-right: 0.08rem;
font-size: 0.2rem;
color: #000000;
}
span:last-child {
display: inline-block;
padding: 0 0.05rem;
background: #00b8e6;
color: #fff;
}
}
.description {
width: 10rem;
color: rgba(0, 0, 0, 0.45);
}
.remove {
width: 0.32rem;
height: 0.32rem;
position: absolute;
right: 0;
top: 50%;
margin-top: -0.16rem;
background: url('~@/assets/home/remove.png') no-repeat;
background-size: cover;
cursor: pointer;
}
.remove:hover {
background: url('~@/assets/home/remove-hover.png') no-repeat;
background-size: cover;
} }
} }
.description {
width: 8.8rem;
color: rgba(0, 0, 0, 0.45);
}
.remove {
margin-left: 0.1rem;
width: 0.32rem;
height: 0.32rem;
background: url('~@/assets/home/remove.png') no-repeat;
background-size: cover;
cursor: pointer;
}
.remove:hover {
background: url('~@/assets/home/remove-hover.png') no-repeat;
background-size: cover;
}
} }
}
.all {
height: unset;
min-height: 2.9rem;
}
.btn {
cursor: pointer;
}
.tx {
display: inline-block;
width: 0.8rem;
height: 0.8rem;
margin-left: 0.1rem;
}
.sxt {
background: url('~@/assets/home/sxt_square.png') no-repeat;
background-size: 100%;
}
.znsf {
background: url('~@/assets/home/znsf_square.png') no-repeat;
background-size: 100%;
}
.tcfw {
background: url('~@/assets/home/tcfw_square.png') no-repeat;
background-size: 100%;
}
.kfzj {
background: url('~@/assets/home/kfzj_square.png') no-repeat;
background-size: 100%;
}
.ywzj {
background: url('~@/assets/home/ywzj_square.png') no-repeat;
background-size: 100%;
}
</style> </style>

205
front/src/views/home/DetailsPageconetent.vue
View File

@ -56,14 +56,19 @@
<down-outlined v-show="item.shrinkFlag" @click="changeShrink(item.name)" /> <down-outlined v-show="item.shrinkFlag" @click="changeShrink(item.name)" />
</div> </div>
</div> </div>
<div class="top-content"> <div class="top-content" v-if="Cardsname == '组件服务'">
<span class="top-content-title">共享条件</span> <span class="top-content-title">共享条件</span>
<div class="leixingsumfather"> <div class="leixingsumfather">
<div class="leixingsum"> <div class="leixingsum">
<a-checkable-tag :checked="tagFlag == '申请'" @change="() => chagneTag('申请')"> <a-checkable-tag :checked="tagFlag == '申请'" @change="() => chagneTag('申请')">
申请 申请
</a-checkable-tag> </a-checkable-tag>
<a-checkable-tag :checked="tagFlag == '免批申请'" @change="() => chagneTag('免批申请')"> </div>
<div class="leixingsum">
<a-checkable-tag
:checked="tagFlag == '免批申请'"
@change="() => chagneTag('免批申请')"
>
免批申请 免批申请
</a-checkable-tag> </a-checkable-tag>
</div> </div>
@ -181,14 +186,19 @@
<down-outlined v-show="item.shrinkFlag" @click="changeShrink(item.name)" /> <down-outlined v-show="item.shrinkFlag" @click="changeShrink(item.name)" />
</div> </div>
</div> </div>
<div class="top-content"> <div class="top-content" v-if="Cardsname == '组件服务'">
<span class="top-content-title">共享条件</span> <span class="top-content-title">共享条件</span>
<div class="leixingsumfather"> <div class="leixingsumfather">
<div class="leixingsum"> <div class="leixingsum">
<a-checkable-tag :checked="tagFlag == '申请'" @change="() => chagneTag('申请')"> <a-checkable-tag :checked="tagFlag == '申请'" @change="() => chagneTag('申请')">
申请 申请
</a-checkable-tag> </a-checkable-tag>
<a-checkable-tag :checked="tagFlag == '免批申请'" @change="() => chagneTag('免批申请')"> </div>
<div class="leixingsum">
<a-checkable-tag
:checked="tagFlag == '免批申请'"
@change="() => chagneTag('免批申请')"
>
免批申请 免批申请
</a-checkable-tag> </a-checkable-tag>
</div> </div>
@ -291,14 +301,19 @@
<down-outlined v-show="item.shrinkFlag" @click="changeShrink(item.name)" /> <down-outlined v-show="item.shrinkFlag" @click="changeShrink(item.name)" />
</div> </div>
</div> </div>
<div class="top-content"> <div class="top-content" v-if="Cardsname == '组件服务'">
<span class="top-content-title">共享条件</span> <span class="top-content-title">共享条件</span>
<div class="leixingsumfather"> <div class="leixingsumfather">
<div class="leixingsum"> <div class="leixingsum">
<a-checkable-tag :checked="tagFlag == '申请'" @change="() => chagneTag('申请')"> <a-checkable-tag :checked="tagFlag == '申请'" @change="() => chagneTag('申请')">
申请 申请
</a-checkable-tag> </a-checkable-tag>
<a-checkable-tag :checked="tagFlag == '免批申请'" @change="() => chagneTag('免批申请')"> </div>
<div class="leixingsum">
<a-checkable-tag
:checked="tagFlag == '免批申请'"
@change="() => chagneTag('免批申请')"
>
免批申请 免批申请
</a-checkable-tag> </a-checkable-tag>
</div> </div>
@ -598,99 +613,97 @@ export default defineComponent({
listKey.value++ listKey.value++
getAppResources() getAppResources()
} }
const getNewList = () => {
// 获取筛选条件
const getNewList = () => {
tecHnosphere = router.currentRoute.value.query.tecHnosphere
appLiCation = router.currentRoute.value.query.appLiCation
const params = {
topCategoryName: Cardsname.value,
}
selectDicStoreAll(params).then((res) => {
console.log('selectDicStoreAll============>', res)
const { data } = res.data
ListContent.records = []
ListContent.records = data
tecHnosphere = router.currentRoute.value.query.tecHnosphere tecHnosphere = router.currentRoute.value.query.tecHnosphere
appLiCation = router.currentRoute.value.query.appLiCation appLiCation = router.currentRoute.value.query.appLiCation
mybus.emit('getDeptList') const params = {
ListContent.records.forEach((val) => { topCategoryName: Cardsname.value,
val.selectedTags = []
if (val.name == '应用领域' && appLiCation) {
val.selectedTags[0] = []
val.selectedTags[0] = appLiCation
paramsGetResources.infoList.push({
attrType: '应用领域',
attrValue: appLiCation,
})
if (searchValue.value) {
paramsGetResources.name = searchValue.value
}
pageWithAttrs(paramsGetResources).then((res) => {
resourceList.data = []
resourceList.data = res.data.data.records || []
resourceTotal.value = res.data.data.total || ''
})
}
tecHnosphere = router.currentRoute.value.query.tecHnosphere
appLiCation = router.currentRoute.value.query.appLiCation
if (val.name == '技术领域' && tecHnosphere) {
val.selectedTags[1] = tecHnosphere
paramsGetResources.infoList.push({
attrType: '技术领域',
attrValue: tecHnosphere,
})
if (searchValue.value) {
paramsGetResources.name = searchValue.value
}
pageWithAttrs(paramsGetResources).then((res) => {
resourceList.data = []
resourceList.data = res.data.data.records || []
resourceTotal.value = res.data.data.total || ''
})
console.log('paramsGetResources', paramsGetResources)
}
tecHnosphere = router.currentRoute.value.query.tecHnosphere
appLiCation = router.currentRoute.value.query.appLiCation
if (val.typeList && val.typeList.length > 6) {
val.showShrink = true
val.shrinkFlag = true
}
})
listKey.value++
listKey2.value++
})
console.log('selectDicStoreAll', ListContent)
}
// 筛选条件
let ListContent = reactive({
records: [],
})
const resourceList = reactive({ data: [] })
const videoList = reactive({ data: [] })
const resourceTotal = ref('')
const getAppResources = (switchIndex) => {
//switchIndex这个参数是下面的分页传过来的参数
paramsGetResources.name = searchValue.value
paramsGetResources.type = Cardsname.value
console.log(
'执行getAppResources====================》',
paramsGetResources
)
if (
!whoShow1.value.itShowBaoTou &&
paramsGetResources.type === '数据资源'
) {
if (switchIndex != '分页查询') {
paramsGetResources.pageNum = 1
} }
let dataResourceParams = { selectDicStoreAll(params).then((res) => {
serviceName: paramsGetResources.name, //资源名称 console.log('selectDicStoreAll============>', res)
orderField: whoShow1.value.itShowQingDao const { data } = res.data
? paramsGetResources.orderField == 'applyCount' ListContent.records = []
? 'syqk' ListContent.records = data
: 'fbrq' tecHnosphere = router.currentRoute.value.query.tecHnosphere
: paramsGetResources.orderField == 'applyCount' appLiCation = router.currentRoute.value.query.appLiCation
mybus.emit('getDeptList')
ListContent.records.forEach((val) => {
val.selectedTags = []
if (val.name == '应用领域' && appLiCation) {
val.selectedTags[0] = []
val.selectedTags[0] = appLiCation
paramsGetResources.infoList.push({
attrType: '应用领域',
attrValue: appLiCation,
})
if (searchValue.value) {
paramsGetResources.name = searchValue.value
}
pageWithAttrs(paramsGetResources).then((res) => {
resourceList.data = []
resourceList.data = res.data.data.records || []
resourceTotal.value = res.data.data.total || ''
})
}
tecHnosphere = router.currentRoute.value.query.tecHnosphere
appLiCation = router.currentRoute.value.query.appLiCation
if (val.name == '技术领域' && tecHnosphere) {
val.selectedTags[1] = tecHnosphere
paramsGetResources.infoList.push({
attrType: '技术领域',
attrValue: tecHnosphere,
})
if (searchValue.value) {
paramsGetResources.name = searchValue.value
}
pageWithAttrs(paramsGetResources).then((res) => {
resourceList.data = []
resourceList.data = res.data.data.records || []
resourceTotal.value = res.data.data.total || ''
})
console.log('paramsGetResources', paramsGetResources)
}
tecHnosphere = router.currentRoute.value.query.tecHnosphere
appLiCation = router.currentRoute.value.query.appLiCation
if (val.typeList && val.typeList.length > 8) {
val.showShrink = true
val.shrinkFlag = true
}
})
listKey.value++
listKey2.value++
})
console.log('selectDicStoreAll', ListContent)
}
// 筛选条件
let ListContent = reactive({
records: [],
})
const resourceList = reactive({ data: [] })
const videoList = reactive({ data: [] })
const resourceTotal = ref('')
const getAppResources = (switchIndex) => {
//switchIndex这个参数是下面的分页传过来的参数
paramsGetResources.name = searchValue.value
paramsGetResources.type = Cardsname.value
console.log(
'执行getAppResources====================》',
paramsGetResources
)
if (
!whoShow1.value.itShowBaoTou &&
paramsGetResources.type === '数据资源'
) {
if (switchIndex != '分页查询') {
paramsGetResources.pageNum = 1
}
let dataResourceParams = {
serviceName: paramsGetResources.name || '', //资源名称
orderField: whoShow1.value.itShowQingDao
? paramsGetResources.orderField == 'applyCount'
? 'syqk'
: 'fbrq'
: paramsGetResources.orderField == 'applyCount'
? 'requestCount' ? 'requestCount'
: 'createTime', //排序字段 : 'createTime', //排序字段
orderType: paramsGetResources.orderType.toLowerCase(), //排序方式：desc，asc orderType: paramsGetResources.orderType.toLowerCase(), //排序方式：desc，asc

141
front/src/views/home/apply.vue
View File

@ -118,9 +118,10 @@
name="applicationBackground" name="applicationBackground"
:rules="[{ required: true, message: '请输入应用背景' }]" :rules="[{ required: true, message: '请输入应用背景' }]"
> >
<a-input <a-textarea
placeholder="请输入应用背景" placeholder="请输入应用背景"
v-model:value="formName.applicationBackground" v-model:value="formName.applicationBackground"
:rows="4"
/> />
</a-form-item> </a-form-item>
</div> </div>
@ -130,9 +131,10 @@
name="effectWish" name="effectWish"
:rules="[{ required: true, message: '请输入期望效果' }]" :rules="[{ required: true, message: '请输入期望效果' }]"
> >
<a-input <a-textarea
placeholder="请输入期望效果" placeholder="请输入期望效果"
v-model:value="formName.effectWish" v-model:value="formName.effectWish"
:rows="4"
/> />
</a-form-item> </a-form-item>
</div> </div>
@ -173,7 +175,7 @@
</a-upload> </a-upload>
</a-form-item> </a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }"> <div class="bottom-btn">
<a-button <a-button
style=" style="
width: 80px; width: 80px;
@ -211,7 +213,7 @@
> >
提交申请 提交申请
</a-button> </a-button>
</a-form-item> </div>
</a-form> </a-form>
</div> </div>
<div class="success" v-else> <div class="success" v-else>
@ -265,11 +267,34 @@
setup() { setup() {
const router = useRouter() const router = useRouter()
const disabled = ref(false) const disabled = ref(false)
const list = ref(JSON.parse(localStorage.getItem('applyList')))
const num = ref(0)
list.value.map((item) => {
if (item.checkedList) {
console.log(item)
num.value += Number(item.checkedList.length)
}
})
console.log(
'list',
list.value
// list.value[0].children.filter(
// (val) => val.id == list.value[0].checkedList[0]
// )[0].resourceName
)
const baseURL = window.SITE_CONFIG.apiURL const baseURL = window.SITE_CONFIG.apiURL
let record = ref('1') let record = ref('1')
const text = ref('') const text = ref('')
const formName = reactive({ const formName = reactive({
title: '', // 标题 title: list.value[0].children
? list.value[0].children
.filter((val) => val.id == list.value[0].checkedList[0])[0]
.resourceName.concat(
list.value[0].checkedList.length > 0
? '等能力申请' + num.value + '个'
: '能力申请'
)
: list.value[0].arr[0].resourceName.concat('能力申请'), // 标题
applicationSystem: [], // 应用系统 applicationSystem: [], // 应用系统
applicationScene: [], // 应用场景 applicationScene: [], // 应用场景
applicationBackground: '', // 应用背景 applicationBackground: '', // 应用背景
@ -292,7 +317,6 @@
formName.unit = res.data.data.deptName formName.unit = res.data.data.deptName
}) })
}) })
const list = ref(JSON.parse(localStorage.getItem('applyList')))
// console.log('本地存储====================》', list.value) // console.log('本地存储====================》', list.value)
const businessKey = ref(router.currentRoute.value.query.id) const businessKey = ref(router.currentRoute.value.query.id)
const taskId = ref(router.currentRoute.value.query.taskId) const taskId = ref(router.currentRoute.value.query.taskId)
@ -423,7 +447,7 @@
applySuccess.value = false applySuccess.value = false
message.success('操作成功！') message.success('操作成功！')
console.log('能力申请================>', res) console.log('能力申请================>', res)
if (ids) { if (ids && ids.length > 0) {
sgcDel({ ids: ids }).then((res) => { sgcDel({ ids: ids }).then((res) => {
if (res.data.msg === 'success') { if (res.data.msg === 'success') {
mybus.emit('getSgcNum') mybus.emit('getSgcNum')
@ -504,6 +528,7 @@
}, },
]) ])
const systemOptions = ref([]) const systemOptions = ref([])
const systemOptions2 = ref([])
const handleChange = (info) => { const handleChange = (info) => {
if (info.file.status !== 'uploading') { if (info.file.status !== 'uploading') {
@ -536,83 +561,50 @@
return isPNG || Upload.LIST_IGNORE return isPNG || Upload.LIST_IGNORE
} }
const fileList = ref([]) const fileList = ref([])
//删除改变arr
// mybus.on('reomveOldData', (item) => {
// debugger
// arr = []
// formName.system = []
// record.value = record.value + '1'
// arr = item.Name
// // dataResourceId = item.depID
// if (arr && arr.length !== 0) {
// disabled.value = true
// let str = ''
// arr.forEach((val, index) => {
// str += val
// if (index < arr.length - 1) {
// str += '、'
// }
// })
// formName.formNameSystem = str
// }
// arr.forEach((val, index) => {
// formName.system.push({
// resourceName: val,
// // resourceId: dataResourceId[index],
// })
// })
// })
// 应用系统下拉 // 应用系统下拉
const flag = ref(true)
const systemHandleChange = (value) => { const systemHandleChange = (value) => {
console.log(`selected ${value}`) console.log(`selected ${value}`)
} }
const systemHandleSearch = (value) => { const systemHandleSearch = (value) => {
console.log(`search ${value}`) console.log(`search ${value}`)
text.value = value text.value = value
systemOptions.value = [] systemOptions.value = systemOptions2.value.filter(
window.setTimeout(() => { (item) => item.label.search(text.value) > -1
if (flag.value && text.value == value && text.value !== '') { )
console.log('1秒未输入~~~~~~~~~~~~~~~~~~~~~~~~~~')
pageWithAttrs({
pageNum: 99999,
pageSize: 5,
type: '应用资源',
name: text.value,
infoList: [],
}).then((res) => {
if (res.data.code == 0) {
if (res.data.data.records.length == 0) {
message.warning('该关键词，暂无应用资源！')
} else {
res.data.data.records.map((val) => {
systemOptions.value.push({
value: val.name,
label: val.name,
})
})
console.log(
'第一次获取===================>',
systemOptions.value
)
}
} else {
message.error('获取数据失败!')
}
})
}
}, 2000)
} }
pageWithAttrs({
pageNum: 1,
pageSize: 99999,
type: '应用资源',
name: '',
infoList: [],
}).then((res) => {
if (res.data.code == 0) {
if (res.data.data.records.length == 0) {
message.warning('该关键词，暂无应用资源！')
} else {
res.data.data.records.map((val) => {
systemOptions2.value.push({
value: val.name,
label: val.name,
})
})
// console.log('第一次获取===================>', systemOptions2.value)
}
} else {
message.error('应用系统获取数据失败!')
}
})
const handleBlur = () => { const handleBlur = () => {
console.log('blur') console.log('blur')
flag.value = false
} }
const handleFocus = () => { const handleFocus = () => {
console.log('focus') console.log('focus')
flag.value = true // console.log(formName.applicationSystem)
systemOptions.value = [] // formName.applicationSystem = []
systemOptions.value = systemOptions2.value
// systemOptions.value = []
} }
// const filterOption = (input, option) => { // const filterOption = (input, option) => {
@ -727,4 +719,13 @@
flex-wrap: nowrap; flex-wrap: nowrap;
} }
} }
textarea {
resize: none;
font-size: 14px;
}
.bottom-btn {
display: flex;
justify-content: center;
// position: fixed;
}
</style> </style>

21
front/src/views/home/components/header.vue
View File

@ -6,7 +6,10 @@
props.showView === 'algorithm-details' ? 'blue' : '', props.showView === 'algorithm-details' ? 'blue' : '',
]" ]"
> >
<div class="name">城市云脑能力管理中心</div> <div class="name">
<div class="name-bg"></div>
城市云脑通用能力服务平台
</div>
<div <div
v-for="item in navList" v-for="item in navList"
:key="item.key" :key="item.key"
@ -17,6 +20,7 @@
{{ item.name }} {{ item.name }}
</div> </div>
<a-badge :count="sgcNum"> <a-badge :count="sgcNum">
<!-- 购物车 -->
<svg <svg
t="1650455446850" t="1650455446850"
class="icon" class="icon"
@ -37,6 +41,7 @@
<!-- <a-avatar shape="square" size="large" /> --> <!-- <a-avatar shape="square" size="large" /> -->
</a-badge> </a-badge>
<a-badge :count="mynoticeNum" style="margin-left: 0.2rem"> <a-badge :count="mynoticeNum" style="margin-left: 0.2rem">
<!-- 消息提醒 -->
<svg <svg
t="1654051054113" t="1654051054113"
class="icon2" class="icon2"
@ -265,26 +270,23 @@
sgcNum.value = res.data.data.count sgcNum.value = res.data.data.count
}) })
getMynotice() getMynotice()
// 解决
const mynoticeDom = document.querySelector('.icon2') const mynoticeDom = document.querySelector('.icon2')
const mynotice = document.querySelector('.mynotice') const mynotice = document.querySelector('.mynotice')
if (mynoticeDom) { if (mynoticeDom) {
mynoticeDom.addEventListener('mouseover', () => { mynoticeDom.addEventListener('mouseover', () => {
mynoticeFlag.value = true mynoticeFlag.value = true
document.documentElement.style.overflowY = 'hidden'
}) })
mynoticeDom.addEventListener('mouseout', () => { mynoticeDom.addEventListener('mouseout', () => {
mynoticeFlag.value = false mynoticeFlag.value = false
document.documentElement.style.overflowY = 'scroll'
}) })
} }
if (mynotice) { if (mynotice) {
mynotice.addEventListener('mouseover', () => { mynotice.addEventListener('mouseover', () => {
mynoticeFlag.value = true mynoticeFlag.value = true
document.documentElement.style.overflowY = 'hidden'
}) })
mynotice.addEventListener('mouseout', () => { mynotice.addEventListener('mouseout', () => {
mynoticeFlag.value = false mynoticeFlag.value = false
document.documentElement.style.overflowY = 'scroll'
}) })
} }
mybus.on('getSgcNum', () => { mybus.on('getSgcNum', () => {
@ -327,6 +329,15 @@
font-size: 0.22rem; font-size: 0.22rem;
font-family: header-typeface; font-family: header-typeface;
margin-right: 0.2rem; margin-right: 0.2rem;
display: flex;
align-items: center;
.name-bg {
height: 0.6rem;
width: 0.6rem;
background: url('~@/assets/newHome/newHome-title-bg.png') no-repeat;
background-size: 100%;
margin-right: 0.15rem;
}
} }
.nav { .nav {
width: 1.2rem; width: 1.2rem;

1553
front/src/views/home/components/searchResultList.vue
View File

File diff suppressed because it is too large Load Diff

2
front/src/views/home/details.vue
View File

@ -91,7 +91,7 @@
const router = useRouter() const router = useRouter()
const id = router.currentRoute.value.query.id const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const obj = JSON.parse(window.sessionStorage.getItem('preview'))
let showView = ref('details-view') let showView = ref('')
const init = () => { const init = () => {
if (id) { if (id) {
selectOne(id).then((res) => { selectOne(id).then((res) => {

1
front/src/views/home/detailsPageconetentTree.vue
View File

@ -152,6 +152,7 @@
} }
switch (val.type) { switch (val.type) {
case '市级': case '市级':
case '企业':
case '其他': case '其他':
generateChildren(val, obj) generateChildren(val, obj)
break break

70
front/src/views/home/infrastructurePage.vue
View File

@ -9,7 +9,7 @@
<span <span
v-for="itemContent in item.content" v-for="itemContent in item.content"
:key="itemContent" :key="itemContent"
@click="tabClick(index, itemContent, itemContent)" @click="tabClick(index, itemContent)"
:class=" :class="
clickList[index].content.indexOf(itemContent.labelName) != -1 || clickList[index].content.indexOf(itemContent.labelName) != -1 ||
clickList[index].content.indexOf(itemContent) != -1 clickList[index].content.indexOf(itemContent) != -1
@ -61,9 +61,9 @@
</a-button> </a-button>
</div> </div>
<i class="boundary"></i> <i class="boundary"></i>
<!-- 添加至购物车 --> <!-- 添加至申购车 -->
<a-button type="primary" @click="addShoppingCart" class="buttonAdd"> <a-button type="primary" @click="addShoppingCart" class="buttonAdd">
添加至购物车 添加至申购车
</a-button> </a-button>
<!-- 一键申请 --> <!-- 一键申请 -->
<a-button type="primary" @click="apply" class="buttonAdd"> <a-button type="primary" @click="apply" class="buttonAdd">
@ -115,8 +115,8 @@
</template> </template>
<script setup> <script setup>
import VideoSurveillance from '@/views/home/videoSurveillance' import VideoSurveillance from '@/views/home/videoSurveillance'
import { getCategoryTreePage } from '@/api/personalCenter' // import { getCategoryTreePage } from '@/api/personalCenter'
import { dataType } from 'element-plus/es/components/table-v2/src/common' // import { dataType } from 'element-plus/es/components/table-v2/src/common'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { ref, reactive, onMounted } from 'vue' import { ref, reactive, onMounted } from 'vue'
@ -243,7 +243,7 @@
clickList.value.push(params) clickList.value.push(params)
}) })
mybus.off('tranferToList') mybus.off('tranferToList')
mybus.on('tranferToList', (data) => { mybus.on('tranferToList', () => {
console.log('获取到的列表数据') console.log('获取到的列表数据')
}) })
} }
@ -253,6 +253,14 @@
let tableHeight = ref('600') let tableHeight = ref('600')
//tab切换点击事件 //tab切换点击事件
const tabClick = (indexFather, name) => { const tabClick = (indexFather, name) => {
console.log(
'点击tab================>',
indexFather,
name,
clickList.value[indexFather]
)
selectedRowKeys.value = []
selectedList.value = []
if (clickList.value[indexFather].content.indexOf(name) != -1) { if (clickList.value[indexFather].content.indexOf(name) != -1) {
if (name == '视频资源') { if (name == '视频资源') {
tableHeight.value = 330 tableHeight.value = 330
@ -336,11 +344,21 @@
}) })
console.log('选中的标签code', mapSearchParam.value) console.log('选中的标签code', mapSearchParam.value)
mapSearchParam.value.labelCodes = mapSearchParam.value.labelCodes + '' mapSearchParam.value.labelCodes = mapSearchParam.value.labelCodes + ''
if (name == '视频资源') { // let fatherName = ref('视频资源')
getCamera() // if (name == '视频资源' || name == '云资源' || name == '感知资源') {
} else { // fatherName.value == name
// }
// if (fatherName.value == '视频资源') {
// getCamera()
// } else {
// dataSource.value = []
// pagination.value.total = 0
// }
if (name == '云资源' || name == '感知资源') {
dataSource.value = [] dataSource.value = []
pagination.value.total = 0 pagination.value.total = 0
} else {
getCamera()
} }
} }
// 清空 // 清空
@ -390,10 +408,10 @@
message.error('请选择需要申请的数据') message.error('请选择需要申请的数据')
} }
} }
// 添加至购物车 // // 添加至购物车
const addShopCar = () => { // const addShopCar = () => {
console.log('添加至购物车') // console.log('添加至购物车')
} // }
const getCamera = () => { const getCamera = () => {
console.log('初始化调用') console.log('初始化调用')
getCameraByParentId(mapSearchParam.value).then((res) => { getCameraByParentId(mapSearchParam.value).then((res) => {
@ -404,16 +422,20 @@
} }
//加入申购车 //加入申购车
const addShoppingCart = () => { const addShoppingCart = () => {
sgcInsert({ if (selectedList.value.length > 0) {
delFlag: '0', sgcInsert({
resourceId: '8888888880000000001', delFlag: '0',
note1: selectedList.value, resourceId: '8888888880000000001',
// userId: userId.value, note1: selectedList.value,
}).then((res) => { // userId: userId.value,
console.log(res) }).then((res) => {
message.success('添加申购车成功！') console.log(res)
mybus.emit('getSgcNum') message.success('添加申购车成功！')
}) mybus.emit('getSgcNum')
})
} else {
message.error('请选择需要添加申购车的数据')
}
} }
// 表格 // 表格
const dataSource = ref([]) const dataSource = ref([])
@ -436,7 +458,7 @@
key: 'channelId', key: 'channelId',
}, },
]) ])
const allClick = ref([]) // const allClick = ref([])
const onSelectChange = (record, selected, selectedRows, nativeEvent) => { const onSelectChange = (record, selected, selectedRows, nativeEvent) => {
console.log('hahhahah', record, selected, selectedRows, nativeEvent) console.log('hahhahah', record, selected, selectedRows, nativeEvent)
if (selected) { if (selected) {

4
front/src/views/home/integrationServices.vue
View File

@ -94,7 +94,9 @@ export default defineComponent({
paramsGetResources.pageSize = 5 paramsGetResources.pageSize = 5
paramsGetResources.orderField = 'create_date' paramsGetResources.orderField = 'create_date'
paramsGetResources.orderType = 'DESC' paramsGetResources.orderType = 'DESC'
mybus.emit('chongzhi') mybus.emit('chongzhi', {
type: '融合服务'
})
getAppResources() getAppResources()
} }

14
front/src/views/newHome/components/CapabilityConvergence.vue
View File

@ -52,7 +52,7 @@
v-for="(item, index) in sjList" v-for="(item, index) in sjList"
:key="item.id" :key="item.id"
:class="index == 4 ? 'name-last' : ''" :class="index == 4 ? 'name-last' : ''"
@click="selectOne(item.id)" @click="selectOne3(item.name)"
> >
{{ index + 1 }}-{{ item.name }} {{ index + 1 }}-{{ item.name }}
</div> </div>
@ -119,7 +119,7 @@
paramsGetResources.type = type paramsGetResources.type = type
if (type === '数据资源' && !whoShow1.value.itShowBaoTou) { if (type === '数据资源' && !whoShow1.value.itShowBaoTou) {
getDataResource({ getDataResource({
serviceName: paramsGetResources.name, //资源名称 serviceName: paramsGetResources.name || '', //资源名称
orderField: whoShow1.value.itShowQingDao ? 'fbrq' : 'createTime', //排序字段 orderField: whoShow1.value.itShowQingDao ? 'fbrq' : 'createTime', //排序字段
orderType: paramsGetResources.orderType.toLowerCase(), //排序方式：desc，asc orderType: paramsGetResources.orderType.toLowerCase(), //排序方式：desc，asc
pageNum: paramsGetResources.pageNum, //页码 pageNum: paramsGetResources.pageNum, //页码
@ -243,6 +243,16 @@
}, },
}) })
} }
const selectOne3 = (name) => {
console.log('点击===============》', name)
router.push({
path: '/DetailsPageconetent',
query: {
str: name,
select: '数据资源',
},
})
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.capability-convergence { .capability-convergence {

14
front/src/views/newHome/components/Header.vue
View File

@ -1,6 +1,9 @@
<template> <template>
<div class="home-header" :class="scrollTop > 500 ? 'white' : ''"> <div class="home-header" :class="scrollTop > 500 ? 'white' : ''">
<div class="name">城市云脑能力管理中心</div> <div class="name">
<div class="name-bg"></div>
城市云脑通用能力服务平台
</div>
<div <div
v-for="item in navList" v-for="item in navList"
:key="item.key" :key="item.key"
@ -133,6 +136,15 @@
font-size: 0.22rem; font-size: 0.22rem;
font-family: header-typeface; font-family: header-typeface;
margin-right: 0.2rem; margin-right: 0.2rem;
display: flex;
align-items: center;
.name-bg {
height: 0.6rem;
width: 0.6rem;
background: url('~@/assets/newHome/newHome-title-bg.png') no-repeat;
background-size: 100%;
margin-right: 0.15rem;
}
} }
.nav { .nav {
width: 1.44rem; width: 1.44rem;

32
front/src/views/newHome/components/Navigation.vue
View File

@ -75,31 +75,37 @@
</a-form-item> </a-form-item>
</div> </div>
<div class="qushi-class-father"> <div class="qushi-class-father">
<div class="qushi-class"> <!-- <div class="qushi-class">
<a-form-item label="发布部门" class="gaojisousuo"> <a-form-item label="发布部门" class="gaojisousuo">
<a-select <a-select
ref="select" ref="select"
style="width: 1.4rem; height: 0.4rem" style="width: 1.4rem; height: 0.4rem"
v-for="item in fabubumen"
:key="item"
v-model="item.value"
placeholder="请选择省份" placeholder="请选择省份"
@change="qushijiedao" @change="qushijiedao"
:key="fabubumen"
> >
<a-select-option :value="item.name"> <a-select-option
:value="item.name"
v-model="item.value"
v-for="item in fabubumen"
:key="item"
>
{{ item.name }} {{ item.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
<a-select <a-select
ref="select" ref="select"
style="width: 1.4rem; height: 0.4rem" style="width: 1.4rem; height: 0.4rem"
v-for="item in shi"
:key="item"
v-model:value="item.value"
@change="qushijiedao" @change="qushijiedao"
placeholder="请选择市" placeholder="请选择市"
:key="shi"
> >
<a-select-option :value="item.name"> <a-select-option
:value="item.name"
v-model:value="item.value"
v-for="item in shi"
:key="item"
>
{{ item.name }} {{ item.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -133,7 +139,7 @@
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</div> </div> -->
<div class="sousuo" @click="onSearch(mohuchaxun)">搜索</div> <div class="sousuo" @click="onSearch(mohuchaxun)">搜索</div>
<div @click="gaojisousuo" class="mohusousuo"> <div @click="gaojisousuo" class="mohusousuo">
<div class="mohusousuo-tupian"></div> <div class="mohusousuo-tupian"></div>
@ -167,9 +173,9 @@
id: '100001', id: '100001',
}, },
]) ])
let shi = ref(['请先选择省份']) let shi = ref([])
let qu = ref(['请先选择市']) let qu = ref([])
let jiedao = ref(['请先选择区']) let jiedao = ref([])
function qushijiedao(value) { function qushijiedao(value) {
let danwei = value.substr(-1) let danwei = value.substr(-1)
// name.substr(-1) // name.substr(-1)

2
front/src/views/newHome/components/Navigation2.vue
View File

@ -99,6 +99,8 @@
path: '/DetailsPageconetent', path: '/DetailsPageconetent',
query: { query: {
select: type, select: type,
tecHnosphere: '',
appLiCation: ''
}, },
}) })
} }

330
front/src/views/newHome/components/PopularAbility.vue
View File

@ -16,7 +16,7 @@
> >
<span <span
class="img" class="img"
:class="sel == '浏览量' ? 'fwl' : sel == '申购量' ? 'sgl' : 'scl'" :class="sel == '浏览量' ? 'fwl' : sel == '申请量' ? 'sgl' : 'scl'"
></span> ></span>
<span class="text">{{ sel }}</span> <span class="text">{{ sel }}</span>
</div> </div>
@ -35,7 +35,7 @@
<div class="fw" v-if="select == '浏览量'"> <div class="fw" v-if="select == '浏览量'">
{{ select }}:{{ item.visits }} {{ select }}:{{ item.visits }}
</div> </div>
<div class="fw" v-if="select == '申购量'"> <div class="fw" v-if="select == '申请量'">
{{ select }}:{{ item.applyCount }} {{ select }}:{{ item.applyCount }}
</div> </div>
<div class="fw" v-if="select == '收藏量'"> <div class="fw" v-if="select == '收藏量'">
@ -64,7 +64,7 @@
const store = useStore() const store = useStore()
const router = useRouter() const router = useRouter()
const select = ref('浏览量') const select = ref('浏览量')
const selList = ref(['浏览量', '申购量', '收藏量']) const selList = ref(['浏览量', '申请量', '收藏量'])
const list = ref([]) const list = ref([])
const paramsGetResources = { const paramsGetResources = {
@ -83,7 +83,7 @@
case '浏览量': case '浏览量':
paramsGetResources.orderField = 'visits' paramsGetResources.orderField = 'visits'
break break
case '申购量': case '申请量':
paramsGetResources.orderField = 'applyCount' paramsGetResources.orderField = 'applyCount'
break break
case '收藏量': case '收藏量':
@ -153,195 +153,195 @@
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.popular-ability { .popular-ability {
height: 6.8rem; height: 6.8rem;
background: url('~@/assets/newHome/popular-bg.png') no-repeat; background: url('~@/assets/newHome/popular-bg.png') no-repeat;
background-size: 100%; background-size: 100%;
display: flex;
justify-content: center;
.main {
width: 13rem;
margin-top: 0.78rem;
display: flex; display: flex;
justify-content: center; flex-direction: column;
.main { flex-wrap: wrap;
width: 13rem; .top {
margin-top: 0.78rem; font-size: 0.3rem;
color: #fff;
text-align: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
.top { justify-content: center;
font-size: 0.3rem; align-items: center;
color: #fff; .line {
text-align: center; width: 0.34rem;
height: 0.03rem;
background-color: #fff;
margin-top: 0.08rem;
}
}
.bottom {
display: flex;
justify-content: space-between;
margin-top: 0.52rem;
.left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; .select {
align-items: center; cursor: pointer;
.line {
width: 0.34rem;
height: 0.03rem;
background-color: #fff;
margin-top: 0.08rem;
}
}
.bottom {
display: flex;
justify-content: space-between;
margin-top: 0.52rem;
.left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
.select { align-items: center;
cursor: pointer; justify-content: center;
width: 1.05rem;
height: 1.39rem;
background: rgba(255, 255, 255, 0.08);
margin-bottom: 0.01rem;
border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
.img {
width: 0.36rem;
height: 0.36rem;
background-size: 100%;
}
.fwl {
background: url('~@/assets/newHome/fwl-no.png') no-repeat;
background-size: contain;
}
.sgl {
background: url('~@/assets/newHome/sgl-no.png') no-repeat;
background-size: contain;
}
.scl {
background: url('~@/assets/newHome/scl-no.png') no-repeat;
background-size: contain;
}
.text {
color: rgba(255, 255, 255, 0.6);
font-size: 0.14rem;
margin-top: 0.08rem;
}
}
.select:hover {
background: rgba(255, 255, 255, 0.12);
}
.checked {
background: rgba(255, 255, 255, 0.18) !important;
border-right: 0.02rem solid #fff;
}
}
.right {
cursor: pointer;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-left: 0.2rem;
.item {
width: 3.78rem;
height: 2rem;
display: flex;
.item-left {
width: 0.83rem;
height: 100%;
display: flex; display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: center; justify-content: center;
width: 1.05rem; align-items: center;
height: 1.39rem; background: #eef1f8;
background: rgba(255, 255, 255, 0.08);
margin-bottom: 0.01rem;
border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
.img { .img {
width: 0.36rem; width: 0.56rem;
height: 0.36rem; height: 0.56rem;
background-size: 100%; background-size: 100%;
} }
.fwl { .zj {
background: url('~@/assets/newHome/fwl-no.png') no-repeat; background: url('~@/assets/newHome/popular-zj.png') no-repeat;
background-size: contain; background-size: contain;
} }
.sgl { .yy {
background: url('~@/assets/newHome/sgl-no.png') no-repeat; background: url('~@/assets/newHome/popular-yy.png') no-repeat;
background-size: contain; background-size: contain;
} }
.scl { .jc {
background: url('~@/assets/newHome/scl-no.png') no-repeat; background: url('~@/assets/newHome/popular-jc.png') no-repeat;
background-size: contain; background-size: contain;
} }
.sj {
background: url('~@/assets/newHome/popular-sj.png') no-repeat;
background-size: contain;
}
.zs {
background: url('~@/assets/newHome/popular-zs.png') no-repeat;
background-size: contain;
}
}
.item-right {
width: 100%;
height: 100%;
background: #fff;
.fw {
width: 100%;
padding-right: 0.1rem;
padding-top: 0.03rem;
text-align: right;
color: 666;
font-size: 0.14rem;
color: #666;
}
.name {
font-size: 0.18rem;
color: #212121;
text-align: center;
margin-top: 0.05rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.text { .text {
color: rgba(255, 255, 255, 0.6);
font-size: 0.14rem;
margin-top: 0.08rem;
}
}
.select:hover {
background: rgba(255, 255, 255, 0.12);
}
.checked {
background: rgba(255, 255, 255, 0.18) !important;
border-right: 0.02rem solid #fff;
}
}
.right {
cursor: pointer;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-left: 0.2rem;
.item {
width: 3.78rem;
height: 2rem;
display: flex;
.item-left {
width: 0.83rem;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #eef1f8;
.img {
width: 0.56rem;
height: 0.56rem;
background-size: 100%;
}
.zj {
background: url('~@/assets/newHome/popular-zj.png') no-repeat;
background-size: contain;
}
.yy {
background: url('~@/assets/newHome/popular-yy.png') no-repeat;
background-size: contain;
}
.jc {
background: url('~@/assets/newHome/popular-jc.png') no-repeat;
background-size: contain;
}
.sj {
background: url('~@/assets/newHome/popular-sj.png') no-repeat;
background-size: contain;
}
.zs {
background: url('~@/assets/newHome/popular-zs.png') no-repeat;
background-size: contain;
}
}
.item-right {
width: 100%; width: 100%;
height: 100%; padding: 0.24rem 0.3rem;
background: #fff; font-size: 0.14rem;
.fw { color: #212121;
width: 100%; line-height: 0.24rem;
padding-right: 0.1rem; height: 1rem;
padding-top: 0.03rem; overflow: hidden;
text-align: right;
color: 666;
font-size: 0.14rem;
color: #666;
}
.name {
font-size: 0.18rem;
color: #212121;
text-align: center;
margin-top: 0.05rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.text {
width: 100%;
padding: 0.24rem 0.3rem;
font-size: 0.14rem;
color: #212121;
line-height: 0.24rem;
height: 1rem;
overflow: hidden;
}
} }
} }
.item:nth-of-type(4),
.item:nth-of-type(5),
.item:nth-of-type(6) {
margin-top: 0.2rem;
}
.item:hover {
border-radius: 0.02rem;
border: 0.01rem solid #0058e1;
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
}
} }
} .item:nth-of-type(4),
.bottom-btn { .item:nth-of-type(5),
cursor: pointer; .item:nth-of-type(6) {
text-align: center; margin-top: 0.2rem;
margin-top: 0.24rem; }
color: #fff; .item:hover {
width: 1rem; border-radius: 0.02rem;
height: 0.24rem; border: 0.01rem solid #0058e1;
line-height: 0.24rem; box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
margin-left: 6rem;
span {
display: inline-block;
width: 0.1rem;
height: 0.1rem;
background: url('~@/assets/newHome/gd.png') no-repeat;
background-size: contain;
} }
}
.bottom-btn:hover {
background: rgba(0, 88, 225, 0.1);
} }
} }
.bottom-btn {
cursor: pointer;
text-align: center;
margin-top: 0.24rem;
color: #fff;
width: 1rem;
height: 0.24rem;
line-height: 0.24rem;
margin-left: 6rem;
span {
display: inline-block;
width: 0.1rem;
height: 0.1rem;
background: url('~@/assets/newHome/gd.png') no-repeat;
background-size: contain;
}
}
.bottom-btn:hover {
background: rgba(0, 88, 225, 0.1);
}
} }
}
</style> </style>

12
front/src/views/newHome/index.vue
View File

@ -1,3 +1,10 @@
<!--
* @Author: hisense.liangjunhua
* @Date: 2022-06-23 16:41:49
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-04 17:53:27
* @Description: 告诉大家这是什么
-->
<template> <template>
<div class="newHome"> <div class="newHome">
<new-home-header></new-home-header> <new-home-header></new-home-header>
@ -6,6 +13,7 @@
<capability-convergence></capability-convergence> <capability-convergence></capability-convergence>
<popular-ability></popular-ability> <popular-ability></popular-ability>
<latest-capabilities></latest-capabilities> <latest-capabilities></latest-capabilities>
<resource-aggregation></resource-aggregation>
<recommendation-ability></recommendation-ability> <recommendation-ability></recommendation-ability>
<work-dynamics></work-dynamics> <work-dynamics></work-dynamics>
<home-footer></home-footer> <home-footer></home-footer>
@ -18,6 +26,7 @@
import CapabilityConvergence from '@/views/newHome/components/CapabilityConvergence' import CapabilityConvergence from '@/views/newHome/components/CapabilityConvergence'
import PopularAbility from '@/views/newHome/components/PopularAbility' import PopularAbility from '@/views/newHome/components/PopularAbility'
import LatestCapabilities from '@/views/newHome/components/LatestCapabilities' import LatestCapabilities from '@/views/newHome/components/LatestCapabilities'
import ResourceAggregation from '@/views/abilityStatistics/components/ResourceAggregation.vue'
import RecommendationAbility from '@/views/newHome/components/RecommendationAbility' import RecommendationAbility from '@/views/newHome/components/RecommendationAbility'
import WorkDynamics from '@/views/newHome/components/WorkDynamics' import WorkDynamics from '@/views/newHome/components/WorkDynamics'
import HomeFooter from '@/views/newHome/components/Footer' import HomeFooter from '@/views/newHome/components/Footer'
@ -37,4 +46,7 @@
font-family: num-typeface; font-family: num-typeface;
} }
} }
.resource-aggregation {
background: #fff;
}
</style> </style>

Some files were not shown because too many files have changed in this diff Show More