Merge branch 'hi-ucs-dev' into release
This commit is contained in:
commit
695aa6867d
|
@ -55,12 +55,16 @@
|
|||
width="50"
|
||||
></el-table-column>
|
||||
<af-table-column
|
||||
:show-overflow-tooltip="true"
|
||||
width="280"
|
||||
prop="name"
|
||||
label="组件名称"
|
||||
header-align="center"
|
||||
align="center"
|
||||
></af-table-column>
|
||||
<af-table-column
|
||||
:show-overflow-tooltip="true"
|
||||
width="300"
|
||||
v-for="(item, index) in dataList[0].infoList"
|
||||
:key="index"
|
||||
:label="item.attrType"
|
||||
|
@ -126,32 +130,32 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import mixinViewModule from "@/mixins/view-module";
|
||||
import AddOrUpdate from "./bsabilityai-add-or-update";
|
||||
import dictionaries from "@/utils/dictionaries";
|
||||
import qs from "qs";
|
||||
import RelateApplication from "./bsabilityai-relate-application.vue"
|
||||
import mixinViewModule from '@/mixins/view-module'
|
||||
import AddOrUpdate from './bsabilityai-add-or-update'
|
||||
import dictionaries from '@/utils/dictionaries'
|
||||
import qs from 'qs'
|
||||
import RelateApplication from './bsabilityai-relate-application.vue'
|
||||
export default {
|
||||
mixins: [mixinViewModule],
|
||||
data () {
|
||||
return {
|
||||
mixinViewModuleOptions: {
|
||||
getDataListURL: "/resource/page",
|
||||
getDataListURL: '/resource/page',
|
||||
getDataListIsPage: true,
|
||||
exportURL: "/ability/bsabilityai/export",
|
||||
deleteURL: "/resource/delete",
|
||||
deleteIsBatch: true,
|
||||
exportURL: '/ability/bsabilityai/export',
|
||||
deleteURL: '/resource/delete',
|
||||
deleteIsBatch: true
|
||||
},
|
||||
disabled: false,
|
||||
sceneArr: dictionaries.sceneArr,
|
||||
fieldArr: dictionaries.fieldArr,
|
||||
shareFormArr: dictionaries.shareFormArr,
|
||||
dataForm: {
|
||||
name: "",
|
||||
creator: "",
|
||||
name: '',
|
||||
creator: '',
|
||||
delFlag: 0,
|
||||
selectType: 0,
|
||||
type: "组件服务",
|
||||
type: '组件服务'
|
||||
},
|
||||
qp: false,
|
||||
// 关联应用弹窗
|
||||
|
@ -161,7 +165,7 @@ export default {
|
|||
responseData: {},
|
||||
linkType: ''
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
components: {
|
||||
|
@ -169,182 +173,185 @@ export default {
|
|||
RelateApplication
|
||||
},
|
||||
created () {
|
||||
this.dataForm.name = "";
|
||||
this.dataForm.type = "组件服务";
|
||||
this.dataForm.name = ''
|
||||
this.dataForm.type = '组件服务'
|
||||
},
|
||||
mounted () {
|
||||
window.addEventListener("resize", this.a);
|
||||
this.fullScreen();
|
||||
window.addEventListener('resize', this.a)
|
||||
this.fullScreen()
|
||||
},
|
||||
methods: {
|
||||
reset () {
|
||||
this.$http
|
||||
.get(
|
||||
this.mixinViewModuleOptions.getDataListURL +
|
||||
"?" +
|
||||
'?' +
|
||||
qs.stringify({
|
||||
// order: this.order,
|
||||
// orderField: this.orderField,
|
||||
// type: '组件服务',
|
||||
page: 1,
|
||||
limit: 10,
|
||||
creator: "",
|
||||
creator: '',
|
||||
selectType: 0,
|
||||
delFlag: 0,
|
||||
type: "组件服务",
|
||||
name: "",
|
||||
type: '组件服务',
|
||||
name: ''
|
||||
})
|
||||
)
|
||||
.then(({ data: res }) => {
|
||||
this.dataForm.name = "";
|
||||
this.dataForm.name = ''
|
||||
if (res.code !== 0) {
|
||||
this.dataList = [];
|
||||
this.total = 0;
|
||||
return this.$message.error(res.msg);
|
||||
this.dataList = []
|
||||
this.total = 0
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
this.dataList = this.mixinViewModuleOptions.getDataListIsPage
|
||||
? res.data.list
|
||||
: res.data;
|
||||
: res.data
|
||||
this.total = this.mixinViewModuleOptions.getDataListIsPage
|
||||
? res.data.total
|
||||
: 0;
|
||||
: 0
|
||||
if (this.mixinViewModuleOptions.requestCallback) {
|
||||
this.mixinViewModuleOptions.requestCallback(res.data);
|
||||
this.mixinViewModuleOptions.requestCallback(res.data)
|
||||
}
|
||||
this.dataListLoading = false;
|
||||
this.dataListLoading = false
|
||||
})
|
||||
.catch(() => {
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
this.dataListLoading = false
|
||||
})
|
||||
},
|
||||
findValue (list, type) {
|
||||
const found = list.find((item) => item.attrType === type);
|
||||
const found = list.find((item) => item.attrType === type)
|
||||
if (found) {
|
||||
return found.attrValue;
|
||||
return found.attrValue
|
||||
} else {
|
||||
return "暂无数据";
|
||||
return '暂无数据'
|
||||
}
|
||||
},
|
||||
showDetail (val) {
|
||||
// this.addOrUpdateHandle(id)
|
||||
this.addOrUpdateVisible = true;
|
||||
this.disabled = false;
|
||||
console.log("显示数据=============》", val);
|
||||
this.addOrUpdateVisible = true
|
||||
this.disabled = false
|
||||
console.log('显示数据=============》', val)
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.UpdateState = false;
|
||||
this.$refs.addOrUpdate.dataFormShowDetails = val;
|
||||
this.$refs.addOrUpdate.init();
|
||||
});
|
||||
this.disabled = true;
|
||||
this.$refs.addOrUpdate.UpdateState = false
|
||||
this.$refs.addOrUpdate.dataFormShowDetails = val
|
||||
this.$refs.addOrUpdate.init()
|
||||
})
|
||||
this.disabled = true
|
||||
},
|
||||
showDocument (val) {
|
||||
console.log(val);
|
||||
console.log(val)
|
||||
window.open(
|
||||
window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type,
|
||||
"_blank"
|
||||
);
|
||||
window.SITE_CONFIG.frontUrl + '?id=' + val.id + '&&type=' + val.type,
|
||||
'_blank'
|
||||
)
|
||||
},
|
||||
getDataList2 (names) {
|
||||
if (names != null) {
|
||||
this.$http
|
||||
.get(
|
||||
this.mixinViewModuleOptions.getDataListURL +
|
||||
"?" +
|
||||
'?' +
|
||||
qs.stringify({
|
||||
// order: this.order,
|
||||
// orderField: this.orderField,
|
||||
// type: '组件服务',
|
||||
pageNum: 1,
|
||||
pageSize: this.limit,
|
||||
type: "组件服务",
|
||||
creator: "",
|
||||
type: '组件服务',
|
||||
creator: '',
|
||||
selectType: 0,
|
||||
delFlag: 0,
|
||||
name: names,
|
||||
name: names
|
||||
})
|
||||
)
|
||||
.then(({ data: res }) => {
|
||||
console.log("res", res);
|
||||
console.log('res', res)
|
||||
if (res.code !== 0) {
|
||||
this.dataList = [];
|
||||
this.total = 0;
|
||||
return this.$message.error(res.msg);
|
||||
this.dataList = []
|
||||
this.total = 0
|
||||
return this.$message.error(res.msg)
|
||||
}
|
||||
if (res.data.list.length !== 0) {
|
||||
this.dataList = res.data.list;
|
||||
this.dataList = res.data.list
|
||||
this.total = this.mixinViewModuleOptions.getDataListIsPage
|
||||
? res.data.total
|
||||
: 0;
|
||||
: 0
|
||||
if (this.mixinViewModuleOptions.requestCallback) {
|
||||
this.mixinViewModuleOptions.requestCallback(res.data);
|
||||
this.mixinViewModuleOptions.requestCallback(res.data)
|
||||
}
|
||||
this.dataListLoading = false;
|
||||
this.dataListLoading = false
|
||||
} else {
|
||||
this.$message.error("未查询到相关信息");
|
||||
this.reset();
|
||||
this.$message.error('未查询到相关信息')
|
||||
this.reset()
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.dataListLoading = false;
|
||||
});
|
||||
this.dataListLoading = false
|
||||
})
|
||||
} else {
|
||||
this.$message.error("查询信息不能为空");
|
||||
this.$message.error('查询信息不能为空')
|
||||
}
|
||||
},
|
||||
fullScreen () {
|
||||
if (window.outerHeight === screen.availHeight) {
|
||||
if (window.outerWidth === screen.availWidth) {
|
||||
console.log(
|
||||
"全屏1",
|
||||
'全屏1',
|
||||
window.outerHeight,
|
||||
screen.availHeight,
|
||||
window.outerWidth,
|
||||
screen.availWidth
|
||||
);
|
||||
this.qp = false;
|
||||
)
|
||||
this.qp = false
|
||||
} else {
|
||||
console.log(
|
||||
"不是全屏2",
|
||||
'不是全屏2',
|
||||
window.outerHeight,
|
||||
screen.availHeight,
|
||||
window.outerWidth,
|
||||
screen.availWidth
|
||||
);
|
||||
this.qp = true;
|
||||
)
|
||||
this.qp = true
|
||||
}
|
||||
} else {
|
||||
console.log(
|
||||
"不是全屏3",
|
||||
'不是全屏3',
|
||||
window.outerHeight,
|
||||
screen.availHeight,
|
||||
window.outerWidth,
|
||||
screen.availWidth
|
||||
);
|
||||
this.qp = true;
|
||||
)
|
||||
this.qp = true
|
||||
}
|
||||
},
|
||||
// 点击关联应用按钮
|
||||
showRelateApplication (row) {
|
||||
this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
|
||||
if (res && res.data) {
|
||||
this.relateApplicationVisible = true;
|
||||
this.relateApplicationVisible = true
|
||||
this.relateInfo = {
|
||||
id: row.id,
|
||||
responseData: res.data,
|
||||
linkType: '2'
|
||||
};
|
||||
}
|
||||
}
|
||||
}).catch(() => { })
|
||||
},
|
||||
// 是否展示关联应用弹窗
|
||||
handleIsShowRelatePopup (type) {
|
||||
this.relateApplicationVisible = type;
|
||||
this.relateApplicationVisible = type
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-tooltip__popper {
|
||||
max-width: 50%;
|
||||
}
|
||||
::v-deep .el-table .cell{
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -84,7 +84,11 @@ export default {
|
|||
methods: {
|
||||
// 重置
|
||||
resetDataList () {
|
||||
this.dataForm = this.noDataForm
|
||||
this.dataForm = {
|
||||
orderId: '',
|
||||
status: '',
|
||||
userId: ''
|
||||
},
|
||||
this.page = 1 // 当前页码
|
||||
this.query()
|
||||
},
|
||||
|
|
|
@ -48,7 +48,7 @@
|
|||
</div>
|
||||
<div class='container-body8'>
|
||||
<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 class='container-body9'>
|
||||
<span style='font-size:18px;color;#000000;'>应用状态分布情况</span>
|
||||
|
@ -114,8 +114,9 @@ export default {
|
|||
getDistributedList () {
|
||||
this.$http.get('/census/center/v3/assemblerUseProjectInfo/' ,{
|
||||
params : {
|
||||
keyId:'1522550195034857476'
|
||||
// this.tableId
|
||||
id:
|
||||
// '1522550195034857476'
|
||||
this.tableId
|
||||
}
|
||||
}).then(res => {
|
||||
let arry=[]
|
||||
|
@ -147,8 +148,8 @@ export default {
|
|||
arry=res.data.data
|
||||
arry.forEach((item)=>{
|
||||
const single={
|
||||
value:item.useNum,
|
||||
name:item.name
|
||||
value:item.appNum,
|
||||
name:item.attr_value
|
||||
}
|
||||
this.data3.push(single.name)
|
||||
this.data4.push(single.value)
|
||||
|
@ -377,7 +378,7 @@ export default {
|
|||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
|
@ -599,7 +600,7 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
data: [5, 5, 5, 5, 5, 5],
|
||||
data: [1, 1, 1, 1, 1, 1],
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
stack: '1',
|
||||
|
@ -654,7 +655,7 @@ export default {
|
|||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
|
@ -725,7 +726,7 @@ export default {
|
|||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
|
@ -804,7 +805,7 @@ export default {
|
|||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
|
@ -822,9 +823,9 @@ export default {
|
|||
a: {
|
||||
// 设置文字、数学、英语这一列的样式
|
||||
width: 80,
|
||||
color: "#000000",
|
||||
color: "#666666",
|
||||
fontSize: 12,
|
||||
fontWeight: "bolder",
|
||||
// fontWeight: "bolder",
|
||||
},
|
||||
b: {
|
||||
// 设置10分、20分、30分这一列的样式
|
||||
|
@ -899,7 +900,7 @@ export default {
|
|||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
|
|
|
@ -200,7 +200,7 @@ export default {
|
|||
this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{
|
||||
params : {
|
||||
id:this.tableId,
|
||||
resourceType:"应用资源"
|
||||
resourceType:"组件服务"
|
||||
// pageNo: pageNo || 1,
|
||||
// pageSize: 20
|
||||
}
|
||||
|
@ -231,7 +231,7 @@ export default {
|
|||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
|
@ -295,7 +295,7 @@ export default {
|
|||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
|
@ -361,7 +361,7 @@ export default {
|
|||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
|
@ -377,9 +377,9 @@ export default {
|
|||
a: {
|
||||
// 设置文字、数学、英语这一列的样式
|
||||
width: 100,
|
||||
color: "#000000",
|
||||
color: "#666666",
|
||||
fontSize: 12,
|
||||
fontWeight: "bolder",
|
||||
// fontWeight: "bolder",
|
||||
},
|
||||
b: {
|
||||
// 设置10分、20分、30分这一列的样式
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
</div>
|
||||
<div class='container-body3'>
|
||||
<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 class='container-body4'>
|
||||
<div style='margin-bottom:30px'>
|
||||
|
@ -36,7 +36,7 @@
|
|||
</div>
|
||||
<div class='container-body5'>
|
||||
<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'>
|
||||
</div>
|
||||
<div v-for="(item,index) in applicationList" :key='index' >
|
||||
|
@ -174,9 +174,7 @@ export default {
|
|||
value:item.total,
|
||||
name:item.type
|
||||
}
|
||||
const newList=[]
|
||||
this.data3.push(single)
|
||||
// this.data2=newList
|
||||
this.myEcharts3()
|
||||
})
|
||||
})
|
||||
|
@ -231,7 +229,7 @@ export default {
|
|||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
|
@ -295,7 +293,7 @@ export default {
|
|||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
|
@ -361,13 +359,14 @@ export default {
|
|||
var total = 0;
|
||||
var tarValue;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
total += data[i].value;
|
||||
total += Number(data[i].value);
|
||||
if (data[i].name == name) {
|
||||
tarValue = data[i].value;
|
||||
}
|
||||
}
|
||||
var v = tarValue;
|
||||
// var v = tarValue;
|
||||
var p = Math.round(((tarValue / total) * 100));
|
||||
console.log('@@@@', tarValue, total)
|
||||
return `{a|${name}} {b|${p}%}`;
|
||||
},
|
||||
itemStyle:{},
|
||||
|
@ -428,7 +427,7 @@ export default {
|
|||
option && myChart.setOption(option);
|
||||
},
|
||||
backBtn(){
|
||||
this.$emit('closeChild')
|
||||
this.$emit('closeChild2')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -541,9 +540,13 @@ export default {
|
|||
position:absolute;
|
||||
display: flex;
|
||||
margin-left:90px;
|
||||
width:200px;
|
||||
margin-top:5px;
|
||||
color:#333333;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.count-style{
|
||||
position:absolute;
|
||||
|
|
|
@ -96,7 +96,7 @@
|
|||
min-width="100%">
|
||||
</el-table-column>
|
||||
<el-table-column v-if="this.departmentId===2"
|
||||
prop="resourceCarNum"
|
||||
prop="resourceCallNum"
|
||||
label="申请总数"
|
||||
min-width="100%">
|
||||
</el-table-column>
|
||||
|
@ -121,7 +121,7 @@
|
|||
</div>
|
||||
</el-card>
|
||||
</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>
|
||||
<application-resources v-if='resourcesIsShow' :tableId='tableId' :fatherId='fatherId' @closeApplication='closeApplication'></application-resources>
|
||||
</div>
|
||||
|
@ -362,10 +362,18 @@ export default {
|
|||
closeChild(){
|
||||
this.homeIsShow=true
|
||||
this.servicesIsShow=false
|
||||
this. handleCurrentChange(1)
|
||||
|
||||
},
|
||||
closeChild2(){
|
||||
this.homeIsShow=true
|
||||
this.UsedIsShow=false
|
||||
this. handleCurrentChange(1)
|
||||
},
|
||||
closeApplication(){
|
||||
this.homeIsShow=true
|
||||
this.resourcesIsShow=false
|
||||
this. handleCurrentChange(1)
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-29 15:59:51
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-01 09:29:57
|
||||
* @LastEditTime: 2022-07-04 16:17:22
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<!-- 流程业务表单 -->
|
||||
|
@ -157,6 +157,7 @@ export default {
|
|||
})
|
||||
},
|
||||
downloadFile2 (url) {
|
||||
console.log(window.SITE_CONFIG.previewUrl)
|
||||
window.open(
|
||||
window.SITE_CONFIG.previewUrl +
|
||||
'hisense_office/onlinePreview?url=' +
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "HiIRS",
|
||||
"name": "HiUCS",
|
||||
"version": "0.8.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
@ -38,6 +38,7 @@
|
|||
"pinyin-pro": "^3.8.3",
|
||||
"postprocessing": "^5.3.2",
|
||||
"remixicon": "^2.5.0",
|
||||
"swiper": "^8.2.6",
|
||||
"three": "^0.98.0",
|
||||
"three.meshline": "^1.1.0",
|
||||
"vue": "^3.1.4",
|
||||
|
@ -70,6 +71,7 @@
|
|||
"stylus": "^0.54.5",
|
||||
"stylus-loader": "^3.0.2",
|
||||
"svg-sprite-loader": "^6.0.9",
|
||||
"swiper": "^8.0.0",
|
||||
"vab-config": "0.0.8",
|
||||
"webpackbar": "^5.0.0-3"
|
||||
},
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-03-29 16:45:25
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-07-04 11:57:44
|
||||
* @LastEditTime: 2022-07-06 18:44:35
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
|
@ -28,10 +28,11 @@
|
|||
<!-- 站点配置 -->
|
||||
<script>
|
||||
window.SITE_CONFIG = {};
|
||||
window.SITE_CONFIG['backUrl'] = 'http://15.72.183.90:8001';
|
||||
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['apiURL'] = 'http://15.72.183.90:8000/renren-admin';
|
||||
// window.SITE_CONFIG['backUrl'] = 'http://15.72.183.90:8001';
|
||||
// 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['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['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['apiURL'] = 'http://10.134.135.9:8888/renren-admin';
|
||||
// 开发
|
||||
// window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
|
||||
// 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['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['backUrl'] = 'http://15.2.21.238:9797';
|
||||
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['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['backUrl'] = 'http://124.222.94.39:9797';
|
||||
// window.SITE_CONFIG['previewUrl'] = 'http://124.222.94.39:9796/';
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -2,12 +2,12 @@
|
|||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2020-07-07 16:03:23
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-07-04 11:56:58
|
||||
* @LastEditTime: 2022-07-06 18:44:54
|
||||
* @Description: 数据资源参数配置
|
||||
*/
|
||||
const newLocation = 'qingdao'
|
||||
//const newLocation = 'qingdao'
|
||||
// const newLocation = 'baotou'
|
||||
// const newLocation = 'xihaian'
|
||||
const newLocation = 'xihaian'
|
||||
|
||||
// 数据资源数据
|
||||
const whoShow = {}
|
||||
|
@ -61,12 +61,12 @@ if (newLocation === 'qingdao') {
|
|||
{
|
||||
name: '基础设施',
|
||||
key: 'lsjcss',
|
||||
num: '20135路',
|
||||
num: '20135个',
|
||||
},
|
||||
{
|
||||
name: '数据资源',
|
||||
key: 'lsjcss',
|
||||
num: '857条',
|
||||
num: '857项',
|
||||
},
|
||||
{
|
||||
name: '应用资源',
|
||||
|
@ -78,12 +78,12 @@ if (newLocation === 'qingdao') {
|
|||
{
|
||||
name: '基础设施',
|
||||
key: 'xhajcss',
|
||||
num: '35282路',
|
||||
num: '35282个',
|
||||
},
|
||||
{
|
||||
name: '数据资源',
|
||||
key: 'xhajcss',
|
||||
num: '11类',
|
||||
num: '11项',
|
||||
},
|
||||
{
|
||||
name: '应用资源',
|
||||
|
@ -162,7 +162,7 @@ else if (newLocation === 'xihaian') {
|
|||
footerDataList.footerList = {
|
||||
company: {
|
||||
left: '青岛西海岸新区大数据发展促进局建设',
|
||||
right: 'v0.81',
|
||||
right: 'v0.8.1.5',
|
||||
},
|
||||
address: [
|
||||
{
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2021-06-15 18:50:17
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-10 15:45:52
|
||||
* @LastEditTime: 2022-07-06 10:54:11
|
||||
* @Description: 告诉大家这是什么
|
||||
*/
|
||||
;(function (doc, win) {
|
||||
|
@ -19,6 +19,7 @@
|
|||
} */
|
||||
clientWidth > 1920 ? (clientWidth = 1920) : clientWidth
|
||||
docEl.style.fontSize = clientWidth / 19.2 + 'px'
|
||||
docEl.style.overflowY = 'auto'
|
||||
}
|
||||
if (!doc.addEventListener) return
|
||||
recalc()
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
@import '~@/vab/styles/vab.less';
|
||||
#vue-admin-beautiful{
|
||||
max-width: 1920px;
|
||||
max-height: 1080px;
|
||||
// max-height: 1080px;
|
||||
margin: auto;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
|
|
@ -199,7 +199,14 @@ export function updateVisits(params) {
|
|||
params,
|
||||
})
|
||||
}
|
||||
|
||||
// 保存浏览记录
|
||||
export function browsingInsert(data) {
|
||||
return request({
|
||||
url: '/resourceBrowse/insert',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
// 最新能力
|
||||
export function selectNewest(data) {
|
||||
return request({
|
||||
|
|
|
@ -215,3 +215,19 @@ export function selectResourceListByDept(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,
|
||||
})
|
||||
}
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 29 KiB |
|
@ -1,8 +1,8 @@
|
|||
/*
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-03-29 17:48:03
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-10 15:45:34
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-05 15:04:47
|
||||
* @Description: 告诉大家这是什么
|
||||
*/
|
||||
import { createApp } from 'vue'
|
||||
|
@ -45,3 +45,9 @@ app
|
|||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
router.beforeEach((to, from, next) => {
|
||||
// console.log('跳转路由=========>', to, from, next)
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.scrollTop = 0
|
||||
next()
|
||||
})
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.zhangfeihu
|
||||
* @Date: 2022-06-13 10:22:27
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-20 18:58:40
|
||||
* @LastEditTime: 2022-07-05 11:25:25
|
||||
* @Description: 赋能案例-详情页
|
||||
-->
|
||||
<template>
|
||||
|
@ -131,19 +131,16 @@
|
|||
tabName.value = '案例背景'
|
||||
selectOne(val).then((res) => {
|
||||
res.data.data.infoList.map((item, index) => {
|
||||
console.log('res.data.data.infoList', res.data.data.infoList)
|
||||
if (item.attrType == '图片') {
|
||||
res.data.data.infoList.splice(index, 1)
|
||||
}
|
||||
})
|
||||
res.data.data.infoList.map((item, index) => {
|
||||
console.log('res.data.data.infoList', res.data.data.infoList)
|
||||
if (item.attrType == '应用领域') {
|
||||
res.data.data.infoList.splice(index, 1)
|
||||
}
|
||||
})
|
||||
dataFrom.value = res.data.data
|
||||
console.log('dataFrom.value', dataFrom.value)
|
||||
})
|
||||
}
|
||||
//其他案例
|
||||
|
@ -165,84 +162,113 @@
|
|||
}
|
||||
})
|
||||
dataList.value = res.data.data.records
|
||||
console.log('dataList.value', dataList.value)
|
||||
})
|
||||
}
|
||||
//监听路由发生变化
|
||||
watch(
|
||||
() => router.currentRoute.value.query.id,
|
||||
() => {
|
||||
if (router.currentRoute.value.name == 'AssignCaseDetailPage') {
|
||||
init()
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
//tab点击事件
|
||||
const tabSwitch = (item, index) => {
|
||||
tabName.value = item.attrType
|
||||
if (index != 0 && index != 3) {
|
||||
let top =
|
||||
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)
|
||||
330 -
|
||||
60 * index
|
||||
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
|
||||
).offsetTop
|
||||
let view = document.getElementById(
|
||||
'assign-case-detail-page-content-left-border-id'
|
||||
)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
view.style.top = '220px'
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
init()
|
||||
// init()
|
||||
// console.clear()
|
||||
window.addEventListener('scroll', () => {
|
||||
domArr.value = document.querySelectorAll(
|
||||
'.assign-case-detail-page-content-center-card'
|
||||
)
|
||||
scrollTop.value =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
for (let i = 0; i < domArr.value.length; i++) {
|
||||
if (i === 0) {
|
||||
if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else if (i == domArr.value.length - 1) {
|
||||
if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
} else {
|
||||
let top = document.documentElement.scrollTop
|
||||
if (
|
||||
scrollTop.value >= domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value <= domArr.value[i + 1].offsetTop - 50
|
||||
top <
|
||||
100 +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card0'
|
||||
).offsetHeight -
|
||||
1
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
}
|
||||
tabName.value = '案例背景'
|
||||
} else if (
|
||||
top >=
|
||||
100 +
|
||||
document.querySelector(
|
||||
'#assign-case-detail-page-content-center-card0'
|
||||
).offsetHeight &&
|
||||
top <
|
||||
100 +
|
||||
document.querySelector(
|
||||
'#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-bottom: 5px;
|
||||
position: fixed;
|
||||
top: 4.9rem;
|
||||
top: 3.9rem;
|
||||
div {
|
||||
height: 0.3rem;
|
||||
padding-right: 0.7rem;
|
||||
|
|
|
@ -53,7 +53,10 @@
|
|||
v-for="(item, index) in contenBox"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item.note1 || ''" alt="" />
|
||||
<img
|
||||
:src="item.note1"
|
||||
alt=""
|
||||
/>
|
||||
<h3>{{ item.name }}</h3>
|
||||
<p>
|
||||
发布时间
|
||||
|
@ -315,7 +318,6 @@
|
|||
height: 20px;
|
||||
background: url(../../../assets/assignCase/left.png) no-repeat
|
||||
center;
|
||||
|
||||
margin-top: 30px;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
@ -343,6 +345,10 @@
|
|||
color: #333333;
|
||||
margin-right: 30px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: 30px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 0.16rem;
|
||||
}
|
||||
span:nth-of-type(8n) {
|
||||
margin-right: 50px;
|
||||
|
@ -376,9 +382,11 @@
|
|||
border-radius: 6px;
|
||||
box-shadow: 5px 5px 20px 0 #f2f3fb;
|
||||
img {
|
||||
// width: 370px;
|
||||
width: 355px;
|
||||
height: 200px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
object-position: 50% 20%;
|
||||
}
|
||||
h3 {
|
||||
margin: 30px 0 20px;
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-19 10:16:10
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-19 17:52:19
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-07-05 21:26:40
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
|
@ -44,6 +44,7 @@
|
|||
<div
|
||||
:class="{ select: select == '区市应用资源排名' }"
|
||||
@click="selectNav('区市应用资源排名')"
|
||||
v-if="!whoShow1.itShowXiHaiAn"
|
||||
>
|
||||
区市应用资源排名
|
||||
<i v-show="select == '区市应用资源排名'"></i>
|
||||
|
@ -67,6 +68,8 @@
|
|||
const num3 = ref(0)
|
||||
const select = ref('区市应用资源排名')
|
||||
let myChart = null
|
||||
// eslint-disable-next-line no-undef
|
||||
const whoShow1 = whoShow
|
||||
const selectNav = (val) => {
|
||||
select.value = val
|
||||
switch (val) {
|
||||
|
@ -259,6 +262,7 @@
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
echarts.init(document.getElementById('echarts-box2')).dispose()
|
||||
const chart = document.getElementById('echarts-box2')
|
||||
if (chart) {
|
||||
myChart = echarts.init(chart)
|
||||
|
@ -365,11 +369,12 @@
|
|||
position: relative;
|
||||
.nav {
|
||||
position: absolute;
|
||||
width: 7.5rem;
|
||||
z-index: 10;
|
||||
top: 0.3rem;
|
||||
left: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
padding: 0 1.5rem;
|
||||
& > div {
|
||||
cursor: pointer;
|
||||
|
|
|
@ -168,6 +168,7 @@
|
|||
}
|
||||
})
|
||||
} else {
|
||||
callTheTrendData.value.snum = ['0', '0', '0', '0', '0', '0', '0']
|
||||
callTheTrend(callTheTrendData.value)
|
||||
}
|
||||
} else {
|
||||
|
@ -202,6 +203,39 @@
|
|||
}
|
||||
})
|
||||
} 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)
|
||||
}
|
||||
}
|
||||
|
@ -253,6 +287,7 @@
|
|||
],
|
||||
yAxis: [
|
||||
{
|
||||
minInterval: 1,
|
||||
name: '个',
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-19 10:15:33
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-19 17:52:04
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-07-05 21:25:47
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
|
@ -134,7 +134,7 @@
|
|||
},
|
||||
grid: {
|
||||
top: '14%',
|
||||
left: '4%',
|
||||
left: '6%',
|
||||
right: '5%',
|
||||
bottom: '12%',
|
||||
containLabel: true,
|
||||
|
@ -172,6 +172,7 @@
|
|||
series: lineY,
|
||||
}
|
||||
onMounted(() => {
|
||||
echarts.init(document.getElementById('echarts-box')).dispose()
|
||||
trafficStatistics({
|
||||
startDate: dateList[0],
|
||||
endDate: dateList[dateList.length - 1],
|
||||
|
|
|
@ -1,13 +1,15 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-19 10:11:03
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-19 17:57:14
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-05 19:47:07
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
<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">
|
||||
<platform-overview></platform-overview>
|
||||
<application-resources></application-resources>
|
||||
|
@ -27,6 +29,11 @@
|
|||
import Infrastructure from '@/views/capabilityCloud/components/Infrastructure.vue'
|
||||
import DataResources from '@/views/capabilityCloud/components/DataResources.vue'
|
||||
import KnowledgeBase from '@/views/capabilityCloud/components/KnowledgeBase.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const goHome = () => {
|
||||
router.push('/home')
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
@font-face {
|
||||
|
|
|
@ -391,7 +391,7 @@
|
|||
}
|
||||
.line {
|
||||
margin-left: 10px;
|
||||
width: 140px;
|
||||
width: 280px;
|
||||
height: 1px;
|
||||
background: #999;
|
||||
}
|
||||
|
|
|
@ -16,21 +16,14 @@
|
|||
<template v-if="title.isConfigure">
|
||||
<div class="bottom">
|
||||
<div class="items" v-if="data[title.name].length > 0">
|
||||
<div
|
||||
class="item"
|
||||
v-for="(val, index) in data[title.name]"
|
||||
:key="'key1' + val.name + index"
|
||||
>
|
||||
<div class="item" v-for="(val, index) in data[title.name]" :key="'key1' + val.name + index">
|
||||
<p>
|
||||
<span>{{ title.name }}-{{ index + 1 }}</span>
|
||||
<span></span>
|
||||
</p>
|
||||
<p
|
||||
v-for="attr in props.configure.filter(
|
||||
<p v-for="attr in props.configure.filter(
|
||||
(item, index2) => item.name === title.name
|
||||
)[0].list"
|
||||
:key="'key2' + attr.name + index2"
|
||||
>
|
||||
)[0].list" :key="'key2' + attr.name + index2">
|
||||
<span>{{ attr.name }}</span>
|
||||
<span v-if="attr.type === 'image'">
|
||||
<a-image :width="85" :height="60" :src="val.img" />
|
||||
|
@ -44,51 +37,19 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="add">添加更多{{ title.name }}</div>
|
||||
<div
|
||||
class="form"
|
||||
v-for="(val, index) in props.configure.filter(
|
||||
<div class="form" v-for="(val, index) in props.configure.filter(
|
||||
(item) => item.name === title.name
|
||||
)[0].list"
|
||||
:key="'key3' + val.name + index"
|
||||
>
|
||||
)[0].list" :key="'key3' + val.name + index">
|
||||
<span>{{ val.name }}</span>
|
||||
<a-input
|
||||
v-model:value="val.note1"
|
||||
:maxlength="24"
|
||||
:placeholder="'请填写' + val.name + ',不超过24个字符'"
|
||||
v-if="val.type == 'input'"
|
||||
/>
|
||||
<a-textarea
|
||||
v-model:value="val.note1"
|
||||
:showCount="true"
|
||||
:maxlength="200"
|
||||
:placeholder="'请填写' + val.name"
|
||||
v-else-if="val.type == 'textArea'"
|
||||
/>
|
||||
<a-input-number
|
||||
v-model:value="val.note1"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
:step="0.01"
|
||||
string-mode
|
||||
:placeholder="'请填写' + val.name"
|
||||
v-else-if="val.type == 'number'"
|
||||
/>
|
||||
<a-radio-group
|
||||
v-model:value="val.note1"
|
||||
:options="val.options"
|
||||
v-else-if="val.type == 'radio'"
|
||||
/>
|
||||
<upload
|
||||
:key="showKey"
|
||||
type="图片"
|
||||
btnName="上传图片"
|
||||
:maxCount="1"
|
||||
:data="val"
|
||||
:list="[]"
|
||||
tip="支持图片类型,大小不超过100M"
|
||||
v-else-if="val.type == 'image'"
|
||||
></upload>
|
||||
<a-input v-model:value="val.note1" :maxlength="24" :placeholder="'请填写' + val.name + ',不超过24个字符'"
|
||||
v-if="val.type == 'input'" />
|
||||
<a-textarea v-model:value="val.note1" :showCount="true" :maxlength="200" :placeholder="'请填写' + val.name"
|
||||
v-else-if="val.type == 'textArea'" />
|
||||
<a-input-number v-model:value="val.note1" :min="0" :max="9999" :step="0.01" string-mode
|
||||
:placeholder="'请填写' + val.name" v-else-if="val.type == 'number'" />
|
||||
<a-radio-group v-model:value="val.note1" :options="val.options" v-else-if="val.type == 'radio'" />
|
||||
<upload :key="showKey" type="图片" btnName="上传图片" :maxCount="1" :data="val" :list="[]" tip="支持图片类型,大小不超过100M"
|
||||
v-else-if="val.type == 'image'"></upload>
|
||||
</div>
|
||||
<div class="submit">
|
||||
<a-button type="primary" @click="add(title.name)">提交</a-button>
|
||||
|
@ -99,110 +60,56 @@
|
|||
<div class="bottom">
|
||||
<div class="form" v-for="item in title.children" :key="item.id">
|
||||
<span>{{ item.name }}</span>
|
||||
<a-input
|
||||
v-if="item.type == 'input'"
|
||||
v-model:value="item.note1"
|
||||
:placeholder="'请输入' + item.name"
|
||||
/>
|
||||
<a-radio-group
|
||||
v-else-if="item.type == 'radio'"
|
||||
v-model:value="item.note1"
|
||||
:options="item.options"
|
||||
/>
|
||||
<a-input
|
||||
v-else-if="item.type == 'text'"
|
||||
v-model:value="item.note1"
|
||||
:placeholder="'请输入' + item.name"
|
||||
:disabled="true"
|
||||
/>
|
||||
<a-input
|
||||
v-else-if="item.type == 'text2'"
|
||||
v-model:value="item.note1"
|
||||
:placeholder="'请输入' + item.name"
|
||||
:disabled="true"
|
||||
/>
|
||||
<a-textarea
|
||||
v-else-if="item.type == 'textArea'"
|
||||
v-model:value="item.note1"
|
||||
:showCount="true"
|
||||
:maxlength="200"
|
||||
:placeholder="'请输入' + item.name"
|
||||
/>
|
||||
<upload
|
||||
v-else-if="item.type == 'image'"
|
||||
type="图片"
|
||||
btnName="上传图片"
|
||||
:maxCount="1"
|
||||
:data="item"
|
||||
:list="props.imgList"
|
||||
tip="支持图片类型,大小不超过100M"
|
||||
></upload>
|
||||
<upload
|
||||
v-else-if="item.type == 'file' && item.name !== '使用手册'"
|
||||
type="文件"
|
||||
btnName="上传附件"
|
||||
:maxCount="1"
|
||||
:data="item"
|
||||
:list="props.fileList"
|
||||
tip="支持文件类型,大小不超过100M"
|
||||
></upload>
|
||||
<upload
|
||||
v-else-if="item.name == '使用手册'"
|
||||
type="文件"
|
||||
btnName="上传附件"
|
||||
:maxCount="1"
|
||||
:data="item"
|
||||
:busType="2"
|
||||
:list="props.fileList2"
|
||||
tip="支持文件类型,大小不超过100M"
|
||||
></upload>
|
||||
<upload
|
||||
v-else-if="item.type == 'video'"
|
||||
type="视频"
|
||||
btnName="上传视频"
|
||||
:maxCount="1"
|
||||
:data="item"
|
||||
:list="props.videoList"
|
||||
tip="支持视频类型,大小不超过100M"
|
||||
></upload>
|
||||
<a-input v-if="item.type == 'input'" v-model:value="item.note1" :placeholder="'请输入' + item.name" />
|
||||
<a-radio-group v-else-if="item.type == 'radio'" v-model:value="item.note1" :options="item.options" />
|
||||
<a-input v-else-if="item.type == 'text'" v-model:value="item.note1" :placeholder="'请输入' + item.name"
|
||||
:disabled="true" />
|
||||
<a-input v-else-if="item.type == 'text2'" v-model:value="item.note1" :placeholder="'请输入' + item.name"
|
||||
:disabled="true" />
|
||||
<a-textarea v-else-if="item.type == 'textArea'" v-model:value="item.note1" :showCount="true"
|
||||
:maxlength="200" :placeholder="'请输入' + item.name" />
|
||||
<upload v-else-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1" :data="item"
|
||||
:list="props.imgList" tip="支持图片类型,大小不超过100M"></upload>
|
||||
<upload v-else-if="item.type == 'file' && item.name !== '使用手册'" type="文件" btnName="上传附件" :maxCount="1"
|
||||
:data="item" :list="props.fileList" tip="支持文件类型,大小不超过100M"></upload>
|
||||
<upload v-else-if="item.name == '使用手册'" type="文件" btnName="上传附件" :maxCount="1" :data="item" :busType="2"
|
||||
:list="props.fileList2" tip="支持文件类型,大小不超过100M"></upload>
|
||||
<upload v-else-if="item.type == 'video'" type="视频" btnName="上传视频" :maxCount="1" :data="item"
|
||||
:list="props.videoList" tip="支持视频类型,大小不超过100M"></upload>
|
||||
<a-button v-else-if="item.type == 'dialog'" @click="sourceClick">
|
||||
请选择来源应用
|
||||
</a-button>
|
||||
<a-select
|
||||
v-else-if="item.type == 'select'"
|
||||
style="width: 240px"
|
||||
v-model:value="item.note1"
|
||||
:placeholder="'请选择' + item.name"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(itemSelect, indexSelect) in item.options"
|
||||
:key="indexSelect"
|
||||
:value="itemSelect.dictLabel"
|
||||
>
|
||||
<a-button v-else-if="item.type == 'dialog2'" @click="componentsClick">
|
||||
请选择关联组件
|
||||
</a-button>
|
||||
<a-select v-else-if="item.type == 'select'" style="width: 240px" v-model:value="item.note1"
|
||||
:placeholder="'请选择' + item.name">
|
||||
<a-select-option v-for="(itemSelect, indexSelect) in item.options" :key="indexSelect"
|
||||
:value="itemSelect.dictLabel">
|
||||
{{ itemSelect.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<div
|
||||
v-else-if="item.type == 'checkBox'"
|
||||
class="application-Area"
|
||||
id="application-Area"
|
||||
:key="showKey"
|
||||
>
|
||||
<div
|
||||
v-for="(itemson, indexson) in item.options"
|
||||
:key="indexson"
|
||||
class="application-Area-son"
|
||||
@click="ApplicationArea(item, itemson)"
|
||||
:class="
|
||||
<div v-else-if="item.type == 'checkBox'" class="application-Area" id="application-Area" :key="showKey">
|
||||
<div v-for="(itemson, indexson) in item.options" :key="indexson" class="application-Area-son"
|
||||
@click="ApplicationArea(item, itemson)" :class="
|
||||
item.note2.indexOf(itemson.dictLabel) != -1
|
||||
? 'application-Area-down'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
">
|
||||
{{ itemson.dictLabel }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="AssociatedApplication">
|
||||
<a-modal v-model:visible="visibleAssociatedApplication" :title="titleName" @ok="handleOk"
|
||||
@cancel="handleCancel" style="width: 960px">
|
||||
<div>
|
||||
<a-transfer v-model:target-keys="targetKeys" v-model:selected-keys="selectedKeys"
|
||||
:data-source="mockData" :titles="titles" :render="(item) => item.title" @change="handleChange"
|
||||
@selectChange="handleSelectChange" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
@ -213,8 +120,13 @@
|
|||
import mybus from '@/myplugins/mybus'
|
||||
import upload from '@/views/components/upload'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { getCategoryTreePage } from '@/api/personalCenter'
|
||||
import {
|
||||
getCategoryTreePage,
|
||||
queryApplicationRelByResourceId,
|
||||
queryResourceRelByKeyId,
|
||||
} from '@/api/personalCenter'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const abilityToType = router.currentRoute.value.query.abilityToType
|
||||
const componentTypeValue = router.currentRoute.value.query.componentTypeValue
|
||||
|
@ -364,6 +276,7 @@
|
|||
})
|
||||
}
|
||||
const add = (title) => {
|
||||
console.log(title, 'title')
|
||||
let list = props.configure.filter((item) => item.name === title)[0].list
|
||||
let flag = true
|
||||
list.forEach((item) => {
|
||||
|
@ -415,7 +328,78 @@
|
|||
delFlag: 0,
|
||||
})
|
||||
}
|
||||
const sourceClick = () => {}
|
||||
// 来源应用
|
||||
const visibleAssociatedApplication = ref(false)
|
||||
const mockData = ref([])
|
||||
const titles = ref(['未关联的应用名称', '已关联的应用名称'])
|
||||
const titleName = ref('关联应用')
|
||||
|
||||
const sourceClick = () => {
|
||||
visibleAssociatedApplication.value = true
|
||||
queryApplicationRelByResourceId({
|
||||
referenceId: 0,
|
||||
}).then((res) => {
|
||||
// console.log(res.data.data.notLinked)
|
||||
res.data.data.notLinked.forEach((val, index) => {
|
||||
// console.log(val, index)
|
||||
mockData.value.push({
|
||||
key: val.id,
|
||||
title: val.name,
|
||||
description: val.id,
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
// 关联组件
|
||||
const componentsClick = () => {
|
||||
titles.value = ['未关联的组件名称', '已关联的组件名称']
|
||||
titleName.value = '关联组件'
|
||||
|
||||
visibleAssociatedApplication.value = true
|
||||
queryResourceRelByKeyId({
|
||||
keyId: 0,
|
||||
type: '组件服务',
|
||||
referenceName: '',
|
||||
}).then((res) => {
|
||||
// console.log(res.data.data.notLinked)
|
||||
res.data.data.notLinked.forEach((val, index) => {
|
||||
// console.log(val, index)
|
||||
mockData.value.push({
|
||||
key: val.id,
|
||||
title: val.name,
|
||||
description: val.id,
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
const targetKeys = ref([])
|
||||
const selectedKeys = ref([])
|
||||
|
||||
const handleChange = (nextTargetKeys, direction, moveKeys) => {
|
||||
console.log('targetKeys: ', nextTargetKeys)
|
||||
console.log('direction: ', direction)
|
||||
console.log('moveKeys: ', moveKeys)
|
||||
}
|
||||
|
||||
const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
|
||||
console.log('targetSelectedKeys: ', targetSelectedKeys)
|
||||
}
|
||||
|
||||
const handleOk = (e) => {
|
||||
console.log(e)
|
||||
visibleAssociatedApplication.value = false
|
||||
// console.log('2222222222222', props.refData)
|
||||
data.value.list.map((item) => {
|
||||
if (item.name === '来源应用' || item.name === '关联组件信息') {
|
||||
item.note1 = targetKeys.value + ''
|
||||
}
|
||||
})
|
||||
}
|
||||
const handleCancel = (e) => {
|
||||
console.log(e)
|
||||
visibleAssociatedApplication.value = false
|
||||
}
|
||||
|
||||
watch(data.value.list, (newProps, oldProps) => {
|
||||
// console.log(newProps, oldProps)
|
||||
newProps.forEach((val) => {
|
||||
|
@ -458,9 +442,11 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 50px 100px 25px;
|
||||
|
||||
&>div {
|
||||
width: 100%;
|
||||
margin-top: 60px;
|
||||
|
||||
.top {
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
|
@ -468,40 +454,50 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
|
||||
div:first-child,
|
||||
div:last-child {
|
||||
width: 245px;
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
div:nth-child(2) {
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 25px;
|
||||
|
||||
.items {
|
||||
background: #fafafa;
|
||||
padding: 10px;
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
span:nth-of-type(1) {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
span:nth-of-type(2) {
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
p:nth-of-type(1)>span:nth-of-type(1) {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.del {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.delImg {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
|
@ -510,36 +506,45 @@
|
|||
background: url(~@/assets/home/sf_del.png) no-repeat;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
div {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: #007efb;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
span:first-child {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-textarea) {
|
||||
width: 570px;
|
||||
}
|
||||
|
||||
:deep(.ant-radio-group) {
|
||||
width: 570px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-number) {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
resize: none;
|
||||
width: 570px;
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
width: 160px;
|
||||
height: 32px;
|
||||
|
@ -550,10 +555,12 @@
|
|||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.ant-btn {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
|
@ -566,15 +573,18 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>div:nth-of-type(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.application-Area {
|
||||
width: 570px;
|
||||
display: grid;
|
||||
margin-top: -5px;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
|
||||
.application-Area-son {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
|
@ -590,14 +600,73 @@
|
|||
margin-top: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.application-Area-down {
|
||||
background: #0087ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
:deep(.ant-modal) {
|
||||
width: 960px;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list) {
|
||||
width: 39.5%;
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-operation) {
|
||||
flex-direction: row-reverse;
|
||||
margin: 0 30px;
|
||||
}
|
||||
|
||||
:deep(.ant-btn) {
|
||||
width: 56px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-btn:first-child) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-footer) {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-header) {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-modal-title) {
|
||||
line-height: 24px;
|
||||
font-size: 18px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list-header) {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list-header-selected) {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list-header-title) {
|
||||
font-size: 16px;
|
||||
color: #303133;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -10,69 +10,34 @@
|
|||
<!-- 头部基本信息 -->
|
||||
<algorithm-top-details :dataList="dataList.data"></algorithm-top-details>
|
||||
<!-- 导航 -->
|
||||
<algorithm-navigation
|
||||
:dataList="dataList.data"
|
||||
:class="{ fixed: scrollTop >= 600 }"
|
||||
:selectNow="selectNow"
|
||||
></algorithm-navigation>
|
||||
<!-- 算法展示 视频 -->
|
||||
<algorithm-display
|
||||
:dataList="dataList.data"
|
||||
id="algorithm-display"
|
||||
class="scrollBox"
|
||||
></algorithm-display>
|
||||
<algorithm-navigation :dataList="dataList.data" :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow">
|
||||
</algorithm-navigation>
|
||||
<!-- 关联能力 -->
|
||||
<algorithm-associated-ability
|
||||
v-if="!loading"
|
||||
:associatedComponents="associatedComponents"
|
||||
id="algorithm-associated-ability"
|
||||
class="scrollBox"
|
||||
></algorithm-associated-ability>
|
||||
<algorithm-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
|
||||
id="algorithm-associated-ability" class="scrollBox"></algorithm-associated-ability>
|
||||
<!-- 算法展示 视频 -->
|
||||
<algorithm-display :dataList="dataList.data" id="algorithm-display" class="scrollBox"></algorithm-display>
|
||||
<!-- 算法优势 -->
|
||||
<algorithm-advantage
|
||||
:dataList="dataList.data"
|
||||
id="algorithm-advantage"
|
||||
class="scrollBox"
|
||||
></algorithm-advantage>
|
||||
<algorithm-advantage :dataList="dataList.data" id="algorithm-advantage" class="scrollBox"></algorithm-advantage>
|
||||
<!-- 应用场景和应用案例 -->
|
||||
<!-- <application-scenarios-and-case
|
||||
id="application-scenarios-and-case"
|
||||
class="scrollBox"
|
||||
></application-scenarios-and-case> -->
|
||||
<algorithm-application-scenarios
|
||||
:dataList="dataList.data"
|
||||
id="application-scenarios"
|
||||
class="scrollBox"
|
||||
></algorithm-application-scenarios>
|
||||
<algorithm-application-case
|
||||
:dataList="dataList.data"
|
||||
id="application-case"
|
||||
class="scrollBox"
|
||||
></algorithm-application-case>
|
||||
<algorithm-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
|
||||
</algorithm-application-scenarios>
|
||||
<algorithm-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
|
||||
</algorithm-application-case>
|
||||
<!-- 算法试用 -->
|
||||
<algorithm-on-trial
|
||||
:dataList="dataList.data"
|
||||
id="algorithm-on-trial"
|
||||
class="scrollBox"
|
||||
></algorithm-on-trial>
|
||||
<algorithm-on-trial :dataList="dataList.data" id="algorithm-on-trial" class="scrollBox"></algorithm-on-trial>
|
||||
<!-- 计费标准 -->
|
||||
<algorithm-charging-standard
|
||||
:dataList="dataList.data"
|
||||
id="charging-standard"
|
||||
class="scrollBox"
|
||||
></algorithm-charging-standard>
|
||||
<algorithm-charging-standard :dataList="dataList.data" id="charging-standard" class="scrollBox">
|
||||
</algorithm-charging-standard>
|
||||
<!-- 使用方式 -->
|
||||
<algorithm-usage-mode
|
||||
:dataList="dataList.data"
|
||||
id="usage-mode"
|
||||
class="scrollBox"
|
||||
></algorithm-usage-mode>
|
||||
<algorithm-usage-mode :dataList="dataList.data" id="usage-mode" class="scrollBox"></algorithm-usage-mode>
|
||||
<!-- 常见问题-->
|
||||
<algorithm-common-problem
|
||||
:dataList="dataList.data"
|
||||
id="common-problem"
|
||||
class="scrollBox"
|
||||
></algorithm-common-problem>
|
||||
<algorithm-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
|
||||
</algorithm-common-problem>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
@ -89,7 +54,12 @@
|
|||
import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId2,
|
||||
browsingInsert,
|
||||
} from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
|
@ -158,6 +128,12 @@
|
|||
)
|
||||
})
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
})
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
|
@ -185,6 +161,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed2>div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
|
|
|
@ -8,65 +8,35 @@
|
|||
<template>
|
||||
<div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
|
||||
<!-- 头部基本信息 -->
|
||||
<application-top-details
|
||||
:dataList="dataList.data"
|
||||
></application-top-details>
|
||||
<application-top-details :dataList="dataList.data"></application-top-details>
|
||||
<!-- 导航 -->
|
||||
<application-navigation
|
||||
:dataList="dataList.data"
|
||||
: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-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
|
||||
:class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></application-navigation>
|
||||
<!-- 关联能力 -->
|
||||
<application-associated-ability
|
||||
:associatedComponents="associatedComponentsFunction()"
|
||||
id="application-associated-ability"
|
||||
class="scrollBox"
|
||||
></application-associated-ability>
|
||||
<application-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
|
||||
id="application-associated-ability" class="scrollBox"></application-associated-ability>
|
||||
<!-- 应用展示 视频 -->
|
||||
<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-function-intorduction
|
||||
:dataList="dataList.data"
|
||||
id="function-introduction"
|
||||
class="scrollBox"
|
||||
></application-function-intorduction>
|
||||
<application-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
|
||||
</application-function-intorduction>
|
||||
<!-- 使用能力 -->
|
||||
<application-ability-toise
|
||||
:dataList="dataList.data"
|
||||
id="ability-to-use"
|
||||
class="scrollBox"
|
||||
></application-ability-toise>
|
||||
<application-ability-toise :dataList="dataList.data" id="ability-to-use" class="scrollBox">
|
||||
</application-ability-toise>
|
||||
<!-- 部署与安全-->
|
||||
<application-deployment-and-security
|
||||
:dataList="dataList.data"
|
||||
id="deployment-and-security"
|
||||
class="scrollBox"
|
||||
></application-deployment-and-security>
|
||||
<application-deployment-and-security :dataList="dataList.data" id="deployment-and-security" class="scrollBox">
|
||||
</application-deployment-and-security>
|
||||
<!-- 归属部门与服务商-->
|
||||
<application-owning-department-and-service-provider
|
||||
:dataList="dataList.data"
|
||||
id="department-and-service-provider"
|
||||
class="scrollBox"
|
||||
></application-owning-department-and-service-provider>
|
||||
<application-owning-department-and-service-provider :dataList="dataList.data" id="department-and-service-provider"
|
||||
class="scrollBox"></application-owning-department-and-service-provider>
|
||||
<!-- 常见问题-->
|
||||
<application-common-problem
|
||||
:dataList="dataList.data"
|
||||
id="common-problem"
|
||||
class="scrollBox"
|
||||
></application-common-problem>
|
||||
<application-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
|
||||
</application-common-problem>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
@ -82,13 +52,15 @@
|
|||
import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId,
|
||||
browsingInsert,
|
||||
} from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const associatedComponents = ref([
|
||||
{ type: '组件服务', dataList: [] },
|
||||
{ type: '数据资源', dataList: [] },
|
||||
{ type: '基础设施', dataList: [] },
|
||||
])
|
||||
const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
|
@ -157,6 +129,12 @@
|
|||
)
|
||||
})
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
})
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
|
@ -164,7 +142,8 @@
|
|||
type: item.type,
|
||||
}
|
||||
queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[index].dataList = res.data.data
|
||||
associatedComponents.value[0].dataList = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
} else if (obj) {
|
||||
|
@ -193,6 +172,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed2>div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
|
|
|
@ -10,54 +10,27 @@
|
|||
<!-- 头部基本信息 -->
|
||||
<business-top-details :dataList="dataList.data"></business-top-details>
|
||||
<!-- 导航 -->
|
||||
<business-navigation
|
||||
:dataList="dataList.data"
|
||||
:associatedComponents="associatedComponents"
|
||||
:class="{ fixed: scrollTop >= 600 }"
|
||||
:selectNow="selectNow"
|
||||
></business-navigation>
|
||||
<business-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
|
||||
:class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></business-navigation>
|
||||
<!-- 关联能力 -->
|
||||
<business-associated-ability
|
||||
:associatedComponents="associatedComponents"
|
||||
id="business-associated-ability"
|
||||
class="scrollBox"
|
||||
></business-associated-ability>
|
||||
<business-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
|
||||
id="business-associated-ability" class="scrollBox"></business-associated-ability>
|
||||
<!-- 组件展示 -->
|
||||
<business-presentation
|
||||
:dataList="dataList.data"
|
||||
id="business-presentation"
|
||||
class="scrollBox"
|
||||
></business-presentation>
|
||||
<business-presentation :dataList="dataList.data" id="business-presentation" class="scrollBox">
|
||||
</business-presentation>
|
||||
<!-- 功能介绍-->
|
||||
<business-function-intorduction
|
||||
:dataList="dataList.data"
|
||||
id="function-introduction"
|
||||
class="scrollBox"
|
||||
></business-function-intorduction>
|
||||
<business-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
|
||||
</business-function-intorduction>
|
||||
<!-- 应用场景 -->
|
||||
<business-application-scenarios
|
||||
:dataList="dataList.data"
|
||||
id="application-scenarios"
|
||||
class="scrollBox"
|
||||
></business-application-scenarios>
|
||||
<business-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
|
||||
</business-application-scenarios>
|
||||
<!-- 应用案例 -->
|
||||
<business-application-case
|
||||
:dataList="dataList.data"
|
||||
id="application-case"
|
||||
class="scrollBox"
|
||||
></business-application-case>
|
||||
<business-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
|
||||
</business-application-case>
|
||||
<!-- 使用方式 -->
|
||||
<business-usage-mode
|
||||
:dataList="dataList.data"
|
||||
id="business-usage-mode"
|
||||
class="scrollBox"
|
||||
></business-usage-mode>
|
||||
<business-usage-mode :dataList="dataList.data" id="business-usage-mode" class="scrollBox"></business-usage-mode>
|
||||
<!-- 常见问题-->
|
||||
<business-common-problem
|
||||
:dataList="dataList.data"
|
||||
id="common-problem"
|
||||
class="scrollBox"
|
||||
></business-common-problem>
|
||||
<business-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox"></business-common-problem>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
@ -72,7 +45,12 @@
|
|||
import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId2,
|
||||
browsingInsert,
|
||||
} from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
|
@ -82,6 +60,7 @@
|
|||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
document.documentElement.style.transition = 'all 0.3s ease'
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.style.transition = 'all 0.3s ease'
|
||||
|
@ -139,6 +118,12 @@
|
|||
)
|
||||
})
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
})
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
|
@ -146,6 +131,7 @@
|
|||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[index].dataList = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
} else if (obj) {
|
||||
|
@ -165,6 +151,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed2>div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
|
|
|
@ -10,60 +10,31 @@
|
|||
<!-- 头部基本信息 -->
|
||||
<developer-top-details :dataList="dataList.data"></developer-top-details>
|
||||
<!-- 导航 -->
|
||||
<developer-navigation
|
||||
:dataList="dataList.data"
|
||||
:associatedComponents="associatedComponents"
|
||||
:class="{ fixed: scrollTop >= 600 }"
|
||||
:selectNow="selectNow"
|
||||
></developer-navigation>
|
||||
<!-- 组件展示 视频 -->
|
||||
<Developer-presentation
|
||||
:dataList="dataList.data"
|
||||
id="eveloper-presentation"
|
||||
class="scrollBox"
|
||||
></Developer-presentation>
|
||||
<developer-navigation :dataList="dataList.data" :associatedComponents="associatedComponentsFunction()"
|
||||
:class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></developer-navigation>
|
||||
<!-- 关联能力 -->
|
||||
<developer-associated-ability
|
||||
:associatedComponents="associatedComponents"
|
||||
id="developer-associated-ability"
|
||||
class="scrollBox"
|
||||
></developer-associated-ability>
|
||||
<developer-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
|
||||
id="developer-associated-ability" class="scrollBox"></developer-associated-ability>
|
||||
<!-- 组件展示 视频 -->
|
||||
<Developer-presentation :dataList="dataList.data" id="eveloper-presentation" class="scrollBox">
|
||||
</Developer-presentation>
|
||||
<!-- 功能介绍-->
|
||||
<developer-function-intorduction
|
||||
:dataList="dataList.data"
|
||||
id="function-introduction"
|
||||
class="scrollBox"
|
||||
></developer-function-intorduction>
|
||||
<developer-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
|
||||
</developer-function-intorduction>
|
||||
<!-- 应用场景 -->
|
||||
<developer-application-scenarios
|
||||
:dataList="dataList.data"
|
||||
id="application-scenarios"
|
||||
class="scrollBox"
|
||||
></developer-application-scenarios>
|
||||
<developer-application-scenarios :dataList="dataList.data" id="application-scenarios" class="scrollBox">
|
||||
</developer-application-scenarios>
|
||||
<!-- 应用案例 -->
|
||||
<developer-application-case
|
||||
:dataList="dataList.data"
|
||||
id="application-case"
|
||||
class="scrollBox"
|
||||
></developer-application-case>
|
||||
<developer-application-case :dataList="dataList.data" id="application-case" class="scrollBox">
|
||||
</developer-application-case>
|
||||
<!-- 组件试用 -->
|
||||
<developer-trial
|
||||
:dataList="dataList.data"
|
||||
id="developer-trial"
|
||||
class="scrollBox"
|
||||
></developer-trial>
|
||||
<developer-trial :dataList="dataList.data" id="developer-trial" class="scrollBox"></developer-trial>
|
||||
<!-- 归属部门与服务商-->
|
||||
<developer-owning-department-and-service-provider
|
||||
:dataList="dataList.data"
|
||||
id="department-and-service-provider"
|
||||
class="scrollBox"
|
||||
></developer-owning-department-and-service-provider>
|
||||
<developer-owning-department-and-service-provider :dataList="dataList.data" id="department-and-service-provider"
|
||||
class="scrollBox"></developer-owning-department-and-service-provider>
|
||||
<!-- 常见问题-->
|
||||
<developer-common-problem
|
||||
:dataList="dataList.data"
|
||||
id="common-problem"
|
||||
class="scrollBox"
|
||||
></developer-common-problem>
|
||||
<developer-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
|
||||
</developer-common-problem>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
@ -79,7 +50,12 @@
|
|||
import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId2,
|
||||
browsingInsert,
|
||||
} from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
|
@ -89,6 +65,7 @@
|
|||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
document.documentElement.style.transition = 'all 0.3s ease'
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.style.transition = 'all 0.3s ease'
|
||||
|
@ -125,9 +102,15 @@
|
|||
}
|
||||
})
|
||||
})
|
||||
|
||||
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
|
||||
|
@ -146,21 +129,25 @@
|
|||
)
|
||||
})
|
||||
}
|
||||
})
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
keyId: id,
|
||||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[index].dataList = res.data.data
|
||||
// 浏览记录
|
||||
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')
|
||||
})
|
||||
|
@ -172,6 +159,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed2>div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
|
|
|
@ -8,64 +8,33 @@
|
|||
<template>
|
||||
<div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
|
||||
<!-- 头部基本信息 -->
|
||||
<layer-service-top-details
|
||||
:dataList="dataList.data"
|
||||
></layer-service-top-details>
|
||||
<layer-service-top-details :dataList="dataList.data"></layer-service-top-details>
|
||||
<!-- 导航 -->
|
||||
<layer-service-navigation
|
||||
:dataList="dataList.data"
|
||||
:associatedComponents="associatedComponents"
|
||||
:class="{ fixed: scrollTop >= 600 }"
|
||||
:selectNow="selectNow"
|
||||
></layer-service-navigation>
|
||||
<layer-service-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
|
||||
:class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></layer-service-navigation>
|
||||
<!-- 关联能力 -->
|
||||
<layer-service-associated-ability
|
||||
:associatedComponents="associatedComponents"
|
||||
id="layer-service-associated-ability"
|
||||
class="scrollBox"
|
||||
></layer-service-associated-ability>
|
||||
<layer-service-associated-ability :associatedComponents="associatedComponents" id="layer-service-associated-ability"
|
||||
class="scrollBox" v-if="!loading"></layer-service-associated-ability>
|
||||
<!-- 图层展示 视频 -->
|
||||
<layer-service-presentation
|
||||
:dataList="dataList.data"
|
||||
id="service-presentation"
|
||||
class="scrollBox"
|
||||
></layer-service-presentation>
|
||||
<layer-service-presentation :dataList="dataList.data" id="service-presentation" class="scrollBox">
|
||||
</layer-service-presentation>
|
||||
<!-- 图层信息-->
|
||||
<layer-service-information
|
||||
:dataList="dataList.data"
|
||||
id="service-information"
|
||||
class="scrollBox"
|
||||
></layer-service-information>
|
||||
<layer-service-information :dataList="dataList.data" id="service-information" class="scrollBox">
|
||||
</layer-service-information>
|
||||
<!-- 应用场景 -->
|
||||
<layer-service-application-scenarios
|
||||
:dataList="dataList.data"
|
||||
id="service-application-scenarios"
|
||||
class="scrollBox"
|
||||
></layer-service-application-scenarios>
|
||||
<layer-service-application-scenarios :dataList="dataList.data" id="service-application-scenarios" class="scrollBox">
|
||||
</layer-service-application-scenarios>
|
||||
<!-- 应用案例 -->
|
||||
<layer-service-application-case
|
||||
:dataList="dataList.data"
|
||||
id="service-application-case"
|
||||
class="scrollBox"
|
||||
></layer-service-application-case>
|
||||
<layer-service-application-case :dataList="dataList.data" id="service-application-case" class="scrollBox">
|
||||
</layer-service-application-case>
|
||||
<!-- 图层预览 -->
|
||||
<layer-service-preview
|
||||
:dataList="dataList.data"
|
||||
id="service-preview"
|
||||
class="scrollBox"
|
||||
></layer-service-preview>
|
||||
<layer-service-preview :dataList="dataList.data" id="service-preview" class="scrollBox"></layer-service-preview>
|
||||
<!-- 使用方式-->
|
||||
<layer-service-usage-mode
|
||||
:dataList="dataList.data"
|
||||
id="service-usage-mode"
|
||||
class="scrollBox"
|
||||
></layer-service-usage-mode>
|
||||
<layer-service-usage-mode :dataList="dataList.data" id="service-usage-mode" class="scrollBox">
|
||||
</layer-service-usage-mode>
|
||||
<!-- 常见问题-->
|
||||
<layer-service-common-problem
|
||||
:dataList="dataList.data"
|
||||
id="service-common-problem"
|
||||
class="scrollBox"
|
||||
></layer-service-common-problem>
|
||||
<layer-service-common-problem :dataList="dataList.data" id="service-common-problem" class="scrollBox">
|
||||
</layer-service-common-problem>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
@ -81,7 +50,12 @@
|
|||
import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
|
||||
import {
|
||||
updateVisits,
|
||||
selectOne,
|
||||
queryPartAppByKeyId2,
|
||||
browsingInsert,
|
||||
} from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
|
@ -91,6 +65,7 @@
|
|||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
|
||||
let loading = ref(true)
|
||||
document.documentElement.style.transition = 'all 0.3s ease'
|
||||
document.documentElement.scrollTop = 0
|
||||
document.body.style.transition = 'all 0.3s ease'
|
||||
|
@ -148,6 +123,12 @@
|
|||
)
|
||||
})
|
||||
}
|
||||
// 浏览记录
|
||||
browsingInsert({
|
||||
resourceId: res.data.data.id,
|
||||
}).then(() => {
|
||||
console.log('浏览记录+1')
|
||||
})
|
||||
})
|
||||
associatedComponents.value.map((item, index) => {
|
||||
let queryPartAppByKeyIdParams = {
|
||||
|
@ -155,6 +136,7 @@
|
|||
}
|
||||
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
|
||||
associatedComponents.value[index].dataList = res.data.data
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
} else if (obj) {
|
||||
|
@ -174,6 +156,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed2>div:nth-of-type(3) {
|
||||
margin-top: 0.84rem;
|
||||
}
|
||||
|
|
|
@ -1,30 +1,79 @@
|
|||
<template>
|
||||
<div class="application-associated-ability" v-if="flag">
|
||||
<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
|
||||
class="associated-ability-card"
|
||||
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
|
||||
:key="dataListitem.id"
|
||||
@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>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
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 modules = ref([Pagination])
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||
const props = defineProps({
|
||||
associatedComponents: { type: Array, default: null },
|
||||
|
@ -78,7 +127,7 @@
|
|||
<style lang="less" scoped>
|
||||
.application-associated-ability {
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
padding-bottom: 0.6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
@ -86,20 +135,31 @@
|
|||
margin-top: 0.4rem;
|
||||
width: 13.3rem;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-content: space-around !important;
|
||||
:deep(.swiper) {
|
||||
padding-bottom: 0.6rem;
|
||||
}
|
||||
.associated-ability-card {
|
||||
width: 3.2rem;
|
||||
height: 2.78rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 1px solid #e4e6f5;
|
||||
border-radius: 0.1rem;
|
||||
padding-bottom: 0.3rem;
|
||||
margin-right: 0.2rem;
|
||||
margin-top: 0.2rem;
|
||||
cursor: pointer;
|
||||
.associated-ability-card-title {
|
||||
width: 2.2rem;
|
||||
padding-top: 0.3rem;
|
||||
font-size: 0.22rem;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.associated-ability-card-content {
|
||||
width: 100%;
|
||||
|
@ -111,6 +171,10 @@
|
|||
margin-right: 0.15rem;
|
||||
margin-top: 0.15rem;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 14:54:01
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-30 17:09:40
|
||||
* @LastEditTime: 2022-07-05 19:38:06
|
||||
* @Description: 算法详情页导航
|
||||
-->
|
||||
<template>
|
||||
|
@ -65,6 +65,7 @@
|
|||
])
|
||||
const list = ref([])
|
||||
// 根据能力id查询是否存在关联应用
|
||||
if (keyId) {
|
||||
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
|
||||
console.log('ressssssss', res)
|
||||
if (res.data.data.length > 0) {
|
||||
|
@ -78,12 +79,13 @@
|
|||
console.log('navList', navList)
|
||||
}
|
||||
})
|
||||
}
|
||||
const props = defineProps({
|
||||
selectNow: { type: String, default: '' },
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
|
||||
const select = ref('algorithm-display')
|
||||
const select = ref('algorithm-associated-ability')
|
||||
|
||||
const selectNav = (key) => {
|
||||
select.value = key
|
||||
|
@ -101,7 +103,7 @@
|
|||
list.value.push(item.attrType)
|
||||
} else if (item.attrType === '算法介绍视频') {
|
||||
list.value.push('算法展示')
|
||||
} else if (item.attrType === '试用地址') {
|
||||
} else if (item.attrType === '试用地址' && item.attrValue) {
|
||||
list.value.push('算法试用')
|
||||
} else if (item.attrType === '计费标准信息') {
|
||||
list.value.push('计费标准')
|
||||
|
@ -126,7 +128,7 @@
|
|||
)
|
||||
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
|
||||
select.value = navList.value.filter(
|
||||
(item) => item.name === list.value[0]
|
||||
(item) => (item.name === '关联应用') | (item.name === list.value[0])
|
||||
)[0].key
|
||||
}
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
|
@ -152,7 +154,7 @@
|
|||
list.value.push(item.attrType)
|
||||
} else if (item.attrType === '算法介绍视频') {
|
||||
list.value.push('算法展示')
|
||||
} else if (item.attrType === '试用地址') {
|
||||
} else if (item.attrType === '试用地址' && item.attrValue) {
|
||||
list.value.push('算法试用')
|
||||
} else if (item.attrType === '计费标准信息') {
|
||||
list.value.push('计费标准')
|
||||
|
@ -165,7 +167,7 @@
|
|||
list.value.push('使用方式')
|
||||
}
|
||||
})
|
||||
list.value.push('关联应用')
|
||||
list.value.unshift('关联应用')
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
if (list.value.indexOf(item.name) > -1) {
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-09 09:29:29
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-13 15:21:26
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-07-05 20:25:49
|
||||
* @Description: 算法详情 算法试用
|
||||
-->
|
||||
<template>
|
||||
|
@ -25,7 +25,7 @@
|
|||
const onTrial = ref('')
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '试用地址'
|
||||
(item) => item.attrType === '试用地址' && item.attrValue
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
|
@ -37,7 +37,7 @@
|
|||
() => props.dataList,
|
||||
(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) {
|
||||
flag.value = false
|
||||
} else {
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 11:56:28
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-01 14:16:18
|
||||
* @LastEditTime: 2022-07-05 11:41:52
|
||||
* @Description: 算法详情页头部
|
||||
-->
|
||||
<template>
|
||||
|
@ -96,6 +96,7 @@
|
|||
resourceName: props.dataList.name,
|
||||
time: props.dataList.createDate,
|
||||
type: props.dataList.type,
|
||||
componentType: '智能算法',
|
||||
},
|
||||
],
|
||||
deptId: props.dataList.deptId,
|
||||
|
|
|
@ -17,7 +17,10 @@
|
|||
<div class="content-left-content">
|
||||
<p>
|
||||
<span>{{ item.link.name }}</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.link.value }}</template>
|
||||
<span>{{ item.link.value }}</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
<p>
|
||||
<span>{{ item.postMethod.name }}</span>
|
||||
|
@ -72,7 +75,7 @@
|
|||
title: '技术对接',
|
||||
titleSon: '调用接口',
|
||||
link: {
|
||||
name: '接口地址:',
|
||||
name: '服务接口:',
|
||||
value: '',
|
||||
},
|
||||
postMethod: {
|
||||
|
@ -225,10 +228,9 @@
|
|||
color: rgba(33, 41, 86, 0.8);
|
||||
line-height: 20px;
|
||||
p {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
@ -283,13 +285,16 @@
|
|||
p {
|
||||
// width: 160px;
|
||||
height: 20px;
|
||||
display: -webkit-box;
|
||||
// overflow: hidden;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-right: 15px;
|
||||
span {
|
||||
display: inline-block;
|
||||
max-width: 1.2rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -6,11 +6,7 @@
|
|||
<div>
|
||||
<div class="title">图片识别</div>
|
||||
<div class="box">
|
||||
<a-image
|
||||
:width="510"
|
||||
:height="340"
|
||||
:src="responseUrl"
|
||||
/>
|
||||
<a-image :width="510" :height="340" :src="responseUrl" />
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
name="file"
|
||||
|
@ -88,7 +84,6 @@
|
|||
const menuOpenKeys2 = ref(['全文还原'])
|
||||
let responseUrl = ref('static/image/test.jpg')
|
||||
const handleChange = (info) => {
|
||||
debugger;
|
||||
if (info.file.status !== 'uploading') {
|
||||
console.log(info.file, info.fileList)
|
||||
}
|
||||
|
|
|
@ -1,82 +1,121 @@
|
|||
<template>
|
||||
<div class="application-associated-ability" v-if="flag">
|
||||
<detals-title title="关联组件" type="RELEVANCE"></detals-title>
|
||||
<div class="application-associated-ability-main">
|
||||
<detals-title title="关联组件" type="ASSOCIATED"></detals-title>
|
||||
<div
|
||||
class="application-associated-ability-main"
|
||||
v-if="dataFrom[0].dataList.length < 4"
|
||||
>
|
||||
<div
|
||||
class="associated-ability-card"
|
||||
v-for="(item, index) in dataFrom"
|
||||
:key="item.type"
|
||||
>
|
||||
<div class="associated-ability-card-title">
|
||||
{{ item.type }}
|
||||
</div>
|
||||
<div class="associated-ability-card-content">
|
||||
<div
|
||||
class="associated-ability-card-content-font"
|
||||
v-for="(dataListitem, dataListindex) in item.dataList"
|
||||
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
|
||||
:key="dataListitem.id"
|
||||
@click="switchFunction(dataListitem.id)"
|
||||
:class="cardFunction(dataFrom[0].dataList)"
|
||||
>
|
||||
<span>{{ dataListindex + 1 }}、</span>
|
||||
<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>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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'
|
||||
const router = useRouter()
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||
const props = defineProps({
|
||||
associatedComponents: { type: Array, default: null },
|
||||
})
|
||||
const modules = ref([Pagination])
|
||||
const dataFrom = ref([])
|
||||
const flag = ref(true)
|
||||
const oldid = router.currentRoute.value.query.id
|
||||
//点击查看详情
|
||||
const switchFunction = (id) => {
|
||||
router.push({
|
||||
path: '/details',
|
||||
query: {
|
||||
id: id,
|
||||
},
|
||||
})
|
||||
// router.push({
|
||||
// path: '/details',
|
||||
// query: {
|
||||
// id: id,
|
||||
// },
|
||||
// })
|
||||
window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
|
||||
// alert(id)
|
||||
}
|
||||
if (props.associatedComponents) {
|
||||
if (
|
||||
props.associatedComponents[0].dataList.length > 0 ||
|
||||
props.associatedComponents[1].dataList.length > 0 ||
|
||||
props.associatedComponents[2].dataList.length > 0
|
||||
) {
|
||||
if (props.associatedComponents[0].dataList.length != 0) {
|
||||
console.log('这个是空值', props.associatedComponents)
|
||||
flag.value = true
|
||||
dataFrom.value = props.associatedComponents
|
||||
console.log('dataFrom.value', dataFrom.value)
|
||||
} else {
|
||||
flag.value = false
|
||||
}
|
||||
} else {
|
||||
flag.value = false
|
||||
//根据数据多少决定对齐方式
|
||||
const cardFunction = (item) => {
|
||||
if (item.length < 5) {
|
||||
return 'card-function-class'
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.associatedComponents,
|
||||
(val) => {
|
||||
if (props.associatedComponents) {
|
||||
if (
|
||||
val[0].dataList.length > 0 ||
|
||||
val[1].dataList.length > 0 ||
|
||||
val[2].dataList.length > 0
|
||||
) {
|
||||
if (val[0].length != 0) {
|
||||
flag.value = true
|
||||
dataFrom.value = props.associatedComponents
|
||||
// console.log('dataFrom.value', dataFrom.value)
|
||||
} else {
|
||||
flag.value = false
|
||||
}
|
||||
console.log('dataFrom.value', dataFrom.value)
|
||||
} else {
|
||||
flag.value = false
|
||||
}
|
||||
|
@ -96,28 +135,47 @@
|
|||
<style lang="less" scoped>
|
||||
.application-associated-ability {
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
padding-bottom: 0.6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.application-associated-ability-main {
|
||||
margin-top: 0.4rem;
|
||||
width: 13.14rem;
|
||||
width: 13.3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
:deep(.swiper) {
|
||||
padding-bottom: 0.6rem;
|
||||
}
|
||||
.associated-ability-card {
|
||||
width: 4.28rem;
|
||||
width: 3.2rem;
|
||||
height: 2.78rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 1px solid #e4e6f5;
|
||||
border-radius: 0.1rem;
|
||||
padding-bottom: 0.3rem;
|
||||
margin-right: 0.2rem;
|
||||
margin-top: 0.2rem;
|
||||
padding-top: 0.3rem;
|
||||
cursor: pointer;
|
||||
.icon {
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
background: url('~@/assets/detailsAll/sf_icon1.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.associated-ability-card-title {
|
||||
width: 2.2rem;
|
||||
padding-top: 0.3rem;
|
||||
font-size: 0.22rem;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.associated-ability-card-content {
|
||||
width: 100%;
|
||||
|
@ -128,12 +186,18 @@
|
|||
color: #999;
|
||||
margin-right: 0.15rem;
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
.associated-ability-card-content-font:hover {
|
||||
color: #0058e1;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-function-class {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.associated-ability-card:hover {
|
||||
border-radius: 0.02rem;
|
||||
border: 0.01rem solid #0058e1;
|
||||
|
|
|
@ -71,33 +71,39 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 80px;
|
||||
padding-top: 160px;
|
||||
background: #f7f8fa;
|
||||
|
||||
.content {
|
||||
width: 1300px;
|
||||
margin: 20px 0px;
|
||||
background: #ffffff;
|
||||
padding: 40px;
|
||||
|
||||
.content-son {
|
||||
font-size: 20px;
|
||||
margin-bottom: 60px;
|
||||
|
||||
.content-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.content-bottom {
|
||||
display: flex;
|
||||
line-height: 34px;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.content-top,
|
||||
.content-bottom {
|
||||
div:last-child {
|
||||
width: calc(100% - 54px);
|
||||
}
|
||||
}
|
||||
|
||||
.top-img {
|
||||
width: 34px;
|
||||
height: 30px;
|
||||
|
@ -106,6 +112,7 @@
|
|||
background-size: cover;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.bottom-img {
|
||||
width: 34px;
|
||||
height: 30px;
|
||||
|
@ -115,6 +122,7 @@
|
|||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-son:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
|
|
@ -2,17 +2,10 @@
|
|||
<template>
|
||||
<div class="application-deployment-and-security">
|
||||
<div class="title">
|
||||
<DetalsTitle
|
||||
:title="dataFrom.title"
|
||||
:type="dataFrom.englishTitle"
|
||||
></DetalsTitle>
|
||||
<DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div
|
||||
v-for="(item, index) in dataFrom.content"
|
||||
:key="index"
|
||||
class="content-card"
|
||||
>
|
||||
<div v-for="(item, index) in dataFrom.content" :key="index" class="content-card">
|
||||
<div class="card-title">{{ item.childrenTitle }}</div>
|
||||
<div class="card-content">
|
||||
<div v-for="carditem in item.childrenContent" :key="carditem">
|
||||
|
@ -63,6 +56,12 @@
|
|||
item.attrType === '等保定级'
|
||||
) {
|
||||
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) {
|
||||
|
@ -80,12 +79,6 @@
|
|||
dataFrom.value.content[1].childrenContent.push(itemContent)
|
||||
})
|
||||
}
|
||||
|
||||
let obj = {
|
||||
attrType: '访问地址',
|
||||
attrValue: props.dataList.link || '------',
|
||||
}
|
||||
dataFrom.value.content[0].childrenContent.push(obj)
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
|
@ -105,6 +98,12 @@
|
|||
item.attrType === '等保定级'
|
||||
) {
|
||||
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) {
|
||||
|
@ -122,11 +121,11 @@
|
|||
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)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
@ -138,32 +137,35 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
width: 13rem;
|
||||
justify-content: space-between;
|
||||
|
||||
.content-card {
|
||||
height: 1.5rem;
|
||||
width: 6.2rem;
|
||||
border-radius: 0.2rem;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
background: linear-gradient(to right,
|
||||
rgba(113, 132, 252, 0.4),
|
||||
rgba(148, 163, 252, 0.4)
|
||||
);
|
||||
rgba(148, 163, 252, 0.4));
|
||||
padding: 0 0.3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.card-title {
|
||||
font-size: 0.26rem;
|
||||
line-height: 0.26rem;
|
||||
color: #212956;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
div {
|
||||
display: inline-block;
|
||||
|
@ -172,15 +174,20 @@
|
|||
font-size: 0.2rem;
|
||||
line-height: 0.2rem;
|
||||
max-width: 5.84rem;
|
||||
overflow: hidden; /*超出的隐藏*/
|
||||
overflow: hidden;
|
||||
/*超出的隐藏*/
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis; /*超出的设置为省略号*/
|
||||
text-overflow: ellipsis;
|
||||
|
||||
/*超出的设置为省略号*/
|
||||
span {
|
||||
display: inline-block;
|
||||
max-width: 4rem;
|
||||
overflow: hidden; /*超出的隐藏*/
|
||||
overflow: hidden;
|
||||
/*超出的隐藏*/
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis; /*超出的设置为省略号*/
|
||||
text-overflow: ellipsis;
|
||||
/*超出的设置为省略号*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,42 +7,26 @@
|
|||
<DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div
|
||||
v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
|
||||
:key="itemSonTitle.name"
|
||||
@click="tabSwitch(itemSonTitle.name)"
|
||||
class="tab-son"
|
||||
:class="
|
||||
<div v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue" :key="itemSonTitle.name"
|
||||
@click="tabSwitch(itemSonTitle.name)" class="tab-son" :class="
|
||||
tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
|
||||
"
|
||||
>
|
||||
">
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.name }}</template>
|
||||
<div
|
||||
class="tab-top"
|
||||
:class="
|
||||
<div class="tab-top" :class="
|
||||
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
|
||||
"
|
||||
>
|
||||
">
|
||||
{{ itemSonTitle.name }}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<div
|
||||
class="tab-bottom"
|
||||
v-if="tabInitialize() == itemSonTitle.name"
|
||||
></div>
|
||||
<div class="tab-bottom" v-if="tabInitialize() == itemSonTitle.name"></div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
|
||||
<div class="content" v-if="tabindex == itemSonTitle.name">
|
||||
<div class="content-left">
|
||||
<div class="content-left-scene" v-if="!itemSonTitle.img"></div>
|
||||
<a-image
|
||||
:width="635"
|
||||
:height="340"
|
||||
:src="itemSonTitle.img"
|
||||
v-if="itemSonTitle.img"
|
||||
></a-image>
|
||||
<a-image :width="635" :height="340" :src="itemSonTitle.img" v-if="itemSonTitle.img"></a-image>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="content-right-scene">
|
||||
|
@ -122,6 +106,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-x: unset;
|
||||
|
||||
.application-scenarios-and-case-son {
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
|
@ -129,6 +114,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: unset;
|
||||
|
||||
.tab {
|
||||
max-width: 13rem;
|
||||
overflow-x: auto;
|
||||
|
@ -141,11 +127,13 @@
|
|||
cursor: pointer;
|
||||
padding-left: 0.4rem;
|
||||
padding-right: 0.4rem;
|
||||
|
||||
.tab-son {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 1rem;
|
||||
|
||||
.tab-top {
|
||||
min-width: 1.2rem;
|
||||
font-size: 0.24rem;
|
||||
|
@ -157,53 +145,65 @@
|
|||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
@ -212,6 +212,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content-right-scene,
|
||||
.content-right-case {
|
||||
width: 6.2rem;
|
||||
|
@ -220,6 +221,7 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content-left-scene,
|
||||
.content-left-case {
|
||||
height: 3.4rem;
|
||||
|
@ -229,12 +231,14 @@
|
|||
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;
|
||||
|
@ -246,6 +250,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.application-scenarios-and-case-son:first-child {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
|
|
@ -8,12 +8,7 @@
|
|||
<template>
|
||||
<div class="application-navigation" v-if="navList.length > 0">
|
||||
<template v-for="nav in navList" :key="nav.key">
|
||||
<div
|
||||
class="nav"
|
||||
:class="{ select: nav.key == select }"
|
||||
v-if="nav.show"
|
||||
@click="selectNav(nav.key)"
|
||||
>
|
||||
<div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
|
||||
{{ nav.name }}
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
|
@ -23,6 +18,11 @@
|
|||
<script setup>
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { queryPartAppByKeyId } from '@/api/home'
|
||||
// 获取当前路由地址
|
||||
const router = useRouter()
|
||||
const keyId = router.currentRoute.value.query.id
|
||||
const navList = ref([
|
||||
{
|
||||
name: '应用展示',
|
||||
|
@ -32,14 +32,6 @@
|
|||
name: '功能介绍',
|
||||
key: 'function-introduction',
|
||||
},
|
||||
// {
|
||||
// name: '关联组件',
|
||||
// key: 'application-associated-components',
|
||||
// },
|
||||
{
|
||||
name: '关联组件',
|
||||
key: 'application-associated-ability',
|
||||
},
|
||||
{
|
||||
name: '使用能力',
|
||||
key: 'ability-to-use',
|
||||
|
@ -62,8 +54,27 @@
|
|||
dataList: { type: Object, default: null },
|
||||
associatedComponents: { type: Array, default: null },
|
||||
})
|
||||
const select = ref('algorithm-display')
|
||||
const select = ref('application-associated-ability')
|
||||
const list = ref([])
|
||||
// 根据能力id查询是否存在关联应用
|
||||
if (keyId) {
|
||||
let params = {
|
||||
keyId: keyId,
|
||||
type: '组件服务',
|
||||
}
|
||||
queryPartAppByKeyId(params).then((res) => {
|
||||
console.log('ressssssss', res)
|
||||
if (res.data.data.length != 0) {
|
||||
// 存在关联应用时在导航栏加入关联应用
|
||||
navList.value.unshift({
|
||||
name: '关联组件',
|
||||
key: 'application-associated-ability',
|
||||
show: true,
|
||||
})
|
||||
list.value.unshift('关联组件')
|
||||
}
|
||||
})
|
||||
}
|
||||
const selectNav = (key) => {
|
||||
select.value = key
|
||||
mybus.emit('flyToView', select.value)
|
||||
|
@ -72,7 +83,7 @@
|
|||
list.value = []
|
||||
props.dataList.infoList.map((item) => {
|
||||
if (
|
||||
item.attrType === '算法优势' ||
|
||||
item.attrType === '功能介绍' ||
|
||||
item.attrType === '常见问题' ||
|
||||
item.attrType === '使用能力' ||
|
||||
item.attrType === '关联组件'
|
||||
|
@ -82,26 +93,22 @@
|
|||
list.value.push('应用展示')
|
||||
}
|
||||
})
|
||||
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) {
|
||||
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) {
|
||||
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
|
||||
select.value = navList.value.filter(
|
||||
(item) => item.name === list.value[0]
|
||||
(item) => (item.name === '关联组件') | (item.name === list.value[0])
|
||||
)[0].key
|
||||
}
|
||||
}
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
}
|
||||
watch(
|
||||
|
@ -127,30 +134,23 @@
|
|||
list.value.push('应用展示')
|
||||
}
|
||||
})
|
||||
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) {
|
||||
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) {
|
||||
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
|
||||
select.value = navList.value.filter(
|
||||
(item) => item.name === list.value[0]
|
||||
(item) =>
|
||||
(item.name === '关联组件') | (item.name === list.value[0])
|
||||
)[0].key
|
||||
}
|
||||
}
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
}
|
||||
}
|
||||
|
@ -169,19 +169,23 @@
|
|||
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;
|
||||
}
|
||||
|
|
|
@ -2,17 +2,10 @@
|
|||
<template>
|
||||
<div class="application-deployment-and-security">
|
||||
<div class="title">
|
||||
<DetalsTitle
|
||||
:title="dataFrom.title"
|
||||
:type="dataFrom.englishTitle"
|
||||
></DetalsTitle>
|
||||
<DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div
|
||||
v-for="(item, index) in dataFrom.content"
|
||||
:key="index"
|
||||
class="content-card"
|
||||
>
|
||||
<div v-for="(item, index) in dataFrom.content" :key="index" class="content-card">
|
||||
<div class="card-title">{{ item.childrenTitle }}</div>
|
||||
<div class="card-content">
|
||||
<div v-for="carditem in item.childrenContent" :key="carditem">
|
||||
|
@ -60,12 +53,12 @@
|
|||
dataFrom.value.content[0].childrenContent[0] = obj
|
||||
let deptContacts = {
|
||||
attrType: '部门联系人',
|
||||
attrValue: props.dataList.deptContacts || '------',
|
||||
attrValue: '',
|
||||
}
|
||||
dataFrom.value.content[0].childrenContent[1] = deptContacts
|
||||
let deptPhone = {
|
||||
attrType: '部门联系人',
|
||||
attrValue: props.dataList.deptPhone || '------',
|
||||
attrType: '部门联系电话',
|
||||
attrValue: '',
|
||||
}
|
||||
dataFrom.value.content[0].childrenContent[2] = deptPhone
|
||||
props.dataList.infoList.map((item) => {
|
||||
|
@ -94,8 +87,13 @@
|
|||
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(
|
||||
|
@ -115,7 +113,7 @@
|
|||
}
|
||||
dataFrom.value.content[0].childrenContent[1] = deptContacts
|
||||
let deptPhone = {
|
||||
attrType: '部门联系人',
|
||||
attrType: '部门联系电话',
|
||||
attrValue: props.dataList.deptPhone || '------',
|
||||
}
|
||||
dataFrom.value.content[0].childrenContent[2] = deptPhone
|
||||
|
@ -154,6 +152,10 @@
|
|||
'------'
|
||||
}
|
||||
}
|
||||
} else if (item.attrType === '部门联系人') {
|
||||
deptContacts.attrValue = item.attrValue || '------'
|
||||
} else if (item.attrType === '部门联系人电话') {
|
||||
deptPhone.attrValue = item.attrValue || '------'
|
||||
}
|
||||
})
|
||||
console.log('obj', dataFrom.value)
|
||||
|
@ -168,40 +170,45 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
width: 13rem;
|
||||
justify-content: space-between;
|
||||
|
||||
.content-card {
|
||||
height: 1.5rem;
|
||||
width: 6.2rem;
|
||||
border-radius: 0.2rem;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
background: linear-gradient(to right,
|
||||
rgba(113, 132, 252, 0.4),
|
||||
rgba(148, 163, 252, 0.4)
|
||||
);
|
||||
rgba(148, 163, 252, 0.4));
|
||||
padding: 0 0.3rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.card-title {
|
||||
font-size: 0.26rem;
|
||||
color: #212956;
|
||||
margin-bottom: 0.2rem;
|
||||
line-height: 0.26rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
max-width: 2.8rem;
|
||||
overflow: hidden;
|
||||
|
@ -211,6 +218,7 @@
|
|||
-webkit-line-clamp: 1;
|
||||
}
|
||||
}
|
||||
|
||||
div:first-child {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
@ -8,15 +8,10 @@
|
|||
<template>
|
||||
<div class="application-presentation" v-if="flag">
|
||||
<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>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
title="视频预览"
|
||||
:width="750"
|
||||
destroyOnClose
|
||||
>
|
||||
<a-modal v-model:visible="visible" title="视频预览" :width="750" destroyOnClose>
|
||||
<template #footer></template>
|
||||
<div style="width: 100%; display: flex; justify-content: center">
|
||||
<div style="width: 100%; height: 100%">
|
||||
|
@ -63,6 +58,7 @@
|
|||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const flag = ref(true)
|
||||
const img = ref({})
|
||||
console.log('111111111111111111111,', props.dataList)
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
|
@ -72,7 +68,13 @@
|
|||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
let imgindex = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '应用图片'
|
||||
)[0]
|
||||
options.src = obj.attrValue
|
||||
if (imgindex) {
|
||||
img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
||||
}
|
||||
}
|
||||
}
|
||||
watch(
|
||||
|
@ -86,7 +88,14 @@
|
|||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
let imgindex = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '应用图片'
|
||||
)[0]
|
||||
options.src = obj.attrValue
|
||||
if (imgindex) {
|
||||
img.value =
|
||||
'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -95,6 +104,7 @@
|
|||
<style lang="less" scoped>
|
||||
.application-presentation {
|
||||
padding: 0.8rem 3rem 0;
|
||||
|
||||
.main {
|
||||
height: 3.4rem;
|
||||
border-radius: 0.1rem;
|
||||
|
@ -104,6 +114,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.play {
|
||||
width: 0.96rem;
|
||||
height: 0.96rem;
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -1,30 +1,79 @@
|
|||
<template>
|
||||
<div class="application-associated-ability" v-if="flag">
|
||||
<detals-title title="关联应用" type="RELEVANCE"></detals-title>
|
||||
<div class="application-associated-ability-main">
|
||||
<detals-title title="关联应用" type="ASSOCIATED"></detals-title>
|
||||
<div
|
||||
class="application-associated-ability-main"
|
||||
v-if="dataFrom[0].dataList.length < 4"
|
||||
>
|
||||
<div
|
||||
class="associated-ability-card"
|
||||
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
|
||||
:key="dataListitem.id"
|
||||
@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>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
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 modules = ref([Pagination])
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||
const props = defineProps({
|
||||
associatedComponents: { type: Array, default: null },
|
||||
|
@ -34,17 +83,20 @@
|
|||
const oldid = router.currentRoute.value.query.id
|
||||
//点击查看详情
|
||||
const switchFunction = (id) => {
|
||||
router.push({
|
||||
path: '/details',
|
||||
query: {
|
||||
id: id,
|
||||
},
|
||||
})
|
||||
// router.push({
|
||||
// path: '/details',
|
||||
// query: {
|
||||
// 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
|
||||
dataFrom.value = props.associatedComponents
|
||||
debugger
|
||||
console.log('dataFrom.value', dataFrom.value)
|
||||
} else {
|
||||
flag.value = false
|
||||
|
@ -75,7 +127,7 @@
|
|||
<style lang="less" scoped>
|
||||
.application-associated-ability {
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
padding-bottom: 0.6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
@ -83,20 +135,31 @@
|
|||
margin-top: 0.4rem;
|
||||
width: 13.3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
:deep(.swiper) {
|
||||
padding-bottom: 0.6rem;
|
||||
}
|
||||
.associated-ability-card {
|
||||
width: 3.2rem;
|
||||
height: 2.78rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 1px solid #e4e6f5;
|
||||
border-radius: 0.1rem;
|
||||
padding-bottom: 0.3rem;
|
||||
margin-right: 0.2rem;
|
||||
margin-top: 0.2rem;
|
||||
cursor: pointer;
|
||||
.associated-ability-card-title {
|
||||
width: 2.2rem;
|
||||
padding-top: 0.3rem;
|
||||
font-size: 0.22rem;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.associated-ability-card-content {
|
||||
width: 100%;
|
||||
|
@ -107,6 +170,11 @@
|
|||
color: #999;
|
||||
margin-right: 0.15rem;
|
||||
margin-top: 0.15rem;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,12 +8,7 @@
|
|||
<template>
|
||||
<div class="business-navigation" v-if="navList.length > 0">
|
||||
<template v-for="nav in navList" :key="nav.key">
|
||||
<div
|
||||
class="nav"
|
||||
:class="{ select: nav.key == select }"
|
||||
v-if="nav.show"
|
||||
@click="selectNav(nav.key)"
|
||||
>
|
||||
<div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
|
||||
{{ nav.name }}
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
|
@ -21,17 +16,18 @@
|
|||
</div>
|
||||
</template>
|
||||
<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 { queryPartAppByKeyId2 } from '@/api/home'
|
||||
// 获取当前路由地址
|
||||
const router = useRouter()
|
||||
const keyId = router.currentRoute.value.query.id
|
||||
const navList = ref([
|
||||
{
|
||||
name: '组件展示',
|
||||
key: 'business-presentation',
|
||||
},
|
||||
{
|
||||
name: '关联应用',
|
||||
key: 'business-associated-ability',
|
||||
},
|
||||
{
|
||||
name: '功能介绍',
|
||||
key: 'function-introduction',
|
||||
|
@ -59,8 +55,24 @@
|
|||
selectNow: { type: String, default: '' },
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const select = ref('business-presentation')
|
||||
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 selectNav = (key) => {
|
||||
select.value = key
|
||||
console.log(key, select.value)
|
||||
|
@ -69,8 +81,8 @@
|
|||
if (props.dataList.infoList) {
|
||||
list.value = []
|
||||
let arr = [
|
||||
'组件视频介绍',
|
||||
'关联应用',
|
||||
'组件视频介绍',
|
||||
'功能介绍',
|
||||
'应用场景',
|
||||
'应用案例',
|
||||
|
@ -94,7 +106,7 @@
|
|||
list.value.push('组件展示')
|
||||
}
|
||||
})
|
||||
list.value.push('关联应用')
|
||||
list.value.unshift('关联应用')
|
||||
list.value.push('使用方式')
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
|
@ -108,9 +120,13 @@
|
|||
}
|
||||
}
|
||||
})
|
||||
if (list.value.length > 0) {
|
||||
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
|
||||
select.value = navList.value.filter(
|
||||
(item) => item.name === list.value[0]
|
||||
(item) => (item.name === '关联应用') | (item.name === list.value[0])
|
||||
)[0].key
|
||||
}
|
||||
}
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
}
|
||||
watch(
|
||||
|
@ -125,8 +141,8 @@
|
|||
if (val) {
|
||||
list.value = []
|
||||
let arr = [
|
||||
'组件视频介绍',
|
||||
'关联应用',
|
||||
'组件视频介绍',
|
||||
'功能介绍',
|
||||
'应用场景',
|
||||
'应用案例',
|
||||
|
@ -151,7 +167,7 @@
|
|||
list.value.push('组件展示')
|
||||
}
|
||||
})
|
||||
list.value.push('关联应用')
|
||||
list.value.unshift('关联应用')
|
||||
list.value.push('使用方式')
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
|
@ -166,10 +182,13 @@
|
|||
}
|
||||
})
|
||||
if (list.value.length > 0) {
|
||||
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
|
||||
select.value = navList.value.filter(
|
||||
(item) => item.name === list.value[0]
|
||||
(item) =>
|
||||
(item.name === '关联应用') | (item.name === list.value[0])
|
||||
)[0].key
|
||||
}
|
||||
}
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
}
|
||||
}
|
||||
|
@ -188,19 +207,23 @@
|
|||
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;
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 11:56:28
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-01 14:20:52
|
||||
* @LastEditTime: 2022-07-05 11:42:27
|
||||
* @Description: 算法详情页头部
|
||||
-->
|
||||
<template>
|
||||
|
@ -29,8 +29,8 @@
|
|||
</div>
|
||||
<div class="main">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>应用领域:{{ applicationArea }}</template>
|
||||
<div>应用领域:{{ applicationArea }}</div>
|
||||
<template #title>应用领域:{{ businessArea }}</template>
|
||||
<div>应用领域:{{ businessArea }}</div>
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>{{ props.dataList.description }}</template>
|
||||
|
@ -41,11 +41,15 @@
|
|||
</div>
|
||||
<div class="bottom" v-if="props.dataList.id">
|
||||
<a-button type="primary" @click="toView()">
|
||||
<template #icon><form-outlined /></template>
|
||||
<template #icon>
|
||||
<form-outlined />
|
||||
</template>
|
||||
申请使用
|
||||
</a-button>
|
||||
<a-button type="primary" @click="addShoppingCart()">
|
||||
<template #icon><shopping-cart-outlined /></template>
|
||||
<template #icon>
|
||||
<shopping-cart-outlined />
|
||||
</template>
|
||||
加入申购车
|
||||
</a-button>
|
||||
<a-button type="primary" @click="goTOCollection()">收藏</a-button>
|
||||
|
@ -96,6 +100,7 @@
|
|||
resourceName: props.dataList.name,
|
||||
time: props.dataList.createDate,
|
||||
type: props.dataList.type,
|
||||
componentType: '业务组件',
|
||||
},
|
||||
],
|
||||
deptId: props.dataList.deptId,
|
||||
|
@ -152,6 +157,7 @@
|
|||
background-size: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.left {
|
||||
max-width: 7.2rem;
|
||||
color: #fff;
|
||||
|
@ -160,9 +166,11 @@
|
|||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
// max-width: 3.3rem;
|
||||
// overflow: hidden;
|
||||
|
@ -178,15 +186,18 @@
|
|||
-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;
|
||||
|
@ -194,15 +205,18 @@
|
|||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-top: 0.2rem;
|
||||
font-size: 0.18rem;
|
||||
line-height: 0.34rem;
|
||||
|
||||
&>div:nth-of-type(1) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&>div:nth-of-type(2) {
|
||||
max-height: 1rem;
|
||||
overflow: hidden;
|
||||
|
@ -212,9 +226,11 @@
|
|||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 0.4rem;
|
||||
display: flex;
|
||||
|
||||
.ant-btn {
|
||||
height: 0.5rem;
|
||||
margin-right: 0.2rem;
|
||||
|
@ -225,15 +241,19 @@
|
|||
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;
|
||||
|
@ -241,11 +261,11 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 5.8rem;
|
||||
height: 4rem;
|
||||
background: url('~@/assets/detailsAll/business/business_right_bg.png')
|
||||
no-repeat;
|
||||
background: url('~@/assets/detailsAll/business/business_right_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
margin-top: -0.4rem;
|
||||
}
|
||||
|
|
|
@ -2,10 +2,7 @@
|
|||
<!-- 使用方式 -->
|
||||
<div class="usage-mode" v-if="flag">
|
||||
<div class="tltle">
|
||||
<DetalsTitle
|
||||
:title="dataFrom.title"
|
||||
:type="dataFrom.englishTitle"
|
||||
></DetalsTitle>
|
||||
<DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
|
||||
</div>
|
||||
<div class="content" v-for="item in dataFrom.content" :key="item.title">
|
||||
<div class="content-left">
|
||||
|
@ -16,7 +13,10 @@
|
|||
<div class="content-left-content">
|
||||
<p>
|
||||
<span>{{ item.link.name }}</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.linkValue }}</template>
|
||||
<span>{{ item.linkValue }}</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -30,7 +30,7 @@
|
|||
<div class="content-right-title">{{ item.contact }}</div>
|
||||
<div class="content-right-content">
|
||||
<p>
|
||||
<span>{{ item.contact }}</span>
|
||||
<span>{{ item.facilitator.name }}</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.facilitator.value }}</template>
|
||||
<span>{{ item.facilitator.value }}</span>
|
||||
|
@ -56,7 +56,7 @@
|
|||
<div class="content-right-title">{{ item.contact2 }}</div>
|
||||
<div class="content-right-content">
|
||||
<p>
|
||||
<span>{{ item.contact2 }}</span>
|
||||
<span>{{ item.facilitator2.name }}</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.facilitator2.value }}</template>
|
||||
<span>{{ item.facilitator2.value }}</span>
|
||||
|
@ -235,14 +235,15 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.8rem 0;
|
||||
|
||||
.content {
|
||||
margin-top: 0.3rem;
|
||||
display: flex;
|
||||
|
||||
.content-left {
|
||||
height: 1.5rem;
|
||||
width: 6.2rem;
|
||||
background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
|
||||
no-repeat;
|
||||
background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 0.1rem;
|
||||
|
@ -251,30 +252,40 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
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;
|
||||
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;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
div {
|
||||
height: 0.4rem;
|
||||
|
@ -288,16 +299,17 @@
|
|||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
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: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 0.1rem;
|
||||
|
@ -306,17 +318,20 @@
|
|||
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;
|
||||
|
@ -326,6 +341,7 @@
|
|||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
flex-direction: column;
|
||||
|
||||
p {
|
||||
// width: 1.60rem;
|
||||
height: 0.2rem;
|
||||
|
@ -336,6 +352,7 @@
|
|||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-right: 0.15rem;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
@ -71,7 +71,6 @@
|
|||
dataList: { type: Object, default: null },
|
||||
})
|
||||
if (props.dataList.infoList) {
|
||||
debugger
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '应用场景'
|
||||
)[0]
|
||||
|
@ -79,7 +78,6 @@
|
|||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
debugger
|
||||
dataFrom.value = obj
|
||||
tabindex.value = dataFrom.value.attrValue[0].name
|
||||
}
|
||||
|
|
|
@ -1,30 +1,79 @@
|
|||
<template>
|
||||
<div class="application-associated-ability" v-if="flag">
|
||||
<detals-title title="关联应用" type="RELEVANCE"></detals-title>
|
||||
<div class="application-associated-ability-main">
|
||||
<detals-title title="关联应用" type="ASSOCIATED"></detals-title>
|
||||
<div
|
||||
class="application-associated-ability-main"
|
||||
v-if="dataFrom[0].dataList.length < 4"
|
||||
>
|
||||
<div
|
||||
class="associated-ability-card"
|
||||
v-for="dataListitem in dataFrom[0].dataList"
|
||||
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
|
||||
:key="dataListitem.id"
|
||||
@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>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
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 modules = ref([Pagination])
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||
const props = defineProps({
|
||||
associatedComponents: { type: Array, default: null },
|
||||
|
@ -34,17 +83,20 @@
|
|||
const oldid = router.currentRoute.value.query.id
|
||||
//点击查看详情
|
||||
const switchFunction = (id) => {
|
||||
router.push({
|
||||
path: '/details',
|
||||
query: {
|
||||
id: id,
|
||||
},
|
||||
})
|
||||
// router.push({
|
||||
// path: '/details',
|
||||
// query: {
|
||||
// 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
|
||||
dataFrom.value = props.associatedComponents
|
||||
debugger
|
||||
console.log('dataFrom.value', dataFrom.value)
|
||||
} else {
|
||||
flag.value = false
|
||||
|
@ -63,7 +115,7 @@
|
|||
)
|
||||
watch(
|
||||
() => router.currentRoute.value.query.id,
|
||||
() => {
|
||||
(newValue, oldValue) => {
|
||||
if (oldid != router.currentRoute.value.query.id) {
|
||||
window.location.reload()
|
||||
}
|
||||
|
@ -75,7 +127,7 @@
|
|||
<style lang="less" scoped>
|
||||
.application-associated-ability {
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
padding-bottom: 0.6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
@ -83,20 +135,31 @@
|
|||
margin-top: 0.4rem;
|
||||
width: 13.3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
:deep(.swiper) {
|
||||
padding-bottom: 0.6rem;
|
||||
}
|
||||
.associated-ability-card {
|
||||
width: 3.2rem;
|
||||
height: 2.78rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 1px solid #e4e6f5;
|
||||
border-radius: 0.1rem;
|
||||
padding-bottom: 0.3rem;
|
||||
margin-right: 0.2rem;
|
||||
margin-top: 0.2rem;
|
||||
cursor: pointer;
|
||||
.associated-ability-card-title {
|
||||
width: 2.2rem;
|
||||
padding-top: 0.3rem;
|
||||
font-size: 0.22rem;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.associated-ability-card-content {
|
||||
width: 100%;
|
||||
|
@ -107,6 +170,11 @@
|
|||
color: #999;
|
||||
margin-right: 0.15rem;
|
||||
margin-top: 0.15rem;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -21,17 +21,18 @@
|
|||
</div>
|
||||
</template>
|
||||
<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 { queryPartAppByKeyId2 } from '@/api/home'
|
||||
// 获取当前路由地址
|
||||
const router = useRouter()
|
||||
const keyId = router.currentRoute.value.query.id
|
||||
const navList = ref([
|
||||
{
|
||||
name: '组件展示',
|
||||
key: 'eveloper-presentation',
|
||||
},
|
||||
{
|
||||
name: '关联应用',
|
||||
key: 'developer-associated-ability',
|
||||
},
|
||||
{
|
||||
name: '功能介绍',
|
||||
key: 'function-introduction',
|
||||
|
@ -60,10 +61,26 @@
|
|||
const props = defineProps({
|
||||
selectNow: { type: String, default: '' },
|
||||
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([])
|
||||
// 根据能力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) => {
|
||||
select.value = key
|
||||
mybus.emit('flyToView', select.value)
|
||||
|
@ -81,17 +98,17 @@
|
|||
list.value.push('组件展示')
|
||||
}
|
||||
})
|
||||
list.value.push('关联应用')
|
||||
list.value.unshift('关联应用')
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
if (list.value.indexOf(item.name) > -1) {
|
||||
if (item.name == '关联应用') {
|
||||
if (props.associatedComponents[0].dataList.length != 0) {
|
||||
// if (item.name == '关联应用') {
|
||||
// if (props.associatedComponents[0].dataList.length != 0) {
|
||||
// item.show = true
|
||||
// }
|
||||
// } else {
|
||||
item.show = true
|
||||
}
|
||||
} else {
|
||||
item.show = true
|
||||
}
|
||||
// }
|
||||
}
|
||||
})
|
||||
select.value = navList.value.filter(
|
||||
|
@ -122,26 +139,29 @@
|
|||
list.value.push('组件展示')
|
||||
}
|
||||
})
|
||||
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) {
|
||||
if (item.name == '关联应用') {
|
||||
if (props.associatedComponents[0].dataList.length != 0) {
|
||||
// if (item.name == '关联应用') {
|
||||
// if (props.associatedComponents[0].dataList.length != 0) {
|
||||
// item.show = true
|
||||
// }
|
||||
// } else {
|
||||
item.show = true
|
||||
}
|
||||
} else {
|
||||
item.show = true
|
||||
}
|
||||
// }
|
||||
}
|
||||
})
|
||||
if (list.value.length > 0) {
|
||||
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
|
||||
select.value = navList.value.filter(
|
||||
(item) => item.name === list.value[0]
|
||||
(item) =>
|
||||
(item.name === '关联应用') | (item.name === list.value[0])
|
||||
)[0].key
|
||||
}
|
||||
}
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -57,6 +57,10 @@
|
|||
{
|
||||
childrenTitle: '归属部门',
|
||||
childrenContent: [
|
||||
{
|
||||
attrType: '归属部门名称',
|
||||
attrValue: '------',
|
||||
},
|
||||
{
|
||||
attrType: '部门联系人',
|
||||
attrValue: '------',
|
||||
|
@ -65,15 +69,15 @@
|
|||
attrType: '联系人电话',
|
||||
attrValue: '------',
|
||||
},
|
||||
{
|
||||
attrType: '归属部门名称',
|
||||
attrValue: '------',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
childrenTitle: '服务商信息',
|
||||
childrenContent: [
|
||||
{
|
||||
attrType: '服务商名称',
|
||||
attrValue: '------',
|
||||
},
|
||||
{
|
||||
attrType: '服务商联系人',
|
||||
attrValue: '------',
|
||||
|
@ -82,10 +86,6 @@
|
|||
attrType: '联系人电话',
|
||||
attrValue: '------',
|
||||
},
|
||||
{
|
||||
attrType: '服务商名称',
|
||||
attrValue: '------',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
@ -117,6 +117,9 @@
|
|||
} else if (item.attrType == '服务商联系电话') {
|
||||
dataFrom.value.content[1].childrenContent[1].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 == '服务商联系电话') {
|
||||
dataFrom.value.content[1].childrenContent[1].attrValue =
|
||||
item.attrValue
|
||||
} else if (
|
||||
item.attrType == '服务商' ||
|
||||
item.attrType == '服务商名'
|
||||
) {
|
||||
dataFrom.value.content[1].childrenContent[2].attrValue =
|
||||
item.attrValue
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 11:56:28
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-01 14:21:04
|
||||
* @LastEditTime: 2022-07-05 11:42:59
|
||||
* @Description: 开发组件详情页头部
|
||||
-->
|
||||
<template>
|
||||
|
@ -96,6 +96,7 @@
|
|||
resourceName: props.dataList.name,
|
||||
time: props.dataList.createDate,
|
||||
type: props.dataList.type,
|
||||
componentType: '开发组件',
|
||||
},
|
||||
],
|
||||
deptId: props.dataList.deptId,
|
||||
|
|
|
@ -130,6 +130,13 @@
|
|||
border-right: 0.01rem #ffffff solid;
|
||||
padding-left: 0.7rem;
|
||||
padding-right: 1rem;
|
||||
& > p {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
.main-center {
|
||||
padding-left: 1rem;
|
||||
|
|
|
@ -1,30 +1,79 @@
|
|||
<template>
|
||||
<div class="application-associated-ability" v-if="flag">
|
||||
<detals-title title="关联应用" type="RELEVANCE"></detals-title>
|
||||
<div class="application-associated-ability-main">
|
||||
<detals-title title="关联应用" type="ASSOCIATED"></detals-title>
|
||||
<div
|
||||
class="application-associated-ability-main"
|
||||
v-if="dataFrom[0].dataList.length < 4"
|
||||
>
|
||||
<div
|
||||
class="associated-ability-card"
|
||||
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
|
||||
:key="dataListitem.id"
|
||||
@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>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
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 modules = ref([Pagination])
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||
const props = defineProps({
|
||||
associatedComponents: { type: Array, default: null },
|
||||
|
@ -34,17 +83,20 @@
|
|||
const oldid = router.currentRoute.value.query.id
|
||||
//点击查看详情
|
||||
const switchFunction = (id) => {
|
||||
router.push({
|
||||
path: '/details',
|
||||
query: {
|
||||
id: id,
|
||||
},
|
||||
})
|
||||
// router.push({
|
||||
// path: '/details',
|
||||
// query: {
|
||||
// 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
|
||||
dataFrom.value = props.associatedComponents
|
||||
debugger
|
||||
console.log('dataFrom.value', dataFrom.value)
|
||||
} else {
|
||||
flag.value = false
|
||||
|
@ -75,7 +127,7 @@
|
|||
<style lang="less" scoped>
|
||||
.application-associated-ability {
|
||||
padding-top: 0.8rem;
|
||||
padding-bottom: 0.8rem;
|
||||
padding-bottom: 0.6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
@ -83,20 +135,31 @@
|
|||
margin-top: 0.4rem;
|
||||
width: 13.3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
:deep(.swiper) {
|
||||
padding-bottom: 0.6rem;
|
||||
}
|
||||
.associated-ability-card {
|
||||
width: 3.2rem;
|
||||
height: 2.78rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 1px solid #e4e6f5;
|
||||
border-radius: 0.1rem;
|
||||
padding-bottom: 0.3rem;
|
||||
margin-right: 0.2rem;
|
||||
margin-top: 0.2rem;
|
||||
cursor: pointer;
|
||||
.associated-ability-card-title {
|
||||
width: 2.2rem;
|
||||
padding-top: 0.3rem;
|
||||
font-size: 0.22rem;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.associated-ability-card-content {
|
||||
width: 100%;
|
||||
|
@ -107,6 +170,11 @@
|
|||
color: #999;
|
||||
margin-right: 0.15rem;
|
||||
margin-top: 0.15rem;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,12 +8,7 @@
|
|||
<template>
|
||||
<div class="business-navigation" v-if="navList.length > 0">
|
||||
<template v-for="nav in navList" :key="nav.key">
|
||||
<div
|
||||
class="nav"
|
||||
:class="{ select: nav.key == select }"
|
||||
v-if="nav.show"
|
||||
@click="selectNav(nav.key)"
|
||||
>
|
||||
<div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
|
||||
{{ nav.name }}
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
|
@ -21,13 +16,14 @@
|
|||
</div>
|
||||
</template>
|
||||
<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 { queryPartAppByKeyId2 } from '@/api/home'
|
||||
// 获取当前路由地址
|
||||
const router = useRouter()
|
||||
const keyId = router.currentRoute.value.query.id
|
||||
const navList = ref([
|
||||
{
|
||||
name: '关联应用',
|
||||
key: 'layer-service-associated-ability',
|
||||
},
|
||||
{
|
||||
name: '图层展示',
|
||||
key: 'service-presentation',
|
||||
|
@ -62,8 +58,23 @@
|
|||
dataList: { type: Object, default: null },
|
||||
associatedComponents: { type: Array, default: null },
|
||||
})
|
||||
const select = ref('service-presentation')
|
||||
const list = ref([])
|
||||
// 根据能力id查询是否存在关联应用
|
||||
if (keyId) {
|
||||
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
|
||||
console.log('ressssssss', res)
|
||||
if (res.data.data.length > 0) {
|
||||
// 存在关联应用时在导航栏加入关联应用
|
||||
navList.value.unshift({
|
||||
name: '关联应用',
|
||||
key: 'layer-service-associated-ability',
|
||||
show: true,
|
||||
})
|
||||
list.value.unshift('关联应用')
|
||||
}
|
||||
})
|
||||
}
|
||||
const select = ref('layer-service-associated-ability')
|
||||
const selectNav = (key) => {
|
||||
select.value = key
|
||||
console.log(key, select.value)
|
||||
|
@ -122,21 +133,15 @@
|
|||
list.value.push('使用方式')
|
||||
}
|
||||
})
|
||||
list.value.push('关联应用')
|
||||
list.value.unshift('关联应用')
|
||||
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
|
||||
}
|
||||
}
|
||||
})
|
||||
select.value = navList.value.filter(
|
||||
(item) => item.name === '图层展示'
|
||||
(item) => item.name === list.value[0]
|
||||
)[0].key
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
}
|
||||
|
@ -203,22 +208,16 @@
|
|||
list.value.push('使用方式')
|
||||
}
|
||||
})
|
||||
list.value.push('关联应用')
|
||||
list.value.unshift('关联应用')
|
||||
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 === '图层展示'
|
||||
(item) => item.name === list.value[0]
|
||||
)[0].key
|
||||
}
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
|
@ -239,19 +238,23 @@
|
|||
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;
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 11:56:28
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-01 18:52:34
|
||||
* @LastEditTime: 2022-07-05 11:43:18
|
||||
* @Description: 算法详情页头部
|
||||
-->
|
||||
<template>
|
||||
|
@ -96,6 +96,7 @@
|
|||
resourceName: props.dataList.name,
|
||||
time: props.dataList.createDate,
|
||||
type: props.dataList.type,
|
||||
componentType: '图层服务',
|
||||
},
|
||||
],
|
||||
deptId: props.dataList.deptId,
|
||||
|
|
|
@ -10,16 +10,20 @@
|
|||
<div class="content" v-for="item in dataFrom.content" :key="item.title">
|
||||
<div class="content-left">
|
||||
<div class="left">
|
||||
<div class="content-left-content">
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.linkValue }}</template>
|
||||
<p>
|
||||
<span>服务地址:</span>
|
||||
<span>{{ item.linkValue }}</span>
|
||||
服务地址:
|
||||
{{ item.linkValue }}
|
||||
</p>
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.csslinkValue }}</template>
|
||||
<p>
|
||||
<span>样式服务地址:</span>
|
||||
<span>{{ item.csslnkValue }}</span>
|
||||
样式服务地址:
|
||||
{{ item.csslinkValue }}
|
||||
</p>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div @click="technical()">接口文档</div>
|
||||
|
@ -31,7 +35,7 @@
|
|||
<div class="content-right-title">{{ item.contact }}</div>
|
||||
<div class="content-right-content">
|
||||
<p>
|
||||
<span>{{ item.contact }}</span>
|
||||
<span>{{ item.facilitator.name }}</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.facilitator.value }}</template>
|
||||
<span>{{ item.facilitator.value }}</span>
|
||||
|
@ -57,7 +61,7 @@
|
|||
<div class="content-right-title">{{ item.contact2 }}</div>
|
||||
<div class="content-right-content">
|
||||
<p>
|
||||
<span>{{ item.contact2 }}</span>
|
||||
<span>{{ item.facilitator2.name }}</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.facilitator2.value }}</template>
|
||||
<span>{{ item.facilitator2.value }}</span>
|
||||
|
@ -99,6 +103,7 @@
|
|||
name: '接口地址:',
|
||||
},
|
||||
linkValue: '',
|
||||
csslinkValue: '',
|
||||
contact: '归属部门',
|
||||
facilitator: { name: '归属部门:', value: '' },
|
||||
people: { name: '部门联系人:', value: '' },
|
||||
|
@ -142,7 +147,7 @@
|
|||
dataFrom.value.content[0].phone.value = props.dataList.deptPhone
|
||||
console.log('dataList', props.dataList)
|
||||
props.dataList.infoList.map((item) => {
|
||||
if (item.attrType === '组件地址') {
|
||||
if (item.attrType === '服务地址') {
|
||||
dataFrom.value.content[0].linkValue = item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商') {
|
||||
dataFrom.value.content[0].facilitator2.value = item.attrValue || '--'
|
||||
|
@ -150,6 +155,8 @@
|
|||
dataFrom.value.content[0].people2.value = item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商联系电话') {
|
||||
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
|
||||
console.log('dataList', val)
|
||||
val.infoList.map((item) => {
|
||||
if (item.attrType === '组件地址') {
|
||||
if (item.attrType === '服务地址') {
|
||||
dataFrom.value.content[0].linkValue = item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商') {
|
||||
dataFrom.value.content[0].facilitator2.value =
|
||||
|
@ -186,6 +193,8 @@
|
|||
dataFrom.value.content[0].people2.value = item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商联系电话') {
|
||||
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;
|
||||
align-items: center;
|
||||
padding: 0.8rem 0;
|
||||
|
||||
.content {
|
||||
margin-top: 0.3rem;
|
||||
display: flex;
|
||||
|
||||
.content-left {
|
||||
height: 1.8rem;
|
||||
width: 6.2rem;
|
||||
|
@ -254,36 +265,35 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
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;
|
||||
color: rgba(33, 41, 86, 0.8);
|
||||
line-height: 0.2rem;
|
||||
p {
|
||||
display: -webkit-box;
|
||||
display: block;
|
||||
color: rgba(33, 41, 86, 0.8);
|
||||
width: 4.2rem;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
// margin-bottom: 0.1rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 20px;
|
||||
color: #212956;
|
||||
line-height: 26px;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
p:last-of-type {
|
||||
margin-top: 20px;
|
||||
}
|
||||
p:first-child {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
div {
|
||||
height: 0.4rem;
|
||||
|
@ -297,11 +307,13 @@
|
|||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div:first-child {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-right {
|
||||
height: 1.8rem;
|
||||
width: 6.2rem;
|
||||
|
@ -316,17 +328,20 @@
|
|||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 0 0.3rem;
|
||||
|
||||
.content-right-left {
|
||||
border-right: 0.01rem solid #b0b9f1;
|
||||
// border-right: 0.01rem solid #b0b9f1;
|
||||
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;
|
||||
|
@ -336,6 +351,7 @@
|
|||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
flex-direction: column;
|
||||
|
||||
p {
|
||||
// width: 1.60rem;
|
||||
height: 0.2rem;
|
||||
|
@ -345,6 +361,7 @@
|
|||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-right: 0.15rem;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
|
|
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<div class="ability-to-apply-for">
|
||||
<div class="title">申请能力</div>
|
||||
<div class="ability-to-apply-for" :class="{ all: falg }">
|
||||
<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
|
||||
v-for="(item, index) in dataForm"
|
||||
:key="index"
|
||||
|
@ -12,6 +16,23 @@
|
|||
</div>
|
||||
<template v-for="val in item.arr" :key="val.resourceId">
|
||||
<div class="item">
|
||||
<div
|
||||
class="tx"
|
||||
:class="
|
||||
val.type == '基础设施'
|
||||
? 'sxt'
|
||||
: val.componentType == '智能算法'
|
||||
? 'znsf'
|
||||
: val.componentType == '图层服务'
|
||||
? 'tcfw'
|
||||
: val.componentType == '开发组件'
|
||||
? 'kfzj'
|
||||
: val.componentType == '业务组件'
|
||||
? 'ywzj'
|
||||
: ''
|
||||
"
|
||||
></div>
|
||||
<div class="text">
|
||||
<div class="name">
|
||||
<span>{{ val.resourceName }}</span>
|
||||
<span>{{ val.type }}</span>
|
||||
|
@ -27,6 +48,7 @@
|
|||
'--'
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="remove" @click="removeFunction(val)"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -35,27 +57,29 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
// import { useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { ref, defineProps } from 'vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
// import mybus from '@/myplugins/mybus'
|
||||
const props = defineProps({
|
||||
dataList: { type: Array, default: null },
|
||||
})
|
||||
const falg = ref(false)
|
||||
let dataForm = ref([])
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
dataForm.value = props.dataList
|
||||
const router = useRouter()
|
||||
const arr =
|
||||
router.currentRoute.value.query.name instanceof Array
|
||||
? router.currentRoute.value.query.name
|
||||
: [router.currentRoute.value.query.name]
|
||||
const dataResourceId = router.currentRoute.value.query.resourceId
|
||||
console.log(dataForm.value)
|
||||
// const router = useRouter()
|
||||
// const arr =
|
||||
// router.currentRoute.value.query.name instanceof Array
|
||||
// ? router.currentRoute.value.query.name
|
||||
// : [router.currentRoute.value.query.name]
|
||||
// const dataResourceId = router.currentRoute.value.query.resourceId
|
||||
|
||||
const depList = ref({
|
||||
Name: [],
|
||||
depID: [],
|
||||
})
|
||||
// const depList = ref({
|
||||
// Name: [],
|
||||
// depID: [],
|
||||
// })
|
||||
//移除方法
|
||||
const removeFunction = (data) => {
|
||||
dataForm.value.map((val) => {
|
||||
|
@ -71,25 +95,26 @@
|
|||
|
||||
<style scoped lang="less">
|
||||
.ability-to-apply-for {
|
||||
height: 2.9rem;
|
||||
overflow: hidden;
|
||||
.title {
|
||||
font-size: 0.16rem;
|
||||
color: #212121;
|
||||
border-bottom: 0.01rem #dddee1 solid;
|
||||
padding-bottom: 0.1rem;
|
||||
margin-bottom: 0.2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.ability-to-apply-for-content {
|
||||
// margin-bottom: 0.3rem;
|
||||
// border-bottom: 0.01rem #dddee1 solid;
|
||||
// padding-bottom: 0.3rem;
|
||||
padding-right: 0.5rem;
|
||||
position: relative;
|
||||
.dep-name {
|
||||
color: #0558e1;
|
||||
font-size: 0.18rem;
|
||||
font-size: 0.22rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 0.18rem;
|
||||
line-height: 0.22rem;
|
||||
margin-bottom: 0.2rem;
|
||||
span {
|
||||
display: inline-block;
|
||||
|
@ -104,14 +129,19 @@
|
|||
padding-bottom: 0.1rem;
|
||||
margin-bottom: 0.1rem;
|
||||
border-bottom: 1px solid #dddee1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.text {
|
||||
margin-left: 0.2rem;
|
||||
width: 8.8rem;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
margin-bottom: 0.2rem;
|
||||
span:first-child {
|
||||
display: inline-block;
|
||||
margin-right: 0.08rem;
|
||||
font-size: 0.2rem;
|
||||
font-size: 0.18rem;
|
||||
color: #000000;
|
||||
}
|
||||
span:last-child {
|
||||
|
@ -122,16 +152,13 @@
|
|||
}
|
||||
}
|
||||
.description {
|
||||
width: 10rem;
|
||||
width: 8.8rem;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.remove {
|
||||
margin-left: 0.1rem;
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
margin-top: -0.16rem;
|
||||
background: url('~@/assets/home/remove.png') no-repeat;
|
||||
background-size: cover;
|
||||
cursor: pointer;
|
||||
|
@ -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>
|
||||
|
|
|
@ -1053,7 +1053,7 @@
|
|||
paramsGetResources.pageNum = 1
|
||||
}
|
||||
let dataResourceParams = {
|
||||
serviceName: paramsGetResources.name, //资源名称
|
||||
serviceName: paramsGetResources.name || '', //资源名称
|
||||
orderField: whoShow1.value.itShowQingDao
|
||||
? paramsGetResources.orderField == 'applyCount'
|
||||
? 'syqk'
|
||||
|
|
|
@ -118,9 +118,10 @@
|
|||
name="applicationBackground"
|
||||
:rules="[{ required: true, message: '请输入应用背景' }]"
|
||||
>
|
||||
<a-input
|
||||
<a-textarea
|
||||
placeholder="请输入应用背景"
|
||||
v-model:value="formName.applicationBackground"
|
||||
:rows="4"
|
||||
/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
@ -130,9 +131,10 @@
|
|||
name="effectWish"
|
||||
:rules="[{ required: true, message: '请输入期望效果' }]"
|
||||
>
|
||||
<a-input
|
||||
<a-textarea
|
||||
placeholder="请输入期望效果"
|
||||
v-model:value="formName.effectWish"
|
||||
:rows="4"
|
||||
/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
@ -173,7 +175,7 @@
|
|||
</a-upload>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
|
||||
<div class="bottom-btn">
|
||||
<a-button
|
||||
style="
|
||||
width: 80px;
|
||||
|
@ -211,7 +213,7 @@
|
|||
>
|
||||
提交申请
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
<div class="success" v-else>
|
||||
|
@ -265,11 +267,34 @@
|
|||
setup() {
|
||||
const router = useRouter()
|
||||
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
|
||||
let record = ref('1')
|
||||
const text = ref('')
|
||||
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: [], // 应用系统
|
||||
applicationScene: [], // 应用场景
|
||||
applicationBackground: '', // 应用背景
|
||||
|
@ -292,7 +317,6 @@
|
|||
formName.unit = res.data.data.deptName
|
||||
})
|
||||
})
|
||||
const list = ref(JSON.parse(localStorage.getItem('applyList')))
|
||||
// console.log('本地存储====================》', list.value)
|
||||
const businessKey = ref(router.currentRoute.value.query.id)
|
||||
const taskId = ref(router.currentRoute.value.query.taskId)
|
||||
|
@ -504,6 +528,7 @@
|
|||
},
|
||||
])
|
||||
const systemOptions = ref([])
|
||||
const systemOptions2 = ref([])
|
||||
|
||||
const handleChange = (info) => {
|
||||
if (info.file.status !== 'uploading') {
|
||||
|
@ -536,49 +561,22 @@
|
|||
return isPNG || Upload.LIST_IGNORE
|
||||
}
|
||||
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) => {
|
||||
console.log(`selected ${value}`)
|
||||
}
|
||||
const systemHandleSearch = (value) => {
|
||||
console.log(`search ${value}`)
|
||||
text.value = value
|
||||
systemOptions.value = []
|
||||
window.setTimeout(() => {
|
||||
if (flag.value && text.value == value && text.value !== '') {
|
||||
console.log('1秒未输入~~~~~~~~~~~~~~~~~~~~~~~~~~')
|
||||
systemOptions.value = systemOptions2.value.filter(
|
||||
(item) => item.label.search(text.value) > -1
|
||||
)
|
||||
}
|
||||
pageWithAttrs({
|
||||
pageNum: 99999,
|
||||
pageSize: 5,
|
||||
pageNum: 1,
|
||||
pageSize: 99999,
|
||||
type: '应用资源',
|
||||
name: text.value,
|
||||
name: '',
|
||||
infoList: [],
|
||||
}).then((res) => {
|
||||
if (res.data.code == 0) {
|
||||
|
@ -586,33 +584,27 @@
|
|||
message.warning('该关键词,暂无应用资源!')
|
||||
} else {
|
||||
res.data.data.records.map((val) => {
|
||||
systemOptions.value.push({
|
||||
systemOptions2.value.push({
|
||||
value: val.name,
|
||||
label: val.name,
|
||||
})
|
||||
})
|
||||
console.log(
|
||||
'第一次获取===================>',
|
||||
systemOptions.value
|
||||
)
|
||||
// console.log('第一次获取===================>', systemOptions2.value)
|
||||
}
|
||||
} else {
|
||||
message.error('获取数据失败!')
|
||||
message.error('应用系统获取数据失败!')
|
||||
}
|
||||
})
|
||||
}
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
const handleBlur = () => {
|
||||
console.log('blur')
|
||||
flag.value = false
|
||||
}
|
||||
|
||||
const handleFocus = () => {
|
||||
console.log('focus')
|
||||
flag.value = true
|
||||
systemOptions.value = []
|
||||
// console.log(formName.applicationSystem)
|
||||
// formName.applicationSystem = []
|
||||
systemOptions.value = systemOptions2.value
|
||||
// systemOptions.value = []
|
||||
}
|
||||
|
||||
// const filterOption = (input, option) => {
|
||||
|
@ -727,4 +719,13 @@
|
|||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
resize: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
.bottom-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
// position: fixed;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -6,7 +6,10 @@
|
|||
props.showView === 'algorithm-details' ? 'blue' : '',
|
||||
]"
|
||||
>
|
||||
<div class="name">城市云脑能力管理中心</div>
|
||||
<div class="name">
|
||||
<div class="name-bg"></div>
|
||||
城市云脑通用能力服务平台
|
||||
</div>
|
||||
<div
|
||||
v-for="item in navList"
|
||||
:key="item.key"
|
||||
|
@ -17,6 +20,7 @@
|
|||
{{ item.name }}
|
||||
</div>
|
||||
<a-badge :count="sgcNum">
|
||||
<!-- 购物车 -->
|
||||
<svg
|
||||
t="1650455446850"
|
||||
class="icon"
|
||||
|
@ -37,6 +41,7 @@
|
|||
<!-- <a-avatar shape="square" size="large" /> -->
|
||||
</a-badge>
|
||||
<a-badge :count="mynoticeNum" style="margin-left: 0.2rem">
|
||||
<!-- 消息提醒 -->
|
||||
<svg
|
||||
t="1654051054113"
|
||||
class="icon2"
|
||||
|
@ -256,12 +261,13 @@
|
|||
sgcNum.value = res.data.data.count
|
||||
})
|
||||
getMynotice()
|
||||
// 解决
|
||||
const mynoticeDom = document.querySelector('.icon2')
|
||||
const mynotice = document.querySelector('.mynotice')
|
||||
if (mynoticeDom) {
|
||||
mynoticeDom.addEventListener('mouseover', () => {
|
||||
mynoticeFlag.value = true
|
||||
document.documentElement.style.overflowY = 'hidden'
|
||||
// document.documentElement.style.overflowY = 'hidden'
|
||||
})
|
||||
mynoticeDom.addEventListener('mouseout', () => {
|
||||
mynoticeFlag.value = false
|
||||
|
@ -271,7 +277,7 @@
|
|||
if (mynotice) {
|
||||
mynotice.addEventListener('mouseover', () => {
|
||||
mynoticeFlag.value = true
|
||||
document.documentElement.style.overflowY = 'hidden'
|
||||
// document.documentElement.style.overflowY = 'hidden'
|
||||
})
|
||||
mynotice.addEventListener('mouseout', () => {
|
||||
mynoticeFlag.value = false
|
||||
|
@ -318,6 +324,15 @@
|
|||
font-size: 0.22rem;
|
||||
font-family: header-typeface;
|
||||
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 {
|
||||
width: 1.2rem;
|
||||
|
|
|
@ -37,8 +37,11 @@
|
|||
:class="
|
||||
item.type == '应用资源'
|
||||
? 'yyzy'
|
||||
: item.type == '数据资源'
|
||||
: !item.type
|
||||
? 'sjzy'
|
||||
: !item.infoList ||
|
||||
!item.infoList.filter((val) => val.attrType == '组件类型')[0]
|
||||
? 'znsf'
|
||||
: item.infoList &&
|
||||
item.infoList.filter((val) => val.attrType == '组件类型')[0]
|
||||
.attrValue == '智能算法'
|
||||
|
@ -123,7 +126,10 @@
|
|||
<span>{{ item.deptName || '--' }}</span>
|
||||
</div>
|
||||
<div v-if="selectCardsname !== '基础设施'">
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.description }}</template>
|
||||
{{ item.description || '--' }}
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom" v-if="selectCardsname !== '基础设施'">
|
||||
|
@ -131,7 +137,7 @@
|
|||
<div v-if="selectCardsname !== '数据资源'">
|
||||
浏览量:{{ item.visits || 0 }}次
|
||||
</div>
|
||||
<div>申请量:{{ item.applyCount || 0 }}次</div>
|
||||
<div>申购量:{{ item.applyCount || 0 }}次</div>
|
||||
<div v-if="selectCardsname === '数据资源'">
|
||||
数据量:{{ item.sjlCount || 0 }}
|
||||
</div>
|
||||
|
@ -191,7 +197,7 @@
|
|||
<a-button
|
||||
type="primary"
|
||||
@click="toView('details', item)"
|
||||
v-if="whoShow1.itShowQingDao"
|
||||
v-if="!whoShow1.itShowBaoTou"
|
||||
>
|
||||
查看详情
|
||||
</a-button>
|
||||
|
@ -418,10 +424,15 @@
|
|||
}
|
||||
function toView(type, item) {
|
||||
if (props.selectCardsname == '数据资源') {
|
||||
if (whoShow1.itShowQingDao) {
|
||||
window.open(
|
||||
'http://15.72.158.81/web/ZWXXSQ/bm/MuluDetail.aspx?zyguid=' +
|
||||
item.guid
|
||||
)
|
||||
} else {
|
||||
window.open(
|
||||
'http://10.134.135.24:30090/#/home')
|
||||
}
|
||||
} else {
|
||||
if (type === 'apply') {
|
||||
console.log('一键申请===================>', item)
|
||||
|
@ -437,6 +448,9 @@
|
|||
resourceName: item.name,
|
||||
time: item.createDate,
|
||||
type: item.type,
|
||||
componentType: item.infoList.filter(
|
||||
(val) => val.attrType == '组件类型'
|
||||
)[0].attrValue,
|
||||
},
|
||||
],
|
||||
deptId: item.deptId,
|
||||
|
|
|
@ -91,7 +91,7 @@
|
|||
const router = useRouter()
|
||||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
let showView = ref('details-view')
|
||||
let showView = ref('')
|
||||
const init = () => {
|
||||
if (id) {
|
||||
selectOne(id).then((res) => {
|
||||
|
|
|
@ -61,9 +61,9 @@
|
|||
</a-button>
|
||||
</div>
|
||||
<i class="boundary"></i>
|
||||
<!-- 添加至购物车 -->
|
||||
<!-- 添加至申购车 -->
|
||||
<a-button type="primary" @click="addShoppingCart" class="buttonAdd">
|
||||
添加至购物车
|
||||
添加至申购车
|
||||
</a-button>
|
||||
<!-- 一键申请 -->
|
||||
<a-button type="primary" @click="apply" class="buttonAdd">
|
||||
|
@ -253,6 +253,8 @@
|
|||
let tableHeight = ref('600')
|
||||
//tab切换点击事件
|
||||
const tabClick = (indexFather, name) => {
|
||||
selectedRowKeys.value = []
|
||||
selectedList.value = []
|
||||
if (clickList.value[indexFather].content.indexOf(name) != -1) {
|
||||
if (name == '视频资源') {
|
||||
tableHeight.value = 330
|
||||
|
@ -404,6 +406,7 @@
|
|||
}
|
||||
//加入申购车
|
||||
const addShoppingCart = () => {
|
||||
if (selectedList.value.length > 0) {
|
||||
sgcInsert({
|
||||
delFlag: '0',
|
||||
resourceId: '8888888880000000001',
|
||||
|
@ -414,6 +417,9 @@
|
|||
message.success('添加申购车成功!')
|
||||
mybus.emit('getSgcNum')
|
||||
})
|
||||
} else {
|
||||
message.error('请选择需要添加申购车的数据')
|
||||
}
|
||||
}
|
||||
// 表格
|
||||
const dataSource = ref([])
|
||||
|
|
|
@ -119,7 +119,7 @@
|
|||
paramsGetResources.type = type
|
||||
if (type === '数据资源' && !whoShow1.value.itShowBaoTou) {
|
||||
getDataResource({
|
||||
serviceName: paramsGetResources.name, //资源名称
|
||||
serviceName: paramsGetResources.name || '', //资源名称
|
||||
orderField: whoShow1.value.itShowQingDao ? 'fbrq' : 'createTime', //排序字段
|
||||
orderType: paramsGetResources.orderType.toLowerCase(), //排序方式:desc,asc
|
||||
pageNum: paramsGetResources.pageNum, //页码
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<div class="home-header" :class="scrollTop > 500 ? 'white' : ''">
|
||||
<div class="name">城市云脑能力管理中心</div>
|
||||
<div class="name">
|
||||
<div class="name-bg"></div>
|
||||
城市云脑通用能力服务平台
|
||||
</div>
|
||||
<div
|
||||
v-for="item in navList"
|
||||
:key="item.key"
|
||||
|
@ -133,6 +136,15 @@
|
|||
font-size: 0.22rem;
|
||||
font-family: header-typeface;
|
||||
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 {
|
||||
width: 1.44rem;
|
||||
|
|
|
@ -80,26 +80,32 @@
|
|||
<a-select
|
||||
ref="select"
|
||||
style="width: 1.4rem; height: 0.4rem"
|
||||
v-for="item in fabubumen"
|
||||
:key="item"
|
||||
v-model="item.value"
|
||||
placeholder="请选择省份"
|
||||
@change="qushijiedao"
|
||||
:key="fabubumen"
|
||||
>
|
||||
<a-select-option
|
||||
:value="item.name"
|
||||
v-model="item.value"
|
||||
v-for="item in fabubumen"
|
||||
:key="item"
|
||||
>
|
||||
<a-select-option :value="item.name">
|
||||
{{ item.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-select
|
||||
ref="select"
|
||||
style="width: 1.4rem; height: 0.4rem"
|
||||
v-for="item in shi"
|
||||
:key="item"
|
||||
v-model:value="item.value"
|
||||
@change="qushijiedao"
|
||||
placeholder="请选择市"
|
||||
:key="shi"
|
||||
>
|
||||
<a-select-option
|
||||
:value="item.name"
|
||||
v-model:value="item.value"
|
||||
v-for="item in shi"
|
||||
:key="item"
|
||||
>
|
||||
<a-select-option :value="item.name">
|
||||
{{ item.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
|
@ -167,9 +173,9 @@
|
|||
id: '100001',
|
||||
},
|
||||
])
|
||||
let shi = ref(['请先选择省份'])
|
||||
let qu = ref(['请先选择市'])
|
||||
let jiedao = ref(['请先选择区'])
|
||||
let shi = ref([])
|
||||
let qu = ref([])
|
||||
let jiedao = ref([])
|
||||
function qushijiedao(value) {
|
||||
let danwei = value.substr(-1)
|
||||
// name.substr(-1)
|
||||
|
|
|
@ -99,6 +99,8 @@
|
|||
path: '/DetailsPageconetent',
|
||||
query: {
|
||||
select: type,
|
||||
tecHnosphere: '',
|
||||
appLiCation: ''
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
<div class="newHome">
|
||||
<new-home-header></new-home-header>
|
||||
|
@ -6,6 +13,7 @@
|
|||
<capability-convergence></capability-convergence>
|
||||
<popular-ability></popular-ability>
|
||||
<latest-capabilities></latest-capabilities>
|
||||
<resource-aggregation></resource-aggregation>
|
||||
<recommendation-ability></recommendation-ability>
|
||||
<work-dynamics></work-dynamics>
|
||||
<home-footer></home-footer>
|
||||
|
@ -18,6 +26,7 @@
|
|||
import CapabilityConvergence from '@/views/newHome/components/CapabilityConvergence'
|
||||
import PopularAbility from '@/views/newHome/components/PopularAbility'
|
||||
import LatestCapabilities from '@/views/newHome/components/LatestCapabilities'
|
||||
import ResourceAggregation from '@/views/abilityStatistics/components/ResourceAggregation.vue'
|
||||
import RecommendationAbility from '@/views/newHome/components/RecommendationAbility'
|
||||
import WorkDynamics from '@/views/newHome/components/WorkDynamics'
|
||||
import HomeFooter from '@/views/newHome/components/Footer'
|
||||
|
@ -37,4 +46,7 @@
|
|||
font-family: num-typeface;
|
||||
}
|
||||
}
|
||||
.resource-aggregation {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -50,7 +50,7 @@
|
|||
>
|
||||
{{ item.name }}
|
||||
</span>
|
||||
<span class="time">收藏时间:{{ item.createDate }}</span>
|
||||
<span class="time">收藏时间:{{ item.updateDate }}</span>
|
||||
<svg
|
||||
t="1652233950228"
|
||||
class="icon"
|
||||
|
@ -238,6 +238,7 @@
|
|||
type: val.resourceDTO.type,
|
||||
resourceId: val.resourceId,
|
||||
createDate: val.createDate,
|
||||
updateDate: val.updateDate,
|
||||
description: val.resourceDTO.description,
|
||||
delFlag: val.resourceDTO.delFlag,
|
||||
}
|
||||
|
|
|
@ -49,7 +49,7 @@
|
|||
<template #title>{{ item.name }}</template>
|
||||
<div class="content-body-title">
|
||||
<span
|
||||
v-if="item.name === '申请摄像头列表'"
|
||||
v-if="item.name === '申请摄像头列表' && item.ended"
|
||||
@click="showVideoList(item)"
|
||||
>
|
||||
名称:{{ item.name }}
|
||||
|
|
|
@ -97,7 +97,8 @@
|
|||
<a-list-item-meta
|
||||
:description="
|
||||
item.description ||
|
||||
(item.note1 &&
|
||||
(JSON.parse(item.note1) &&
|
||||
JSON.parse(item.note1)[0] &&
|
||||
JSON.parse(item.note1)[0].channelName +
|
||||
'等' +
|
||||
JSON.parse(item.note1).length +
|
||||
|
@ -107,14 +108,48 @@
|
|||
style="position: relative"
|
||||
>
|
||||
<template #title>
|
||||
<div>
|
||||
<span
|
||||
@click="showItem(item.id, item.type, item.delFlag)"
|
||||
@click="
|
||||
showItem(
|
||||
item.resourceId,
|
||||
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>
|
||||
<svg
|
||||
t="1652233950228"
|
||||
class="icon"
|
||||
|
@ -192,6 +227,24 @@
|
|||
</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
|
||||
v-model:current="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
|
@ -223,6 +276,8 @@
|
|||
const pageNum = ref('1')
|
||||
const pageSize = ref('99999')
|
||||
// const pageSizeOptions = ref(['5', '10', '20'])
|
||||
const videoVisible = ref(false)
|
||||
const xVideoList = ref([])
|
||||
const total = ref(0)
|
||||
const load = ref(0)
|
||||
// 多选框
|
||||
|
@ -232,6 +287,12 @@
|
|||
const checkAll = ref(false)
|
||||
const checkNum = ref(0)
|
||||
const showKey = ref(0)
|
||||
const columns = ref([
|
||||
{
|
||||
title: '摄像头名称',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
])
|
||||
// 筛选条件
|
||||
const name = ref('')
|
||||
const type = ref('')
|
||||
|
@ -672,11 +733,34 @@
|
|||
})
|
||||
}
|
||||
}
|
||||
|
||||
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) => {
|
||||
// console.log(e)
|
||||
}
|
||||
// 详情
|
||||
const showItem = (id, type, delFlag) => {
|
||||
const showItem = (id, type, delFlag, note1) => {
|
||||
if (type == '基础设施') {
|
||||
// console.log()
|
||||
let arr = JSON.parse(note1)
|
||||
xVideoList.value = []
|
||||
arr.map((val) => {
|
||||
xVideoList.value.push({ name: val.channelName, key: val.channelId })
|
||||
})
|
||||
videoVisible.value = true
|
||||
} else {
|
||||
if (delFlag == 0) {
|
||||
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
|
||||
mybus.emit('tabsChange', { flag: id })
|
||||
|
@ -688,6 +772,7 @@
|
|||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
// 一键申请
|
||||
const apply = () => {
|
||||
// list.value.forEach((val) => {
|
||||
|
@ -919,4 +1004,8 @@
|
|||
background: url('~@/assets/home/ywzj_square.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
:deep(.ant-list-item-meta-title) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -9,83 +9,38 @@
|
|||
<div class="form-container">
|
||||
<div v-if="applySuccess">
|
||||
<div class="title">申请人信息</div>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formName"
|
||||
name="basic"
|
||||
:label-col="{ style: { width: '106px' } }"
|
||||
:wrapper-col="{ style: { width: '230px' } }"
|
||||
labelAlign="left"
|
||||
autocomplete="off"
|
||||
>
|
||||
<a-form ref="formRef" :model="formName" name="basic" :label-col="{ style: { width: '106px' } }"
|
||||
:wrapper-col="{ style: { width: '230px' } }" labelAlign="left" autocomplete="off">
|
||||
<div class="base-info">
|
||||
<a-form-item
|
||||
label="申请人"
|
||||
name="applyUserName"
|
||||
:rules="[{ required: true, message: '请输入申请人' }]"
|
||||
>
|
||||
<a-input
|
||||
placeholder="请输入申请人"
|
||||
v-model:value="formName.applyUserName"
|
||||
/>
|
||||
<a-form-item label="申请人" name="applyUserName" :rules="[{ required: true, message: '请输入申请人' }]">
|
||||
<a-input placeholder="请输入申请人" v-model:value="formName.applyUserName" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
style="margin: 0 22px"
|
||||
label="申请人电话"
|
||||
name="applyUserPhone"
|
||||
:rules="[
|
||||
<a-form-item style="margin: 0 22px" label="申请人电话" name="applyUserPhone" :rules="[
|
||||
{
|
||||
required: true,
|
||||
pattern: /^1[3456789]\d{9}$/,
|
||||
message: '请输入正确的电话号码',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
placeholder="请输入申请人电话"
|
||||
v-model:value="formName.applyUserPhone"
|
||||
/>
|
||||
]">
|
||||
<a-input placeholder="请输入申请人电话" v-model:value="formName.applyUserPhone" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="申请单位"
|
||||
name="applyUserDeptName"
|
||||
:rules="[{ required: true, message: '请输入申请单位' }]"
|
||||
>
|
||||
<a-input
|
||||
placeholder="请输入申请单位"
|
||||
v-model:value="formName.applyUserDeptName"
|
||||
/>
|
||||
<a-form-item label="申请单位" name="applyUserDeptName" :rules="[{ required: true, message: '请输入申请单位' }]">
|
||||
<a-input placeholder="请输入申请单位" v-model:value="formName.applyUserDeptName" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
|
||||
<div class="title">需求信息</div>
|
||||
|
||||
<a-form-item
|
||||
style="margin-bottom: 10px"
|
||||
label="需求标题"
|
||||
name="demandSubject"
|
||||
:rules="[{ required: true, message: '请输入需求标题' }]"
|
||||
>
|
||||
<a-input
|
||||
style="width: 350px"
|
||||
v-model:value="formName.demandSubject"
|
||||
/>
|
||||
<a-form-item style="margin-bottom: 10px" label="需求标题" name="demandSubject"
|
||||
:rules="[{ required: true, message: '请输入需求标题' }]">
|
||||
<a-input style="width: 350px" v-model:value="formName.demandSubject" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
style="margin-bottom: 10px"
|
||||
label="需求类型"
|
||||
name="detailsType"
|
||||
:rules="[{ required: true, message: '请选择需求类型' }]"
|
||||
>
|
||||
<a-select
|
||||
ref="select"
|
||||
v-model:value="formName.detailsType"
|
||||
@focus="focus"
|
||||
style="width: 200px"
|
||||
>
|
||||
<a-form-item style="margin-bottom: 10px" label="需求类型" 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>
|
||||
|
@ -94,26 +49,14 @@
|
|||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="应用领域"
|
||||
name="detailsField"
|
||||
style="width: 350px"
|
||||
:rules="[{ required: true, message: '请输入应用领域' }]"
|
||||
>
|
||||
<a-input
|
||||
placeholder="请输入应用领域"
|
||||
v-model:value="formName.detailsField"
|
||||
/>
|
||||
<a-form-item label="应用领域" name="detailsField" style="width: 350px"
|
||||
:rules="[{ required: true, message: '请输入应用领域' }]">
|
||||
<a-input placeholder="请输入应用领域" v-model:value="formName.detailsField" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
style="margin-bottom: 10px"
|
||||
label="需求描述"
|
||||
name="demandDetails"
|
||||
:rules="[{ required: true, message: '请输入需求描述' }]"
|
||||
>
|
||||
<a-textarea
|
||||
style="
|
||||
<a-form-item style="margin-bottom: 10px" label="需求描述" name="demandDetails"
|
||||
:rules="[{ required: true, message: '请输入需求描述' }]">
|
||||
<a-textarea style="
|
||||
width: 500px;
|
||||
height: 150px;
|
||||
font-size: 16px;
|
||||
|
@ -123,24 +66,12 @@
|
|||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
resize: none;
|
||||
"
|
||||
v-model:value="formName.demandDetails"
|
||||
/>
|
||||
" v-model:value="formName.demandDetails" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
style="color: #666; font-size: 16px"
|
||||
label="附件上传"
|
||||
name="applyDoc"
|
||||
>
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
name="file"
|
||||
:action="upLoadUrl"
|
||||
:headers="headers"
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-button
|
||||
style="
|
||||
<a-form-item style="color: #666; font-size: 16px" label="附件上传" name="applyDoc">
|
||||
<a-upload v-model:file-list="fileList" name="file" :action="upLoadUrl" :headers="headers"
|
||||
@change="handleChange">
|
||||
<a-button style="
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
|
@ -151,8 +82,7 @@
|
|||
border: 1px solid #bbd3ef;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
"
|
||||
>
|
||||
">
|
||||
<upload-outlined></upload-outlined>
|
||||
文件上传
|
||||
</a-button>
|
||||
|
@ -163,8 +93,7 @@
|
|||
</a-form-item>
|
||||
|
||||
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
|
||||
<a-button
|
||||
style="
|
||||
<a-button style="
|
||||
width: 80px;
|
||||
height: 38px;
|
||||
margin-right: 20px;
|
||||
|
@ -175,15 +104,10 @@
|
|||
border: none;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
"
|
||||
type="primary"
|
||||
html-type="cancle"
|
||||
@click="signOut"
|
||||
>
|
||||
" type="primary" html-type="cancle" @click="signOut">
|
||||
退出申请
|
||||
</a-button>
|
||||
<a-button
|
||||
style="
|
||||
<a-button style="
|
||||
width: 80px;
|
||||
height: 38px;
|
||||
background: #0087ff;
|
||||
|
@ -193,11 +117,7 @@
|
|||
border: none;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
@click="processStartHandle()"
|
||||
>
|
||||
" type="primary" html-type="submit" @click="processStartHandle()">
|
||||
提交申请
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
@ -296,10 +216,10 @@
|
|||
}
|
||||
|
||||
if (info.file.status === 'done') {
|
||||
message.success(`${info.file.name} file uploaded successfully`)
|
||||
message.success(`${info.file.name} 文件上传成功`)
|
||||
formName.enclosure = info.file.response.data
|
||||
} else if (info.file.status === 'error') {
|
||||
message.error(`${info.file.name} file upload failed.`)
|
||||
message.error(`${info.file.name} 文件上传失败`)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -362,6 +282,7 @@
|
|||
margin: 90px auto 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
aside {
|
||||
width: 282px;
|
||||
height: 96%;
|
||||
|
@ -369,6 +290,7 @@
|
|||
background-color: #fff;
|
||||
margin: 1% 0 3%;
|
||||
}
|
||||
|
||||
article {
|
||||
width: 1090px;
|
||||
height: 99%;
|
||||
|
@ -376,8 +298,10 @@
|
|||
background-color: #fff;
|
||||
margin: 5% auto;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
padding: 20px 20px 30px 20px;
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
|
@ -385,18 +309,22 @@
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.base-info {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-label) {
|
||||
label {
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-required) {
|
||||
&::before {
|
||||
font-size: 8px;
|
||||
|
@ -408,11 +336,13 @@
|
|||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.success {
|
||||
div {
|
||||
width: 100px;
|
||||
margin: 80px auto 40px;
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
{}
|
Loading…
Reference in New Issue