hi-ucs/front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAn...

291 lines
8.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--使用方式-->
<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>