hi-ucs/front/src/views/home/AbilityToApplyFor.vue

283 lines
6.8 KiB
Vue
Raw Normal View History

2022-06-23 19:19:48 +08:00
<template>
2022-07-04 11:56:45 +08:00
<div class="ability-to-apply-for" :class="{ all: falg }">
<div class="title">
<span>申请能力</span>
<span class="btn" @click="falg = !falg" v-show="!falg">展开</span>
<span class="btn" @click="falg = !falg" v-show="falg">收起</span>
</div>
2022-07-13 16:30:37 +08:00
<div
v-for="(item, index) in dataForm"
:key="index"
class="ability-to-apply-for-content"
>
2022-06-23 19:19:48 +08:00
<div class="dep-name">
<span></span>
{{ item.deptName }}
</div>
2022-06-29 17:28:49 +08:00
<template v-for="val in item.arr" :key="val.resourceId">
2022-06-28 21:49:50 +08:00
<div class="item">
2022-07-13 16:30:37 +08:00
<div
class="tx"
:class="
val.type == '基础设施'
? 'sxt'
: val.componentType == '智能算法'
2022-07-04 11:56:45 +08:00
? 'znsf'
: val.componentType == '图层服务'
2022-07-13 16:30:37 +08:00
? 'tcfw'
: val.componentType == '开发组件'
? 'kfzj'
: val.componentType == '业务组件'
? 'ywzj'
: ''
"
></div>
2022-07-04 11:56:45 +08:00
<div class="text">
<div class="name">
2022-07-13 16:30:37 +08:00
<span
@click="
showItem(val.resourceId, val.type, val.delFlag, val.note1)
"
style="cursor: pointer"
>
2022-07-06 18:15:58 +08:00
{{ val.resourceName }}
</span>
2022-07-04 11:56:45 +08:00
<span>{{ val.type }}</span>
</div>
<div class="description">
{{
2022-07-13 16:30:37 +08:00
val.description ||
(val.note1 &&
JSON.parse(val.note1)[0].channelName +
2022-07-04 11:56:45 +08:00
'等' +
JSON.parse(val.note1).length +
'个摄像头') ||
2022-07-13 16:30:37 +08:00
'--'
2022-07-04 11:56:45 +08:00
}}
</div>
2022-06-30 15:27:16 +08:00
</div>
2022-06-28 21:49:50 +08:00
<div class="remove" @click="removeFunction(val)"></div>
</div>
</template>
2022-06-23 19:19:48 +08:00
</div>
</div>
2022-07-13 16:30:37 +08:00
<a-modal
v-model:visible="videoVisible"
title="已申请摄像头列表"
@ok="videoVisible = false"
>
<a-table
:columns="columns"
:data-source="xVideoList"
bordered
:pagination="{ defaultPageSize: 6 }"
>
2022-07-06 18:15:58 +08:00
<template #bodyCell="{ column, text }">
<!-- <template>
<a>{{ text }}</a>
</template> -->
</template>
</a-table>
</a-modal>
2022-06-23 19:19:48 +08:00
</template>
<script setup>
2022-07-13 16:30:37 +08:00
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { ref, defineProps } from 'vue'
import mybus from '@/myplugins/mybus'
const router = useRouter()
const props = defineProps({
dataList: { type: Array, default: null },
})
const falg = ref(false)
let dataForm = ref([])
const videoVisible = ref(false)
const xVideoList = ref([])
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
const columns = ref([
{
title: '摄像头名称',
dataIndex: 'name',
},
])
// eslint-disable-next-line vue/no-setup-props-destructure
dataForm.value = props.dataList
console.log(dataForm.value)
// const router = useRouter()
// const arr =
// router.currentRoute.value.query.name instanceof Array
// ? router.currentRoute.value.query.name
// : [router.currentRoute.value.query.name]
// const dataResourceId = router.currentRoute.value.query.resourceId
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
// const depList = ref({
// Name: [],
// depID: [],
// })
//移除方法
const removeFunction = (data) => {
dataForm.value.map((val) => {
if (val.arr.length > 1) {
val.arr = val.arr.filter((item) => item.id !== data.id)
} else {
message.error('至少需要提交一条能力申请!')
}
2022-06-23 19:19:48 +08:00
})
2022-07-13 16:30:37 +08:00
dataForm.value = dataForm.value.filter((val) => val.arr.length !== 0)
}
// 详情
const showItem = (id, type, delFlag, note1) => {
if (type == '基础设施') {
let arr = JSON.parse(note1)
xVideoList.value = []
arr.map((val) => {
xVideoList.value.push({ name: val.channelName, key: val.channelId })
2022-07-06 18:15:58 +08:00
})
2022-07-13 16:30:37 +08:00
videoVisible.value = true
} else {
if (delFlag == 0) {
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
mybus.emit('tabsChange', { flag: id })
router.push({
path: '/details',
query: {
id: id,
},
})
}
2022-07-06 18:15:58 +08:00
}
2022-06-23 19:19:48 +08:00
}
</script>
<style scoped lang="less">
2022-07-13 16:30:37 +08:00
.ability-to-apply-for {
height: 2.9rem;
overflow: hidden;
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
.title {
font-size: 0.16rem;
color: #212121;
border-bottom: 0.01rem #dddee1 solid;
padding-bottom: 0.1rem;
margin-bottom: 0.2rem;
display: flex;
justify-content: space-between;
}
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
.ability-to-apply-for-content {
padding-right: 0.5rem;
position: relative;
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
.dep-name {
color: #0558e1;
font-size: 0.22rem;
display: flex;
align-items: center;
line-height: 0.22rem;
margin-bottom: 0.2rem;
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
span {
display: inline-block;
width: 0.05rem;
height: 0.05rem;
background: #0558e1;
border-radius: 0.05rem;
margin-right: 0.05rem;
}
2022-06-23 19:19:48 +08:00
}
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
.item {
padding-bottom: 0.1rem;
margin-bottom: 0.1rem;
border-bottom: 1px solid #dddee1;
display: flex;
align-items: center;
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
.text {
margin-left: 0.2rem;
width: 8.8rem;
}
2022-06-23 19:19:48 +08:00
}
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
.name {
margin-bottom: 0.2rem;
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
span:first-child {
display: inline-block;
margin-right: 0.08rem;
font-size: 0.18rem;
color: #000000;
}
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
span:last-child {
display: inline-block;
padding: 0 0.05rem;
background: #00b8e6;
color: #fff;
}
2022-06-23 19:19:48 +08:00
}
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
.description {
width: 8.8rem;
color: rgba(0, 0, 0, 0.45);
}
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
.remove {
margin-left: 0.1rem;
width: 0.32rem;
height: 0.32rem;
background: url('~@/assets/home/remove.png') no-repeat;
background-size: cover;
cursor: pointer;
}
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
.remove:hover {
background: url('~@/assets/home/remove-hover.png') no-repeat;
background-size: cover;
}
2022-07-06 18:15:58 +08:00
}
2022-06-23 19:19:48 +08:00
}
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
.all {
height: unset;
min-height: 2.9rem;
}
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
.btn {
cursor: pointer;
}
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
.tx {
display: inline-block;
width: 0.8rem;
height: 0.8rem;
margin-left: 0.1rem;
}
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
.sxt {
background: url('~@/assets/home/sxt_square.png') no-repeat;
background-size: 100%;
}
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
.znsf {
background: url('~@/assets/home/znsf_square.png') no-repeat;
background-size: 100%;
}
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
.tcfw {
background: url('~@/assets/home/tcfw_square.png') no-repeat;
background-size: 100%;
}
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
.kfzj {
background: url('~@/assets/home/kfzj_square.png') no-repeat;
background-size: 100%;
}
2022-07-06 18:15:58 +08:00
2022-07-13 16:30:37 +08:00
.ywzj {
background: url('~@/assets/home/ywzj_square.png') no-repeat;
background-size: 100%;
}
2022-06-23 19:19:48 +08:00
</style>