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

Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev

This commit is contained in:
wuhongjian 2022-07-05 17:36:56 +08:00
parent d71dc876f5 6539637031
commit b6942754cd
29 changed files with 1416 additions and 1011 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
back/src/views/modules/ability/bsabilityai.vue
View File

@ -55,12 +55,16 @@
width="50" width="50"
></el-table-column> ></el-table-column>
<af-table-column <af-table-column
:show-overflow-tooltip="true"
width="280"
prop="name" prop="name"
label="组件名称" label="组件名称"
header-align="center" header-align="center"
align="center" align="center"
></af-table-column> ></af-table-column>
<af-table-column <af-table-column
:show-overflow-tooltip="true"
width="300"
v-for="(item, index) in dataList[0].infoList" v-for="(item, index) in dataList[0].infoList"
:key="index" :key="index"
:label="item.attrType" :label="item.attrType"
@ -126,32 +130,32 @@
</template> </template>
<script> <script>
import mixinViewModule from "@/mixins/view-module"; import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from "./bsabilityai-add-or-update"; import AddOrUpdate from './bsabilityai-add-or-update'
import dictionaries from "@/utils/dictionaries"; import dictionaries from '@/utils/dictionaries'
import qs from "qs"; import qs from 'qs'
import RelateApplication from "./bsabilityai-relate-application.vue" import RelateApplication from './bsabilityai-relate-application.vue'
export default { export default {
mixins: [mixinViewModule], mixins: [mixinViewModule],
data() { data () {
return { return {
mixinViewModuleOptions: { mixinViewModuleOptions: {
getDataListURL: "/resource/page", getDataListURL: '/resource/page',
getDataListIsPage: true, getDataListIsPage: true,
exportURL: "/ability/bsabilityai/export", exportURL: '/ability/bsabilityai/export',
deleteURL: "/resource/delete", deleteURL: '/resource/delete',
deleteIsBatch: true, deleteIsBatch: true
}, },
disabled: false, disabled: false,
sceneArr: dictionaries.sceneArr, sceneArr: dictionaries.sceneArr,
fieldArr: dictionaries.fieldArr, fieldArr: dictionaries.fieldArr,
shareFormArr: dictionaries.shareFormArr, shareFormArr: dictionaries.shareFormArr,
dataForm: { dataForm: {
name: "", name: '',
creator: "", creator: '',
delFlag: 0, delFlag: 0,
selectType: 0, selectType: 0,
type: "组件服务", type: '组件服务'
}, },
qp: false, qp: false,
// 关联应用弹窗 // 关联应用弹窗
@ -161,190 +165,193 @@ export default {
responseData: {}, responseData: {},
linkType: '' linkType: ''
} }
}; }
}, },
watch: {}, watch: {},
components: { components: {
AddOrUpdate, AddOrUpdate,
RelateApplication RelateApplication
}, },
created() { created () {
this.dataForm.name = ""; this.dataForm.name = ''
this.dataForm.type = "组件服务"; this.dataForm.type = '组件服务'
}, },
mounted() { mounted () {
window.addEventListener("resize", this.a); window.addEventListener('resize', this.a)
this.fullScreen(); this.fullScreen()
}, },
methods: { methods: {
reset() { reset () {
this.$http this.$http
.get( .get(
this.mixinViewModuleOptions.getDataListURL + this.mixinViewModuleOptions.getDataListURL +
"?" + '?' +
qs.stringify({ qs.stringify({
// order: this.order, // order: this.order,
// orderField: this.orderField, // orderField: this.orderField,
// type: '组件服务', // type: '组件服务',
page: 1, page: 1,
limit: 10, limit: 10,
creator: "", creator: '',
selectType: 0, selectType: 0,
delFlag: 0, delFlag: 0,
type: "组件服务", type: '组件服务',
name: "", name: ''
}) })
) )
.then(({ data: res }) => { .then(({ data: res }) => {
this.dataForm.name = ""; this.dataForm.name = ''
if (res.code !== 0) { if (res.code !== 0) {
this.dataList = []; this.dataList = []
this.total = 0; this.total = 0
return this.$message.error(res.msg); return this.$message.error(res.msg)
} }
this.dataList = this.mixinViewModuleOptions.getDataListIsPage this.dataList = this.mixinViewModuleOptions.getDataListIsPage
? res.data.list ? res.data.list
: res.data; : res.data
this.total = this.mixinViewModuleOptions.getDataListIsPage this.total = this.mixinViewModuleOptions.getDataListIsPage
? res.data.total ? res.data.total
: 0; : 0
if (this.mixinViewModuleOptions.requestCallback) { if (this.mixinViewModuleOptions.requestCallback) {
this.mixinViewModuleOptions.requestCallback(res.data); this.mixinViewModuleOptions.requestCallback(res.data)
} }
this.dataListLoading = false; this.dataListLoading = false
}) })
.catch(() => { .catch(() => {
this.dataListLoading = false; this.dataListLoading = false
}); })
}, },
findValue(list, type) { findValue (list, type) {
const found = list.find((item) => item.attrType === type); const found = list.find((item) => item.attrType === type)
if (found) { if (found) {
return found.attrValue; return found.attrValue
} else { } else {
return "暂无数据"; return '暂无数据'
} }
}, },
showDetail(val) { showDetail (val) {
// this.addOrUpdateHandle(id) // this.addOrUpdateHandle(id)
this.addOrUpdateVisible = true; this.addOrUpdateVisible = true
this.disabled = false; this.disabled = false
console.log("显示数据=============》", val); console.log('显示数据=============》', val)
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.addOrUpdate.UpdateState = false; this.$refs.addOrUpdate.UpdateState = false
this.$refs.addOrUpdate.dataFormShowDetails = val; this.$refs.addOrUpdate.dataFormShowDetails = val
this.$refs.addOrUpdate.init(); this.$refs.addOrUpdate.init()
}); })
this.disabled = true; this.disabled = true
}, },
showDocument(val) { showDocument (val) {
console.log(val); console.log(val)
window.open( window.open(
window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type, window.SITE_CONFIG.frontUrl + '?id=' + val.id + '&&type=' + val.type,
"_blank" '_blank'
); )
}, },
getDataList2(names) { getDataList2 (names) {
if (names != null) { if (names != null) {
this.$http this.$http
.get( .get(
this.mixinViewModuleOptions.getDataListURL + this.mixinViewModuleOptions.getDataListURL +
"?" + '?' +
qs.stringify({ qs.stringify({
// order: this.order, // order: this.order,
// orderField: this.orderField, // orderField: this.orderField,
// type: '组件服务', // type: '组件服务',
pageNum: 1, pageNum: 1,
pageSize: this.limit, pageSize: this.limit,
type: "组件服务", type: '组件服务',
creator: "", creator: '',
selectType: 0, selectType: 0,
delFlag: 0, delFlag: 0,
name: names, name: names
}) })
) )
.then(({ data: res }) => { .then(({ data: res }) => {
console.log("res", res); console.log('res', res)
if (res.code !== 0) { if (res.code !== 0) {
this.dataList = []; this.dataList = []
this.total = 0; this.total = 0
return this.$message.error(res.msg); return this.$message.error(res.msg)
} }
if (res.data.list.length !== 0) { if (res.data.list.length !== 0) {
this.dataList = res.data.list; this.dataList = res.data.list
this.total = this.mixinViewModuleOptions.getDataListIsPage this.total = this.mixinViewModuleOptions.getDataListIsPage
? res.data.total ? res.data.total
: 0; : 0
if (this.mixinViewModuleOptions.requestCallback) { if (this.mixinViewModuleOptions.requestCallback) {
this.mixinViewModuleOptions.requestCallback(res.data); this.mixinViewModuleOptions.requestCallback(res.data)
} }
this.dataListLoading = false; this.dataListLoading = false
} else { } else {
this.$message.error("未查询到相关信息"); this.$message.error('未查询到相关信息')
this.reset(); this.reset()
} }
}) })
.catch(() => { .catch(() => {
this.dataListLoading = false; this.dataListLoading = false
}); })
} else { } else {
this.$message.error("查询信息不能为空"); this.$message.error('查询信息不能为空')
} }
}, },
fullScreen() { fullScreen () {
if (window.outerHeight === screen.availHeight) { if (window.outerHeight === screen.availHeight) {
if (window.outerWidth === screen.availWidth) { if (window.outerWidth === screen.availWidth) {
console.log( console.log(
"全屏1", '全屏1',
window.outerHeight, window.outerHeight,
screen.availHeight, screen.availHeight,
window.outerWidth, window.outerWidth,
screen.availWidth screen.availWidth
); )
this.qp = false; this.qp = false
} else { } else {
console.log( console.log(
"不是全屏2", '不是全屏2',
window.outerHeight, window.outerHeight,
screen.availHeight, screen.availHeight,
window.outerWidth, window.outerWidth,
screen.availWidth screen.availWidth
); )
this.qp = true; this.qp = true
} }
} else { } else {
console.log( console.log(
"不是全屏3", '不是全屏3',
window.outerHeight, window.outerHeight,
screen.availHeight, screen.availHeight,
window.outerWidth, window.outerWidth,
screen.availWidth screen.availWidth
); )
this.qp = true; this.qp = true
} }
}, },
// 点击关联应用按钮 // 点击关联应用按钮
showRelateApplication(row){ showRelateApplication (row) {
this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => { this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
if( res && res.data ) { if (res && res.data) {
this.relateApplicationVisible = true; this.relateApplicationVisible = true
this.relateInfo = { this.relateInfo = {
id: row.id, id: row.id,
responseData: res.data, responseData: res.data,
linkType: '2' linkType: '2'
}; }
} }
}).catch(() => { }) }).catch(() => { })
}, },
// 是否展示关联应用弹窗 // 是否展示关联应用弹窗
handleIsShowRelatePopup(type) { handleIsShowRelatePopup (type) {
this.relateApplicationVisible = type; this.relateApplicationVisible = type
} }
}, }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-tooltip__popper { .el-tooltip__popper {
max-width: 50%; max-width: 50%;
} }
::v-deep .el-table .cell{
width: 200px;
}
</style> </style>

6
back/src/views/modules/ability/bsdataresources.vue
View File

@ -84,7 +84,11 @@ export default {
methods: { methods: {
// 重置 // 重置
resetDataList () { resetDataList () {
this.dataForm = this.noDataForm this.dataForm = {
orderId: '',
status: '',
userId: ''
},
this.page = 1 // 当前页码 this.page = 1 // 当前页码
this.query() this.query()
}, },

2
front/package.json
View File

@ -38,6 +38,7 @@
"pinyin-pro": "^3.8.3", "pinyin-pro": "^3.8.3",
"postprocessing": "^5.3.2", "postprocessing": "^5.3.2",
"remixicon": "^2.5.0", "remixicon": "^2.5.0",
"swiper": "^8.2.6",
"three": "^0.98.0", "three": "^0.98.0",
"three.meshline": "^1.1.0", "three.meshline": "^1.1.0",
"vue": "^3.1.4", "vue": "^3.1.4",
@ -70,6 +71,7 @@
"stylus": "^0.54.5", "stylus": "^0.54.5",
"stylus-loader": "^3.0.2", "stylus-loader": "^3.0.2",
"svg-sprite-loader": "^6.0.9", "svg-sprite-loader": "^6.0.9",
"swiper": "^8.0.0",
"vab-config": "0.0.8", "vab-config": "0.0.8",
"webpackbar": "^5.0.0-3" "webpackbar": "^5.0.0-3"
}, },

BIN
front/src/assets/newHome/newHome-title-bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 22 KiB

10
front/src/main.js
View File

@ -1,8 +1,8 @@
/* /*
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2022-03-29 17:48:03 * @Date: 2022-03-29 17:48:03
* @LastEditors: hisense.wuhongjian * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-10 15:45:34 * @LastEditTime: 2022-07-05 15:04:47
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
*/ */
import { createApp } from 'vue' import { createApp } from 'vue'
@ -45,3 +45,9 @@ app
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component) app.component(key, component)
} }
router.beforeEach((to, from, next) => {
// console.log('跳转路由=========>', to, from, next)
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
next()
})

4
front/src/views/capabilityCloud/components/PlatformOverview.vue
View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-19 10:15:33 * @Date: 2022-06-19 10:15:33
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-19 17:52:04 * @LastEditTime: 2022-07-05 16:11:11
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
--> -->
<template> <template>
@ -134,7 +134,7 @@
}, },
grid: { grid: {
top: '14%', top: '14%',
left: '4%', left: '6%',
right: '5%', right: '5%',
bottom: '12%', bottom: '12%',
containLabel: true, containLabel: true,

2
front/src/views/capacityOnTheShelf/Application.vue
View File

@ -391,7 +391,7 @@
} }
.line { .line {
margin-left: 10px; margin-left: 10px;
width: 140px; width: 280px;
height: 1px; height: 1px;
background: #999; background: #999;
} }

12
front/src/views/detailsAll/AlgorithmDetails.vue
View File

@ -15,12 +15,6 @@
:class="{ fixed: scrollTop >= 600 }" :class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow" :selectNow="selectNow"
></algorithm-navigation> ></algorithm-navigation>
<!-- 算法展示 视频 -->
<algorithm-display
:dataList="dataList.data"
id="algorithm-display"
class="scrollBox"
></algorithm-display>
<!-- 关联能力 --> <!-- 关联能力 -->
<algorithm-associated-ability <algorithm-associated-ability
v-if="!loading" v-if="!loading"
@ -28,6 +22,12 @@
id="algorithm-associated-ability" id="algorithm-associated-ability"
class="scrollBox" class="scrollBox"
></algorithm-associated-ability> ></algorithm-associated-ability>
<!-- 算法展示 视频 -->
<algorithm-display
:dataList="dataList.data"
id="algorithm-display"
class="scrollBox"
></algorithm-display>
<!-- 算法优势 --> <!-- 算法优势 -->
<algorithm-advantage <algorithm-advantage
:dataList="dataList.data" :dataList="dataList.data"

1
front/src/views/detailsAll/ApplicationDetails.vue
View File

@ -163,7 +163,6 @@
} }
queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => { queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[0].dataList = res.data.data associatedComponents.value[0].dataList = res.data.data
debugger
loading.value = false loading.value = false
}) })
}) })

12
front/src/views/detailsAll/DeveloperComponents.vue
View File

@ -16,12 +16,6 @@
:class="{ fixed: scrollTop >= 600 }" :class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow" :selectNow="selectNow"
></developer-navigation> ></developer-navigation>
<!-- 组件展示 视频 -->
<Developer-presentation
:dataList="dataList.data"
id="eveloper-presentation"
class="scrollBox"
></Developer-presentation>
<!-- 关联能力 --> <!-- 关联能力 -->
<developer-associated-ability <developer-associated-ability
v-if="!loading" v-if="!loading"
@ -29,6 +23,12 @@
id="developer-associated-ability" id="developer-associated-ability"
class="scrollBox" class="scrollBox"
></developer-associated-ability> ></developer-associated-ability>
<!-- 组件展示 视频 -->
<Developer-presentation
:dataList="dataList.data"
id="eveloper-presentation"
class="scrollBox"
></Developer-presentation>
<!-- 功能介绍--> <!-- 功能介绍-->
<developer-function-intorduction <developer-function-intorduction
:dataList="dataList.data" :dataList="dataList.data"

54
front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
View File

@ -1,7 +1,10 @@
<template> <template>
<div class="application-associated-ability" v-if="flag"> <div class="application-associated-ability" v-if="flag">
<detals-title title="关联应用" type="ASSOCIATED"></detals-title> <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main"> <div
class="application-associated-ability-main"
v-if="dataFrom[0].dataList.length < 4"
>
<div <div
class="associated-ability-card" class="associated-ability-card"
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList" v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
@ -24,13 +27,53 @@
</div> </div>
</div> </div>
</div> </div>
<div class="application-associated-ability-main" v-else>
<swiper
:slidesPerView="3"
:spaceBetween="30"
:pagination="{ clickable: true }"
:modules="modules"
class="mySwiper"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id"
>
<div
class="associated-ability-card"
@click="switchFunction(dataListitem.id)"
>
<a-tooltip>
<template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
const router = useRouter() const router = useRouter()
const modules = ref([Pagination])
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({ const props = defineProps({
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Array, default: null },
@ -84,15 +127,18 @@
<style lang="less" scoped> <style lang="less" scoped>
.application-associated-ability { .application-associated-ability {
padding-top: 0.8rem; padding-top: 0.8rem;
padding-bottom: 0.8rem; padding-bottom: 0.6rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.application-associated-ability-main { .application-associated-ability-main {
margin-top: 0.4rem; margin-top: 0.4rem;
width: 13.3rem; width: 13.3rem;
display: grid; display: flex;
grid-template-columns: repeat(4, 25%); justify-content: space-around !important;
:deep(.swiper) {
padding-bottom: 0.6rem;
}
.associated-ability-card { .associated-ability-card {
width: 3.2rem; width: 3.2rem;
height: 2.78rem; height: 2.78rem;

6
front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
View File

@ -85,7 +85,7 @@
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
const select = ref('algorithm-display') const select = ref('algorithm-associated-ability')
const selectNav = (key) => { const selectNav = (key) => {
select.value = key select.value = key
@ -128,7 +128,7 @@
) )
if (navList.value.filter((item) => item.name === list.value[0])[0]) { if (navList.value.filter((item) => item.name === list.value[0])[0]) {
select.value = navList.value.filter( select.value = navList.value.filter(
(item) => item.name === list.value[0] (item) => (item.name === '关联应用') | (item.name === list.value[0])
)[0].key )[0].key
} }
console.log('11111111111111111111111111', list.value, navList.value) console.log('11111111111111111111111111', list.value, navList.value)
@ -167,7 +167,7 @@
list.value.push('使用方式') list.value.push('使用方式')
} }
}) })
list.value.push('关联应用') list.value.unshift('关联应用')
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
if (list.value.indexOf(item.name) > -1) { if (list.value.indexOf(item.name) > -1) {

60
front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
View File

@ -1,7 +1,10 @@
<template> <template>
<div class="application-associated-ability" v-if="flag"> <div class="application-associated-ability" v-if="flag">
<detals-title title="关联组件" type="ASSOCIATED"></detals-title> <detals-title title="关联组件" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main"> <div
class="application-associated-ability-main"
v-if="dataFrom[0].dataList.length < 4"
>
<div <div
class="associated-ability-card" class="associated-ability-card"
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList" v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
@ -26,17 +29,58 @@
</div> </div>
</div> </div>
</div> </div>
<div class="application-associated-ability-main" v-else>
<swiper
:slidesPerView="3"
:spaceBetween="30"
:pagination="{ clickable: true }"
:modules="modules"
class="mySwiper"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id"
>
<div
class="associated-ability-card"
@click="switchFunction(dataListitem.id)"
:class="cardFunction(dataFrom[0].dataList)"
>
<div class="icon"></div>
<a-tooltip>
<template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description || '' }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description || '' }}
</div>
</a-tooltip>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({ const props = defineProps({
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Array, default: null },
}) })
const modules = ref([Pagination])
const dataFrom = ref([]) const dataFrom = ref([])
const flag = ref(true) const flag = ref(true)
const oldid = router.currentRoute.value.query.id const oldid = router.currentRoute.value.query.id
@ -91,18 +135,22 @@
<style lang="less" scoped> <style lang="less" scoped>
.application-associated-ability { .application-associated-ability {
padding-top: 0.8rem; padding-top: 0.8rem;
padding-bottom: 0.8rem; padding-bottom: 0.6rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.application-associated-ability-main { .application-associated-ability-main {
margin-top: 0.4rem; margin-top: 0.4rem;
width: 13.3rem; width: 13.3rem;
display: grid; display: flex;
grid-template-columns: repeat(4, 25%); justify-content: space-around;
position: relative;
:deep(.swiper) {
padding-bottom: 0.6rem;
}
.associated-ability-card { .associated-ability-card {
width: 3.2rem; width: 3.2rem;
// height: 2.78rem; height: 2.78rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

8
front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
View File

@ -28,6 +28,10 @@
name: '应用展示', name: '应用展示',
key: 'application-presentation', key: 'application-presentation',
}, },
{
name: '关联组件',
key: 'application-associated-ability',
},
{ {
name: '功能介绍', name: '功能介绍',
key: 'function-introduction', key: 'function-introduction',
@ -36,10 +40,6 @@
// name: '关联组件', // name: '关联组件',
// key: 'application-associated-components', // key: 'application-associated-components',
// }, // },
{
name: '关联组件',
key: 'application-associated-ability',
},
{ {
name: '使用能力', name: '使用能力',
key: 'ability-to-use', key: 'ability-to-use',

31
front/src/views/detailsAll/components/Application/style.css Normal file
View File

@ -0,0 +1,31 @@
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

54
front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
View File

@ -1,7 +1,10 @@
<template> <template>
<div class="application-associated-ability" v-if="flag"> <div class="application-associated-ability" v-if="flag">
<detals-title title="关联应用" type="ASSOCIATED"></detals-title> <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main"> <div
class="application-associated-ability-main"
v-if="dataFrom[0].dataList.length < 4"
>
<div <div
class="associated-ability-card" class="associated-ability-card"
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList" v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
@ -24,13 +27,53 @@
</div> </div>
</div> </div>
</div> </div>
<div class="application-associated-ability-main" v-else>
<swiper
:slidesPerView="3"
:spaceBetween="30"
:pagination="{ clickable: true }"
:modules="modules"
class="mySwiper"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id"
>
<div
class="associated-ability-card"
@click="switchFunction(dataListitem.id)"
>
<a-tooltip>
<template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
const router = useRouter() const router = useRouter()
const modules = ref([Pagination])
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({ const props = defineProps({
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Array, default: null },
@ -84,15 +127,18 @@
<style lang="less" scoped> <style lang="less" scoped>
.application-associated-ability { .application-associated-ability {
padding-top: 0.8rem; padding-top: 0.8rem;
padding-bottom: 0.8rem; padding-bottom: 0.6rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.application-associated-ability-main { .application-associated-ability-main {
margin-top: 0.4rem; margin-top: 0.4rem;
width: 13.3rem; width: 13.3rem;
display: grid; display: flex;
grid-template-columns: repeat(4, 25%); justify-content: space-around;
:deep(.swiper) {
padding-bottom: 0.6rem;
}
.associated-ability-card { .associated-ability-card {
width: 3.2rem; width: 3.2rem;
height: 2.78rem; height: 2.78rem;

40
front/src/views/detailsAll/components/Business/BusinessNavigation.vue
View File

@ -21,13 +21,14 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import { queryPartAppByKeyId2 } from '@/api/home'
// 获取当前路由地址
const router = useRouter()
const keyId = router.currentRoute.value.query.id
const navList = ref([ const navList = ref([
{
name: '关联应用',
key: 'business-associated-ability',
},
{ {
name: '组件展示', name: '组件展示',
key: 'business-presentation', key: 'business-presentation',
@ -61,6 +62,22 @@
}) })
const select = ref('business-presentation') const select = ref('business-presentation')
const list = ref([]) const list = ref([])
// 根据能力id查询是否存在关联应用
if (keyId) {
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
console.log('ressssssss', res)
if (res.data.data.length > 0) {
// 存在关联应用时在导航栏加入关联应用
navList.value.unshift({
name: '关联应用',
key: 'business-associated-ability',
show: true,
})
// list.value.push('关联应用')
console.log('navList', navList)
}
})
}
const selectNav = (key) => { const selectNav = (key) => {
select.value = key select.value = key
console.log(key, select.value) console.log(key, select.value)
@ -69,8 +86,8 @@
if (props.dataList.infoList) { if (props.dataList.infoList) {
list.value = [] list.value = []
let arr = [ let arr = [
'组件视频介绍',
'关联应用', '关联应用',
'组件视频介绍',
'功能介绍', '功能介绍',
'应用场景', '应用场景',
'应用案例', '应用案例',
@ -94,7 +111,7 @@
list.value.push('组件展示') list.value.push('组件展示')
} }
}) })
list.value.push('关联应用') list.value.unshift('关联应用')
list.value.push('使用方式') list.value.push('使用方式')
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
@ -125,8 +142,8 @@
if (val) { if (val) {
list.value = [] list.value = []
let arr = [ let arr = [
'组件视频介绍',
'关联应用', '关联应用',
'组件视频介绍',
'功能介绍', '功能介绍',
'应用场景', '应用场景',
'应用案例', '应用案例',
@ -151,7 +168,7 @@
list.value.push('组件展示') list.value.push('组件展示')
} }
}) })
list.value.push('关联应用') list.value.unshift('关联应用')
list.value.push('使用方式') list.value.push('使用方式')
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
@ -166,10 +183,13 @@
} }
}) })
if (list.value.length > 0) { if (list.value.length > 0) {
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
select.value = navList.value.filter( select.value = navList.value.filter(
(item) => item.name === list.value[0] (item) =>
(item.name === '关联应用') | (item.name === list.value[0])
)[0].key )[0].key
} }
}
console.log('11111111111111111111111111', list.value, navList.value) console.log('11111111111111111111111111', list.value, navList.value)
} }
} }

67
front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
View File

@ -2,10 +2,7 @@
<!-- 使用方式 --> <!-- 使用方式 -->
<div class="usage-mode" v-if="flag"> <div class="usage-mode" v-if="flag">
<div class="tltle"> <div class="tltle">
<DetalsTitle <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
:title="dataFrom.title"
:type="dataFrom.englishTitle"
></DetalsTitle>
</div> </div>
<div class="content" v-for="item in dataFrom.content" :key="item.title"> <div class="content" v-for="item in dataFrom.content" :key="item.title">
<div class="content-left"> <div class="content-left">
@ -30,7 +27,7 @@
<div class="content-right-title">{{ item.contact }}</div> <div class="content-right-title">{{ item.contact }}</div>
<div class="content-right-content"> <div class="content-right-content">
<p> <p>
<span>{{ item.contact }}</span> <span>{{ item.facilitator.name }}</span>
<a-tooltip> <a-tooltip>
<template #title>{{ item.facilitator.value }}</template> <template #title>{{ item.facilitator.value }}</template>
<span>{{ item.facilitator.value }}</span> <span>{{ item.facilitator.value }}</span>
@ -56,7 +53,7 @@
<div class="content-right-title">{{ item.contact2 }}</div> <div class="content-right-title">{{ item.contact2 }}</div>
<div class="content-right-content"> <div class="content-right-content">
<p> <p>
<span>{{ item.contact2 }}</span> <span>{{ item.facilitator2.name }}</span>
<a-tooltip> <a-tooltip>
<template #title>{{ item.facilitator2.value }}</template> <template #title>{{ item.facilitator2.value }}</template>
<span>{{ item.facilitator2.value }}</span> <span>{{ item.facilitator2.value }}</span>
@ -84,10 +81,10 @@
</template> </template>
<script setup> <script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { pinyin } from 'pinyin-pro' import { pinyin } from 'pinyin-pro'
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
let dataFrom = ref({ let dataFrom = ref({
title: '使用方式', title: '使用方式',
englishTitle: 'USAGE', englishTitle: 'USAGE',
content: [ content: [
@ -113,13 +110,13 @@
}, },
}, },
], ],
}) })
//数据初始化 //数据初始化
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
const flag = ref(true) const flag = ref(true)
if (props.dataList.infoList) { if (props.dataList.infoList) {
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => (item) =>
item.attrType === '技术文档' || item.attrType === '技术文档' ||
@ -151,8 +148,8 @@
} }
}) })
} }
} }
watch( watch(
() => props.dataList, () => props.dataList,
(val) => { (val) => {
if (val) { if (val) {
@ -189,8 +186,8 @@
} }
} }
} }
) )
function technical() { function technical() {
// 拼接路径 // 拼接路径
// const type = pinyin(props.dataList.type, { // const type = pinyin(props.dataList.type, {
// pattern: 'initial', // pattern: 'initial',
@ -208,8 +205,8 @@
'hisense_office/onlinePreview?url=' + 'hisense_office/onlinePreview?url=' +
btoa(encodeURI(obj.attrValue)) btoa(encodeURI(obj.attrValue))
) )
} }
function technicalNew() { function technicalNew() {
// 拼接路径 // 拼接路径
// const type = pinyin(props.dataList.type, { // const type = pinyin(props.dataList.type, {
// pattern: 'initial', // pattern: 'initial',
@ -226,23 +223,24 @@
'hisense_office/onlinePreview?url=' + 'hisense_office/onlinePreview?url=' +
btoa(encodeURI(obj.attrValue)) btoa(encodeURI(obj.attrValue))
) )
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.usage-mode { .usage-mode {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0.8rem 0; padding: 0.8rem 0;
.content { .content {
margin-top: 0.3rem; margin-top: 0.3rem;
display: flex; display: flex;
.content-left { .content-left {
height: 1.5rem; height: 1.5rem;
width: 6.2rem; width: 6.2rem;
background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') no-repeat;
no-repeat;
background-position: center; background-position: center;
background-size: 100% 100%; background-size: 100% 100%;
border-radius: 0.1rem; border-radius: 0.1rem;
@ -251,21 +249,25 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 0.35rem; padding: 0 0.35rem;
.left { .left {
.content-left-title { .content-left-title {
font-size: 0.26rem; font-size: 0.26rem;
line-height: 0.26rem; line-height: 0.26rem;
color: #212956; color: #212956;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
span:first-child { span:first-child {
margin-right: 0.1rem; margin-right: 0.1rem;
} }
} }
.content-left-content { .content-left-content {
width: 4.2rem; width: 4.2rem;
font-size: 0.2rem; font-size: 0.2rem;
color: rgba(33, 41, 86, 0.8); color: rgba(33, 41, 86, 0.8);
line-height: 0.2rem; line-height: 0.2rem;
p { p {
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
@ -275,6 +277,7 @@
} }
} }
} }
.right { .right {
div { div {
height: 0.4rem; height: 0.4rem;
@ -288,16 +291,17 @@
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
div:first-child { div:first-child {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
} }
} }
.content-right { .content-right {
height: 1.5rem; height: 1.5rem;
width: 6.2rem; width: 6.2rem;
background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') no-repeat;
no-repeat;
background-position: center; background-position: center;
background-size: 100% 100%; background-size: 100% 100%;
border-radius: 0.1rem; border-radius: 0.1rem;
@ -306,17 +310,20 @@
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
padding: 0 0.3rem; padding: 0 0.3rem;
.content-right-left { .content-right-left {
border-right: 0.01rem solid #707fe0; border-right: 0.01rem solid #707fe0;
padding-right: 0.1rem; padding-right: 0.1rem;
margin-right: 0.1rem; margin-right: 0.1rem;
} }
.content-right-title { .content-right-title {
font-size: 0.26rem; font-size: 0.26rem;
line-height: 0.26rem; line-height: 0.26rem;
color: #212956; color: #212956;
margin-bottom: 0.15rem; margin-bottom: 0.15rem;
} }
.content-right-content { .content-right-content {
display: flex; display: flex;
font-size: 0.16rem; font-size: 0.16rem;
@ -326,6 +333,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
flex-direction: column; flex-direction: column;
p { p {
// width: 1.60rem; // width: 1.60rem;
height: 0.2rem; height: 0.2rem;
@ -336,6 +344,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin-right: 0.15rem; margin-right: 0.15rem;
span { span {
cursor: pointer; cursor: pointer;
} }
@ -343,5 +352,5 @@
} }
} }
} }
} }
</style> </style>

59
front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
View File

@ -1,7 +1,10 @@
<template> <template>
<div class="application-associated-ability" v-if="flag"> <div class="application-associated-ability" v-if="flag">
<detals-title title="关联应用" type="ASSOCIATED"></detals-title> <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main"> <div
class="application-associated-ability-main"
v-if="dataFrom[0].dataList.length < 4"
>
<div <div
class="associated-ability-card" class="associated-ability-card"
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList" v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
@ -24,13 +27,53 @@
</div> </div>
</div> </div>
</div> </div>
<div class="application-associated-ability-main" v-else>
<swiper
:slidesPerView="3"
:spaceBetween="30"
:pagination="{ clickable: true }"
:modules="modules"
class="mySwiper"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id"
>
<div
class="associated-ability-card"
@click="switchFunction(dataListitem.id)"
>
<a-tooltip>
<template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
const router = useRouter() const router = useRouter()
const modules = ref([Pagination])
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({ const props = defineProps({
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Array, default: null },
@ -49,7 +92,8 @@
window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id) window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
// alert(id) // alert(id)
} }
if (props.associatedComponents[0].dataList.length != 0) { console.log('这个是空值', props.associatedComponents[0])
if (props.associatedComponents[0].dataList.length > 0) {
console.log('这个是空值', props.associatedComponents) console.log('这个是空值', props.associatedComponents)
flag.value = true flag.value = true
dataFrom.value = props.associatedComponents dataFrom.value = props.associatedComponents
@ -60,7 +104,7 @@
watch( watch(
() => props.associatedComponents, () => props.associatedComponents,
(val) => { (val) => {
if (val.length != 0) { if (val) {
flag.value = true flag.value = true
dataFrom.value = props.associatedComponents dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value) console.log('dataFrom.value', dataFrom.value)
@ -83,15 +127,18 @@
<style lang="less" scoped> <style lang="less" scoped>
.application-associated-ability { .application-associated-ability {
padding-top: 0.8rem; padding-top: 0.8rem;
padding-bottom: 0.8rem; padding-bottom: 0.6rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.application-associated-ability-main { .application-associated-ability-main {
margin-top: 0.4rem; margin-top: 0.4rem;
width: 13.3rem; width: 13.3rem;
display: grid; display: flex;
grid-template-columns: repeat(4, 25%); justify-content: space-around;
:deep(.swiper) {
padding-bottom: 0.6rem;
}
.associated-ability-card { .associated-ability-card {
width: 3.2rem; width: 3.2rem;
height: 2.78rem; height: 2.78rem;

36
front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
View File

@ -21,17 +21,18 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import { queryPartAppByKeyId2 } from '@/api/home'
// 获取当前路由地址
const router = useRouter()
const keyId = router.currentRoute.value.query.id
const navList = ref([ const navList = ref([
{ {
name: '组件展示', name: '组件展示',
key: 'eveloper-presentation', key: 'eveloper-presentation',
}, },
{
name: '关联应用',
key: 'developer-associated-ability',
},
{ {
name: '功能介绍', name: '功能介绍',
key: 'function-introduction', key: 'function-introduction',
@ -64,6 +65,22 @@
}) })
const select = ref('algorithm-display') const select = ref('algorithm-display')
const list = ref([]) const list = ref([])
// 根据能力id查询是否存在关联应用
if (keyId) {
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
console.log('ressssssss', res)
if (res.data.data.length > 0) {
// 存在关联应用时在导航栏加入关联应用
navList.value.unshift({
name: '关联应用',
key: 'developer-associated-ability',
show: true,
})
// list.value.push('关联应用')
console.log('navList', navList)
}
})
}
const selectNav = (key) => { const selectNav = (key) => {
select.value = key select.value = key
mybus.emit('flyToView', select.value) mybus.emit('flyToView', select.value)
@ -81,7 +98,7 @@
list.value.push('组件展示') list.value.push('组件展示')
} }
}) })
list.value.push('关联应用') list.value.unshift('关联应用')
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
if (list.value.indexOf(item.name) > -1) { if (list.value.indexOf(item.name) > -1) {
@ -123,7 +140,7 @@
list.value.push('组件展示') list.value.push('组件展示')
} }
}) })
list.value.push('关联应用') list.value.unshift('关联应用')
list.value.push('组件试用') list.value.push('组件试用')
list.value.push('使用方式') list.value.push('使用方式')
navList.value.forEach((item) => { navList.value.forEach((item) => {
@ -139,10 +156,13 @@
} }
}) })
if (list.value.length > 0) { if (list.value.length > 0) {
if (navList.value.filter((item) => item.name === list.value[0])[0]) {
select.value = navList.value.filter( select.value = navList.value.filter(
(item) => item.name === list.value[0] (item) =>
(item.name === '关联应用') | (item.name === list.value[0])
)[0].key )[0].key
} }
}
console.log('11111111111111111111111111', list.value, navList.value) console.log('11111111111111111111111111', list.value, navList.value)
} }
} }

92
front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
View File

@ -1,30 +1,79 @@
<template> <template>
<div class="application-associated-ability" v-if="flag"> <div class="application-associated-ability" v-if="flag">
<detals-title title="关联应用" type="RELEVANCE"></detals-title> <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main"> <div
class="application-associated-ability-main"
v-if="dataFrom[0].dataList.length < 4"
>
<div <div
class="associated-ability-card" class="associated-ability-card"
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList" v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id" :key="dataListitem.id"
@click="switchFunction(dataListitem.id)" @click="switchFunction(dataListitem.id)"
> >
<a-tooltip>
<template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-title"> <div class="associated-ability-card-title">
{{ dataListitem.name }} {{ dataListitem.name }}
</div> </div>
</a-tooltip>
<div class="associated-ability-card-content"> <div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font"> <div class="associated-ability-card-content-font">
{{ dataListitem.description }} {{ dataListitem.description }}
</div> </div>
</a-tooltip>
</div> </div>
</div> </div>
</div> </div>
<div class="application-associated-ability-main" v-else>
<swiper
:slidesPerView="3"
:spaceBetween="30"
:pagination="{ clickable: true }"
:modules="modules"
class="mySwiper"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id"
>
<div
class="associated-ability-card"
@click="switchFunction(dataListitem.id)"
>
<a-tooltip>
<template #title>{{ dataListitem.name }}</template>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
</a-tooltip>
<div class="associated-ability-card-content">
<a-tooltip>
<template #title>{{ dataListitem.description }}</template>
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</a-tooltip>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
const router = useRouter() const router = useRouter()
const modules = ref([Pagination])
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({ const props = defineProps({
associatedComponents: { type: Array, default: null }, associatedComponents: { type: Array, default: null },
@ -34,17 +83,20 @@
const oldid = router.currentRoute.value.query.id const oldid = router.currentRoute.value.query.id
//点击查看详情 //点击查看详情
const switchFunction = (id) => { const switchFunction = (id) => {
router.push({ // router.push({
path: '/details', // path: '/details',
query: { // query: {
id: id, // id: id,
}, // },
}) // })
window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
// alert(id)
} }
if (props.associatedComponents[0].dataList.length != 0) { console.log('这个是空值', props.associatedComponents[0])
if (props.associatedComponents[0].dataList.length > 0) {
console.log('这个是空值', props.associatedComponents)
flag.value = true flag.value = true
dataFrom.value = props.associatedComponents dataFrom.value = props.associatedComponents
debugger
console.log('dataFrom.value', dataFrom.value) console.log('dataFrom.value', dataFrom.value)
} else { } else {
flag.value = false flag.value = false
@ -75,7 +127,7 @@
<style lang="less" scoped> <style lang="less" scoped>
.application-associated-ability { .application-associated-ability {
padding-top: 0.8rem; padding-top: 0.8rem;
padding-bottom: 0.8rem; padding-bottom: 0.6rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -83,20 +135,31 @@
margin-top: 0.4rem; margin-top: 0.4rem;
width: 13.3rem; width: 13.3rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-around;
:deep(.swiper) {
padding-bottom: 0.6rem;
}
.associated-ability-card { .associated-ability-card {
width: 3.2rem; width: 3.2rem;
height: 2.78rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border: 1px solid #e4e6f5; border: 1px solid #e4e6f5;
border-radius: 0.1rem; border-radius: 0.1rem;
padding-bottom: 0.3rem; padding-bottom: 0.3rem;
margin-right: 0.2rem;
margin-top: 0.2rem;
cursor: pointer; cursor: pointer;
.associated-ability-card-title { .associated-ability-card-title {
width: 2.2rem;
padding-top: 0.3rem; padding-top: 0.3rem;
font-size: 0.22rem; font-size: 0.22rem;
text-align: center; text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.associated-ability-card-content { .associated-ability-card-content {
width: 100%; width: 100%;
@ -107,6 +170,11 @@
color: #999; color: #999;
margin-right: 0.15rem; margin-right: 0.15rem;
margin-top: 0.15rem; margin-top: 0.15rem;
text-align: center;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
} }
} }
} }

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

@ -21,13 +21,14 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import { queryPartAppByKeyId2 } from '@/api/home'
// 获取当前路由地址
const router = useRouter()
const keyId = router.currentRoute.value.query.id
const navList = ref([ const navList = ref([
{
name: '关联应用',
key: 'layer-service-associated-ability',
},
{ {
name: '图层展示', name: '图层展示',
key: 'service-presentation', key: 'service-presentation',
@ -64,6 +65,22 @@
}) })
const select = ref('service-presentation') const select = ref('service-presentation')
const list = ref([]) const list = ref([])
// 根据能力id查询是否存在关联应用
if (keyId) {
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
console.log('ressssssss', res)
if (res.data.data.length > 0) {
// 存在关联应用时在导航栏加入关联应用
navList.value.unshift({
name: '关联应用',
key: 'service-associated-ability',
show: true,
})
// list.value.push('关联应用')
console.log('navList', navList)
}
})
}
const selectNav = (key) => { const selectNav = (key) => {
select.value = key select.value = key
console.log(key, select.value) console.log(key, select.value)

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

@ -2,10 +2,7 @@
<!-- 使用方式 --> <!-- 使用方式 -->
<div class="usage-mode" v-if="flag"> <div class="usage-mode" v-if="flag">
<div class="tltle"> <div class="tltle">
<DetalsTitle <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
:title="dataFrom.title"
:type="dataFrom.englishTitle"
></DetalsTitle>
</div> </div>
<div class="content" v-for="item in dataFrom.content" :key="item.title"> <div class="content" v-for="item in dataFrom.content" :key="item.title">
<div class="content-left"> <div class="content-left">
@ -31,7 +28,7 @@
<div class="content-right-title">{{ item.contact }}</div> <div class="content-right-title">{{ item.contact }}</div>
<div class="content-right-content"> <div class="content-right-content">
<p> <p>
<span>{{ item.contact }}</span> <span>{{ item.facilitator.name }}</span>
<a-tooltip> <a-tooltip>
<template #title>{{ item.facilitator.value }}</template> <template #title>{{ item.facilitator.value }}</template>
<span>{{ item.facilitator.value }}</span> <span>{{ item.facilitator.value }}</span>
@ -57,7 +54,7 @@
<div class="content-right-title">{{ item.contact2 }}</div> <div class="content-right-title">{{ item.contact2 }}</div>
<div class="content-right-content"> <div class="content-right-content">
<p> <p>
<span>{{ item.contact2 }}</span> <span>{{ item.facilitator2.name }}</span>
<a-tooltip> <a-tooltip>
<template #title>{{ item.facilitator2.value }}</template> <template #title>{{ item.facilitator2.value }}</template>
<span>{{ item.facilitator2.value }}</span> <span>{{ item.facilitator2.value }}</span>
@ -85,10 +82,10 @@
</template> </template>
<script setup> <script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle' import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { pinyin } from 'pinyin-pro' import { pinyin } from 'pinyin-pro'
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch } from 'vue'
let dataFrom = ref({ let dataFrom = ref({
link: '', link: '',
title: '使用方式', title: '使用方式',
englishTitle: 'USAGE', englishTitle: 'USAGE',
@ -115,13 +112,13 @@
}, },
}, },
], ],
}) })
//数据初始化 //数据初始化
const props = defineProps({ const props = defineProps({
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
const flag = ref(true) const flag = ref(true)
if (props.dataList.infoList) { if (props.dataList.infoList) {
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => (item) =>
item.attrType === '技术文档' || item.attrType === '技术文档' ||
@ -153,8 +150,8 @@
} }
}) })
} }
} }
watch( watch(
() => props.dataList, () => props.dataList,
(val) => { (val) => {
if (val) { if (val) {
@ -191,8 +188,8 @@
} }
} }
} }
) )
function technical() { function technical() {
// 拼接路径 // 拼接路径
// const type = pinyin(props.dataList.type, { // const type = pinyin(props.dataList.type, {
// pattern: 'initial', // pattern: 'initial',
@ -210,8 +207,8 @@
'hisense_office/onlinePreview?url=' + 'hisense_office/onlinePreview?url=' +
btoa(encodeURI(obj.attrValue)) btoa(encodeURI(obj.attrValue))
) )
} }
function technicalNew() { function technicalNew() {
// 拼接路径 // 拼接路径
// const type = pinyin(props.dataList.type, { // const type = pinyin(props.dataList.type, {
// pattern: 'initial', // pattern: 'initial',
@ -228,47 +225,51 @@
'hisense_office/onlinePreview?url=' + 'hisense_office/onlinePreview?url=' +
btoa(encodeURI(obj.attrValue)) btoa(encodeURI(obj.attrValue))
) )
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.usage-mode { .usage-mode {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 0.8rem 0; padding: 0.8rem 0;
.content { .content {
margin-top: 0.3rem; margin-top: 0.3rem;
display: flex; display: flex;
.content-left { .content-left {
height: 1.8rem; height: 1.8rem;
width: 6.2rem; width: 6.2rem;
background: linear-gradient( background: linear-gradient(to right,
to right,
rgba(113, 132, 252, 0.4), rgba(113, 132, 252, 0.4),
rgba(148, 163, 252, 0.4) rgba(148, 163, 252, 0.4));
);
border-radius: 0.1rem; border-radius: 0.1rem;
margin-right: 0.6rem; margin-right: 0.6rem;
box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4); box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 0.35rem; padding: 0 0.35rem;
.left { .left {
.content-left-title { .content-left-title {
font-size: 0.26rem; font-size: 0.26rem;
line-height: 0.26rem; line-height: 0.26rem;
color: #212956; color: #212956;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
span:first-child { span:first-child {
margin-right: 0.1rem; margin-right: 0.1rem;
} }
} }
.content-left-content { .content-left-content {
width: 4.2rem; width: 4.2rem;
font-size: 0.2rem; font-size: 0.2rem;
color: rgba(33, 41, 86, 0.8); color: rgba(33, 41, 86, 0.8);
line-height: 0.2rem; line-height: 0.2rem;
p { p {
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
@ -279,11 +280,13 @@
color: #212956; color: #212956;
line-height: 26px; line-height: 26px;
} }
p:last-of-type { p:last-of-type {
margin-top: 20px; margin-top: 20px;
} }
} }
} }
.right { .right {
div { div {
height: 0.4rem; height: 0.4rem;
@ -297,36 +300,39 @@
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
} }
div:first-child { div:first-child {
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
} }
} }
} }
.content-right { .content-right {
height: 1.8rem; height: 1.8rem;
width: 6.2rem; width: 6.2rem;
background: linear-gradient( background: linear-gradient(to right,
to right,
rgba(113, 132, 252, 0.4), rgba(113, 132, 252, 0.4),
rgba(148, 163, 252, 0.4) rgba(148, 163, 252, 0.4));
);
border-radius: 0.1rem; border-radius: 0.1rem;
box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4); box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
padding: 0 0.3rem; padding: 0 0.3rem;
.content-right-left { .content-right-left {
border-right: 0.01rem solid #b0b9f1; // border-right: 0.01rem solid #b0b9f1;
padding-right: 0.1rem; padding-right: 0.1rem;
margin-right: 0.1rem; margin-right: 0.1rem;
} }
.content-right-title { .content-right-title {
font-size: 0.26rem; font-size: 0.26rem;
line-height: 0.26rem; line-height: 0.26rem;
color: #212956; color: #212956;
margin-bottom: 0.15rem; margin-bottom: 0.15rem;
} }
.content-right-content { .content-right-content {
display: flex; display: flex;
font-size: 0.16rem; font-size: 0.16rem;
@ -336,6 +342,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
flex-direction: column; flex-direction: column;
p { p {
// width: 1.60rem; // width: 1.60rem;
height: 0.2rem; height: 0.2rem;
@ -345,6 +352,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin-right: 0.15rem; margin-right: 0.15rem;
span { span {
cursor: pointer; cursor: pointer;
font-size: 20px; font-size: 20px;
@ -355,5 +363,5 @@
} }
} }
} }
} }
</style> </style>

3
front/src/views/home/components/searchResultList.vue
View File

@ -123,7 +123,10 @@
<span>{{ item.deptName || '--' }}</span> <span>{{ item.deptName || '--' }}</span>
</div> </div>
<div v-if="selectCardsname !== '基础设施'"> <div v-if="selectCardsname !== '基础设施'">
<a-tooltip>
<template #title>{{ item.description }}</template>
{{ item.description || '--' }} {{ item.description || '--' }}
</a-tooltip>
</div> </div>
</div> </div>
<div class="bottom" v-if="selectCardsname !== '基础设施'"> <div class="bottom" v-if="selectCardsname !== '基础设施'">

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

@ -91,7 +91,7 @@
const router = useRouter() const router = useRouter()
const id = router.currentRoute.value.query.id const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const obj = JSON.parse(window.sessionStorage.getItem('preview'))
let showView = ref('details-view') let showView = ref('')
const init = () => { const init = () => {
if (id) { if (id) {
selectOne(id).then((res) => { selectOne(id).then((res) => {

28
front/src/views/newHome/components/Navigation.vue
View File

@ -80,26 +80,32 @@
<a-select <a-select
ref="select" ref="select"
style="width: 1.4rem; height: 0.4rem" style="width: 1.4rem; height: 0.4rem"
v-for="item in fabubumen"
:key="item"
v-model="item.value"
placeholder="请选择省份" placeholder="请选择省份"
@change="qushijiedao" @change="qushijiedao"
:key="fabubumen"
>
<a-select-option
:value="item.name"
v-model="item.value"
v-for="item in fabubumen"
:key="item"
> >
<a-select-option :value="item.name">
{{ item.name }} {{ item.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
<a-select <a-select
ref="select" ref="select"
style="width: 1.4rem; height: 0.4rem" style="width: 1.4rem; height: 0.4rem"
v-for="item in shi"
:key="item"
v-model:value="item.value"
@change="qushijiedao" @change="qushijiedao"
placeholder="请选择市" placeholder="请选择市"
:key="shi"
>
<a-select-option
:value="item.name"
v-model:value="item.value"
v-for="item in shi"
:key="item"
> >
<a-select-option :value="item.name">
{{ item.name }} {{ item.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -167,9 +173,9 @@
id: '100001', id: '100001',
}, },
]) ])
let shi = ref(['请先选择省份']) let shi = ref([])
let qu = ref(['请先选择市']) let qu = ref([])
let jiedao = ref(['请先选择区']) let jiedao = ref([])
function qushijiedao(value) { function qushijiedao(value) {
let danwei = value.substr(-1) let danwei = value.substr(-1)
// name.substr(-1) // name.substr(-1)

3
front/src/views/personalCenter/components/Collection.vue
View File

@ -50,7 +50,7 @@
> >
{{ item.name }} {{ item.name }}
</span> </span>
<span class="time">收藏时间：{{ item.createDate }}</span> <span class="time">收藏时间：{{ item.updateDate }}</span>
<svg <svg
t="1652233950228" t="1652233950228"
class="icon" class="icon"
@ -238,6 +238,7 @@
type: val.resourceDTO.type, type: val.resourceDTO.type,
resourceId: val.resourceId, resourceId: val.resourceId,
createDate: val.createDate, createDate: val.createDate,
updateDate: val.updateDate,
description: val.resourceDTO.description, description: val.resourceDTO.description,
delFlag: val.resourceDTO.delFlag, delFlag: val.resourceDTO.delFlag,
} }

93
front/src/views/personalCenter/components/PurchaseVehicle.vue
View File

@ -97,7 +97,8 @@
<a-list-item-meta <a-list-item-meta
:description=" :description="
item.description || item.description ||
(item.note1 && (JSON.parse(item.note1) &&
JSON.parse(item.note1)[0] &&
JSON.parse(item.note1)[0].channelName + JSON.parse(item.note1)[0].channelName +
'等' + '等' +
JSON.parse(item.note1).length + JSON.parse(item.note1).length +
@ -107,9 +108,15 @@
style="position: relative" style="position: relative"
> >
<template #title> <template #title>
<div>
<span <span
@click=" @click="
showItem(item.resourceId, item.type, item.delFlag) showItem(
item.resourceId,
item.type,
item.delFlag,
item.note1
)
" "
style="cursor: pointer" style="cursor: pointer"
class="name" class="name"
@ -117,6 +124,32 @@
{{ item.resourceName }} {{ item.resourceName }}
</span> </span>
<span class="type">{{ item.type }}</span> <span class="type">{{ item.type }}</span>
</div>
<span class="time">
加购时间:{{ item.time }}
<a-popconfirm
title="是否删除该记录?"
ok-text="是"
cancel-text="否"
@confirm="delOne(item)"
@cancel="cancel"
>
<a-button
type="primary"
style="
width: 0.7rem;
height: 0.3rem;
margin-left: 0.12rem;
border-radius: 2px;
background: #fff;
color: #0558e1;
"
@click="del"
>
删除
</a-button>
</a-popconfirm>
</span>
<svg <svg
t="1652233950228" t="1652233950228"
class="icon" class="icon"
@ -194,6 +227,24 @@
</div> </div>
</div> </div>
</div> </div>
<a-modal
v-model:visible="videoVisible"
title="已申请摄像头列表"
@ok="videoVisible = false"
>
<a-table
:columns="columns"
:data-source="xVideoList"
bordered
:pagination="{ defaultPageSize: 6 }"
>
<template #bodyCell="{ column, text }">
<!-- <template>
<a>{{ text }}</a>
</template> -->
</template>
</a-table>
</a-modal>
<!-- <a-pagination <!-- <a-pagination
v-model:current="pageNum" v-model:current="pageNum"
v-model:page-size="pageSize" v-model:page-size="pageSize"
@ -225,6 +276,8 @@
const pageNum = ref('1') const pageNum = ref('1')
const pageSize = ref('99999') const pageSize = ref('99999')
// const pageSizeOptions = ref(['5', '10', '20']) // const pageSizeOptions = ref(['5', '10', '20'])
const videoVisible = ref(false)
const xVideoList = ref([])
const total = ref(0) const total = ref(0)
const load = ref(0) const load = ref(0)
// 多选框 // 多选框
@ -234,6 +287,12 @@
const checkAll = ref(false) const checkAll = ref(false)
const checkNum = ref(0) const checkNum = ref(0)
const showKey = ref(0) const showKey = ref(0)
const columns = ref([
{
title: '摄像头名称',
dataIndex: 'name',
},
])
// 筛选条件 // 筛选条件
const name = ref('') const name = ref('')
const type = ref('') const type = ref('')
@ -674,11 +733,34 @@
}) })
} }
} }
const delOne = (item) => {
// console.log(item)
sgcDel({
ids: [item.id],
}).then((res) => {
if (res.data.msg === 'success') {
message.success('删除成功')
// console.log('删除申购车列表================>', res)
mybus.emit('getSgcNum')
clean()
}
})
}
const cancel = (e) => { const cancel = (e) => {
// console.log(e) // console.log(e)
} }
// 详情 // 详情
const showItem = (id, type, delFlag) => { const showItem = (id, type, delFlag, note1) => {
if (type == '基础设施') {
console.log()
let arr = JSON.parse(note1)
xVideoList.value = []
arr.map((val) => {
xVideoList.value.push({ name: val.channelName, key: val.channelId })
})
videoVisible.value = true
} else {
if (delFlag == 0) { if (delFlag == 0) {
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle')) window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
mybus.emit('tabsChange', { flag: id }) mybus.emit('tabsChange', { flag: id })
@ -690,6 +772,7 @@
}) })
} }
} }
}
// 一键申请 // 一键申请
const apply = () => { const apply = () => {
// list.value.forEach((val) => { // list.value.forEach((val) => {
@ -921,4 +1004,8 @@
background: url('~@/assets/home/ywzj_square.png') no-repeat; background: url('~@/assets/home/ywzj_square.png') no-repeat;
background-size: 100%; background-size: 100%;
} }
:deep(.ant-list-item-meta-title) {
display: flex;
justify-content: space-between;
}
</style> </style>

188
front/src/views/personalCenter/components/addApplication.vue
View File

@ -9,83 +9,38 @@
<div class="form-container"> <div class="form-container">
<div v-if="applySuccess"> <div v-if="applySuccess">
<div class="title">申请人信息</div> <div class="title">申请人信息</div>
<a-form <a-form ref="formRef" :model="formName" name="basic" :label-col="{ style: { width: '106px' } }"
ref="formRef" :wrapper-col="{ style: { width: '230px' } }" labelAlign="left" autocomplete="off">
:model="formName"
name="basic"
:label-col="{ style: { width: '106px' } }"
:wrapper-col="{ style: { width: '230px' } }"
labelAlign="left"
autocomplete="off"
>
<div class="base-info"> <div class="base-info">
<a-form-item <a-form-item label="申请人" name="applyUserName" :rules="[{ required: true, message: '请输入申请人' }]">
label="申请人" <a-input placeholder="请输入申请人" v-model:value="formName.applyUserName" />
name="applyUserName"
:rules="[{ required: true, message: '请输入申请人' }]"
>
<a-input
placeholder="请输入申请人"
v-model:value="formName.applyUserName"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item style="margin: 0 22px" label="申请人电话" name="applyUserPhone" :rules="[
style="margin: 0 22px"
label="申请人电话"
name="applyUserPhone"
:rules="[
{ {
required: true, required: true,
pattern: /^1[3456789]\d{9}$/, pattern: /^1[3456789]\d{9}$/,
message: '请输入正确的电话号码', message: '请输入正确的电话号码',
}, },
]" ]">
> <a-input placeholder="请输入申请人电话" v-model:value="formName.applyUserPhone" />
<a-input
placeholder="请输入申请人电话"
v-model:value="formName.applyUserPhone"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item label="申请单位" name="applyUserDeptName" :rules="[{ required: true, message: '请输入申请单位' }]">
label="申请单位" <a-input placeholder="请输入申请单位" v-model:value="formName.applyUserDeptName" />
name="applyUserDeptName"
:rules="[{ required: true, message: '请输入申请单位' }]"
>
<a-input
placeholder="请输入申请单位"
v-model:value="formName.applyUserDeptName"
/>
</a-form-item> </a-form-item>
</div> </div>
<div class="title">需求信息</div> <div class="title">需求信息</div>
<a-form-item <a-form-item style="margin-bottom: 10px" label="需求标题" name="demandSubject"
style="margin-bottom: 10px" :rules="[{ required: true, message: '请输入需求标题' }]">
label="需求标题" <a-input style="width: 350px" v-model:value="formName.demandSubject" />
name="demandSubject"
:rules="[{ required: true, message: '请输入需求标题' }]"
>
<a-input
style="width: 350px"
v-model:value="formName.demandSubject"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item style="margin-bottom: 10px" label="需求类型" name="detailsType"
style="margin-bottom: 10px" :rules="[{ required: true, message: '请选择需求类型' }]">
label="需求类型" <a-select ref="select" v-model:value="formName.detailsType" @focus="focus" style="width: 200px">
name="detailsType"
:rules="[{ required: true, message: '请选择需求类型' }]"
>
<a-select
ref="select"
v-model:value="formName.detailsType"
@focus="focus"
style="width: 200px"
>
<a-select-option value="基础设施">基础设施</a-select-option> <a-select-option value="基础设施">基础设施</a-select-option>
<a-select-option value="数据资源">数据资源</a-select-option> <a-select-option value="数据资源">数据资源</a-select-option>
<a-select-option value="组件服务">组件服务</a-select-option> <a-select-option value="组件服务">组件服务</a-select-option>
@ -94,26 +49,14 @@
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item <a-form-item label="应用领域" name="detailsField" style="width: 350px"
label="应用领域" :rules="[{ required: true, message: '请输入应用领域' }]">
name="detailsField" <a-input placeholder="请输入应用领域" v-model:value="formName.detailsField" />
style="width: 350px"
:rules="[{ required: true, message: '请输入应用领域' }]"
>
<a-input
placeholder="请输入应用领域"
v-model:value="formName.detailsField"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item style="margin-bottom: 10px" label="需求描述" name="demandDetails"
style="margin-bottom: 10px" :rules="[{ required: true, message: '请输入需求描述' }]">
label="需求描述" <a-textarea style="
name="demandDetails"
:rules="[{ required: true, message: '请输入需求描述' }]"
>
<a-textarea
style="
width: 500px; width: 500px;
height: 150px; height: 150px;
font-size: 16px; font-size: 16px;
@ -123,24 +66,12 @@
border-radius: 6px; border-radius: 6px;
padding: 10px; padding: 10px;
resize: none; resize: none;
" " v-model:value="formName.demandDetails" />
v-model:value="formName.demandDetails"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item style="color: #666; font-size: 16px" label="附件上传" name="applyDoc">
style="color: #666; font-size: 16px" <a-upload v-model:file-list="fileList" name="file" :action="upLoadUrl" :headers="headers"
label="附件上传" @change="handleChange">
name="applyDoc" <a-button style="
>
<a-upload
v-model:file-list="fileList"
name="file"
:action="upLoadUrl"
:headers="headers"
@change="handleChange"
>
<a-button
style="
width: 100px; width: 100px;
height: 30px; height: 30px;
margin-right: 10px; margin-right: 10px;
@ -151,8 +82,7 @@
border: 1px solid #bbd3ef; border: 1px solid #bbd3ef;
padding: 0; padding: 0;
text-align: center; text-align: center;
" ">
>
<upload-outlined></upload-outlined> <upload-outlined></upload-outlined>
文件上传 文件上传
</a-button> </a-button>
@ -163,8 +93,7 @@
</a-form-item> </a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }"> <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button <a-button style="
style="
width: 80px; width: 80px;
height: 38px; height: 38px;
margin-right: 20px; margin-right: 20px;
@ -175,15 +104,10 @@
border: none; border: none;
padding: 0; padding: 0;
text-align: center; text-align: center;
" " type="primary" html-type="cancle" @click="signOut">
type="primary"
html-type="cancle"
@click="signOut"
>
退出申请 退出申请
</a-button> </a-button>
<a-button <a-button style="
style="
width: 80px; width: 80px;
height: 38px; height: 38px;
background: #0087ff; background: #0087ff;
@ -193,11 +117,7 @@
border: none; border: none;
padding: 0; padding: 0;
text-align: center; text-align: center;
" " type="primary" html-type="submit" @click="processStartHandle()">
type="primary"
html-type="submit"
@click="processStartHandle()"
>
提交申请 提交申请
</a-button> </a-button>
</a-form-item> </a-form-item>
@ -220,20 +140,20 @@
</template> </template>
<script> <script>
import HomeHeader from '@/views/home/components/header' import HomeHeader from '@/views/home/components/header'
import { reactive, ref } from 'vue' import { reactive, ref } from 'vue'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
// import { UploadOutlined } from '@ant-design/icons-vue' // import { UploadOutlined } from '@ant-design/icons-vue'
import { getUser, getUserInfo, relaunch } from '@/api/home' import { getUser, getUserInfo, relaunch } from '@/api/home'
import { import {
demandApply, demandApply,
getDemandForm, getDemandForm,
updateDemandForm, updateDemandForm,
} from '@/api/personalCenter' } from '@/api/personalCenter'
// import { baseURL } from '@/config' // import { baseURL } from '@/config'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
export default { export default {
name: '', name: '',
props: {}, props: {},
components: { components: {
@ -296,10 +216,10 @@
} }
if (info.file.status === 'done') { if (info.file.status === 'done') {
message.success(`${info.file.name} file uploaded successfully`) message.success(`${info.file.name} 文件上传成功`)
formName.enclosure = info.file.response.data formName.enclosure = info.file.response.data
} else if (info.file.status === 'error') { } else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`) message.error(`${info.file.name} 文件上传失败`)
} }
} }
@ -351,17 +271,18 @@
// baseURL, // baseURL,
} }
}, },
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
#apply-container { #apply-container {
background-color: #f5f8fc; background-color: #f5f8fc;
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 90px auto 0; margin: 90px auto 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
aside { aside {
width: 282px; width: 282px;
height: 96%; height: 96%;
@ -369,6 +290,7 @@
background-color: #fff; background-color: #fff;
margin: 1% 0 3%; margin: 1% 0 3%;
} }
article { article {
width: 1090px; width: 1090px;
height: 99%; height: 99%;
@ -376,8 +298,10 @@
background-color: #fff; background-color: #fff;
margin: 5% auto; margin: 5% auto;
} }
.form-container { .form-container {
padding: 20px 20px 30px 20px; padding: 20px 20px 30px 20px;
.title { .title {
font-size: 20px; font-size: 20px;
color: #000; color: #000;
@ -385,18 +309,22 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
.base-info { .base-info {
display: flex; display: flex;
} }
:deep(.ant-form-item-label) { :deep(.ant-form-item-label) {
label { label {
color: #666; color: #666;
font-size: 16px; font-size: 16px;
&::after { &::after {
content: ''; content: '';
} }
} }
} }
:deep(.ant-form-item-required) { :deep(.ant-form-item-required) {
&::before { &::before {
font-size: 8px; font-size: 8px;
@ -408,21 +336,23 @@
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
border-radius: 6px; border-radius: 6px;
} }
.success { .success {
div { div {
width: 100px; width: 100px;
margin: 80px auto 40px; margin: 80px auto 40px;
} }
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
color: #000; color: #000;
} }
} }
</style> </style>
<style> <style>
body, body,
html { html {
height: unset; height: unset;
} }
</style> </style>