Merge branch 'hi-ucs-dev' into release

This commit is contained in:
wuhongjian 2022-07-06 18:45:20 +08:00
commit 695aa6867d
75 changed files with 4999 additions and 4195 deletions

View File

@ -55,12 +55,16 @@
width="50" width="50"
></el-table-column> ></el-table-column>
<af-table-column <af-table-column
:show-overflow-tooltip="true"
width="280"
prop="name" prop="name"
label="组件名称" label="组件名称"
header-align="center" header-align="center"
align="center" align="center"
></af-table-column> ></af-table-column>
<af-table-column <af-table-column
:show-overflow-tooltip="true"
width="300"
v-for="(item, index) in dataList[0].infoList" v-for="(item, index) in dataList[0].infoList"
:key="index" :key="index"
:label="item.attrType" :label="item.attrType"
@ -126,32 +130,32 @@
</template> </template>
<script> <script>
import mixinViewModule from "@/mixins/view-module"; import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from "./bsabilityai-add-or-update"; import AddOrUpdate from './bsabilityai-add-or-update'
import dictionaries from "@/utils/dictionaries"; import dictionaries from '@/utils/dictionaries'
import qs from "qs"; import qs from 'qs'
import RelateApplication from "./bsabilityai-relate-application.vue" import RelateApplication from './bsabilityai-relate-application.vue'
export default { export default {
mixins: [mixinViewModule], mixins: [mixinViewModule],
data() { data () {
return { return {
mixinViewModuleOptions: { mixinViewModuleOptions: {
getDataListURL: "/resource/page", getDataListURL: '/resource/page',
getDataListIsPage: true, getDataListIsPage: true,
exportURL: "/ability/bsabilityai/export", exportURL: '/ability/bsabilityai/export',
deleteURL: "/resource/delete", deleteURL: '/resource/delete',
deleteIsBatch: true, deleteIsBatch: true
}, },
disabled: false, disabled: false,
sceneArr: dictionaries.sceneArr, sceneArr: dictionaries.sceneArr,
fieldArr: dictionaries.fieldArr, fieldArr: dictionaries.fieldArr,
shareFormArr: dictionaries.shareFormArr, shareFormArr: dictionaries.shareFormArr,
dataForm: { dataForm: {
name: "", name: '',
creator: "", creator: '',
delFlag: 0, delFlag: 0,
selectType: 0, selectType: 0,
type: "组件服务", type: '组件服务'
}, },
qp: false, qp: false,
// //
@ -161,190 +165,193 @@ export default {
responseData: {}, responseData: {},
linkType: '' linkType: ''
} }
}; }
}, },
watch: {}, watch: {},
components: { components: {
AddOrUpdate, AddOrUpdate,
RelateApplication RelateApplication
}, },
created() { created () {
this.dataForm.name = ""; this.dataForm.name = ''
this.dataForm.type = "组件服务"; this.dataForm.type = '组件服务'
}, },
mounted() { mounted () {
window.addEventListener("resize", this.a); window.addEventListener('resize', this.a)
this.fullScreen(); this.fullScreen()
}, },
methods: { methods: {
reset() { reset () {
this.$http this.$http
.get( .get(
this.mixinViewModuleOptions.getDataListURL + this.mixinViewModuleOptions.getDataListURL +
"?" + '?' +
qs.stringify({ qs.stringify({
// order: this.order, // order: this.order,
// orderField: this.orderField, // orderField: this.orderField,
// type: '', // type: '',
page: 1, page: 1,
limit: 10, limit: 10,
creator: "", creator: '',
selectType: 0, selectType: 0,
delFlag: 0, delFlag: 0,
type: "组件服务", type: '组件服务',
name: "", name: ''
}) })
) )
.then(({ data: res }) => { .then(({ data: res }) => {
this.dataForm.name = ""; this.dataForm.name = ''
if (res.code !== 0) { if (res.code !== 0) {
this.dataList = []; this.dataList = []
this.total = 0; this.total = 0
return this.$message.error(res.msg); return this.$message.error(res.msg)
} }
this.dataList = this.mixinViewModuleOptions.getDataListIsPage this.dataList = this.mixinViewModuleOptions.getDataListIsPage
? res.data.list ? res.data.list
: res.data; : res.data
this.total = this.mixinViewModuleOptions.getDataListIsPage this.total = this.mixinViewModuleOptions.getDataListIsPage
? res.data.total ? res.data.total
: 0; : 0
if (this.mixinViewModuleOptions.requestCallback) { if (this.mixinViewModuleOptions.requestCallback) {
this.mixinViewModuleOptions.requestCallback(res.data); this.mixinViewModuleOptions.requestCallback(res.data)
} }
this.dataListLoading = false; this.dataListLoading = false
}) })
.catch(() => { .catch(() => {
this.dataListLoading = false; this.dataListLoading = false
}); })
}, },
findValue(list, type) { findValue (list, type) {
const found = list.find((item) => item.attrType === type); const found = list.find((item) => item.attrType === type)
if (found) { if (found) {
return found.attrValue; return found.attrValue
} else { } else {
return "暂无数据"; return '暂无数据'
} }
}, },
showDetail(val) { showDetail (val) {
// this.addOrUpdateHandle(id) // this.addOrUpdateHandle(id)
this.addOrUpdateVisible = true; this.addOrUpdateVisible = true
this.disabled = false; this.disabled = false
console.log("显示数据=============》", val); console.log('显示数据=============》', val)
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.addOrUpdate.UpdateState = false; this.$refs.addOrUpdate.UpdateState = false
this.$refs.addOrUpdate.dataFormShowDetails = val; this.$refs.addOrUpdate.dataFormShowDetails = val
this.$refs.addOrUpdate.init(); this.$refs.addOrUpdate.init()
}); })
this.disabled = true; this.disabled = true
}, },
showDocument(val) { showDocument (val) {
console.log(val); console.log(val)
window.open( window.open(
window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type, window.SITE_CONFIG.frontUrl + '?id=' + val.id + '&&type=' + val.type,
"_blank" '_blank'
); )
}, },
getDataList2(names) { getDataList2 (names) {
if (names != null) { if (names != null) {
this.$http this.$http
.get( .get(
this.mixinViewModuleOptions.getDataListURL + this.mixinViewModuleOptions.getDataListURL +
"?" + '?' +
qs.stringify({ qs.stringify({
// order: this.order, // order: this.order,
// orderField: this.orderField, // orderField: this.orderField,
// type: '', // type: '',
pageNum: 1, pageNum: 1,
pageSize: this.limit, pageSize: this.limit,
type: "组件服务", type: '组件服务',
creator: "", creator: '',
selectType: 0, selectType: 0,
delFlag: 0, delFlag: 0,
name: names, name: names
}) })
) )
.then(({ data: res }) => { .then(({ data: res }) => {
console.log("res", res); console.log('res', res)
if (res.code !== 0) { if (res.code !== 0) {
this.dataList = []; this.dataList = []
this.total = 0; this.total = 0
return this.$message.error(res.msg); return this.$message.error(res.msg)
} }
if (res.data.list.length !== 0) { if (res.data.list.length !== 0) {
this.dataList = res.data.list; this.dataList = res.data.list
this.total = this.mixinViewModuleOptions.getDataListIsPage this.total = this.mixinViewModuleOptions.getDataListIsPage
? res.data.total ? res.data.total
: 0; : 0
if (this.mixinViewModuleOptions.requestCallback) { if (this.mixinViewModuleOptions.requestCallback) {
this.mixinViewModuleOptions.requestCallback(res.data); this.mixinViewModuleOptions.requestCallback(res.data)
} }
this.dataListLoading = false; this.dataListLoading = false
} else { } else {
this.$message.error("未查询到相关信息"); this.$message.error('未查询到相关信息')
this.reset(); this.reset()
} }
}) })
.catch(() => { .catch(() => {
this.dataListLoading = false; this.dataListLoading = false
}); })
} else { } else {
this.$message.error("查询信息不能为空"); this.$message.error('查询信息不能为空')
} }
}, },
fullScreen() { fullScreen () {
if (window.outerHeight === screen.availHeight) { if (window.outerHeight === screen.availHeight) {
if (window.outerWidth === screen.availWidth) { if (window.outerWidth === screen.availWidth) {
console.log( console.log(
"全屏1", '全屏1',
window.outerHeight, window.outerHeight,
screen.availHeight, screen.availHeight,
window.outerWidth, window.outerWidth,
screen.availWidth screen.availWidth
); )
this.qp = false; this.qp = false
} else { } else {
console.log( console.log(
"不是全屏2", '不是全屏2',
window.outerHeight, window.outerHeight,
screen.availHeight, screen.availHeight,
window.outerWidth, window.outerWidth,
screen.availWidth screen.availWidth
); )
this.qp = true; this.qp = true
} }
} else { } else {
console.log( console.log(
"不是全屏3", '不是全屏3',
window.outerHeight, window.outerHeight,
screen.availHeight, screen.availHeight,
window.outerWidth, window.outerWidth,
screen.availWidth screen.availWidth
); )
this.qp = true; this.qp = true
} }
}, },
// //
showRelateApplication(row){ showRelateApplication (row) {
this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => { this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
if( res && res.data ) { if (res && res.data) {
this.relateApplicationVisible = true; this.relateApplicationVisible = true
this.relateInfo = { this.relateInfo = {
id: row.id, id: row.id,
responseData: res.data, responseData: res.data,
linkType: '2' linkType: '2'
}; }
} }
}).catch(() => { }) }).catch(() => { })
}, },
// //
handleIsShowRelatePopup(type) { handleIsShowRelatePopup (type) {
this.relateApplicationVisible = type; this.relateApplicationVisible = type
} }
}, }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-tooltip__popper { .el-tooltip__popper {
max-width: 50%; max-width: 50%;
} }
::v-deep .el-table .cell{
width: 200px;
}
</style> </style>

View File

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

View File

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

View File

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

View File

@ -17,7 +17,7 @@
</div> </div>
<div class='container-body3'> <div class='container-body3'>
<span style='font-size:18px;color;#000000;'>使用组件应用领域分布情况</span> <span style='font-size:18px;color;#000000;'>使用组件应用领域分布情况</span>
<div id="main8" style="width: 400px;height:200px;"></div> <div id="main3" style="width: 400px;height:200px;"></div>
</div> </div>
<div class='container-body4'> <div class='container-body4'>
<div style='margin-bottom:30px'> <div style='margin-bottom:30px'>
@ -36,7 +36,7 @@
</div> </div>
<div class='container-body5'> <div class='container-body5'>
<div style='margin-bottom:30px'> <div style='margin-bottom:30px'>
<span style='font-size:18px;color;#000000;'>使用组件评分Top5</span> <span style='font-size:18px;color;#000000;'>使用组件评分</span>
<img src="@/assets/img/TOP5.png" style='margin-left:10px'> <img src="@/assets/img/TOP5.png" style='margin-left:10px'>
</div> </div>
<div v-for="(item,index) in applicationList" :key='index' > <div v-for="(item,index) in applicationList" :key='index' >
@ -174,9 +174,7 @@ export default {
value:item.total, value:item.total,
name:item.type name:item.type
} }
const newList=[]
this.data3.push(single) this.data3.push(single)
// this.data2=newList
this.myEcharts3() this.myEcharts3()
}) })
}) })
@ -231,7 +229,7 @@ export default {
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += Number(data[i].value);
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }
@ -295,7 +293,7 @@ export default {
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += Number(data[i].value);
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }
@ -361,13 +359,14 @@ export default {
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += Number(data[i].value);
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }
} }
var v = tarValue; // var v = tarValue;
var p = Math.round(((tarValue / total) * 100)); var p = Math.round(((tarValue / total) * 100));
console.log('@@@@', tarValue, total)
return `{a|${name}} {b|${p}%}`; return `{a|${name}} {b|${p}%}`;
}, },
itemStyle:{}, itemStyle:{},
@ -428,7 +427,7 @@ export default {
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
backBtn(){ backBtn(){
this.$emit('closeChild') this.$emit('closeChild2')
} }
} }
} }
@ -541,9 +540,13 @@ export default {
position:absolute; position:absolute;
display: flex; display: flex;
margin-left:90px; margin-left:90px;
width:200px;
margin-top:5px; margin-top:5px;
color:#333333; color:#333333;
font-size: 16px; font-size: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.count-style{ .count-style{
position:absolute; position:absolute;

View File

@ -96,7 +96,7 @@
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column v-if="this.departmentId===2" <el-table-column v-if="this.departmentId===2"
prop="resourceCarNum" prop="resourceCallNum"
label="申请总数" label="申请总数"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
@ -121,7 +121,7 @@
</div> </div>
</el-card> </el-card>
</div> </div>
<component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-used> <component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild2='closeChild2'></component-used>
<component-services v-if='servicesIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-services> <component-services v-if='servicesIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-services>
<application-resources v-if='resourcesIsShow' :tableId='tableId' :fatherId='fatherId' @closeApplication='closeApplication'></application-resources> <application-resources v-if='resourcesIsShow' :tableId='tableId' :fatherId='fatherId' @closeApplication='closeApplication'></application-resources>
</div> </div>
@ -362,10 +362,18 @@ export default {
closeChild(){ closeChild(){
this.homeIsShow=true this.homeIsShow=true
this.servicesIsShow=false this.servicesIsShow=false
this. handleCurrentChange(1)
},
closeChild2(){
this.homeIsShow=true
this.UsedIsShow=false
this. handleCurrentChange(1)
}, },
closeApplication(){ closeApplication(){
this.homeIsShow=true this.homeIsShow=true
this.resourcesIsShow=false this.resourcesIsShow=false
this. handleCurrentChange(1)
} }
}, },

View File

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

View File

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

View File

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

File diff suppressed because one or more lines are too long

View File

@ -2,12 +2,12 @@
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2020-07-07 16:03:23 * @Date: 2020-07-07 16:03:23
* @LastEditors: hisense.wuhongjian * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-07-04 11:56:58 * @LastEditTime: 2022-07-06 18:44:54
* @Description: 数据资源参数配置 * @Description: 数据资源参数配置
*/ */
const newLocation = 'qingdao' //const newLocation = 'qingdao'
// const newLocation = 'baotou' // const newLocation = 'baotou'
// const newLocation = 'xihaian' const newLocation = 'xihaian'
// //
const whoShow = {} const whoShow = {}
@ -61,12 +61,12 @@ if (newLocation === 'qingdao') {
{ {
name: '基础设施', name: '基础设施',
key: 'lsjcss', key: 'lsjcss',
num: '20135', num: '20135',
}, },
{ {
name: '数据资源', name: '数据资源',
key: 'lsjcss', key: 'lsjcss',
num: '857', num: '857',
}, },
{ {
name: '应用资源', name: '应用资源',
@ -78,12 +78,12 @@ if (newLocation === 'qingdao') {
{ {
name: '基础设施', name: '基础设施',
key: 'xhajcss', key: 'xhajcss',
num: '35282', num: '35282',
}, },
{ {
name: '数据资源', name: '数据资源',
key: 'xhajcss', key: 'xhajcss',
num: '11', num: '11',
}, },
{ {
name: '应用资源', name: '应用资源',
@ -162,7 +162,7 @@ else if (newLocation === 'xihaian') {
footerDataList.footerList = { footerDataList.footerList = {
company: { company: {
left: '青岛西海岸新区大数据发展促进局建设', left: '青岛西海岸新区大数据发展促进局建设',
right: 'v0.81', right: 'v0.8.1.5',
}, },
address: [ address: [
{ {

View File

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

View File

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

View File

@ -199,7 +199,14 @@ export function updateVisits(params) {
params, params,
}) })
} }
//
export function browsingInsert(data) {
return request({
url: '/resourceBrowse/insert',
method: 'post',
data,
})
}
// //
export function selectNewest(data) { export function selectNewest(data) {
return request({ return request({

View File

@ -215,3 +215,19 @@ export function selectResourceListByDept(params) {
params, params,
}) })
} }
//
export function queryApplicationRelByResourceId(params) {
return request({
url: '/dataResourceRel/queryApplicationRelByResourceId',
method: 'get',
params,
})
}
//
export function queryResourceRelByKeyId(params) {
return request({
url: '/dataResourceRel/queryResourceRelByKeyId',
method: 'get',
params,
})
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View File

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

View File

@ -2,7 +2,7 @@
* @Author: hisense.zhangfeihu * @Author: hisense.zhangfeihu
* @Date: 2022-06-13 10:22:27 * @Date: 2022-06-13 10:22:27
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-20 18:58:40 * @LastEditTime: 2022-07-05 11:25:25
* @Description: 赋能案例-详情页 * @Description: 赋能案例-详情页
--> -->
<template> <template>
@ -131,19 +131,16 @@
tabName.value = '案例背景' tabName.value = '案例背景'
selectOne(val).then((res) => { selectOne(val).then((res) => {
res.data.data.infoList.map((item, index) => { res.data.data.infoList.map((item, index) => {
console.log('res.data.data.infoList', res.data.data.infoList)
if (item.attrType == '图片') { if (item.attrType == '图片') {
res.data.data.infoList.splice(index, 1) res.data.data.infoList.splice(index, 1)
} }
}) })
res.data.data.infoList.map((item, index) => { res.data.data.infoList.map((item, index) => {
console.log('res.data.data.infoList', res.data.data.infoList)
if (item.attrType == '应用领域') { if (item.attrType == '应用领域') {
res.data.data.infoList.splice(index, 1) res.data.data.infoList.splice(index, 1)
} }
}) })
dataFrom.value = res.data.data dataFrom.value = res.data.data
console.log('dataFrom.value', dataFrom.value)
}) })
} }
// //
@ -165,84 +162,113 @@
} }
}) })
dataList.value = res.data.data.records dataList.value = res.data.data.records
console.log('dataList.value', dataList.value)
}) })
} }
// //
watch( watch(
() => router.currentRoute.value.query.id, () => router.currentRoute.value.query.id,
() => { () => {
if (router.currentRoute.value.name == 'AssignCaseDetailPage') {
init() init()
}
}, },
{ immediate: true } { immediate: true }
) )
//tab //tab
const tabSwitch = (item, index) => { const tabSwitch = (item, index) => {
tabName.value = item.attrType tabName.value = item.attrType
if (index != 0 && index != 3) {
let top = let top =
document.querySelector( document.querySelector(
'#assign-case-detail-page-content-center-card' + index '#assign-case-detail-page-content-center-card' + index
).offsetTop - ).offsetTop -
document.querySelector( 330 -
'#assign-case-detail-page-content-center-card' + (index - 1) 60 * index
).offsetHeight
let view = document.getElementById(
'assign-case-detail-page-content-left-border-id'
)
view.style.top =
document.querySelector(
'#assign-case-detail-page-content-center-card' + (index - 1)
).offsetHeight + 'px'
console.log('view.style.top', view.style.top)
document.documentElement.scrollTop = top document.documentElement.scrollTop = top
document.body.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(() => { onMounted(() => {
init() // init()
// console.clear() // console.clear()
window.addEventListener('scroll', () => { window.addEventListener('scroll', () => {
domArr.value = document.querySelectorAll( let top = document.documentElement.scrollTop
'.assign-case-detail-page-content-center-card'
)
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 {
if ( if (
scrollTop.value >= domArr.value[i].offsetTop - 50 && top <
scrollTop.value <= domArr.value[i + 1].offsetTop - 50 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-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
position: fixed; position: fixed;
top: 4.9rem; top: 3.9rem;
div { div {
height: 0.3rem; height: 0.3rem;
padding-right: 0.7rem; padding-right: 0.7rem;

View File

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

View File

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

View File

@ -168,6 +168,7 @@
} }
}) })
} else { } else {
callTheTrendData.value.snum = ['0', '0', '0', '0', '0', '0', '0']
callTheTrend(callTheTrendData.value) callTheTrend(callTheTrendData.value)
} }
} else { } else {
@ -202,6 +203,39 @@
} }
}) })
} else { } else {
callTheTrendData.value.snum = [
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
'0',
]
callTheTrend(callTheTrendData.value) callTheTrend(callTheTrendData.value)
} }
} }
@ -253,6 +287,7 @@
], ],
yAxis: [ yAxis: [
{ {
minInterval: 1,
name: '个', name: '个',
type: 'value', type: 'value',
axisTick: { axisTick: {

View File

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

View File

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

View File

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

View File

@ -16,21 +16,14 @@
<template v-if="title.isConfigure"> <template v-if="title.isConfigure">
<div class="bottom"> <div class="bottom">
<div class="items" v-if="data[title.name].length > 0"> <div class="items" v-if="data[title.name].length > 0">
<div <div class="item" v-for="(val, index) in data[title.name]" :key="'key1' + val.name + index">
class="item"
v-for="(val, index) in data[title.name]"
:key="'key1' + val.name + index"
>
<p> <p>
<span>{{ title.name }}-{{ index + 1 }}</span> <span>{{ title.name }}-{{ index + 1 }}</span>
<span></span> <span></span>
</p> </p>
<p <p v-for="attr in props.configure.filter(
v-for="attr in props.configure.filter(
(item, index2) => item.name === title.name (item, index2) => item.name === title.name
)[0].list" )[0].list" :key="'key2' + attr.name + index2">
:key="'key2' + attr.name + index2"
>
<span>{{ attr.name }}</span> <span>{{ attr.name }}</span>
<span v-if="attr.type === 'image'"> <span v-if="attr.type === 'image'">
<a-image :width="85" :height="60" :src="val.img" /> <a-image :width="85" :height="60" :src="val.img" />
@ -44,51 +37,19 @@
</div> </div>
</div> </div>
<div class="add">添加更多{{ title.name }}</div> <div class="add">添加更多{{ title.name }}</div>
<div <div class="form" v-for="(val, index) in props.configure.filter(
class="form"
v-for="(val, index) in props.configure.filter(
(item) => item.name === title.name (item) => item.name === title.name
)[0].list" )[0].list" :key="'key3' + val.name + index">
:key="'key3' + val.name + index"
>
<span>{{ val.name }}</span> <span>{{ val.name }}</span>
<a-input <a-input v-model:value="val.note1" :maxlength="24" :placeholder="'请填写' + val.name + ',不超过24个字符'"
v-model:value="val.note1" v-if="val.type == 'input'" />
:maxlength="24" <a-textarea v-model:value="val.note1" :showCount="true" :maxlength="200" :placeholder="'请填写' + val.name"
:placeholder="'请填写' + val.name + ',不超过24个字符'" v-else-if="val.type == 'textArea'" />
v-if="val.type == 'input'" <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-textarea <a-radio-group v-model:value="val.note1" :options="val.options" v-else-if="val.type == 'radio'" />
v-model:value="val.note1" <upload :key="showKey" type="图片" btnName="上传图片" :maxCount="1" :data="val" :list="[]" tip="支持图片类型大小不超过100M"
:showCount="true" v-else-if="val.type == 'image'"></upload>
: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>
<div class="submit"> <div class="submit">
<a-button type="primary" @click="add(title.name)">提交</a-button> <a-button type="primary" @click="add(title.name)">提交</a-button>
@ -99,126 +60,77 @@
<div class="bottom"> <div class="bottom">
<div class="form" v-for="item in title.children" :key="item.id"> <div class="form" v-for="item in title.children" :key="item.id">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
<a-input <a-input v-if="item.type == 'input'" v-model:value="item.note1" :placeholder="'请输入' + item.name" />
v-if="item.type == 'input'" <a-radio-group v-else-if="item.type == 'radio'" v-model:value="item.note1" :options="item.options" />
v-model:value="item.note1" <a-input v-else-if="item.type == 'text'" v-model:value="item.note1" :placeholder="'请输入' + item.name"
:placeholder="'请输入' + item.name" :disabled="true" />
/> <a-input v-else-if="item.type == 'text2'" v-model:value="item.note1" :placeholder="'请输入' + item.name"
<a-radio-group :disabled="true" />
v-else-if="item.type == 'radio'" <a-textarea v-else-if="item.type == 'textArea'" v-model:value="item.note1" :showCount="true"
v-model:value="item.note1" :maxlength="200" :placeholder="'请输入' + item.name" />
:options="item.options" <upload v-else-if="item.type == 'image'" type="图片" btnName="上传图片" :maxCount="1" :data="item"
/> :list="props.imgList" tip="支持图片类型大小不超过100M"></upload>
<a-input <upload v-else-if="item.type == 'file' && item.name !== '使用手册'" type="文件" btnName="上传附件" :maxCount="1"
v-else-if="item.type == 'text'" :data="item" :list="props.fileList" tip="支持文件类型大小不超过100M"></upload>
v-model:value="item.note1" <upload v-else-if="item.name == '使用手册'" type="文件" btnName="上传附件" :maxCount="1" :data="item" :busType="2"
:placeholder="'请输入' + item.name" :list="props.fileList2" tip="支持文件类型大小不超过100M"></upload>
:disabled="true" <upload v-else-if="item.type == 'video'" type="视频" btnName="上传视频" :maxCount="1" :data="item"
/> :list="props.videoList" tip="支持视频类型大小不超过100M"></upload>
<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 v-else-if="item.type == 'dialog'" @click="sourceClick">
请选择来源应用 请选择来源应用
</a-button> </a-button>
<a-select <a-button v-else-if="item.type == 'dialog2'" @click="componentsClick">
v-else-if="item.type == 'select'" 请选择关联组件
style="width: 240px" </a-button>
v-model:value="item.note1" <a-select v-else-if="item.type == 'select'" style="width: 240px" v-model:value="item.note1"
:placeholder="'请选择' + item.name" :placeholder="'请选择' + item.name">
> <a-select-option v-for="(itemSelect, indexSelect) in item.options" :key="indexSelect"
<a-select-option :value="itemSelect.dictLabel">
v-for="(itemSelect, indexSelect) in item.options"
:key="indexSelect"
:value="itemSelect.dictLabel"
>
{{ itemSelect.dictLabel }} {{ itemSelect.dictLabel }}
</a-select-option> </a-select-option>
</a-select> </a-select>
<div <div v-else-if="item.type == 'checkBox'" class="application-Area" id="application-Area" :key="showKey">
v-else-if="item.type == 'checkBox'" <div v-for="(itemson, indexson) in item.options" :key="indexson" class="application-Area-son"
class="application-Area" @click="ApplicationArea(item, itemson)" :class="
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 item.note2.indexOf(itemson.dictLabel) != -1
? 'application-Area-down' ? 'application-Area-down'
: '' : ''
" ">
>
{{ itemson.dictLabel }} {{ itemson.dictLabel }}
</div> </div>
</div> </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> </div>
</template> </template>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch, onMounted } from 'vue' import { ref, defineProps, watch, onMounted } from 'vue'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import upload from '@/views/components/upload' import upload from '@/views/components/upload'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { getCategoryTreePage } from '@/api/personalCenter' import {
import { useRouter } from 'vue-router' getCategoryTreePage,
const router = useRouter() queryApplicationRelByResourceId,
const abilityToType = router.currentRoute.value.query.abilityToType queryResourceRelByKeyId,
const componentTypeValue = router.currentRoute.value.query.componentTypeValue } from '@/api/personalCenter'
const props = defineProps({ import { useRouter } from 'vue-router'
const router = useRouter()
const abilityToType = router.currentRoute.value.query.abilityToType
const componentTypeValue = router.currentRoute.value.query.componentTypeValue
const props = defineProps({
// //
refData: { type: Object, default: null }, refData: { type: Object, default: null },
// //
@ -276,13 +188,13 @@
// } // }
// ] // ]
// }] // }]
}) })
// console.log('props==========>', props) // console.log('props==========>', props)
const data = ref({ const data = ref({
list: [], list: [],
}) })
const showKey = ref(0) const showKey = ref(0)
props.refData.children.map((item) => { props.refData.children.map((item) => {
if (item.name == '基本信息') { if (item.name == '基本信息') {
item.children.map((val) => { item.children.map((val) => {
if (val.name == '能力类型') { if (val.name == '能力类型') {
@ -302,8 +214,8 @@
} else { } else {
item.isConfigure = false item.isConfigure = false
} }
}) })
let arr = props.refData.children.filter((item) => { let arr = props.refData.children.filter((item) => {
if (props.configure) { if (props.configure) {
if (!item.isConfigure) { if (!item.isConfigure) {
return item return item
@ -311,10 +223,10 @@
} else { } else {
return item return item
} }
}) })
data.value.list = [] data.value.list = []
// //
arr.forEach((val) => { arr.forEach((val) => {
val.children.forEach((item) => { val.children.forEach((item) => {
if (item.isLinkToDic === 'true' && item.linkValue) { if (item.isLinkToDic === 'true' && item.linkValue) {
getCategoryTreePage({ getCategoryTreePage({
@ -339,8 +251,8 @@
data.value.list.push(item) data.value.list.push(item)
} }
}) })
}) })
if (props.dataFrom) { if (props.dataFrom) {
// console.log(props.dataFrom, data.value.list) // console.log(props.dataFrom, data.value.list)
props.dataFrom.infoList.forEach((item) => { props.dataFrom.infoList.forEach((item) => {
if ( if (
@ -362,8 +274,9 @@
// item.note1 = item.attrValue.split(';') // item.note1 = item.attrValue.split(';')
} }
}) })
} }
const add = (title) => { const add = (title) => {
console.log(title, 'title')
let list = props.configure.filter((item) => item.name === title)[0].list let list = props.configure.filter((item) => item.name === title)[0].list
let flag = true let flag = true
list.forEach((item) => { list.forEach((item) => {
@ -393,16 +306,16 @@
} else { } else {
message.warning('请填写完整') message.warning('请填写完整')
} }
} }
const del = (title, index) => { const del = (title, index) => {
data.value[title].splice(index, 1) data.value[title].splice(index, 1)
mybus.emit('chageDataFrom', { mybus.emit('chageDataFrom', {
attrType: title, attrType: title,
attrValue: JSON.stringify(data.value[title]), attrValue: JSON.stringify(data.value[title]),
delFlag: 0, delFlag: 0,
}) })
} }
const ApplicationArea = (item, itemson) => { const ApplicationArea = (item, itemson) => {
// console.log(item, itemson) // console.log(item, itemson)
if (item.note2.indexOf(itemson.dictLabel) === -1) { if (item.note2.indexOf(itemson.dictLabel) === -1) {
item.note2.push(itemson.dictLabel) item.note2.push(itemson.dictLabel)
@ -414,9 +327,80 @@
attrValue: item.note2.join(';'), attrValue: item.note2.join(';'),
delFlag: 0, delFlag: 0,
}) })
}
//
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 sourceClick = () => {} })
watch(data.value.list, (newProps, oldProps) => { }
const handleCancel = (e) => {
console.log(e)
visibleAssociatedApplication.value = false
}
watch(data.value.list, (newProps, oldProps) => {
// console.log(newProps, oldProps) // console.log(newProps, oldProps)
newProps.forEach((val) => { newProps.forEach((val) => {
// console.log('==========>', val) // console.log('==========>', val)
@ -448,19 +432,21 @@
} }
} }
}) })
}) })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.put-on-the-shelf { .put-on-the-shelf {
height: 680px; height: 680px;
overflow: scroll; overflow: scroll;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 50px 100px 25px; padding: 50px 100px 25px;
& > div {
&>div {
width: 100%; width: 100%;
margin-top: 60px; margin-top: 60px;
.top { .top {
color: #333333; color: #333333;
font-size: 22px; font-size: 22px;
@ -468,40 +454,50 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 25px; margin-bottom: 25px;
div:first-child, div:first-child,
div:last-child { div:last-child {
width: 245px; width: 245px;
height: 1px; height: 1px;
background: #f0f0f0; background: #f0f0f0;
} }
div:nth-child(2) { div:nth-child(2) {
margin: 0 30px; margin: 0 30px;
} }
} }
.bottom { .bottom {
margin-top: 25px; margin-top: 25px;
.items { .items {
background: #fafafa; background: #fafafa;
padding: 10px; padding: 10px;
p { p {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
span:nth-of-type(1) { span:nth-of-type(1) {
width: 200px; width: 200px;
} }
span:nth-of-type(2) { span:nth-of-type(2) {
width: 100%; width: 100%;
font-weight: 600; font-weight: 600;
} }
} }
p:nth-of-type(1) > span:nth-of-type(1) {
p:nth-of-type(1)>span:nth-of-type(1) {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
} }
.del { .del {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
.delImg { .delImg {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
@ -510,36 +506,45 @@
background: url(~@/assets/home/sf_del.png) no-repeat; background: url(~@/assets/home/sf_del.png) no-repeat;
margin-right: 5px; margin-right: 5px;
} }
div { div {
cursor: pointer; cursor: pointer;
} }
} }
} }
.add { .add {
margin-top: 10px; margin-top: 10px;
font-size: 16px; font-size: 16px;
color: #007efb; color: #007efb;
} }
.form { .form {
margin-top: 20px; margin-top: 20px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
span:first-child { span:first-child {
width: 120px; width: 120px;
} }
:deep(.ant-input-textarea) { :deep(.ant-input-textarea) {
width: 570px; width: 570px;
} }
:deep(.ant-radio-group) { :deep(.ant-radio-group) {
width: 570px; width: 570px;
} }
:deep(.ant-input-number) { :deep(.ant-input-number) {
width: 200px; width: 200px;
} }
:deep(.ant-input) { :deep(.ant-input) {
resize: none; resize: none;
width: 570px; width: 570px;
} }
.ant-btn { .ant-btn {
width: 160px; width: 160px;
height: 32px; height: 32px;
@ -550,10 +555,12 @@
border-radius: 6px; border-radius: 6px;
} }
} }
.submit { .submit {
margin-top: 40px; margin-top: 40px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
.ant-btn { .ant-btn {
width: 80px; width: 80px;
height: 28px; height: 28px;
@ -566,15 +573,18 @@
} }
} }
} }
& > div:nth-of-type(1) {
&>div:nth-of-type(1) {
margin-top: 0; margin-top: 0;
} }
} }
.application-Area {
.application-Area {
width: 570px; width: 570px;
display: grid; display: grid;
margin-top: -5px; margin-top: -5px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
.application-Area-son { .application-Area-son {
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
@ -590,14 +600,73 @@
margin-top: 10px; margin-top: 10px;
font-weight: 500; font-weight: 500;
} }
.application-Area-down { .application-Area-down {
background: #0087ff; background: #0087ff;
color: #fff; color: #fff;
} }
} }
:deep(.ant-image-img) {
:deep(.ant-image-img) {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; 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> </style>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-08 14:54:01 * @Date: 2022-06-08 14:54:01
* @LastEditors: hisense.wuhongjian * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-30 17:09:40 * @LastEditTime: 2022-07-05 19:38:06
* @Description: 算法详情页导航 * @Description: 算法详情页导航
--> -->
<template> <template>
@ -65,6 +65,7 @@
]) ])
const list = ref([]) const list = ref([])
// id // id
if (keyId) {
queryPartAppByKeyId2({ keyId: keyId }).then((res) => { queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
console.log('ressssssss', res) console.log('ressssssss', res)
if (res.data.data.length > 0) { if (res.data.data.length > 0) {
@ -78,12 +79,13 @@
console.log('navList', navList) console.log('navList', navList)
} }
}) })
}
const props = defineProps({ const props = defineProps({
selectNow: { type: String, default: '' }, selectNow: { type: String, default: '' },
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
const select = ref('algorithm-display') const select = ref('algorithm-associated-ability')
const selectNav = (key) => { const selectNav = (key) => {
select.value = key select.value = key
@ -101,7 +103,7 @@
list.value.push(item.attrType) list.value.push(item.attrType)
} else if (item.attrType === '算法介绍视频') { } else if (item.attrType === '算法介绍视频') {
list.value.push('算法展示') list.value.push('算法展示')
} else if (item.attrType === '试用地址') { } else if (item.attrType === '试用地址' && item.attrValue) {
list.value.push('算法试用') list.value.push('算法试用')
} else if (item.attrType === '计费标准信息') { } else if (item.attrType === '计费标准信息') {
list.value.push('计费标准') list.value.push('计费标准')
@ -126,7 +128,7 @@
) )
if (navList.value.filter((item) => item.name === list.value[0])[0]) { if (navList.value.filter((item) => item.name === list.value[0])[0]) {
select.value = navList.value.filter( select.value = navList.value.filter(
(item) => item.name === list.value[0] (item) => (item.name === '关联应用') | (item.name === list.value[0])
)[0].key )[0].key
} }
console.log('11111111111111111111111111', list.value, navList.value) console.log('11111111111111111111111111', list.value, navList.value)
@ -152,7 +154,7 @@
list.value.push(item.attrType) list.value.push(item.attrType)
} else if (item.attrType === '算法介绍视频') { } else if (item.attrType === '算法介绍视频') {
list.value.push('算法展示') list.value.push('算法展示')
} else if (item.attrType === '试用地址') { } else if (item.attrType === '试用地址' && item.attrValue) {
list.value.push('算法试用') list.value.push('算法试用')
} else if (item.attrType === '计费标准信息') { } else if (item.attrType === '计费标准信息') {
list.value.push('计费标准') list.value.push('计费标准')
@ -165,7 +167,7 @@
list.value.push('使用方式') list.value.push('使用方式')
} }
}) })
list.value.push('关联应用') list.value.unshift('关联应用')
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
if (list.value.indexOf(item.name) > -1) { if (list.value.indexOf(item.name) > -1) {

View File

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

View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-08 11:56:28 * @Date: 2022-06-08 11:56:28
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-01 14:16:18 * @LastEditTime: 2022-07-05 11:41:52
* @Description: 算法详情页头部 * @Description: 算法详情页头部
--> -->
<template> <template>
@ -96,6 +96,7 @@
resourceName: props.dataList.name, resourceName: props.dataList.name,
time: props.dataList.createDate, time: props.dataList.createDate,
type: props.dataList.type, type: props.dataList.type,
componentType: '智能算法',
}, },
], ],
deptId: props.dataList.deptId, deptId: props.dataList.deptId,

View File

@ -17,7 +17,10 @@
<div class="content-left-content"> <div class="content-left-content">
<p> <p>
<span>{{ item.link.name }}</span> <span>{{ item.link.name }}</span>
<a-tooltip>
<template #title>{{ item.link.value }}</template>
<span>{{ item.link.value }}</span> <span>{{ item.link.value }}</span>
</a-tooltip>
</p> </p>
<p> <p>
<span>{{ item.postMethod.name }}</span> <span>{{ item.postMethod.name }}</span>
@ -72,7 +75,7 @@
title: '技术对接', title: '技术对接',
titleSon: '调用接口', titleSon: '调用接口',
link: { link: {
name: '接口地址', name: '服务接口:',
value: '', value: '',
}, },
postMethod: { postMethod: {
@ -225,10 +228,9 @@
color: rgba(33, 41, 86, 0.8); color: rgba(33, 41, 86, 0.8);
line-height: 20px; line-height: 20px;
p { p {
display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; text-overflow: ellipsis;
-webkit-box-orient: vertical; white-space: nowrap;
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
@ -283,13 +285,16 @@
p { p {
// width: 160px; // width: 160px;
height: 20px; height: 20px;
display: -webkit-box; overflow: hidden;
// overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
margin-right: 15px; margin-right: 15px;
span { span {
display: inline-block;
max-width: 1.2rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
} }

View File

@ -6,11 +6,7 @@
<div> <div>
<div class="title">图片识别</div> <div class="title">图片识别</div>
<div class="box"> <div class="box">
<a-image <a-image :width="510" :height="340" :src="responseUrl" />
:width="510"
:height="340"
:src="responseUrl"
/>
<a-upload <a-upload
v-model:file-list="fileList" v-model:file-list="fileList"
name="file" name="file"
@ -88,7 +84,6 @@
const menuOpenKeys2 = ref(['全文还原']) const menuOpenKeys2 = ref(['全文还原'])
let responseUrl = ref('static/image/test.jpg') let responseUrl = ref('static/image/test.jpg')
const handleChange = (info) => { const handleChange = (info) => {
debugger;
if (info.file.status !== 'uploading') { if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList) console.log(info.file, info.fileList)
} }

View File

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

View File

@ -20,14 +20,14 @@
</template> </template>
<script setup> <script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
const flag = ref(true) const flag = ref(true)
let dataFrom = ref([]) let dataFrom = ref([])
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
if (props.dataList.infoList) { if (props.dataList.infoList) {
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => item.attrType === '常见问题' (item) => item.attrType === '常见问题'
)[0] )[0]
@ -43,8 +43,8 @@
dataFrom.value.push(params) dataFrom.value.push(params)
}) })
} }
} }
watch( watch(
() => props.dataList, () => props.dataList,
(val) => { (val) => {
if (val) { if (val) {
@ -63,41 +63,47 @@
} }
} }
} }
) )
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.cpmmon-problem { .cpmmon-problem {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-top: 80px; padding-top: 160px;
background: #f7f8fa; background: #f7f8fa;
.content { .content {
width: 1300px; width: 1300px;
margin: 20px 0px; margin: 20px 0px;
background: #ffffff; background: #ffffff;
padding: 40px; padding: 40px;
.content-son { .content-son {
font-size: 20px; font-size: 20px;
margin-bottom: 60px; margin-bottom: 60px;
.content-top { .content-top {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
line-height: 20px; line-height: 20px;
} }
.content-bottom { .content-bottom {
display: flex; display: flex;
line-height: 34px; line-height: 34px;
color: #666666; color: #666666;
} }
.content-top, .content-top,
.content-bottom { .content-bottom {
div:last-child { div:last-child {
width: calc(100% - 54px); width: calc(100% - 54px);
} }
} }
.top-img { .top-img {
width: 34px; width: 34px;
height: 30px; height: 30px;
@ -106,6 +112,7 @@
background-size: cover; background-size: cover;
margin-right: 20px; margin-right: 20px;
} }
.bottom-img { .bottom-img {
width: 34px; width: 34px;
height: 30px; height: 30px;
@ -115,9 +122,10 @@
margin-right: 20px; margin-right: 20px;
} }
} }
.content-son:last-child { .content-son:last-child {
margin-bottom: 0px; margin-bottom: 0px;
} }
} }
} }
</style> </style>

View File

@ -2,17 +2,10 @@
<template> <template>
<div class="application-deployment-and-security"> <div class="application-deployment-and-security">
<div class="title"> <div class="title">
<DetalsTitle <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
:title="dataFrom.title"
:type="dataFrom.englishTitle"
></DetalsTitle>
</div> </div>
<div class="content"> <div class="content">
<div <div v-for="(item, index) in dataFrom.content" :key="index" class="content-card">
v-for="(item, index) in dataFrom.content"
:key="index"
class="content-card"
>
<div class="card-title">{{ item.childrenTitle }}</div> <div class="card-title">{{ item.childrenTitle }}</div>
<div class="card-content"> <div class="card-content">
<div v-for="carditem in item.childrenContent" :key="carditem"> <div v-for="carditem in item.childrenContent" :key="carditem">
@ -29,10 +22,10 @@
</template> </template>
<script setup> <script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
let dataFrom = ref({ let dataFrom = ref({
title: '部署与安全', title: '部署与安全',
englishTitle: 'DEPLOY&SAFE', englishTitle: 'DEPLOY&SAFE',
content: [ content: [
@ -45,12 +38,12 @@
childrenContent: [], childrenContent: [],
}, },
], ],
}) })
// //
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
if (props.dataList.infoList) { if (props.dataList.infoList) {
props.dataList.infoList.map((item) => { props.dataList.infoList.map((item) => {
if ( if (
item.attrType === '部署区域' || item.attrType === '部署区域' ||
@ -63,6 +56,12 @@
item.attrType === '等保定级' item.attrType === '等保定级'
) { ) {
dataFrom.value.content[1].childrenContent.push(item) dataFrom.value.content[1].childrenContent.push(item)
} else if (item.attrType === '访问地址') {
let obj = {
attrType: '访问地址',
attrValue: item.attrValue || '------',
}
dataFrom.value.content[0].childrenContent.push(obj)
} }
}) })
if (dataFrom.value.content[1].childrenContent.length <= 0) { if (dataFrom.value.content[1].childrenContent.length <= 0) {
@ -80,14 +79,8 @@
dataFrom.value.content[1].childrenContent.push(itemContent) dataFrom.value.content[1].childrenContent.push(itemContent)
}) })
} }
}
let obj = { watch(
attrType: '访问地址',
attrValue: props.dataList.link || '------',
}
dataFrom.value.content[0].childrenContent.push(obj)
}
watch(
() => props.dataList, () => props.dataList,
(val) => { (val) => {
if (val) { if (val) {
@ -105,6 +98,12 @@
item.attrType === '等保定级' item.attrType === '等保定级'
) { ) {
dataFrom.value.content[1].childrenContent.push(item) dataFrom.value.content[1].childrenContent.push(item)
} else if (item.attrType === '访问地址') {
let obj = {
attrType: '访问地址',
attrValue: item.attrValue || '------',
}
dataFrom.value.content[0].childrenContent.push(obj)
} }
}) })
if (dataFrom.value.content[1].childrenContent.length <= 0) { if (dataFrom.value.content[1].childrenContent.length <= 0) {
@ -122,48 +121,51 @@
dataFrom.value.content[1].childrenContent.push(itemContent) dataFrom.value.content[1].childrenContent.push(itemContent)
}) })
} }
let obj = { // let obj = {
attrType: '访问地址', // attrType: '访',
attrValue: props.dataList.link || '------', // attrValue: props.dataList.link || '------',
} // }
dataFrom.value.content[0].childrenContent.push(obj) // dataFrom.value.content[0].childrenContent.push(obj)
} }
} }
) )
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.application-deployment-and-security { .application-deployment-and-security {
padding: 0.8rem 0; padding: 0.8rem 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.title { .title {
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
.content { .content {
display: flex; display: flex;
width: 13rem; width: 13rem;
justify-content: space-between; justify-content: space-between;
.content-card { .content-card {
height: 1.5rem; height: 1.5rem;
width: 6.2rem; width: 6.2rem;
border-radius: 0.2rem; border-radius: 0.2rem;
background: linear-gradient( background: linear-gradient(to right,
to right,
rgba(113, 132, 252, 0.4), rgba(113, 132, 252, 0.4),
rgba(148, 163, 252, 0.4) rgba(148, 163, 252, 0.4));
);
padding: 0 0.3rem; padding: 0 0.3rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
.card-title { .card-title {
font-size: 0.26rem; font-size: 0.26rem;
line-height: 0.26rem; line-height: 0.26rem;
color: #212956; color: #212956;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
.card-content { .card-content {
div { div {
display: inline-block; display: inline-block;
@ -172,19 +174,24 @@
font-size: 0.2rem; font-size: 0.2rem;
line-height: 0.2rem; line-height: 0.2rem;
max-width: 5.84rem; max-width: 5.84rem;
overflow: hidden; /*超出的隐藏*/ overflow: hidden;
/*超出的隐藏*/
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; /*超出的设置为省略号*/ text-overflow: ellipsis;
/*超出的设置为省略号*/
span { span {
display: inline-block; display: inline-block;
max-width: 4rem; max-width: 4rem;
overflow: hidden; /*超出的隐藏*/ overflow: hidden;
/*超出的隐藏*/
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; /*超出的设置为省略号*/ text-overflow: ellipsis;
} /*超出的设置为省略号*/
} }
} }
} }
} }
} }
}
</style> </style>

View File

@ -7,42 +7,26 @@
<DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle> <DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
</div> </div>
<div class="tab"> <div class="tab">
<div <div v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue" :key="itemSonTitle.name"
v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue" @click="tabSwitch(itemSonTitle.name)" class="tab-son" :class="
:key="itemSonTitle.name"
@click="tabSwitch(itemSonTitle.name)"
class="tab-son"
:class="
tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue) tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
" ">
>
<a-tooltip> <a-tooltip>
<template #title>{{ itemSonTitle.name }}</template> <template #title>{{ itemSonTitle.name }}</template>
<div <div class="tab-top" :class="
class="tab-top"
:class="
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : '' tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
" ">
>
{{ itemSonTitle.name }} {{ itemSonTitle.name }}
</div> </div>
</a-tooltip> </a-tooltip>
<div <div class="tab-bottom" v-if="tabInitialize() == itemSonTitle.name"></div>
class="tab-bottom"
v-if="tabInitialize() == itemSonTitle.name"
></div>
</div> </div>
</div> </div>
<template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle"> <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
<div class="content" v-if="tabindex == itemSonTitle.name"> <div class="content" v-if="tabindex == itemSonTitle.name">
<div class="content-left"> <div class="content-left">
<div class="content-left-scene" v-if="!itemSonTitle.img"></div> <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
<a-image <a-image :width="635" :height="340" :src="itemSonTitle.img" v-if="itemSonTitle.img"></a-image>
:width="635"
:height="340"
:src="itemSonTitle.img"
v-if="itemSonTitle.img"
></a-image>
</div> </div>
<div class="content-right"> <div class="content-right">
<div class="content-right-scene"> <div class="content-right-scene">
@ -60,17 +44,17 @@
</template> </template>
<script setup> <script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
const flag = ref(true) const flag = ref(true)
let dataFrom = ref([]) let dataFrom = ref([])
// tab // tab
let tabindex = ref('场景说明一') let tabindex = ref('场景说明一')
// //
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
if (props.dataList.infoList) { if (props.dataList.infoList) {
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => item.attrType === '功能介绍' (item) => item.attrType === '功能介绍'
)[0] )[0]
@ -81,8 +65,8 @@
dataFrom.value = obj dataFrom.value = obj
tabindex.value = dataFrom.value.attrValue[0].name tabindex.value = dataFrom.value.attrValue[0].name
} }
} }
watch( watch(
() => props.dataList, () => props.dataList,
(val) => { (val) => {
if (val) { if (val) {
@ -96,32 +80,33 @@
} }
} }
} }
) )
// //
function tabIndexClass(index, title, content) { function tabIndexClass(index, title, content) {
if (title == '功能介绍' && index == 0 && content.length > 6) { if (title == '功能介绍' && index == 0 && content.length > 6) {
return 'tab-son-class' return 'tab-son-class'
} }
} }
//tab //tab
function tabInitialize() { function tabInitialize() {
return tabindex.value return tabindex.value
} }
//tab //tab
function tabSwitch(name) { function tabSwitch(name) {
tabindex.value = name tabindex.value = name
return tabindex.value return tabindex.value
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.function-intorduction { .function-intorduction {
width: 100%; width: 100%;
background: #f7f8fa; background: #f7f8fa;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow-x: unset; overflow-x: unset;
.application-scenarios-and-case-son { .application-scenarios-and-case-son {
padding-top: 0.8rem; padding-top: 0.8rem;
padding-bottom: 0.8rem; padding-bottom: 0.8rem;
@ -129,6 +114,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow: unset; overflow: unset;
.tab { .tab {
max-width: 13rem; max-width: 13rem;
overflow-x: auto; overflow-x: auto;
@ -141,11 +127,13 @@
cursor: pointer; cursor: pointer;
padding-left: 0.4rem; padding-left: 0.4rem;
padding-right: 0.4rem; padding-right: 0.4rem;
.tab-son { .tab-son {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-right: 1rem; margin-right: 1rem;
.tab-top { .tab-top {
min-width: 1.2rem; min-width: 1.2rem;
font-size: 0.24rem; font-size: 0.24rem;
@ -157,53 +145,65 @@
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
text-align: center;
} }
.tab-top-down { .tab-top-down {
min-width: 1.2rem; min-width: 1.2rem;
color: #526aff; color: #526aff;
margin-bottom: 0.16rem; margin-bottom: 0.16rem;
} }
.tab-bottom { .tab-bottom {
height: 0.04rem; height: 0.04rem;
width: 0.6rem; width: 0.6rem;
background: #526aff; background: #526aff;
} }
} }
.tab-son-class { .tab-son-class {
margin-left: 4.3rem; margin-left: 4.3rem;
margin-bottom: 0.02rem; margin-bottom: 0.02rem;
} }
.tab-son-class-two { .tab-son-class-two {
margin-left: 2.3rem; margin-left: 2.3rem;
margin-bottom: 0.02rem; margin-bottom: 0.02rem;
} }
.tab-son:last-child { .tab-son:last-child {
margin-right: 0rem; margin-right: 0rem;
} }
} }
.tab::-webkit-scrollbar-thumb { .tab::-webkit-scrollbar-thumb {
background: rgba(82, 106, 255, 0.4); background: rgba(82, 106, 255, 0.4);
} }
.content { .content {
display: flex; display: flex;
position: relative; position: relative;
width: 100%; width: 100%;
min-width: 13rem; min-width: 13rem;
height: 3.4rem; height: 3.4rem;
.content-left { .content-left {
position: absolute; position: absolute;
left: 0; left: 0;
min-width: 6.2rem; min-width: 6.2rem;
:deep(.ant-image-img) { :deep(.ant-image-img) {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: contain;
} }
// text-align: center; // text-align: center;
.content-top { .content-top {
text-align: left; text-align: left;
} }
} }
.content-right { .content-right {
width: 6.2rem; width: 6.2rem;
height: 3.4rem; height: 3.4rem;
@ -212,6 +212,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.content-right-scene, .content-right-scene,
.content-right-case { .content-right-case {
width: 6.2rem; width: 6.2rem;
@ -220,6 +221,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
} }
.content-left-scene, .content-left-scene,
.content-left-case { .content-left-case {
height: 3.4rem; height: 3.4rem;
@ -229,12 +231,14 @@
background-position: center; background-position: center;
background-size: 6.35rem 3.4rem; background-size: 6.35rem 3.4rem;
} }
.content-top { .content-top {
font-size: 0.22rem; font-size: 0.22rem;
line-height: 0.22rem; line-height: 0.22rem;
color: #000000; color: #000000;
margin-bottom: 0.35rem; margin-bottom: 0.35rem;
} }
.content-bottom { .content-bottom {
font-size: 0.18rem; font-size: 0.18rem;
color: #999999; color: #999999;
@ -246,8 +250,9 @@
} }
} }
} }
.application-scenarios-and-case-son:first-child { .application-scenarios-and-case-son:first-child {
padding-top: 1rem; padding-top: 1rem;
} }
} }
</style> </style>

View File

@ -8,12 +8,7 @@
<template> <template>
<div class="application-navigation" v-if="navList.length > 0"> <div class="application-navigation" v-if="navList.length > 0">
<template v-for="nav in navList" :key="nav.key"> <template v-for="nav in navList" :key="nav.key">
<div <div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
class="nav"
:class="{ select: nav.key == select }"
v-if="nav.show"
@click="selectNav(nav.key)"
>
{{ nav.name }} {{ nav.name }}
<span class="line"></span> <span class="line"></span>
</div> </div>
@ -21,9 +16,14 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
const navList = ref([ import { useRouter } from 'vue-router'
import { queryPartAppByKeyId } from '@/api/home'
//
const router = useRouter()
const keyId = router.currentRoute.value.query.id
const navList = ref([
{ {
name: '应用展示', name: '应用展示',
key: 'application-presentation', key: 'application-presentation',
@ -32,14 +32,6 @@
name: '功能介绍', name: '功能介绍',
key: 'function-introduction', key: 'function-introduction',
}, },
// {
// name: '',
// key: 'application-associated-components',
// },
{
name: '关联组件',
key: 'application-associated-ability',
},
{ {
name: '使用能力', name: '使用能力',
key: 'ability-to-use', key: 'ability-to-use',
@ -56,23 +48,42 @@
name: '常见问题', name: '常见问题',
key: 'common-problem', key: 'common-problem',
}, },
]) ])
const props = defineProps({ const props = defineProps({
selectNow: { type: String, default: '' }, selectNow: { type: String, default: '' },
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Array, default: null },
})
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,
}) })
const select = ref('algorithm-display') list.value.unshift('关联组件')
const list = ref([]) }
const selectNav = (key) => { })
}
const selectNav = (key) => {
select.value = key select.value = key
mybus.emit('flyToView', select.value) mybus.emit('flyToView', select.value)
} }
if (props.dataList.infoList) { if (props.dataList.infoList) {
list.value = [] list.value = []
props.dataList.infoList.map((item) => { props.dataList.infoList.map((item) => {
if ( if (
item.attrType === '算法优势' || item.attrType === '功能介绍' ||
item.attrType === '常见问题' || item.attrType === '常见问题' ||
item.attrType === '使用能力' || item.attrType === '使用能力' ||
item.attrType === '关联组件' item.attrType === '关联组件'
@ -82,35 +93,31 @@
list.value.push('应用展示') list.value.push('应用展示')
} }
}) })
list.value.push('关联组件') list.value.unshift('关联组件')
list.value.push('部署与安全')
list.value.push('归属部门与服务商')
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
if (list.value.indexOf(item.name) > -1) { if (list.value.indexOf(item.name) > -1) {
if (item.name == '关联组件') {
if (
props.associatedComponents[0].dataList.length != 0 ||
props.associatedComponents[1].dataList.length != 0 ||
props.associatedComponents[2].dataList.length != 0
) {
item.show = true item.show = true
} }
} else {
item.show = true
}
}
}) })
if (list.value.length > 0) {
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
select.value = navList.value.filter( select.value = navList.value.filter(
(item) => item.name === list.value[0] (item) => (item.name === '关联组件') | (item.name === list.value[0])
)[0].key )[0].key
console.log('11111111111111111111111111', list.value, navList.value)
} }
watch( }
console.log('11111111111111111111111111', list.value, navList.value)
}
watch(
() => props.selectNow, () => props.selectNow,
(newValue) => { (newValue) => {
select.value = newValue select.value = newValue
} }
) )
watch( watch(
() => props.dataList, () => props.dataList,
(val) => { (val) => {
if (val) { if (val) {
@ -127,37 +134,30 @@
list.value.push('应用展示') list.value.push('应用展示')
} }
}) })
list.value.push('关联组件') list.value.unshift('关联组件')
list.value.push('部署与安全') list.value.push('部署与安全')
list.value.push('归属部门与服务商') list.value.push('归属部门与服务商')
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
if (list.value.indexOf(item.name) > -1) { if (list.value.indexOf(item.name) > -1) {
if (item.name == '关联组件') {
if (
props.associatedComponents[0].dataList.length != 0 ||
props.associatedComponents[1].dataList.length != 0 ||
props.associatedComponents[2].dataList.length != 0
) {
item.show = true item.show = true
} }
} else {
item.show = true
}
}
}) })
if (list.value.length > 0) { if (list.value.length > 0) {
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
select.value = navList.value.filter( select.value = navList.value.filter(
(item) => item.name === list.value[0] (item) =>
(item.name === '关联组件') | (item.name === list.value[0])
)[0].key )[0].key
} }
}
console.log('11111111111111111111111111', list.value, navList.value) console.log('11111111111111111111111111', list.value, navList.value)
} }
} }
) )
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.application-navigation { .application-navigation {
width: 19.12rem; width: 19.12rem;
height: 0.84rem; height: 0.84rem;
line-height: 0.8rem; line-height: 0.8rem;
@ -169,22 +169,26 @@
padding: 0 3rem; padding: 0 3rem;
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb; box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
position: relative; position: relative;
.nav { .nav {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.line { .line {
width: 0.4rem; width: 0.4rem;
height: 0.04rem; height: 0.04rem;
} }
} }
.select { .select {
color: #526aff; color: #526aff;
.line { .line {
background: #526aff; background: #526aff;
} }
} }
} }
</style> </style>

View File

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

View File

@ -8,15 +8,10 @@
<template> <template>
<div class="application-presentation" v-if="flag"> <div class="application-presentation" v-if="flag">
<detals-title title="应用展示" type="IMAGE&VIDEO"></detals-title> <detals-title title="应用展示" type="IMAGE&VIDEO"></detals-title>
<div class="main"> <div class="main" :style="`${img}background-position:center;background-size:cover;`">
<div class="play" @click="showModal"></div> <div class="play" @click="showModal"></div>
</div> </div>
<a-modal <a-modal v-model:visible="visible" title="视频预览" :width="750" destroyOnClose>
v-model:visible="visible"
title="视频预览"
:width="750"
destroyOnClose
>
<template #footer></template> <template #footer></template>
<div style="width: 100%; display: flex; justify-content: center"> <div style="width: 100%; display: flex; justify-content: center">
<div style="width: 100%; height: 100%"> <div style="width: 100%; height: 100%">
@ -27,10 +22,10 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, reactive, defineProps, watch } from 'vue' import { ref, reactive, defineProps, watch } from 'vue'
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const visible = ref(false) const visible = ref(false)
const options = reactive({ const options = reactive({
width: '7.00rem', // width: '7.00rem', //
height: '4.00rem', // height: '4.00rem', //
color: '#409eff', // color: '#409eff', //
@ -55,16 +50,17 @@
'pageFullScreen', 'pageFullScreen',
'fullScreen', 'fullScreen',
], //, ], //,
}) })
const showModal = () => { const showModal = () => {
visible.value = true visible.value = true
} }
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
const flag = ref(true) const flag = ref(true)
console.log('111111111111111111111,', props.dataList) const img = ref({})
if (props.dataList.infoList) { console.log('111111111111111111111,', props.dataList)
if (props.dataList.infoList) {
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => item.attrType === '应用展示视频' (item) => item.attrType === '应用展示视频'
)[0] )[0]
@ -72,10 +68,16 @@
if (!obj) { if (!obj) {
flag.value = false flag.value = false
} else { } else {
let imgindex = props.dataList.infoList.filter(
(item) => item.attrType === '应用图片'
)[0]
options.src = obj.attrValue options.src = obj.attrValue
if (imgindex) {
img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
} }
} }
watch( }
watch(
() => props.dataList, () => props.dataList,
(val) => { (val) => {
if (val) { if (val) {
@ -86,15 +88,23 @@
if (!obj) { if (!obj) {
flag.value = false flag.value = false
} else { } else {
let imgindex = props.dataList.infoList.filter(
(item) => item.attrType === '应用图片'
)[0]
options.src = obj.attrValue options.src = obj.attrValue
if (imgindex) {
img.value =
'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
} }
} }
} }
) }
)
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.application-presentation { .application-presentation {
padding: 0.8rem 3rem 0; padding: 0.8rem 3rem 0;
.main { .main {
height: 3.4rem; height: 3.4rem;
border-radius: 0.1rem; border-radius: 0.1rem;
@ -104,6 +114,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.play { .play {
width: 0.96rem; width: 0.96rem;
height: 0.96rem; height: 0.96rem;
@ -112,5 +123,5 @@
cursor: pointer; cursor: pointer;
} }
} }
} }
</style> </style>

View File

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

View File

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

View File

@ -8,12 +8,7 @@
<template> <template>
<div class="business-navigation" v-if="navList.length > 0"> <div class="business-navigation" v-if="navList.length > 0">
<template v-for="nav in navList" :key="nav.key"> <template v-for="nav in navList" :key="nav.key">
<div <div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
class="nav"
:class="{ select: nav.key == select }"
v-if="nav.show"
@click="selectNav(nav.key)"
>
{{ nav.name }} {{ nav.name }}
<span class="line"></span> <span class="line"></span>
</div> </div>
@ -21,17 +16,18 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch, getCurrentInstance } from 'vue'
import mybus from '@/myplugins/mybus' import { useRouter } from 'vue-router'
const navList = ref([ import mybus from '@/myplugins/mybus'
import { queryPartAppByKeyId2 } from '@/api/home'
//
const router = useRouter()
const keyId = router.currentRoute.value.query.id
const navList = ref([
{ {
name: '组件展示', name: '组件展示',
key: 'business-presentation', key: 'business-presentation',
}, },
{
name: '关联应用',
key: 'business-associated-ability',
},
{ {
name: '功能介绍', name: '功能介绍',
key: 'function-introduction', key: 'function-introduction',
@ -53,24 +49,40 @@
name: '常见问题', name: '常见问题',
key: 'common-problem', key: 'common-problem',
}, },
]) ])
const props = defineProps({ const props = defineProps({
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Array, default: null },
selectNow: { type: String, default: '' }, selectNow: { type: String, default: '' },
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
})
const select = ref('business-associated-ability')
const list = ref([])
// id
if (keyId) {
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
console.log('ressssssss', res)
if (res.data.data.length > 0) {
//
navList.value.unshift({
name: '关联应用',
key: 'business-associated-ability',
show: true,
}) })
const select = ref('business-presentation') // list.value.push('')
const list = ref([]) console.log('navList', navList)
const selectNav = (key) => { }
})
}
const selectNav = (key) => {
select.value = key select.value = key
console.log(key, select.value) console.log(key, select.value)
mybus.emit('flyToView', select.value) mybus.emit('flyToView', select.value)
} }
if (props.dataList.infoList) { if (props.dataList.infoList) {
list.value = [] list.value = []
let arr = [ let arr = [
'组件视频介绍',
'关联应用', '关联应用',
'组件视频介绍',
'功能介绍', '功能介绍',
'应用场景', '应用场景',
'应用案例', '应用案例',
@ -94,7 +106,7 @@
list.value.push('组件展示') list.value.push('组件展示')
} }
}) })
list.value.push('关联应用') list.value.unshift('关联应用')
list.value.push('使用方式') list.value.push('使用方式')
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
@ -108,25 +120,29 @@
} }
} }
}) })
if (list.value.length > 0) {
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
select.value = navList.value.filter( select.value = navList.value.filter(
(item) => item.name === list.value[0] (item) => (item.name === '关联应用') | (item.name === list.value[0])
)[0].key )[0].key
console.log('11111111111111111111111111', list.value, navList.value)
} }
watch( }
console.log('11111111111111111111111111', list.value, navList.value)
}
watch(
() => props.selectNow, () => props.selectNow,
(newValue) => { (newValue) => {
select.value = newValue select.value = newValue
} }
) )
watch( watch(
() => props.dataList, () => props.dataList,
(val) => { (val) => {
if (val) { if (val) {
list.value = [] list.value = []
let arr = [ let arr = [
'组件视频介绍',
'关联应用', '关联应用',
'组件视频介绍',
'功能介绍', '功能介绍',
'应用场景', '应用场景',
'应用案例', '应用案例',
@ -151,7 +167,7 @@
list.value.push('组件展示') list.value.push('组件展示')
} }
}) })
list.value.push('关联应用') list.value.unshift('关联应用')
list.value.push('使用方式') list.value.push('使用方式')
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
@ -166,17 +182,20 @@
} }
}) })
if (list.value.length > 0) { if (list.value.length > 0) {
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
select.value = navList.value.filter( select.value = navList.value.filter(
(item) => item.name === list.value[0] (item) =>
(item.name === '关联应用') | (item.name === list.value[0])
)[0].key )[0].key
} }
}
console.log('11111111111111111111111111', list.value, navList.value) console.log('11111111111111111111111111', list.value, navList.value)
} }
} }
) )
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.business-navigation { .business-navigation {
width: 19.12rem; width: 19.12rem;
height: 0.84rem; height: 0.84rem;
line-height: 0.8rem; line-height: 0.8rem;
@ -188,22 +207,26 @@
padding: 0 3rem; padding: 0 3rem;
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb; box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
position: relative; position: relative;
.nav { .nav {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.line { .line {
width: 0.4rem; width: 0.4rem;
height: 0.04rem; height: 0.04rem;
} }
} }
.select { .select {
color: #526aff; color: #526aff;
.line { .line {
background: #526aff; background: #526aff;
} }
} }
} }
</style> </style>

View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-08 11:56:28 * @Date: 2022-06-08 11:56:28
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-01 14:20:52 * @LastEditTime: 2022-07-05 11:42:27
* @Description: 算法详情页头部 * @Description: 算法详情页头部
--> -->
<template> <template>
@ -29,8 +29,8 @@
</div> </div>
<div class="main"> <div class="main">
<a-tooltip placement="top"> <a-tooltip placement="top">
<template #title>应用领域{{ applicationArea }}</template> <template #title>应用领域{{ businessArea }}</template>
<div>应用领域{{ applicationArea }}</div> <div>应用领域{{ businessArea }}</div>
</a-tooltip> </a-tooltip>
<a-tooltip placement="top"> <a-tooltip placement="top">
<template #title>{{ props.dataList.description }}</template> <template #title>{{ props.dataList.description }}</template>
@ -41,11 +41,15 @@
</div> </div>
<div class="bottom" v-if="props.dataList.id"> <div class="bottom" v-if="props.dataList.id">
<a-button type="primary" @click="toView()"> <a-button type="primary" @click="toView()">
<template #icon><form-outlined /></template> <template #icon>
<form-outlined />
</template>
申请使用 申请使用
</a-button> </a-button>
<a-button type="primary" @click="addShoppingCart()"> <a-button type="primary" @click="addShoppingCart()">
<template #icon><shopping-cart-outlined /></template> <template #icon>
<shopping-cart-outlined />
</template>
加入申购车 加入申购车
</a-button> </a-button>
<a-button type="primary" @click="goTOCollection()">收藏</a-button> <a-button type="primary" @click="goTOCollection()">收藏</a-button>
@ -55,20 +59,20 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ShoppingCartOutlined } from '@ant-design/icons-vue' import { ShoppingCartOutlined } from '@ant-design/icons-vue'
import { defineProps, ref, watch } from 'vue' import { defineProps, ref, watch } from 'vue'
import { scInsert } from '@/api/personalCenter' import { scInsert } from '@/api/personalCenter'
import { sgcInsert } from '@/api/home' import { sgcInsert } from '@/api/home'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
const router = useRouter() const router = useRouter()
const businessArea = ref('') const businessArea = ref('')
// // // //
const addShoppingCart = () => { const addShoppingCart = () => {
console.log('加入申购车==================>', props.dataList) console.log('加入申购车==================>', props.dataList)
sgcInsert({ sgcInsert({
delFlag: '0', delFlag: '0',
@ -79,9 +83,9 @@
message.success('添加申购车成功!') message.success('添加申购车成功!')
mybus.emit('getSgcNum') mybus.emit('getSgcNum')
}) })
} }
// // // //
function toView() { function toView() {
// window.open(newpage.href, '_blank') // window.open(newpage.href, '_blank')
console.log('一键申请===================>', props.dataList) console.log('一键申请===================>', props.dataList)
localStorage.setItem( localStorage.setItem(
@ -96,6 +100,7 @@
resourceName: props.dataList.name, resourceName: props.dataList.name,
time: props.dataList.createDate, time: props.dataList.createDate,
type: props.dataList.type, type: props.dataList.type,
componentType: '业务组件',
}, },
], ],
deptId: props.dataList.deptId, deptId: props.dataList.deptId,
@ -106,17 +111,17 @@
router.push({ router.push({
path: '/apply', path: '/apply',
}) })
} }
// //
const goTOCollection = () => { const goTOCollection = () => {
console.log('收藏===================》', props.dataList) console.log('收藏===================》', props.dataList)
scInsert([{ resourceId: props.dataList.id }]).then((res) => { scInsert([{ resourceId: props.dataList.id }]).then((res) => {
console.log(res) console.log(res)
message.success('收藏成功') message.success('收藏成功')
}) })
} }
const componentType = ref('') const componentType = ref('')
if (props.dataList.infoList) { if (props.dataList.infoList) {
businessArea.value = props.dataList.infoList.filter( businessArea.value = props.dataList.infoList.filter(
(val) => val.attrType === '应用领域' (val) => val.attrType === '应用领域'
)[0].attrValue )[0].attrValue
@ -126,8 +131,8 @@
if (obj) { if (obj) {
componentType.value = obj.attrValue componentType.value = obj.attrValue
} }
} }
watch( watch(
() => props.dataList, () => props.dataList,
(val) => { (val) => {
if (val) { if (val) {
@ -142,16 +147,17 @@
} }
} }
} }
) )
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.algorithm-top-details { .algorithm-top-details {
height: 6rem; height: 6rem;
padding: 1.8rem 0 0; padding: 1.8rem 0 0;
background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat; background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
background-size: 100%; background-size: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
.left { .left {
max-width: 7.2rem; max-width: 7.2rem;
color: #fff; color: #fff;
@ -160,9 +166,11 @@
.top { .top {
display: flex; display: flex;
align-items: center; align-items: center;
span { span {
font-size: 0.14rem; font-size: 0.14rem;
} }
.name { .name {
// max-width: 3.3rem; // max-width: 3.3rem;
// overflow: hidden; // overflow: hidden;
@ -178,15 +186,18 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
.label-content { .label-content {
position: relative; position: relative;
} }
.lable-father { .lable-father {
position: absolute; position: absolute;
min-width: 3.5rem; min-width: 3.5rem;
right: -3.5rem; right: -3.5rem;
top: 0; top: 0;
} }
.label { .label {
padding: 0.01rem 0.1rem; padding: 0.01rem 0.1rem;
margin-right: 0.1rem; margin-right: 0.1rem;
@ -194,16 +205,19 @@
background: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.4);
} }
} }
.main { .main {
margin-top: 0.2rem; margin-top: 0.2rem;
font-size: 0.18rem; font-size: 0.18rem;
line-height: 0.34rem; line-height: 0.34rem;
& > div:nth-of-type(1) {
&>div:nth-of-type(1) {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
& > div:nth-of-type(2) {
&>div:nth-of-type(2) {
max-height: 1rem; max-height: 1rem;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -212,9 +226,11 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
} }
.bottom { .bottom {
margin-top: 0.4rem; margin-top: 0.4rem;
display: flex; display: flex;
.ant-btn { .ant-btn {
height: 0.5rem; height: 0.5rem;
margin-right: 0.2rem; margin-right: 0.2rem;
@ -225,15 +241,19 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.ant-btn-primary { .ant-btn-primary {
color: #1890ff; color: #1890ff;
} }
.ant-btn:nth-of-type(1) { .ant-btn:nth-of-type(1) {
width: 1.8rem; width: 1.8rem;
} }
.ant-btn:nth-of-type(2) { .ant-btn:nth-of-type(2) {
width: 2.2rem; width: 2.2rem;
} }
.ant-btn:nth-of-type(3) { .ant-btn:nth-of-type(3) {
width: 1.45rem; width: 1.45rem;
background: #fff; background: #fff;
@ -241,13 +261,13 @@
} }
} }
} }
.right { .right {
width: 5.8rem; width: 5.8rem;
height: 4rem; height: 4rem;
background: url('~@/assets/detailsAll/business/business_right_bg.png') background: url('~@/assets/detailsAll/business/business_right_bg.png') no-repeat;
no-repeat;
background-size: 100%; background-size: 100%;
margin-top: -0.4rem; margin-top: -0.4rem;
} }
} }
</style> </style>

View File

@ -2,10 +2,7 @@
<!-- 使用方式 --> <!-- 使用方式 -->
<div class="usage-mode" v-if="flag"> <div class="usage-mode" v-if="flag">
<div class="tltle"> <div class="tltle">
<DetalsTitle <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
:title="dataFrom.title"
:type="dataFrom.englishTitle"
></DetalsTitle>
</div> </div>
<div class="content" v-for="item in dataFrom.content" :key="item.title"> <div class="content" v-for="item in dataFrom.content" :key="item.title">
<div class="content-left"> <div class="content-left">
@ -16,7 +13,10 @@
<div class="content-left-content"> <div class="content-left-content">
<p> <p>
<span>{{ item.link.name }}</span> <span>{{ item.link.name }}</span>
<a-tooltip>
<template #title>{{ item.linkValue }}</template>
<span>{{ item.linkValue }}</span> <span>{{ item.linkValue }}</span>
</a-tooltip>
</p> </p>
</div> </div>
</div> </div>
@ -30,7 +30,7 @@
<div class="content-right-title">{{ item.contact }}</div> <div class="content-right-title">{{ item.contact }}</div>
<div class="content-right-content"> <div class="content-right-content">
<p> <p>
<span>{{ item.contact }}</span> <span>{{ item.facilitator.name }}</span>
<a-tooltip> <a-tooltip>
<template #title>{{ item.facilitator.value }}</template> <template #title>{{ item.facilitator.value }}</template>
<span>{{ item.facilitator.value }}</span> <span>{{ item.facilitator.value }}</span>
@ -56,7 +56,7 @@
<div class="content-right-title">{{ item.contact2 }}</div> <div class="content-right-title">{{ item.contact2 }}</div>
<div class="content-right-content"> <div class="content-right-content">
<p> <p>
<span>{{ item.contact2 }}</span> <span>{{ item.facilitator2.name }}</span>
<a-tooltip> <a-tooltip>
<template #title>{{ item.facilitator2.value }}</template> <template #title>{{ item.facilitator2.value }}</template>
<span>{{ item.facilitator2.value }}</span> <span>{{ item.facilitator2.value }}</span>
@ -84,10 +84,10 @@
</template> </template>
<script setup> <script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { pinyin } from 'pinyin-pro' import { pinyin } from 'pinyin-pro'
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
let dataFrom = ref({ let dataFrom = ref({
title: '使用方式', title: '使用方式',
englishTitle: 'USAGE', englishTitle: 'USAGE',
content: [ content: [
@ -113,13 +113,13 @@
}, },
}, },
], ],
}) })
// //
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
const flag = ref(true) const flag = ref(true)
if (props.dataList.infoList) { if (props.dataList.infoList) {
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => (item) =>
item.attrType === '技术文档' || item.attrType === '技术文档' ||
@ -151,8 +151,8 @@
} }
}) })
} }
} }
watch( watch(
() => props.dataList, () => props.dataList,
(val) => { (val) => {
if (val) { if (val) {
@ -189,8 +189,8 @@
} }
} }
} }
) )
function technical() { function technical() {
// //
// const type = pinyin(props.dataList.type, { // const type = pinyin(props.dataList.type, {
// pattern: 'initial', // pattern: 'initial',
@ -208,8 +208,8 @@
'hisense_office/onlinePreview?url=' + 'hisense_office/onlinePreview?url=' +
btoa(encodeURI(obj.attrValue)) btoa(encodeURI(obj.attrValue))
) )
} }
function technicalNew() { function technicalNew() {
// //
// const type = pinyin(props.dataList.type, { // const type = pinyin(props.dataList.type, {
// pattern: 'initial', // pattern: 'initial',
@ -226,23 +226,24 @@
'hisense_office/onlinePreview?url=' + 'hisense_office/onlinePreview?url=' +
btoa(encodeURI(obj.attrValue)) btoa(encodeURI(obj.attrValue))
) )
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.usage-mode { .usage-mode {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0.8rem 0; padding: 0.8rem 0;
.content { .content {
margin-top: 0.3rem; margin-top: 0.3rem;
display: flex; display: flex;
.content-left { .content-left {
height: 1.5rem; height: 1.5rem;
width: 6.2rem; width: 6.2rem;
background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') no-repeat;
no-repeat;
background-position: center; background-position: center;
background-size: 100% 100%; background-size: 100% 100%;
border-radius: 0.1rem; border-radius: 0.1rem;
@ -251,30 +252,40 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 0.35rem; padding: 0 0.35rem;
.left { .left {
.content-left-title { .content-left-title {
font-size: 0.26rem; font-size: 0.26rem;
line-height: 0.26rem; line-height: 0.26rem;
color: #212956; color: #212956;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
span:first-child { span:first-child {
margin-right: 0.1rem; margin-right: 0.1rem;
} }
} }
.content-left-content { .content-left-content {
width: 4.2rem; width: 4.2rem;
font-size: 0.2rem; font-size: 0.2rem;
color: rgba(33, 41, 86, 0.8); color: rgba(33, 41, 86, 0.8);
line-height: 0.2rem; line-height: 0.2rem;
p { p {
display: -webkit-box;
margin-bottom: 0.1rem;
span:last-of-type {
width: 298px;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin-bottom: 0.1rem;
} }
} }
} }
}
.right { .right {
div { div {
height: 0.4rem; height: 0.4rem;
@ -288,16 +299,17 @@
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
div:first-child { div:first-child {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
} }
} }
.content-right { .content-right {
height: 1.5rem; height: 1.5rem;
width: 6.2rem; width: 6.2rem;
background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') no-repeat;
no-repeat;
background-position: center; background-position: center;
background-size: 100% 100%; background-size: 100% 100%;
border-radius: 0.1rem; border-radius: 0.1rem;
@ -306,17 +318,20 @@
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
padding: 0 0.3rem; padding: 0 0.3rem;
.content-right-left { .content-right-left {
border-right: 0.01rem solid #707fe0; border-right: 0.01rem solid #707fe0;
padding-right: 0.1rem; padding-right: 0.1rem;
margin-right: 0.1rem; margin-right: 0.1rem;
} }
.content-right-title { .content-right-title {
font-size: 0.26rem; font-size: 0.26rem;
line-height: 0.26rem; line-height: 0.26rem;
color: #212956; color: #212956;
margin-bottom: 0.15rem; margin-bottom: 0.15rem;
} }
.content-right-content { .content-right-content {
display: flex; display: flex;
font-size: 0.16rem; font-size: 0.16rem;
@ -326,6 +341,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
flex-direction: column; flex-direction: column;
p { p {
// width: 1.60rem; // width: 1.60rem;
height: 0.2rem; height: 0.2rem;
@ -336,6 +352,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin-right: 0.15rem; margin-right: 0.15rem;
span { span {
cursor: pointer; cursor: pointer;
} }
@ -343,5 +360,5 @@
} }
} }
} }
} }
</style> </style>

View File

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

View File

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

View File

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

View File

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

View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-08 11:56:28 * @Date: 2022-06-08 11:56:28
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-01 14:21:04 * @LastEditTime: 2022-07-05 11:42:59
* @Description: 开发组件详情页头部 * @Description: 开发组件详情页头部
--> -->
<template> <template>
@ -96,6 +96,7 @@
resourceName: props.dataList.name, resourceName: props.dataList.name,
time: props.dataList.createDate, time: props.dataList.createDate,
type: props.dataList.type, type: props.dataList.type,
componentType: '开发组件',
}, },
], ],
deptId: props.dataList.deptId, deptId: props.dataList.deptId,

View File

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

View File

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

View File

@ -8,12 +8,7 @@
<template> <template>
<div class="business-navigation" v-if="navList.length > 0"> <div class="business-navigation" v-if="navList.length > 0">
<template v-for="nav in navList" :key="nav.key"> <template v-for="nav in navList" :key="nav.key">
<div <div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
class="nav"
:class="{ select: nav.key == select }"
v-if="nav.show"
@click="selectNav(nav.key)"
>
{{ nav.name }} {{ nav.name }}
<span class="line"></span> <span class="line"></span>
</div> </div>
@ -21,13 +16,14 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch, getCurrentInstance } from 'vue'
import mybus from '@/myplugins/mybus' import { useRouter } from 'vue-router'
const navList = ref([ import mybus from '@/myplugins/mybus'
{ import { queryPartAppByKeyId2 } from '@/api/home'
name: '关联应用', //
key: 'layer-service-associated-ability', const router = useRouter()
}, const keyId = router.currentRoute.value.query.id
const navList = ref([
{ {
name: '图层展示', name: '图层展示',
key: 'service-presentation', key: 'service-presentation',
@ -56,20 +52,35 @@
name: '常见问题', name: '常见问题',
key: 'service-common-problem', key: 'service-common-problem',
}, },
]) ])
const props = defineProps({ const props = defineProps({
selectNow: { type: String, default: '' }, selectNow: { type: String, default: '' },
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Array, default: null },
})
const list = ref([])
// id
if (keyId) {
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
console.log('ressssssss', res)
if (res.data.data.length > 0) {
//
navList.value.unshift({
name: '关联应用',
key: 'layer-service-associated-ability',
show: true,
}) })
const select = ref('service-presentation') list.value.unshift('关联应用')
const list = ref([]) }
const selectNav = (key) => { })
}
const select = ref('layer-service-associated-ability')
const selectNav = (key) => {
select.value = key select.value = key
console.log(key, select.value) console.log(key, select.value)
mybus.emit('flyToView', select.value) mybus.emit('flyToView', select.value)
} }
if (props.dataList.infoList) { if (props.dataList.infoList) {
list.value = [] list.value = []
let arr = [ let arr = [
'图层缩略图', '图层缩略图',
@ -122,31 +133,25 @@
list.value.push('使用方式') list.value.push('使用方式')
} }
}) })
list.value.push('关联应用') list.value.unshift('关联应用')
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
if (list.value.indexOf(item.name) > -1) { if (list.value.indexOf(item.name) > -1) {
if (item.name == '关联应用') {
if (props.associatedComponents[0].dataList.length != 0) {
item.show = true item.show = true
} }
} else {
item.show = true
}
}
}) })
select.value = navList.value.filter( select.value = navList.value.filter(
(item) => item.name === '图层展示' (item) => item.name === list.value[0]
)[0].key )[0].key
console.log('11111111111111111111111111', list.value, navList.value) console.log('11111111111111111111111111', list.value, navList.value)
} }
watch( watch(
() => props.selectNow, () => props.selectNow,
(newValue) => { (newValue) => {
select.value = newValue select.value = newValue
} }
) )
watch( watch(
() => props.dataList, () => props.dataList,
(val) => { (val) => {
if (val) { if (val) {
@ -203,31 +208,25 @@
list.value.push('使用方式') list.value.push('使用方式')
} }
}) })
list.value.push('关联应用') list.value.unshift('关联应用')
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
if (list.value.indexOf(item.name) > -1) { if (list.value.indexOf(item.name) > -1) {
if (item.name == '关联应用') {
if (props.associatedComponents[0].dataList.length != 0) {
item.show = true item.show = true
} }
} else {
item.show = true
}
}
}) })
if (list.value.length > 0) { if (list.value.length > 0) {
select.value = navList.value.filter( select.value = navList.value.filter(
(item) => item.name === '图层展示' (item) => item.name === list.value[0]
)[0].key )[0].key
} }
console.log('11111111111111111111111111', list.value, navList.value) console.log('11111111111111111111111111', list.value, navList.value)
} }
} }
) )
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.business-navigation { .business-navigation {
width: 19.12rem; width: 19.12rem;
height: 0.84rem; height: 0.84rem;
line-height: 0.8rem; line-height: 0.8rem;
@ -239,22 +238,26 @@
padding: 0 3rem; padding: 0 3rem;
box-shadow: 0rem 0.05rem 0.1rem #f2f3fb; box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
position: relative; position: relative;
.nav { .nav {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.line { .line {
width: 0.4rem; width: 0.4rem;
height: 0.04rem; height: 0.04rem;
} }
} }
.select { .select {
color: #526aff; color: #526aff;
.line { .line {
background: #526aff; background: #526aff;
} }
} }
} }
</style> </style>

View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-08 11:56:28 * @Date: 2022-06-08 11:56:28
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-01 18:52:34 * @LastEditTime: 2022-07-05 11:43:18
* @Description: 算法详情页头部 * @Description: 算法详情页头部
--> -->
<template> <template>
@ -96,6 +96,7 @@
resourceName: props.dataList.name, resourceName: props.dataList.name,
time: props.dataList.createDate, time: props.dataList.createDate,
type: props.dataList.type, type: props.dataList.type,
componentType: '图层服务',
}, },
], ],
deptId: props.dataList.deptId, deptId: props.dataList.deptId,

View File

@ -10,16 +10,20 @@
<div class="content" v-for="item in dataFrom.content" :key="item.title"> <div class="content" v-for="item in dataFrom.content" :key="item.title">
<div class="content-left"> <div class="content-left">
<div class="left"> <div class="left">
<div class="content-left-content"> <a-tooltip>
<template #title>{{ item.linkValue }}</template>
<p> <p>
<span>服务地址</span> 服务地址
<span>{{ item.linkValue }}</span> {{ item.linkValue }}
</p> </p>
</a-tooltip>
<a-tooltip>
<template #title>{{ item.csslinkValue }}</template>
<p> <p>
<span>样式服务地址</span> 样式服务地址
<span>{{ item.csslnkValue }}</span> {{ item.csslinkValue }}
</p> </p>
</div> </a-tooltip>
</div> </div>
<div class="right"> <div class="right">
<div @click="technical()">接口文档</div> <div @click="technical()">接口文档</div>
@ -31,7 +35,7 @@
<div class="content-right-title">{{ item.contact }}</div> <div class="content-right-title">{{ item.contact }}</div>
<div class="content-right-content"> <div class="content-right-content">
<p> <p>
<span>{{ item.contact }}</span> <span>{{ item.facilitator.name }}</span>
<a-tooltip> <a-tooltip>
<template #title>{{ item.facilitator.value }}</template> <template #title>{{ item.facilitator.value }}</template>
<span>{{ item.facilitator.value }}</span> <span>{{ item.facilitator.value }}</span>
@ -57,7 +61,7 @@
<div class="content-right-title">{{ item.contact2 }}</div> <div class="content-right-title">{{ item.contact2 }}</div>
<div class="content-right-content"> <div class="content-right-content">
<p> <p>
<span>{{ item.contact2 }}</span> <span>{{ item.facilitator2.name }}</span>
<a-tooltip> <a-tooltip>
<template #title>{{ item.facilitator2.value }}</template> <template #title>{{ item.facilitator2.value }}</template>
<span>{{ item.facilitator2.value }}</span> <span>{{ item.facilitator2.value }}</span>
@ -99,6 +103,7 @@
name: '接口地址:', name: '接口地址:',
}, },
linkValue: '', linkValue: '',
csslinkValue: '',
contact: '归属部门', contact: '归属部门',
facilitator: { name: '归属部门:', value: '' }, facilitator: { name: '归属部门:', value: '' },
people: { name: '部门联系人:', value: '' }, people: { name: '部门联系人:', value: '' },
@ -142,7 +147,7 @@
dataFrom.value.content[0].phone.value = props.dataList.deptPhone dataFrom.value.content[0].phone.value = props.dataList.deptPhone
console.log('dataList', props.dataList) console.log('dataList', props.dataList)
props.dataList.infoList.map((item) => { props.dataList.infoList.map((item) => {
if (item.attrType === '组件地址') { if (item.attrType === '服务地址') {
dataFrom.value.content[0].linkValue = item.attrValue || '--' dataFrom.value.content[0].linkValue = item.attrValue || '--'
} else if (item.attrType === '服务商') { } else if (item.attrType === '服务商') {
dataFrom.value.content[0].facilitator2.value = item.attrValue || '--' dataFrom.value.content[0].facilitator2.value = item.attrValue || '--'
@ -150,6 +155,8 @@
dataFrom.value.content[0].people2.value = item.attrValue || '--' dataFrom.value.content[0].people2.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系电话') { } else if (item.attrType === '服务商联系电话') {
dataFrom.value.content[0].phone2.value = item.attrValue || '--' dataFrom.value.content[0].phone2.value = item.attrValue || '--'
} else if (item.attrType === '样式服务地址') {
dataFrom.value.content[0].csslinkValue = item.attrValue || '--'
} }
}) })
} }
@ -177,7 +184,7 @@
dataFrom.value.content[0].phone.value = val.deptPhone dataFrom.value.content[0].phone.value = val.deptPhone
console.log('dataList', val) console.log('dataList', val)
val.infoList.map((item) => { val.infoList.map((item) => {
if (item.attrType === '组件地址') { if (item.attrType === '服务地址') {
dataFrom.value.content[0].linkValue = item.attrValue || '--' dataFrom.value.content[0].linkValue = item.attrValue || '--'
} else if (item.attrType === '服务商') { } else if (item.attrType === '服务商') {
dataFrom.value.content[0].facilitator2.value = dataFrom.value.content[0].facilitator2.value =
@ -186,6 +193,8 @@
dataFrom.value.content[0].people2.value = item.attrValue || '--' dataFrom.value.content[0].people2.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系电话') { } else if (item.attrType === '服务商联系电话') {
dataFrom.value.content[0].phone2.value = item.attrValue || '--' dataFrom.value.content[0].phone2.value = item.attrValue || '--'
} else if (item.attrType === '样式服务地址') {
dataFrom.value.content[0].csslinkValue = item.attrValue || '--'
} }
}) })
} }
@ -237,9 +246,11 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0.8rem 0; padding: 0.8rem 0;
.content { .content {
margin-top: 0.3rem; margin-top: 0.3rem;
display: flex; display: flex;
.content-left { .content-left {
height: 1.8rem; height: 1.8rem;
width: 6.2rem; width: 6.2rem;
@ -254,36 +265,35 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 0.35rem; padding: 0 0.35rem;
.left { .left {
.content-left-title { .content-left-title {
font-size: 0.26rem; font-size: 0.26rem;
line-height: 0.26rem; line-height: 0.26rem;
color: #212956; color: #212956;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
span:first-child { span:first-child {
margin-right: 0.1rem; margin-right: 0.1rem;
} }
} }
.content-left-content {
width: 4.2rem;
font-size: 0.2rem;
color: rgba(33, 41, 86, 0.8);
line-height: 0.2rem;
p { p {
display: -webkit-box; display: block;
color: rgba(33, 41, 86, 0.8);
width: 4.2rem;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; text-overflow: ellipsis;
-webkit-box-orient: vertical; white-space: nowrap;
// margin-bottom: 0.1rem;
font-size: 20px; font-size: 20px;
color: #212956; color: #212956;
line-height: 26px; line-height: 26px;
margin-top: 0.3rem;
} }
p:last-of-type { p:first-child {
margin-top: 20px; margin-top: 0.2rem;
}
} }
} }
.right { .right {
div { div {
height: 0.4rem; height: 0.4rem;
@ -297,11 +307,13 @@
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
div:first-child { div:first-child {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
} }
} }
.content-right { .content-right {
height: 1.8rem; height: 1.8rem;
width: 6.2rem; width: 6.2rem;
@ -316,17 +328,20 @@
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
padding: 0 0.3rem; padding: 0 0.3rem;
.content-right-left { .content-right-left {
border-right: 0.01rem solid #b0b9f1; // border-right: 0.01rem solid #b0b9f1;
padding-right: 0.1rem; padding-right: 0.1rem;
margin-right: 0.1rem; margin-right: 0.1rem;
} }
.content-right-title { .content-right-title {
font-size: 0.26rem; font-size: 0.26rem;
line-height: 0.26rem; line-height: 0.26rem;
color: #212956; color: #212956;
margin-bottom: 0.15rem; margin-bottom: 0.15rem;
} }
.content-right-content { .content-right-content {
display: flex; display: flex;
font-size: 0.16rem; font-size: 0.16rem;
@ -336,6 +351,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
flex-direction: column; flex-direction: column;
p { p {
// width: 1.60rem; // width: 1.60rem;
height: 0.2rem; height: 0.2rem;
@ -345,6 +361,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin-right: 0.15rem; margin-right: 0.15rem;
span { span {
cursor: pointer; cursor: pointer;
font-size: 20px; font-size: 20px;

View File

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

View File

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

View File

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

View File

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

View File

@ -37,8 +37,11 @@
:class=" :class="
item.type == '应用资源' item.type == '应用资源'
? 'yyzy' ? 'yyzy'
: item.type == '数据资源' : !item.type
? 'sjzy' ? 'sjzy'
: !item.infoList ||
!item.infoList.filter((val) => val.attrType == '组件类型')[0]
? 'znsf'
: item.infoList && : item.infoList &&
item.infoList.filter((val) => val.attrType == '组件类型')[0] item.infoList.filter((val) => val.attrType == '组件类型')[0]
.attrValue == '智能算法' .attrValue == '智能算法'
@ -123,7 +126,10 @@
<span>{{ item.deptName || '--' }}</span> <span>{{ item.deptName || '--' }}</span>
</div> </div>
<div v-if="selectCardsname !== '基础设施'"> <div v-if="selectCardsname !== '基础设施'">
<a-tooltip>
<template #title>{{ item.description }}</template>
{{ item.description || '--' }} {{ item.description || '--' }}
</a-tooltip>
</div> </div>
</div> </div>
<div class="bottom" v-if="selectCardsname !== '基础设施'"> <div class="bottom" v-if="selectCardsname !== '基础设施'">
@ -131,7 +137,7 @@
<div v-if="selectCardsname !== '数据资源'"> <div v-if="selectCardsname !== '数据资源'">
浏览量{{ item.visits || 0 }} 浏览量{{ item.visits || 0 }}
</div> </div>
<div>{{ item.applyCount || 0 }}</div> <div>{{ item.applyCount || 0 }}</div>
<div v-if="selectCardsname === '数据资源'"> <div v-if="selectCardsname === '数据资源'">
数据量{{ item.sjlCount || 0 }} 数据量{{ item.sjlCount || 0 }}
</div> </div>
@ -191,7 +197,7 @@
<a-button <a-button
type="primary" type="primary"
@click="toView('details', item)" @click="toView('details', item)"
v-if="whoShow1.itShowQingDao" v-if="!whoShow1.itShowBaoTou"
> >
查看详情 查看详情
</a-button> </a-button>
@ -418,10 +424,15 @@
} }
function toView(type, item) { function toView(type, item) {
if (props.selectCardsname == '数据资源') { if (props.selectCardsname == '数据资源') {
if (whoShow1.itShowQingDao) {
window.open( window.open(
'http://15.72.158.81/web/ZWXXSQ/bm/MuluDetail.aspx?zyguid=' + 'http://15.72.158.81/web/ZWXXSQ/bm/MuluDetail.aspx?zyguid=' +
item.guid item.guid
) )
} else {
window.open(
'http://10.134.135.24:30090/#/home')
}
} else { } else {
if (type === 'apply') { if (type === 'apply') {
console.log('一键申请===================>', item) console.log('一键申请===================>', item)
@ -437,6 +448,9 @@
resourceName: item.name, resourceName: item.name,
time: item.createDate, time: item.createDate,
type: item.type, type: item.type,
componentType: item.infoList.filter(
(val) => val.attrType == '组件类型'
)[0].attrValue,
}, },
], ],
deptId: item.deptId, deptId: item.deptId,
@ -606,7 +620,7 @@
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
#search-result-list-container { #search-result-list-container {
width: 1088px; width: 1088px;
padding: 0 20px; padding: 0 20px;
background: #f3f5f9; background: #f3f5f9;
@ -941,5 +955,5 @@
margin-top: 0; margin-top: 0;
} }
} }
} }
</style> </style>

View File

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

View File

@ -61,9 +61,9 @@
</a-button> </a-button>
</div> </div>
<i class="boundary"></i> <i class="boundary"></i>
<!-- 添加至--> <!-- 添加至购车 -->
<a-button type="primary" @click="addShoppingCart" class="buttonAdd"> <a-button type="primary" @click="addShoppingCart" class="buttonAdd">
添加至 添加至购车
</a-button> </a-button>
<!-- 一键申请 --> <!-- 一键申请 -->
<a-button type="primary" @click="apply" class="buttonAdd"> <a-button type="primary" @click="apply" class="buttonAdd">
@ -253,6 +253,8 @@
let tableHeight = ref('600') let tableHeight = ref('600')
//tab //tab
const tabClick = (indexFather, name) => { const tabClick = (indexFather, name) => {
selectedRowKeys.value = []
selectedList.value = []
if (clickList.value[indexFather].content.indexOf(name) != -1) { if (clickList.value[indexFather].content.indexOf(name) != -1) {
if (name == '视频资源') { if (name == '视频资源') {
tableHeight.value = 330 tableHeight.value = 330
@ -404,6 +406,7 @@
} }
// //
const addShoppingCart = () => { const addShoppingCart = () => {
if (selectedList.value.length > 0) {
sgcInsert({ sgcInsert({
delFlag: '0', delFlag: '0',
resourceId: '8888888880000000001', resourceId: '8888888880000000001',
@ -414,6 +417,9 @@
message.success('添加申购车成功!') message.success('添加申购车成功!')
mybus.emit('getSgcNum') mybus.emit('getSgcNum')
}) })
} else {
message.error('请选择需要添加申购车的数据')
}
} }
// //
const dataSource = ref([]) const dataSource = ref([])

View File

@ -119,7 +119,7 @@
paramsGetResources.type = type paramsGetResources.type = type
if (type === '数据资源' && !whoShow1.value.itShowBaoTou) { if (type === '数据资源' && !whoShow1.value.itShowBaoTou) {
getDataResource({ getDataResource({
serviceName: paramsGetResources.name, // serviceName: paramsGetResources.name || '', //
orderField: whoShow1.value.itShowQingDao ? 'fbrq' : 'createTime', // orderField: whoShow1.value.itShowQingDao ? 'fbrq' : 'createTime', //
orderType: paramsGetResources.orderType.toLowerCase(), //descasc orderType: paramsGetResources.orderType.toLowerCase(), //descasc
pageNum: paramsGetResources.pageNum, // pageNum: paramsGetResources.pageNum, //

View File

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

View File

@ -80,26 +80,32 @@
<a-select <a-select
ref="select" ref="select"
style="width: 1.4rem; height: 0.4rem" style="width: 1.4rem; height: 0.4rem"
v-for="item in fabubumen"
:key="item"
v-model="item.value"
placeholder="请选择省份" placeholder="请选择省份"
@change="qushijiedao" @change="qushijiedao"
:key="fabubumen"
>
<a-select-option
:value="item.name"
v-model="item.value"
v-for="item in fabubumen"
:key="item"
> >
<a-select-option :value="item.name">
{{ item.name }} {{ item.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
<a-select <a-select
ref="select" ref="select"
style="width: 1.4rem; height: 0.4rem" style="width: 1.4rem; height: 0.4rem"
v-for="item in shi"
:key="item"
v-model:value="item.value"
@change="qushijiedao" @change="qushijiedao"
placeholder="请选择市" placeholder="请选择市"
:key="shi"
>
<a-select-option
:value="item.name"
v-model:value="item.value"
v-for="item in shi"
:key="item"
> >
<a-select-option :value="item.name">
{{ item.name }} {{ item.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -167,9 +173,9 @@
id: '100001', id: '100001',
}, },
]) ])
let shi = ref(['请先选择省份']) let shi = ref([])
let qu = ref(['请先选择市']) let qu = ref([])
let jiedao = ref(['请先选择区']) let jiedao = ref([])
function qushijiedao(value) { function qushijiedao(value) {
let danwei = value.substr(-1) let danwei = value.substr(-1)
// name.substr(-1) // name.substr(-1)

View File

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

View File

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

View File

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

View File

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

View File

@ -97,7 +97,8 @@
<a-list-item-meta <a-list-item-meta
:description=" :description="
item.description || item.description ||
(item.note1 && (JSON.parse(item.note1) &&
JSON.parse(item.note1)[0] &&
JSON.parse(item.note1)[0].channelName + JSON.parse(item.note1)[0].channelName +
'等' + '等' +
JSON.parse(item.note1).length + JSON.parse(item.note1).length +
@ -107,14 +108,48 @@
style="position: relative" style="position: relative"
> >
<template #title> <template #title>
<div>
<span <span
@click="showItem(item.id, item.type, item.delFlag)" @click="
showItem(
item.resourceId,
item.type,
item.delFlag,
item.note1
)
"
style="cursor: pointer" style="cursor: pointer"
class="name" class="name"
> >
{{ item.resourceName }} {{ item.resourceName }}
</span> </span>
<span class="type">{{ item.type }}</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 <svg
t="1652233950228" t="1652233950228"
class="icon" class="icon"
@ -192,6 +227,24 @@
</div> </div>
</div> </div>
</div> </div>
<a-modal
v-model:visible="videoVisible"
title="已申请摄像头列表"
@ok="videoVisible = false"
>
<a-table
:columns="columns"
:data-source="xVideoList"
bordered
:pagination="{ defaultPageSize: 6 }"
>
<template #bodyCell="{ column, text }">
<!-- <template>
<a>{{ text }}</a>
</template> -->
</template>
</a-table>
</a-modal>
<!-- <a-pagination <!-- <a-pagination
v-model:current="pageNum" v-model:current="pageNum"
v-model:page-size="pageSize" v-model:page-size="pageSize"
@ -223,6 +276,8 @@
const pageNum = ref('1') const pageNum = ref('1')
const pageSize = ref('99999') const pageSize = ref('99999')
// const pageSizeOptions = ref(['5', '10', '20']) // const pageSizeOptions = ref(['5', '10', '20'])
const videoVisible = ref(false)
const xVideoList = ref([])
const total = ref(0) const total = ref(0)
const load = ref(0) const load = ref(0)
// //
@ -232,6 +287,12 @@
const checkAll = ref(false) const checkAll = ref(false)
const checkNum = ref(0) const checkNum = ref(0)
const showKey = ref(0) const showKey = ref(0)
const columns = ref([
{
title: '摄像头名称',
dataIndex: 'name',
},
])
// //
const name = ref('') const name = ref('')
const type = ref('') const type = ref('')
@ -672,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) => { const cancel = (e) => {
// console.log(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) { if (delFlag == 0) {
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle')) window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
mybus.emit('tabsChange', { flag: id }) mybus.emit('tabsChange', { flag: id })
@ -688,6 +772,7 @@
}) })
} }
} }
}
// //
const apply = () => { const apply = () => {
// list.value.forEach((val) => { // list.value.forEach((val) => {
@ -919,4 +1004,8 @@
background: url('~@/assets/home/ywzj_square.png') no-repeat; background: url('~@/assets/home/ywzj_square.png') no-repeat;
background-size: 100%; background-size: 100%;
} }
:deep(.ant-list-item-meta-title) {
display: flex;
justify-content: space-between;
}
</style> </style>

View File

@ -9,83 +9,38 @@
<div class="form-container"> <div class="form-container">
<div v-if="applySuccess"> <div v-if="applySuccess">
<div class="title">申请人信息</div> <div class="title">申请人信息</div>
<a-form <a-form ref="formRef" :model="formName" name="basic" :label-col="{ style: { width: '106px' } }"
ref="formRef" :wrapper-col="{ style: { width: '230px' } }" labelAlign="left" autocomplete="off">
:model="formName"
name="basic"
:label-col="{ style: { width: '106px' } }"
:wrapper-col="{ style: { width: '230px' } }"
labelAlign="left"
autocomplete="off"
>
<div class="base-info"> <div class="base-info">
<a-form-item <a-form-item label="申请人" name="applyUserName" :rules="[{ required: true, message: '请输入申请人' }]">
label="申请人" <a-input placeholder="请输入申请人" v-model:value="formName.applyUserName" />
name="applyUserName"
:rules="[{ required: true, message: '请输入申请人' }]"
>
<a-input
placeholder="请输入申请人"
v-model:value="formName.applyUserName"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item style="margin: 0 22px" label="申请人电话" name="applyUserPhone" :rules="[
style="margin: 0 22px"
label="申请人电话"
name="applyUserPhone"
:rules="[
{ {
required: true, required: true,
pattern: /^1[3456789]\d{9}$/, pattern: /^1[3456789]\d{9}$/,
message: '请输入正确的电话号码', message: '请输入正确的电话号码',
}, },
]" ]">
> <a-input placeholder="请输入申请人电话" v-model:value="formName.applyUserPhone" />
<a-input
placeholder="请输入申请人电话"
v-model:value="formName.applyUserPhone"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item label="申请单位" name="applyUserDeptName" :rules="[{ required: true, message: '请输入申请单位' }]">
label="申请单位" <a-input placeholder="请输入申请单位" v-model:value="formName.applyUserDeptName" />
name="applyUserDeptName"
:rules="[{ required: true, message: '请输入申请单位' }]"
>
<a-input
placeholder="请输入申请单位"
v-model:value="formName.applyUserDeptName"
/>
</a-form-item> </a-form-item>
</div> </div>
<div class="title">需求信息</div> <div class="title">需求信息</div>
<a-form-item <a-form-item style="margin-bottom: 10px" label="需求标题" name="demandSubject"
style="margin-bottom: 10px" :rules="[{ required: true, message: '请输入需求标题' }]">
label="需求标题" <a-input style="width: 350px" v-model:value="formName.demandSubject" />
name="demandSubject"
:rules="[{ required: true, message: '请输入需求标题' }]"
>
<a-input
style="width: 350px"
v-model:value="formName.demandSubject"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item style="margin-bottom: 10px" label="需求类型" name="detailsType"
style="margin-bottom: 10px" :rules="[{ required: true, message: '请选择需求类型' }]">
label="需求类型" <a-select ref="select" v-model:value="formName.detailsType" @focus="focus" style="width: 200px">
name="detailsType"
:rules="[{ required: true, message: '请选择需求类型' }]"
>
<a-select
ref="select"
v-model:value="formName.detailsType"
@focus="focus"
style="width: 200px"
>
<a-select-option value="基础设施">基础设施</a-select-option> <a-select-option value="基础设施">基础设施</a-select-option>
<a-select-option value="数据资源">数据资源</a-select-option> <a-select-option value="数据资源">数据资源</a-select-option>
<a-select-option value="组件服务">组件服务</a-select-option> <a-select-option value="组件服务">组件服务</a-select-option>
@ -94,26 +49,14 @@
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item <a-form-item label="应用领域" name="detailsField" style="width: 350px"
label="应用领域" :rules="[{ required: true, message: '请输入应用领域' }]">
name="detailsField" <a-input placeholder="请输入应用领域" v-model:value="formName.detailsField" />
style="width: 350px"
:rules="[{ required: true, message: '请输入应用领域' }]"
>
<a-input
placeholder="请输入应用领域"
v-model:value="formName.detailsField"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item style="margin-bottom: 10px" label="需求描述" name="demandDetails"
style="margin-bottom: 10px" :rules="[{ required: true, message: '请输入需求描述' }]">
label="需求描述" <a-textarea style="
name="demandDetails"
:rules="[{ required: true, message: '请输入需求描述' }]"
>
<a-textarea
style="
width: 500px; width: 500px;
height: 150px; height: 150px;
font-size: 16px; font-size: 16px;
@ -123,24 +66,12 @@
border-radius: 6px; border-radius: 6px;
padding: 10px; padding: 10px;
resize: none; resize: none;
" " v-model:value="formName.demandDetails" />
v-model:value="formName.demandDetails"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item style="color: #666; font-size: 16px" label="附件上传" name="applyDoc">
style="color: #666; font-size: 16px" <a-upload v-model:file-list="fileList" name="file" :action="upLoadUrl" :headers="headers"
label="附件上传" @change="handleChange">
name="applyDoc" <a-button style="
>
<a-upload
v-model:file-list="fileList"
name="file"
:action="upLoadUrl"
:headers="headers"
@change="handleChange"
>
<a-button
style="
width: 100px; width: 100px;
height: 30px; height: 30px;
margin-right: 10px; margin-right: 10px;
@ -151,8 +82,7 @@
border: 1px solid #bbd3ef; border: 1px solid #bbd3ef;
padding: 0; padding: 0;
text-align: center; text-align: center;
" ">
>
<upload-outlined></upload-outlined> <upload-outlined></upload-outlined>
文件上传 文件上传
</a-button> </a-button>
@ -163,8 +93,7 @@
</a-form-item> </a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }"> <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button <a-button style="
style="
width: 80px; width: 80px;
height: 38px; height: 38px;
margin-right: 20px; margin-right: 20px;
@ -175,15 +104,10 @@
border: none; border: none;
padding: 0; padding: 0;
text-align: center; text-align: center;
" " type="primary" html-type="cancle" @click="signOut">
type="primary"
html-type="cancle"
@click="signOut"
>
退出申请 退出申请
</a-button> </a-button>
<a-button <a-button style="
style="
width: 80px; width: 80px;
height: 38px; height: 38px;
background: #0087ff; background: #0087ff;
@ -193,11 +117,7 @@
border: none; border: none;
padding: 0; padding: 0;
text-align: center; text-align: center;
" " type="primary" html-type="submit" @click="processStartHandle()">
type="primary"
html-type="submit"
@click="processStartHandle()"
>
提交申请 提交申请
</a-button> </a-button>
</a-form-item> </a-form-item>
@ -220,20 +140,20 @@
</template> </template>
<script> <script>
import HomeHeader from '@/views/home/components/header' import HomeHeader from '@/views/home/components/header'
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
// import { UploadOutlined } from '@ant-design/icons-vue' // import { UploadOutlined } from '@ant-design/icons-vue'
import { getUser, getUserInfo, relaunch } from '@/api/home' import { getUser, getUserInfo, relaunch } from '@/api/home'
import { import {
demandApply, demandApply,
getDemandForm, getDemandForm,
updateDemandForm, updateDemandForm,
} from '@/api/personalCenter' } from '@/api/personalCenter'
// import { baseURL } from '@/config' // import { baseURL } from '@/config'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
export default { export default {
name: '', name: '',
props: {}, props: {},
components: { components: {
@ -296,10 +216,10 @@
} }
if (info.file.status === 'done') { if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`) message.success(`${info.file.name} 文件上传成功`)
formName.enclosure = info.file.response.data formName.enclosure = info.file.response.data
} else if (info.file.status === 'error') { } else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`) message.error(`${info.file.name} 文件上传失败`)
} }
} }
@ -351,17 +271,18 @@
// baseURL, // baseURL,
} }
}, },
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
#apply-container { #apply-container {
background-color: #f5f8fc; background-color: #f5f8fc;
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 90px auto 0; margin: 90px auto 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
aside { aside {
width: 282px; width: 282px;
height: 96%; height: 96%;
@ -369,6 +290,7 @@
background-color: #fff; background-color: #fff;
margin: 1% 0 3%; margin: 1% 0 3%;
} }
article { article {
width: 1090px; width: 1090px;
height: 99%; height: 99%;
@ -376,8 +298,10 @@
background-color: #fff; background-color: #fff;
margin: 5% auto; margin: 5% auto;
} }
.form-container { .form-container {
padding: 20px 20px 30px 20px; padding: 20px 20px 30px 20px;
.title { .title {
font-size: 20px; font-size: 20px;
color: #000; color: #000;
@ -385,18 +309,22 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
.base-info { .base-info {
display: flex; display: flex;
} }
:deep(.ant-form-item-label) { :deep(.ant-form-item-label) {
label { label {
color: #666; color: #666;
font-size: 16px; font-size: 16px;
&::after { &::after {
content: ''; content: '';
} }
} }
} }
:deep(.ant-form-item-required) { :deep(.ant-form-item-required) {
&::before { &::before {
font-size: 8px; font-size: 8px;
@ -408,21 +336,23 @@
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
border-radius: 6px; border-radius: 6px;
} }
.success { .success {
div { div {
width: 100px; width: 100px;
margin: 80px auto 40px; margin: 80px auto 40px;
} }
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
color: #000; color: #000;
} }
} }
</style> </style>
<style> <style>
body, body,
html { html {
height: unset; height: unset;
} }
</style> </style>

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

@ -0,0 +1 @@
{}