西海岸
This commit is contained in:
parent
afbf59cc50
commit
6260158c16
|
|
@ -1,8 +1,8 @@
|
|||
<!--
|
||||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-05-06 11:12:00
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-13 17:45:49
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-06-10 16:07:12
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<template>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 639 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
|
|
@ -211,21 +211,11 @@ export const constantRoutes = [
|
|||
},
|
||||
},
|
||||
{
|
||||
path: '/PictureCharacterRecognition',
|
||||
name: 'PictureCharacterRecognition',
|
||||
component: () =>
|
||||
import('@/views/detailsAll/components/PictureCharacterRecognition'),
|
||||
path: '/document',
|
||||
name: 'document',
|
||||
component: () => import('@/views/developDocument'),
|
||||
meta: {
|
||||
title: '图片文字识别',
|
||||
icon: 'error-warning-line',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/TestOfWords',
|
||||
name: 'TestOfWords',
|
||||
component: () => import('@/views/detailsAll/components/TestOfWords'),
|
||||
meta: {
|
||||
title: '文字检验',
|
||||
title: '文档',
|
||||
icon: 'error-warning-line',
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -26,15 +26,4 @@ html {
|
|||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background-color: rgb(200, 204, 209);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,326 +0,0 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-13 10:22:27
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-13 17:44:04
|
||||
* @Description: 算法上架
|
||||
-->
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="header">能力上架申请</div>
|
||||
<div class="top">
|
||||
<div
|
||||
v-for="(nav, index) in navList"
|
||||
:key="nav"
|
||||
:class="[index <= navList2.indexOf(showView) ? 'finish' : '']"
|
||||
>
|
||||
<span class="bg-box">
|
||||
<span>{{ index + 1 }}</span>
|
||||
</span>
|
||||
<span>{{ nav.name }}</span>
|
||||
<div class="line" v-if="index !== navList.length - 1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vue-box">
|
||||
<algorithm-essential-information
|
||||
v-if="showView === '基本信息' && refData.name"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:videoList="videoList"
|
||||
></algorithm-essential-information>
|
||||
<algorithm-advantage
|
||||
v-else-if="showView === '算法优势'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
></algorithm-advantage>
|
||||
<algorithm-scenarios
|
||||
v-else-if="showView === '应用场景'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
></algorithm-scenarios>
|
||||
<algorithm-deployment-use
|
||||
v-else-if="showView === '部署与使用'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:fileList="fileList"
|
||||
:imgList="imgList"
|
||||
></algorithm-deployment-use>
|
||||
</div>
|
||||
<div class="btn" :class="showView === '基本信息' ? 'first' : ''">
|
||||
<button v-show="showView !== '基本信息'" @click="back()">上一步</button>
|
||||
<button v-show="showView === '部署与使用'" @click="preview()">
|
||||
预览
|
||||
</button>
|
||||
<button v-show="showView !== '部署与使用'" @click="next()">下一步</button>
|
||||
<button v-show="showView === '部署与使用'" @click="submit()">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import AlgorithmEssentialInformation from '@/views/capacityOnTheShelf/components/AlgorithmEssentialInformation.vue'
|
||||
import AlgorithmAdvantage from '@/views/capacityOnTheShelf/components/AlgorithmAdvantage.vue'
|
||||
import AlgorithmScenarios from '@/views/capacityOnTheShelf/components/AlgorithmScenarios.vue'
|
||||
import AlgorithmDeploymentUse from '@/views/capacityOnTheShelf/components/AlgorithmDeploymentUse.vue'
|
||||
import { ref, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getCategoryTree } from '@/api/personalCenter'
|
||||
import { shangjiainsert, shangjiaapply } from '@/api/personalCenter'
|
||||
import { getUser, getUserInfo } from '@/api/home'
|
||||
import { message } from 'ant-design-vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const showView = ref('基本信息')
|
||||
const navList = ref([])
|
||||
const navList2 = ref([])
|
||||
const fileList = ref({})
|
||||
const imgList = ref({})
|
||||
const videoList = ref({})
|
||||
const data = ref({})
|
||||
const refData = ref({})
|
||||
const submitFlag = ref(true)
|
||||
const dataFrom = ref({ infoList: [], delFlag: 0, type: '组件服务' })
|
||||
const back = () => {
|
||||
navList.value.forEach((val, index) => {
|
||||
if (val.key === showView.value && index > 0) {
|
||||
showView.value = navList2.value[index - 1]
|
||||
refData.value = data.value.filter(
|
||||
(item) => item.name === showView.value
|
||||
)[0]
|
||||
console.log('表单数据=============>', dataFrom.value)
|
||||
}
|
||||
})
|
||||
}
|
||||
const next = () => {
|
||||
let i = -1
|
||||
navList.value.forEach((val, index) => {
|
||||
if (val.key === showView.value && index < navList.value.length - 1) {
|
||||
i = index + 1
|
||||
}
|
||||
})
|
||||
if (i !== -1) {
|
||||
showView.value = navList2.value[i]
|
||||
refData.value = data.value.filter(
|
||||
(item) => item.name === showView.value
|
||||
)[0]
|
||||
console.log('表单数据=============>', dataFrom.value, refData.value)
|
||||
}
|
||||
}
|
||||
// 预览
|
||||
const preview = () => {
|
||||
dataFrom.value.infoList = dataFrom.value.infoList.filter(
|
||||
(item) => item.attrValue !== ''
|
||||
)
|
||||
console.log('预览==============>', dataFrom.value)
|
||||
window.sessionStorage.setItem('preview', JSON.stringify(dataFrom.value))
|
||||
const newpage = router.resolve({
|
||||
path: '/details',
|
||||
})
|
||||
window.open(newpage.href, '_blank')
|
||||
}
|
||||
const submit = () => {
|
||||
console.log('提交数据=============>', dataFrom.value)
|
||||
if (submitFlag.value) {
|
||||
submitFlag.value = false
|
||||
dataFrom.value.infoList = dataFrom.value.infoList.filter(
|
||||
(item) => item.attrValue !== ''
|
||||
)
|
||||
shangjiainsert(dataFrom.value).then((res) => {
|
||||
const instanceId = res.data.data
|
||||
dataFrom.value.id = res.data.data
|
||||
getUser().then((res6) => {
|
||||
getUserInfo(res6.data.data.id).then((res2) => {
|
||||
const deptId = res2.data.data.deptId
|
||||
const userId = res2.data.data.id
|
||||
const userName = res2.data.data.realName
|
||||
const params = {
|
||||
instanceId: instanceId,
|
||||
deptId: deptId,
|
||||
userId: userId,
|
||||
userName: userName,
|
||||
resourceDTO: [dataFrom.value],
|
||||
}
|
||||
shangjiaapply(params).then((res3) => {
|
||||
console.log('res3', res3)
|
||||
if (res3.data.code == 0) {
|
||||
message.success('上架成功！')
|
||||
submitFlag.value = true
|
||||
window.setTimeout(() => {
|
||||
window.close()
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
const init = () => {
|
||||
getCategoryTree().then((res) => {
|
||||
// console.clear()
|
||||
res.data.data = res.data.data
|
||||
.filter((item) => item.name === '组件服务一')[0]
|
||||
.children.filter((item) => item.name === '智能算法')[0]
|
||||
navList.value = []
|
||||
navList2.value = []
|
||||
res.data.data.children.forEach((val) => {
|
||||
console.log(val)
|
||||
navList.value.push({
|
||||
name: val.name,
|
||||
key: val.name,
|
||||
})
|
||||
navList2.value.push(val.name)
|
||||
})
|
||||
data.value = res.data.data.children
|
||||
refData.value = data.value.filter(
|
||||
(item) => item.name === showView.value
|
||||
)[0]
|
||||
console.log('所有编目结构==============>', res.data.data)
|
||||
})
|
||||
}
|
||||
init()
|
||||
mybus.on('chageDataFrom', (obj) => {
|
||||
console.log(obj, dataFrom.value.infoList)
|
||||
dataFrom.value.infoList = dataFrom.value.infoList.filter(
|
||||
(item) => item.attrType !== obj.attrType
|
||||
)
|
||||
if (obj.attrValue == [] || obj.attrValue == '[]' || obj.attrValue == null) {
|
||||
obj.attrValue = ''
|
||||
}
|
||||
dataFrom.value.infoList.push(obj)
|
||||
})
|
||||
mybus.on('chageFileList', (obj) => {
|
||||
fileList.value = obj
|
||||
})
|
||||
mybus.on('chageImgList', (obj) => {
|
||||
imgList.value = obj
|
||||
})
|
||||
mybus.on('chageVideoList', (obj) => {
|
||||
videoList.value = obj
|
||||
})
|
||||
//datafrom外面数据
|
||||
mybus.on('chageDataFromDwon', (obj) => {
|
||||
switch (obj.attrType) {
|
||||
case '名称':
|
||||
dataFrom.value.name = obj.attrValue
|
||||
break
|
||||
case '描述':
|
||||
dataFrom.value.description = obj.attrValue
|
||||
break
|
||||
case '共享条件':
|
||||
dataFrom.value.shareCondition = obj.attrValue
|
||||
break
|
||||
case '共享类型':
|
||||
dataFrom.value.shareType = obj.attrValue
|
||||
break
|
||||
case '服务接口':
|
||||
dataFrom.value.apiUrl = obj.attrValue
|
||||
break
|
||||
case '接口请求方式':
|
||||
dataFrom.value.apiMethodType = obj.attrValue
|
||||
break
|
||||
}
|
||||
// console.log('dataFrom.value', dataFrom.value)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('chageDataFrom')
|
||||
mybus.off('chageFileList')
|
||||
mybus.off('chageImgList')
|
||||
mybus.off('chageDataFromDwon')
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
position: relative;
|
||||
top: 64px;
|
||||
margin: 15px 400px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
.header {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.vue-box {
|
||||
padding: 0 100px;
|
||||
}
|
||||
.top {
|
||||
margin: 10px 20px 0;
|
||||
padding: 15px 30px;
|
||||
background: #edf4fc;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
div {
|
||||
font-size: 18px;
|
||||
color: #999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.bg-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgb(214, 214, 214);
|
||||
margin-right: 10px;
|
||||
transition: all 0.3s ease;
|
||||
span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
margin-left: 10px;
|
||||
width: 130px;
|
||||
height: 1px;
|
||||
background: #999;
|
||||
}
|
||||
}
|
||||
.finish {
|
||||
color: #0087ff;
|
||||
.bg-box {
|
||||
background: #9ccefa;
|
||||
color: #fff;
|
||||
border: 1px solid #9ccefa;
|
||||
span {
|
||||
background: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
background: #0087ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 400px 0;
|
||||
button {
|
||||
cursor: pointer;
|
||||
width: 80px;
|
||||
height: 35px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: #0087ff;
|
||||
}
|
||||
button:nth-of-type(1) {
|
||||
color: #0087ff;
|
||||
background: #e1edfa;
|
||||
}
|
||||
button:nth-of-type(2) {
|
||||
background: #01c5dc;
|
||||
}
|
||||
}
|
||||
.first {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,330 +0,0 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-13 10:22:27
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-13 17:44:41
|
||||
* @Description: 应用上架
|
||||
-->
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="header">能力上架申请</div>
|
||||
<div class="top">
|
||||
<div
|
||||
v-for="(nav, index) in navList"
|
||||
:key="nav"
|
||||
:class="[index <= navList2.indexOf(showView) ? 'finish' : '']"
|
||||
>
|
||||
<span class="bg-box">
|
||||
<span>{{ index + 1 }}</span>
|
||||
</span>
|
||||
<span>{{ nav.name }}</span>
|
||||
<div class="line" v-if="index !== navList.length - 1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vue-box">
|
||||
<application-essential-information
|
||||
v-if="showView === '基本信息' && refData.name"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:videoList="videoList"
|
||||
:imgList="imgList"
|
||||
></application-essential-information>
|
||||
<application-function-introduction
|
||||
v-else-if="showView === '功能介绍'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
></application-function-introduction>
|
||||
<application-deployment-use
|
||||
v-else-if="showView === '部署与应用'"
|
||||
:refData="refData"
|
||||
:dataFrom="dataFrom"
|
||||
:fileList="fileList"
|
||||
:imgList="imgList"
|
||||
></application-deployment-use>
|
||||
</div>
|
||||
<div class="btn" :class="showView === '基本信息' ? 'first' : ''">
|
||||
<button v-show="showView !== '基本信息'" @click="back()">上一步</button>
|
||||
<button v-show="showView === '部署与应用'" @click="preview()">
|
||||
预览
|
||||
</button>
|
||||
<button v-show="showView !== '部署与应用'" @click="next()">下一步</button>
|
||||
<button v-show="showView === '部署与应用'" @click="submit()">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import ApplicationEssentialInformation from '@/views/capacityOnTheShelf/components/ApplicationEssentialInformation.vue'
|
||||
import ApplicationFunctionIntroduction from '@/views/capacityOnTheShelf/components/ApplicationFunctionIntroduction.vue'
|
||||
import ApplicationDeploymentUse from '@/views/capacityOnTheShelf/components/ApplicationDeploymentUse.vue'
|
||||
import { ref, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getCategoryTree } from '@/api/personalCenter'
|
||||
import { shangjiainsert, shangjiaapply } from '@/api/personalCenter'
|
||||
import { getUser, getUserInfo } from '@/api/home'
|
||||
import { message } from 'ant-design-vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const showView = ref('基本信息')
|
||||
const router = useRouter()
|
||||
const navList = ref([])
|
||||
const navList2 = ref([])
|
||||
const fileList = ref({})
|
||||
const imgList = ref({})
|
||||
const videoList = ref({})
|
||||
const data = ref({})
|
||||
const refData = ref({})
|
||||
const submitFlag = ref(true)
|
||||
const dataFrom = ref({ infoList: [], delFlag: 0, type: '应用资源' })
|
||||
const back = () => {
|
||||
navList.value.forEach((val, index) => {
|
||||
if (val.key === showView.value && index > 0) {
|
||||
showView.value = navList2.value[index - 1]
|
||||
refData.value = data.value.filter(
|
||||
(item) => item.name === showView.value
|
||||
)[0]
|
||||
console.log('表单数据=============>', dataFrom.value)
|
||||
}
|
||||
})
|
||||
}
|
||||
const next = () => {
|
||||
let i = -1
|
||||
navList.value.forEach((val, index) => {
|
||||
if (val.key === showView.value && index < navList.value.length - 1) {
|
||||
i = index + 1
|
||||
}
|
||||
})
|
||||
if (i !== -1) {
|
||||
showView.value = navList2.value[i]
|
||||
refData.value = data.value.filter(
|
||||
(item) => item.name === showView.value
|
||||
)[0]
|
||||
console.log('表单数据=============>', dataFrom.value, refData.value)
|
||||
}
|
||||
}
|
||||
const submit = () => {
|
||||
console.log('提交数据=============>', dataFrom.value)
|
||||
if (submitFlag.value) {
|
||||
submitFlag.value = false
|
||||
dataFrom.value.infoList = dataFrom.value.infoList.filter(
|
||||
(item) => item.attrValue !== ''
|
||||
)
|
||||
shangjiainsert(dataFrom.value).then((res) => {
|
||||
const instanceId = res.data.data
|
||||
dataFrom.value.id = res.data.data
|
||||
getUser().then((res6) => {
|
||||
getUserInfo(res6.data.data.id).then((res2) => {
|
||||
const deptId = res2.data.data.deptId
|
||||
const userId = res2.data.data.id
|
||||
const userName = res2.data.data.realName
|
||||
const params = {
|
||||
instanceId: instanceId,
|
||||
deptId: deptId,
|
||||
userId: userId,
|
||||
userName: userName,
|
||||
resourceDTO: [dataFrom.value],
|
||||
}
|
||||
shangjiaapply(params).then((res3) => {
|
||||
console.log('res3', res3)
|
||||
if (res3.data.code == 0) {
|
||||
message.success('上架成功！')
|
||||
submitFlag.value = true
|
||||
window.setTimeout(() => {
|
||||
window.close()
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
// 预览
|
||||
const preview = () => {
|
||||
dataFrom.value.infoList = dataFrom.value.infoList.filter(
|
||||
(item) => item.attrValue !== ''
|
||||
)
|
||||
console.log('预览==============>', dataFrom.value)
|
||||
window.sessionStorage.setItem('preview', JSON.stringify(dataFrom.value))
|
||||
const newpage = router.resolve({
|
||||
path: '/details',
|
||||
})
|
||||
window.open(newpage.href, '_blank')
|
||||
}
|
||||
const init = () => {
|
||||
getCategoryTree().then((res) => {
|
||||
// console.clear()
|
||||
res.data.data = res.data.data.filter(
|
||||
(item) => item.name === '应用资源一'
|
||||
)[0]
|
||||
navList.value = []
|
||||
navList2.value = []
|
||||
res.data.data.children.forEach((val) => {
|
||||
console.log(val)
|
||||
navList.value.push({
|
||||
name: val.name,
|
||||
key: val.name,
|
||||
})
|
||||
navList2.value.push(val.name)
|
||||
})
|
||||
data.value = res.data.data.children
|
||||
refData.value = data.value.filter(
|
||||
(item) => item.name === showView.value
|
||||
)[0]
|
||||
console.log('所有编目结构==============>', res.data.data)
|
||||
})
|
||||
}
|
||||
init()
|
||||
mybus.on('chageDataFrom', (obj) => {
|
||||
console.log(obj, dataFrom.value.infoList)
|
||||
dataFrom.value.infoList = dataFrom.value.infoList.filter(
|
||||
(item) => item.attrType !== obj.attrType
|
||||
)
|
||||
if (obj.attrValue == [] || obj.attrValue == '[]' || obj.attrValue == null) {
|
||||
obj.attrValue = ''
|
||||
}
|
||||
dataFrom.value.infoList.push(obj)
|
||||
})
|
||||
mybus.on('chageFileList', (obj) => {
|
||||
fileList.value = obj
|
||||
})
|
||||
mybus.on('chageImgList', (obj) => {
|
||||
imgList.value = obj
|
||||
})
|
||||
mybus.on('chageVideoList', (obj) => {
|
||||
videoList.value = obj
|
||||
})
|
||||
//datafrom外面数据
|
||||
mybus.on('chageDataFromDwon', (obj) => {
|
||||
switch (obj.attrType) {
|
||||
case '名称':
|
||||
dataFrom.value.name = obj.attrValue
|
||||
break
|
||||
case '描述':
|
||||
dataFrom.value.description = obj.attrValue
|
||||
break
|
||||
case '共享条件':
|
||||
dataFrom.value.shareCondition = obj.attrValue
|
||||
break
|
||||
case '共享类型':
|
||||
dataFrom.value.shareType = obj.attrValue
|
||||
break
|
||||
case '服务接口':
|
||||
dataFrom.value.apiUrl = obj.attrValue
|
||||
break
|
||||
case '接口请求方式':
|
||||
dataFrom.value.apiMethodType = obj.attrValue
|
||||
break
|
||||
case '访问地址':
|
||||
dataFrom.value.link = obj.attrValue
|
||||
break
|
||||
case '部门联系人':
|
||||
dataFrom.value.deptContacts = obj.attrValue
|
||||
break
|
||||
case '部门联系人电话':
|
||||
dataFrom.value.deptPhone = obj.attrValue
|
||||
break
|
||||
}
|
||||
// console.log('dataFrom.value', dataFrom.value)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('chageDataFrom')
|
||||
mybus.off('chageFileList')
|
||||
mybus.off('chageImgList')
|
||||
mybus.off('chageDataFromDwon')
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
position: relative;
|
||||
top: 64px;
|
||||
margin: 15px 400px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
.header {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.vue-box {
|
||||
padding: 0 100px;
|
||||
}
|
||||
.top {
|
||||
margin: 10px 20px 0;
|
||||
padding: 15px 30px;
|
||||
background: #edf4fc;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
div {
|
||||
font-size: 18px;
|
||||
color: #999;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.bg-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgb(214, 214, 214);
|
||||
margin-right: 10px;
|
||||
transition: all 0.3s ease;
|
||||
span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
margin-left: 10px;
|
||||
width: 280px;
|
||||
height: 1px;
|
||||
background: #999;
|
||||
}
|
||||
}
|
||||
.finish {
|
||||
color: #0087ff;
|
||||
.bg-box {
|
||||
background: #9ccefa;
|
||||
color: #fff;
|
||||
border: 1px solid #9ccefa;
|
||||
span {
|
||||
background: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
background: #0087ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 400px 0;
|
||||
button {
|
||||
cursor: pointer;
|
||||
width: 80px;
|
||||
height: 35px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: #0087ff;
|
||||
}
|
||||
button:nth-of-type(1) {
|
||||
color: #0087ff;
|
||||
background: #e1edfa;
|
||||
}
|
||||
button:nth-of-type(2) {
|
||||
background: #01c5dc;
|
||||
}
|
||||
}
|
||||
.first {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
<template>
|
||||
<div class="advantage">
|
||||
<div class="title">
|
||||
<div></div>
|
||||
<div>{{ props.refData.name }}</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="items" v-show="data.length > 0">
|
||||
<div class="item" v-for="(val, index) in data" :key="index">
|
||||
<p>
|
||||
<span>算法优势-{{ index + 1 }}</span>
|
||||
<span></span>
|
||||
</p>
|
||||
<p>
|
||||
<span>算法优势名称</span>
|
||||
<span>{{ val.name }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>算法优势描述</span>
|
||||
<span>{{ val.desc }}</span>
|
||||
</p>
|
||||
<div class="del">
|
||||
<i class="delImg" @click="del(index)"></i>
|
||||
<div @click="del(index)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add">添加更多算法优势</div>
|
||||
<div class="name">
|
||||
<span>算法优势名称</span>
|
||||
<a-input
|
||||
v-model:value="value"
|
||||
:maxlength="24"
|
||||
placeholder="请填写算法优势名称_算法优势热词,不超过24个字符"
|
||||
/>
|
||||
</div>
|
||||
<div class="dec">
|
||||
<span>算法优势描述</span>
|
||||
<a-textarea
|
||||
v-model:value="value2"
|
||||
:showCount="true"
|
||||
:maxlength="200"
|
||||
placeholder="请填写算法优势名称+算法优势场景+算法优势亮点+算法优势作用"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div class="dec">
|
||||
<span>算法优势图标</span>
|
||||
<div>
|
||||
<a-image :src=""></a-image>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="submit">
|
||||
<a-button type="primary" @click="add()">提交</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps } from 'vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { message } from 'ant-design-vue'
|
||||
const props = defineProps({
|
||||
refData: { type: Object, default: null },
|
||||
dataFrom: { type: Array, default: null },
|
||||
})
|
||||
const value = ref('')
|
||||
const value2 = ref('')
|
||||
const data = ref([])
|
||||
if (props.dataFrom) {
|
||||
console.log(props.dataFrom)
|
||||
props.dataFrom.infoList.forEach((item) => {
|
||||
if (item.attrType === props.refData.name) {
|
||||
data.value = JSON.parse(item.attrValue)
|
||||
}
|
||||
})
|
||||
}
|
||||
const add = () => {
|
||||
if (value.value.length > 0 && value2.value.length > 0) {
|
||||
data.value.push({
|
||||
name: value.value,
|
||||
desc: value2.value,
|
||||
})
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: props.refData.name,
|
||||
attrValue: JSON.stringify(data.value),
|
||||
delFlag: 0,
|
||||
})
|
||||
value.value = ''
|
||||
value2.value = ''
|
||||
} else {
|
||||
message.warning('请填写完整')
|
||||
}
|
||||
}
|
||||
const del = (index) => {
|
||||
data.value.splice(index, 1)
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: props.refData.name,
|
||||
attrValue: JSON.stringify(data.value),
|
||||
delFlag: 0,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.advantage {
|
||||
height: 680px;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 50px 100px 25px;
|
||||
& > div {
|
||||
width: 100%;
|
||||
}
|
||||
.title {
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
div:first-child,
|
||||
div:last-child {
|
||||
width: 265px;
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
.main {
|
||||
margin-top: 25px;
|
||||
.items {
|
||||
background: #fafafa;
|
||||
padding: 10px;
|
||||
p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span:nth-of-type(1) {
|
||||
width: 150px;
|
||||
}
|
||||
span:nth-of-type(2) {
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
p:nth-of-type(1) > span:nth-of-type(1) {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.del {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.delImg {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background: url(~@/assets/home/sf_del.png) no-repeat;
|
||||
margin-right: 5px;
|
||||
}
|
||||
div {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.add {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: #007efb;
|
||||
}
|
||||
.name,
|
||||
.dec {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
span {
|
||||
width: 120px;
|
||||
}
|
||||
:deep(.ant-input) {
|
||||
resize: none;
|
||||
width: 570px;
|
||||
}
|
||||
:deep(.ant-input-textarea) {
|
||||
width: 570px;
|
||||
}
|
||||
:deep(.ant-radio-group) {
|
||||
width: 570px;
|
||||
}
|
||||
:deep(.ant-input-number) {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
.submit {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.ant-btn {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
text-align: center;
|
||||
background: #d9ebff;
|
||||
color: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .advantage::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// }
|
||||
</style>
|
||||
|
|
@ -1,486 +0,0 @@
|
|||
<template>
|
||||
<div class="deployment-use">
|
||||
<div class="first" v-for="title in props.refData.children" :key="title.id">
|
||||
<div class="top">
|
||||
<div></div>
|
||||
<div>{{ title.name }}</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<template v-if="title.name == '使用方式'">
|
||||
<div class="bottom">
|
||||
<div class="form" v-for="item in title.children" :key="item.id">
|
||||
<span>{{ item.name }}</span>
|
||||
<a-input
|
||||
v-if="item.type == 'input'"
|
||||
v-model:value="item.note1"
|
||||
:placeholder="'请输入' + item.name"
|
||||
/>
|
||||
<a-radio-group
|
||||
v-else-if="item.type == 'radio'"
|
||||
v-model:value="item.note1"
|
||||
:options="
|
||||
item.name === '接口请求方式' ? plainOptions2 : plainOptions3
|
||||
"
|
||||
/>
|
||||
<a-textarea
|
||||
v-else-if="item.type == 'textArea'"
|
||||
v-model:value="item.note1"
|
||||
:showCount="true"
|
||||
:maxlength="200"
|
||||
placeholder="请输入试用描述"
|
||||
/>
|
||||
<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'"
|
||||
type="文件"
|
||||
btnName="上传附件"
|
||||
:maxCount="1"
|
||||
:data="item"
|
||||
:list="props.fileList"
|
||||
tip="支持文件类型，大小不超过100M"
|
||||
></upload>
|
||||
</div>
|
||||
<!-- <div class="form">
|
||||
<span>接口请求方式</span>
|
||||
<a-radio-group
|
||||
v-model:value="data.interfaceRequestMode"
|
||||
:options="plainOptions2"
|
||||
/>
|
||||
</div>
|
||||
<div class="form">
|
||||
<span>是否支持试用</span>
|
||||
<a-radio-group
|
||||
v-model:value="data.supportTrial"
|
||||
:options="plainOptions3"
|
||||
/>
|
||||
</div>
|
||||
<div class="form">
|
||||
<span>试用地址</span>
|
||||
<a-input
|
||||
v-model:value="data.trialAddress"
|
||||
placeholder="请输入试用地址"
|
||||
/>
|
||||
</div>
|
||||
<div class="form">
|
||||
<span>试用描述</span>
|
||||
<a-textarea
|
||||
v-model:value="data.trialDescription"
|
||||
:showCount="true"
|
||||
:maxlength="200"
|
||||
placeholder="请输入试用描述"
|
||||
/>
|
||||
</div> -->
|
||||
<!-- <div class="form">
|
||||
<span>技术文档</span>
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
:action="`${baseURL}/upload`"
|
||||
list-type="picture"
|
||||
class="upload-list-inline"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<a-button>
|
||||
<upload-outlined></upload-outlined>
|
||||
上传文档
|
||||
</a-button>
|
||||
<span
|
||||
style="
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
"
|
||||
>
|
||||
支持MP3 类型文件，大小不超过100M
|
||||
</span>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="form">
|
||||
<span>试用效果图</span>
|
||||
<a-upload
|
||||
v-model:file-list="fileList2"
|
||||
:action="`${baseURL}/upload`"
|
||||
list-type="picture"
|
||||
class="upload-list-inline"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<a-button>
|
||||
<upload-outlined></upload-outlined>
|
||||
图片上传
|
||||
</a-button>
|
||||
<span
|
||||
style="
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
"
|
||||
>
|
||||
支持MP3 类型文件，大小不超过100M
|
||||
</span>
|
||||
</a-upload>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="title.name == '计费标准信息'">
|
||||
<div class="bottom">
|
||||
<div class="items" v-show="data.freightBasis.length > 0">
|
||||
<div
|
||||
class="item"
|
||||
v-for="(val, index) in data.freightBasis"
|
||||
:key="'计费标准信息' + index"
|
||||
>
|
||||
<p>
|
||||
<span>计费标准信息-{{ index + 1 }}</span>
|
||||
<span></span>
|
||||
</p>
|
||||
<p>
|
||||
<span>计费方式</span>
|
||||
<span>{{ val.type }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>计费标准</span>
|
||||
<span>{{ val.price + '元' }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>计费标准描述</span>
|
||||
<span>{{ val.desc }}</span>
|
||||
</p>
|
||||
<div class="del">
|
||||
<i class="delImg" @click="del(index)"></i>
|
||||
<div @click="del(index)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add">添加更多计费标准信息</div>
|
||||
<div class="form">
|
||||
<span>计费方式</span>
|
||||
<a-radio-group v-model:value="type" :options="plainOptions" />
|
||||
</div>
|
||||
<div class="form">
|
||||
<span>计费标准</span>
|
||||
<a-input-number
|
||||
v-model:value="price"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
:formatter="limitNumber"
|
||||
:parser="limitNumber"
|
||||
placeholder="请填写计费标准，单位为元"
|
||||
/>
|
||||
</div>
|
||||
<div class="form">
|
||||
<span>计费标准描述</span>
|
||||
<a-textarea
|
||||
v-model:value="desc"
|
||||
:showCount="true"
|
||||
:maxlength="200"
|
||||
placeholder="请填写计费标准描述"
|
||||
/>
|
||||
</div>
|
||||
<div class="submit">
|
||||
<a-button type="primary" @click="add()">提交</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="title.name == '常见问题'">
|
||||
<div class="bottom">
|
||||
<div class="items" v-show="data.commonProblem.length > 0">
|
||||
<div
|
||||
class="item"
|
||||
v-for="(val, index) in data.commonProblem"
|
||||
:key="'常见问题' + index"
|
||||
>
|
||||
<p>
|
||||
<span>常见问题-{{ index + 1 }}</span>
|
||||
<span></span>
|
||||
</p>
|
||||
<p>
|
||||
<span>问题</span>
|
||||
<span>{{ val.question }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>答复</span>
|
||||
<span>{{ val.answer }}</span>
|
||||
</p>
|
||||
<div class="del">
|
||||
<i class="delImg" @click="del2(index)"></i>
|
||||
<div @click="del2(index)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add">添加更多常见问题</div>
|
||||
<div class="form">
|
||||
<span>问题</span>
|
||||
<a-textarea
|
||||
v-model:value="question"
|
||||
:showCount="true"
|
||||
:maxlength="200"
|
||||
placeholder="请输入问题"
|
||||
/>
|
||||
</div>
|
||||
<div class="form">
|
||||
<span>答复</span>
|
||||
<a-textarea
|
||||
v-model:value="answer"
|
||||
:showCount="true"
|
||||
:maxlength="200"
|
||||
placeholder="请输入答复"
|
||||
/>
|
||||
</div>
|
||||
<div class="submit">
|
||||
<a-button type="primary" @click="add2()">提交</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import upload from '@/views/components/upload'
|
||||
import { message } from 'ant-design-vue'
|
||||
// import { baseURL } from '@/config'
|
||||
const props = defineProps({
|
||||
refData: { type: Object, default: null },
|
||||
dataFrom: { type: Array, default: null },
|
||||
fileList: { type: Array, default: null },
|
||||
imgList: { type: Array, default: null },
|
||||
})
|
||||
const data = ref({
|
||||
list: props.refData.children.filter((item) => item.name === '使用方式')[0]
|
||||
.children,
|
||||
freightBasis: [],
|
||||
commonProblem: [],
|
||||
})
|
||||
if (props.dataFrom) {
|
||||
console.log(props.dataFrom, data.value.list)
|
||||
props.dataFrom.infoList.forEach((item) => {
|
||||
if (item.attrType === '计费标准信息') {
|
||||
data.value.freightBasis = JSON.parse(item.attrValue)
|
||||
} else if (item.attrType === '常见问题') {
|
||||
data.value.commonProblem = JSON.parse(item.attrValue)
|
||||
}
|
||||
})
|
||||
}
|
||||
const type = ref('')
|
||||
const price = ref('')
|
||||
const desc = ref('')
|
||||
const question = ref('')
|
||||
const answer = ref('')
|
||||
const plainOptions = ['一次性买断', '按调用次数', '按并发路数', '按年计费']
|
||||
const plainOptions2 = ['GET', 'POST']
|
||||
const plainOptions3 = ['是', '否']
|
||||
const limitNumber = (value) => {
|
||||
if (typeof value === 'string') {
|
||||
return !isNaN(Number(value)) ? value.replace(/\./g, '') : 0
|
||||
} else if (typeof value === 'number') {
|
||||
return !isNaN(value) ? String(value).replace(/\./g, '') : 0
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
const add = () => {
|
||||
if (type.value.length > 0 && price.value > 0 && desc.value.length > 0) {
|
||||
data.value.freightBasis.push({
|
||||
type: type.value,
|
||||
price: price.value,
|
||||
desc: desc.value,
|
||||
})
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: '计费标准信息',
|
||||
attrValue: JSON.stringify(data.value.freightBasis),
|
||||
delFlag: 0,
|
||||
})
|
||||
type.value = ''
|
||||
price.value = ''
|
||||
desc.value = ''
|
||||
} else {
|
||||
message.warning('请填写完整')
|
||||
}
|
||||
}
|
||||
const add2 = () => {
|
||||
if (question.value.length > 0 && answer.value.length > 0) {
|
||||
data.value.commonProblem.push({
|
||||
question: question.value,
|
||||
answer: answer.value,
|
||||
})
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: '常见问题',
|
||||
attrValue: JSON.stringify(data.value.commonProblem),
|
||||
delFlag: 0,
|
||||
})
|
||||
question.value = ''
|
||||
answer.value = ''
|
||||
} else {
|
||||
message.warning('请填写完整')
|
||||
}
|
||||
}
|
||||
const del = (index) => {
|
||||
data.value.freightBasis.splice(index, 1)
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: '计费标准信息',
|
||||
attrValue: JSON.stringify(data.value.freightBasis),
|
||||
delFlag: 0,
|
||||
})
|
||||
}
|
||||
const del2 = (index) => {
|
||||
data.value.commonProblem.splice(index, 1)
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: '常见问题',
|
||||
attrValue: JSON.stringify(data.value.commonProblem),
|
||||
delFlag: 0,
|
||||
})
|
||||
}
|
||||
watch(data.value.list, (newProps, oldProps) => {
|
||||
console.log(newProps, oldProps)
|
||||
newProps.forEach((val) => {
|
||||
// console.log('数据发生改变==========>', val)
|
||||
if (val.name === '服务接口' || val.name === '接口请求方式') {
|
||||
mybus.emit('chageDataFromDwon', {
|
||||
attrType: val.name,
|
||||
attrValue: val.note1,
|
||||
delFlag: 0,
|
||||
})
|
||||
} else {
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: val.name,
|
||||
attrValue: val.note1,
|
||||
delFlag: 0,
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.deployment-use {
|
||||
height: 680px;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 50px 100px 25px;
|
||||
& > div {
|
||||
width: 100%;
|
||||
margin-top: 60px;
|
||||
.top {
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
div:first-child,
|
||||
div:last-child {
|
||||
width: 245px;
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
margin-top: 25px;
|
||||
.items {
|
||||
background: #fafafa;
|
||||
padding: 10px;
|
||||
p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span:nth-of-type(1) {
|
||||
width: 200px;
|
||||
}
|
||||
span:nth-of-type(2) {
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
p:nth-of-type(1) > span:nth-of-type(1) {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.del {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.delImg {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background: url(~@/assets/home/sf_del.png) no-repeat;
|
||||
margin-right: 5px;
|
||||
}
|
||||
div {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.add {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: #007efb;
|
||||
}
|
||||
.form {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
span:first-child {
|
||||
width: 120px;
|
||||
}
|
||||
:deep(.ant-input-textarea) {
|
||||
width: 570px;
|
||||
}
|
||||
:deep(.ant-radio-group) {
|
||||
width: 570px;
|
||||
}
|
||||
:deep(.ant-input-number) {
|
||||
width: 200px;
|
||||
}
|
||||
:deep(.ant-input) {
|
||||
resize: none;
|
||||
width: 570px;
|
||||
}
|
||||
.ant-btn {
|
||||
width: 100px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
background: #d9ebff;
|
||||
color: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
.submit {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.ant-btn {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
text-align: center;
|
||||
background: #d9ebff;
|
||||
color: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& > div:nth-of-type(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
// .deployment-use::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// }
|
||||
</style>
|
||||
|
|
@ -1,444 +0,0 @@
|
|||
<template>
|
||||
<div class="essential-information">
|
||||
<div class="title">
|
||||
<div></div>
|
||||
<div>基本信息</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="ceshi-class">
|
||||
<div
|
||||
v-for="(item, index) in dataList"
|
||||
:key="item.attrType"
|
||||
:style="styleFunction(item.type)"
|
||||
>
|
||||
<a-form-item :label="item.attrType" v-if="item.type == 'input'">
|
||||
<a-input
|
||||
v-model:value="dataList[index].attrValue"
|
||||
:placeholder="`请输入${item.attrType}，不超过24个字符`"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="item.attrType"
|
||||
v-if="item.type == 'select' && item.attrType == '服务商'"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList[index].attrValue"
|
||||
:placeholder="`请输入${item.attrType}，不超过24个字符`"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="item.attrType"
|
||||
v-if="item.type == 'select' && item.attrType == '服务商联系人'"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList[index].attrValue"
|
||||
:placeholder="`请输入${item.attrType}，不超过24个字符`"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="item.attrType"
|
||||
v-if="
|
||||
item.type == 'select' &&
|
||||
item.attrType != '服务商' &&
|
||||
item.attrType != '服务商联系人'
|
||||
"
|
||||
>
|
||||
<a-select
|
||||
style="width: 240px"
|
||||
v-model:value="dataList[index].attrValue"
|
||||
placeholder="请选择功能类型"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(itemSelect, indexSelect) in item.children"
|
||||
:key="indexSelect"
|
||||
:value="itemSelect.dictLabel"
|
||||
>
|
||||
{{ itemSelect.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="item.attrType" v-if="item.type == 'radio'">
|
||||
<a-radio-group v-model:value="dataList[index].attrValue">
|
||||
<a-radio :value="'是'">是</a-radio>
|
||||
<a-radio :value="'否'">否</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="item.attrType"
|
||||
v-if="item.type == 'checkBox' && item.attrType != '关联应用'"
|
||||
:key="showKey"
|
||||
>
|
||||
<div class="application-Area" id="application-Area">
|
||||
<div
|
||||
v-for="(itemson, indexson) in item.children"
|
||||
:key="indexson"
|
||||
class="application-Area-son"
|
||||
@click="ApplicationArea(itemson, index)"
|
||||
:class="
|
||||
applicationDataList.indexOf(itemson.dictLabel) != -1
|
||||
? 'application-Area-down'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ itemson.dictLabel }}
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item :label="item.attrType" v-if="item.type == 'textArea'">
|
||||
<a-textarea
|
||||
style="
|
||||
width: 680px;
|
||||
height: 100px;
|
||||
max-height: 100px;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
v-model:value="dataList[index].attrValue"
|
||||
:placeholder="`请填写${item.attrType}`"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="item.attrType" v-if="item.type == 'video'">
|
||||
<upload
|
||||
type="视频"
|
||||
btnName="上传视频"
|
||||
:maxCount="1"
|
||||
:data="item"
|
||||
:list="props.videoList"
|
||||
tip="支持视频类型，大小不超过100M"
|
||||
></upload>
|
||||
</a-form-item>
|
||||
<div
|
||||
class="associated-application"
|
||||
v-if="item.type == 'checkBox' && item.attrType == '关联应用'"
|
||||
>
|
||||
<p>
|
||||
<span>关联应用</span>
|
||||
<span>(可多选)</span>
|
||||
：
|
||||
</p>
|
||||
<a-checkbox-group
|
||||
v-model:value="dataList[index].attrValue"
|
||||
name="checkboxgroup"
|
||||
:options="plainOptions"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { getCategoryTreePage } from '@/api/personalCenter'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
import upload from '@/views/components/upload'
|
||||
let dataList = ref([])
|
||||
let applicationDataList = ref([])
|
||||
let indexSwitch = ref()
|
||||
//样式修改
|
||||
function styleFunction(type) {
|
||||
if (type == 'select' || type == 'radio') {
|
||||
return 'display: inline-block;width: 50%;'
|
||||
}
|
||||
}
|
||||
const props = defineProps({
|
||||
refData: { type: Object, default: null },
|
||||
videoList: { type: Array, default: null },
|
||||
dataFrom: { type: Object, default: null },
|
||||
})
|
||||
//初始化字段
|
||||
let showKey = ref(0)
|
||||
console.log('props.refData', props.refData)
|
||||
props.refData.children[0].children.map((item) => {
|
||||
let object = ref({
|
||||
attrType: item.name,
|
||||
attrValue: '',
|
||||
type: item.type,
|
||||
children: [],
|
||||
isLinkToDic: item.isLinkToDic,
|
||||
linkValue: item.linkValue,
|
||||
note1: item.note1,
|
||||
})
|
||||
dataList.value.push(object.value)
|
||||
if (props.dataFrom.name) {
|
||||
props.dataFrom.infoList.map((item) => {
|
||||
dataList.value.map((itemson, index) => {
|
||||
if (
|
||||
item.attrType == itemson.attrType &&
|
||||
itemson.attrType != '应用领域' &&
|
||||
itemson.attrType != '关联应用' &&
|
||||
itemson.attrType != '算法介绍视频'
|
||||
) {
|
||||
dataList.value[index].attrValue = item.attrValue
|
||||
}
|
||||
if (itemson.attrType == '算法介绍视频') {
|
||||
dataList.value[index].attrValue = item.note1
|
||||
}
|
||||
if (
|
||||
item.attrType == itemson.attrType &&
|
||||
itemson.attrType == '关联应用'
|
||||
) {
|
||||
dataList.value[index].attrValue = item.attrValue.split(';')
|
||||
}
|
||||
if (
|
||||
item.attrType == itemson.attrType &&
|
||||
itemson.attrType == '应用领域'
|
||||
) {
|
||||
dataList.value[index].attrValue = item.attrValue.split(';')
|
||||
console.log('1111111111111', dataList.value[index].attrValue)
|
||||
applicationDataList.value = item.attrValue.split(';')
|
||||
}
|
||||
})
|
||||
})
|
||||
dataList.value.map((item, index) => {
|
||||
if (item.attrType.indexOf('名称') != -1) {
|
||||
dataList.value[index].attrValue = props.dataFrom.name
|
||||
}
|
||||
if (item.attrType.indexOf('描述') != -1) {
|
||||
dataList.value[index].attrValue = props.dataFrom.description
|
||||
}
|
||||
if (item.attrType.indexOf('共享条件') != -1) {
|
||||
dataList.value[index].attrValue = props.dataFrom.shareCondition
|
||||
}
|
||||
if (item.attrType.indexOf('共享类型') != -1) {
|
||||
dataList.value[index].attrValue = props.dataFrom.shareType
|
||||
}
|
||||
})
|
||||
|
||||
showKey.value++
|
||||
console.log('dataList', dataList.value)
|
||||
}
|
||||
//筛选出下拉列表
|
||||
})
|
||||
dataList.value.map((item2, index) => {
|
||||
if (item2.isLinkToDic == 'true') {
|
||||
const params = {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
dictTypeId: item2.linkValue,
|
||||
deFlage: 0,
|
||||
}
|
||||
getCategoryTreePage(params).then((res) => {
|
||||
dataList.value[index].children = res.data.data.list
|
||||
})
|
||||
}
|
||||
})
|
||||
console.log('props', dataList.value)
|
||||
const plainOptions = ['关联应用1', '关联应用2', '关联应用3']
|
||||
//视频上传限制格式
|
||||
//应用领域点击时间
|
||||
function ApplicationArea(item, indexfather) {
|
||||
console.log()
|
||||
indexSwitch.value = applicationDataList.value.indexOf(item.dictLabel)
|
||||
if (indexSwitch.value != -1) {
|
||||
applicationDataList.value.splice(indexSwitch.value, 1)
|
||||
dataList.value[indexfather].attrValue = applicationDataList.value
|
||||
} else {
|
||||
applicationDataList.value.push(item.dictLabel)
|
||||
dataList.value[indexfather].attrValue = applicationDataList.value
|
||||
console.log('applicationDataList.value2', applicationDataList.value)
|
||||
}
|
||||
}
|
||||
watch(
|
||||
dataList,
|
||||
() => {
|
||||
dataList.value.map((item, index) => {
|
||||
if (
|
||||
(item.attrValue || item.note1) &&
|
||||
item.attrType.indexOf('名称') == -1 &&
|
||||
item.attrType.indexOf('描述') == -1 &&
|
||||
item.attrType.indexOf('共享条件') == -1 &&
|
||||
item.attrType.indexOf('共享类型') == -1
|
||||
) {
|
||||
if (item.attrType == '应用领域' || item.attrType == '关联应用') {
|
||||
let datain = ref({
|
||||
attrType: item.attrType,
|
||||
attrValue: item.attrValue.join(';'),
|
||||
delFlag: 0,
|
||||
})
|
||||
mybus.emit('chageDataFrom', datain.value)
|
||||
} else if (item.attrType == '算法介绍视频') {
|
||||
dataList.value[index].attrValue = item.note1
|
||||
let datain = ref({
|
||||
attrType: item.attrType,
|
||||
attrValue: item.note1,
|
||||
delFlag: 0,
|
||||
})
|
||||
mybus.emit('chageDataFrom', datain.value)
|
||||
} else {
|
||||
let datain = ref({
|
||||
attrType: item.attrType,
|
||||
attrValue: item.attrValue,
|
||||
delFlag: 0,
|
||||
})
|
||||
mybus.emit('chageDataFrom', datain.value)
|
||||
}
|
||||
}
|
||||
if (item.attrValue && item.attrType.indexOf('名称') != -1) {
|
||||
let datain = ref({
|
||||
attrType: '名称',
|
||||
attrValue: item.attrValue,
|
||||
})
|
||||
mybus.emit('chageDataFromDwon', datain.value)
|
||||
}
|
||||
if (item.attrValue && item.attrType.indexOf('描述') != -1) {
|
||||
let datain = ref({
|
||||
attrType: '描述',
|
||||
attrValue: item.attrValue,
|
||||
})
|
||||
mybus.emit('chageDataFromDwon', datain.value)
|
||||
}
|
||||
if (item.attrValue && item.attrType.indexOf('共享条件') != -1) {
|
||||
let datain = ref({
|
||||
attrType: '共享条件',
|
||||
attrValue: item.attrValue,
|
||||
})
|
||||
mybus.emit('chageDataFromDwon', datain.value)
|
||||
}
|
||||
if (item.attrValue && item.attrType.indexOf('共享类型') != -1) {
|
||||
let datain = ref({
|
||||
attrType: '共享类型',
|
||||
attrValue: item.attrValue,
|
||||
})
|
||||
mybus.emit('chageDataFromDwon', datain.value)
|
||||
}
|
||||
})
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.essential-information {
|
||||
:deep(textarea) {
|
||||
resize: none;
|
||||
}
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 50px;
|
||||
.title {
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
div:first-child,
|
||||
div:last-child {
|
||||
width: 320px;
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
:deep(.ant-radio-wrapper) {
|
||||
width: 100px;
|
||||
}
|
||||
.ceshi-class {
|
||||
// display: flex;
|
||||
}
|
||||
.overall-arrangement {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
:deep(.ant-radio-wrapper) {
|
||||
width: unset;
|
||||
margin-right: 40px;
|
||||
}
|
||||
:deep(.ant-form-item-control-input) {
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
.application-Area {
|
||||
display: grid;
|
||||
margin-top: -5px;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
.application-Area-son {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
width: 90px;
|
||||
height: 26px;
|
||||
border-radius: 13px;
|
||||
color: #333333;
|
||||
background: #f5f5f5;
|
||||
border: 1px #cccccc solid;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.application-Area-down {
|
||||
background: #0087ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.upload-list-inline {
|
||||
button {
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
border: 1px solid #bbd3ef;
|
||||
border-radius: 6px;
|
||||
background: #edf4fc;
|
||||
color: #0087ff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.associated-application {
|
||||
p {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
span:last-child {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(label) {
|
||||
width: 140px;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
// :deep(.ant-form-item-label) {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// }
|
||||
:deep(input) {
|
||||
height: 44px;
|
||||
border: 1px #d9d9d9 solid;
|
||||
border-radius: 6px;
|
||||
color: #333333;
|
||||
}
|
||||
.ant-form-item {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
:deep(.ant-select-selector) {
|
||||
height: 44px;
|
||||
border: 1px #d9d9d9 solid;
|
||||
border-radius: 6px;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
:deep(input::-webkit-input-placeholder) {
|
||||
font-size: 16px;
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .essential-information::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// }
|
||||
</style>
|
||||
|
|
@ -1,254 +0,0 @@
|
|||
<template>
|
||||
<div class="scenarios">
|
||||
<div class="title">
|
||||
<div></div>
|
||||
<div>{{ props.refData.name }}</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="items" v-show="data.length > 0">
|
||||
<div class="item" v-for="(val, index) in data" :key="index">
|
||||
<p>
|
||||
<span>应用场景-{{ index + 1 }}</span>
|
||||
<span></span>
|
||||
</p>
|
||||
<p>
|
||||
<span>应用场景名称</span>
|
||||
<span>{{ val.name }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>应用场景描述</span>
|
||||
<span>{{ val.desc }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>应用场景图片</span>
|
||||
<span>
|
||||
<a-image :width="85" :height="60" :src="val.img" />
|
||||
</span>
|
||||
</p>
|
||||
<div class="del">
|
||||
<i class="delImg" @click="del(index)"></i>
|
||||
<div @click="del(index)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add">添加更多算法优势</div>
|
||||
<div class="name">
|
||||
<span>应用场景名称</span>
|
||||
<a-input
|
||||
v-model:value="value"
|
||||
:maxlength="24"
|
||||
placeholder="请填写应用场景名称_应用场景描述热词,不超过24个字符"
|
||||
/>
|
||||
</div>
|
||||
<div class="dec">
|
||||
<span>应用场景描述</span>
|
||||
<a-textarea
|
||||
v-model:value="value2"
|
||||
:showCount="true"
|
||||
:maxlength="200"
|
||||
placeholder="请填写应用场景名称+应用场景场景+应用场景两点+应用场景作用"
|
||||
/>
|
||||
</div>
|
||||
<div class="dec upload" :key="showKey">
|
||||
<span>应用场景图片</span>
|
||||
<upload
|
||||
type="图片"
|
||||
btnName="上传图片"
|
||||
:maxCount="1"
|
||||
:data="value3"
|
||||
:list="[]"
|
||||
:emitFlag="true"
|
||||
tip="支持图片类型，大小不超过100M"
|
||||
></upload>
|
||||
</div>
|
||||
<div class="submit">
|
||||
<a-button type="primary" @click="add()">提交</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps } from 'vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { message } from 'ant-design-vue'
|
||||
import upload from '@/views/components/upload'
|
||||
const props = defineProps({
|
||||
refData: { type: Object, default: null },
|
||||
dataFrom: { type: Array, default: null },
|
||||
})
|
||||
const value = ref('')
|
||||
const value2 = ref('')
|
||||
const value3 = ref({ note1: '' })
|
||||
const data = ref([])
|
||||
const showKey = ref(0)
|
||||
// const fileList = ref([])
|
||||
if (props.dataFrom) {
|
||||
console.log(props.dataFrom)
|
||||
props.dataFrom.infoList.forEach((item) => {
|
||||
if (item.attrType === props.refData.name) {
|
||||
data.value = JSON.parse(item.attrValue)
|
||||
}
|
||||
})
|
||||
}
|
||||
const add = () => {
|
||||
if (
|
||||
value.value.length > 0 &&
|
||||
value2.value.length > 0 &&
|
||||
value3.value.note1.length > 0
|
||||
) {
|
||||
data.value.push({
|
||||
name: value.value,
|
||||
desc: value2.value,
|
||||
img: value3.value.note1,
|
||||
})
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: props.refData.name,
|
||||
attrValue: JSON.stringify(data.value),
|
||||
delFlag: 0,
|
||||
})
|
||||
value.value = ''
|
||||
value2.value = ''
|
||||
value3.value.note1 = ''
|
||||
showKey.value++
|
||||
} else {
|
||||
message.warning('请填写完整')
|
||||
}
|
||||
}
|
||||
const del = (index) => {
|
||||
data.value.splice(index, 1)
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: props.refData.name,
|
||||
attrValue: JSON.stringify(data.value),
|
||||
delFlag: 0,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.scenarios {
|
||||
height: 680px;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 50px 100px 25px;
|
||||
& > div {
|
||||
width: 100%;
|
||||
}
|
||||
.title {
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
div:first-child,
|
||||
div:last-child {
|
||||
width: 265px;
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
.main {
|
||||
margin-top: 25px;
|
||||
.items {
|
||||
background: #fafafa;
|
||||
padding: 10px;
|
||||
p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span:nth-of-type(1) {
|
||||
width: 200px;
|
||||
}
|
||||
span:nth-of-type(2) {
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
p:nth-of-type(1) > span:nth-of-type(1) {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.del {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.delImg {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background: url(~@/assets/home/sf_del.png) no-repeat;
|
||||
margin-right: 5px;
|
||||
}
|
||||
div {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.add {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: #007efb;
|
||||
}
|
||||
.name,
|
||||
.dec {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
span {
|
||||
width: 120px;
|
||||
}
|
||||
:deep(.ant-input) {
|
||||
resize: none;
|
||||
width: 570px;
|
||||
}
|
||||
:deep(.ant-input-textarea) {
|
||||
width: 570px;
|
||||
}
|
||||
:deep(.ant-radio-group) {
|
||||
width: 570px;
|
||||
}
|
||||
:deep(.ant-input-number) {
|
||||
width: 200px;
|
||||
}
|
||||
.ant-btn {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
background: #d9ebff;
|
||||
color: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
.upload span:nth-of-type(2) {
|
||||
width: unset;
|
||||
}
|
||||
.submit {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.ant-btn {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
text-align: center;
|
||||
background: #d9ebff;
|
||||
color: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
// .scenarios::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// }
|
||||
</style>
|
||||
|
|
@ -1,305 +0,0 @@
|
|||
<template>
|
||||
<div class="deployment-use">
|
||||
<div class="first" v-for="title in props.refData.children" :key="title.id">
|
||||
<div class="top">
|
||||
<div></div>
|
||||
<div>{{ title.name }}</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<template
|
||||
v-if="
|
||||
title.name == '部署' || title.name == '安全' || title.name == '服务商'
|
||||
"
|
||||
>
|
||||
<div class="bottom">
|
||||
<div class="form" v-for="item in title.children" :key="item.id">
|
||||
<span>{{ item.name }}</span>
|
||||
<a-input
|
||||
v-if="item.type == 'input' || item.name === '服务商'"
|
||||
v-model:value="item.note1"
|
||||
:placeholder="'请输入' + item.name"
|
||||
/>
|
||||
<a-radio-group
|
||||
v-else-if="item.type == 'radio'"
|
||||
v-model:value="item.note1"
|
||||
:options="item.options"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="title.name == '常见问题'">
|
||||
<div class="bottom">
|
||||
<div class="items" v-show="data.commonProblem.length > 0">
|
||||
<div
|
||||
class="item"
|
||||
v-for="(val, index) in data.commonProblem"
|
||||
:key="'常见问题' + index"
|
||||
>
|
||||
<p>
|
||||
<span>常见问题-{{ index + 1 }}</span>
|
||||
<span></span>
|
||||
</p>
|
||||
<p>
|
||||
<span>问题</span>
|
||||
<span>{{ val.question }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>答复</span>
|
||||
<span>{{ val.answer }}</span>
|
||||
</p>
|
||||
<div class="del">
|
||||
<i class="delImg" @click="del2(index)"></i>
|
||||
<div @click="del2(index)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add">添加更多常见问题</div>
|
||||
<div class="form">
|
||||
<span>问题</span>
|
||||
<a-textarea
|
||||
v-model:value="question"
|
||||
:showCount="true"
|
||||
:maxlength="200"
|
||||
placeholder="请输入问题"
|
||||
/>
|
||||
</div>
|
||||
<div class="form">
|
||||
<span>答复</span>
|
||||
<a-textarea
|
||||
v-model:value="answer"
|
||||
:showCount="true"
|
||||
:maxlength="200"
|
||||
placeholder="请输入答复"
|
||||
/>
|
||||
</div>
|
||||
<div class="submit">
|
||||
<a-button type="primary" @click="add2()">提交</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { getCategoryTreePage } from '@/api/personalCenter'
|
||||
// import { baseURL } from '@/config'
|
||||
const props = defineProps({
|
||||
refData: { type: Object, default: null },
|
||||
dataFrom: { type: Array, default: null },
|
||||
fileList: { type: Array, default: null },
|
||||
imgList: { type: Array, default: null },
|
||||
})
|
||||
const data = ref({
|
||||
list: [],
|
||||
freightBasis: [],
|
||||
commonProblem: [],
|
||||
})
|
||||
let arr = props.refData.children.filter((item) => item.name !== '常见问题')
|
||||
data.value.list = []
|
||||
arr.forEach((val) => {
|
||||
val.children.forEach((item) => {
|
||||
if (item.isLinkToDic === 'true' && item.linkValue) {
|
||||
getCategoryTreePage({
|
||||
page: 1,
|
||||
limit: 20,
|
||||
dictTypeId: item.linkValue,
|
||||
deFlage: 0,
|
||||
}).then((res) => {
|
||||
// console.log(res.data.data)
|
||||
if (item.type === 'radio') {
|
||||
item.options = res.data.data.list.map((radio) => radio.dictLabel)
|
||||
}
|
||||
data.value.list.push(item)
|
||||
})
|
||||
} else {
|
||||
data.value.list.push(item)
|
||||
}
|
||||
})
|
||||
})
|
||||
// console.log('1111111111111111111111111', props.refData, data.value.list)
|
||||
if (props.dataFrom) {
|
||||
console.log(props.dataFrom, data.value.list)
|
||||
props.dataFrom.infoList.forEach((item) => {
|
||||
if (item.attrType === '常见问题') {
|
||||
data.value.commonProblem = JSON.parse(item.attrValue)
|
||||
}
|
||||
})
|
||||
}
|
||||
const question = ref('')
|
||||
const answer = ref('')
|
||||
const add2 = () => {
|
||||
if (question.value.length > 0 && answer.value.length > 0) {
|
||||
data.value.commonProblem.push({
|
||||
question: question.value,
|
||||
answer: answer.value,
|
||||
})
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: '常见问题',
|
||||
attrValue: JSON.stringify(data.value.commonProblem),
|
||||
delFlag: 0,
|
||||
})
|
||||
question.value = ''
|
||||
answer.value = ''
|
||||
} else {
|
||||
message.warning('请填写完整')
|
||||
}
|
||||
}
|
||||
const del2 = (index) => {
|
||||
data.value.commonProblem.splice(index, 1)
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: '常见问题',
|
||||
attrValue: JSON.stringify(data.value.commonProblem),
|
||||
delFlag: 0,
|
||||
})
|
||||
}
|
||||
watch(data.value.list, (newProps, oldProps) => {
|
||||
console.log(newProps, oldProps)
|
||||
newProps.forEach((val) => {
|
||||
console.log('数据发生改变==========>', val)
|
||||
if (
|
||||
val.name === '共享条件' ||
|
||||
val.name === '共享类型' ||
|
||||
val.name === '访问地址'
|
||||
) {
|
||||
mybus.emit('chageDataFromDwon', {
|
||||
attrType: val.name,
|
||||
attrValue: val.note1,
|
||||
delFlag: 0,
|
||||
})
|
||||
} else {
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: val.name,
|
||||
attrValue: val.note1,
|
||||
delFlag: 0,
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.deployment-use {
|
||||
height: 680px;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 50px 100px 25px;
|
||||
& > div {
|
||||
width: 100%;
|
||||
margin-top: 60px;
|
||||
.top {
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
div:first-child,
|
||||
div:last-child {
|
||||
width: 245px;
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
margin-top: 25px;
|
||||
.items {
|
||||
background: #fafafa;
|
||||
padding: 10px;
|
||||
p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span:nth-of-type(1) {
|
||||
width: 200px;
|
||||
}
|
||||
span:nth-of-type(2) {
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
p:nth-of-type(1) > span:nth-of-type(1) {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.del {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.delImg {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background: url(~@/assets/home/sf_del.png) no-repeat;
|
||||
margin-right: 5px;
|
||||
}
|
||||
div {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.add {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: #007efb;
|
||||
}
|
||||
.form {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
span:first-child {
|
||||
width: 120px;
|
||||
}
|
||||
:deep(.ant-input-textarea) {
|
||||
width: 570px;
|
||||
}
|
||||
:deep(.ant-radio-group) {
|
||||
width: 570px;
|
||||
}
|
||||
:deep(.ant-input-number) {
|
||||
width: 200px;
|
||||
}
|
||||
:deep(.ant-input) {
|
||||
resize: none;
|
||||
width: 570px;
|
||||
}
|
||||
.ant-btn {
|
||||
width: 100px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
background: #d9ebff;
|
||||
color: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
.submit {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.ant-btn {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
text-align: center;
|
||||
background: #d9ebff;
|
||||
color: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& > div:nth-of-type(1) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
// .deployment-use::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// }
|
||||
</style>
|
||||
|
|
@ -1,483 +0,0 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-13 10:22:27
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-13 14:31:19
|
||||
* @Description: 应用上架-基本信息
|
||||
-->
|
||||
<template>
|
||||
<div class="application-essential-information">
|
||||
<div class="title">
|
||||
<div></div>
|
||||
<div>基本信息</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="ceshi-class">
|
||||
<div
|
||||
v-for="(item, index) in dataList"
|
||||
:key="item.attrType"
|
||||
:style="styleFunction(item.type, item.attrType)"
|
||||
>
|
||||
<a-form-item :label="item.attrType" v-if="item.type == 'input'">
|
||||
<a-input
|
||||
v-model:value="dataList[index].attrValue"
|
||||
:placeholder="`请输入${item.attrType}，不超过24个字符`"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="item.attrType"
|
||||
v-if="item.type == 'select' && item.attrType == '归属部门'"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="deptName"
|
||||
disabled
|
||||
:placeholder="`请输入${item.attrType}，不超过24个字符`"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="item.attrType"
|
||||
v-if="item.type == 'select' && item.attrType == '部门联系人'"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList[index].attrValue"
|
||||
:placeholder="`请输入${item.attrType}，不超过24个字符`"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="item.attrType"
|
||||
v-if="
|
||||
item.type == 'select' &&
|
||||
item.attrType != '归属部门' &&
|
||||
item.attrType != '部门联系人'
|
||||
"
|
||||
>
|
||||
<a-select
|
||||
style="width: 240px"
|
||||
v-model:value="dataList[index].attrValue"
|
||||
placeholder="请选择功能类型"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(itemSelect, indexSelect) in item.children"
|
||||
:key="indexSelect"
|
||||
:value="itemSelect.dictLabel"
|
||||
>
|
||||
{{ itemSelect.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="item.attrType"
|
||||
v-if="item.type == 'checkBox' && item.attrType != '发布端'"
|
||||
:key="showKey"
|
||||
>
|
||||
<div class="application-Area" id="application-Area">
|
||||
<div
|
||||
v-for="(itemson, indexson) in item.children"
|
||||
:key="indexson"
|
||||
class="application-Area-son"
|
||||
@click="ApplicationArea(itemson, index)"
|
||||
:class="
|
||||
applicationDataList.indexOf(itemson.dictLabel) != -1
|
||||
? 'application-Area-down'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ itemson.dictLabel }}
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label="item.attrType"
|
||||
v-if="item.type == 'checkBox' && item.attrType == '发布端'"
|
||||
:key="showKey"
|
||||
>
|
||||
<a-checkbox-group
|
||||
v-model:value="dataList[index].attrValue"
|
||||
name="checkboxgroup"
|
||||
:options="plainOptions"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="item.attrType" v-if="item.type == 'textArea'">
|
||||
<a-textarea
|
||||
style="
|
||||
width: 680px;
|
||||
height: 100px;
|
||||
max-height: 100px;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
v-model:value="dataList[index].attrValue"
|
||||
:placeholder="`请填写${item.attrType}`"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item :label="item.attrType" v-if="item.type == 'video'">
|
||||
<upload
|
||||
type="视频"
|
||||
btnName="上传视频"
|
||||
:maxCount="1"
|
||||
:data="item"
|
||||
:list="props.videoList"
|
||||
tip="支持视频类型，大小不超过100M"
|
||||
></upload>
|
||||
</a-form-item>
|
||||
<a-form-item :label="item.attrType" v-if="item.type == 'image'">
|
||||
<upload
|
||||
type="图片"
|
||||
btnName="上传图片"
|
||||
:maxCount="1"
|
||||
:data="item"
|
||||
:list="props.imgList"
|
||||
tip="支持图片类型，大小不超过100M"
|
||||
></upload>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { getCategoryTreePage } from '@/api/personalCenter'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
import upload from '@/views/components/upload'
|
||||
import { getUser, getUserInfo } from '@/api/home'
|
||||
let dataList = ref([])
|
||||
let applicationDataList = ref([])
|
||||
let indexSwitch = ref()
|
||||
let plainOptions = ref([])
|
||||
//样式修改
|
||||
function styleFunction(type, attrType) {
|
||||
if (type == 'select' || type == 'radio' || attrType == '部门联系人电话') {
|
||||
return 'display: inline-block;width: 45%;'
|
||||
}
|
||||
}
|
||||
const props = defineProps({
|
||||
refData: { type: Object, default: null },
|
||||
videoList: { type: Array, default: null },
|
||||
dataFrom: { type: Object, default: null },
|
||||
imgList: { type: Array, default: null },
|
||||
})
|
||||
//初始化字段
|
||||
let showKey = ref(0)
|
||||
console.log('props.refData', props.imgList)
|
||||
props.refData.children[0].children.map((item) => {
|
||||
let object = ref({
|
||||
attrType: item.name,
|
||||
attrValue: '',
|
||||
type: item.type,
|
||||
children: [],
|
||||
isLinkToDic: item.isLinkToDic,
|
||||
linkValue: item.linkValue,
|
||||
note1: item.note1,
|
||||
})
|
||||
dataList.value.push(object.value)
|
||||
// console.log('dataList', dataList.value)
|
||||
if (props.dataFrom.name) {
|
||||
props.dataFrom.infoList.map((item) => {
|
||||
dataList.value.map((itemson, index) => {
|
||||
if (
|
||||
item.attrType == itemson.attrType &&
|
||||
itemson.attrType != '应用领域' &&
|
||||
itemson.attrType != '发布端' &&
|
||||
itemson.attrType != '应用展示视频' &&
|
||||
itemson.attrType != '应用图片'
|
||||
) {
|
||||
dataList.value[index].attrValue = item.attrValue
|
||||
}
|
||||
if (
|
||||
itemson.attrType == '应用展示视频' ||
|
||||
itemson.attrType == '应用图片'
|
||||
) {
|
||||
dataList.value[index].attrValue = item.note1
|
||||
}
|
||||
if (
|
||||
item.attrType == itemson.attrType &&
|
||||
itemson.attrType == '发布端'
|
||||
) {
|
||||
dataList.value[index].attrValue = item.attrValue.split(';')
|
||||
}
|
||||
if (
|
||||
item.attrType == itemson.attrType &&
|
||||
itemson.attrType == '应用领域'
|
||||
) {
|
||||
dataList.value[index].attrValue = item.attrValue.split(';')
|
||||
console.log('1111111111111', dataList.value[index].attrValue)
|
||||
applicationDataList.value = item.attrValue.split(';')
|
||||
}
|
||||
})
|
||||
})
|
||||
dataList.value.map((item, index) => {
|
||||
if (item.attrType.indexOf('名称') != -1) {
|
||||
dataList.value[index].attrValue = props.dataFrom.name
|
||||
}
|
||||
if (item.attrType.indexOf('描述') != -1) {
|
||||
dataList.value[index].attrValue = props.dataFrom.description
|
||||
}
|
||||
if (item.attrType == '部门联系人') {
|
||||
dataList.value[index].attrValue = props.dataFrom.deptContacts
|
||||
debugger
|
||||
}
|
||||
if (item.attrType == '部门联系人电话') {
|
||||
dataList.value[index].attrValue = props.dataFrom.deptPhone
|
||||
}
|
||||
})
|
||||
|
||||
showKey.value++
|
||||
}
|
||||
//筛选出下拉列表
|
||||
})
|
||||
dataList.value.map((item2, index) => {
|
||||
if (item2.isLinkToDic == 'true') {
|
||||
const params = {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
dictTypeId: item2.linkValue,
|
||||
deFlage: 0,
|
||||
}
|
||||
getCategoryTreePage(params).then((res) => {
|
||||
dataList.value[index].children = res.data.data.list
|
||||
if (item2.attrType == '发布端') {
|
||||
dataList.value[index].children.map((item3) => {
|
||||
plainOptions.value.push(item3.dictLabel)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
console.log('props', dataList.value)
|
||||
//视频上传限制格式
|
||||
//应用领域点击时间
|
||||
function ApplicationArea(item, indexfather) {
|
||||
indexSwitch.value = applicationDataList.value.indexOf(item.dictLabel)
|
||||
if (indexSwitch.value != -1) {
|
||||
applicationDataList.value.splice(indexSwitch.value, 1)
|
||||
dataList.value[indexfather].attrValue = applicationDataList.value
|
||||
} else {
|
||||
applicationDataList.value.push(item.dictLabel)
|
||||
dataList.value[indexfather].attrValue = applicationDataList.value
|
||||
console.log('applicationDataList.value2', applicationDataList.value)
|
||||
}
|
||||
}
|
||||
watch(
|
||||
dataList,
|
||||
() => {
|
||||
dataList.value.map((item, index) => {
|
||||
if (
|
||||
(item.attrValue || item.note1) &&
|
||||
item.attrType.indexOf('名称') == -1 &&
|
||||
item.attrType.indexOf('描述') == -1 &&
|
||||
item.attrType.indexOf('部门联系人') == -1 &&
|
||||
item.attrType.indexOf('部门联系人电话') == -1
|
||||
) {
|
||||
if (item.attrType == '应用领域' || item.attrType == '发布端') {
|
||||
let datain = ref({
|
||||
attrType: item.attrType,
|
||||
attrValue: item.attrValue.join(';'),
|
||||
delFlag: 0,
|
||||
})
|
||||
mybus.emit('chageDataFrom', datain.value)
|
||||
} else if (
|
||||
item.attrType == '应用展示视频' ||
|
||||
item.attrType == '应用图片'
|
||||
) {
|
||||
dataList.value[index].attrValue = item.note1
|
||||
let datain = ref({
|
||||
attrType: item.attrType,
|
||||
attrValue: item.note1,
|
||||
delFlag: 0,
|
||||
})
|
||||
mybus.emit('chageDataFrom', datain.value)
|
||||
} else {
|
||||
let datain = ref({
|
||||
attrType: item.attrType,
|
||||
attrValue: item.attrValue,
|
||||
delFlag: 0,
|
||||
})
|
||||
mybus.emit('chageDataFrom', datain.value)
|
||||
}
|
||||
}
|
||||
if (item.attrValue && item.attrType.indexOf('名称') != -1) {
|
||||
let datain = ref({
|
||||
attrType: '名称',
|
||||
attrValue: item.attrValue,
|
||||
})
|
||||
mybus.emit('chageDataFromDwon', datain.value)
|
||||
}
|
||||
if (item.attrValue && item.attrType.indexOf('描述') != -1) {
|
||||
let datain = ref({
|
||||
attrType: '描述',
|
||||
attrValue: item.attrValue,
|
||||
})
|
||||
mybus.emit('chageDataFromDwon', datain.value)
|
||||
}
|
||||
if (item.attrValue && item.attrType == '部门联系人') {
|
||||
let datain = ref({
|
||||
attrType: '部门联系人',
|
||||
attrValue: item.attrValue,
|
||||
})
|
||||
mybus.emit('chageDataFromDwon', datain.value)
|
||||
}
|
||||
if (item.attrValue && item.attrType == '部门联系人电话') {
|
||||
let datain = ref({
|
||||
attrType: '部门联系人电话',
|
||||
attrValue: item.attrValue,
|
||||
})
|
||||
mybus.emit('chageDataFromDwon', datain.value)
|
||||
}
|
||||
})
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
//获取用户信息
|
||||
let deptName = ref('')
|
||||
const userxin = () => {
|
||||
getUser().then((res) => {
|
||||
getUserInfo(res.data.data.id).then((resson) => {
|
||||
deptName.value = resson.data.data.deptName
|
||||
})
|
||||
})
|
||||
}
|
||||
userxin()
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.application-essential-information {
|
||||
:deep(textarea) {
|
||||
resize: none;
|
||||
}
|
||||
:deep(.ant-checkbox-inner) {
|
||||
display: inline-block;
|
||||
border-radius: 16px;
|
||||
}
|
||||
:deep(.ant-form-item-control) {
|
||||
width: calc(100% - 140px);
|
||||
}
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 50px;
|
||||
.title {
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
div:first-child,
|
||||
div:last-child {
|
||||
width: 320px;
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
:deep(.ant-radio-wrapper) {
|
||||
width: 100px;
|
||||
}
|
||||
.ceshi-class {
|
||||
// display: flex;
|
||||
}
|
||||
.overall-arrangement {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
:deep(.ant-radio-wrapper) {
|
||||
width: unset;
|
||||
margin-right: 40px;
|
||||
}
|
||||
:deep(.ant-form-item-control-input) {
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
.application-Area {
|
||||
display: grid;
|
||||
margin-top: -5px;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
.application-Area-son {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
width: 90px;
|
||||
height: 26px;
|
||||
border-radius: 13px;
|
||||
color: #333333;
|
||||
background: #f5f5f5;
|
||||
border: 1px #cccccc solid;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.application-Area-down {
|
||||
background: #0087ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.upload-list-inline {
|
||||
button {
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
border: 1px solid #bbd3ef;
|
||||
border-radius: 6px;
|
||||
background: #edf4fc;
|
||||
color: #0087ff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.associated-application {
|
||||
p {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
span:last-child {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(label) {
|
||||
width: 140px;
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
}
|
||||
// :deep(.ant-form-item-label) {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// }
|
||||
:deep(input) {
|
||||
height: 44px;
|
||||
border: 1px #d9d9d9 solid;
|
||||
border-radius: 6px;
|
||||
color: #333333;
|
||||
}
|
||||
.ant-form-item {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
:deep(.ant-select-selector) {
|
||||
height: 44px;
|
||||
border: 1px #d9d9d9 solid;
|
||||
border-radius: 6px;
|
||||
color: #333333;
|
||||
font-size: 16px;
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
:deep(input::-webkit-input-placeholder) {
|
||||
font-size: 16px;
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
.essential-information::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,254 +0,0 @@
|
|||
<template>
|
||||
<div class="scenarios">
|
||||
<div class="title">
|
||||
<div></div>
|
||||
<div>{{ props.refData.name }}</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="items" v-show="data.length > 0">
|
||||
<div class="item" v-for="(val, index) in data" :key="index">
|
||||
<p>
|
||||
<span>功能介绍-{{ index + 1 }}</span>
|
||||
<span></span>
|
||||
</p>
|
||||
<p>
|
||||
<span>功能名称</span>
|
||||
<span>{{ val.name }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>功能描述</span>
|
||||
<span>{{ val.desc }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>功能图片</span>
|
||||
<span>
|
||||
<a-image :width="85" :height="60" :src="val.img" />
|
||||
</span>
|
||||
</p>
|
||||
<div class="del">
|
||||
<i class="delImg" @click="del(index)"></i>
|
||||
<div @click="del(index)">删除</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add">添加更多功能介绍</div>
|
||||
<div class="name">
|
||||
<span>功能名称</span>
|
||||
<a-input
|
||||
v-model:value="value"
|
||||
:maxlength="24"
|
||||
placeholder="请填写功能名称_功能描述热词,不超过24个字符"
|
||||
/>
|
||||
</div>
|
||||
<div class="dec">
|
||||
<span>功能描述</span>
|
||||
<a-textarea
|
||||
v-model:value="value2"
|
||||
:showCount="true"
|
||||
:maxlength="200"
|
||||
placeholder="请填写功能名称+功能场景+功能两点+功能作用"
|
||||
/>
|
||||
</div>
|
||||
<div class="dec upload" :key="showKey">
|
||||
<span>功能图片</span>
|
||||
<upload
|
||||
type="图片"
|
||||
btnName="上传图片"
|
||||
:maxCount="1"
|
||||
:data="value3"
|
||||
:list="[]"
|
||||
:emitFlag="true"
|
||||
tip="支持图片类型，大小不超过100M"
|
||||
></upload>
|
||||
</div>
|
||||
<div class="submit">
|
||||
<a-button type="primary" @click="add()">提交</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps } from 'vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { message } from 'ant-design-vue'
|
||||
import upload from '@/views/components/upload'
|
||||
const props = defineProps({
|
||||
refData: { type: Object, default: null },
|
||||
dataFrom: { type: Array, default: null },
|
||||
})
|
||||
const value = ref('')
|
||||
const value2 = ref('')
|
||||
const value3 = ref({ note1: '' })
|
||||
const data = ref([])
|
||||
const showKey = ref(0)
|
||||
// const fileList = ref([])
|
||||
if (props.dataFrom) {
|
||||
console.log(props.dataFrom)
|
||||
props.dataFrom.infoList.forEach((item) => {
|
||||
if (item.attrType === props.refData.name) {
|
||||
data.value = JSON.parse(item.attrValue)
|
||||
}
|
||||
})
|
||||
}
|
||||
const add = () => {
|
||||
if (
|
||||
value.value.length > 0 &&
|
||||
value2.value.length > 0 &&
|
||||
value3.value.note1.length > 0
|
||||
) {
|
||||
data.value.push({
|
||||
name: value.value,
|
||||
desc: value2.value,
|
||||
img: value3.value.note1,
|
||||
})
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: props.refData.name,
|
||||
attrValue: JSON.stringify(data.value),
|
||||
delFlag: 0,
|
||||
})
|
||||
value.value = ''
|
||||
value2.value = ''
|
||||
value3.value.note1 = ''
|
||||
showKey.value++
|
||||
} else {
|
||||
message.warning('请填写完整')
|
||||
}
|
||||
}
|
||||
const del = (index) => {
|
||||
data.value.splice(index, 1)
|
||||
mybus.emit('chageDataFrom', {
|
||||
attrType: props.refData.name,
|
||||
attrValue: JSON.stringify(data.value),
|
||||
delFlag: 0,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.scenarios {
|
||||
height: 680px;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 50px 100px 25px;
|
||||
& > div {
|
||||
width: 100%;
|
||||
}
|
||||
.title {
|
||||
color: #333333;
|
||||
font-size: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
div:first-child,
|
||||
div:last-child {
|
||||
width: 265px;
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
margin: 0 30px;
|
||||
}
|
||||
}
|
||||
.main {
|
||||
margin-top: 25px;
|
||||
.items {
|
||||
background: #fafafa;
|
||||
padding: 10px;
|
||||
p {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span:nth-of-type(1) {
|
||||
width: 200px;
|
||||
}
|
||||
span:nth-of-type(2) {
|
||||
width: 100%;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
p:nth-of-type(1) > span:nth-of-type(1) {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.del {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
.delImg {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
background: url(~@/assets/home/sf_del.png) no-repeat;
|
||||
margin-right: 5px;
|
||||
}
|
||||
div {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.add {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: #007efb;
|
||||
}
|
||||
.name,
|
||||
.dec {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
span {
|
||||
width: 120px;
|
||||
}
|
||||
:deep(.ant-input) {
|
||||
resize: none;
|
||||
width: 570px;
|
||||
}
|
||||
:deep(.ant-input-textarea) {
|
||||
width: 570px;
|
||||
}
|
||||
:deep(.ant-radio-group) {
|
||||
width: 570px;
|
||||
}
|
||||
:deep(.ant-input-number) {
|
||||
width: 200px;
|
||||
}
|
||||
.ant-btn {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
background: #d9ebff;
|
||||
color: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
.upload span:nth-of-type(2) {
|
||||
width: unset;
|
||||
}
|
||||
.submit {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.ant-btn {
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
text-align: center;
|
||||
background: #d9ebff;
|
||||
color: #0087ff;
|
||||
border: 1px solid #0087ff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
// .scenarios::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// }
|
||||
</style>
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-09 15:41:19
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-10 15:44:37
|
||||
* @Description: 上传组件
|
||||
-->
|
||||
<template>
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
:action="`${baseURL}/upload`"
|
||||
list-type="picture"
|
||||
class="upload-list-inline"
|
||||
:maxCount="props.maxCount"
|
||||
:before-upload="beforeUpload"
|
||||
@change="handleChange"
|
||||
@preview="handlePreview"
|
||||
@remove="handleRemove"
|
||||
>
|
||||
<a-button>
|
||||
<upload-outlined></upload-outlined>
|
||||
{{ props.btnName }}
|
||||
</a-button>
|
||||
<span
|
||||
style="
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
"
|
||||
>
|
||||
{{ props.tip }}
|
||||
</span>
|
||||
</a-upload>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps } from 'vue'
|
||||
import { baseURL } from '@/config'
|
||||
import { message, Upload } from 'ant-design-vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const props = defineProps({
|
||||
btnName: { type: String, default: '' },
|
||||
type: { type: String, default: '' },
|
||||
tip: { type: String, default: '' },
|
||||
maxCount: { type: Number, default: 1 },
|
||||
data: { type: Array, default: null },
|
||||
list: { type: Array, default: null },
|
||||
emitFlag: { type: String, default: '' },
|
||||
})
|
||||
const fileList = ref([])
|
||||
if (props.list.length > 0) {
|
||||
fileList.value = JSON.parse(JSON.stringify(props.list))
|
||||
}
|
||||
const beforeUpload = (file) => {
|
||||
console.log(file)
|
||||
const isLt10M = file.size / 1024 / 1024 < 100
|
||||
let flag
|
||||
console.log(props.type)
|
||||
if (props.type === '图片') {
|
||||
flag =
|
||||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/jpg' ||
|
||||
file.type === 'image/png'
|
||||
} else if (props.type === '视频') {
|
||||
console.log(file.type === 'video/mp4')
|
||||
flag =
|
||||
file.type === 'audio/mpeg' ||
|
||||
file.type === 'video/mp4' ||
|
||||
file.type === 'video/mp3'
|
||||
} else if (props.type === '文件') {
|
||||
flag =
|
||||
file.type === 'application/pdf' ||
|
||||
file.type === 'application/msword' ||
|
||||
file.type ===
|
||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
|
||||
}
|
||||
console.log(flag)
|
||||
if (!flag) {
|
||||
message.error(`${file.name} 不是${props.type}类型`)
|
||||
}
|
||||
if (!isLt10M) {
|
||||
message.error(`${file.name} 超出100M的大小`)
|
||||
}
|
||||
return flag || Upload.LIST_IGNORE
|
||||
}
|
||||
const handlePreview = (file) => {
|
||||
// console.log(file)
|
||||
window.open(
|
||||
window.SITE_CONFIG.previewUrl +
|
||||
'hisense_office/onlinePreview?url=' +
|
||||
btoa(encodeURI(file.response.data))
|
||||
)
|
||||
}
|
||||
const handleChange = (info) => {
|
||||
if (info.file.status !== 'uploading') {
|
||||
console.log(info.file, info.fileList)
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
message.success(`${info.file.name}上传成功`)
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.data.note1 = info.file.response.data
|
||||
console.log(props.data, fileList.value)
|
||||
if (props.type === '图片') {
|
||||
if (!props.emitFlag) {
|
||||
mybus.emit('chageImgList', fileList.value)
|
||||
}
|
||||
} else if (props.type === '文件') {
|
||||
mybus.emit('chageFileList', fileList.value)
|
||||
} else if (props.type === '视频') {
|
||||
mybus.emit('chageVideoList', fileList.value)
|
||||
}
|
||||
} else if (info.file.status === 'error') {
|
||||
message.error(`${info.file.name}上传失败`)
|
||||
}
|
||||
}
|
||||
const handleRemove = (file) => {
|
||||
console.log(file)
|
||||
// eslint-disable-next-line vue/no-mutating-props
|
||||
props.data.note1 = ''
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.upload-list-inline {
|
||||
width: unset;
|
||||
button {
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
border: 1px solid #bbd3ef;
|
||||
border-radius: 6px;
|
||||
background: #edf4fc;
|
||||
color: #0087ff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,171 +0,0 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 11:32:22
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-13 12:01:31
|
||||
* @Description: 算法详情页
|
||||
-->
|
||||
<template>
|
||||
<div class="algorithm-details" :class="{ fixed2: scrollTop >= 600 }">
|
||||
<!-- 头部基本信息 -->
|
||||
<algorithm-top-details :dataList="dataList.data"></algorithm-top-details>
|
||||
<!-- 导航 -->
|
||||
<algorithm-navigation
|
||||
:dataList="dataList.data"
|
||||
:class="{ fixed: scrollTop >= 600 }"
|
||||
:selectNow="selectNow"
|
||||
></algorithm-navigation>
|
||||
<!-- 算法展示 视频 -->
|
||||
<algorithm-display
|
||||
:dataList="dataList.data"
|
||||
id="algorithm-display"
|
||||
class="scrollBox"
|
||||
></algorithm-display>
|
||||
<!-- 算法优势 -->
|
||||
<algorithm-advantage
|
||||
:dataList="dataList.data"
|
||||
id="algorithm-advantage"
|
||||
class="scrollBox"
|
||||
></algorithm-advantage>
|
||||
<!-- 应用场景和应用案例 -->
|
||||
<!-- <application-scenarios-and-case
|
||||
id="application-scenarios-and-case"
|
||||
class="scrollBox"
|
||||
></application-scenarios-and-case> -->
|
||||
<algorithm-application-scenarios
|
||||
:dataList="dataList.data"
|
||||
id="application-scenarios"
|
||||
class="scrollBox"
|
||||
></algorithm-application-scenarios>
|
||||
<algorithm-application-case
|
||||
:dataList="dataList.data"
|
||||
id="application-case"
|
||||
class="scrollBox"
|
||||
></algorithm-application-case>
|
||||
<!-- 算法试用 -->
|
||||
<algorithm-on-trial
|
||||
:dataList="dataList.data"
|
||||
id="algorithm-on-trial"
|
||||
class="scrollBox"
|
||||
></algorithm-on-trial>
|
||||
<!-- 计费标准 -->
|
||||
<algorithm-charging-standard
|
||||
:dataList="dataList.data"
|
||||
id="charging-standard"
|
||||
class="scrollBox"
|
||||
></algorithm-charging-standard>
|
||||
<!-- 使用方式 -->
|
||||
<algorithm-usage-mode
|
||||
:dataList="dataList.data"
|
||||
id="usage-mode"
|
||||
class="scrollBox"
|
||||
></algorithm-usage-mode>
|
||||
<!-- 常见问题-->
|
||||
<algorithm-common-problem
|
||||
:dataList="dataList.data"
|
||||
id="common-problem"
|
||||
class="scrollBox"
|
||||
></algorithm-common-problem>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import AlgorithmTopDetails from '@/views/detailsAll/components/AlgorithmTopDetails.vue'
|
||||
import AlgorithmNavigation from '@/views/detailsAll/components/AlgorithmNavigation.vue'
|
||||
import AlgorithmDisplay from '@/views/detailsAll/components/AlgorithmDisplay.vue'
|
||||
import AlgorithmAdvantage from '@/views/detailsAll/components/AlgorithmAdvantage.vue'
|
||||
import AlgorithmOnTrial from '@/views/detailsAll/components/AlgorithmOnTrial.vue'
|
||||
import AlgorithmApplicationScenarios from '@/views/detailsAll/components/AlgorithmApplicationScenarios'
|
||||
import AlgorithmApplicationCase from '@/views/detailsAll/components/AlgorithmApplicationCase'
|
||||
import AlgorithmUsageMode from '@/views/detailsAll/components/AlgorithmUsageMode' //使用方式
|
||||
import AlgorithmChargingStandard from '@/views/detailsAll/components/AlgorithmChargingStandard' //计费标准
|
||||
import AlgorithmCommonProblem from '@/views/detailsAll/components/AlgorithmCommonProblem' //常见问题
|
||||
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { updateVisits, selectOne } from '@/api/home'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const router = useRouter()
|
||||
const scrollTop = ref(0)
|
||||
const domArr = ref([])
|
||||
const selectNow = ref('')
|
||||
const dataList = reactive({ data: {} })
|
||||
const id = router.currentRoute.value.query.id
|
||||
const obj = JSON.parse(window.sessionStorage.getItem('preview'))
|
||||
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
|
||||
// console.log(top, document.querySelector('#' + id).offsetTop)
|
||||
document.documentElement.scrollTop = top
|
||||
document.body.scrollTop = top
|
||||
})
|
||||
onMounted(() => {
|
||||
// console.clear()
|
||||
window.addEventListener('scroll', () => {
|
||||
domArr.value = document.querySelectorAll('.scrollBox')
|
||||
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 (
|
||||
scrollTop.value > domArr.value[i].offsetTop - 50 &&
|
||||
scrollTop.value < domArr.value[i + 1].offsetTop - 50
|
||||
) {
|
||||
selectNow.value = domArr.value[i].id
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const init = (id) => {
|
||||
if (id) {
|
||||
selectOne(id).then((res) => {
|
||||
// console.clear()
|
||||
dataList.data = res.data.data
|
||||
console.log('初始化详情页=========================>', dataList.data)
|
||||
const arrList = ref([])
|
||||
arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
|
||||
if (arrList.value.indexOf(id) === -1) {
|
||||
arrList.value.push(id)
|
||||
updateVisits({
|
||||
id: res.data.data.id,
|
||||
visits: res.data.data.visits || '0',
|
||||
}).then(() => {
|
||||
window.sessionStorage.setItem(
|
||||
'visits',
|
||||
JSON.stringify(arrList.value)
|
||||
)
|
||||
})
|
||||
}
|
||||
})
|
||||
} else if (obj) {
|
||||
dataList.data = obj
|
||||
console.log('预览==============', obj)
|
||||
}
|
||||
}
|
||||
init(id)
|
||||
onBeforeUnmount(() => {
|
||||
mybus.off('flyToView')
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.fixed2 > div:nth-of-type(3) {
|
||||
margin-top: 84px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,142 +0,0 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 16:06:10
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-13 15:21:05
|
||||
* @Description: 算法详情算法优势
|
||||
-->
|
||||
<template>
|
||||
<div class="algorithm-advantage" v-if="flag">
|
||||
<detals-title title="算法优势" type="ADVANTGE"></detals-title>
|
||||
<div class="main">
|
||||
<div class="top">
|
||||
<div v-for="val in data" :key="val.id" class="item">
|
||||
<div class="icon" :class="val.icon"></div>
|
||||
<div class="title">{{ val.title }}</div>
|
||||
<a-tooltip>
|
||||
<template #title>{{ val.text }}</template>
|
||||
<div class="text">{{ val.text }}</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||
const data = ref([])
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const flag = ref(true)
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '算法优势'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
data.value = []
|
||||
let arr = JSON.parse(obj.attrValue)
|
||||
if (arr.length > 3) {
|
||||
// 截取数组前三位
|
||||
arr = arr.splice(0, 3)
|
||||
}
|
||||
arr.forEach((item, index) => {
|
||||
data.value.push({
|
||||
title: item.name,
|
||||
text: item.desc,
|
||||
icon: 'icon1',
|
||||
id: index,
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '算法优势')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
data.value = []
|
||||
let arr = JSON.parse(obj.attrValue)
|
||||
if (arr.length > 3) {
|
||||
// 截取数组前三位
|
||||
arr = arr.splice(0, 3)
|
||||
}
|
||||
arr.forEach((item, index) => {
|
||||
data.value.push({
|
||||
title: item.name,
|
||||
text: item.desc,
|
||||
icon: 'icon1',
|
||||
id: index,
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.algorithm-advantage {
|
||||
padding: 100px 300px 60px;
|
||||
.main {
|
||||
margin-top: 40px;
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.item {
|
||||
width: 424px;
|
||||
padding: 35px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 1px solid #e4e6f5;
|
||||
border-radius: 10px;
|
||||
margin-left: 20px;
|
||||
.icon {
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
}
|
||||
.icon1 {
|
||||
background: url('~@/assets/detailsAll/sf_icon1.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.icon2 {
|
||||
background: url('~@/assets/detailsAll/sf_icon2.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.icon3 {
|
||||
background: url('~@/assets/detailsAll/sf_icon3.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.title {
|
||||
font-size: 22px;
|
||||
margin-top: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
.text {
|
||||
height: 78px;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
margin-top: 15px;
|
||||
color: #999;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,307 +0,0 @@
|
|||
<!-- 应用场景和应用案例 -->
|
||||
<template>
|
||||
<div class="application-scenarios-and-case" v-if="flag">
|
||||
<div
|
||||
class="application-scenarios-and-case-son"
|
||||
v-for="item in dataFrom"
|
||||
:key="item.title"
|
||||
>
|
||||
<div class="title">
|
||||
<DetalsTitle
|
||||
:title="item.title"
|
||||
:type="item.englishTitle"
|
||||
></DetalsTitle>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div
|
||||
v-for="(itemSonTitle, indexSonTitle) in item.content"
|
||||
:key="itemSonTitle.title"
|
||||
@click="tabSwitch(itemSonTitle.title, item.title)"
|
||||
class="tab-son"
|
||||
:class="tabIndexClass(indexSonTitle, item.title, item.content)"
|
||||
>
|
||||
<div
|
||||
class="tab-top"
|
||||
:class="
|
||||
tabInitialize(item.title) == itemSonTitle.title
|
||||
? 'tab-top-down'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ itemSonTitle.title }}
|
||||
</div>
|
||||
<div
|
||||
class="tab-bottom"
|
||||
v-if="tabInitialize(item.title) == itemSonTitle.title"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-for="itemSonTitle in item.content" :key="itemSonTitle">
|
||||
<div
|
||||
class="content"
|
||||
v-if="tabInitialize(item.title) == itemSonTitle.title"
|
||||
>
|
||||
<div :class="contentLocation(0, item.title)">
|
||||
<div
|
||||
:class="
|
||||
item.title == '应用场景'
|
||||
? 'content-left-scene'
|
||||
: 'content-left-case'
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<div :class="contentLocation(1, item.title)">
|
||||
<div
|
||||
:class="
|
||||
item.title == '应用场景'
|
||||
? 'content-right-scene'
|
||||
: 'content-right-case'
|
||||
"
|
||||
>
|
||||
<div class="content-top">{{ itemSonTitle.title }}</div>
|
||||
<div class="content-bottom">{{ itemSonTitle.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
let dataFrom = ref([
|
||||
{
|
||||
title: '应用案例',
|
||||
englishTitle: 'CASE',
|
||||
content: [
|
||||
{
|
||||
title: '应用案例一',
|
||||
content:
|
||||
'应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
{
|
||||
title: '应用案例二',
|
||||
content:
|
||||
'应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
{
|
||||
title: '应用案例三',
|
||||
content:
|
||||
'应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
{
|
||||
title: '应用案例四',
|
||||
content:
|
||||
'应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
{
|
||||
title: '应用案例五',
|
||||
content:
|
||||
'应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明二具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
{
|
||||
title: '应用案例六',
|
||||
content:
|
||||
'应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明三具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
{
|
||||
title: '应用案例七',
|
||||
content:
|
||||
'应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明四具体描述具体描述具体描述具体描述具体描述具体描述具体应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用案例说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述应用场景说明一具体描述具体描述具体描述具体描述具体描述具体描述具体描述',
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
const flag = ref(true)
|
||||
//数据初始化
|
||||
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
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '应用案例')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
const { log } = console
|
||||
//滚动条样式
|
||||
function tabIndexClass(index, title, content) {
|
||||
if (title == '应用场景' && index == 0 && content.length > 6) {
|
||||
return 'tab-son-class'
|
||||
}
|
||||
if (title == '应用案例' && index == 0 && content.length > 6) {
|
||||
return 'tab-son-class-two'
|
||||
}
|
||||
}
|
||||
// tab切换方法
|
||||
let tabindex = ref('场景说明一')
|
||||
let tabindexCase = ref('应用案例一')
|
||||
//初始化tab切换（判断标题不同，点击事件的判断变量不同）
|
||||
function tabInitialize(title) {
|
||||
if (title == '应用场景') {
|
||||
return tabindex.value
|
||||
} else {
|
||||
return tabindexCase.value
|
||||
}
|
||||
}
|
||||
//tab切换点击事件
|
||||
function tabSwitch(name, title) {
|
||||
if (title == '应用场景') {
|
||||
tabindex.value = name
|
||||
return tabindex.value
|
||||
} else {
|
||||
tabindexCase.value = name
|
||||
return tabindexCase.value
|
||||
}
|
||||
}
|
||||
//内容位置初始化
|
||||
function contentLocation(index, title) {
|
||||
log(index, title)
|
||||
if (index == 0) {
|
||||
if (title == '应用场景') {
|
||||
return 'content-right'
|
||||
} else {
|
||||
return 'content-left'
|
||||
}
|
||||
} else {
|
||||
if (title == '应用场景') {
|
||||
return 'content-left'
|
||||
} else {
|
||||
return 'content-right'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.application-scenarios-and-case {
|
||||
width: 100%;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-x: unset;
|
||||
.application-scenarios-and-case-son {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: unset;
|
||||
.tab {
|
||||
max-width: 1300px;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #808080;
|
||||
border-bottom: 1px #e4e6f5 solid;
|
||||
margin-top: 45px;
|
||||
margin-bottom: 40px;
|
||||
cursor: pointer;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
.tab-son {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 100px;
|
||||
.tab-top {
|
||||
min-width: 120px;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.tab-top-down {
|
||||
min-width: 120px;
|
||||
color: #526aff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.tab-bottom {
|
||||
height: 4px;
|
||||
width: 60px;
|
||||
background: #526aff;
|
||||
}
|
||||
}
|
||||
.tab-son-class {
|
||||
margin-left: 430px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.tab-son-class-two {
|
||||
margin-left: 230px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.tab-son:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
.tab::-webkit-scrollbar-thumb {
|
||||
background: rgba(82, 106, 255, 0.4);
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 1300px;
|
||||
height: 340px;
|
||||
.content-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
.content-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.content-right-scene,
|
||||
.content-right-case {
|
||||
width: 620px;
|
||||
height: 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.content-left-scene,
|
||||
.content-left-case {
|
||||
height: 340px;
|
||||
width: 635px;
|
||||
border-radius: 10px;
|
||||
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: 635px 340px;
|
||||
}
|
||||
.content-top {
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
color: #000000;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.content-bottom {
|
||||
font-size: 18px;
|
||||
color: #999999;
|
||||
line-height: 26px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
.application-scenarios-and-case-son:first-child {
|
||||
padding-top: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,274 +0,0 @@
|
|||
<!-- 应用场景-->
|
||||
<template>
|
||||
<div class="application-scenarios-and-case" v-if="flag">
|
||||
<div class="application-scenarios-and-case-son">
|
||||
<!-- {{ dataFrom.attrType }} -->
|
||||
<div class="title">
|
||||
<DetalsTitle :title="dataFrom.attrType" :type="SCENE"></DetalsTitle>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<div
|
||||
v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
|
||||
:key="itemSonTitle.name"
|
||||
@click="tabSwitch(itemSonTitle.name)"
|
||||
class="tab-son"
|
||||
:class="
|
||||
tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
|
||||
"
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.name }}</template>
|
||||
<div
|
||||
class="tab-top"
|
||||
:class="
|
||||
tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
|
||||
"
|
||||
>
|
||||
{{ itemSonTitle.name }}
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<div
|
||||
class="tab-bottom"
|
||||
v-if="tabInitialize() == itemSonTitle.name"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
|
||||
<div class="content" v-if="tabindex == itemSonTitle.name">
|
||||
<div class="content-right">
|
||||
<div class="content-left-scene" v-if="!itemSonTitle.img"></div>
|
||||
<a-image
|
||||
:width="635"
|
||||
:height="340"
|
||||
:src="itemSonTitle.img"
|
||||
v-if="itemSonTitle.img"
|
||||
></a-image>
|
||||
</div>
|
||||
<div :class="contentLocation(1, dataFrom.attrType)">
|
||||
<div class="content-right-scene" :class="'content-right-case'">
|
||||
<div class="content-top">{{ itemSonTitle.name }}</div>
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.desc }}</template>
|
||||
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
const flag = ref(true)
|
||||
let dataFrom = ref([])
|
||||
// tab切换方法
|
||||
let tabindex = ref('场景说明一')
|
||||
//数据初始化
|
||||
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 {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
dataFrom.value = obj
|
||||
tabindex.value = dataFrom.value.attrValue[0].name
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '应用场景')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
dataFrom.value = obj
|
||||
tabindex.value = dataFrom.value.attrValue[0].name
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
const { log } = console
|
||||
//滚动条样式
|
||||
function tabIndexClass(index, title, content) {
|
||||
if (title == '应用场景' && index == 0 && content.length > 6) {
|
||||
return 'tab-son-class'
|
||||
}
|
||||
if (title == '应用案例' && index == 0 && content.length > 6) {
|
||||
return 'tab-son-class-two'
|
||||
}
|
||||
}
|
||||
//初始化tab切换（判断标题不同，点击事件的判断变量不同）
|
||||
function tabInitialize() {
|
||||
return tabindex.value
|
||||
}
|
||||
//tab切换点击事件
|
||||
function tabSwitch(name) {
|
||||
tabindex.value = name
|
||||
return tabindex.value
|
||||
}
|
||||
//内容位置初始化
|
||||
function contentLocation(index, title) {
|
||||
log(index, title)
|
||||
if (index == 0) {
|
||||
if (title == '应用场景') {
|
||||
return 'content-right'
|
||||
} else {
|
||||
return 'content-left'
|
||||
}
|
||||
} else {
|
||||
if (title == '应用场景') {
|
||||
return 'content-left'
|
||||
} else {
|
||||
return 'content-right'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.application-scenarios-and-case {
|
||||
width: 100%;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-x: unset;
|
||||
.application-scenarios-and-case-son {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: unset;
|
||||
.tab {
|
||||
max-width: 1300px;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: #808080;
|
||||
border-bottom: 1px #e4e6f5 solid;
|
||||
margin-top: 45px;
|
||||
margin-bottom: 40px;
|
||||
cursor: pointer;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
.tab-son {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 100px;
|
||||
.tab-top {
|
||||
min-width: 120px;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 200px;
|
||||
height: 24px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.tab-top-down {
|
||||
min-width: 120px;
|
||||
color: #526aff;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.tab-bottom {
|
||||
height: 4px;
|
||||
width: 60px;
|
||||
background: #526aff;
|
||||
}
|
||||
}
|
||||
.tab-son-class {
|
||||
margin-left: 430px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.tab-son-class-two {
|
||||
margin-left: 230px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.tab-son:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
.tab::-webkit-scrollbar-thumb {
|
||||
background: rgba(82, 106, 255, 0.4);
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 1300px;
|
||||
height: 340px;
|
||||
.content-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
min-width: 620px;
|
||||
// text-align: center;
|
||||
.content-top {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.content-right {
|
||||
width: 620px;
|
||||
height: 340px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.content-right-scene,
|
||||
.content-right-case {
|
||||
width: 620px;
|
||||
height: 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.content-left-scene,
|
||||
.content-left-case {
|
||||
height: 340px;
|
||||
width: 635px;
|
||||
border-radius: 10px;
|
||||
background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: 635px 340px;
|
||||
}
|
||||
.content-top {
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
color: #000000;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.content-bottom {
|
||||
font-size: 18px;
|
||||
color: #999999;
|
||||
line-height: 26px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
.application-scenarios-and-case-son:first-child {
|
||||
padding-top: 100px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
<template>
|
||||
<!-- 计费标准 -->
|
||||
<div class="charging-standard" v-if="flag">
|
||||
<div class="title">
|
||||
<DetalsTitle title="计费标准" type="PRICE"></DetalsTitle>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div v-for="(item, index) in dataFrom" :key="index" class="content-card">
|
||||
<div class="content-title">{{ item.title }}</div>
|
||||
<div class="content-content">{{ item.content }}</div>
|
||||
<div class="content-footer">
|
||||
<span>{{ item.unit }}</span>
|
||||
<span>{{ item.value }}</span>
|
||||
<span>{{ item.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
const flag = ref(true)
|
||||
let dataFrom = ref([])
|
||||
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 {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
// dataFrom.value = obj
|
||||
obj.attrValue.map((item) => {
|
||||
let params = {
|
||||
title: item.type,
|
||||
content: item.desc,
|
||||
value: item.price,
|
||||
time: '/年起',
|
||||
unit: '￥',
|
||||
}
|
||||
dataFrom.value.push(params)
|
||||
})
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter(
|
||||
(item) => item.attrType === '计费标准信息'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
// dataFrom.value = obj
|
||||
obj.attrValue.map((item) => {
|
||||
let params = {
|
||||
title: item.type,
|
||||
content: item.desc,
|
||||
value: item.price,
|
||||
time: '/年起',
|
||||
unit: '￥',
|
||||
}
|
||||
dataFrom.value.push(params)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.charging-standard {
|
||||
width: 100%;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
.content {
|
||||
max-width: 1300px;
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
.content-card {
|
||||
height: 360px;
|
||||
width: 310px;
|
||||
padding: 40px 30px 30px 30px;
|
||||
background: #ffffff;
|
||||
margin-right: 20px;
|
||||
border: 1px #e4e6f5 solid;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
.content-title {
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
color: #000000;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.content-content {
|
||||
font-size: 18px;
|
||||
color: #999999;
|
||||
line-height: 26px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 5;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.content-footer {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
bottom: 30px;
|
||||
span:first-child {
|
||||
font-size: 22px;
|
||||
color: #ff8b55;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 32px;
|
||||
color: #ff8b55;
|
||||
}
|
||||
span:last-child {
|
||||
font-size: 22px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-card:hover {
|
||||
border-radius: 10px;
|
||||
border: 1px solid #0058e1;
|
||||
box-shadow: 0px 8px 20px rgba(0, 88, 225, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,123 +0,0 @@
|
|||
<template>
|
||||
<!-- 常见问题 -->
|
||||
<div class="cpmmon-problem" v-if="flag">
|
||||
<div class="title">
|
||||
<DetalsTitle title="常见问题" type="Q&A"></DetalsTitle>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div v-for="(item, index) in dataFrom" :key="index" class="content-son">
|
||||
<div class="content-top">
|
||||
<div class="top-img"></div>
|
||||
<div>{{ item.title }}</div>
|
||||
</div>
|
||||
<div class="content-bottom">
|
||||
<div class="bottom-img"></div>
|
||||
<div>{{ item.answer }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
const flag = ref(true)
|
||||
let dataFrom = ref([])
|
||||
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 {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
obj.attrValue.map((item) => {
|
||||
let params = {
|
||||
title: item.question,
|
||||
answer: item.answer,
|
||||
}
|
||||
dataFrom.value.push(params)
|
||||
})
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '常见问题')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
obj.attrValue = JSON.parse(obj.attrValue)
|
||||
obj.attrValue.map((item) => {
|
||||
let params = {
|
||||
title: item.question,
|
||||
answer: item.answer,
|
||||
}
|
||||
dataFrom.value.push(params)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cpmmon-problem {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 80px;
|
||||
background: #f7f8fa;
|
||||
.content {
|
||||
width: 1300px;
|
||||
margin: 20px 0px;
|
||||
background: #ffffff;
|
||||
padding: 40px;
|
||||
.content-son {
|
||||
font-size: 20px;
|
||||
margin-bottom: 60px;
|
||||
.content-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.content-bottom {
|
||||
display: flex;
|
||||
line-height: 34px;
|
||||
color: #666666;
|
||||
}
|
||||
.content-top,
|
||||
.content-bottom {
|
||||
div:last-child {
|
||||
width: calc(100% - 54px);
|
||||
}
|
||||
}
|
||||
.top-img {
|
||||
width: 34px;
|
||||
height: 30px;
|
||||
background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.bottom-img {
|
||||
width: 34px;
|
||||
height: 30px;
|
||||
background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
|
||||
ackground-size: cover;
|
||||
background-position: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.content-son:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 15:25:33
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-13 15:23:18
|
||||
* @Description: 算法详情页展示 视频播放
|
||||
-->
|
||||
<template>
|
||||
<div class="algorithm-display" v-if="flag">
|
||||
<detals-title title="算法展示" type="VIDEO"></detals-title>
|
||||
<div class="main">
|
||||
<div class="play" @click="showModal"></div>
|
||||
</div>
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
title="视频预览"
|
||||
:width="750"
|
||||
destroyOnClose
|
||||
>
|
||||
<template #footer></template>
|
||||
<div style="width: 100%; display: flex; justify-content: center">
|
||||
<div style="width: 100%; height: 100%">
|
||||
<vue3VideoPlay v-bind="options" />
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, defineProps, watch } from 'vue'
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||
const visible = ref(false)
|
||||
const options = reactive({
|
||||
width: '700px', //播放器宽度
|
||||
height: '400px', //播放器高度
|
||||
color: '#409eff', //主题色
|
||||
title: '', //视频名称
|
||||
src: '', //视频源
|
||||
muted: false, //静音
|
||||
webFullScreen: false,
|
||||
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||||
autoPlay: true, //自动播放
|
||||
loop: false, //循环播放
|
||||
mirror: false, //镜像画面
|
||||
ligthOff: false, //关灯模式
|
||||
volume: 0.3, //默认音量大小
|
||||
control: true, //是否显示控制
|
||||
controlBtns: [
|
||||
'audioTrack',
|
||||
'quality',
|
||||
'speedRate',
|
||||
'volume',
|
||||
'setting',
|
||||
'pip',
|
||||
'pageFullScreen',
|
||||
'fullScreen',
|
||||
], //显示所有按钮,
|
||||
})
|
||||
const showModal = () => {
|
||||
visible.value = true
|
||||
}
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const flag = ref(true)
|
||||
console.log('111111111111111111111,', props.dataList)
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '算法介绍视频'
|
||||
)[0]
|
||||
console.log('视频==============>', obj)
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
options.src = obj.attrValue
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter(
|
||||
(item) => item.attrType === '算法介绍视频'
|
||||
)[0]
|
||||
console.log('视频==============>', obj)
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
options.src = obj.attrValue
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.algorithm-display {
|
||||
padding: 80px 300px 0;
|
||||
.main {
|
||||
height: 340px;
|
||||
border-radius: 10px;
|
||||
background: url('~@/assets/detailsAll/sf_video_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.play {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
background: url('~@/assets/detailsAll/sf_video_play.png') no-repeat;
|
||||
background-size: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,175 +0,0 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 14:54:01
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-13 15:26:56
|
||||
* @Description: 算法详情页导航
|
||||
-->
|
||||
<template>
|
||||
<div class="algorithm-navigation" v-if="navList.length > 0">
|
||||
<template v-for="nav in navList" :key="nav.key">
|
||||
<div
|
||||
class="nav"
|
||||
:class="{ select: nav.key == select }"
|
||||
v-if="nav.show"
|
||||
@click="selectNav(nav.key)"
|
||||
>
|
||||
{{ nav.name }}
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
const navList = ref([
|
||||
{
|
||||
name: '算法展示',
|
||||
key: 'algorithm-display',
|
||||
},
|
||||
{
|
||||
name: '算法优势',
|
||||
key: 'algorithm-advantage',
|
||||
},
|
||||
{
|
||||
name: '应用场景',
|
||||
key: 'application-scenarios',
|
||||
},
|
||||
{
|
||||
name: '应用案例',
|
||||
key: 'application-case',
|
||||
},
|
||||
{
|
||||
name: '算法试用',
|
||||
key: 'algorithm-on-trial',
|
||||
},
|
||||
{
|
||||
name: '计费标准',
|
||||
key: 'charging-standard',
|
||||
},
|
||||
{
|
||||
name: '使用方式',
|
||||
key: 'usage-mode',
|
||||
},
|
||||
{
|
||||
name: '常见问题',
|
||||
key: 'common-problem',
|
||||
},
|
||||
])
|
||||
const props = defineProps({
|
||||
selectNow: { type: String, default: '' },
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const select = ref('algorithm-display')
|
||||
const list = ref([])
|
||||
const selectNav = (key) => {
|
||||
select.value = key
|
||||
mybus.emit('flyToView', select.value)
|
||||
}
|
||||
if (props.dataList.infoList) {
|
||||
list.value = []
|
||||
props.dataList.infoList.map((item) => {
|
||||
if (
|
||||
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 === '技术文档') {
|
||||
list.value.push('使用方式')
|
||||
}
|
||||
})
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
if (list.value.indexOf(item.name) > -1) {
|
||||
item.show = true
|
||||
}
|
||||
})
|
||||
select.value = navList.value.filter(
|
||||
(item) => item.name === list.value[0]
|
||||
)[0].key
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
}
|
||||
watch(
|
||||
() => props.selectNow,
|
||||
(newValue) => {
|
||||
select.value = newValue
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
list.value = []
|
||||
val.infoList.map((item) => {
|
||||
if (
|
||||
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 === '技术文档') {
|
||||
list.value.push('使用方式')
|
||||
}
|
||||
})
|
||||
navList.value.forEach((item) => {
|
||||
console.log(item)
|
||||
if (list.value.indexOf(item.name) > -1) {
|
||||
item.show = true
|
||||
}
|
||||
})
|
||||
select.value = navList.value.filter(
|
||||
(item) => item.name === list.value[0]
|
||||
)[0].key
|
||||
console.log('11111111111111111111111111', list.value, navList.value)
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.algorithm-navigation {
|
||||
width: 1912px;
|
||||
height: 84px;
|
||||
line-height: 80px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
padding: 0 300px;
|
||||
box-shadow: 0px 5px 10px #f2f3fb;
|
||||
position: relative;
|
||||
.nav {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.line {
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
.select {
|
||||
color: #526aff;
|
||||
.line {
|
||||
background: #526aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-09 09:29:29
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-13 15:21:26
|
||||
* @Description: 算法详情 算法试用
|
||||
-->
|
||||
<template>
|
||||
<div class="algorithm-on-trial" v-if="flag">
|
||||
<detals-title title="算法试用" type="PROBATION"></detals-title>
|
||||
<div class="main">
|
||||
<div class="iframe-box">
|
||||
<iframe :src="onTrial" width="100%" height="440"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const flag = ref(true)
|
||||
const onTrial = ref('')
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '试用地址'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
onTrial.value = obj.attrValue
|
||||
}
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
let obj = val.infoList.filter((item) => item.attrType === '试用地址')[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
onTrial.value = obj.attrValue
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.algorithm-on-trial {
|
||||
padding: 80px 300px 60px;
|
||||
.main {
|
||||
margin-top: 40px;
|
||||
iframe {
|
||||
border: none;
|
||||
}
|
||||
.iframe-box {
|
||||
width: 100%;
|
||||
height: 440px;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,184 +0,0 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 11:56:28
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-13 15:29:27
|
||||
* @Description: 算法详情页头部
|
||||
-->
|
||||
<template>
|
||||
<div class="algorithm-top-details">
|
||||
<div class="left">
|
||||
<div class="top">
|
||||
<span class="name">{{ props.dataList.name }}</span>
|
||||
<span class="label">{{ props.dataList.type }}</span>
|
||||
<span class="label">{{ props.dataList.shareType }}</span>
|
||||
<span class="label">{{ props.dataList.shareCondition }}</span>
|
||||
<!-- <span class="label">免费</span> -->
|
||||
</div>
|
||||
<div class="main">
|
||||
<div>应用领域：{{ applicationArea }}</div>
|
||||
<div>
|
||||
{{ props.dataList.description }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom" v-if="props.dataList.id">
|
||||
<a-button type="primary" @click="toView()">
|
||||
<template #icon><form-outlined /></template>
|
||||
申请使用
|
||||
</a-button>
|
||||
<a-button type="primary" @click="addShoppingCart()">
|
||||
<template #icon><shopping-cart-outlined /></template>
|
||||
加入购物车
|
||||
</a-button>
|
||||
<a-button type="primary" @click="goTOCollection()">收藏</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { FormOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue'
|
||||
import { defineProps, ref, watch } from 'vue'
|
||||
import { scInsert } from '@/api/personalCenter'
|
||||
import { sgcInsert } from '@/api/home'
|
||||
import { useRouter } from 'vue-router'
|
||||
import mybus from '@/myplugins/mybus'
|
||||
import { message } from 'ant-design-vue'
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const router = useRouter()
|
||||
const applicationArea = ref('')
|
||||
// 加入申购车
|
||||
const addShoppingCart = () => {
|
||||
console.log('加入申购车==================>', props.dataList)
|
||||
sgcInsert({
|
||||
delFlag: '0',
|
||||
resourceId: props.dataList.id,
|
||||
// userId: userId.value,
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
message.success('添加申购车成功！')
|
||||
mybus.emit('getSgcNum')
|
||||
})
|
||||
}
|
||||
// 立即申请
|
||||
function toView() {
|
||||
// window.open(newpage.href, '_blank')
|
||||
router.push({
|
||||
path: '/apply',
|
||||
query: {
|
||||
name: props.dataList.name,
|
||||
resourceId: [props.dataList.id],
|
||||
},
|
||||
})
|
||||
}
|
||||
// 收藏
|
||||
const goTOCollection = () => {
|
||||
console.log('收藏===================》', props.dataList)
|
||||
scInsert([{ resourceId: props.dataList.id }]).then((res) => {
|
||||
console.log(res)
|
||||
message.success('收藏成功')
|
||||
})
|
||||
}
|
||||
if (props.dataList.infoList) {
|
||||
applicationArea.value = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '应用领域'
|
||||
)[0].attrValue
|
||||
}
|
||||
watch(
|
||||
() => props.dataList,
|
||||
(val) => {
|
||||
if (val) {
|
||||
applicationArea.value = props.dataList.infoList.filter(
|
||||
(val) => val.attrType === '应用领域'
|
||||
)[0].attrValue
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.algorithm-top-details {
|
||||
height: 600px;
|
||||
padding: 180px 0 0;
|
||||
background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.left {
|
||||
width: 700px;
|
||||
color: #fff;
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
.name {
|
||||
max-width: 330px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 40px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.label {
|
||||
padding: 1px 10px;
|
||||
margin-right: 10px;
|
||||
border-radius: 13px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
}
|
||||
.main {
|
||||
margin-top: 20px;
|
||||
font-size: 18px;
|
||||
line-height: 34px;
|
||||
& > div:nth-of-type(1) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
& > div:nth-of-type(2) {
|
||||
max-height: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
.ant-btn {
|
||||
height: 50px;
|
||||
margin-right: 20px;
|
||||
background: #ff8b55;
|
||||
border-radius: 6px;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.ant-btn:nth-of-type(1) {
|
||||
width: 180px;
|
||||
}
|
||||
.ant-btn:nth-of-type(2) {
|
||||
width: 220px;
|
||||
}
|
||||
.ant-btn:nth-of-type(3) {
|
||||
width: 145px;
|
||||
background: #fff;
|
||||
color: #526aff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 580px;
|
||||
height: 400px;
|
||||
background: url('~@/assets/detailsAll/sf_right_bg.png') no-repeat;
|
||||
background-size: 100%;
|
||||
margin-top: -40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,270 +0,0 @@
|
|||
<template>
|
||||
<!-- 使用方式 -->
|
||||
<div class="usage-mode" v-if="flag">
|
||||
<div class="tltle">
|
||||
<DetalsTitle
|
||||
:title="dataFrom.title"
|
||||
:type="dataFrom.englishTitle"
|
||||
></DetalsTitle>
|
||||
</div>
|
||||
<div class="content" v-for="item in dataFrom.content" :key="item.title">
|
||||
<div class="content-left">
|
||||
<div class="left">
|
||||
<div class="content-left-title">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.titleSon }}</span>
|
||||
</div>
|
||||
<div class="content-left-content">
|
||||
<p>
|
||||
<span>{{ item.link.name }}</span>
|
||||
<span>{{ item.link.value }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>{{ item.postMethod.name }}</span>
|
||||
<span>{{ item.postMethod.value }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div @click="technical()">技术文档</div>
|
||||
<div>新手指引</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="content-right-title">{{ item.contact }}</div>
|
||||
<div class="content-right-content">
|
||||
<p>
|
||||
<span>{{ item.facilitator.name }}</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.facilitator.value }}</template>
|
||||
<span>{{ item.facilitator.value }}</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
<p>
|
||||
<span>{{ item.people.name }}</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.people.value }}</template>
|
||||
<span>{{ item.people.value }}</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
<p>
|
||||
<span>{{ item.phone.name }}</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ item.phone.value }}</template>
|
||||
<span>{{ item.phone.value }}</span>
|
||||
</a-tooltip>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
|
||||
import { ref, defineProps, watch } from 'vue'
|
||||
let dataFrom = ref({
|
||||
title: '使用方式',
|
||||
englishTitle: 'USAGE',
|
||||
content: [
|
||||
{
|
||||
title: '技术对接',
|
||||
titleSon: '调用接口',
|
||||
link: {
|
||||
name: '接口地址：',
|
||||
value: 'http://localhost:9999/#/details?id=1532278256619307010',
|
||||
},
|
||||
postMethod: {
|
||||
name: '请求方式：',
|
||||
value: 'POST',
|
||||
},
|
||||
contact: '联系厂商：',
|
||||
facilitator: { name: '服务商：', value: '科大讯飞' },
|
||||
people: { name: '联系人：', value: '李四' },
|
||||
phone: {
|
||||
name: '联系电话：',
|
||||
value: '12345678901',
|
||||
},
|
||||
},
|
||||
],
|
||||
link: '',
|
||||
})
|
||||
//数据初始化
|
||||
const props = defineProps({
|
||||
dataList: { type: Object, default: null },
|
||||
})
|
||||
const flag = ref(true)
|
||||
if (props.dataList.infoList) {
|
||||
let obj = props.dataList.infoList.filter(
|
||||
(item) => item.attrType === '技术文档'
|
||||
)[0]
|
||||
if (!obj) {
|
||||
flag.value = false
|
||||
} else {
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
dataFrom.value.content[0].link.value = props.dataList.apiUrl
|
||||
// eslint-disable-next-line vue/no-setup-props-destructure
|
||||
dataFrom.value.content[0].postMethod.value = props.dataList.apiMethodType
|
||||
console.log('dataList', props.dataList)
|
||||
props.dataList.infoList.map((item) => {
|
||||
if (item.attrType === '使用方式') {
|
||||
dataFrom.value.content[0].titleSon = item.attrValue
|
||||
} else if (item.attrType === '服务商') {
|
||||
dataFrom.value.content[0].facilitator.value = item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商联系人') {
|
||||
dataFrom.value.content[0].people.value = item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商联系电话') {
|
||||
dataFrom.value.content[0].phone.value = item.attrValue || '--'
|
||||
} else if (item.attrType === '技术文档') {
|
||||
dataFrom.value.link = item.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].link.value = val.apiUrl
|
||||
dataFrom.value.content[0].postMethod.value = val.apiMethodType
|
||||
console.log('dataList', val)
|
||||
val.infoList.map((item) => {
|
||||
if (item.attrType === '使用方式') {
|
||||
dataFrom.value.content[0].titleSon = item.attrValue
|
||||
} else if (item.attrType === '服务商') {
|
||||
dataFrom.value.content[0].facilitator.value =
|
||||
item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商联系人') {
|
||||
dataFrom.value.content[0].people.value = item.attrValue || '--'
|
||||
} else if (item.attrType === '服务商联系电话') {
|
||||
dataFrom.value.content[0].phone.value = item.attrValue || '--'
|
||||
} else if (item.attrType === '技术文档') {
|
||||
dataFrom.value.link = item.attrValue || '--'
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
function technical() {
|
||||
console.log('dataFrom.value.link', dataFrom.value.link)
|
||||
window.open(
|
||||
window.SITE_CONFIG.previewUrl +
|
||||
'hisense_office/onlinePreview?url=' +
|
||||
btoa(encodeURI(dataFrom.value.link))
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.usage-mode {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 80px 0;
|
||||
.content {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
.content-left {
|
||||
height: 150px;
|
||||
width: 620px;
|
||||
background: linear-gradient(to right, #7184fc, #94a3fc);
|
||||
border-radius: 10px;
|
||||
margin-right: 60px;
|
||||
box-shadow: 0px 5px 15px rgba(82, 106, 255, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 35px;
|
||||
.left {
|
||||
.content-left-title {
|
||||
font-size: 26px;
|
||||
line-height: 26px;
|
||||
color: #212956;
|
||||
margin-bottom: 20px;
|
||||
span:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.content-left-content {
|
||||
width: 420px;
|
||||
font-size: 20px;
|
||||
color: rgba(33, 41, 86, 0.8);
|
||||
line-height: 20px;
|
||||
p {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
div {
|
||||
height: 40px;
|
||||
width: 130px;
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
color: #526aff;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
div:first-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-right {
|
||||
height: 150px;
|
||||
width: 620px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(113, 132, 252, 0.4),
|
||||
rgba(148, 163, 252, 0.4)
|
||||
);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 5px 15px rgba(82, 106, 255, 0.4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 0 30px;
|
||||
.content-right-title {
|
||||
font-size: 26px;
|
||||
line-height: 26px;
|
||||
color: #212956;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.content-right-content {
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
color: rgba(33, 41, 86, 0.8);
|
||||
line-height: 20px;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 10px;
|
||||
p {
|
||||
// width: 160px;
|
||||
height: 20px;
|
||||
display: -webkit-box;
|
||||
// overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-right: 15px;
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-08 15:40:04
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-08 15:40:37
|
||||
* @Description: 算法详情页头部标题
|
||||
-->
|
||||
<template>
|
||||
<div class="top">
|
||||
<span class="left"></span>
|
||||
{{ props.title }}
|
||||
<span class="right"></span>
|
||||
</div>
|
||||
<div class="bottom">{{ props.type }}</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { defineProps } from 'vue'
|
||||
const props = defineProps({
|
||||
title: { type: String, default: '' },
|
||||
type: { type: String, default: '' },
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 38px;
|
||||
line-height: 38px;
|
||||
span {
|
||||
width: 224px;
|
||||
height: 16px;
|
||||
}
|
||||
.left {
|
||||
background: url('~@/assets/detailsAll/sf_video_left.png') no-repeat;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.right {
|
||||
background: url('~@/assets/detailsAll/sf_video_right.png') no-repeat;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
color: #999;
|
||||
margin-top: 15px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,229 +0,0 @@
|
|||
<!-- 图片文字识别 -->
|
||||
<template>
|
||||
<div class="evaluate3">
|
||||
<div class="bottom-main">
|
||||
<div class="top">
|
||||
<div>
|
||||
<div class="title">图片识别</div>
|
||||
<div class="box">
|
||||
<a-image
|
||||
:width="510"
|
||||
:height="340"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
/>
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
name="file"
|
||||
:action="uploadUrl"
|
||||
:headers="headers"
|
||||
:showUploadList="false"
|
||||
@change="handleChange"
|
||||
maxCount="1"
|
||||
>
|
||||
<a-button>
|
||||
<upload-outlined></upload-outlined>
|
||||
上传图片
|
||||
</a-button>
|
||||
</a-upload>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">识别结果</div>
|
||||
<div class="box">
|
||||
<div class="bg bg1"></div>
|
||||
<div class="bg bg2"></div>
|
||||
<div class="bg bg3"></div>
|
||||
<div class="bg bg4"></div>
|
||||
<div class="top-left">
|
||||
<a-menu v-model:selectedKeys="menuOpenKeys2" mode="horizontal">
|
||||
<a-menu-item key="全文还原">
|
||||
<template #icon>
|
||||
<mail-outlined />
|
||||
</template>
|
||||
全文还原
|
||||
</a-menu-item>
|
||||
<a-menu-item key="识别结果">
|
||||
<template #icon>
|
||||
<mail-outlined />
|
||||
</template>
|
||||
识别结果
|
||||
</a-menu-item>
|
||||
<a-menu-item key="json返回">
|
||||
<template #icon>
|
||||
<mail-outlined />
|
||||
</template>
|
||||
json返回
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
|
||||
<div v-if="menuOpenKeys2[0] === '识别结果'" class="scene">
|
||||
<div>{{ imageResult }}</div>
|
||||
</div>
|
||||
<div v-if="menuOpenKeys2[0] === '全文还原'" class="scene">
|
||||
<div>{{ imageResult0 }}</div>
|
||||
</div>
|
||||
<div v-if="menuOpenKeys2[0] === 'json返回'" class="scene">
|
||||
<div>{{ imageResult1 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="bottom">
|
||||
<a-button @click="checkImage()">检测</a-button>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
// import { paddleocr } from '@/api/file'
|
||||
// const responseUrl = ref('')
|
||||
const imageResult = ref('')
|
||||
const imageResult0 = ref('')
|
||||
const imageResult1 = ref('')
|
||||
const menuOpenKeys2 = ref(['全文还原'])
|
||||
// const checkImage = () => {
|
||||
// getUrlBase64(responseUrl.value, 'png', (base64) => {
|
||||
// console.log('1111111', base64)
|
||||
// const param = {
|
||||
// img: base64.split('base64,')[1],
|
||||
// }
|
||||
// paddleocr(param).then((res) => {
|
||||
// // wordValue.value = res.data
|
||||
// console.log('1111', res.data)
|
||||
// // imageResult.value = res.data.output
|
||||
// // imageResult0.value = res.data.output
|
||||
// // imageResult1.value = res.data.output
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
// const getUrlBase64 = (url, ext, callback) => {
|
||||
// var canvas = document.createElement('canvas') //创建canvas DOM元素
|
||||
// var ctx = canvas.getContext('2d')
|
||||
// var img = new Image()
|
||||
// img.crossOrigin = 'Anonymous'
|
||||
// img.src = url
|
||||
// img.onload = function () {
|
||||
// canvas.height = img.height //指定画板的高度,自定义
|
||||
// canvas.width = img.width //指定画板的宽度，自定义
|
||||
// ctx.drawImage(img, 0, 0, img.width, img.height) //参数可自定义
|
||||
// var dataURL = canvas.toDataURL('image/' + ext)
|
||||
// callback.call(this, dataURL) //回掉函数获取Base64编码
|
||||
// canvas = null
|
||||
// }
|
||||
// }
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.evaluate3 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// background: rgba(0, 88, 225, 0.06);
|
||||
padding: 20px;
|
||||
:deep(.ant-menu-horizontal) {
|
||||
display: flex;
|
||||
justify-content: unset;
|
||||
}
|
||||
.bottom-main {
|
||||
display: block;
|
||||
.top {
|
||||
display: flex;
|
||||
height: 85%;
|
||||
background: unset;
|
||||
& > div:nth-of-type(1) {
|
||||
width: 510px;
|
||||
.ant-btn {
|
||||
width: 120px;
|
||||
height: 44px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
background: #0b138b;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
top: 270px;
|
||||
left: 350px;
|
||||
}
|
||||
}
|
||||
& > div:nth-of-type(2) {
|
||||
margin-left: 45px;
|
||||
flex: 1;
|
||||
}
|
||||
& > div > .title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
& > div > .box {
|
||||
height: 340px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
.bg {
|
||||
width: 58px;
|
||||
height: 54px;
|
||||
background: pink;
|
||||
position: absolute;
|
||||
}
|
||||
.bg1 {
|
||||
background: url('~@/assets/detailsAll/sf_bg1.png') no-repeat;
|
||||
background-size: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.bg2 {
|
||||
background: url('~@/assets/detailsAll/sf_bg2.png') no-repeat;
|
||||
background-size: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.bg3 {
|
||||
background: url('~@/assets/detailsAll/sf_bg3.png') no-repeat;
|
||||
background-size: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.bg4 {
|
||||
background: url('~@/assets/detailsAll/sf_bg4.png') no-repeat;
|
||||
background-size: 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.top-left {
|
||||
margin-left: 20px;
|
||||
width: 700px;
|
||||
padding-top: 20px;
|
||||
.scene {
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
font-size: 18px;
|
||||
div {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
background: unset;
|
||||
padding: 0;
|
||||
.ant-btn {
|
||||
margin-left: 20px;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
font-size: 18px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,195 +0,0 @@
|
|||
<!-- 文字识别 -->
|
||||
<template>
|
||||
<div class="evaluate3">
|
||||
<div class="bottom-main">
|
||||
<div class="top">
|
||||
<div>
|
||||
<div class="title">文字识别</div>
|
||||
<div class="box">
|
||||
<div>
|
||||
<a-textarea
|
||||
v-model:value="wordValue"
|
||||
width="510"
|
||||
placeholder="请输入需要识别的文本内容"
|
||||
:rows="8"
|
||||
/>
|
||||
</div>
|
||||
<a-button @click="correctWord()">确认上传</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">识别结果</div>
|
||||
<div class="box">
|
||||
<div class="bg bg1"></div>
|
||||
<div class="bg bg2"></div>
|
||||
<div class="bg bg3"></div>
|
||||
<div class="bg bg4"></div>
|
||||
<div class="top-left">
|
||||
<div class="text">
|
||||
<p>错误内容： {{ errorWord }}</p>
|
||||
<p>错误位置： {{ errorWordIndex }}</p>
|
||||
<p>识别内容： {{ errorWordContent }}</p>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="bottom">
|
||||
<a-button @click="checkImage()">检测</a-button>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { correct } from '@/api/file'
|
||||
const wordValue = ref('')
|
||||
const errorWord = ref('')
|
||||
const errorWordIndex = ref('')
|
||||
const errorWordContent = ref('')
|
||||
const correctWord = () => {
|
||||
const param = {
|
||||
sentence: wordValue.value,
|
||||
}
|
||||
correct(param).then((res) => {
|
||||
// wordContent.value = res.data.data
|
||||
Object.keys(res.data.data).forEach((key) => {
|
||||
console.log(key)
|
||||
errorWord.value = key
|
||||
})
|
||||
Object.values(res.data.data).forEach((val) => {
|
||||
console.log(val)
|
||||
errorWordIndex.value = val.ix
|
||||
errorWordContent.value = val.value
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.evaluate3 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// background: rgba(0, 88, 225, 0.06);
|
||||
padding: 20px;
|
||||
:deep(.ant-menu-horizontal) {
|
||||
display: flex;
|
||||
justify-content: unset;
|
||||
}
|
||||
.bottom-main {
|
||||
display: block;
|
||||
.top {
|
||||
display: flex;
|
||||
height: 85%;
|
||||
background: unset;
|
||||
& > div:nth-of-type(1) {
|
||||
width: 510px;
|
||||
.ant-btn {
|
||||
width: 120px;
|
||||
height: 44px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
background: #0b138b;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
position: absolute;
|
||||
top: 270px;
|
||||
left: 350px;
|
||||
}
|
||||
}
|
||||
& > div:nth-of-type(2) {
|
||||
margin-left: 45px;
|
||||
flex: 1;
|
||||
}
|
||||
& > div > .title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
& > div > .box {
|
||||
height: 340px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
.bg {
|
||||
width: 58px;
|
||||
height: 54px;
|
||||
background: pink;
|
||||
position: absolute;
|
||||
}
|
||||
.bg1 {
|
||||
background: url('~@/assets/detailsAll/sf_bg1.png') no-repeat;
|
||||
background-size: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.bg2 {
|
||||
background: url('~@/assets/detailsAll/sf_bg2.png') no-repeat;
|
||||
background-size: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.bg3 {
|
||||
background: url('~@/assets/detailsAll/sf_bg3.png') no-repeat;
|
||||
background-size: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.bg4 {
|
||||
background: url('~@/assets/detailsAll/sf_bg4.png') no-repeat;
|
||||
background-size: 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
:deep(.ant-image-img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.top-left {
|
||||
width: 700px;
|
||||
.text {
|
||||
width: 720px;
|
||||
height: 340px;
|
||||
padding: 60px 50px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.scene {
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
font-size: 18px;
|
||||
div {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
background: unset;
|
||||
padding: 0;
|
||||
.ant-btn {
|
||||
margin-left: 20px;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
font-size: 18px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
resize: none;
|
||||
width: 510px;
|
||||
height: 340px;
|
||||
font-size: 18px;
|
||||
padding: 50px 30px;
|
||||
background: #f2f5fa;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,7 @@
|
|||
<template>
|
||||
<div
|
||||
class="home-header"
|
||||
:class="[
|
||||
select !== 'home' || scrollTop > 500 ? 'white' : '',
|
||||
props.showView === 'algorithm-details' ? 'blue' : '',
|
||||
]"
|
||||
:class="select !== 'home' || scrollTop > 500 ? 'white' : ''"
|
||||
>
|
||||
<div class="name">城市云脑能力管理中心</div>
|
||||
<div
|
||||
|
|
@ -24,19 +21,19 @@
|
|||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="2069"
|
||||
width="40"
|
||||
height="40"
|
||||
width="0.4rem"
|
||||
height="0.4rem"
|
||||
@click="goToSgc"
|
||||
>
|
||||
<path
|
||||
d="M384 832v85.333333h-85.333333v-85.333333h85.333333z m405.333333 0v85.333333h-85.333333v-85.333333h85.333333zM240.32 185.002667l24.149333 140.928h633.173334L835.285333 746.666667h-563.626666l-85.333334-497.685334H94.485333v-64h145.834667z m583.104 204.928H275.434667L325.632 682.666667h454.464l43.328-292.736z"
|
||||
:fill="props.showView === 'algorithm-details' ? '#fff' : '#1296db'"
|
||||
fill="#1296db"
|
||||
p-id="2070"
|
||||
></path>
|
||||
</svg>
|
||||
<!-- <a-avatar shape="square" size="large" /> -->
|
||||
</a-badge>
|
||||
<a-badge :count="mynoticeNum" style="margin-left: 20px">
|
||||
<a-badge :count="mynoticeNum" style="margin-left: 0.2rem">
|
||||
<svg
|
||||
t="1654051054113"
|
||||
class="icon2"
|
||||
|
|
@ -44,18 +41,18 @@
|
|||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="2187"
|
||||
width="35"
|
||||
height="35"
|
||||
width="0.35rem"
|
||||
height="0.35rem"
|
||||
>
|
||||
<path
|
||||
d="M544 161.536a330.666667 330.666667 0 0 1 298.666667 329.130667h-0.341334c0.213333 1.493333 0.341333 2.986667 0.341334 4.565333v219.434667h39.68a32 32 0 0 1 0 64h-212.053334a160 160 0 0 1-316.586666 0H141.909333a32 32 0 1 1 0-64h39.424v-219.434667c0-1.578667 0.128-3.072 0.341334-4.565333H181.333333a330.666667 330.666667 0 0 1 298.666667-329.130667V128a32 32 0 1 1 64 0v33.536z m-298.666667 553.130667h533.333334v-219.434667c0-1.578667 0.128-3.072 0.341333-4.565333h-0.341333a266.666667 266.666667 0 1 0-533.333334 0h-0.341333c0.213333 1.493333 0.341333 2.986667 0.341333 4.565333v219.434667z m359.765334 64H418.901333a96 96 0 0 0 186.197334 0z"
|
||||
:fill="props.showView === 'algorithm-details' ? '#fff' : '#1296db'"
|
||||
fill="#1296db"
|
||||
p-id="2188"
|
||||
></path>
|
||||
</svg>
|
||||
<!-- <a-avatar shape="square" size="large" /> -->
|
||||
</a-badge>
|
||||
<div class="mynotice" v-show="mynoticeFlag">
|
||||
<div class="mynotice" v-show="mynoticeFlag && mynoticeNum > 0">
|
||||
<a-list item-layout="horizontal" :data-source="mynoticeData">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
|
|
@ -87,7 +84,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue'
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { recordRoute } from '@/config'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { getUser, mynotice, mynoticeRead } from '@/api/home'
|
||||
|
|
@ -110,9 +107,6 @@
|
|||
const select = ref(router.currentRoute.value.name)
|
||||
const mynoticeFlag = ref(false)
|
||||
const mynoticeData = ref([])
|
||||
const props = defineProps({
|
||||
showView: { type: String, default: '' },
|
||||
})
|
||||
// 获取用户信息
|
||||
getUser().then((res) => {
|
||||
user.value = res.data.data
|
||||
|
|
@ -178,7 +172,7 @@
|
|||
//scrollTop就是触发滚轮事件时滚轮的高度
|
||||
scrollTop.value =
|
||||
document.documentElement.scrollTop || document.body.scrollTop
|
||||
// console.log('滚动距离' + scrollTop.value)
|
||||
console.log('滚动距离' + scrollTop.value)
|
||||
}
|
||||
mybus.on('getSgcNum', () => {
|
||||
getSgcTotal().then((res) => {
|
||||
|
|
@ -219,26 +213,22 @@
|
|||
getMynotice()
|
||||
const mynoticeDom = document.querySelector('.icon2')
|
||||
const mynotice = document.querySelector('.mynotice')
|
||||
if (mynoticeDom) {
|
||||
mynoticeDom.addEventListener('mouseover', () => {
|
||||
mynoticeFlag.value = true
|
||||
document.documentElement.style.overflow = 'hidden'
|
||||
})
|
||||
mynoticeDom.addEventListener('mouseout', () => {
|
||||
mynoticeFlag.value = false
|
||||
document.documentElement.style.overflow = 'scroll'
|
||||
})
|
||||
}
|
||||
if (mynotice) {
|
||||
mynotice.addEventListener('mouseover', () => {
|
||||
mynoticeFlag.value = true
|
||||
document.documentElement.style.overflow = 'hidden'
|
||||
})
|
||||
mynotice.addEventListener('mouseout', () => {
|
||||
mynoticeFlag.value = false
|
||||
document.documentElement.style.overflow = 'scroll'
|
||||
})
|
||||
}
|
||||
mynoticeDom.addEventListener('mouseover', () => {
|
||||
mynoticeFlag.value = true
|
||||
document.documentElement.style.overflow = 'hidden'
|
||||
})
|
||||
mynoticeDom.addEventListener('mouseout', () => {
|
||||
mynoticeFlag.value = false
|
||||
document.documentElement.style.overflow = 'scroll'
|
||||
})
|
||||
mynotice.addEventListener('mouseover', () => {
|
||||
mynoticeFlag.value = true
|
||||
document.documentElement.style.overflow = 'hidden'
|
||||
})
|
||||
mynotice.addEventListener('mouseout', () => {
|
||||
mynoticeFlag.value = false
|
||||
document.documentElement.style.overflow = 'scroll'
|
||||
})
|
||||
mybus.on('getSgcNum', () => {
|
||||
getSgcTotal().then((res) => {
|
||||
sgcNum.value = res.data.data.count
|
||||
|
|
@ -253,29 +243,37 @@
|
|||
src: url('~@/assets/newHome/font/header-typeface.ttf');
|
||||
}
|
||||
.home-header {
|
||||
height: 64px;
|
||||
height: 0.64rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 190px;
|
||||
padding: 0 1.9rem;
|
||||
background-color: rgba(0, 0, 25, 0.7);
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
top: 0;
|
||||
:deep(.ant-badge-count) {
|
||||
min-width: 0.2rem;
|
||||
height: 0.2rem;
|
||||
padding: 0 0.06rem;
|
||||
font-size: 0.12rem;
|
||||
line-height: 0.2rem;
|
||||
border-radius: 0.1rem;
|
||||
}
|
||||
div {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
.name {
|
||||
font-size: 22px;
|
||||
font-size: 0.22rem;
|
||||
font-family: header-typeface;
|
||||
margin-right: 20px;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
.nav {
|
||||
width: 120px;
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
width: 1.2rem;
|
||||
height: 0.64rem;
|
||||
line-height: 0.64rem;
|
||||
text-align: center;
|
||||
}
|
||||
.nav:hover {
|
||||
|
|
@ -288,32 +286,32 @@
|
|||
color: #fff !important;
|
||||
}
|
||||
.info {
|
||||
width: 200px;
|
||||
margin-left: 20px;
|
||||
width: 2rem;
|
||||
margin-left: 0.2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 10px;
|
||||
width: 0.3rem;
|
||||
height: 0.3rem;
|
||||
border-radius: 0.1rem;
|
||||
background: url('~@/assets/newHome/user.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
span {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-left: 8px;
|
||||
margin-right: 6px;
|
||||
font-size: 16px;
|
||||
height: 0.3rem;
|
||||
line-height: 0.3rem;
|
||||
margin-left: 0.08rem;
|
||||
margin-right: 0.06rem;
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
.name {
|
||||
max-width: 75px;
|
||||
max-width: 0.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.out {
|
||||
cursor: pointer;
|
||||
padding: 0 16px;
|
||||
border-left: 1px solid #666;
|
||||
padding: 0 0.16rem;
|
||||
border-left: 0.01rem solid #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -331,65 +329,42 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.blue {
|
||||
position: absolute;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(15, 90, 253, 0.8),
|
||||
rgba(36, 25, 248, 0.8)
|
||||
);
|
||||
.name {
|
||||
color: #fff;
|
||||
}
|
||||
.nav {
|
||||
color: #fff;
|
||||
}
|
||||
.nav:hover {
|
||||
background: #fff;
|
||||
color: #0058e1;
|
||||
}
|
||||
.info {
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mynotice {
|
||||
width: 250px;
|
||||
height: 300px;
|
||||
width: 2.5rem;
|
||||
height: 3rem;
|
||||
background: #eee;
|
||||
border-radius: 5px;
|
||||
border-radius: 0.05rem;
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
right: 310px;
|
||||
top: 0.45rem;
|
||||
right: 3.1rem;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.mynotice::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
:deep(.ant-list-item) {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-bottom: 0.01rem solid #ccc;
|
||||
}
|
||||
:deep(.ant-list-item-meta-title) {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
padding: 0 0.05rem;
|
||||
a {
|
||||
width: 150px;
|
||||
width: 1.5rem;
|
||||
// 超出显示...
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
button {
|
||||
width: 70px;
|
||||
height: 25px;
|
||||
width: 0.7rem;
|
||||
height: 0.25rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
span {
|
||||
font-size: 10px;
|
||||
font-size: 0.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="apply-container">
|
||||
<home-header :showView="showView"></home-header>
|
||||
<details-view v-if="showView === 'details-view'"></details-view>
|
||||
<algorithm-details
|
||||
v-else-if="showView === 'algorithm-details'"
|
||||
></algorithm-details>
|
||||
<home-header></home-header>
|
||||
<details-view></details-view>
|
||||
<ability-to-recommend-bottom></ability-to-recommend-bottom>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -16,7 +13,6 @@
|
|||
import { defineComponent, reactive, ref } from 'vue'
|
||||
import DetailsView from './components/DetailsView.vue'
|
||||
import AbilityToRecommendBottom from '@/views/home/components/AbilityToRecommendBottom'
|
||||
import AlgorithmDetails from '@/views/detailsAll/AlgorithmDetails'
|
||||
|
||||
export default defineComponent({
|
||||
name: '',
|
||||
|
|
@ -25,7 +21,6 @@
|
|||
HomeHeader,
|
||||
DetailsView,
|
||||
AbilityToRecommendBottom,
|
||||
AlgorithmDetails,
|
||||
},
|
||||
setup() {
|
||||
const formState = reactive({
|
||||
|
|
@ -62,11 +57,10 @@
|
|||
label: '交通运输局',
|
||||
},
|
||||
])
|
||||
const showView = ref('algorithm-details')
|
||||
|
||||
return {
|
||||
formState,
|
||||
options,
|
||||
showView,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -57,68 +57,16 @@
|
|||
<p></p>
|
||||
<p>需求申请</p>
|
||||
</div>
|
||||
<div @click="showModal">
|
||||
<div @click="toApply()">
|
||||
<p></p>
|
||||
<p>能力上架</p>
|
||||
<!-- <a-button type="primary" >Open Modal</a-button> -->
|
||||
<a-modal
|
||||
v-model:visible="visible"
|
||||
@ok="handleOk"
|
||||
class="shangjia-class"
|
||||
@cancel="handlecancel"
|
||||
>
|
||||
<div class="ant-modal-title" id="vcDialogTitle1">
|
||||
<div class="showBg"></div>
|
||||
能力上架申请
|
||||
</div>
|
||||
<div class="ability-to-type">
|
||||
<div class="title">能力类型选择</div>
|
||||
<div class="content">
|
||||
<div
|
||||
v-for="item in abilityToType"
|
||||
:key="item"
|
||||
@click="abilityToTypeFunction(item)"
|
||||
:class="
|
||||
abilityToTypeFunctionData == item
|
||||
? 'ability-to-type-down'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="component-type"
|
||||
v-if="abilityToTypeFunctionData == '组件服务'"
|
||||
>
|
||||
<div class="title">组件类型选择</div>
|
||||
<div class="content">
|
||||
<!-- <a-checkbox-group
|
||||
v-model:value="value1"
|
||||
name="checkboxgroup"
|
||||
:options="componentType"
|
||||
/> -->
|
||||
<a-radio-group v-model:value="componentTypeValue">
|
||||
<a-radio
|
||||
@click="componentTypeValueFunction(item)"
|
||||
v-for="item in componentType"
|
||||
:key="item"
|
||||
:value="item"
|
||||
>
|
||||
{{ item }}
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { gongZuoZhuangTai } from '@/api/home.js'
|
||||
import { ref, watch } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
const store = useStore()
|
||||
|
|
@ -131,61 +79,6 @@
|
|||
// require('../../../assets/newHome/three.png'),
|
||||
// require('../../../assets/newHome/four.png'),
|
||||
// ])
|
||||
//能力上架弹窗
|
||||
function handlecancel() {
|
||||
abilityToTypeFunctionData.value = '组件服务'
|
||||
componentTypeValue.value = ''
|
||||
}
|
||||
let abilityToTypeFunctionData = ref('组件服务')
|
||||
function abilityToTypeFunction(item) {
|
||||
abilityToTypeFunctionData.value = item
|
||||
}
|
||||
let abilityToType = ref(['组件服务', '应用资源'])
|
||||
let componentType = ref([
|
||||
'智能算法',
|
||||
'GIS图层',
|
||||
'开发组件',
|
||||
'办公组件',
|
||||
'业务组件',
|
||||
'其他',
|
||||
])
|
||||
const visible = ref(false)
|
||||
const showModal = () => {
|
||||
visible.value = true
|
||||
}
|
||||
let componentTypeValueOld = ref('')
|
||||
function componentTypeValueFunction(item) {
|
||||
debugger
|
||||
if (componentTypeValueOld.value != item) {
|
||||
componentTypeValue.value = item
|
||||
componentTypeValueOld.value = item
|
||||
} else {
|
||||
componentTypeValue.value = ''
|
||||
}
|
||||
}
|
||||
let componentTypeValue = ref('')
|
||||
const handleOk = (e) => {
|
||||
let snum = ref({})
|
||||
if (abilityToTypeFunctionData.value == '组件服务') {
|
||||
snum.value = {
|
||||
abilityToType: abilityToTypeFunctionData.value,
|
||||
componentTypeValue: componentTypeValue.value,
|
||||
}
|
||||
} else {
|
||||
snum.value = {
|
||||
abilityToType: abilityToTypeFunctionData.value,
|
||||
}
|
||||
}
|
||||
const applypage = router.resolve({
|
||||
path: '/nenglishangjia', // 跳转的页面路由
|
||||
query: snum.value,
|
||||
})
|
||||
window.open(applypage.href, '_blank')
|
||||
visible.value = false
|
||||
abilityToTypeFunctionData.value = '组件服务'
|
||||
componentTypeValue.value = ''
|
||||
console.log(e)
|
||||
}
|
||||
const getList = () => {
|
||||
const params = {
|
||||
limit: 4,
|
||||
|
|
@ -202,12 +95,16 @@
|
|||
const newpage = router.resolve({
|
||||
path: '/addApplication', // 跳转的页面路由
|
||||
})
|
||||
const applypage = router.resolve({
|
||||
path: '/nenglishangjia', // 跳转的页面路由
|
||||
})
|
||||
const toView = () => {
|
||||
// debugger
|
||||
window.open(newpage.href, '_blank')
|
||||
}
|
||||
// const toApply = () => {
|
||||
// window.open(applypage.href, '_blank')
|
||||
// }
|
||||
const toApply = () => {
|
||||
window.open(applypage.href, '_blank')
|
||||
}
|
||||
getList()
|
||||
// dataList.value.map((item, index) => {
|
||||
// dataList.value[index].tupian = tupain.value[index]
|
||||
|
|
@ -236,174 +133,81 @@
|
|||
},
|
||||
})
|
||||
}
|
||||
watch(abilityToTypeFunctionData, () => {
|
||||
componentTypeValue.value = ''
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.shangjia-class {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -260px;
|
||||
margin-top: -144px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
.ant-radio-inner {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
.ant-radio-inner::after {
|
||||
background-color: unset;
|
||||
background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.ant-modal-content {
|
||||
border-radius: 10px;
|
||||
.ability-to-type,
|
||||
.component-type {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
.title {
|
||||
white-space: nowrap;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 26px;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
.ant-radio-group {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ability-to-type {
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
div {
|
||||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
width: 90px;
|
||||
height: 26px;
|
||||
border-radius: 13px;
|
||||
color: #333333;
|
||||
background: #f5f5f5;
|
||||
border: 1px #cccccc solid;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
.ability-to-type-down {
|
||||
background: #0087ff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-modal-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.ant-modal-footer {
|
||||
border: 0;
|
||||
text-align: center;
|
||||
padding-bottom: 20px;
|
||||
button {
|
||||
margin-right: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
.showBg {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background: url('~@/assets/home/shenqing.png') no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.work-dynamics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-bottom: 80px;
|
||||
padding-top: 78px;
|
||||
padding-bottom: 0.8rem;
|
||||
padding-top: 0.78rem;
|
||||
.title {
|
||||
font-size: 30px;
|
||||
font-size: 0.3rem;
|
||||
font-family: 'convergence-typeface';
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
margin-bottom: 0.32rem;
|
||||
.title-son {
|
||||
width: 34px;
|
||||
height: 3px;
|
||||
width: 0.34rem;
|
||||
height: 0.03rem;
|
||||
background: #0058e1;
|
||||
border-radius: 1px;
|
||||
margin-top: 18px;
|
||||
border-radius: 0.01rem;
|
||||
margin-top: 0.18rem;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 1300px;
|
||||
height: 480px;
|
||||
width: 13rem;
|
||||
height: 4.8rem;
|
||||
display: flex;
|
||||
padding-left: 20px;
|
||||
padding-left: 0.2rem;
|
||||
.content-empty {
|
||||
height: 220px;
|
||||
padding-top: 49px;
|
||||
height: 2.2rem;
|
||||
padding-top: 0.49rem;
|
||||
}
|
||||
}
|
||||
.content > div {
|
||||
background: #f3f5f9;
|
||||
border: #eaedf2 1px solid;
|
||||
border: #eaedf2 0.01rem solid;
|
||||
}
|
||||
.content > div:hover {
|
||||
border-radius: 2px;
|
||||
border: 1px solid #0058e1;
|
||||
box-shadow: 0px 8px 20px rgba(0, 88, 225, 0.3);
|
||||
border-radius: 0.02rem;
|
||||
border: 0.01rem solid #0058e1;
|
||||
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
|
||||
}
|
||||
.content-miaoshui {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 20px;
|
||||
padding-top: 0.2rem;
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: 0.1rem;
|
||||
.content-miaoshui-title {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
font-size: 18px;
|
||||
padding-left: 0.05rem;
|
||||
padding-right: 0.05rem;
|
||||
font-size: 0.18rem;
|
||||
font-weight: bold;
|
||||
height: 30px;
|
||||
height: 0.3rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 0.12rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
.content-miaoshui-content {
|
||||
height: 120px;
|
||||
width: 298px;
|
||||
margin: 12px 10px 10px 10px;
|
||||
height: 1.2rem;
|
||||
width: 2.98rem;
|
||||
margin: 0.12rem 0.1rem 0.1rem 0.1rem;
|
||||
font-family: text-typeface;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.2rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 6;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 0.12rem;
|
||||
word-break: break-all;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -413,18 +217,20 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: bottom;
|
||||
margin-right: 16px;
|
||||
margin-left: 16px;
|
||||
margin-right: 0.16rem;
|
||||
margin-left: 0.16rem;
|
||||
font-size: 0.12rem;
|
||||
div:first-child {
|
||||
margin-left: 16px;
|
||||
margin-left: 0.16rem;
|
||||
}
|
||||
}
|
||||
.shijain-content-bootom {
|
||||
margin-right: 16px;
|
||||
width: 80px;
|
||||
height: 24px;
|
||||
margin-right: 0.16rem;
|
||||
width: 0.8rem;
|
||||
height: 0.24rem;
|
||||
line-height: 0.24rem;
|
||||
text-align: center;
|
||||
border: 1px solid #0058e1;
|
||||
border: 0.01rem solid #0058e1;
|
||||
cursor: pointer;
|
||||
color: #0058e1;
|
||||
}
|
||||
|
|
@ -432,103 +238,105 @@
|
|||
background: rgba(0, 88, 225, 0.3);
|
||||
}
|
||||
.content > div > div {
|
||||
height: 240px;
|
||||
height: 2.4rem;
|
||||
width: 100%;
|
||||
}
|
||||
.one {
|
||||
height: 240px;
|
||||
height: 2.4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-size: 100%;
|
||||
padding-top: 15px;
|
||||
padding-top: 0.15rem;
|
||||
.shijain {
|
||||
margin-top: 20px;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
:deep(.ant-imag) {
|
||||
text-align: center;
|
||||
}
|
||||
:deep(.ant-image-img) {
|
||||
height: 210px;
|
||||
height: 2.1rem;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 298px;
|
||||
max-width: 2.98rem;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: 24px;
|
||||
font-size: 16px;
|
||||
width: 100px;
|
||||
margin-top: 40px;
|
||||
height: 0.24rem;
|
||||
font-size: 0.16rem;
|
||||
width: 1rem;
|
||||
margin-top: 0.4rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
.gengduo {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-left: 0.04rem;
|
||||
width: 0.1rem;
|
||||
height: 0.1rem;
|
||||
background: url('~@/assets/newHome/gd2.png') no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
.bottom:hover {
|
||||
border-radius: 2px;
|
||||
border-radius: 0.02rem;
|
||||
background-color: rgba(1, 102, 255, 0.1);
|
||||
}
|
||||
.content > div {
|
||||
height: 480px;
|
||||
width: 310px;
|
||||
margin-right: 20px;
|
||||
height: 4.8rem;
|
||||
width: 3.1rem;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
.fixedmount {
|
||||
height: 150px;
|
||||
height: 1.5rem;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 256px;
|
||||
right: 190px;
|
||||
bottom: 2.56rem;
|
||||
right: 1.9rem;
|
||||
z-index: 10;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.fixedmount div {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 4px;
|
||||
border: 1px #94aac9 solid;
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
border-radius: 0.04rem;
|
||||
border: 0.01rem #94aac9 solid;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 13px;
|
||||
padding-top: 0.13rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
background: #e3edfc;
|
||||
}
|
||||
.fixedmount div p:nth-child(2) {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
bottom: 0rem;
|
||||
height: 0.14rem;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.14rem;
|
||||
color: #000000;
|
||||
// margin-top: 8px;
|
||||
// margin-top: .08rem;
|
||||
}
|
||||
.fixedmount div:nth-child(1) p:nth-child(1) {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 0.24rem;
|
||||
width: 0.24rem;
|
||||
background: url('~@/assets/home/shenqing.png') no-repeat;
|
||||
background-size: cover;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
.fixedmount div:nth-child(2) p:nth-child(1) {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 0.24rem;
|
||||
width: 0.24rem;
|
||||
background: url('~@/assets/home/shangjia.png') no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,890 @@
|
|||
<!--
|
||||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-06-01 17:49:38
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-06-13 14:55:22
|
||||
* @Description: 能力上架
|
||||
-->
|
||||
<template>
|
||||
<div class="the-new-release">
|
||||
<div class="neglishengqingbiaodan">
|
||||
<home-header></home-header>
|
||||
<algorithm v-if="type === 'algorithm'"></algorithm>
|
||||
<application v-else-if="type === 'application'"></application>
|
||||
<div id="apply-container">
|
||||
<div v-if="tijiaochenggong" :key="showKey">
|
||||
<div class="nennglititle">能力上架申请表单</div>
|
||||
<div class="Tab">
|
||||
<span class="leixing">能力类型</span>
|
||||
<a-radio-group v-model:value="value">
|
||||
<a-radio
|
||||
v-model:value="item.idname"
|
||||
v-for="item in leixing"
|
||||
:key="item"
|
||||
@change="leixingTab(item)"
|
||||
:disabled="resId"
|
||||
>
|
||||
{{ item.name }}
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<div
|
||||
v-for="item in propertyField"
|
||||
:key="item"
|
||||
class="apply-container-father"
|
||||
>
|
||||
<div class="title">{{ item.name }}</div>
|
||||
<div
|
||||
class="content"
|
||||
v-if="item.name != '必填信息' && item.name != '服务接口信息'"
|
||||
>
|
||||
<a-form-item
|
||||
:label="itemchild.name"
|
||||
v-for="itemchild in item.children"
|
||||
:key="itemchild.name"
|
||||
>
|
||||
<a-input
|
||||
v-if="
|
||||
itemchild.children.length < 1 &&
|
||||
itemchild.name != '上传图片' &&
|
||||
itemchild.name != '应用场景一图片' &&
|
||||
itemchild.name != '应用场景二图片' &&
|
||||
itemchild.name != '图片文字识别' &&
|
||||
itemchild.name != '子系统一图片' &&
|
||||
itemchild.name != '子系统二图片' &&
|
||||
itemchild.name != '子系统三图片'
|
||||
"
|
||||
v-model:value="xValue[itemchild.name]"
|
||||
style="width: 200px"
|
||||
:placeholder="'请输入' + itemchild.name"
|
||||
></a-input>
|
||||
<a-select
|
||||
v-if="itemchild.children.length >= 1"
|
||||
v-model:value="xValue[itemchild.name]"
|
||||
style="width: 200px"
|
||||
>
|
||||
<a-select-option
|
||||
v-model:value="itemselect.dictLabel"
|
||||
v-for="itemselect in itemchild.children"
|
||||
:key="itemselect.dictLabel"
|
||||
>
|
||||
{{ itemselect.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-upload
|
||||
v-if="itemchild.name == '上传图片'"
|
||||
v-model:file-list="fileList"
|
||||
:action="`${baseURL}/upload`"
|
||||
list-type="picture-card"
|
||||
@preview="handlePreview"
|
||||
@change="handleChange"
|
||||
>
|
||||
<div v-if="fileList.length < 8">
|
||||
<plus-outlined />
|
||||
<div style="margin-top: 8px">上传图片</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal
|
||||
:visible="previewVisible"
|
||||
:title="previewTitle"
|
||||
:footer="null"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<img alt="example" style="width: 100%" :src="previewImage" />
|
||||
</a-modal>
|
||||
<a-upload
|
||||
v-if="
|
||||
itemchild.name == '应用场景一图片' ||
|
||||
itemchild.name == '子系统一图片'
|
||||
"
|
||||
v-model:file-list="fileListone"
|
||||
:action="`${baseURL}/upload`"
|
||||
list-type="picture-card"
|
||||
@preview="handlePreviewone"
|
||||
@change="handleChangeone"
|
||||
>
|
||||
<div v-if="fileListone.length < 1">
|
||||
<plus-outlined />
|
||||
<div style="margin-top: 8px">上传图片(限一张)</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal
|
||||
:visible="previewVisibleone"
|
||||
:title="previewTitleone"
|
||||
:footer="null"
|
||||
@cancel="handleCancelone"
|
||||
>
|
||||
<img alt="example" style="width: 100%" :src="previewImageone" />
|
||||
</a-modal>
|
||||
<a-upload
|
||||
v-if="
|
||||
itemchild.name == '应用场景二图片' ||
|
||||
itemchild.name == '子系统二图片'
|
||||
"
|
||||
v-model:file-list="fileListtwo"
|
||||
:action="`${baseURL}/upload`"
|
||||
list-type="picture-card"
|
||||
@preview="handlePreviewtwo"
|
||||
@change="handleChangetwo"
|
||||
>
|
||||
<div v-if="fileListtwo.length < 1">
|
||||
<plus-outlined />
|
||||
<div style="margin-top: 8px">上传图片(限一张)</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal
|
||||
:visible="previewVisibletwo"
|
||||
:title="previewTitletwo"
|
||||
:footer="null"
|
||||
@cancel="handleCanceltwo"
|
||||
>
|
||||
<img alt="example" style="width: 100%" :src="previewImagetwo" />
|
||||
</a-modal>
|
||||
<a-upload
|
||||
v-if="
|
||||
itemchild.name == '图片文字识别' ||
|
||||
itemchild.name == '子系统三图片'
|
||||
"
|
||||
v-model:file-list="fileListthree"
|
||||
:action="`${baseURL}/upload`"
|
||||
list-type="picture-card"
|
||||
@preview="handlePreviewthree"
|
||||
@change="handleChangethree"
|
||||
>
|
||||
<div v-if="fileListthree.length < 1">
|
||||
<plus-outlined />
|
||||
<div style="margin-top: 8px">上传图片(限一张)</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal
|
||||
:visible="previewVisiblethree"
|
||||
:title="previewTitlethree"
|
||||
:footer="null"
|
||||
@cancel="handleCancelthree"
|
||||
>
|
||||
<img
|
||||
alt="example"
|
||||
style="width: 100%"
|
||||
:src="previewImagethree"
|
||||
/>
|
||||
</a-modal>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div v-if="item.name == '必填信息' && leixingdemingzi == '组件服务'">
|
||||
<div class="content">
|
||||
<a-form-item
|
||||
label="组件名称"
|
||||
:rules="[{ required: true, message: '请输入组件名称' }]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.name"
|
||||
style="width: 200px"
|
||||
placeholder="请输入组件名称"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="部门联系人"
|
||||
:rules="[{ required: true, message: '请输入部门联系人' }]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.deptContacts"
|
||||
style="width: 200px"
|
||||
placeholder="请输入部门联系人"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="部门联系人电话"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
pattern: /^1[3456789]\d{9}$/,
|
||||
message: '请输入正确的电话号码',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.deptPhone"
|
||||
style="width: 200px"
|
||||
placeholder="请输入部门联系人电话"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="共享条件">
|
||||
<a-select
|
||||
v-model:value="dataList.shareCondition"
|
||||
style="width: 200px"
|
||||
>
|
||||
<a-select-option
|
||||
v-model:value="itemselect.dictLabel"
|
||||
v-for="itemselect in item.children[4].children"
|
||||
:key="itemselect.dictLabel"
|
||||
>
|
||||
{{ itemselect.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="共享类型">
|
||||
<a-select
|
||||
v-model:value="dataList.shareType"
|
||||
style="width: 200px"
|
||||
>
|
||||
<a-select-option
|
||||
v-model:value="itemselect.dictLabel"
|
||||
v-for="itemselect in item.children[5].children"
|
||||
:key="itemselect.dictLabel"
|
||||
>
|
||||
{{ itemselect.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="共享方式"
|
||||
:rules="[{ required: true, message: '请输入共享方式' }]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.shareMode"
|
||||
style="width: 200px"
|
||||
placeholder="请输入共享方式"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<a-form-item
|
||||
label="组件描述"
|
||||
:rules="[{ required: true, message: '请输入应用描述' }]"
|
||||
style="margin-right: 20px"
|
||||
>
|
||||
<a-textarea v-model:value="dataList.description" :rows="4" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.name == '必填信息' && leixingdemingzi == '应用资源'">
|
||||
<div class="content">
|
||||
<a-form-item
|
||||
label="应用名称"
|
||||
:rules="[{ required: true, message: '请输入应用名称' }]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.name"
|
||||
style="width: 200px"
|
||||
placeholder="请输入应用名称"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="部门联系人"
|
||||
:rules="[{ required: true, message: '请输入部门联系人' }]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.deptContacts"
|
||||
style="width: 200px"
|
||||
placeholder="请输入部门联系人"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="部门联系人电话"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
pattern: /^1[3456789]\d{9}$/,
|
||||
message: '请输入正确的电话号码',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.deptPhone"
|
||||
style="width: 200px"
|
||||
placeholder="请输入部门联系人电话"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="共享条件">
|
||||
<a-select
|
||||
v-model:value="dataList.shareCondition"
|
||||
style="width: 200px"
|
||||
>
|
||||
<a-select-option
|
||||
v-model:value="itemselect.dictLabel"
|
||||
v-for="itemselect in item.children[4].children"
|
||||
:key="itemselect.dictLabel"
|
||||
>
|
||||
{{ itemselect.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="共享类型">
|
||||
<a-select
|
||||
v-model:value="dataList.shareType"
|
||||
style="width: 200px"
|
||||
>
|
||||
<a-select-option
|
||||
v-model:value="itemselect.dictLabel"
|
||||
v-for="itemselect in item.children[5].children"
|
||||
:key="itemselect.dictLabel"
|
||||
>
|
||||
{{ itemselect.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="共享方式"
|
||||
:rules="[{ required: true, message: '请输入共享方式' }]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.shareMode"
|
||||
style="width: 200px"
|
||||
placeholder="请输入共享方式"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<a-form-item
|
||||
label="应用描述"
|
||||
:rules="[{ required: true, message: '请输入应用描述' }]"
|
||||
style="margin-right: 20px"
|
||||
>
|
||||
<a-textarea v-model:value="dataList.description" :rows="4" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.name == '服务接口信息'">
|
||||
<div class="content">
|
||||
<a-form-item label="服务接口">
|
||||
<a-input
|
||||
v-model:value="dataList.link"
|
||||
style="width: 200px"
|
||||
placeholder="请输入服务接口"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="接口请求方式">
|
||||
<a-select
|
||||
v-model:value="dataList.apiMethodType"
|
||||
style="width: 200px"
|
||||
>
|
||||
<a-select-option
|
||||
v-model:value="itemselect.dictLabel"
|
||||
v-for="itemselect in item.children[1].children"
|
||||
:key="itemselect.dictLabel"
|
||||
>
|
||||
{{ itemselect.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="访问地址"
|
||||
v-if="leixingdemingzi == '应用资源'"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.apiUrl"
|
||||
style="width: 200px"
|
||||
placeholder="请输入访问地址"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<a-form-item
|
||||
label="应用描述"
|
||||
:rules="[{ required: true, message: '请输入应用描述' }]"
|
||||
style="margin-right: 20px"
|
||||
>
|
||||
<a-textarea v-model:value="dataList.description" :rows="4" />
|
||||
</a-form-item>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<span class="tishi" v-if="xuanze">请先选择上架能力类型</span>
|
||||
<div class="tijiao-quxiao">
|
||||
<a-button type="primary">取消</a-button>
|
||||
<a-button type="primary2" @click="tijiao">提交</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="success" v-else>
|
||||
<div>
|
||||
<img src="../../../assets/home/success.png" alt="" />
|
||||
</div>
|
||||
<p>
|
||||
您已成功申请{{
|
||||
dataList.name || ''
|
||||
}},请耐心等待审批结果，结果会第一时间通知您！
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import Algorithm from '@/views/capacityOnTheShelf/Algorithm'
|
||||
import Application from '@/views/capacityOnTheShelf/Application'
|
||||
import { ref } from 'vue'
|
||||
const type = ref('algorithm')
|
||||
window.sessionStorage.setItem('preview', JSON.stringify({}))
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
shangjiainsert,
|
||||
shangjiaapply,
|
||||
getCategoryTree,
|
||||
getCategoryTreePage,
|
||||
} from '@/api/personalCenter'
|
||||
import {
|
||||
getUser,
|
||||
getUserInfo,
|
||||
selectOne,
|
||||
updateRes,
|
||||
relaunch,
|
||||
} from '@/api/home'
|
||||
import { baseURL } from '@/config'
|
||||
import { message } from 'ant-design-vue'
|
||||
const router = useRouter()
|
||||
const showKey = ref(0)
|
||||
const xValue = ref([])
|
||||
const leixing = [
|
||||
// { name: '基础设施', idname: 1 },
|
||||
// { name: '数据资源', idname: 2 },
|
||||
{ name: '应用资源', idname: 3 },
|
||||
{ name: '组件服务', idname: 4 },
|
||||
// { name: '知识库', idname: 5 },
|
||||
]
|
||||
let leixingdemingzi = ref('应用资源')
|
||||
const value = ref(3)
|
||||
let xuanze = ref(false)
|
||||
//选择的tab值
|
||||
const leixingTab = (item) => {
|
||||
xuanze.value = false
|
||||
switch (item.name) {
|
||||
case '基础设施':
|
||||
leixingdemingzi.value = '基础设施'
|
||||
userxin()
|
||||
break
|
||||
case '数据资源':
|
||||
leixingdemingzi.value = '数据资源'
|
||||
userxin()
|
||||
break
|
||||
case '应用资源':
|
||||
leixingdemingzi.value = '应用资源'
|
||||
userxin()
|
||||
break
|
||||
case '组件服务':
|
||||
leixingdemingzi.value = '组件服务'
|
||||
userxin()
|
||||
break
|
||||
case '知识库':
|
||||
leixingdemingzi.value = '知识库'
|
||||
userxin()
|
||||
break
|
||||
}
|
||||
}
|
||||
const resId = ref('')
|
||||
const taskId = ref('')
|
||||
let tijiaochenggong = ref('true')
|
||||
const submitFlag = ref(true)
|
||||
//上传图片
|
||||
function getBase64(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
// reader.readAsDataURL(file)
|
||||
console.log('file', file)
|
||||
reader.onload = () => resolve(reader.result)
|
||||
|
||||
reader.onerror = (error) => reject(error)
|
||||
})
|
||||
}
|
||||
const previewVisible = ref(false)
|
||||
const previewImage = ref('')
|
||||
const previewTitle = ref('')
|
||||
const fileList = ref([])
|
||||
const handleCancel = () => {
|
||||
previewVisible.value = false
|
||||
previewTitle.value = '上传成功'
|
||||
}
|
||||
const handleChange = (item) => {
|
||||
if (item.file.response) {
|
||||
console.log('上传图片', item)
|
||||
dataList.value.infoList.map((items, index) => {
|
||||
if (items.attrType.search('上传图片') != -1) {
|
||||
if (dataList.value.infoList[index].attrValue == '') {
|
||||
dataList.value.infoList[index].attrValue += item.file.response.data
|
||||
} else {
|
||||
dataList.value.infoList[index].attrValue +=
|
||||
';' + item.file.response.data
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const handlePreview = async (file) => {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64(file.originFileObj)
|
||||
}
|
||||
previewImage.value = file.url || file.preview
|
||||
|
||||
previewVisible.value = true
|
||||
previewTitle.value = '上传成功'
|
||||
console.log('previewImage.value', previewImage.value)
|
||||
}
|
||||
//应用场景一图片上传&&子系统一图片
|
||||
const previewVisibleone = ref(false)
|
||||
const previewImageone = ref('')
|
||||
const previewTitleone = ref('')
|
||||
const fileListone = ref([])
|
||||
const handleCancelone = () => {
|
||||
previewVisibleone.value = false
|
||||
previewTitleone.value = '上传成功'
|
||||
}
|
||||
const handleChangeone = (item) => {
|
||||
if (item.file.response) {
|
||||
console.log('上传图片', item)
|
||||
dataList.value.infoList.map((items, index) => {
|
||||
if (
|
||||
items.attrType.search('应用场景一图片') != -1 ||
|
||||
items.attrType.search('子系统一图片') != -1
|
||||
) {
|
||||
dataList.value.infoList[index].attrValue = item.file.response.data
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const handlePreviewone = async (file) => {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64(file.originFileObj)
|
||||
}
|
||||
previewImageone.value = file.url || file.preview
|
||||
|
||||
previewVisibleone.value = true
|
||||
previewTitleone.value = '上传成功'
|
||||
console.log('previewImage.value', previewImage.value)
|
||||
}
|
||||
//应用场景二图片上传&&子系统二图片
|
||||
const previewVisibletwo = ref(false)
|
||||
const previewImagetwo = ref('')
|
||||
const previewTitletwo = ref('')
|
||||
const fileListtwo = ref([])
|
||||
const handleCanceltwo = () => {
|
||||
previewVisibletwo.value = false
|
||||
previewTitletwo.value = '上传成功'
|
||||
}
|
||||
const handleChangetwo = (item) => {
|
||||
if (item.file.response) {
|
||||
console.log('上传图片', item)
|
||||
dataList.value.infoList.map((items, index) => {
|
||||
if (
|
||||
items.attrType.search('应用场景二图片') != -1 ||
|
||||
items.attrType.search('子系统二图片') != -1
|
||||
) {
|
||||
dataList.value.infoList[index].attrValue = item.file.response.data
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const handlePreviewtwo = async (file) => {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64(file.originFileObj)
|
||||
}
|
||||
previewImagetwo.value = file.url || file.preview
|
||||
|
||||
previewVisibletwo.value = true
|
||||
previewTitletwo.value = '上传成功'
|
||||
console.log('previewImage.value', previewImage.value)
|
||||
}
|
||||
//图片文字识别上传&&子系统三图片
|
||||
const previewVisiblethree = ref(false)
|
||||
const previewImagethree = ref('')
|
||||
const previewTitlethree = ref('')
|
||||
const fileListthree = ref([])
|
||||
const handleCancelthree = () => {
|
||||
previewVisiblethree.value = false
|
||||
previewTitlethree.value = '上传成功'
|
||||
}
|
||||
const handleChangethree = (item) => {
|
||||
if (item.file.response) {
|
||||
console.log('上传图片', item)
|
||||
dataList.value.infoList.map((items, index) => {
|
||||
if (
|
||||
items.attrType.search('图片文字识别') != -1 ||
|
||||
items.attrType.search('子系统三图片') != -1
|
||||
) {
|
||||
dataList.value.infoList[index].attrValue = item.file.response.data
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const handlePreviewthree = async (file) => {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64(file.originFileObj)
|
||||
}
|
||||
previewImagethree.value = file.url || file.preview
|
||||
|
||||
previewVisiblethree.value = true
|
||||
previewTitlethree.value = '上传成功'
|
||||
console.log('previewImage.value', previewImage.value)
|
||||
}
|
||||
//提交表单
|
||||
const tijiao = () => {
|
||||
dataList.value.infoList.map((item, index) => {
|
||||
for (let key in xValue.value) {
|
||||
if (item.attrType == key) {
|
||||
dataList.value.infoList[index].attrValue = xValue.value[key]
|
||||
}
|
||||
}
|
||||
}) //把输入框填写的内容赋值给datalist
|
||||
console.log('xValue.value', xValue.value, dataList.value)
|
||||
if (submitFlag.value) {
|
||||
submitFlag.value = false
|
||||
if (resId.value) {
|
||||
updateRes(dataList.value).then((upres) => {
|
||||
if (upres.data.code == 0) {
|
||||
relaunch({ data: dataList.value, taskId: taskId.value }).then(
|
||||
(res) => {
|
||||
console.log('驳回================>', res)
|
||||
if (res.data.code == 0) {
|
||||
message.success('重新发起流程成功！')
|
||||
submitFlag.value = true
|
||||
window.setTimeout(() => {
|
||||
window.close()
|
||||
}, 1000)
|
||||
} else {
|
||||
message.error('重新发起流程失败！')
|
||||
submitFlag.value = true
|
||||
}
|
||||
}
|
||||
)
|
||||
} else {
|
||||
message.error('数据更新失败！')
|
||||
submitFlag.value = true
|
||||
}
|
||||
})
|
||||
} else {
|
||||
dataList.value.type = leixingdemingzi.value
|
||||
shangjiainsert(dataList.value).then((res) => {
|
||||
const instanceId = res.data.data
|
||||
dataList.value.id = res.data.data
|
||||
getUser().then((res6) => {
|
||||
getUserInfo(res6.data.data.id).then((res2) => {
|
||||
const deptId = res2.data.data.deptId
|
||||
const userId = res2.data.data.id
|
||||
const userName = res2.data.data.realName
|
||||
const params = {
|
||||
instanceId: instanceId,
|
||||
deptId: deptId,
|
||||
userId: userId,
|
||||
userName: userName,
|
||||
resourceDTO: [dataList.value],
|
||||
}
|
||||
shangjiaapply(params).then((res3) => {
|
||||
console.log('res3', res3)
|
||||
if (res3.data.code == 0) {
|
||||
tijiaochenggong.value = !tijiaochenggong.value
|
||||
submitFlag.value = true
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
//获取用户信息
|
||||
const userxin = () => {
|
||||
getUser().then((res) => {
|
||||
dataList.value.deptId = res.data.data.deptId
|
||||
})
|
||||
}
|
||||
//查询属性字段
|
||||
let sumFilterPropertyField = ref([]) //所有字段
|
||||
const getCategoryTrees = () => {
|
||||
getCategoryTree().then((res) => {
|
||||
sumFilterPropertyField.value = res.data.data
|
||||
filterPropertyField(leixingdemingzi.value, res.data.data)
|
||||
})
|
||||
}
|
||||
//筛选属性字段
|
||||
let propertyField = ref([]) //筛选出来的字段
|
||||
let dataList = ref({
|
||||
createDate: '',
|
||||
delFlag: '',
|
||||
deptId: '',
|
||||
description: '',
|
||||
deptPhone: '',
|
||||
deptContacts: '',
|
||||
shareType: '',
|
||||
shareMode: '',
|
||||
shareCondition: '',
|
||||
infoList: [],
|
||||
link: '',
|
||||
name: '',
|
||||
note1: '',
|
||||
note2: '',
|
||||
note3: '',
|
||||
note4: '',
|
||||
note5: '',
|
||||
type: '',
|
||||
updateDate: '',
|
||||
visits: 0,
|
||||
enclosure: '', //附件
|
||||
}) //初始化提交表单的数据
|
||||
function filterPropertyField(name, data) {
|
||||
dataList.value = {
|
||||
createDate: '',
|
||||
delFlag: '',
|
||||
deptId: '',
|
||||
description: '',
|
||||
deptPhone: '',
|
||||
deptContacts: '',
|
||||
shareType: '',
|
||||
shareMode: '',
|
||||
shareCondition: '',
|
||||
infoList: [],
|
||||
link: '',
|
||||
name: '',
|
||||
note1: '',
|
||||
note2: '',
|
||||
note3: '',
|
||||
note4: '',
|
||||
note5: '',
|
||||
type: '',
|
||||
updateDate: '',
|
||||
visits: 0,
|
||||
enclosure: '', //附件
|
||||
} //每次切换tab重新初始化数据
|
||||
fileList.value = []
|
||||
fileListone.value = []
|
||||
fileListtwo.value = []
|
||||
fileListthree.value = []
|
||||
getUser().then((res) => {
|
||||
dataList.value.deptId = res.data.data.deptId
|
||||
}) //每次切换tab重新获取用户所属部门ID
|
||||
xValue.value = []
|
||||
data.map((item) => {
|
||||
if (item.name == name) {
|
||||
propertyField.value = item.children
|
||||
}
|
||||
})
|
||||
//下拉列表接口
|
||||
let infoList = ref({
|
||||
attrType: '',
|
||||
attrValue: '',
|
||||
delFlag: 0,
|
||||
})
|
||||
propertyField.value.map((item, index) => {
|
||||
console.log('xValue.value', xValue.value)
|
||||
//筛选出非必填项与必填项
|
||||
if (item.name != '必填信息') {
|
||||
item.children.map((item2) => {
|
||||
infoList.value = {
|
||||
attrType: '',
|
||||
attrValue: '',
|
||||
delFlag: 0,
|
||||
}
|
||||
infoList.value.attrType = item2.name
|
||||
dataList.value.infoList.push(infoList.value)
|
||||
})
|
||||
}
|
||||
console.log('查看xValue', dataList.value)
|
||||
//筛选出下拉列表
|
||||
item.children.map((item2, index2) => {
|
||||
if (item2.isLinkToDic != 'false') {
|
||||
const params = {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
dictTypeId: item2.linkValue,
|
||||
}
|
||||
getCategoryTreePage(params).then((res) => {
|
||||
propertyField.value[index].children[index2].children =
|
||||
res.data.data.list
|
||||
})
|
||||
console.log('propertyField.value', propertyField.value)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
//监听tab变换调用筛选方法
|
||||
watch(
|
||||
leixingdemingzi,
|
||||
(value) => {
|
||||
filterPropertyField(value, sumFilterPropertyField.value)
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
// 初始化
|
||||
const init = () => {
|
||||
getCategoryTrees()
|
||||
userxin()
|
||||
resId.value = router.currentRoute.value.query.id
|
||||
taskId.value = router.currentRoute.value.query.taskId
|
||||
if (resId.value) {
|
||||
console.log('初始化resId=====================>', resId)
|
||||
selectOne(resId.value).then((res) => {
|
||||
if (res.data.data.type == '组件服务') {
|
||||
leixingTab({ name: '组件服务' })
|
||||
value.value = 4
|
||||
} else if (res.data.data.type == '应用资源') {
|
||||
leixingTab({ name: '应用资源' })
|
||||
value.value = 3
|
||||
}
|
||||
showKey.value++
|
||||
})
|
||||
}
|
||||
}
|
||||
init()
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.the-new-release {
|
||||
background: #f5f7fa;
|
||||
height: 1080px;
|
||||
.neglishengqingbiaodan {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
#apply-container {
|
||||
position: relative;
|
||||
background-color: #f5f8fc;
|
||||
padding-bottom: 70px;
|
||||
height: 100%;
|
||||
// max-height: 2180px;
|
||||
// width: 100%;
|
||||
margin: 130px auto 70px;
|
||||
width: 1190px;
|
||||
padding-left: 20px;
|
||||
// justify-content: space-between;
|
||||
.nennglititle {
|
||||
margin-top: 20px;
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.Tab {
|
||||
margin-left: 20px;
|
||||
font-size: 16px;
|
||||
.leixing {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
.ant-radio-wrapper {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.tishi {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
margin-left: 100px;
|
||||
color: red;
|
||||
}
|
||||
.apply-container-father {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.content {
|
||||
padding-left: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.tijiao-quxiao {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
left: 50%;
|
||||
margin-left: -150px;
|
||||
margin-top: 20px;
|
||||
.ant-btn {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
.success {
|
||||
// position: absolute;
|
||||
margin-top: 300px;
|
||||
margin-bottom: 300px;
|
||||
left: 50%;
|
||||
// margin-left: -240px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,890 +0,0 @@
|
|||
<template>
|
||||
<div class="neglishengqingbiaodan">
|
||||
<home-header></home-header>
|
||||
<div id="apply-container">
|
||||
<div v-if="tijiaochenggong" :key="showKey">
|
||||
<div class="nennglititle">能力上架申请表单</div>
|
||||
<div class="Tab">
|
||||
<span class="leixing">能力类型</span>
|
||||
<a-radio-group v-model:value="value">
|
||||
<a-radio
|
||||
v-model:value="item.idname"
|
||||
v-for="item in leixing"
|
||||
:key="item"
|
||||
@change="leixingTab(item)"
|
||||
:disabled="resId"
|
||||
>
|
||||
{{ item.name }}
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<div
|
||||
v-for="item in propertyField"
|
||||
:key="item"
|
||||
class="apply-container-father"
|
||||
>
|
||||
<div class="title">{{ item.name }}</div>
|
||||
<div
|
||||
class="content"
|
||||
v-if="item.name != '必填信息' && item.name != '服务接口信息'"
|
||||
>
|
||||
<a-form-item
|
||||
:label="itemchild.name"
|
||||
v-for="itemchild in item.children"
|
||||
:key="itemchild.name"
|
||||
>
|
||||
<a-input
|
||||
v-if="
|
||||
itemchild.children.length < 1 &&
|
||||
itemchild.name != '上传图片' &&
|
||||
itemchild.name != '应用场景一图片' &&
|
||||
itemchild.name != '应用场景二图片' &&
|
||||
itemchild.name != '图片文字识别' &&
|
||||
itemchild.name != '子系统一图片' &&
|
||||
itemchild.name != '子系统二图片' &&
|
||||
itemchild.name != '子系统三图片'
|
||||
"
|
||||
v-model:value="xValue[itemchild.name]"
|
||||
style="width: 200px"
|
||||
:placeholder="'请输入' + itemchild.name"
|
||||
></a-input>
|
||||
<a-select
|
||||
v-if="itemchild.children.length >= 1"
|
||||
v-model:value="xValue[itemchild.name]"
|
||||
style="width: 200px"
|
||||
>
|
||||
<a-select-option
|
||||
v-model:value="itemselect.dictLabel"
|
||||
v-for="itemselect in itemchild.children"
|
||||
:key="itemselect.dictLabel"
|
||||
>
|
||||
{{ itemselect.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-upload
|
||||
v-if="itemchild.name == '上传图片'"
|
||||
v-model:file-list="fileList"
|
||||
:action="`${baseURL}/upload`"
|
||||
list-type="picture-card"
|
||||
@preview="handlePreview"
|
||||
@change="handleChange"
|
||||
>
|
||||
<div v-if="fileList.length < 8">
|
||||
<plus-outlined />
|
||||
<div style="margin-top: 8px">上传图片</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal
|
||||
:visible="previewVisible"
|
||||
:title="previewTitle"
|
||||
:footer="null"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<img alt="example" style="width: 100%" :src="previewImage" />
|
||||
</a-modal>
|
||||
<a-upload
|
||||
v-if="
|
||||
itemchild.name == '应用场景一图片' ||
|
||||
itemchild.name == '子系统一图片'
|
||||
"
|
||||
v-model:file-list="fileListone"
|
||||
:action="`${baseURL}/upload`"
|
||||
list-type="picture-card"
|
||||
@preview="handlePreviewone"
|
||||
@change="handleChangeone"
|
||||
>
|
||||
<div v-if="fileListone.length < 1">
|
||||
<plus-outlined />
|
||||
<div style="margin-top: 8px">上传图片(限一张)</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal
|
||||
:visible="previewVisibleone"
|
||||
:title="previewTitleone"
|
||||
:footer="null"
|
||||
@cancel="handleCancelone"
|
||||
>
|
||||
<img alt="example" style="width: 100%" :src="previewImageone" />
|
||||
</a-modal>
|
||||
<a-upload
|
||||
v-if="
|
||||
itemchild.name == '应用场景二图片' ||
|
||||
itemchild.name == '子系统二图片'
|
||||
"
|
||||
v-model:file-list="fileListtwo"
|
||||
:action="`${baseURL}/upload`"
|
||||
list-type="picture-card"
|
||||
@preview="handlePreviewtwo"
|
||||
@change="handleChangetwo"
|
||||
>
|
||||
<div v-if="fileListtwo.length < 1">
|
||||
<plus-outlined />
|
||||
<div style="margin-top: 8px">上传图片(限一张)</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal
|
||||
:visible="previewVisibletwo"
|
||||
:title="previewTitletwo"
|
||||
:footer="null"
|
||||
@cancel="handleCanceltwo"
|
||||
>
|
||||
<img alt="example" style="width: 100%" :src="previewImagetwo" />
|
||||
</a-modal>
|
||||
<a-upload
|
||||
v-if="
|
||||
itemchild.name == '图片文字识别' ||
|
||||
itemchild.name == '子系统三图片'
|
||||
"
|
||||
v-model:file-list="fileListthree"
|
||||
:action="`${baseURL}/upload`"
|
||||
list-type="picture-card"
|
||||
@preview="handlePreviewthree"
|
||||
@change="handleChangethree"
|
||||
>
|
||||
<div v-if="fileListthree.length < 1">
|
||||
<plus-outlined />
|
||||
<div style="margin-top: 8px">上传图片(限一张)</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal
|
||||
:visible="previewVisiblethree"
|
||||
:title="previewTitlethree"
|
||||
:footer="null"
|
||||
@cancel="handleCancelthree"
|
||||
>
|
||||
<img
|
||||
alt="example"
|
||||
style="width: 100%"
|
||||
:src="previewImagethree"
|
||||
/>
|
||||
</a-modal>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div v-if="item.name == '必填信息' && leixingdemingzi == '组件服务'">
|
||||
<div class="content">
|
||||
<a-form-item
|
||||
label="组件名称"
|
||||
:rules="[{ required: true, message: '请输入组件名称' }]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.name"
|
||||
style="width: 200px"
|
||||
placeholder="请输入组件名称"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="部门联系人"
|
||||
:rules="[{ required: true, message: '请输入部门联系人' }]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.deptContacts"
|
||||
style="width: 200px"
|
||||
placeholder="请输入部门联系人"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="部门联系人电话"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
pattern: /^1[3456789]\d{9}$/,
|
||||
message: '请输入正确的电话号码',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.deptPhone"
|
||||
style="width: 200px"
|
||||
placeholder="请输入部门联系人电话"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="共享条件">
|
||||
<a-select
|
||||
v-model:value="dataList.shareCondition"
|
||||
style="width: 200px"
|
||||
>
|
||||
<a-select-option
|
||||
v-model:value="itemselect.dictLabel"
|
||||
v-for="itemselect in item.children[4].children"
|
||||
:key="itemselect.dictLabel"
|
||||
>
|
||||
{{ itemselect.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="共享类型">
|
||||
<a-select
|
||||
v-model:value="dataList.shareType"
|
||||
style="width: 200px"
|
||||
>
|
||||
<a-select-option
|
||||
v-model:value="itemselect.dictLabel"
|
||||
v-for="itemselect in item.children[5].children"
|
||||
:key="itemselect.dictLabel"
|
||||
>
|
||||
{{ itemselect.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="共享方式"
|
||||
:rules="[{ required: true, message: '请输入共享方式' }]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.shareMode"
|
||||
style="width: 200px"
|
||||
placeholder="请输入共享方式"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<a-form-item
|
||||
label="组件描述"
|
||||
:rules="[{ required: true, message: '请输入应用描述' }]"
|
||||
style="margin-right: 20px"
|
||||
>
|
||||
<a-textarea v-model:value="dataList.description" :rows="4" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.name == '必填信息' && leixingdemingzi == '应用资源'">
|
||||
<div class="content">
|
||||
<a-form-item
|
||||
label="应用名称"
|
||||
:rules="[{ required: true, message: '请输入应用名称' }]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.name"
|
||||
style="width: 200px"
|
||||
placeholder="请输入应用名称"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="部门联系人"
|
||||
:rules="[{ required: true, message: '请输入部门联系人' }]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.deptContacts"
|
||||
style="width: 200px"
|
||||
placeholder="请输入部门联系人"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="部门联系人电话"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
pattern: /^1[3456789]\d{9}$/,
|
||||
message: '请输入正确的电话号码',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.deptPhone"
|
||||
style="width: 200px"
|
||||
placeholder="请输入部门联系人电话"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="共享条件">
|
||||
<a-select
|
||||
v-model:value="dataList.shareCondition"
|
||||
style="width: 200px"
|
||||
>
|
||||
<a-select-option
|
||||
v-model:value="itemselect.dictLabel"
|
||||
v-for="itemselect in item.children[4].children"
|
||||
:key="itemselect.dictLabel"
|
||||
>
|
||||
{{ itemselect.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="共享类型">
|
||||
<a-select
|
||||
v-model:value="dataList.shareType"
|
||||
style="width: 200px"
|
||||
>
|
||||
<a-select-option
|
||||
v-model:value="itemselect.dictLabel"
|
||||
v-for="itemselect in item.children[5].children"
|
||||
:key="itemselect.dictLabel"
|
||||
>
|
||||
{{ itemselect.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="共享方式"
|
||||
:rules="[{ required: true, message: '请输入共享方式' }]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.shareMode"
|
||||
style="width: 200px"
|
||||
placeholder="请输入共享方式"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<div>
|
||||
<a-form-item
|
||||
label="应用描述"
|
||||
:rules="[{ required: true, message: '请输入应用描述' }]"
|
||||
style="margin-right: 20px"
|
||||
>
|
||||
<a-textarea v-model:value="dataList.description" :rows="4" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.name == '服务接口信息'">
|
||||
<div class="content">
|
||||
<a-form-item label="服务接口">
|
||||
<a-input
|
||||
v-model:value="dataList.link"
|
||||
style="width: 200px"
|
||||
placeholder="请输入服务接口"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="接口请求方式">
|
||||
<a-select
|
||||
v-model:value="dataList.apiMethodType"
|
||||
style="width: 200px"
|
||||
>
|
||||
<a-select-option
|
||||
v-model:value="itemselect.dictLabel"
|
||||
v-for="itemselect in item.children[1].children"
|
||||
:key="itemselect.dictLabel"
|
||||
>
|
||||
{{ itemselect.dictLabel }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="访问地址"
|
||||
v-if="leixingdemingzi == '应用资源'"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="dataList.apiUrl"
|
||||
style="width: 200px"
|
||||
placeholder="请输入访问地址"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
</div>
|
||||
<!-- <div>
|
||||
<a-form-item
|
||||
label="应用描述"
|
||||
:rules="[{ required: true, message: '请输入应用描述' }]"
|
||||
style="margin-right: 20px"
|
||||
>
|
||||
<a-textarea v-model:value="dataList.description" :rows="4" />
|
||||
</a-form-item>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<span class="tishi" v-if="xuanze">请先选择上架能力类型</span>
|
||||
<div class="tijiao-quxiao">
|
||||
<a-button type="primary">取消</a-button>
|
||||
<a-button type="primary2" @click="tijiao">提交</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="success" v-else>
|
||||
<div>
|
||||
<img src="../../../assets/home/success.png" alt="" />
|
||||
</div>
|
||||
<p>
|
||||
您已成功申请{{
|
||||
dataList.name || ''
|
||||
}},请耐心等待审批结果，结果会第一时间通知您！
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import HomeHeader from '@/views/home/components/header'
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import {
|
||||
shangjiainsert,
|
||||
shangjiaapply,
|
||||
getCategoryTree,
|
||||
getCategoryTreePage,
|
||||
} from '@/api/personalCenter'
|
||||
import {
|
||||
getUser,
|
||||
getUserInfo,
|
||||
selectOne,
|
||||
updateRes,
|
||||
relaunch,
|
||||
} from '@/api/home'
|
||||
import { baseURL } from '@/config'
|
||||
import { message } from 'ant-design-vue'
|
||||
const router = useRouter()
|
||||
const showKey = ref(0)
|
||||
const xValue = ref([])
|
||||
const leixing = [
|
||||
// { name: '基础设施', idname: 1 },
|
||||
// { name: '数据资源', idname: 2 },
|
||||
{ name: '应用资源', idname: 3 },
|
||||
{ name: '组件服务', idname: 4 },
|
||||
// { name: '知识库', idname: 5 },
|
||||
]
|
||||
let leixingdemingzi = ref('应用资源')
|
||||
const value = ref(3)
|
||||
let xuanze = ref(false)
|
||||
//选择的tab值
|
||||
const leixingTab = (item) => {
|
||||
xuanze.value = false
|
||||
switch (item.name) {
|
||||
case '基础设施':
|
||||
leixingdemingzi.value = '基础设施'
|
||||
userxin()
|
||||
break
|
||||
case '数据资源':
|
||||
leixingdemingzi.value = '数据资源'
|
||||
userxin()
|
||||
break
|
||||
case '应用资源':
|
||||
leixingdemingzi.value = '应用资源'
|
||||
userxin()
|
||||
break
|
||||
case '组件服务':
|
||||
leixingdemingzi.value = '组件服务'
|
||||
userxin()
|
||||
break
|
||||
case '知识库':
|
||||
leixingdemingzi.value = '知识库'
|
||||
userxin()
|
||||
break
|
||||
}
|
||||
}
|
||||
const resId = ref('')
|
||||
const taskId = ref('')
|
||||
let tijiaochenggong = ref('true')
|
||||
const submitFlag = ref(true)
|
||||
//上传图片
|
||||
function getBase64(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
// reader.readAsDataURL(file)
|
||||
console.log('file', file)
|
||||
reader.onload = () => resolve(reader.result)
|
||||
|
||||
reader.onerror = (error) => reject(error)
|
||||
})
|
||||
}
|
||||
const previewVisible = ref(false)
|
||||
const previewImage = ref('')
|
||||
const previewTitle = ref('')
|
||||
const fileList = ref([])
|
||||
const handleCancel = () => {
|
||||
previewVisible.value = false
|
||||
previewTitle.value = '上传成功'
|
||||
}
|
||||
const handleChange = (item) => {
|
||||
if (item.file.response) {
|
||||
console.log('上传图片', item)
|
||||
dataList.value.infoList.map((items, index) => {
|
||||
if (items.attrType.search('上传图片') != -1) {
|
||||
if (dataList.value.infoList[index].attrValue == '') {
|
||||
dataList.value.infoList[index].attrValue += item.file.response.data
|
||||
} else {
|
||||
dataList.value.infoList[index].attrValue +=
|
||||
';' + item.file.response.data
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const handlePreview = async (file) => {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64(file.originFileObj)
|
||||
}
|
||||
previewImage.value = file.url || file.preview
|
||||
|
||||
previewVisible.value = true
|
||||
previewTitle.value = '上传成功'
|
||||
console.log('previewImage.value', previewImage.value)
|
||||
}
|
||||
//应用场景一图片上传&&子系统一图片
|
||||
const previewVisibleone = ref(false)
|
||||
const previewImageone = ref('')
|
||||
const previewTitleone = ref('')
|
||||
const fileListone = ref([])
|
||||
const handleCancelone = () => {
|
||||
previewVisibleone.value = false
|
||||
previewTitleone.value = '上传成功'
|
||||
}
|
||||
const handleChangeone = (item) => {
|
||||
if (item.file.response) {
|
||||
console.log('上传图片', item)
|
||||
dataList.value.infoList.map((items, index) => {
|
||||
if (
|
||||
items.attrType.search('应用场景一图片') != -1 ||
|
||||
items.attrType.search('子系统一图片') != -1
|
||||
) {
|
||||
dataList.value.infoList[index].attrValue = item.file.response.data
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const handlePreviewone = async (file) => {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64(file.originFileObj)
|
||||
}
|
||||
previewImageone.value = file.url || file.preview
|
||||
|
||||
previewVisibleone.value = true
|
||||
previewTitleone.value = '上传成功'
|
||||
console.log('previewImage.value', previewImage.value)
|
||||
}
|
||||
//应用场景二图片上传&&子系统二图片
|
||||
const previewVisibletwo = ref(false)
|
||||
const previewImagetwo = ref('')
|
||||
const previewTitletwo = ref('')
|
||||
const fileListtwo = ref([])
|
||||
const handleCanceltwo = () => {
|
||||
previewVisibletwo.value = false
|
||||
previewTitletwo.value = '上传成功'
|
||||
}
|
||||
const handleChangetwo = (item) => {
|
||||
if (item.file.response) {
|
||||
console.log('上传图片', item)
|
||||
dataList.value.infoList.map((items, index) => {
|
||||
if (
|
||||
items.attrType.search('应用场景二图片') != -1 ||
|
||||
items.attrType.search('子系统二图片') != -1
|
||||
) {
|
||||
dataList.value.infoList[index].attrValue = item.file.response.data
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const handlePreviewtwo = async (file) => {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64(file.originFileObj)
|
||||
}
|
||||
previewImagetwo.value = file.url || file.preview
|
||||
|
||||
previewVisibletwo.value = true
|
||||
previewTitletwo.value = '上传成功'
|
||||
console.log('previewImage.value', previewImage.value)
|
||||
}
|
||||
//图片文字识别上传&&子系统三图片
|
||||
const previewVisiblethree = ref(false)
|
||||
const previewImagethree = ref('')
|
||||
const previewTitlethree = ref('')
|
||||
const fileListthree = ref([])
|
||||
const handleCancelthree = () => {
|
||||
previewVisiblethree.value = false
|
||||
previewTitlethree.value = '上传成功'
|
||||
}
|
||||
const handleChangethree = (item) => {
|
||||
if (item.file.response) {
|
||||
console.log('上传图片', item)
|
||||
dataList.value.infoList.map((items, index) => {
|
||||
if (
|
||||
items.attrType.search('图片文字识别') != -1 ||
|
||||
items.attrType.search('子系统三图片') != -1
|
||||
) {
|
||||
dataList.value.infoList[index].attrValue = item.file.response.data
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
const handlePreviewthree = async (file) => {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64(file.originFileObj)
|
||||
}
|
||||
previewImagethree.value = file.url || file.preview
|
||||
|
||||
previewVisiblethree.value = true
|
||||
previewTitlethree.value = '上传成功'
|
||||
console.log('previewImage.value', previewImage.value)
|
||||
}
|
||||
//提交表单
|
||||
const tijiao = () => {
|
||||
dataList.value.infoList.map((item, index) => {
|
||||
for (let key in xValue.value) {
|
||||
if (item.attrType == key) {
|
||||
dataList.value.infoList[index].attrValue = xValue.value[key]
|
||||
}
|
||||
}
|
||||
}) //把输入框填写的内容赋值给datalist
|
||||
console.log('xValue.value', xValue.value, dataList.value)
|
||||
if (submitFlag.value) {
|
||||
submitFlag.value = false
|
||||
if (resId.value) {
|
||||
updateRes(dataList.value).then((upres) => {
|
||||
if (upres.data.code == 0) {
|
||||
relaunch({ data: dataList.value, taskId: taskId.value }).then(
|
||||
(res) => {
|
||||
console.log('驳回================>', res)
|
||||
if (res.data.code == 0) {
|
||||
message.success('重新发起流程成功！')
|
||||
submitFlag.value = true
|
||||
window.setTimeout(() => {
|
||||
window.close()
|
||||
}, 1000)
|
||||
} else {
|
||||
message.error('重新发起流程失败！')
|
||||
submitFlag.value = true
|
||||
}
|
||||
}
|
||||
)
|
||||
} else {
|
||||
message.error('数据更新失败！')
|
||||
submitFlag.value = true
|
||||
}
|
||||
})
|
||||
} else {
|
||||
dataList.value.type = leixingdemingzi.value
|
||||
shangjiainsert(dataList.value).then((res) => {
|
||||
const instanceId = res.data.data
|
||||
dataList.value.id = res.data.data
|
||||
getUser().then((res6) => {
|
||||
getUserInfo(res6.data.data.id).then((res2) => {
|
||||
const deptId = res2.data.data.deptId
|
||||
const userId = res2.data.data.id
|
||||
const userName = res2.data.data.realName
|
||||
const params = {
|
||||
instanceId: instanceId,
|
||||
deptId: deptId,
|
||||
userId: userId,
|
||||
userName: userName,
|
||||
resourceDTO: [dataList.value],
|
||||
}
|
||||
shangjiaapply(params).then((res3) => {
|
||||
console.log('res3', res3)
|
||||
if (res3.data.code == 0) {
|
||||
tijiaochenggong.value = !tijiaochenggong.value
|
||||
submitFlag.value = true
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
//获取用户信息
|
||||
const userxin = () => {
|
||||
getUser().then((res) => {
|
||||
dataList.value.deptId = res.data.data.deptId
|
||||
})
|
||||
}
|
||||
//查询属性字段
|
||||
let sumFilterPropertyField = ref([]) //所有字段
|
||||
const getCategoryTrees = () => {
|
||||
getCategoryTree().then((res) => {
|
||||
sumFilterPropertyField.value = res.data.data
|
||||
filterPropertyField(leixingdemingzi.value, res.data.data)
|
||||
})
|
||||
}
|
||||
//筛选属性字段
|
||||
let propertyField = ref([]) //筛选出来的字段
|
||||
let dataList = ref({
|
||||
createDate: '',
|
||||
delFlag: '',
|
||||
deptId: '',
|
||||
description: '',
|
||||
deptPhone: '',
|
||||
deptContacts: '',
|
||||
shareType: '',
|
||||
shareMode: '',
|
||||
shareCondition: '',
|
||||
infoList: [],
|
||||
link: '',
|
||||
name: '',
|
||||
note1: '',
|
||||
note2: '',
|
||||
note3: '',
|
||||
note4: '',
|
||||
note5: '',
|
||||
type: '',
|
||||
updateDate: '',
|
||||
visits: 0,
|
||||
enclosure: '', //附件
|
||||
}) //初始化提交表单的数据
|
||||
function filterPropertyField(name, data) {
|
||||
dataList.value = {
|
||||
createDate: '',
|
||||
delFlag: '',
|
||||
deptId: '',
|
||||
description: '',
|
||||
deptPhone: '',
|
||||
deptContacts: '',
|
||||
shareType: '',
|
||||
shareMode: '',
|
||||
shareCondition: '',
|
||||
infoList: [],
|
||||
link: '',
|
||||
name: '',
|
||||
note1: '',
|
||||
note2: '',
|
||||
note3: '',
|
||||
note4: '',
|
||||
note5: '',
|
||||
type: '',
|
||||
updateDate: '',
|
||||
visits: 0,
|
||||
enclosure: '', //附件
|
||||
} //每次切换tab重新初始化数据
|
||||
fileList.value = []
|
||||
fileListone.value = []
|
||||
fileListtwo.value = []
|
||||
fileListthree.value = []
|
||||
getUser().then((res) => {
|
||||
dataList.value.deptId = res.data.data.deptId
|
||||
}) //每次切换tab重新获取用户所属部门ID
|
||||
xValue.value = []
|
||||
data.map((item) => {
|
||||
if (item.name == name) {
|
||||
propertyField.value = item.children
|
||||
}
|
||||
})
|
||||
//下拉列表接口
|
||||
let infoList = ref({
|
||||
attrType: '',
|
||||
attrValue: '',
|
||||
delFlag: 0,
|
||||
})
|
||||
propertyField.value.map((item, index) => {
|
||||
console.log('xValue.value', xValue.value)
|
||||
//筛选出非必填项与必填项
|
||||
if (item.name != '必填信息') {
|
||||
item.children.map((item2) => {
|
||||
infoList.value = {
|
||||
attrType: '',
|
||||
attrValue: '',
|
||||
delFlag: 0,
|
||||
}
|
||||
infoList.value.attrType = item2.name
|
||||
dataList.value.infoList.push(infoList.value)
|
||||
})
|
||||
}
|
||||
console.log('查看xValue', dataList.value)
|
||||
//筛选出下拉列表
|
||||
item.children.map((item2, index2) => {
|
||||
if (item2.isLinkToDic != 'false') {
|
||||
const params = {
|
||||
page: 1,
|
||||
limit: 20,
|
||||
dictTypeId: item2.linkValue,
|
||||
}
|
||||
getCategoryTreePage(params).then((res) => {
|
||||
propertyField.value[index].children[index2].children =
|
||||
res.data.data.list
|
||||
})
|
||||
console.log('propertyField.value', propertyField.value)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
//监听tab变换调用筛选方法
|
||||
watch(
|
||||
leixingdemingzi,
|
||||
(value) => {
|
||||
filterPropertyField(value, sumFilterPropertyField.value)
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
// 初始化
|
||||
const init = () => {
|
||||
getCategoryTrees()
|
||||
userxin()
|
||||
resId.value = router.currentRoute.value.query.id
|
||||
taskId.value = router.currentRoute.value.query.taskId
|
||||
if (resId.value) {
|
||||
console.log('初始化resId=====================>', resId)
|
||||
selectOne(resId.value).then((res) => {
|
||||
if (res.data.data.type == '组件服务') {
|
||||
leixingTab({ name: '组件服务' })
|
||||
value.value = 4
|
||||
} else if (res.data.data.type == '应用资源') {
|
||||
leixingTab({ name: '应用资源' })
|
||||
value.value = 3
|
||||
}
|
||||
showKey.value++
|
||||
})
|
||||
}
|
||||
}
|
||||
init()
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.neglishengqingbiaodan {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
#apply-container {
|
||||
position: relative;
|
||||
background-color: #f5f8fc;
|
||||
padding-bottom: 70px;
|
||||
height: 100%;
|
||||
// max-height: 2180px;
|
||||
// width: 100%;
|
||||
margin: 130px auto 70px;
|
||||
width: 1190px;
|
||||
padding-left: 20px;
|
||||
// justify-content: space-between;
|
||||
.nennglititle {
|
||||
margin-top: 20px;
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.Tab {
|
||||
margin-left: 20px;
|
||||
font-size: 16px;
|
||||
.leixing {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
}
|
||||
.ant-radio-wrapper {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.tishi {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
margin-left: 100px;
|
||||
color: red;
|
||||
}
|
||||
.apply-container-father {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.content {
|
||||
padding-left: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.tijiao-quxiao {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
left: 50%;
|
||||
margin-left: -150px;
|
||||
margin-top: 20px;
|
||||
.ant-btn {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
.success {
|
||||
// position: absolute;
|
||||
margin-top: 300px;
|
||||
margin-bottom: 300px;
|
||||
left: 50%;
|
||||
// margin-left: -240px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1 @@
|
|||
{}
|
||||
Loading…
Reference in New Issue