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

Merge branch 'hi-ucs-dev' into release

This commit is contained in:
wuhongjian 2022-07-06 18:45:20 +08:00
parent f8588795c4 9cc8accbde
commit 695aa6867d
75 changed files with 4999 additions and 4195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,12 +55,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"
@ -126,32 +130,32 @@
</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'
export default { export default {
mixins: [mixinViewModule], mixins: [mixinViewModule],
data() { data () {
return { return {
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 +165,193 @@ export default {
responseData: {}, responseData: {},
linkType: '' linkType: ''
} }
}; }
}, },
watch: {}, watch: {},
components: { components: {
AddOrUpdate, AddOrUpdate,
RelateApplication RelateApplication
}, },
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
} }
}, }
}; }
</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分这一列的样式

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

@ -17,7 +17,7 @@
</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'>
@ -36,7 +36,7 @@
</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;'>使用组件评分Top5</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' >
@ -174,9 +174,7 @@ 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()
}) })
}) })
@ -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;

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

@ -96,7 +96,7 @@
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column v-if="this.departmentId===2" <el-table-column v-if="this.departmentId===2"
prop="resourceCarNum" prop="resourceCallNum"
label="申请总数" label="申请总数"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
@ -121,7 +121,7 @@
</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>
@ -362,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)
} }
}, },

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=' +

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"
}, },

21
front/public/index.html
View File

@ -2,7 +2,7 @@
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2022-03-29 16:45:25 * @Date: 2022-03-29 16:45:25
* @LastEditors: hisense.wuhongjian * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-07-04 11:57:44 * @LastEditTime: 2022-07-06 18:44:35
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
--> -->
<!DOCTYPE html> <!DOCTYPE html>
@ -28,10 +28,11 @@
<!-- 站点配置 --> <!-- 站点配置 -->
<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/';
@ -44,11 +45,11 @@
// 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';
// 开发 // 开发
// window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797'; window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
// window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796/'; window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796/';
// window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/'; window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
// window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin'; window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
window.SITE_CONFIG['POI_URL'] = 'http://15.72.178.129:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address'; // window.SITE_CONFIG['POI_URL'] = 'http://15.72.178.129:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
// 穿透版本 // 穿透版本
// window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797'; // window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797';
// window.SITE_CONFIG['previewUrl'] = 'http://124.222.94.39:9796/'; // window.SITE_CONFIG['previewUrl'] = 'http://124.222.94.39:9796/';

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

File diff suppressed because one or more lines are too long

16
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.wuhongjian * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-07-04 11:56:58 * @LastEditTime: 2022-07-06 18:44:54
* @Description: 数据资源参数配置 * @Description: 数据资源参数配置
*/ */
const newLocation = 'qingdao' //const newLocation = 'qingdao'
// const newLocation = 'baotou' // const newLocation = 'baotou'
// const newLocation = 'xihaian' const newLocation = 'xihaian'
// 数据资源数据 // 数据资源数据
const whoShow = {} const whoShow = {}
@ -61,12 +61,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: '应用资源',
@ -78,12 +78,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: '应用资源',
@ -162,7 +162,7 @@ else if (newLocation === 'xihaian') {
footerDataList.footerList = { footerDataList.footerList = {
company: { company: {
left: '青岛西海岸新区大数据发展促进局建设', left: '青岛西海岸新区大数据发展促进局建设',
right: 'v0.81', right: 'v0.8.1.5',
}, },
address: [ address: [
{ {

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-05 15:04:47
* @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()
})

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;

35
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 {
@ -202,6 +203,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)
} }
} }
@ -253,6 +287,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;
} }

1081
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>

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

@ -8,192 +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>
:associatedComponents="associatedComponents"
: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"
v-if="false"
></application-associated-components>
<!-- 关联能力 --> <!-- 关联能力 -->
<application-associated-ability <application-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
:associatedComponents="associatedComponentsFunction()" 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) => { const init = (id) => {
if (id) { if (id) {
selectOne(id).then((res) => { selectOne(id).then((res) => {
// console.clear() // console.clear()
dataList.data = res.data.data dataList.data = res.data.data
const arrList = ref([]) const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits')) arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
console.log( console.log(
'初始化详情页=========================>', '初始化详情页=========================>',
dataList.data, dataList.data,
arrList.value arrList.value
) )
if (arrList.value && arrList.value.indexOf(id) === -1) { if (arrList.value && arrList.value.indexOf(id) === -1) {
arrList.value.push(id) arrList.value.push(id)
updateVisits({ updateVisits({
id: res.data.data.id, id: res.data.data.id,
visits: res.data.data.visits || '0', visits: res.data.data.visits || '0',
}).then(() => { }).then(() => {
window.sessionStorage.setItem( window.sessionStorage.setItem(
'visits', 'visits',
JSON.stringify(arrList.value) 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
}) })
}
// 浏览记录
browsingInsert({
resourceId: res.data.data.id,
}).then(() => {
console.log('浏览记录+1')
}) })
} else if (obj) { })
dataList.data = obj associatedComponents.value.map((item, index) => {
console.log('预览==============', obj) 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 ( const associatedComponentsFunction = () => {
associatedComponents.value[0].dataList.length > 0 || if (
associatedComponents.value[1].dataList.length > 0 || associatedComponents.value[0].dataList.length > 0 ||
associatedComponents.value[2].dataList.length > 0 associatedComponents.value[1].dataList.length > 0 ||
) { associatedComponents.value[2].dataList.length > 0
return associatedComponents.value ) {
} return associatedComponents.value
} }
init(id) }
onBeforeUnmount(() => { init(id)
mybus.off('flyToView') 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;
} }
} }
} }

40
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('计费标准')
@ -126,7 +128,7 @@
) )
if (navList.value.filter((item) => item.name === list.value[0])[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) console.log('11111111111111111111111111', list.value, navList.value)
@ -152,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('计费标准')
@ -165,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 {

3
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>
@ -96,6 +96,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,

23
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>
@ -72,7 +75,7 @@
title: '技术对接', title: '技术对接',
titleSon: '调用接口', titleSon: '调用接口',
link: { link: {
name: '接口地址：', name: '服务接口：',
value: '', value: '',
}, },
postMethod: { postMethod: {
@ -225,10 +228,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 +285,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)

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

@ -1,82 +1,121 @@
<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) {
if ( console.log('这个是空值', props.associatedComponents)
props.associatedComponents[0].dataList.length > 0 || flag.value = true
props.associatedComponents[1].dataList.length > 0 || dataFrom.value = props.associatedComponents
props.associatedComponents[2].dataList.length > 0 console.log('dataFrom.value', dataFrom.value)
) {
flag.value = true
dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value)
} else {
flag.value = false
}
} 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 (props.associatedComponents) { if (val[0].length != 0) {
if ( flag.value = true
val[0].dataList.length > 0 || dataFrom.value = props.associatedComponents
val[1].dataList.length > 0 || console.log('dataFrom.value', dataFrom.value)
val[2].dataList.length > 0
) {
flag.value = true
dataFrom.value = props.associatedComponents
// console.log('dataFrom.value', dataFrom.value)
} else {
flag.value = false
}
} else { } else {
flag.value = false flag.value = false
} }
@ -96,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%;
@ -128,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

@ -20,104 +20,112 @@
</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;
}
} }
}
</style> </style>

301
front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.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">
@ -29,162 +22,176 @@
</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: 'DEPLOY&SAFE', englishTitle: 'DEPLOY&SAFE',
content: [ content: [
{ {
childrenTitle: '部署', childrenTitle: '部署',
childrenContent: [], childrenContent: [],
}, },
{ {
childrenTitle: '安全', childrenTitle: '安全',
childrenContent: [], childrenContent: [],
}, },
], ],
}) })
//数据初始化 //数据初始化
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
if (props.dataList.infoList) { if (props.dataList.infoList) {
props.dataList.infoList.map((item) => { props.dataList.infoList.map((item) => {
if ( if (
item.attrType === '部署区域' || item.attrType === '部署区域' ||
item.attrType === '是否统一登录' || item.attrType === '是否统一登录' ||
item.attrType === '部署位置' item.attrType === '部署位置'
) { ) {
dataFrom.value.content[0].childrenContent.push(item) dataFrom.value.content[0].childrenContent.push(item)
} else if ( } else if (
item.attrType === '是否等保备案' || item.attrType === '是否等保备案' ||
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) {
let data = [
{
attrType: '是否等保备案',
attrValue: '------',
},
{
attrType: '等保定级',
attrValue: '------',
},
]
data.map((itemContent) => {
dataFrom.value.content[1].childrenContent.push(itemContent)
}) })
if (dataFrom.value.content[1].childrenContent.length <= 0) {
let data = [
{
attrType: '是否等保备案',
attrValue: '------',
},
{
attrType: '等保定级',
attrValue: '------',
},
]
data.map((itemContent) => {
dataFrom.value.content[1].childrenContent.push(itemContent)
})
}
let obj = {
attrType: '访问地址',
attrValue: props.dataList.link || '------',
}
dataFrom.value.content[0].childrenContent.push(obj)
} }
watch( }
() => props.dataList, watch(
(val) => { () => props.dataList,
if (val) { (val) => {
dataFrom.value.content[0].childrenContent = [] if (val) {
dataFrom.value.content[1].childrenContent = [] dataFrom.value.content[0].childrenContent = []
props.dataList.infoList.map((item) => { dataFrom.value.content[1].childrenContent = []
if ( props.dataList.infoList.map((item) => {
item.attrType === '部署区域' || if (
item.attrType === '是否统一登录' || item.attrType === '部署区域' ||
item.attrType === '部署位置' item.attrType === '是否统一登录' ||
) { item.attrType === '部署位置'
dataFrom.value.content[0].childrenContent.push(item) ) {
} else if ( dataFrom.value.content[0].childrenContent.push(item)
item.attrType === '是否等保备案' || } else if (
item.attrType === '等保定级' 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) {
let data = [
{
attrType: '是否等保备案',
attrValue: '------',
},
{
attrType: '等保定级',
attrValue: '------',
},
]
data.map((itemContent) => {
dataFrom.value.content[1].childrenContent.push(itemContent)
}) })
if (dataFrom.value.content[1].childrenContent.length <= 0) {
let data = [
{
attrType: '是否等保备案',
attrValue: '------',
},
{
attrType: '等保定级',
attrValue: '------',
},
]
data.map((itemContent) => {
dataFrom.value.content[1].childrenContent.push(itemContent)
})
}
let obj = {
attrType: '访问地址',
attrValue: props.dataList.link || '------',
}
dataFrom.value.content[0].childrenContent.push(obj)
} }
// let obj = {
// attrType: '访问地址',
// attrValue: props.dataList.link || '------',
// }
// dataFrom.value.content[0].childrenContent.push(obj)
} }
) }
)
</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;
line-height: 0.26rem; line-height: 0.26rem;
color: #212956; color: #212956;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
.card-content {
div { .card-content {
div {
display: inline-block;
margin-right: 0.7rem;
color: rgba(33, 41, 86, 0.8);
font-size: 0.2rem;
line-height: 0.2rem;
max-width: 5.84rem;
overflow: hidden;
/*超出的隐藏*/
white-space: nowrap;
text-overflow: ellipsis;
/*超出的设置为省略号*/
span {
display: inline-block; display: inline-block;
margin-right: 0.7rem; max-width: 4rem;
color: rgba(33, 41, 86, 0.8); overflow: hidden;
font-size: 0.2rem; /*超出的隐藏*/
line-height: 0.2rem;
max-width: 5.84rem;
overflow: hidden; /*超出的隐藏*/
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; /*超出的设置为省略号*/ text-overflow: ellipsis;
span { /*超出的设置为省略号*/
display: inline-block;
max-width: 4rem;
overflow: hidden; /*超出的隐藏*/
white-space: nowrap;
text-overflow: ellipsis; /*超出的设置为省略号*/
}
} }
} }
} }
} }
} }
}
</style> </style>

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>

330
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,170 +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')
associatedComponents: { type: Array, default: null }, const list = ref([])
}) // 根据能力id查询是否存在关联应用
const select = ref('algorithm-display') if (keyId) {
const list = ref([]) let params = {
const selectNav = (key) => { keyId: keyId,
select.value = key type: '组件服务',
mybus.emit('flyToView', select.value)
} }
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('应用展示') })
} }
}) const selectNav = (key) => {
list.value.push('关联组件') select.value = key
navList.value.forEach((item) => { mybus.emit('flyToView', select.value)
console.log(item) }
if (list.value.indexOf(item.name) > -1) { if (props.dataList.infoList) {
if (item.name == '关联组件') { list.value = []
if ( props.dataList.infoList.map((item) => {
props.associatedComponents[0].dataList.length != 0 || if (
props.associatedComponents[1].dataList.length != 0 || item.attrType === '功能介绍' ||
props.associatedComponents[2].dataList.length != 0 item.attrType === '常见问题' ||
) { item.attrType === '使用能力' ||
item.show = true item.attrType === '关联组件'
} ) {
} else { 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(
(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 item.show = true
} }
} })
}) 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]
)[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.push('关联组件')
list.value.push('部署与安全')
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 ||
props.associatedComponents[1].dataList.length != 0 ||
props.associatedComponents[2].dataList.length != 0
) {
item.show = true
}
} else {
item.show = true
}
}
})
if (list.value.length > 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>

342
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,191 +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 === '服务商联系电话' ||
item.attrType.indexOf('服务商名') != -1 item.attrType.indexOf('服务商名') != -1
) { ) {
dataFrom.value.content[1].childrenContent[0] = item
if (dataFrom.value.content[1].childrenContent[0].attrValue == '') {
dataFrom.value.content[1].childrenContent[0].attrValue = '------'
}
} else if (item.attrType === '服务商联系人') {
dataFrom.value.content[1].childrenContent[1] = item
if (dataFrom.value.content[1].childrenContent[1].attrValue == '') {
dataFrom.value.content[1].childrenContent[1].attrValue = '------'
}
} else if (item.attrType === '服务商联系电话') {
dataFrom.value.content[1].childrenContent[2] = item
if (dataFrom.value.content[1].childrenContent[2].attrValue == '') {
dataFrom.value.content[1].childrenContent[2].attrValue = '------'
}
}
} else if (item.attrType === '部门联系人') {
deptContacts.attrValue = item.attrValue || '------'
} else if (item.attrType === '部门联系人电话') {
deptPhone.attrValue = item.attrValue || '------'
}
})
console.log('obj', dataFrom.value)
}
watch(
() => props.dataList,
(val) => {
if (val) {
// dataFrom.value.content[0].childrenContent = []
// dataFrom.value.content[1].childrenContent = []
let obj = {
attrType: '部门名称',
attrValue: props.dataList.deptName || '------',
}
dataFrom.value.content[0].childrenContent[0] = obj
let deptContacts = {
attrType: '部门联系人',
attrValue: props.dataList.deptContacts || '------',
}
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 ( if (
item.attrType === '服务商' || item.attrType === '服务商' ||
item.attrType === '服务商联系人' ||
item.attrType === '服务商联系电话' ||
item.attrType.indexOf('服务商名') != -1 item.attrType.indexOf('服务商名') != -1
) { ) {
dataFrom.value.content[1].childrenContent[0] = item
if (dataFrom.value.content[1].childrenContent[0].attrValue == '') {
dataFrom.value.content[1].childrenContent[0].attrValue = '------'
}
} else if (item.attrType === '服务商联系人') {
dataFrom.value.content[1].childrenContent[1] = item
if (dataFrom.value.content[1].childrenContent[1].attrValue == '') {
dataFrom.value.content[1].childrenContent[1].attrValue = '------'
}
} else if (item.attrType === '服务商联系电话') {
dataFrom.value.content[1].childrenContent[2] = item
if (dataFrom.value.content[1].childrenContent[2].attrValue == '') {
dataFrom.value.content[1].childrenContent[2].attrValue = '------'
}
}
}
})
console.log('obj', dataFrom.value)
}
watch(
() => props.dataList,
(val) => {
if (val) {
// dataFrom.value.content[0].childrenContent = []
// dataFrom.value.content[1].childrenContent = []
let obj = {
attrType: '部门名称',
attrValue: props.dataList.deptName || '------',
}
dataFrom.value.content[0].childrenContent[0] = obj
let deptContacts = {
attrType: '部门联系人',
attrValue: props.dataList.deptContacts || '------',
}
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 ( if (
item.attrType === '服务商' || item.attrType === '服务商' ||
item.attrType === '服务商联系人' ||
item.attrType === '服务商联系电话' ||
item.attrType.indexOf('服务商名') != -1 item.attrType.indexOf('服务商名') != -1
) { ) {
dataFrom.value.content[1].childrenContent.push(item)
if ( if (
item.attrType === '服务商' || dataFrom.value.content[1].childrenContent[0].attrValue == ''
item.attrType.indexOf('服务商名') != -1
) { ) {
dataFrom.value.content[1].childrenContent.push(item) dataFrom.value.content[1].childrenContent[0].attrValue =
if ( '------'
dataFrom.value.content[1].childrenContent[0].attrValue == '' }
) { } else if (item.attrType === '服务商联系人') {
dataFrom.value.content[1].childrenContent[0].attrValue = dataFrom.value.content[1].childrenContent[1] = item
'------' if (
} dataFrom.value.content[1].childrenContent[1].attrValue == ''
} else if (item.attrType === '服务商联系人') { ) {
dataFrom.value.content[1].childrenContent[1] = item dataFrom.value.content[1].childrenContent[1].attrValue =
if ( '------'
dataFrom.value.content[1].childrenContent[1].attrValue == '' }
) { } else if (item.attrType === '服务商联系电话') {
dataFrom.value.content[1].childrenContent[1].attrValue = dataFrom.value.content[1].childrenContent[2] = item
'------' if (
} dataFrom.value.content[1].childrenContent[2].attrValue == ''
} else if (item.attrType === '服务商联系电话') { ) {
dataFrom.value.content[1].childrenContent[2] = item dataFrom.value.content[1].childrenContent[2].attrValue =
if ( '------'
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>

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>

394
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>
@ -29,8 +29,8 @@
</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 +41,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>
@ -55,199 +59,215 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ShoppingCartOutlined } from '@ant-design/icons-vue' import { ShoppingCartOutlined } from '@ant-design/icons-vue'
import { defineProps, ref, watch } from 'vue' import { defineProps, ref, watch } from 'vue'
import { scInsert } from '@/api/personalCenter' import { scInsert } from '@/api/personalCenter'
import { sgcInsert } from '@/api/home' import { sgcInsert } from '@/api/home'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
})
const router = useRouter()
const businessArea = ref('')
// // 加入申购车
const addShoppingCart = () => {
console.log('加入申购车==================>', props.dataList)
sgcInsert({
delFlag: '0',
resourceId: props.dataList.id,
// userId: userId.value,
}).then((res) => {
console.log(res)
message.success('添加申购车成功！')
mybus.emit('getSgcNum')
}) })
const router = useRouter() }
const businessArea = ref('') // // 立即申请
// // 加入申购车 function toView() {
const addShoppingCart = () => { // window.open(newpage.href, '_blank')
console.log('加入申购车==================>', props.dataList) console.log('一键申请===================>', props.dataList)
sgcInsert({ localStorage.setItem(
delFlag: '0', 'applyList',
resourceId: props.dataList.id, JSON.stringify([
// userId: userId.value, {
}).then((res) => { arr: [
console.log(res) {
message.success('添加申购车成功！') delFlag: props.dataList.delFlag,
mybus.emit('getSgcNum') description: props.dataList.description,
}) resourceId: props.dataList.id,
resourceName: props.dataList.name,
time: props.dataList.createDate,
type: props.dataList.type,
componentType: '业务组件',
},
],
deptId: props.dataList.deptId,
deptName: props.dataList.deptName,
},
])
)
router.push({
path: '/apply',
})
}
// 收藏
const goTOCollection = () => {
console.log('收藏===================》', props.dataList)
scInsert([{ resourceId: props.dataList.id }]).then((res) => {
console.log(res)
message.success('收藏成功')
})
}
const componentType = ref('')
if (props.dataList.infoList) {
businessArea.value = props.dataList.infoList.filter(
(val) => val.attrType === '应用领域'
)[0].attrValue
let obj = props.dataList.infoList.filter(
(val) => val.attrType === '组件类型'
)[0]
if (obj) {
componentType.value = obj.attrValue
} }
// // 立即申请 }
function toView() { watch(
// window.open(newpage.href, '_blank') () => props.dataList,
console.log('一键申请===================>', props.dataList) (val) => {
localStorage.setItem( if (val) {
'applyList', businessArea.value = props.dataList.infoList.filter(
JSON.stringify([ (val) => val.attrType === '应用领域'
{ )[0].attrValue
arr: [ let obj = props.dataList.infoList.filter(
{ (val) => val.attrType === '组件类型'
delFlag: props.dataList.delFlag, )[0]
description: props.dataList.description, if (obj) {
resourceId: props.dataList.id, componentType.value = obj.attrValue
resourceName: props.dataList.name,
time: props.dataList.createDate,
type: props.dataList.type,
},
],
deptId: props.dataList.deptId,
deptName: props.dataList.deptName,
},
])
)
router.push({
path: '/apply',
})
}
// 收藏
const goTOCollection = () => {
console.log('收藏===================》', props.dataList)
scInsert([{ resourceId: props.dataList.id }]).then((res) => {
console.log(res)
message.success('收藏成功')
})
}
const componentType = ref('')
if (props.dataList.infoList) {
businessArea.value = props.dataList.infoList.filter(
(val) => val.attrType === '应用领域'
)[0].attrValue
let obj = props.dataList.infoList.filter(
(val) => val.attrType === '组件类型'
)[0]
if (obj) {
componentType.value = obj.attrValue
}
}
watch(
() => props.dataList,
(val) => {
if (val) {
businessArea.value = props.dataList.infoList.filter(
(val) => val.attrType === '应用领域'
)[0].attrValue
let obj = props.dataList.infoList.filter(
(val) => val.attrType === '组件类型'
)[0]
if (obj) {
componentType.value = obj.attrValue
}
} }
} }
) }
)
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.algorithm-top-details { .algorithm-top-details {
height: 6rem; height: 6rem;
padding: 1.8rem 0 0; padding: 1.8rem 0 0;
background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat; background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
background-size: 100%; background-size: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
.left {
max-width: 7.2rem;
color: #fff;
margin-right: 0.8rem;
.top { .left {
display: flex; max-width: 7.2rem;
align-items: center; color: #fff;
span { margin-right: 0.8rem;
font-size: 0.14rem;
} .top {
.name { display: flex;
// max-width: 3.3rem; align-items: center;
// overflow: hidden;
// text-overflow: ellipsis; span {
// white-space: nowrap; font-size: 0.14rem;
font-size: 0.4rem;
margin-right: 0.2rem;
max-width: 7rem;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.label-content {
position: relative;
}
.lable-father {
position: absolute;
min-width: 3.5rem;
right: -3.5rem;
top: 0;
}
.label {
padding: 0.01rem 0.1rem;
margin-right: 0.1rem;
border-radius: 0.13rem;
background: rgba(255, 255, 255, 0.4);
}
} }
.main {
margin-top: 0.2rem; .name {
font-size: 0.18rem; // max-width: 3.3rem;
line-height: 0.34rem; // overflow: hidden;
& > div:nth-of-type(1) { // text-overflow: ellipsis;
overflow: hidden; // white-space: nowrap;
text-overflow: ellipsis; font-size: 0.4rem;
white-space: nowrap; margin-right: 0.2rem;
} max-width: 7rem;
& > div:nth-of-type(2) { text-overflow: -o-ellipsis-lastline;
max-height: 1rem; overflow: hidden;
overflow: hidden; text-overflow: ellipsis;
text-overflow: ellipsis; display: -webkit-box;
display: -webkit-box; -webkit-line-clamp: 1;
-webkit-line-clamp: 3; -webkit-box-orient: vertical;
-webkit-box-orient: vertical;
}
} }
.bottom {
margin-top: 0.4rem; .label-content {
display: flex; position: relative;
.ant-btn { }
height: 0.5rem;
margin-right: 0.2rem; .lable-father {
background: #ffffff; position: absolute;
border-radius: 0.06rem; min-width: 3.5rem;
font-size: 0.2rem; right: -3.5rem;
display: flex; top: 0;
justify-content: center; }
align-items: center;
} .label {
.ant-btn-primary { padding: 0.01rem 0.1rem;
color: #1890ff; margin-right: 0.1rem;
} border-radius: 0.13rem;
.ant-btn:nth-of-type(1) { background: rgba(255, 255, 255, 0.4);
width: 1.8rem;
}
.ant-btn:nth-of-type(2) {
width: 2.2rem;
}
.ant-btn:nth-of-type(3) {
width: 1.45rem;
background: #fff;
color: #526aff;
}
} }
} }
.right {
width: 5.8rem; .main {
height: 4rem; margin-top: 0.2rem;
background: url('~@/assets/detailsAll/business/business_right_bg.png') font-size: 0.18rem;
no-repeat; line-height: 0.34rem;
background-size: 100%;
margin-top: -0.4rem; &>div:nth-of-type(1) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&>div:nth-of-type(2) {
max-height: 1rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}
.bottom {
margin-top: 0.4rem;
display: flex;
.ant-btn {
height: 0.5rem;
margin-right: 0.2rem;
background: #ffffff;
border-radius: 0.06rem;
font-size: 0.2rem;
display: flex;
justify-content: center;
align-items: center;
}
.ant-btn-primary {
color: #1890ff;
}
.ant-btn:nth-of-type(1) {
width: 1.8rem;
}
.ant-btn:nth-of-type(2) {
width: 2.2rem;
}
.ant-btn:nth-of-type(3) {
width: 1.45rem;
background: #fff;
color: #526aff;
}
} }
} }
.right {
width: 5.8rem;
height: 4rem;
background: url('~@/assets/detailsAll/business/business_right_bg.png') no-repeat;
background-size: 100%;
margin-top: -0.4rem;
}
}
</style> </style>

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

@ -2,10 +2,7 @@
<!-- 使用方式 --> <!-- 使用方式 -->
<div class="usage-mode" v-if="flag"> <div class="usage-mode" v-if="flag">
<div class="tltle"> <div class="tltle">
<DetalsTitle <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
:title="dataFrom.title"
:type="dataFrom.englishTitle"
></DetalsTitle>
</div> </div>
<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">
@ -16,7 +13,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 +30,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 +56,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>
@ -84,264 +84,281 @@
</template> </template>
<script setup> <script setup>
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'
let dataFrom = ref({ let dataFrom = ref({
title: '使用方式', title: '使用方式',
englishTitle: 'USAGE', englishTitle: 'USAGE',
content: [ content: [
{ {
title: '组件地址', title: '组件地址',
link: { link: {
name: '接口地址：', name: '接口地址：',
},
linkValue: '',
contact: '归属部门',
facilitator: { name: '归属部门：', value: '' },
people: { name: '部门联系人：', value: '' },
phone: {
name: '联系人电话：',
value: '',
},
contact2: '服务商',
facilitator2: { name: '服务商：', value: '' },
people2: { name: '服务商联系人：', value: '' },
phone2: {
name: '联系人电话：',
value: '',
},
}, },
], linkValue: '',
}) contact: '归属部门',
//数据初始化 facilitator: { name: '归属部门：', value: '' },
const props = defineProps({ people: { name: '部门联系人：', value: '' },
dataList: { type: Object, default: null }, phone: {
}) name: '联系人电话：',
const flag = ref(true) value: '',
if (props.dataList.infoList) { },
let obj = props.dataList.infoList.filter( contact2: '服务商',
(item) => facilitator2: { name: '服务商：', value: '' },
item.attrType === '技术文档' || people2: { name: '服务商联系人：', value: '' },
item.attrType === '服务商' || phone2: {
item.attrType === '服务商联系人' || name: '联系人电话：',
item.attrType === '使用手册' || value: '',
item.attrType === '服务地址' || },
item.attrType === '样式服务地址' || },
item.attrType === '服务商联系电话' ],
)[0] })
if (!obj) { //数据初始化
flag.value = false const props = defineProps({
} else { dataList: { type: Object, default: null },
// eslint-disable-next-line vue/no-setup-props-destructure })
dataFrom.value.content[0].link.value = props.dataList.apiUrl const flag = ref(true)
dataFrom.value.content[0].facilitator.value = props.dataList.deptName if (props.dataList.infoList) {
dataFrom.value.content[0].people.value = props.dataList.deptContacts let obj = props.dataList.infoList.filter(
dataFrom.value.content[0].phone.value = props.dataList.deptPhone (item) =>
console.log('dataList', props.dataList) item.attrType === '技术文档' ||
props.dataList.infoList.map((item) => { item.attrType === '服务商' ||
if (item.attrType === '组件地址') { item.attrType === '服务商联系人' ||
dataFrom.value.content[0].linkValue = item.attrValue || '--' item.attrType === '使用手册' ||
} else if (item.attrType === '服务商') { item.attrType === '服务地址' ||
dataFrom.value.content[0].facilitator2.value = item.attrValue || '--' item.attrType === '样式服务地址' ||
} else if (item.attrType === '服务商联系人') { item.attrType === '服务商联系电话'
dataFrom.value.content[0].people2.value = item.attrValue || '--' )[0]
} else if (item.attrType === '服务商联系电话') { if (!obj) {
dataFrom.value.content[0].phone2.value = item.attrValue || '--' flag.value = false
} } else {
}) // eslint-disable-next-line vue/no-setup-props-destructure
} dataFrom.value.content[0].link.value = props.dataList.apiUrl
dataFrom.value.content[0].facilitator.value = props.dataList.deptName
dataFrom.value.content[0].people.value = props.dataList.deptContacts
dataFrom.value.content[0].phone.value = props.dataList.deptPhone
console.log('dataList', props.dataList)
props.dataList.infoList.map((item) => {
if (item.attrType === '组件地址') {
dataFrom.value.content[0].linkValue = item.attrValue || '--'
} else if (item.attrType === '服务商') {
dataFrom.value.content[0].facilitator2.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系人') {
dataFrom.value.content[0].people2.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系电话') {
dataFrom.value.content[0].phone2.value = item.attrValue || '--'
}
})
} }
watch( }
() => props.dataList, watch(
(val) => { () => props.dataList,
if (val) { (val) => {
let obj = val.infoList.filter( if (val) {
(item) => let obj = val.infoList.filter(
item.attrType === '技术文档' || (item) =>
item.attrType === '服务商' || item.attrType === '技术文档' ||
item.attrType === '服务商联系人' || item.attrType === '服务商' ||
item.attrType === '使用手册' || item.attrType === '服务商联系人' ||
item.attrType === '服务地址' || item.attrType === '使用手册' ||
item.attrType === '样式服务地址' || item.attrType === '服务地址' ||
item.attrType === '服务商联系电话' item.attrType === '样式服务地址' ||
)[0] item.attrType === '服务商联系电话'
if (!obj) { )[0]
flag.value = false if (!obj) {
} else { flag.value = false
dataFrom.value.content[0].link.value = val.apiUrl } else {
dataFrom.value.content[0].facilitator.value = val.deptName dataFrom.value.content[0].link.value = val.apiUrl
dataFrom.value.content[0].people.value = val.deptContacts dataFrom.value.content[0].facilitator.value = val.deptName
dataFrom.value.content[0].phone.value = val.deptPhone dataFrom.value.content[0].people.value = val.deptContacts
console.log('dataList', val) dataFrom.value.content[0].phone.value = val.deptPhone
val.infoList.map((item) => { console.log('dataList', val)
if (item.attrType === '组件地址') { val.infoList.map((item) => {
dataFrom.value.content[0].linkValue = item.attrValue || '--' if (item.attrType === '组件地址') {
} else if (item.attrType === '服务商') { dataFrom.value.content[0].linkValue = item.attrValue || '--'
dataFrom.value.content[0].facilitator2.value = } else if (item.attrType === '服务商') {
item.attrValue || '--' dataFrom.value.content[0].facilitator2.value =
} else if (item.attrType === '服务商联系人') { item.attrValue || '--'
dataFrom.value.content[0].people2.value = item.attrValue || '--' } else if (item.attrType === '服务商联系人') {
} else if (item.attrType === '服务商联系电话') { dataFrom.value.content[0].people2.value = item.attrValue || '--'
dataFrom.value.content[0].phone2.value = item.attrValue || '--' } else if (item.attrType === '服务商联系电话') {
} dataFrom.value.content[0].phone2.value = item.attrValue || '--'
}) }
} })
} }
} }
}
)
function technical() {
// 拼接路径
// const type = pinyin(props.dataList.type, {
// pattern: 'initial',
// }).replace(/\s*/g, '')
// // 打开文档
// const id = props.dataList.id
// window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
// console.log('dataFrom.value.link', dataFrom.value.link)
let obj = props.dataList.infoList.filter(
(item) => item.attrType === '技术文档'
)[0]
console.log('dataFrom.value.link', obj.attrValue)
window.open(
window.SITE_CONFIG.previewUrl +
'hisense_office/onlinePreview?url=' +
btoa(encodeURI(obj.attrValue))
) )
function technical() { }
// 拼接路径 function technicalNew() {
// const type = pinyin(props.dataList.type, { // 拼接路径
// pattern: 'initial', // const type = pinyin(props.dataList.type, {
// }).replace(/\s*/g, '') // pattern: 'initial',
// // 打开文档 // }).replace(/\s*/g, '')
// const id = props.dataList.id // // 打开文档
// window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank') // const id = props.dataList.id
// console.log('dataFrom.value.link', dataFrom.value.link) // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
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( 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))
) )
} }
function technicalNew() {
// 拼接路径
// const type = pinyin(props.dataList.type, {
// pattern: 'initial',
// }).replace(/\s*/g, '')
// // 打开文档
// const id = props.dataList.id
// window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
let obj = props.dataList.infoList.filter(
(item) => item.attrType === '使用手册'
)[0]
console.log('dataFrom.value.link', obj.attrValue)
window.open(
window.SITE_CONFIG.previewUrl +
'hisense_office/onlinePreview?url=' +
btoa(encodeURI(obj.attrValue))
)
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.usage-mode { .usage-mode {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.8rem 0;
.content {
margin-top: 0.3rem;
display: flex; display: flex;
flex-direction: column;
align-items: center; .content-left {
padding: 0.8rem 0; height: 1.5rem;
.content { width: 6.2rem;
margin-top: 0.3rem; background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') no-repeat;
background-position: center;
background-size: 100% 100%;
border-radius: 0.1rem;
margin-right: 0.6rem;
box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
display: flex; display: flex;
.content-left { align-items: center;
height: 1.5rem; padding: 0 0.35rem;
width: 6.2rem;
background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') .left {
no-repeat; .content-left-title {
background-position: center; font-size: 0.26rem;
background-size: 100% 100%; line-height: 0.26rem;
border-radius: 0.1rem; color: #212956;
margin-right: 0.6rem; margin-bottom: 0.2rem;
box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
display: flex; span:first-child {
align-items: center; margin-right: 0.1rem;
padding: 0 0.35rem;
.left {
.content-left-title {
font-size: 0.26rem;
line-height: 0.26rem;
color: #212956;
margin-bottom: 0.2rem;
span:first-child {
margin-right: 0.1rem;
}
} }
.content-left-content { }
width: 4.2rem;
font-size: 0.2rem; .content-left-content {
color: rgba(33, 41, 86, 0.8); width: 4.2rem;
line-height: 0.2rem; font-size: 0.2rem;
p { color: rgba(33, 41, 86, 0.8);
line-height: 0.2rem;
p {
display: -webkit-box;
margin-bottom: 0.1rem;
span:last-of-type {
width: 298px;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin-bottom: 0.1rem;
} }
} }
} }
.right {
div {
height: 0.4rem;
width: 1.3rem;
background: #ffffff;
border-radius: 0.2rem;
color: #526aff;
font-size: 0.2rem;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
div:first-child {
margin-bottom: 0.2rem;
}
}
} }
.content-right {
height: 1.5rem; .right {
width: 6.2rem; div {
background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') height: 0.4rem;
no-repeat; width: 1.3rem;
background-position: center; background: #ffffff;
background-size: 100% 100%; border-radius: 0.2rem;
border-radius: 0.1rem; color: #526aff;
box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4); font-size: 0.2rem;
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 0.3rem;
.content-right-left {
border-right: 0.01rem solid #707fe0;
padding-right: 0.1rem;
margin-right: 0.1rem;
}
.content-right-title {
font-size: 0.26rem;
line-height: 0.26rem;
color: #212956;
margin-bottom: 0.15rem;
}
.content-right-content {
display: flex; display: flex;
font-size: 0.16rem; justify-content: center;
color: rgba(33, 41, 86, 0.8); align-items: center;
line-height: 0.2rem; cursor: pointer;
overflow: hidden; }
div:first-child {
margin-bottom: 0.2rem;
}
}
}
.content-right {
height: 1.5rem;
width: 6.2rem;
background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') no-repeat;
background-position: center;
background-size: 100% 100%;
border-radius: 0.1rem;
box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 0.3rem;
.content-right-left {
border-right: 0.01rem solid #707fe0;
padding-right: 0.1rem;
margin-right: 0.1rem;
}
.content-right-title {
font-size: 0.26rem;
line-height: 0.26rem;
color: #212956;
margin-bottom: 0.15rem;
}
.content-right-content {
display: flex;
font-size: 0.16rem;
color: rgba(33, 41, 86, 0.8);
line-height: 0.2rem;
overflow: hidden;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
flex-direction: column;
p {
// width: 1.60rem;
height: 0.2rem;
display: -webkit-box;
// overflow: hidden;
margin-bottom: 0.08rem;
white-space: nowrap;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
flex-direction: column; margin-right: 0.15rem;
p {
// width: 1.60rem; span {
height: 0.2rem; cursor: pointer;
display: -webkit-box;
// overflow: hidden;
margin-bottom: 0.08rem;
white-space: nowrap;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
margin-right: 0.15rem;
span {
cursor: pointer;
}
} }
} }
} }
} }
} }
}
</style> </style>

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
} }
}) })
} }

3
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>
@ -96,6 +96,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;
} }
} }
} }

463
front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.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,240 +16,248 @@
</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: 'layer-service-associated-ability', const router = useRouter()
}, const keyId = router.currentRoute.value.query.id
{ const navList = ref([
name: '图层展示', {
key: 'service-presentation', name: '图层展示',
}, key: 'service-presentation',
{ },
name: '图层信息', {
key: 'service-information', name: '图层信息',
}, key: 'service-information',
{ },
name: '应用场景', {
key: 'service-application-scenarios', name: '应用场景',
}, key: 'service-application-scenarios',
{ },
name: '应用案例', {
key: 'service-application-case', name: '应用案例',
}, key: 'service-application-case',
{ },
name: '图层预览', {
key: 'service-preview', name: '图层预览',
}, key: 'service-preview',
{ },
name: '使用方式', {
key: 'service-usage-mode', name: '使用方式',
}, key: 'service-usage-mode',
{ },
name: '常见问题', {
key: 'service-common-problem', name: '常见问题',
}, key: 'service-common-problem',
]) },
const props = defineProps({ ])
selectNow: { type: String, default: '' }, const props = defineProps({
dataList: { type: Object, default: null }, selectNow: { type: String, default: '' },
associatedComponents: { type: Array, default: null }, dataList: { type: Object, default: null },
associatedComponents: { type: Array, default: null },
})
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('service-presentation') }
const list = ref([]) 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)
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 === '应用案例'
) { ) {
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 === '是否可预览') {
if (item.attrValue === '是') { if (item.attrValue === '是') {
list.value.push('图层预览') list.value.push('图层预览')
}
} else if (
item.attrType === '服务类型' ||
item.attrType === '覆盖区域' ||
item.attrType === '切片策略' ||
item.attrType === '坐标系' ||
item.attrType === '切片尺寸' ||
item.attrType === '最小级别' ||
item.attrType === '数据范围' ||
item.attrType === '图层类型' ||
item.attrType === '最大级别'
) {
list.value.push('图层信息')
} else if (
item.attrType === '技术文档' ||
item.attrType === '服务商' ||
item.attrType === '服务商联系人' ||
item.attrType === '使用手册' ||
item.attrType === '服务地址' ||
item.attrType === '样式服务地址' ||
item.attrType === '服务商联系电话'
) {
list.value.push('使用方式')
} }
}) } else if (
list.value.push('关联应用') item.attrType === '服务类型' ||
navList.value.forEach((item) => { item.attrType === '覆盖区域' ||
console.log(item) item.attrType === '切片策略' ||
if (list.value.indexOf(item.name) > -1) { item.attrType === '坐标系' ||
if (item.name == '关联应用') { item.attrType === '切片尺寸' ||
if (props.associatedComponents[0].dataList.length != 0) { item.attrType === '最小级别' ||
item.show = true item.attrType === '数据范围' ||
item.attrType === '图层类型' ||
item.attrType === '最大级别'
) {
list.value.push('图层信息')
} else if (
item.attrType === '技术文档' ||
item.attrType === '服务商' ||
item.attrType === '服务商联系人' ||
item.attrType === '使用手册' ||
item.attrType === '服务地址' ||
item.attrType === '样式服务地址' ||
item.attrType === '服务商联系电话'
) {
list.value.push('使用方式')
}
})
list.value.unshift('关联应用')
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,
(val) => {
if (val) {
list.value = []
let arr = [
'图层缩略图',
'坐标系',
'应用场景',
'应用案例',
'是否可预览',
'使用方式',
'常见问题',
]
// 排序
// eslint-disable-next-line vue/no-mutating-props
props.dataList.infoList.sort((a, b) => {
// console.log('排序==============>', a, b)
return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
})
val.infoList.map((item) => {
if (
item.attrType === '常见问题' ||
item.attrType === '应用场景' ||
item.attrType === '应用案例'
) {
list.value.push(item.attrType)
} else if (item.attrType === '图层缩略图') {
list.value.push('图层展示')
} else if (item.attrType === '是否可预览') {
if (item.attrValue === '是') {
list.value.push('图层预览')
} }
} else { } else if (
item.attrType === '服务类型' ||
item.attrType === '覆盖区域' ||
item.attrType === '切片策略' ||
item.attrType === '坐标系' ||
item.attrType === '切片尺寸' ||
item.attrType === '最小级别' ||
item.attrType === '数据范围' ||
item.attrType === '图层类型' ||
item.attrType === '最大级别'
) {
list.value.push('图层信息')
} else if (
item.attrType === '技术文档' ||
item.attrType === '服务商' ||
item.attrType === '服务商联系人' ||
item.attrType === '使用手册' ||
item.attrType === '服务地址' ||
item.attrType === '样式服务地址' ||
item.attrType === '服务商联系电话'
) {
list.value.push('使用方式')
}
})
list.value.unshift('关联应用')
navList.value.forEach((item) => {
console.log(item)
if (list.value.indexOf(item.name) > -1) {
item.show = true item.show = true
} }
})
if (list.value.length > 0) {
select.value = navList.value.filter(
(item) => item.name === list.value[0]
)[0].key
} }
}) console.log('11111111111111111111111111', list.value, navList.value)
select.value = navList.value.filter( }
(item) => item.name === '图层展示'
)[0].key
console.log('11111111111111111111111111', list.value, navList.value)
} }
watch( )
() => props.selectNow,
(newValue) => {
select.value = newValue
}
)
watch(
() => props.dataList,
(val) => {
if (val) {
list.value = []
let arr = [
'图层缩略图',
'坐标系',
'应用场景',
'应用案例',
'是否可预览',
'使用方式',
'常见问题',
]
// 排序
// eslint-disable-next-line vue/no-mutating-props
props.dataList.infoList.sort((a, b) => {
// console.log('排序==============>', a, b)
return arr.indexOf(a.attrType) - arr.indexOf(b.attrType)
})
val.infoList.map((item) => {
if (
item.attrType === '常见问题' ||
item.attrType === '应用场景' ||
item.attrType === '应用案例'
) {
list.value.push(item.attrType)
} else if (item.attrType === '图层缩略图') {
list.value.push('图层展示')
} else if (item.attrType === '是否可预览') {
if (item.attrValue === '是') {
list.value.push('图层预览')
}
} else if (
item.attrType === '服务类型' ||
item.attrType === '覆盖区域' ||
item.attrType === '切片策略' ||
item.attrType === '坐标系' ||
item.attrType === '切片尺寸' ||
item.attrType === '最小级别' ||
item.attrType === '数据范围' ||
item.attrType === '图层类型' ||
item.attrType === '最大级别'
) {
list.value.push('图层信息')
} else if (
item.attrType === '技术文档' ||
item.attrType === '服务商' ||
item.attrType === '服务商联系人' ||
item.attrType === '使用手册' ||
item.attrType === '服务地址' ||
item.attrType === '样式服务地址' ||
item.attrType === '服务商联系电话'
) {
list.value.push('使用方式')
}
})
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
}
} else {
item.show = true
}
}
})
if (list.value.length > 0) {
select.value = navList.value.filter(
(item) => item.name === '图层展示'
)[0].key
}
console.log('11111111111111111111111111', list.value, navList.value)
}
}
)
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.business-navigation { .business-navigation {
width: 19.12rem; width: 19.12rem;
height: 0.84rem; height: 0.84rem;
line-height: 0.8rem; 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; display: flex;
justify-content: space-around; flex-direction: column;
font-size: 0.24rem; justify-content: space-between;
color: #666; align-items: center;
background: #fff;
padding: 0 3rem; .line {
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb; width: 0.4rem;
position: relative; height: 0.04rem;
.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;
}
} }
} }
.select {
color: #526aff;
.line {
background: #526aff;
}
}
}
</style> </style>

3
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>
@ -96,6 +96,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,

73
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>
@ -99,6 +103,7 @@
name: '接口地址：', name: '接口地址：',
}, },
linkValue: '', linkValue: '',
csslinkValue: '',
contact: '归属部门', contact: '归属部门',
facilitator: { name: '归属部门：', value: '' }, facilitator: { name: '归属部门：', value: '' },
people: { name: '部门联系人：', value: '' }, people: { name: '部门联系人：', value: '' },
@ -142,7 +147,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 +155,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 +184,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 +193,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 || '--'
} }
}) })
} }
@ -237,9 +246,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 +265,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 +307,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 +328,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 +351,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 +361,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;

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

@ -1,6 +1,10 @@
<template> <template>
<div class="ability-to-apply-for"> <div class="ability-to-apply-for" :class="{ all: falg }">
<div class="title">申请能力</div> <div class="title">
<span>申请能力</span>
<span class="btn" @click="falg = !falg" v-show="!falg">展开</span>
<span class="btn" @click="falg = !falg" v-show="falg">收起</span>
</div>
<div <div
v-for="(item, index) in dataForm" v-for="(item, index) in dataForm"
:key="index" :key="index"
@ -12,20 +16,38 @@
</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
<span>{{ val.resourceName }}</span> class="tx"
<span>{{ val.type }}</span> :class="
</div> val.type == '基础设施'
<div class="description"> ? 'sxt'
{{ : val.componentType == '智能算法'
val.description || ? 'znsf'
(val.note1 && : val.componentType == '图层服务'
JSON.parse(val.note1)[0].channelName + ? 'tcfw'
'等' + : val.componentType == '开发组件'
JSON.parse(val.note1).length + ? 'kfzj'
'个摄像头') || : val.componentType == '业务组件'
'--' ? 'ywzj'
}} : ''
"
></div>
<div class="text">
<div class="name">
<span>{{ 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>
@ -35,27 +57,29 @@
</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 props = defineProps({
dataList: { type: Array, default: null }, dataList: { type: Array, default: null },
}) })
const falg = ref(false)
let dataForm = ref([]) let dataForm = ref([])
// eslint-disable-next-line vue/no-setup-props-destructure // eslint-disable-next-line vue/no-setup-props-destructure
dataForm.value = props.dataList dataForm.value = props.dataList
const router = useRouter() console.log(dataForm.value)
const arr = // const router = useRouter()
router.currentRoute.value.query.name instanceof Array // const arr =
? router.currentRoute.value.query.name // router.currentRoute.value.query.name instanceof Array
: [router.currentRoute.value.query.name] // ? router.currentRoute.value.query.name
const dataResourceId = router.currentRoute.value.query.resourceId // : [router.currentRoute.value.query.name]
// const dataResourceId = router.currentRoute.value.query.resourceId
const depList = ref({ // const depList = ref({
Name: [], // Name: [],
depID: [], // depID: [],
}) // })
//移除方法 //移除方法
const removeFunction = (data) => { const removeFunction = (data) => {
dataForm.value.map((val) => { dataForm.value.map((val) => {
@ -71,25 +95,26 @@
<style scoped lang="less"> <style scoped lang="less">
.ability-to-apply-for { .ability-to-apply-for {
height: 2.9rem;
overflow: hidden;
.title { .title {
font-size: 0.16rem; font-size: 0.16rem;
color: #212121; color: #212121;
border-bottom: 0.01rem #dddee1 solid; border-bottom: 0.01rem #dddee1 solid;
padding-bottom: 0.1rem; padding-bottom: 0.1rem;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
display: flex;
justify-content: space-between;
} }
.ability-to-apply-for-content { .ability-to-apply-for-content {
// margin-bottom: 0.3rem;
// border-bottom: 0.01rem #dddee1 solid;
// padding-bottom: 0.3rem;
padding-right: 0.5rem; padding-right: 0.5rem;
position: relative; position: relative;
.dep-name { .dep-name {
color: #0558e1; color: #0558e1;
font-size: 0.18rem; font-size: 0.22rem;
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 0.18rem; line-height: 0.22rem;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
span { span {
display: inline-block; display: inline-block;
@ -104,14 +129,19 @@
padding-bottom: 0.1rem; padding-bottom: 0.1rem;
margin-bottom: 0.1rem; margin-bottom: 0.1rem;
border-bottom: 1px solid #dddee1; border-bottom: 1px solid #dddee1;
position: relative; display: flex;
align-items: center;
.text {
margin-left: 0.2rem;
width: 8.8rem;
}
} }
.name { .name {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
span:first-child { span:first-child {
display: inline-block; display: inline-block;
margin-right: 0.08rem; margin-right: 0.08rem;
font-size: 0.2rem; font-size: 0.18rem;
color: #000000; color: #000000;
} }
span:last-child { span:last-child {
@ -122,16 +152,13 @@
} }
} }
.description { .description {
width: 10rem; width: 8.8rem;
color: rgba(0, 0, 0, 0.45); color: rgba(0, 0, 0, 0.45);
} }
.remove { .remove {
margin-left: 0.1rem;
width: 0.32rem; width: 0.32rem;
height: 0.32rem; height: 0.32rem;
position: absolute;
right: 0;
top: 50%;
margin-top: -0.16rem;
background: url('~@/assets/home/remove.png') no-repeat; background: url('~@/assets/home/remove.png') no-repeat;
background-size: cover; background-size: cover;
cursor: pointer; cursor: pointer;
@ -142,4 +169,37 @@
} }
} }
} }
.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>

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

@ -1053,7 +1053,7 @@
paramsGetResources.pageNum = 1 paramsGetResources.pageNum = 1
} }
let dataResourceParams = { let dataResourceParams = {
serviceName: paramsGetResources.name, //资源名称 serviceName: paramsGetResources.name || '', //资源名称
orderField: whoShow1.value.itShowQingDao orderField: whoShow1.value.itShowQingDao
? paramsGetResources.orderField == 'applyCount' ? paramsGetResources.orderField == 'applyCount'
? 'syqk' ? 'syqk'

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 && ids.length>0) { 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"
@ -256,12 +261,13 @@
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' // document.documentElement.style.overflowY = 'hidden'
}) })
mynoticeDom.addEventListener('mouseout', () => { mynoticeDom.addEventListener('mouseout', () => {
mynoticeFlag.value = false mynoticeFlag.value = false
@ -271,7 +277,7 @@
if (mynotice) { if (mynotice) {
mynotice.addEventListener('mouseover', () => { mynotice.addEventListener('mouseover', () => {
mynoticeFlag.value = true mynoticeFlag.value = true
document.documentElement.style.overflowY = 'hidden' // document.documentElement.style.overflowY = 'hidden'
}) })
mynotice.addEventListener('mouseout', () => { mynotice.addEventListener('mouseout', () => {
mynoticeFlag.value = false mynoticeFlag.value = false
@ -318,6 +324,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;

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

@ -37,8 +37,11 @@
:class=" :class="
item.type == '应用资源' item.type == '应用资源'
? 'yyzy' ? 'yyzy'
: item.type == '数据资源' : !item.type
? 'sjzy' ? 'sjzy'
: !item.infoList ||
!item.infoList.filter((val) => val.attrType == '组件类型')[0]
? 'znsf'
: item.infoList && : item.infoList &&
item.infoList.filter((val) => val.attrType == '组件类型')[0] item.infoList.filter((val) => val.attrType == '组件类型')[0]
.attrValue == '智能算法' .attrValue == '智能算法'
@ -123,7 +126,10 @@
<span>{{ item.deptName || '--' }}</span> <span>{{ item.deptName || '--' }}</span>
</div> </div>
<div v-if="selectCardsname !== '基础设施'"> <div v-if="selectCardsname !== '基础设施'">
{{ item.description || '--' }} <a-tooltip>
<template #title>{{ item.description }}</template>
{{ item.description || '--' }}
</a-tooltip>
</div> </div>
</div> </div>
<div class="bottom" v-if="selectCardsname !== '基础设施'"> <div class="bottom" v-if="selectCardsname !== '基础设施'">
@ -131,7 +137,7 @@
<div v-if="selectCardsname !== '数据资源'"> <div v-if="selectCardsname !== '数据资源'">
浏览量：{{ item.visits || 0 }}次 浏览量：{{ item.visits || 0 }}次
</div> </div>
<div>申请量：{{ item.applyCount || 0 }}次</div> <div>申购量：{{ item.applyCount || 0 }}次</div>
<div v-if="selectCardsname === '数据资源'"> <div v-if="selectCardsname === '数据资源'">
数据量：{{ item.sjlCount || 0 }} 数据量：{{ item.sjlCount || 0 }}
</div> </div>
@ -191,7 +197,7 @@
<a-button <a-button
type="primary" type="primary"
@click="toView('details', item)" @click="toView('details', item)"
v-if="whoShow1.itShowQingDao" v-if="!whoShow1.itShowBaoTou"
> >
查看详情 查看详情
</a-button> </a-button>
@ -418,10 +424,15 @@
} }
function toView(type, item) { function toView(type, item) {
if (props.selectCardsname == '数据资源') { if (props.selectCardsname == '数据资源') {
window.open( if (whoShow1.itShowQingDao) {
'http://15.72.158.81/web/ZWXXSQ/bm/MuluDetail.aspx?zyguid=' + window.open(
item.guid 'http://15.72.158.81/web/ZWXXSQ/bm/MuluDetail.aspx?zyguid=' +
) item.guid
)
} else {
window.open(
'http://10.134.135.24:30090/#/home')
}
} else { } else {
if (type === 'apply') { if (type === 'apply') {
console.log('一键申请===================>', item) console.log('一键申请===================>', item)
@ -437,6 +448,9 @@
resourceName: item.name, resourceName: item.name,
time: item.createDate, time: item.createDate,
type: item.type, type: item.type,
componentType: item.infoList.filter(
(val) => val.attrType == '组件类型'
)[0].attrValue,
}, },
], ],
deptId: item.deptId, deptId: item.deptId,
@ -606,340 +620,340 @@
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
#search-result-list-container { #search-result-list-container {
width: 1088px; width: 1088px;
padding: 0 20px; padding: 0 20px;
background: #f3f5f9; background: #f3f5f9;
.detail-content { .detail-content {
// 超出 // 超出
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 130px; width: 130px;
display: inline-block; display: inline-block;
}
.shai-xuan {
width: 1047px;
height: 36px;
// margin: 11px 0 20px;
// background: #e5f2ff;
// padding-left: 20px;
display: flex;
align-items: center;
position: relative;
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #0087ff;
text-align: center;
color: #fff;
line-height: 16px;
margin-right: 21px;
} }
.shai-xuan { .result {
width: 1047px; font-size: 14px;
height: 36px; font-weight: 500;
// margin: 11px 0 20px; color: #212121;
// background: #e5f2ff;
// padding-left: 20px;
display: flex;
align-items: center;
position: relative;
.circle { span {
width: 16px; font-size: 18px;
height: 16px; color: #0087ff;
border-radius: 50%;
background-color: #0087ff;
text-align: center;
color: #fff;
line-height: 16px;
margin-right: 21px;
}
.result {
font-size: 14px;
font-weight: 500;
color: #212121;
span {
font-size: 18px;
color: #0087ff;
}
}
.condition {
position: absolute;
right: 20px;
top: 10px;
ul li {
list-style-type: none;
}
ul {
display: flex;
li {
width: 90px;
height: 12px;
text-align: center;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
.arrow {
display: inline-block;
width: 12px;
height: 12px;
background: url('~@/assets/newHome/arrow.png');
margin-left: 10px;
}
.down {
background: url('~@/assets/newHome/down.png');
margin-top: 6px;
}
}
}
} }
} }
.result-list { .condition {
width: 1048px; position: absolute;
display: flex; right: 20px;
flex-direction: column; top: 10px;
flex-wrap: wrap;
border-bottom: 1px rgba(150, 144, 144, 0.3) solid;
border-top: 1px rgba(150, 144, 144, 0.3) solid;
padding: 10px 0;
.item { ul li {
width: 100%; list-style-type: none;
margin-top: 10px; }
ul {
display: flex; display: flex;
align-items: center;
.left { li {
display: inline-block; width: 90px;
width: 120px; height: 12px;
height: 110px; text-align: center;
margin-right: 16px; cursor: pointer;
}
.right {
width: 100%;
}
.yyzy {
background: url('~@/assets/home/yyzy_square.png') no-repeat;
background-size: 100%;
}
.sjzy {
background: url('~@/assets/home/sjzy_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%;
}
.header {
display: flex; display: flex;
justify-content: space-between; justify-content: center;
align-items: center;
margin: 0 10px 0 0;
.header-right {
display: flex;
font-size: 14px;
color: #212121;
span {
font-size: 14px;
color: #212121;
}
div {
margin-right: 24px;
}
}
.header-right:last-child {
div {
margin-right: 16px;
}
}
span {
font-size: 20px;
font-weight: 600;
// color: #0087ff;
}
}
.dec {
overflow: hidden;
text-overflow: ellipsis;
// white-space: nowrap;
color: #0058e1;
display: flex;
margin-top: 10px;
div {
margin-right: 10px;
background: rgba(0, 88, 225, 0.1);
padding-left: 10px;
padding-right: 10px;
}
div:nth-child(3) {
max-width: 200px;
display: -webkit-box;
/*设置为弹性盒子*/
-webkit-line-clamp: 1;
/*最多显示3行*/
overflow: hidden;
/*超出隐藏*/
text-overflow: ellipsis;
/*超出显示为省略号*/
-webkit-box-orient: vertical;
}
}
.btn {
display: flex;
justify-content: space-between;
font-size: 14px;
margin: 5px 0;
// .left {
// width: 600px;
// display: flex;
// justify-content: space-between;
// flex-wrap: wrap;
// & > div {
// width: 300px;
// & > span {
// color: #0087ff;
// font-weight: 600;
// }
// }
// }
.right {
flex: 1;
display: flex;
justify-content: flex-end;
margin: 0 10px;
align-items: center;
.shopping {
span {
display: inline-block;
height: 32px;
width: 32px;
margin-right: 10px;
margin-top: 5px;
}
.shopping-on {
background: url('~@/assets/newHome/shopping-on.png');
cursor: pointer;
}
.shopping-down {
background: url('~@/assets/newHome/shopping-down.png');
}
}
.pk-on {
display: inline-block;
height: 32px;
width: 32px;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
background: url('~@/assets/newHome/pk-on.png');
cursor: pointer;
}
.sc {
// margin-top: 4px;
cursor: pointer;
display: flex;
align-items: center;
.sc-down {
display: inline-block;
height: 32px;
width: 32px;
background: url('~@/assets/newHome/sc-down.png');
}
.sc-on {
display: inline-block;
height: 32px;
width: 32px;
background: url('~@/assets/newHome/sc-on.png');
}
}
.ant-btn {
background: transparent;
background: #0058e1;
color: white;
width: 80px;
height: 32px;
font-weight: 600;
border-radius: 2px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
}
.ant-btn:last-child {
background: #0058e1;
color: white;
}
}
}
.bottom {
display: flex;
justify-content: space-between;
margin-top: 10px;
align-items: center; align-items: center;
& > div { .arrow {
display: flex; display: inline-block;
align-items: center; width: 12px;
height: 12px;
& > div { background: url('~@/assets/newHome/arrow.png');
margin: 0 10px; margin-left: 10px;
}
} }
.pingfen { .down {
:deep(span) { background: url('~@/assets/newHome/down.png');
display: flex; margin-top: 6px;
align-items: center;
:deep(ul) {
display: flex;
align-items: center;
:deep(.ant-rate-star:not(:last-child)) {
margin-right: 4px;
}
}
}
} }
} }
} }
.item:nth-of-type(1) {
margin-top: 0;
}
} }
} }
.result-list {
width: 1048px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
border-bottom: 1px rgba(150, 144, 144, 0.3) solid;
border-top: 1px rgba(150, 144, 144, 0.3) solid;
padding: 10px 0;
.item {
width: 100%;
margin-top: 10px;
display: flex;
align-items: center;
.left {
display: inline-block;
width: 120px;
height: 110px;
margin-right: 16px;
}
.right {
width: 100%;
}
.yyzy {
background: url('~@/assets/home/yyzy_square.png') no-repeat;
background-size: 100%;
}
.sjzy {
background: url('~@/assets/home/sjzy_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%;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 10px 0 0;
.header-right {
display: flex;
font-size: 14px;
color: #212121;
span {
font-size: 14px;
color: #212121;
}
div {
margin-right: 24px;
}
}
.header-right:last-child {
div {
margin-right: 16px;
}
}
span {
font-size: 20px;
font-weight: 600;
// color: #0087ff;
}
}
.dec {
overflow: hidden;
text-overflow: ellipsis;
// white-space: nowrap;
color: #0058e1;
display: flex;
margin-top: 10px;
div {
margin-right: 10px;
background: rgba(0, 88, 225, 0.1);
padding-left: 10px;
padding-right: 10px;
}
div:nth-child(3) {
max-width: 200px;
display: -webkit-box;
/*设置为弹性盒子*/
-webkit-line-clamp: 1;
/*最多显示3行*/
overflow: hidden;
/*超出隐藏*/
text-overflow: ellipsis;
/*超出显示为省略号*/
-webkit-box-orient: vertical;
}
}
.btn {
display: flex;
justify-content: space-between;
font-size: 14px;
margin: 5px 0;
// .left {
// width: 600px;
// display: flex;
// justify-content: space-between;
// flex-wrap: wrap;
// & > div {
// width: 300px;
// & > span {
// color: #0087ff;
// font-weight: 600;
// }
// }
// }
.right {
flex: 1;
display: flex;
justify-content: flex-end;
margin: 0 10px;
align-items: center;
.shopping {
span {
display: inline-block;
height: 32px;
width: 32px;
margin-right: 10px;
margin-top: 5px;
}
.shopping-on {
background: url('~@/assets/newHome/shopping-on.png');
cursor: pointer;
}
.shopping-down {
background: url('~@/assets/newHome/shopping-down.png');
}
}
.pk-on {
display: inline-block;
height: 32px;
width: 32px;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
background: url('~@/assets/newHome/pk-on.png');
cursor: pointer;
}
.sc {
// margin-top: 4px;
cursor: pointer;
display: flex;
align-items: center;
.sc-down {
display: inline-block;
height: 32px;
width: 32px;
background: url('~@/assets/newHome/sc-down.png');
}
.sc-on {
display: inline-block;
height: 32px;
width: 32px;
background: url('~@/assets/newHome/sc-on.png');
}
}
.ant-btn {
background: transparent;
background: #0058e1;
color: white;
width: 80px;
height: 32px;
font-weight: 600;
border-radius: 2px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
}
.ant-btn:last-child {
background: #0058e1;
color: white;
}
}
}
.bottom {
display: flex;
justify-content: space-between;
margin-top: 10px;
align-items: center;
& > div {
display: flex;
align-items: center;
& > div {
margin: 0 10px;
}
}
.pingfen {
:deep(span) {
display: flex;
align-items: center;
:deep(ul) {
display: flex;
align-items: center;
:deep(.ant-rate-star:not(:last-child)) {
margin-right: 4px;
}
}
}
}
}
}
.item:nth-of-type(1) {
margin-top: 0;
}
}
}
</style> </style>

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) => {

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

@ -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">
@ -253,6 +253,8 @@
let tableHeight = ref('600') let tableHeight = ref('600')
//tab切换点击事件 //tab切换点击事件
const tabClick = (indexFather, name) => { const tabClick = (indexFather, name) => {
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
@ -404,16 +406,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([])

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

@ -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, //页码

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;

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

@ -80,26 +80,32 @@
<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>
@ -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: ''
}, },
}) })
} }

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>

3
front/src/views/personalCenter/components/Collection.vue
View File

@ -50,7 +50,7 @@
> >
{{ item.name }} {{ item.name }}
</span> </span>
<span class="time">收藏时间：{{ item.createDate }}</span> <span class="time">收藏时间：{{ item.updateDate }}</span>
<svg <svg
t="1652233950228" t="1652233950228"
class="icon" class="icon"
@ -238,6 +238,7 @@
type: val.resourceDTO.type, type: val.resourceDTO.type,
resourceId: val.resourceId, resourceId: val.resourceId,
createDate: val.createDate, createDate: val.createDate,
updateDate: val.updateDate,
description: val.resourceDTO.description, description: val.resourceDTO.description,
delFlag: val.resourceDTO.delFlag, delFlag: val.resourceDTO.delFlag,
} }

2
front/src/views/personalCenter/components/MyApply.vue
View File

@ -49,7 +49,7 @@
<template #title>{{ item.name }}</template> <template #title>{{ item.name }}</template>
<div class="content-body-title"> <div class="content-body-title">
<span <span
v-if="item.name === '申请摄像头列表'" v-if="item.name === '申请摄像头列表' && item.ended"
@click="showVideoList(item)" @click="showVideoList(item)"
> >
名称：{{ item.name }} 名称：{{ item.name }}

123
front/src/views/personalCenter/components/PurchaseVehicle.vue
View File

@ -97,7 +97,8 @@
<a-list-item-meta <a-list-item-meta
:description=" :description="
item.description || item.description ||
(item.note1 && (JSON.parse(item.note1) &&
JSON.parse(item.note1)[0] &&
JSON.parse(item.note1)[0].channelName + JSON.parse(item.note1)[0].channelName +
'等' + '等' +
JSON.parse(item.note1).length + JSON.parse(item.note1).length +
@ -107,14 +108,48 @@
style="position: relative" style="position: relative"
> >
<template #title> <template #title>
<span <div>
@click="showItem(item.id, item.type, item.delFlag)" <span
style="cursor: pointer" @click="
class="name" showItem(
> item.resourceId,
{{ item.resourceName }} item.type,
item.delFlag,
item.note1
)
"
style="cursor: pointer"
class="name"
>
{{ item.resourceName }}
</span>
<span class="type">{{ item.type }}</span>
</div>
<span class="time">
加购时间:{{ item.time }}
<a-popconfirm
title="是否删除该记录?"
ok-text="是"
cancel-text="否"
@confirm="delOne(item)"
@cancel="cancel"
>
<a-button
type="primary"
style="
width: 0.7rem;
height: 0.3rem;
margin-left: 0.12rem;
border-radius: 2px;
background: #fff;
color: #0558e1;
"
@click="del"
>
删除
</a-button>
</a-popconfirm>
</span> </span>
<span class="type">{{ item.type }}</span>
<svg <svg
t="1652233950228" t="1652233950228"
class="icon" class="icon"
@ -192,6 +227,24 @@
</div> </div>
</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>
<!-- <a-pagination <!-- <a-pagination
v-model:current="pageNum" v-model:current="pageNum"
v-model:page-size="pageSize" v-model:page-size="pageSize"
@ -223,6 +276,8 @@
const pageNum = ref('1') const pageNum = ref('1')
const pageSize = ref('99999') const pageSize = ref('99999')
// const pageSizeOptions = ref(['5', '10', '20']) // const pageSizeOptions = ref(['5', '10', '20'])
const videoVisible = ref(false)
const xVideoList = ref([])
const total = ref(0) const total = ref(0)
const load = ref(0) const load = ref(0)
// 多选框 // 多选框
@ -232,6 +287,12 @@
const checkAll = ref(false) const checkAll = ref(false)
const checkNum = ref(0) const checkNum = ref(0)
const showKey = ref(0) const showKey = ref(0)
const columns = ref([
{
title: '摄像头名称',
dataIndex: 'name',
},
])
// 筛选条件 // 筛选条件
const name = ref('') const name = ref('')
const type = ref('') const type = ref('')
@ -672,20 +733,44 @@
}) })
} }
} }
const delOne = (item) => {
// console.log(item)
sgcDel({
ids: [item.id],
}).then((res) => {
if (res.data.msg === 'success') {
message.success('删除成功')
// console.log('删除申购车列表================>', res)
mybus.emit('getSgcNum')
clean()
}
})
}
const cancel = (e) => { const cancel = (e) => {
// console.log(e) // console.log(e)
} }
// 详情 // 详情
const showItem = (id, type, delFlag) => { const showItem = (id, type, delFlag, note1) => {
if (delFlag == 0) { if (type == '基础设施') {
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle')) // console.log()
mybus.emit('tabsChange', { flag: id }) let arr = JSON.parse(note1)
router.push({ xVideoList.value = []
path: '/details', arr.map((val) => {
query: { xVideoList.value.push({ name: val.channelName, key: val.channelId })
id: id,
},
}) })
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,
},
})
}
} }
} }
// 一键申请 // 一键申请
@ -919,4 +1004,8 @@
background: url('~@/assets/home/ywzj_square.png') no-repeat; background: url('~@/assets/home/ywzj_square.png') no-repeat;
background-size: 100%; background-size: 100%;
} }
:deep(.ant-list-item-meta-title) {
display: flex;
justify-content: space-between;
}
</style> </style>

534
front/src/views/personalCenter/components/addApplication.vue
View File

@ -9,83 +9,38 @@
<div class="form-container"> <div class="form-container">
<div v-if="applySuccess"> <div v-if="applySuccess">
<div class="title">申请人信息</div> <div class="title">申请人信息</div>
<a-form <a-form ref="formRef" :model="formName" name="basic" :label-col="{ style: { width: '106px' } }"
ref="formRef" :wrapper-col="{ style: { width: '230px' } }" labelAlign="left" autocomplete="off">
:model="formName"
name="basic"
:label-col="{ style: { width: '106px' } }"
:wrapper-col="{ style: { width: '230px' } }"
labelAlign="left"
autocomplete="off"
>
<div class="base-info"> <div class="base-info">
<a-form-item <a-form-item label="申请人" name="applyUserName" :rules="[{ required: true, message: '请输入申请人' }]">
label="申请人" <a-input placeholder="请输入申请人" v-model:value="formName.applyUserName" />
name="applyUserName"
:rules="[{ required: true, message: '请输入申请人' }]"
>
<a-input
placeholder="请输入申请人"
v-model:value="formName.applyUserName"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item style="margin: 0 22px" label="申请人电话" name="applyUserPhone" :rules="[
style="margin: 0 22px" {
label="申请人电话" required: true,
name="applyUserPhone" pattern: /^1[3456789]\d{9}$/,
:rules="[ message: '请输入正确的电话号码',
{ },
required: true, ]">
pattern: /^1[3456789]\d{9}$/, <a-input placeholder="请输入申请人电话" v-model:value="formName.applyUserPhone" />
message: '请输入正确的电话号码',
},
]"
>
<a-input
placeholder="请输入申请人电话"
v-model:value="formName.applyUserPhone"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item label="申请单位" name="applyUserDeptName" :rules="[{ required: true, message: '请输入申请单位' }]">
label="申请单位" <a-input placeholder="请输入申请单位" v-model:value="formName.applyUserDeptName" />
name="applyUserDeptName"
:rules="[{ required: true, message: '请输入申请单位' }]"
>
<a-input
placeholder="请输入申请单位"
v-model:value="formName.applyUserDeptName"
/>
</a-form-item> </a-form-item>
</div> </div>
<div class="title">需求信息</div> <div class="title">需求信息</div>
<a-form-item <a-form-item style="margin-bottom: 10px" label="需求标题" name="demandSubject"
style="margin-bottom: 10px" :rules="[{ required: true, message: '请输入需求标题' }]">
label="需求标题" <a-input style="width: 350px" v-model:value="formName.demandSubject" />
name="demandSubject"
:rules="[{ required: true, message: '请输入需求标题' }]"
>
<a-input
style="width: 350px"
v-model:value="formName.demandSubject"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item style="margin-bottom: 10px" label="需求类型" name="detailsType"
style="margin-bottom: 10px" :rules="[{ required: true, message: '请选择需求类型' }]">
label="需求类型" <a-select ref="select" v-model:value="formName.detailsType" @focus="focus" style="width: 200px">
name="detailsType"
:rules="[{ required: true, message: '请选择需求类型' }]"
>
<a-select
ref="select"
v-model:value="formName.detailsType"
@focus="focus"
style="width: 200px"
>
<a-select-option value="基础设施">基础设施</a-select-option> <a-select-option value="基础设施">基础设施</a-select-option>
<a-select-option value="数据资源">数据资源</a-select-option> <a-select-option value="数据资源">数据资源</a-select-option>
<a-select-option value="组件服务">组件服务</a-select-option> <a-select-option value="组件服务">组件服务</a-select-option>
@ -94,26 +49,14 @@
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item <a-form-item label="应用领域" name="detailsField" style="width: 350px"
label="应用领域" :rules="[{ required: true, message: '请输入应用领域' }]">
name="detailsField" <a-input placeholder="请输入应用领域" v-model:value="formName.detailsField" />
style="width: 350px"
:rules="[{ required: true, message: '请输入应用领域' }]"
>
<a-input
placeholder="请输入应用领域"
v-model:value="formName.detailsField"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item style="margin-bottom: 10px" label="需求描述" name="demandDetails"
style="margin-bottom: 10px" :rules="[{ required: true, message: '请输入需求描述' }]">
label="需求描述" <a-textarea style="
name="demandDetails"
:rules="[{ required: true, message: '请输入需求描述' }]"
>
<a-textarea
style="
width: 500px; width: 500px;
height: 150px; height: 150px;
font-size: 16px; font-size: 16px;
@ -123,24 +66,12 @@
border-radius: 6px; border-radius: 6px;
padding: 10px; padding: 10px;
resize: none; resize: none;
" " v-model:value="formName.demandDetails" />
v-model:value="formName.demandDetails"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item style="color: #666; font-size: 16px" label="附件上传" name="applyDoc">
style="color: #666; font-size: 16px" <a-upload v-model:file-list="fileList" name="file" :action="upLoadUrl" :headers="headers"
label="附件上传" @change="handleChange">
name="applyDoc" <a-button style="
>
<a-upload
v-model:file-list="fileList"
name="file"
:action="upLoadUrl"
:headers="headers"
@change="handleChange"
>
<a-button
style="
width: 100px; width: 100px;
height: 30px; height: 30px;
margin-right: 10px; margin-right: 10px;
@ -151,8 +82,7 @@
border: 1px solid #bbd3ef; border: 1px solid #bbd3ef;
padding: 0; padding: 0;
text-align: center; text-align: center;
" ">
>
<upload-outlined></upload-outlined> <upload-outlined></upload-outlined>
文件上传 文件上传
</a-button> </a-button>
@ -163,8 +93,7 @@
</a-form-item> </a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }"> <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button <a-button style="
style="
width: 80px; width: 80px;
height: 38px; height: 38px;
margin-right: 20px; margin-right: 20px;
@ -175,15 +104,10 @@
border: none; border: none;
padding: 0; padding: 0;
text-align: center; text-align: center;
" " type="primary" html-type="cancle" @click="signOut">
type="primary"
html-type="cancle"
@click="signOut"
>
退出申请 退出申请
</a-button> </a-button>
<a-button <a-button style="
style="
width: 80px; width: 80px;
height: 38px; height: 38px;
background: #0087ff; background: #0087ff;
@ -193,11 +117,7 @@
border: none; border: none;
padding: 0; padding: 0;
text-align: center; text-align: center;
" " type="primary" html-type="submit" @click="processStartHandle()">
type="primary"
html-type="submit"
@click="processStartHandle()"
>
提交申请 提交申请
</a-button> </a-button>
</a-form-item> </a-form-item>
@ -209,7 +129,7 @@
</div> </div>
<p> <p>
您已成功申请{{ 您已成功申请{{
formName.demandSubject || '' formName.demandSubject || ''
}},请耐心等待审批结果，结果会第一时间通知您！ }},请耐心等待审批结果，结果会第一时间通知您！
</p> </p>
</div> </div>
@ -220,209 +140,219 @@
</template> </template>
<script> <script>
import HomeHeader from '@/views/home/components/header' import HomeHeader from '@/views/home/components/header'
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
// import { UploadOutlined } from '@ant-design/icons-vue' // import { UploadOutlined } from '@ant-design/icons-vue'
import { getUser, getUserInfo, relaunch } from '@/api/home' import { getUser, getUserInfo, relaunch } from '@/api/home'
import { import {
demandApply, demandApply,
getDemandForm, getDemandForm,
updateDemandForm, updateDemandForm,
} from '@/api/personalCenter' } from '@/api/personalCenter'
// import { baseURL } from '@/config' // import { baseURL } from '@/config'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
export default { export default {
name: '', name: '',
props: {}, props: {},
components: { components: {
HomeHeader, HomeHeader,
// UploadOutlined, // UploadOutlined,
}, },
setup() { setup() {
const disabled = ref(false) const disabled = ref(false)
const upLoadUrl = ref(window.SITE_CONFIG.apiURL + '/upload') const upLoadUrl = ref(window.SITE_CONFIG.apiURL + '/upload')
const formName = reactive({ const formName = reactive({
applyUserDeptId: '', applyUserDeptId: '',
applyUserDeptName: '', applyUserDeptName: '',
applyUserId: '', applyUserId: '',
applyUserName: '', applyUserName: '',
applyUserPhone: '', applyUserPhone: '',
demandDetails: '', demandDetails: '',
demandSubject: '', demandSubject: '',
detailsField: '', detailsField: '',
detailsType: '', detailsType: '',
enclosure: '', enclosure: '',
})
// console.log(formName.demandSubject)
const router = useRouter()
const id = ref(router.currentRoute.value.query.id)
const taskId = ref(router.currentRoute.value.query.taskId)
if (id.value) {
getDemandForm(id.value).then((res) => {
console.log('回填数据===============>', res)
formName.applyUserPhone = res.data.data.applyUserPhone
formName.demandSubject = res.data.data.demandSubject
formName.detailsType = res.data.data.detailsType
formName.detailsField = res.data.data.detailsField
formName.demandDetails = res.data.data.demandDetails
formName.enclosure = res.data.data.enclosure
}) })
// console.log(formName.demandSubject) }
getUser().then((res) => {
formName.applyUserName = res.data.data.realName
formName.applyUserId = res.data.data.id
getUserInfo(formName.applyUserId).then((res) => {
if (res.data.data.mobile) {
formName.applyUserPhone = res.data.data.mobile
}
formName.applyUserDeptName = res.data.data.deptName
formName.applyUserDeptId = res.data.data.deptId
})
})
const router = useRouter() const formRef = ref()
const id = ref(router.currentRoute.value.query.id) const applySuccess = ref(true)
const taskId = ref(router.currentRoute.value.query.taskId)
// 退出
const signOut = () => {
window.close()
}
const handleChange = (info) => {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList)
}
if (info.file.status === 'done') {
message.success(`${info.file.name} 文件上传成功`)
formName.enclosure = info.file.response.data
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 文件上传失败`)
}
}
const fileList = ref([])
const processStartHandle = () => {
if (id.value) { if (id.value) {
getDemandForm(id.value).then((res) => { updateDemandForm(formName).then((upres) => {
console.log('回填数据===============>', res) if (upres.data.code == 0) {
formName.applyUserPhone = res.data.data.applyUserPhone relaunch({ data: formName, taskId: taskId.value }).then((res) => {
formName.demandSubject = res.data.data.demandSubject console.log('驳回================>', res)
formName.detailsType = res.data.data.detailsType if (res.data.code == 0) {
formName.detailsField = res.data.data.detailsField message.success('重新发起流程成功！')
formName.demandDetails = res.data.data.demandDetails window.setTimeout(() => {
formName.enclosure = res.data.data.enclosure window.close()
}) }, 1000)
} } else {
getUser().then((res) => { message.error('重新发起流程失败！')
formName.applyUserName = res.data.data.realName }
formName.applyUserId = res.data.data.id
getUserInfo(formName.applyUserId).then((res) => {
if (res.data.data.mobile) {
formName.applyUserPhone = res.data.data.mobile
}
formName.applyUserDeptName = res.data.data.deptName
formName.applyUserDeptId = res.data.data.deptId
})
})
const formRef = ref()
const applySuccess = ref(true)
// 退出
const signOut = () => {
window.close()
}
const handleChange = (info) => {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList)
}
if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`)
formName.enclosure = info.file.response.data
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`)
}
}
const fileList = ref([])
const processStartHandle = () => {
if (id.value) {
updateDemandForm(formName).then((upres) => {
if (upres.data.code == 0) {
relaunch({ data: formName, taskId: taskId.value }).then((res) => {
console.log('驳回================>', res)
if (res.data.code == 0) {
message.success('重新发起流程成功！')
window.setTimeout(() => {
window.close()
}, 1000)
} else {
message.error('重新发起流程失败！')
}
})
} else {
message.error('数据更新失败！')
}
})
} else {
formRef.value.validate().then(() => {
demandApply(formName).then((res) => {
applySuccess.value = false
message.success('操作成功！')
console.log('能力申请================>', res)
}) })
} else {
message.error('数据更新失败！')
}
})
} else {
formRef.value.validate().then(() => {
demandApply(formName).then((res) => {
applySuccess.value = false
message.success('操作成功！')
console.log('能力申请================>', res)
}) })
} })
} }
}
return { return {
formRef, formRef,
formName, formName,
fileList, fileList,
headers: { headers: {
authorization: 'authorization-text', authorization: 'authorization-text',
}, },
handleChange, handleChange,
applySuccess, applySuccess,
disabled, disabled,
signOut, signOut,
processStartHandle, processStartHandle,
upLoadUrl, upLoadUrl,
// baseURL, // baseURL,
} }
}, },
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
#apply-container { #apply-container {
background-color: #f5f8fc; background-color: #f5f8fc;
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 90px auto 0; margin: 90px auto 0;
display: flex;
justify-content: space-between;
aside {
width: 282px;
height: 96%;
overflow-y: auto;
background-color: #fff;
margin: 1% 0 3%;
}
article {
width: 1090px;
height: 99%;
overflow-y: auto;
background-color: #fff;
margin: 5% auto;
}
.form-container {
padding: 20px 20px 30px 20px;
.title {
font-size: 20px;
color: #000;
font-weight: bold;
margin-bottom: 20px;
}
}
.base-info {
display: flex; display: flex;
justify-content: space-between; }
aside {
width: 282px; :deep(.ant-form-item-label) {
height: 96%; label {
overflow-y: auto; color: #666;
background-color: #fff; font-size: 16px;
margin: 1% 0 3%;
} &::after {
article { content: '';
width: 1090px;
height: 99%;
overflow-y: auto;
background-color: #fff;
margin: 5% auto;
}
.form-container {
padding: 20px 20px 30px 20px;
.title {
font-size: 20px;
color: #000;
font-weight: bold;
margin-bottom: 20px;
} }
} }
.base-info { }
display: flex;
:deep(.ant-form-item-required) {
&::before {
font-size: 8px;
margin-right: 10px;
} }
:deep(.ant-form-item-label) { }
label {
color: #666; :deep(.ant-input) {
font-size: 16px; border: 1px solid #e0e0e0;
&::after { border-radius: 6px;
content: ''; }
}
} .success {
} div {
:deep(.ant-form-item-required) { width: 100px;
&::before { margin: 80px auto 40px;
font-size: 8px;
margin-right: 10px;
}
} }
:deep(.ant-input) { text-align: center;
border: 1px solid #e0e0e0; font-size: 20px;
border-radius: 6px; font-weight: bold;
} color: #000;
.success {
div {
width: 100px;
margin: 80px auto 40px;
}
text-align: center;
font-size: 20px;
font-weight: bold;
color: #000;
}
} }
}
</style> </style>
<style> <style>
body, body,
html { html {
height: unset; height: unset;
} }
</style> </style>

1
node_modules/.package_versions.json generated vendored Normal file
View File

@ -0,0 +1 @@
{}