425 lines
11 KiB
Vue
425 lines
11 KiB
Vue
<template>
|
|
<div class="ability-to-apply-for" :class="{ all: flag }">
|
|
<div class="title">
|
|
<span>申请能力</span>
|
|
<div
|
|
class="btnBox"
|
|
v-show="!flag"
|
|
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="flag = !flag"
|
|
>
|
|
<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="flag = !flag">
|
|
展开
|
|
</span>
|
|
<span class="btn" @click="flag = !flag">
|
|
(共{{ totalDataNum }}条数据)
|
|
</span>
|
|
</div>
|
|
<div class="btnBox" v-show="flag">
|
|
<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="flag = !flag"
|
|
>
|
|
<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="flag = !flag">
|
|
收起
|
|
</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 flag = 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 {
|
|
max-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 {
|
|
max-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>
|