291 lines
8.2 KiB
Vue
291 lines
8.2 KiB
Vue
<!--使用方式-->
|
||
<template>
|
||
<div class="application-deployment-and-security" v-if="flag">
|
||
<div class="title">
|
||
<DetalsTitle
|
||
:title="dataFrom.title"
|
||
:type="dataFrom.englishTitle"
|
||
></DetalsTitle>
|
||
</div>
|
||
<div class="content">
|
||
<div class="content-card">
|
||
<div class="left">
|
||
<p>{{ dataFrom.linkName }}</p>
|
||
<a-tooltip>
|
||
<template #title>{{ dataFrom.link }}</template>
|
||
<p>{{ dataFrom.link }}</p>
|
||
</a-tooltip>
|
||
</div>
|
||
<div class="right">
|
||
<div @click="technical()">技术文档</div>
|
||
<div @click="technicaltow()">新手指引</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-card">
|
||
<div v-for="(item, index) in dataFrom.content" :key="index">
|
||
<div class="card-title">
|
||
{{ item.childrenTitle }}
|
||
</div>
|
||
<div class="card-content">
|
||
<div v-for="carditem in item.childrenContent" :key="carditem">
|
||
<div>
|
||
<span>{{ carditem.attrType }}：</span>
|
||
<a-tooltip>
|
||
<template #title>{{ carditem.attrValue }}</template>
|
||
<span>{{ carditem.attrValue }}</span>
|
||
</a-tooltip>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||
import { ref, defineProps, watch } from 'vue'
|
||
import { pinyin } from 'pinyin-pro'
|
||
let flag = ref(true)
|
||
let dataFrom = ref({
|
||
title: '使用方式',
|
||
englishTitle: 'USAGE',
|
||
linkName: '组件地址',
|
||
link: '',
|
||
content: [
|
||
{
|
||
childrenTitle: '归属部门',
|
||
childrenContent: [
|
||
{
|
||
attrType: '部门联系人',
|
||
attrValue: '------',
|
||
},
|
||
{
|
||
attrType: '联系人电话',
|
||
attrValue: '------',
|
||
},
|
||
{
|
||
attrType: '归属部门名称',
|
||
attrValue: '------',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
childrenTitle: '服务商信息',
|
||
childrenContent: [
|
||
{
|
||
attrType: '服务商联系人',
|
||
attrValue: '------',
|
||
},
|
||
{
|
||
attrType: '联系人电话',
|
||
attrValue: '------',
|
||
},
|
||
{
|
||
attrType: '服务商名称',
|
||
attrValue: '------',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
})
|
||
console.log(dataFrom.value)
|
||
//数据初始化
|
||
const props = defineProps({
|
||
dataList: { type: Object, default: null },
|
||
})
|
||
if (props.dataList.infoList) {
|
||
let obj = props.dataList.infoList.filter(
|
||
(item) => item.attrType === '组件地址'
|
||
)[0]
|
||
if (!obj) {
|
||
flag.value = false
|
||
} else {
|
||
dataFrom.value.content[0].childrenContent[0].attrValue =
|
||
props.dataList.deptContacts
|
||
dataFrom.value.content[0].childrenContent[1].attrValue =
|
||
props.dataList.deptPhone
|
||
dataFrom.value.content[0].childrenContent[2].attrValue =
|
||
props.dataList.deptName
|
||
props.dataList.infoList.map((item) => {
|
||
if (item.attrType == '组件地址') {
|
||
dataFrom.value.link = item.attrValue
|
||
} else if (item.attrType == '服务商联系人') {
|
||
dataFrom.value.content[1].childrenContent[0].attrValue =
|
||
item.attrValue
|
||
} else if (item.attrType == '服务商联系电话') {
|
||
dataFrom.value.content[1].childrenContent[1].attrValue =
|
||
item.attrValue
|
||
}
|
||
})
|
||
}
|
||
}
|
||
console.log('obj', dataFrom.value)
|
||
//技术文档
|
||
function technical() {
|
||
// 拼接路径
|
||
// const type = pinyin(props.dataList.type, {
|
||
// pattern: 'initial',
|
||
// }).replace(/\s*/g, '')
|
||
// // 打开文档
|
||
// const id = props.dataList.id
|
||
// window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
|
||
// console.log('dataFrom.value.link', dataFrom.value.link)
|
||
let obj = props.dataList.infoList.filter(
|
||
(item) => item.attrType === '技术文档'
|
||
)[0]
|
||
console.log('dataFrom.value.link', obj.attrValue)
|
||
window.open(
|
||
window.SITE_CONFIG.previewUrl +
|
||
'hisense_office/onlinePreview?url=' +
|
||
btoa(encodeURI(obj.attrValue))
|
||
)
|
||
}
|
||
function technicaltow() {
|
||
let obj = props.dataList.infoList.filter(
|
||
(item) => item.attrType === '使用手册'
|
||
)[0]
|
||
console.log('dataFrom.value.link', obj.attrValue)
|
||
window.open(
|
||
window.SITE_CONFIG.previewUrl +
|
||
'hisense_office/onlinePreview?url=' +
|
||
btoa(encodeURI(obj.attrValue))
|
||
)
|
||
}
|
||
watch(
|
||
() => props.dataList,
|
||
(val) => {
|
||
if (val) {
|
||
let obj = val.infoList.filter((item) => item.attrType === '组件地址')[0]
|
||
if (!obj) {
|
||
flag.value = false
|
||
} else {
|
||
dataFrom.value.content[0].childrenContent[0].attrValue =
|
||
props.dataList.deptContacts
|
||
dataFrom.value.content[0].childrenContent[1].attrValue =
|
||
props.dataList.deptPhone
|
||
dataFrom.value.content[0].childrenContent[2].attrValue =
|
||
props.dataList.deptName
|
||
props.dataList.infoList.map((item) => {
|
||
if (item.attrType == '组件地址') {
|
||
dataFrom.value.link = item.attrValue
|
||
} else if (item.attrType == '服务商联系人') {
|
||
dataFrom.value.content[1].childrenContent[0].attrValue =
|
||
item.attrValue
|
||
} else if (item.attrType == '服务商联系电话') {
|
||
dataFrom.value.content[1].childrenContent[1].attrValue =
|
||
item.attrValue
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
)
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.application-deployment-and-security {
|
||
padding: 0.8rem 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.title {
|
||
margin-bottom: 0.3rem;
|
||
}
|
||
.content {
|
||
display: flex;
|
||
width: 13rem;
|
||
justify-content: space-between;
|
||
.content-card {
|
||
height: 1.8rem;
|
||
width: 6.2rem;
|
||
border-radius: 0.2rem;
|
||
background: linear-gradient(
|
||
to right,
|
||
rgba(113, 132, 252, 0.4),
|
||
rgba(148, 163, 252, 0.4)
|
||
);
|
||
padding: 0 0.3rem;
|
||
display: flex;
|
||
align-items: center;
|
||
& > div {
|
||
width: 3.1rem;
|
||
padding-left: 0.3rem;
|
||
}
|
||
& > div:first-child {
|
||
padding-left: 0;
|
||
border-right: 0.01rem solid #b0b9f1;
|
||
}
|
||
.card-title {
|
||
font-size: 0.26rem;
|
||
color: #212956;
|
||
margin-bottom: 0.2rem;
|
||
line-height: 0.26rem;
|
||
}
|
||
.card-content {
|
||
white-space: nowrap;
|
||
div {
|
||
display: block;
|
||
margin-right: 0.2rem;
|
||
color: rgba(33, 41, 86, 0.8);
|
||
font-size: 0.2rem;
|
||
max-width: 2.8rem;
|
||
div {
|
||
max-width: 2.8rem;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.content-card:first-child {
|
||
position: relative;
|
||
.left {
|
||
border: 0;
|
||
p:first-child {
|
||
font-size: 0.26rem;
|
||
color: #212956;
|
||
margin-bottom: 0.2rem;
|
||
line-height: 0.26rem;
|
||
}
|
||
p:last-child {
|
||
font-size: 0.2rem;
|
||
color: #212956;
|
||
line-height: 0.26rem;
|
||
max-width: 4.5rem;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
.right {
|
||
position: absolute;
|
||
right: 0.6rem;
|
||
top: 50%;
|
||
width: 1.28rem;
|
||
margin-top: -0.45rem;
|
||
cursor: pointer;
|
||
& > div {
|
||
width: 1.28rem;
|
||
height: 0.4rem;
|
||
background: #ffffff;
|
||
border-radius: 0.2rem;
|
||
font-size: 0.2rem;
|
||
color: #526aff;
|
||
text-align: center;
|
||
line-height: 0.4rem;
|
||
}
|
||
& > div:first-child {
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|