318摄像头列表弹窗bug修改
This commit is contained in:
gaoyuanwei
parent
544ba02828
commit
71eae6deeb
|
|
@ -5,20 +5,14 @@
|
|||
<span class="btn" @click="falg = !falg" v-show="!falg">展开</span>
|
||||
<span class="btn" @click="falg = !falg" v-show="falg">收起</span>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in dataForm"
|
||||
:key="index"
|
||||
class="ability-to-apply-for-content"
|
||||
>
|
||||
<div v-for="(item, index) in dataForm" :key="index" class="ability-to-apply-for-content">
|
||||
<div class="dep-name">
|
||||
<span></span>
|
||||
{{ item.deptName }}
|
||||
</div>
|
||||
<template v-for="val in item.arr" :key="val.resourceId">
|
||||
<div class="item">
|
||||
<div
|
||||
class="tx"
|
||||
:class="
|
||||
<div class="tx" :class="
|
||||
val.type == '基础设施'
|
||||
? 'sxt'
|
||||
: val.componentType == '智能算法'
|
||||
|
|
@ -30,11 +24,14 @@
|
|||
: val.componentType == '业务组件'
|
||||
? 'ywzj'
|
||||
: ''
|
||||
"
|
||||
></div>
|
||||
"></div>
|
||||
<div class="text">
|
||||
<div class="name">
|
||||
<span>{{ val.resourceName }}</span>
|
||||
<span @click="
|
||||
showItem(val.resourceId, val.type, val.delFlag, val.note1)
|
||||
" style="cursor: pointer">
|
||||
{{ val.resourceName }}
|
||||
</span>
|
||||
<span>{{ val.type }}</span>
|
||||
</div>
|
||||
<div class="description">
|
||||
|
|
@ -54,34 +51,53 @@
|
|||
</template>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// import { useRouter } from 'vue-router'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { ref, defineProps } from 'vue'
|
||||
// import mybus from '@/myplugins/mybus'
|
||||
const props = defineProps({
|
||||
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([])
|
||||
// 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
|
||||
})
|
||||
const falg = ref(false)
|
||||
let dataForm = ref([])
|
||||
const videoVisible = ref(false)
|
||||
const xVideoList = ref([])
|
||||
|
||||
// const depList = ref({
|
||||
// Name: [],
|
||||
// depID: [],
|
||||
// })
|
||||
//移除方法
|
||||
const removeFunction = (data) => {
|
||||
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
|
||||
|
||||
// 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)
|
||||
|
|
@ -90,13 +106,36 @@
|
|||
}
|
||||
})
|
||||
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 })
|
||||
})
|
||||
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,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.ability-to-apply-for {
|
||||
.ability-to-apply-for {
|
||||
height: 2.9rem;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
font-size: 0.16rem;
|
||||
color: #212121;
|
||||
|
|
@ -106,9 +145,11 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ability-to-apply-for-content {
|
||||
padding-right: 0.5rem;
|
||||
position: relative;
|
||||
|
||||
.dep-name {
|
||||
color: #0558e1;
|
||||
font-size: 0.22rem;
|
||||
|
|
@ -116,6 +157,7 @@
|
|||
align-items: center;
|
||||
line-height: 0.22rem;
|
||||
margin-bottom: 0.2rem;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 0.05rem;
|
||||
|
|
@ -125,25 +167,30 @@
|
|||
margin-right: 0.05rem;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
padding-bottom: 0.1rem;
|
||||
margin-bottom: 0.1rem;
|
||||
border-bottom: 1px solid #dddee1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.text {
|
||||
margin-left: 0.2rem;
|
||||
width: 8.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-bottom: 0.2rem;
|
||||
|
||||
span:first-child {
|
||||
display: inline-block;
|
||||
margin-right: 0.08rem;
|
||||
font-size: 0.18rem;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
display: inline-block;
|
||||
padding: 0 0.05rem;
|
||||
|
|
@ -151,10 +198,12 @@
|
|||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
width: 8.8rem;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.remove {
|
||||
margin-left: 0.1rem;
|
||||
width: 0.32rem;
|
||||
|
|
@ -163,43 +212,52 @@
|
|||
background-size: cover;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.remove:hover {
|
||||
background: url('~@/assets/home/remove-hover.png') no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.all {
|
||||
}
|
||||
|
||||
.all {
|
||||
height: unset;
|
||||
min-height: 2.9rem;
|
||||
}
|
||||
.btn {
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
.tx {
|
||||
}
|
||||
|
||||
.tx {
|
||||
display: inline-block;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
.sxt {
|
||||
}
|
||||
|
||||
.sxt {
|
||||
background: url('~@/assets/home/sxt_square.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.znsf {
|
||||
}
|
||||
|
||||
.znsf {
|
||||
background: url('~@/assets/home/znsf_square.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.tcfw {
|
||||
}
|
||||
|
||||
.tcfw {
|
||||
background: url('~@/assets/home/tcfw_square.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.kfzj {
|
||||
}
|
||||
|
||||
.kfzj {
|
||||
background: url('~@/assets/home/kfzj_square.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.ywzj {
|
||||
}
|
||||
|
||||
.ywzj {
|
||||
background: url('~@/assets/home/ywzj_square.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue