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

图层服务详情页完善

This commit is contained in:
gaoyuanwei 2022-06-23 09:44:16 +08:00
parent 8371fb4eab
commit f3100ec6ab
7 changed files with 156 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue
View File

@ -8,24 +8,24 @@
<div class="content-left"> <div class="content-left">
<div class="content-left-content"> <div class="content-left-content">
<ul> <ul>
<li v-for="(item, index) in dataFromLeft" :key="index"> <li v-for="(item, index) in dataFromLeft.content" :key="index">
<img :src="iconImg" /> <img :src="iconImg" />
<span>{{ item.type }}</span> <span>{{ item.type }}</span>
<p>{{ item.value }}</p> <p>{{ item.values }}</p>
</li> </li>
</ul> </ul>
<ul> <ul>
<li v-for="(item, index) in dataFromCenter" :key="index"> <li v-for="(item, index) in dataFromCenter.content" :key="index">
<img :src="iconImg" /> <img :src="iconImg" />
<span>{{ item.type }}</span> <span>{{ item.type }}</span>
<p>{{ item.value }}</p> <p>{{ item.values }}</p>
</li> </li>
</ul> </ul>
<ul> <ul>
<li v-for="(item, index) in dataFromRight" :key="index"> <li v-for="(item, index) in dataFromRight.content" :key="index">
<img :src="iconImg" /> <img :src="iconImg" />
<span>{{ item.type }}</span> <span>{{ item.type }}</span>
<p>{{ item.value }}</p> <p>{{ item.values }}</p>
</li> </li>
</ul> </ul>
</div> </div>
@ -38,48 +38,54 @@
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 iconImg = require('@/assets/detailsAll/layer-service/layer-icon.png') const iconImg = require('@/assets/detailsAll/layer-service/layer-icon.png')
const dataFromLeft = ref([ const dataFromLeft = ref({
content: [
{ {
type: '服务类型', type: '服务类型',
value: '服务类型名称', values: '',
}, },
{ {
type: '覆盖区域', type: '覆盖区域',
value: '覆盖区域名称', values: '',
}, },
{ {
type: '切片策略', type: '切片策略',
value: '名称', values: '',
}, },
]) ],
const dataFromCenter = ref([ })
const dataFromCenter = ref({
content: [
{ {
type: '坐标系', type: '坐标系',
value: '名称', values: '',
}, },
{ {
type: '切片尺寸详情', type: '切片尺寸详情',
value: '名称', values: '',
}, },
{ {
type: '最小级别名称', type: '最小级别名称',
value: '名称', values: '',
}, },
]) ],
const dataFromRight = ref([ })
const dataFromRight = ref({
content: [
{ {
type: '数据范围', type: '数据范围',
value: '名称', values: '',
}, },
{ {
type: '图层名称', type: '图层名称',
value: '名称', values: '',
}, },
{ {
type: '最大级别', type: '最大级别',
value: '名称', values: '',
}, },
]) ],
})
//数据初始化 //数据初始化
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
@ -87,25 +93,35 @@
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.attrType === '图层信息' (item) => item.attrType === '技术文档'
)[0] )[0]
if (!obj) { if (!obj) {
flag.value = false flag.value = false
} else { } else {
// dataFrom.value.content[0].link.value = props.dataList.apiUrl // dataFrom.value.content[0].link.value = props.dataList.apiUrl
// dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts // dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts
// 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 || '--' dataFromLeft.value.content[0].values = item.attrValue || '123'
// } else if (item.attrType === '服务商') { } else if (item.attrType === '覆盖区域') {
// dataFrom.value.content[0].facilitator2.value = item.attrValue || '--' dataFromLeft.value.content[1].values = item.attrValue || '--'
// } else if (item.attrType === '服务商联系人') { } else if (item.attrType === '切片策略') {
// dataFrom.value.content[0].people2.value = item.attrValue || '--' dataFromLeft.value.content[2].values = item.attrValue || '--'
// } else if (item.attrType === '服务商联系电话') { } else if (item.attrType === '坐标系') {
// dataFrom.value.content[0].phone2.value = item.attrValue || '--' dataFromCenter.value.content[0].values = item.attrValue || '--'
// } } else if (item.attrType === '切片尺寸') {
// }) dataFromCenter.value.content[1].values = item.attrValue || '--'
} else if (item.attrType === '最小级别') {
dataFromCenter.value.content[2].values = item.attrValue || '--'
} else if (item.attrType === '数据范围') {
dataFromRight.value.content[0].values = item.attrValue || '--'
} else if (item.attrType === '图层类型') {
dataFromRight.value.content[1].values = item.attrValue || '--'
} else if (item.attrType === '最大级别') {
dataFromRight.value.content[2].values = item.attrValue || '--'
}
})
} }
} }
watch( watch(
@ -118,19 +134,28 @@
} else { } else {
// dataFrom.value.content[0].link.value = val.apiUrl // dataFrom.value.content[0].link.value = val.apiUrl
// dataFrom.value.content[0].facilitator.value = val.deptContacts // dataFrom.value.content[0].facilitator.value = val.deptContacts
// 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 || '--' dataFromLeft.value.content[0].values = item.attrValue || '123'
// } else if (item.attrType === '服务商') { } else if (item.attrType === '覆盖区域') {
// dataFrom.value.content[0].facilitator2.value = dataFromLeft.value.content[1].values = item.attrValue || '--'
// item.attrValue || '--' } else if (item.attrType === '切片策略') {
// } else if (item.attrType === '服务商联系人') { dataFromLeft.value.content[2].values = item.attrValue || '--'
// dataFrom.value.content[0].people2.value = item.attrValue || '--' } else if (item.attrType === '坐标系') {
// } else if (item.attrType === '服务商联系电话') { dataFromCenter.value.content[0].values = item.attrValue || '--'
// dataFrom.value.content[0].phone2.value = item.attrValue || '--' } else if (item.attrType === '切片尺寸') {
// } dataFromCenter.value.content[1].values = item.attrValue || '--'
// }) } else if (item.attrType === '最小级别') {
dataFromCenter.value.content[2].values = item.attrValue || '--'
} else if (item.attrType === '数据范围') {
dataFromRight.value.content[0].values = item.attrValue || '--'
} else if (item.attrType === '图层类型') {
dataFromRight.value.content[1].values = item.attrValue || '--'
} else if (item.attrType === '最大级别') {
dataFromRight.value.content[2].values = item.attrValue || '--'
}
})
} }
} }
} }

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

@ -67,11 +67,11 @@
if (props.dataList.infoList) { if (props.dataList.infoList) {
list.value = [] list.value = []
let arr = [ let arr = [
'组件视频介绍', '图层缩略图',
'图层信息', '坐标系',
'应用场景', '应用场景',
'应用案例', '应用案例',
'图层预览', '是否可预览',
'使用方式', '使用方式',
'常见问题', '常见问题',
] ]
@ -83,14 +83,18 @@
props.dataList.infoList.map((item) => { props.dataList.infoList.map((item) => {
if ( if (
item.attrType === '常见问题' || item.attrType === '常见问题' ||
item.attrType === '图层信息' ||
item.attrType === '图层预览' ||
item.attrType === '应用场景' || item.attrType === '应用场景' ||
item.attrType === '应用案例' item.attrType === '应用案例'
) { ) {
list.value.push(item.attrType) list.value.push(item.attrType)
} else if (item.attrType === '组件视频介绍') { } else if (item.attrType === '图层缩略图') {
list.value.push('图层展示') list.value.push('图层展示')
} else if (item.attrType === '坐标系') {
list.value.push('图层信息')
} else if (item.attrType === '是否可预览') {
if (item.attrValue === '是') {
list.value.push('图层预览')
}
} }
}) })
list.value.push('使用方式') list.value.push('使用方式')
@ -117,11 +121,11 @@
if (val) { if (val) {
list.value = [] list.value = []
let arr = [ let arr = [
'组件视频介绍', '图层缩略图',
'图层信息', '坐标系',
'应用场景', '应用场景',
'应用案例', '应用案例',
'图层预览', '是否可预览',
'使用方式', '使用方式',
'常见问题', '常见问题',
] ]
@ -134,14 +138,18 @@
val.infoList.map((item) => { val.infoList.map((item) => {
if ( if (
item.attrType === '常见问题' || item.attrType === '常见问题' ||
item.attrType === '图层信息' ||
item.attrType === '图层预览' ||
item.attrType === '应用场景' || item.attrType === '应用场景' ||
item.attrType === '应用案例' item.attrType === '应用案例'
) { ) {
list.value.push(item.attrType) list.value.push(item.attrType)
} else if (item.attrType === '组件视频介绍') { } else if (item.attrType === '图层缩略图') {
list.value.push('组件展示') list.value.push('图层展示')
} else if (item.attrType === '坐标系') {
list.value.push('图层信息')
} else if (item.attrType === '是否可预览') {
if (item.attrValue === '是') {
list.value.push('图层预览')
}
} }
}) })
list.value.push('使用方式') list.value.push('使用方式')

14
front/src/views/detailsAll/components/LayerService/LayerServicePresentation.vue
View File

@ -9,7 +9,7 @@
<div class="application-presentation" v-if="flag"> <div class="application-presentation" v-if="flag">
<detals-title title="图层展示" type="IMAGE"></detals-title> <detals-title title="图层展示" type="IMAGE"></detals-title>
<div class="main"> <div class="main">
<img :src="img" /> <img :src="onTrial" />
</div> </div>
</div> </div>
</template> </template>
@ -20,16 +20,16 @@
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
const flag = ref(true) const flag = ref(true)
const img = ref() const onTrial = ref('')
console.log('111111111111111111111,', props.dataList) console.log('111111111111111111111,', props.dataList)
if (props.dataList.infoList) { if (props.dataList.infoList) {
let imgindex = props.dataList.infoList.filter( let imgindex = props.dataList.infoList.filter(
(item) => item.attrType === '组件图片' (item) => item.attrType === '图层缩略图'
)[0] )[0]
if (!imgindex) { if (!imgindex) {
flag.value = false flag.value = false
} else { } else {
img.value = imgindex.attrValue onTrial.value = imgindex.attrValue
} }
} }
watch( watch(
@ -37,12 +37,12 @@
(val) => { (val) => {
if (val) { if (val) {
let imgindex = props.dataList.infoList.filter( let imgindex = props.dataList.infoList.filter(
(item) => item.attrType === '组件图片' (item) => item.attrType === '图层缩略图'
)[0] )[0]
if (!imgindex) { if (!imgindex) {
flag.value = false flag.value = false
} else { } else {
img.value = imgindex.attrValue onTrial.value = imgindex.attrValue
} }
} }
} }
@ -72,7 +72,7 @@
cursor: pointer; cursor: pointer;
} }
img { img {
width: 50%; width: 100%;
height: 100%; height: 100%;
border-radius: 0.1rem; border-radius: 0.1rem;
} }

24
front/src/views/detailsAll/components/LayerService/LayerServicePreview.vue
View File

@ -8,7 +8,14 @@
<template> <template>
<div class="application-presentation" v-if="flag"> <div class="application-presentation" v-if="flag">
<detals-title title="图层预览" type="PREVIEW"></detals-title> <detals-title title="图层预览" type="PREVIEW"></detals-title>
<div class="main" :style="`${img}background-position:center;`"></div> <div class="main" :style="`${img}background-position:center;`">
<iframe
:src="img"
width="100%"
height="100%"
border-radius="0.1rem"
></iframe>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
@ -19,16 +26,16 @@
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
const flag = ref(true) const flag = ref(true)
const img = ref({}) const img = ref('')
console.log('111111111111111111111,', props.dataList) console.log('111111111111111111111,', props.dataList)
if (props.dataList.infoList) { if (props.dataList.infoList) {
let imgindex = props.dataList.infoList.filter( let imgindex = props.dataList.infoList.filter(
(item) => item.attrType === '图层预览' (item) => item.attrType === '是否可预览' && item.attrValue === '是'
)[0] )[0]
if (!imgindex) { if (!imgindex) {
flag.value = false flag.value = false
} else { } else {
img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;' img.value = imgindex.attrValue
} }
} }
watch( watch(
@ -36,13 +43,12 @@
(val) => { (val) => {
if (val) { if (val) {
let imgindex = props.dataList.infoList.filter( let imgindex = props.dataList.infoList.filter(
(item) => item.attrType === '图层预览' (item) => item.attrType === '是否可预览' && item.attrValue === '是'
)[0] )[0]
if (!imgindex) { if (!imgindex) {
flag.value = false flag.value = false
} else { } else {
img.value = img.value = imgindex.attrValue
'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
} }
} }
} }
@ -54,10 +60,6 @@
.main { .main {
height: 5rem; height: 5rem;
border-radius: 0.1rem; border-radius: 0.1rem;
// background-image: url('~@/assets/detailsAll/sf_video_bg.png');
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
margin-top: 0.4rem; margin-top: 0.4rem;
display: flex; display: flex;
justify-content: center; justify-content: center;

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

@ -30,11 +30,11 @@
</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>
@ -44,7 +44,7 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ShoppingCartOutlined } from '@ant-design/icons-vue' import { FormOutlined, 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'
@ -150,7 +150,7 @@
.lable-father { .lable-father {
position: absolute; position: absolute;
min-width: 2.5rem; min-width: 2.5rem;
right: -2.5rem; right: -2.8rem;
top: 0; top: 0;
} }
.label { .label {
@ -182,37 +182,21 @@
.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;
background: #ffffff; background: #ff8b55;
border-radius: 0.06rem; border-radius: 0.06rem;
font-size: 0.2rem; font-size: 0.2rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.ant-btn-primary {
color: #1890ff;
}
.ant-btn:nth-of-type(1) { .ant-btn:nth-of-type(1) {
width: 1.8rem; width: 1.8rem;
background-image: url('~@/assets/detailsAll/layer-service/layer-apply-using.png');
background-repeat: no-repeat;
background-position: 24px center;
background-color: #ff8b55;
color: #fff;
padding-left: 26px;
} }
.ant-btn:nth-of-type(2) { .ant-btn:nth-of-type(2) {
width: 2.2rem; width: 2.2rem;
background-image: url('~@/assets/detailsAll/layer-service/layer-shopping-car.png');
background-repeat: no-repeat;
background-position: 24px center;
background-color: #ff8b55;
color: #fff;
padding-left: 26px;
} }
.ant-btn:nth-of-type(3) { .ant-btn:nth-of-type(3) {
width: 1.45rem; width: 1.45rem;

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

@ -63,8 +63,9 @@
name: '接口地址：', name: '接口地址：',
}, },
linkValue: '', linkValue: '',
csslnkValue: '',
contact: '归属部门', contact: '归属部门',
facilitator: { name: '归属部门：', value: '讯飞科大' }, facilitator: { name: '归属部门：', values: '讯飞科大' },
people: { name: '部门联系人：', value: '李四' }, people: { name: '部门联系人：', value: '李四' },
phone: { phone: {
name: '联系人电话：', name: '联系人电话：',
@ -87,17 +88,17 @@
} else { } else {
// eslint-disable-next-line vue/no-setup-props-destructure // eslint-disable-next-line vue/no-setup-props-destructure
dataFrom.value.content[0].link.value = props.dataList.apiUrl dataFrom.value.content[0].link.value = props.dataList.apiUrl
dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts dataFrom.value.content[0].facilitator.values = props.dataList.deptContacts
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].facilitator.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系人') { } else if (item.attrType === '服务商联系人') {
dataFrom.value.content[0].people2.value = item.attrValue || '--' dataFrom.value.content[0].people.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系电话') { } else if (item.attrType === '服务商联系电话') {
dataFrom.value.content[0].phone2.value = item.attrValue || '--' dataFrom.value.content[0].phone.value = item.attrValue || '--'
} }
}) })
} }
@ -117,12 +118,12 @@
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].facilitator.value =
item.attrValue || '--' item.attrValue || '--'
} else if (item.attrType === '服务商联系人') { } else if (item.attrType === '服务商联系人') {
dataFrom.value.content[0].people2.value = item.attrValue || '--' dataFrom.value.content[0].people.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系电话') { } else if (item.attrType === '服务商联系电话') {
dataFrom.value.content[0].phone2.value = item.attrValue || '--' dataFrom.value.content[0].phone.value = item.attrValue || '--'
} }
}) })
} }

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

@ -112,7 +112,7 @@
case '业务组件': case '业务组件':
showView.value = 'business-details' showView.value = 'business-details'
break break
case 'GIS图层': case '图层服务':
showView.value = 'layer-service' showView.value = 'layer-service'
break break
default: default:
@ -146,7 +146,7 @@
case '业务组件': case '业务组件':
showView.value = 'business-details' showView.value = 'business-details'
break break
case 'GIS图层': case '图层服务':
showView.value = 'layer-service' showView.value = 'layer-service'
break break
default: default: