<template>
<div class="ability-to-apply-for" :class="{ all: falg }">
<div class="title">
<span>申请能力</span>
<div
class="btnBox"
v-show="!falg"
v-if="dataForm[0].arr.length > 1 || dataForm.length > 1"
>
<svg
t="1659419933164"
class="btn"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="5926"
width="20"
height="20"
@click="falg = !falg"
>
<path
d="M512 565.12a45.44 45.44 0 0 1-32.64-13.44l-448-451.84a45.44 45.44 0 0 1 64-64L512 454.4 931.84 35.2a46.08 46.08 0 0 1 64 0 45.44 45.44 0 0 1 0 64L545.28 551.68a45.44 45.44 0 0 1-33.28 13.44z"
fill="#13227a"
p-id="5927"
></path>
<path
d="M512 1016.96a45.44 45.44 0 0 1-32.64-13.44l-448-451.84a45.44 45.44 0 0 1 64-64L512 906.24l419.2-419.2a46.08 46.08 0 0 1 64 0 45.44 45.44 0 0 1 0 64l-449.92 452.48a45.44 45.44 0 0 1-33.28 13.44z"
fill="#13227a"
p-id="5928"
></path>
</svg>
<span class="btn" style="font-weight:600" @click="falg = !falg">展开</span>
<span class="btn" @click="falg = !falg">(共{{totalDataNum}}条数据)</span>
</div>
<div class="btnBox" v-show="falg">
<svg
t="1659420014519"
class="btn"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="9781"
width="20"
height="20"
@click="falg = !falg"
>
<path
d="M498.095 146.134l403.416 403.415c17.387 17.387 45.576 17.387 62.963 0s17.387-45.576 0-62.963L499.888 22 35.302 486.586c-17.388 17.387-17.388 45.575 0 62.963 17.387 17.387 45.576 17.387 62.964 0L498.095 146.134zM498.817 592.073l402.693 402.693c17.387 17.387 45.576 17.387 62.963 0s17.387-45.576 0-62.963L499.888 467.219 35.302 931.804c-17.388 17.387-17.388 45.576 0 62.963 17.387 17.387 45.576 17.387 62.964 0L498.817 592.073z"
p-id="9782"
fill="#13227a"
></path>
</svg>
<span class="btn" style="font-weight:600" @click="falg = !falg">收起</span>
</div>
</div>
<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="
val.type == '基础设施'
? 'sxt'
: val.type == '应用资源'
? 'yyzy'
: val.componentType == '智能算法'
? 'znsf'
: val.componentType == '图层服务'
? 'tcfw'
: val.componentType == '开发组件'
? 'kfzj'
: val.componentType == '业务组件'
? 'ywzj'
: 'znsf'
"
></div>
<div class="text">
<div class="name">
<span
@click="
showItem(val.resourceId, val.type, val.delFlag, val.note1)
"
style="cursor: pointer"
>
{{ val.resourceName }}
</span>
<span>{{ val.type }}</span>
</div>
<!-- (item.note1 && JSON.parse(item.note1) &&
JSON.parse(item.note1)[0] &&
JSON.parse(item.note1)[0].channelName -->
<div class="description">
{{
val.description ||
((val.note1 || '') &&
((JSON.parse(val.note1) &&
JSON.parse(val.note1)[0] &&
JSON.parse(val.note1)[0].channelName) ||
'--') +
'等' +
JSON.parse(val.note1).length +
'个摄像头') ||
'--'
}}
</div>
</div>
<div
class="remove"
v-if="item.arr.length > 1"
@click="removeFunction(val)"
></div>
</div>
</template>
</div>
</div>
<a-modal
v-model:visible="videoVisible"
title="已申请摄像头列表"
@ok="videoVisible = false"
>
<a-select placeholder="请选择归属部门"
style="width: 200px"
v-model:value="deptName"
:getPopupContainer="(triggerNode) => triggerNode.parentNode"
show-search
:filterOption="true"
@change="deptIdChangeFunction">
<a-select-option v-for="(item, index) in deptNameAll" :key="`${index}-${item}`" :value="item.name">
{{ item.name }}
</a-select-option>
</a-select>
<a-table
:columns="columns"
:data-source="xVideoList"
bordered
:pagination="{ defaultPageSize: 6 }"
style="margin-top:10px"
>
<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'
import { getDeptAll } from '@/api/user'
const router = useRouter()
const props = defineProps({
dataList: { type: Array, default: null },
})
const falg = ref(false)
let dataForm = ref([])
let totalDataNum = ref(0);
const videoVisible = ref(false)
const xVideoList = ref([])
const xVideoListAll = ref([])
const deptNameAll = ref([]) //所有部门名称
const deptFlage = ref(true) //判断是否存在默认部门名称
const deptName = ref(null)
const columns = ref([
{
title: '摄像头名称',
dataIndex: 'name',
},
{
title: '归属部门',
dataIndex: 'managementUnitName',
}
])
// eslint-disable-next-line vue/no-setup-props-destructure
dataForm.value = props.dataList
console.log('============dataList=============>', 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)
} else {
message.error('至少需要提交一条能力申请！')
}
})
dataForm.value = dataForm.value.filter((val) => val.arr.length !== 0)
}
// 详情
const showItem = (id, type, delFlag, note1) => {
if (type == '基础设施') {
let arr = JSON.parse(note1);
//console.log('arrarr====',arr);
xVideoList.value = []
arr.map((val) => {
xVideoList.value.push({
name: val.channelName || '',
key: val.channelId,
managementUnitName:val.managementUnitName || '',
})
})
xVideoListAll.value = xVideoList.value;
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,
},
})
}
}
}
//归属部门选中改变事件
const deptIdChangeFunction = (name) => {
//console.log('nnnndddd',name);
//console.log('过滤前xVideoList',xVideoList);
//通过name过滤xVideoList
xVideoList.value = xVideoListAll.value.filter((item) => {
if (name && item.managementUnitName.indexOf(name) < 0) return false
return true
});
}
//获取所有的归属部门列表
const getDeptAllData = () =>{
getDeptAll().then((res) => {
deptNameAll.value = res.data.data
})
}
getDeptAllData();
const getDataTotalNum = () =>{
let totalNum =0;
dataForm.value.forEach((item)=>{
totalNum = totalNum +item.arr.length;
});
totalDataNum.value = totalNum;
}
getDataTotalNum();
//获取数据的总条数
</script>
<style scoped lang="less">
.ability-to-apply-for {
height: 2.9rem;
overflow: hidden;
.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;
}
.ability-to-apply-for-content {
padding-right: 0.5rem;
position: relative;
.dep-name {
color: #0558e1;
font-size: 0.22rem;
display: flex;
align-items: center;
line-height: 0.22rem;
margin-bottom: 0.2rem;
span {
display: inline-block;
width: 0.05rem;
height: 0.05rem;
background: #0558e1;
border-radius: 0.05rem;
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;
background: #00b8e6;
color: #fff;
}
}
.description {
width: 8.8rem;
color: rgba(0, 0, 0, 0.45);
}
.remove {
margin-left: 0.1rem;
width: 0.32rem;
height: 0.32rem;
background: url('~@/assets/home/remove.png') no-repeat;
background-size: cover;
cursor: pointer;
}
.remove:hover {
background: url('~@/assets/home/remove-hover.png') no-repeat;
background-size: cover;
}
}
}
.all {
height: unset;
min-height: 2.9rem;
}
.btn {
cursor: pointer;
margin-left: 10px;
}
.tx {
display: inline-block;
width: 0.8rem;
height: 0.8rem;
margin-left: 0.1rem;
}
.sxt {
background: url('~@/assets/home/sxt_square.png') no-repeat;
background-size: 100%;
}
.yyzy {
background: url('~@/assets/home/yyzy_square.png') no-repeat;
background-size: 100%;
}
.znsf {
background: url('~@/assets/home/znsf_square.png') no-repeat;
background-size: 100%;
}
.tcfw {
background: url('~@/assets/home/tcfw_square.png') no-repeat;
background-size: 100%;
}
.kfzj {
background: url('~@/assets/home/kfzj_square.png') no-repeat;
background-size: 100%;
}
.ywzj {
background: url('~@/assets/home/ywzj_square.png') no-repeat;
background-size: 100%;
}
.btnBox {
display: flex;
align-items: center;
}
::v-deep .ant-table-thead > tr > th {
//padding-left: px;
font-size: 18px;
font-weight: bold;
color:#000000 ;
//background: # !important;
}
</style>