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

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

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

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

@ -67,11 +67,11 @@
if (props.dataList.infoList) {
list.value = []
let arr = [
'组件视频介绍',
'图层信息',
'图层缩略图',
'坐标系',
'应用场景',
'应用案例',
'图层预览',
'是否可预览',
'使用方式',
'常见问题',
]
@ -83,14 +83,18 @@
props.dataList.infoList.map((item) => {
if (
item.attrType === '常见问题' ||
item.attrType === '图层信息' ||
item.attrType === '图层预览' ||
item.attrType === '应用场景' ||
item.attrType === '应用案例'
) {
list.value.push(item.attrType)
} else if (item.attrType === '组件视频介绍') {
} else if (item.attrType === '图层缩略图') {
list.value.push('图层展示')
} else if (item.attrType === '坐标系') {
list.value.push('图层信息')
} else if (item.attrType === '是否可预览') {
if (item.attrValue === '是') {
list.value.push('图层预览')
}
}
})
list.value.push('使用方式')
@ -117,11 +121,11 @@
if (val) {
list.value = []
let arr = [
'组件视频介绍',
'图层信息',
'图层缩略图',
'坐标系',
'应用场景',
'应用案例',
'图层预览',
'是否可预览',
'使用方式',
'常见问题',
]
@ -134,14 +138,18 @@
val.infoList.map((item) => {
if (
item.attrType === '常见问题' ||
item.attrType === '图层信息' ||
item.attrType === '图层预览' ||
item.attrType === '应用场景' ||
item.attrType === '应用案例'
) {
list.value.push(item.attrType)
} else if (item.attrType === '组件视频介绍') {
list.value.push('组件展示')
} else if (item.attrType === '图层缩略图') {
list.value.push('图层展示')
} else if (item.attrType === '坐标系') {
list.value.push('图层信息')
} else if (item.attrType === '是否可预览') {
if (item.attrValue === '是') {
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">
<detals-title title="图层展示" type="IMAGE"></detals-title>
<div class="main">
<img :src="img" />
<img :src="onTrial" />
</div>
</div>
</template>
@ -20,16 +20,16 @@
dataList: { type: Object, default: null },
})
const flag = ref(true)
const img = ref()
const onTrial = ref('')
console.log('111111111111111111111,', props.dataList)
if (props.dataList.infoList) {
let imgindex = props.dataList.infoList.filter(
(item) => item.attrType === '组件图片'
(item) => item.attrType === '图层缩略图'
)[0]
if (!imgindex) {
flag.value = false
} else {
img.value = imgindex.attrValue
onTrial.value = imgindex.attrValue
}
}
watch(
@ -37,12 +37,12 @@
(val) => {
if (val) {
let imgindex = props.dataList.infoList.filter(
(item) => item.attrType === '组件图片'
(item) => item.attrType === '图层缩略图'
)[0]
if (!imgindex) {
flag.value = false
} else {
img.value = imgindex.attrValue
onTrial.value = imgindex.attrValue
}
}
}
@ -72,7 +72,7 @@
cursor: pointer;
}
img {
width: 50%;
width: 100%;
height: 100%;
border-radius: 0.1rem;
}

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

@ -8,7 +8,14 @@
<template>
<div class="application-presentation" v-if="flag">
<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>
</template>
<script setup>
@ -19,16 +26,16 @@
dataList: { type: Object, default: null },
})
const flag = ref(true)
const img = ref({})
const img = ref('')
console.log('111111111111111111111,', props.dataList)
if (props.dataList.infoList) {
let imgindex = props.dataList.infoList.filter(
(item) => item.attrType === '图层预览'
(item) => item.attrType === '是否可预览' && item.attrValue === '是'
)[0]
if (!imgindex) {
flag.value = false
} else {
img.value = 'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
img.value = imgindex.attrValue
}
}
watch(
@ -36,13 +43,12 @@
(val) => {
if (val) {
let imgindex = props.dataList.infoList.filter(
(item) => item.attrType === '图层预览'
(item) => item.attrType === '是否可预览' && item.attrValue === '是'
)[0]
if (!imgindex) {
flag.value = false
} else {
img.value =
'background:' + 'url(' + imgindex.attrValue + ') no-repeat;'
img.value = imgindex.attrValue
}
}
}
@ -54,10 +60,6 @@
.main {
height: 5rem;
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;
display: flex;
justify-content: center;

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

@ -30,11 +30,11 @@
</div>
<div class="bottom" v-if="props.dataList.id">
<a-button type="primary" @click="toView()">
<!--<template #icon><form-outlined /></template>-->
<template #icon><form-outlined /></template>
申请使用
</a-button>
<a-button type="primary" @click="addShoppingCart()">
<!--<template #icon><shopping-cart-outlined /></template>-->
<template #icon><shopping-cart-outlined /></template>
加入购物车
</a-button>
<a-button type="primary" @click="goTOCollection()">收藏</a-button>
@ -44,7 +44,7 @@
</div>
</template>
<script setup>
import { ShoppingCartOutlined } from '@ant-design/icons-vue'
import { FormOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue'
import { defineProps, ref, watch } from 'vue'
import { scInsert } from '@/api/personalCenter'
import { sgcInsert } from '@/api/home'
@ -150,7 +150,7 @@
.lable-father {
position: absolute;
min-width: 2.5rem;
right: -2.5rem;
right: -2.8rem;
top: 0;
}
.label {
@ -182,37 +182,21 @@
.bottom {
margin-top: 0.4rem;
display: flex;
.ant-btn {
height: 0.5rem;
margin-right: 0.2rem;
background: #ffffff;
background: #ff8b55;
border-radius: 0.06rem;
font-size: 0.2rem;
display: flex;
justify-content: center;
align-items: center;
}
.ant-btn-primary {
color: #1890ff;
}
.ant-btn:nth-of-type(1) {
width: 1.8rem;
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) {
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) {
width: 1.45rem;

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

@ -63,8 +63,9 @@
name: '接口地址：',
},
linkValue: '',
csslnkValue: '',
contact: '归属部门',
facilitator: { name: '归属部门：', value: '讯飞科大' },
facilitator: { name: '归属部门：', values: '讯飞科大' },
people: { name: '部门联系人：', value: '李四' },
phone: {
name: '联系人电话：',
@ -87,17 +88,17 @@
} else {
// eslint-disable-next-line vue/no-setup-props-destructure
dataFrom.value.content[0].link.value = props.dataList.apiUrl
dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts
dataFrom.value.content[0].facilitator.values = props.dataList.deptContacts
console.log('dataList', props.dataList)
props.dataList.infoList.map((item) => {
if (item.attrType === '组件地址') {
dataFrom.value.content[0].linkValue = item.attrValue || '--'
} else if (item.attrType === '服务商') {
dataFrom.value.content[0].facilitator2.value = item.attrValue || '--'
dataFrom.value.content[0].facilitator.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系人') {
dataFrom.value.content[0].people2.value = item.attrValue || '--'
dataFrom.value.content[0].people.value = item.attrValue || '--'
} 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 === '组件地址') {
dataFrom.value.content[0].linkValue = item.attrValue || '--'
} else if (item.attrType === '服务商') {
dataFrom.value.content[0].facilitator2.value =
dataFrom.value.content[0].facilitator.value =
item.attrValue || '--'
} else if (item.attrType === '服务商联系人') {
dataFrom.value.content[0].people2.value = item.attrValue || '--'
dataFrom.value.content[0].people.value = item.attrValue || '--'
} 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 '业务组件':
showView.value = 'business-details'
break
case 'GIS图层':
case '图层服务':
showView.value = 'layer-service'
break
default:
@ -146,7 +146,7 @@
case '业务组件':
showView.value = 'business-details'
break
case 'GIS图层':
case '图层服务':
showView.value = 'layer-service'
break
default: