add:赋能场景基础设施弹框

back/src/views/modules/ability/IntegratedServices-add.vue

@@ -2,12 +2,7 @@
   <div>
     <el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
       :close-on-click-modal="false" :close-on-press-escape="false">
-      <div style="
+      <div class="first-title">
-            text-align: center;
-            font-weight: 600;
-            font-size: 18px;
-            margin-bottom: 10px;
-          ">
         填写字段
       </div>
       <el-checkbox-group v-model="checkList" @change="changeBtn" style="margin-bottom: 20px">
@@ -369,4 +364,12 @@ export default {
 .input-box {
   width: 90%;
 }
+
+
+.first-title {
+  text-align: center;
+  font-weight: 600;
+  font-size: 18px;
+  margin-bottom: 10px;
+}
 </style>

back/src/views/modules/ability/assignedScene/add-update-scene.vue

@@ -2,12 +2,7 @@
   <div>
     <el-dialog :visible.sync="addOrUpdateVisibleCopy" :title="modalTypeText[modalType]" @close="closeModal"
       :close-on-click-modal="false" :close-on-press-escape="false">
-      <div style="
+      <div class="first-title">
-            text-align: center;
-            font-weight: 600;
-            font-size: 18px;
-            margin-bottom: 10px;
-          ">
         填写字段
       </div>
       <el-checkbox-group v-model="checkList" @change="changeBtn" style="margin-bottom: 20px">
@@ -36,6 +31,11 @@
               <el-input type="textarea" :rows="3" v-model="dataForm.description" placeholder="请输入描述" style="width:90%">
               </el-input>
             </el-form-item>
+            <el-form-item label="图片" prop="img">
+              <upload :key="1" type="图片" btnName="上传图片" :maxCount="1" :data="imgData" :list="[]" tip="支持图片类型，大小不超过100M">
+              </upload>
+            </el-form-item>
+
           </div>
 
           <!-- 场景痛点 -->
@@ -55,8 +55,10 @@
             <div class="title">
               组合能力
             </div>
-            <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施" ref="jcssDom"
+            <!-- <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施" ref="jcssDom"
-              :getDataParams="getListParams['基础设施']"></combine-ability>
+              :getDataParams="getListParams['基础设施']"></combine-ability> -->
+            <InfrastructureModal v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施"
+              ref="jcssDom"></InfrastructureModal>
             <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="数据资源" ref="sjzyDom"
               :getDataParams="getListParams['数据资源']"></combine-ability>
             <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="组件服务" ref="zjfwDom"
@@ -93,12 +95,16 @@ import qs from "qs";
 import SceneUseStep from './components/scene-use-step.vue';
 import SceneOneInput from './components/scene-one-input.vue';
 import CombineAbility from '../components/combine-ability.vue';
-import IntegratedCombineAbility from '../components/integrated-combine-ability.vue';
-import Cookies from 'js-cookie'
 import CommonQuestion from '../components/common-question.vue';
+import InfrastructureModal from './components/infrastructure-modal.vue'
+import Cookies from 'js-cookie'
+import upload from '@/views/modules/components/upload'
+
 
 
 let btnArray = ['基本信息', '场景痛点', '解决方案', '组合能力', '更多能力', '使用步骤']
+
+// 数据资源\组件服务
 export const getJson = (type) => {
   return {
     methods: 'get',
@@ -117,18 +123,13 @@ export const getDescJson = (text) => {
   }
 }
 
+// 弹框的方法
 export const getListParams = {
-  '基础设施': {
-    methods: 'get',
-    url: '',
-    postData: {
-
-    }
-  },
   '数据资源': getJson('数据资源'),
   '组件服务': getJson('组件服务'),
 }
 
+// 模态框标题
 export const modalTypeText = {
   add: '挂接',
   update: '修改'
@@ -157,10 +158,11 @@ export const getFuseResourceList = (abilityListObj) => {
 export default {
   components: {
     SceneUseStep,
-    IntegratedCombineAbility,
-    CommonQuestion,
     CombineAbility,
     SceneOneInput,
+    upload,
+    CommonQuestion,
+    InfrastructureModal,
   },
   data() {
     return {
@@ -175,6 +177,7 @@ export default {
       painKeyTextObj: getDescJson('痛点'),
       solutionKeyTextObj: getDescJson('方案'),
       dataForm: {
+        "name": "",
         "applicationArea": "",
         "description": "",
         "fuseAttrList": [
@@ -201,12 +204,6 @@ export default {
             "sequence": ""
           }
         ],
-        "mobile": "",
-        "name": "",
-        "provider": "",
-        "providerMobile": "",
-        "providerUser": "",
-        "deptUser": "",
       },
       rules: {
         name: [
@@ -242,7 +239,8 @@ export default {
         'jcssDom': '基础设施',
       },
       getListParams: getListParams,
-      abilityListObj: {}
+      abilityListObj: {},
+      imgData: []
     };
   },
   props: {
@@ -362,6 +360,9 @@ export default {
         console.log('this.dataForm----详情-------->', this.dataForm);
       })
     },
+    changeInfoList() {
+
+    },
   },
   beforeDestroy() {
     this.clearForm()
@@ -403,7 +404,7 @@ export default {
 }
 </style>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .mod-sys__menu {
 
   .menu-list,
@@ -478,4 +479,11 @@ export default {
   font-size: 18px;
   margin-bottom: 10px;
 }
+
+.first-title {
+  text-align: center;
+  font-weight: 600;
+  font-size: 18px;
+  margin-bottom: 10px;
+}
 </style>

back/src/views/modules/ability/assignedScene/components/infrastructure-modal.vue

@@ -0,0 +1,436 @@
+<template>
+    <div>
+        <div class="top flex-row-start">
+            <div class="type">{{ type }}</div>
+            <el-button type="primary" size="small" @click="showModal = true">添加</el-button>
+        </div>
+        <el-dialog class="modal-box" :visible.sync="showModal" title="请选择" @close="close" :close-on-click-modal="false"
+            :close-on-press-escape="false" :key="showKey" append-to-body>
+            <div class="infrastructure-box">
+                <div class="search-box">
+                    <div class="flex-row-start" style="margin-bottom:10px">
+                        <div class="left-text">设施类型</div>
+                        <div class="flex-row-start btn-list">
+                            <div class="btn-text" v-for="(item) in btnList" :key="item"
+                                :class="{ 'active-btn': item === activeBtn }" @click="changeBtn(item)">
+                                {{ item }}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex-row-start" style="margin-bottom:10px;align-items: flex-start;">
+                        <div class="left-text" style="margin-top: 8px;">{{ showText[activeBtn] }}</div>
+                        <div style="flex:1;">
+                            <el-button v-if="activeBtn == '视频资源'" type="primary"
+                                style="margin-left:10px;margin-bottom:10px" size="small" @click="clearVideo">清空
+                            </el-button>
+                            <div class="flex-row-start btn-list video-btn-list">
+                                <div class="btn-text" v-for="(item) in currentList" :key="item.labelCode"
+                                    :class="{ 'active-btn': checkList.includes(item.labelCode) }"
+                                    @click="changeVideoBtn(item)">
+                                    {{ item.labelName }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex-row-start" style="margin-bottom:10px;align-items: flex-start;">
+                        <div class="left-text" style="margin-top: 10px;">关键词</div>
+                        <el-input style="margin-left:10px;width: 200px;" v-model="cameraName" placeholder="名称"
+                            clearable>
+                        </el-input>
+                        <el-button type="primary" style="margin-left:10px;margin-top:4px" size="small" @click="getData">
+                            搜索
+                        </el-button>
+                    </div>
+                </div>
+
+                <div class="tree-table-box">
+                    <InfrastructureTree @changeParentId="changeParentId"></InfrastructureTree>
+                    <div class="table-box">
+                        <el-table v-loading="dataListLoading" :data="dataList" border
+                            @selection-change="dataListSelectionChangeHandle"
+                            style="width: 95%;margin: 0 auto 10px auto" size="mini">
+                            <el-table-column type="selection" header-align="center" align="center" width="50">
+                            </el-table-column>
+                            <el-table-column prop="channelName" label="名称" header-align="center" align="center">
+                            </el-table-column>
+                            <el-table-column prop="nodeName" label="归属" header-align="center" align="center">
+                            </el-table-column>
+                        </el-table>
+                        <el-pagination style="justify-content: center;display: flex;" :current-page="pageData.page"
+                            :page-sizes="[10, 20, 50, 100]" :page-size="pageData.limit" :total="pageData.total"
+                            layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
+                            @current-change="pageCurrentChangeHandle">
+                        </el-pagination>
+                    </div>
+                </div>
+            </div>
+
+            <template slot="footer">
+                <el-button @click="showModal = false">{{ $t("cancel") }}</el-button>
+                <el-button type="primary" @click="confirmSubmitHandle()">{{
+                        $t("confirm")
+                }}</el-button>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import InfrastructureTree from './infrastructure-tree.vue'
+
+export default {
+    components: {
+        InfrastructureTree,
+    },
+    props: {
+        // 最多选择的数据个数
+        maxNum: {
+            type: Number,
+            default: 10
+        },
+        type: {
+            type: String,
+            default: "基础设施"
+        },
+    },
+    data() {
+        const getYunList = () => {
+            let yunList = ['云主机', '算力主机', '对象存储', '堡垒机', '防火墙', '网闸', '负载均衡', '公网IP'];
+            let arr = []
+            yunList.map(v => arr.push({ labelCode: v, labelName: v }))
+            return arr
+        }
+        return {
+            showKey: 0,
+            showModal: false,
+            transferData: [], // 穿梭框所有数据
+            selectedArray: [], // 已选择的数据id
+            allData: [],
+            displayList: [], // 用于展示的list
+            btnList: ['视频资源', '云资源', '感知资源'],
+            showText: {
+                '视频资源': '视频标签',
+                '云资源': '云资源分类',
+                '感知资源': '感知资源分类',
+            },
+            tabData: [
+                {
+                    tabName: '视频资源',
+                    list: []
+                },
+                {
+                    tabName: '云资源',
+                    list: getYunList()
+                },
+                {
+                    tabName: '感知资源',
+                    list: []
+                },
+            ],
+            activeBtn: '视频资源',
+            checkList: [],
+            currentList: [],
+            dataListLoading: false,
+            dataList: [],
+            pageData: {
+                limit: 10,
+                page: 1,
+                total: 0,
+            },
+            cameraName: '',
+        }
+    },
+    watch: {
+        showModal(newVal) {
+            if (newVal) {
+                this.getData()
+            }
+        }
+    },
+    mounted() {
+        // 获取视频资源
+        this.getVideoBtn()
+        this.getData()
+    },
+    methods: {
+        handleShowModal() {
+            this.showModal = true;
+        },
+        // 点击复选框
+        dataListSelectionChangeHandle(data) {
+            this.selectedArray = data;
+        },
+        pageCurrentChangeHandle(page) {
+            this.pageData.page = page;
+            this.getData()
+        },
+        pageSizeChangeHandle(limit) {
+            this.pageData.limit = limit;
+            this.getData()
+        },
+        changeBtn(btn) {
+            this.activeBtn = btn;
+            this.checkList = [];
+            this.cameraName = '';
+            this.getData()
+            this.currentList = this.tabData.find(v => v.tabName == btn).list || []
+        },
+        // 获取视频标签列表
+        getVideoBtn(btn) {
+            this.$http.get('/api/project/selectAllLabel', {}).then(res => {
+                if (res.data.code !== 1) {
+                    return this.$message.error(res.msg);
+                }
+                this.tabData[0].list = res.data.data || [];
+
+                this.changeBtn(this.activeBtn)
+            }).catch(err => {
+                this.$message.error(err);
+            })
+        },
+        // 视频-清空标签
+        clearVideo() {
+            this.checkList = []
+            this.getData()
+        },
+        // 切换视频
+        changeVideoBtn(item) {
+            let _index = this.checkList.findIndex(v => item.labelCode == v)
+            if (_index > -1) {
+                this.checkList.splice(_index, 1)
+            } else {
+                this.checkList.push(item.labelCode)
+            }
+        },
+        // 获取列表
+        getData(parentId = '') {
+            this.allData = [];
+            let postData = {
+                parentId: parentId,
+                cameraName: this.cameraName,
+                checkStatus: 1,
+                pageNum: this.pageData.page,
+                pageSize: this.pageData.limit,
+                gpsX: '',
+                gpsY: '',
+                radius: '',
+                labelCodes: '',
+            }
+            this.$http.get('/api/project/selectByParentIdNew', { params: postData }).then(res => {
+                if (res.data.code !== 1) {
+                    return this.$message.error(res.msg);
+                }
+                this.dataList = res.data.data || []
+                this.pageData.total = res.data.count || 0;
+
+            }).catch(err => {
+                this.$message.error(err);
+            })
+        },
+        changeParentId(parentId) {
+            this.getData(parentId)
+        },
+        confirmSubmitHandle() {
+            if (this.selectedArray.length > this.maxNum) {
+                return this.$message.error('最多选择十条数据！');
+            }
+            this.showModal = false;
+            this.displayList = []
+            this.dataList.map(v => {
+                if (this.selectedArray.includes(v.id)) {
+                    this.displayList.push(v)
+                }
+            })
+            this.$emit('update', {
+                title: this.type,
+                list: this.selectedArray
+            })
+        },
+        close() {
+            this.showModal = false;
+            this.cameraName = ''
+            this.selectedArray = [];
+            this.allData = [];
+            this.transferData = [];
+            this.$emit('closeModal');
+        },
+    }
+
+}
+</script>
+<style lang="scss" scoped>
+.ability-box {
+    margin-bottom: 10px;
+
+    .show-box {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+    }
+
+    .top {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    .type {
+        padding-right: 12px;
+        font-size: 14px;
+        color: #606266;
+        width: 100px;
+        box-sizing: border-box;
+        text-align: right;
+        line-height: 40px;
+        height: 40px;
+    }
+
+    .list-box {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        margin-left: 100px;
+    }
+
+    .list-item {
+        font-size: 14px;
+        color: #606266;
+        width: 380px;
+        text-align: left;
+        margin-right: 10px;
+        line-height: 40px;
+        height: 40px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.flex-row-start {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+::v-deep .el-dialog {
+    width: 70%;
+}
+
+.modal-box {
+    .btn-list {
+        margin-left: 10px;
+        flex: 1;
+    }
+
+    .left-text {
+        width: 90px;
+        text-align: right;
+    }
+
+    .btn-text {
+        height: 30px;
+        line-height: 30px;
+        // width: 80px;
+        padding: 0 10px;
+        text-align: center;
+        border-radius: 15px;
+        border: 1px solid #ccc;
+        margin-right: 15px;
+        cursor: pointer;
+        box-sizing: border-box;
+        margin-bottom: 10px;
+        font-size: 12px;
+
+        &:hover {
+            color: #0058e1;
+        }
+    }
+
+    .active-btn {
+        background: #0058e1;
+        color: #fff;
+        border: none;
+        border: 1px solid #0058e1;
+
+        &:hover {
+            color: #FFF;
+        }
+    }
+
+    .video-btn-list {
+        flex-wrap: wrap;
+    }
+
+}
+
+.top {
+    margin-bottom: 10px;
+
+    .type {
+        padding-right: 12px;
+        font-size: 14px;
+        color: #606266;
+        width: 100px;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        text-align: right;
+        line-height: 40px;
+        height: 40px;
+    }
+}
+
+.tree-table-box {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+}
+
+.table-box {
+    width: calc(100% - 400px);
+}
+</style>
+
+<style lang="scss" scoped>
+::v-deep .el-input {
+    width: 200px;
+}
+
+.icon-input ::v-deep .el-input__inner {
+    cursor: pointer;
+}
+
+::v-deep .el-dialog__body {
+    height: 580px;
+    overflow: auto;
+}
+
+::v-deep .el-checkbox-button__inner {
+    width: 130px;
+    margin: 0 10px 5px;
+    border-left: unset !important;
+    border-radius: unset !important;
+    border: 1px solid #dcdfe6 !important;
+}
+
+.relate-application-content {
+    height: 100%;
+
+    ::v-deep .el-transfer {
+        height: 100%;
+    }
+
+    ::v-deep .el-transfer-panel {
+        width: 39.5%;
+        height: 100%;
+    }
+
+    ::v-deep .el-transfer-panel__body {
+        height: 100%;
+    }
+
+    ::v-deep .el-transfer-panel__list.is-filterable {
+        height: calc(100% - 102px);
+    }
+}
+</style>

back/src/views/modules/ability/assignedScene/components/infrastructure-tree.vue

@@ -0,0 +1,314 @@
+<template>
+    <div class="wrapper">
+        <div class="wrapper-title-left-tree" :key="showKey">
+            <div v-for="item in treeData" :key="item.id" class="primaryNode">
+                <div class="top" @click="showBottom(item)" :class="item.show ? 'topSelect' : ''">
+                    {{ item.name }}
+                    ({{ item.channelCount }})
+                    <i class="el-icon-arrow-down" v-show="!item.show"></i>
+                    <i class="el-icon-arrow-top" v-show="item.show"></i>
+                </div>
+                <div class="bottom" v-show="item.show">
+                    <div v-for="val in item.children" :key="val.id" class="item">
+                        <div class="up" :class="selectId == val.id ? 'select' : ''"
+                            @click="showDown(item, val), onSelect(item, val)">
+                            <div>
+                                <svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                    xmlns="http://www.w3.org/2000/svg" p-id="2156" width="25px" height="25px"
+                                    v-show="selectId == val.id">
+                                    <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157"
+                                        fill="#0058e1"></path>
+                                </svg>
+                                <span class="name">{{ val.name }}({{ val.channelCount }})</span>
+                            </div>
+                            <span v-if="item.children.length < 0">{{ val.total }}</span>
+                            <span v-else>
+                                <i class="el-icon-arrow-down" v-show="!val.show"></i>
+                                <i class="el-icon-arrow-top" v-show="val.show"></i>
+                            </span>
+                        </div>
+                        <div class="down" v-show="val.show">
+                            <div v-for="child in val.children" :key="child.id" class="child"
+                                :class="selectId == child.id ? 'select2' : ''" @click="onSelect(item, child, child)">
+                                <div>
+                                    <svg t="1654068878091" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                                        xmlns="http://www.w3.org/2000/svg" p-id="2156" width="25px" height="25px"
+                                        v-show="selectId == child.id">
+                                        <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="2157"
+                                            fill="#0058e1"></path>
+                                    </svg>
+                                    <span class="name">
+                                        {{ child.name }}
+                                    </span>
+                                </div>
+                                <span>{{ child.channelCount }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedKeys: [],
+            checkedKeys: [],
+            showKey: 0,
+            treeData: [],
+            selectId: '',
+            value: '',
+        }
+    },
+    watch: {
+        checkedKeys(val) {
+            if (val.checked.length > 1) {
+                val.checked.halfChecked = val.checked.shift()
+            }
+        },
+    },
+    mounted() {
+        this.init()
+    },
+    methods: {
+        getCameraAllOrgan(params) {
+            return new Promise((resolve, reject) => {
+                this.$http.get('/api/project/selectSubOrganNew', { params }).then(res => {
+                    resolve(res)
+                }).catch(err => {
+                    reject(err)
+                })
+            })
+        },
+        init() {
+            this.treeData = []
+            this.getCameraAllOrgan({ parentId: 'S4NbecfYB1DBH8HNULGS34' }).then(
+                (res) => {
+                    if (res.data.code !== 1) {
+                        return this.$message.error(res.msg);
+                    }
+                    this.treeData = res.data.data
+                }).catch(err => {
+                    this.$message.error(err);
+                })
+        },
+        onSelect(item, val, child) {
+            // mybus.emit('getListByParentId', val.id)
+            this.getCameraAllOrgan({ parentId: val.id }).then((res) => {
+                if (res.data.code !== 1) {
+                    return this.$message.error(res.msg);
+                }
+                this.treeData.map((treeDataItem, index) => {
+                    if (item.id == treeDataItem.id) {
+                        this.treeData[index].children.map((childItem, childIndex) => {
+                            if (childItem.id == val.id) {
+                                this.treeData[index].children[childIndex].children =
+                                    res.data.data;
+                                this.$nextTick(() => {
+                                    this.treeData = this.treeData.splice(0)
+                                })
+                            }
+                        })
+                    }
+                })
+            }).catch(err => {
+                this.$message.error(err);
+            })
+            if (child) {
+                this.selectId = child.id
+            }
+        },
+        showBottom(item) {
+            item.show = !item.show;
+            this.getCameraAllOrgan({ parentId: item.id }).then((res) => {
+                if (res.data.code !== 1) {
+                    return this.$message.error(res.msg);
+                }
+                this.treeData.map((treeDataItem, index) => {
+                    if (item.id == treeDataItem.id) {
+                        this.treeData[index].children = res.data.data || []
+                        this.$nextTick(() => {
+                            this.treeData = this.treeData.splice(0)
+                            console.log('this.treeData.[index]', this.treeData[index])
+                        })
+                    }
+                })
+            }).catch(err => {
+                this.$message.error(err);
+            })
+        },
+        showDown(item, val) {
+            console.log('showDown', val)
+            if (item.children) {
+                val.show = !val.show
+            }
+        }
+    },
+}
+</script>
+
+
+<style lang="scss" scoped>
+.wrapper {
+    height: 500px;
+    overflow-y: scroll;
+    margin-right: 20px;
+    width: 300px;
+
+
+    .primaryNode {
+        .top {
+            width: 100%;
+            height: 40px;
+            background: rgba(0, 135, 225, 0.1);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 10px;
+            margin-top: 8px;
+        }
+
+        .top:hover {
+            cursor: pointer;
+            // 0058e1 透明度 0.5
+            background: rgba(0, 88, 225, 0.8);
+            color: white;
+
+            :deep(.anticon) {
+                color: white;
+            }
+        }
+
+        .topSelect {
+            background: #0058e1;
+            color: white;
+
+            :deep(.anticon) {
+                color: white;
+            }
+        }
+
+        .bottom {
+            width: 100%;
+            background: rgba(244, 245, 248, 0.8);
+            padding: 0 10px;
+
+            .up {
+                width: 100%;
+                cursor: pointer;
+                height: 40px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                border-top: 1px solid #ccc;
+                padding: 0 10px;
+
+                &>div {
+                    display: flex;
+                    justify-content: flex-start;
+                }
+
+                .name {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 1;
+                    -webkit-box-orient: vertical;
+                    word-break: break-all;
+                }
+            }
+
+            .up:hover {
+                .name {
+                    color: #0058e1;
+                    font-weight: 600;
+                }
+
+                span {
+                    color: #0058e1;
+                    font-weight: 600;
+                }
+            }
+
+            .select {
+                padding: 0 0.1rem 0 0;
+
+                .name {
+                    width: 190px;
+                    color: #0058e1;
+                    font-weight: 600;
+                    text-align: left;
+                }
+
+                span {
+                    color: #0058e1;
+                    font-weight: 600;
+                }
+            }
+
+            .item:nth-of-type(1) .up {
+                border-top: none;
+            }
+
+            .down {
+                width: 100%;
+
+                .child {
+                    cursor: pointer;
+                    height: 40px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 0 10px;
+
+                    &>div {
+                        display: flex;
+                        justify-content: flex-start;
+                        align-items: center;
+                    }
+
+                    .name {
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        display: -webkit-box;
+                        -webkit-line-clamp: 1;
+                        -webkit-box-orient: vertical;
+                        word-break: break-all;
+                    }
+                }
+
+                .child:hover {
+                    .name {
+                        color: #0058e1;
+                        font-weight: 600;
+                    }
+
+                    span {
+                        color: #0058e1;
+                        font-weight: 600;
+                    }
+                }
+
+                .select2 {
+                    .name {
+                        width: 190px;
+                        color: #0058e1;
+                        font-weight: 600;
+                        text-align: left;
+                    }
+
+                    span {
+                        color: #0058e1;
+                        font-weight: 600;
+                    }
+
+                    padding: 0 10px 0 0;
+                }
+            }
+        }
+    }
+}
+</style>

back/src/views/modules/ability/assignedScene/index.vue

@@ -21,12 +21,9 @@
       </el-form>
       <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
         style="width: 100%" :height="qp ? '810px' : '650px'">
-
         <el-table-column prop="name" label="名称" header-align="center" align="center"></el-table-column>
-
         <el-table-column prop="description" label="描述" header-align="center" align="center"></el-table-column>
-
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="240" right="0">
-        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="300" right="0">
           <template slot-scope="scope">
             <el-button v-if="$hasPermission('ability:bsabilityai:update')" type="text" size="small"
               @click="handleUpdate(scope.row)">{{ $t("update") }}</el-button>

back/src/views/modules/ability/components/combine-ability.vue

@@ -5,14 +5,15 @@
             <el-button type="primary" size="small" @click="showModal = true">添加</el-button>
         </div>
 
-        <el-dialog :visible.sync="showModal" title="关联应用" @close="close" :close-on-click-modal="false"
+        <el-dialog :visible.sync="showModal" title="请选择" @close="close" :close-on-click-modal="false"
             :close-on-press-escape="false" :key="showKey" append-to-body>
             <div class="relate-application-content">
                 <el-transfer v-model="selectedArray" filterable :filter-method="filterMethod" filter-placeholder="请输入名称"
                     :titles="nameArray" :props="{
                         key: 'id',
                         label: 'name',
-                    }" :data="transferData"></el-transfer>
+                    }" :data="transferData">
+                </el-transfer>
             </div>
             <template slot="footer">
                 <el-button @click="showModal = false">{{ $t("cancel") }}</el-button>
@@ -38,6 +39,8 @@
 </template>
 
 <script>
+import InfrastructureModal from '../assignedScene/components/infrastructure-modal.vue'
+
 
 let sjzyArray = [
     {
@@ -146,17 +149,13 @@ let keyObj = {
         idKey: 'zycode',
         nameKey: 'zyname'
     },
-    '基础设施': {
-        idKey: 'zycode',
-        nameKey: 'zyname'
-    },
 }
 
 export default {
     props: {
         type: {
             type: String,
-            default: ''
+            default: ""
         },
         nameArray: {
             type: Array,
@@ -171,10 +170,10 @@ export default {
             type: Object,
             default: () => {
                 return {
-                    methods: 'get',
+                    methods: "get",
-                    url: '',
+                    url: "",
                     postData: {}
-                }
+                };
             }
         }
     },
@@ -182,24 +181,24 @@ export default {
         return {
             showKey: 0,
             showModal: false,
-            transferData: [], // 穿梭框所有数据
+            transferData: [],
-            selectedArray: [], // 已选择的数据id
+            selectedArray: [],
             allData: [],
             displayList: [], // 用于展示的list
-        }
+        };
     },
     watch: {
         showModal(newVal) {
             if (newVal) {
-                this.getData()
+               this.getData();
             }
         }
     },
     methods: {
         async getDataInfo(dataForm) {
-            await this.getData()
+            await this.getData();
-            let arr = []
+            let arr = [];
-            let attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type)
+            let attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type);
             if (attrValue.length > 0) {
                 attrValue.map(val => {
                     let item = this.allData.find(v => v.id == val.resourceId) || {};
@@ -207,17 +206,17 @@ export default {
                         type: val.type,
                         id: val.resourceId,
                         name: item.name
-                    }
+                    };
-                    arr.push(_obj)
+                    arr.push(_obj);
-                })
+                });
             }
             // 展示
             this.displayList = JSON.parse(JSON.stringify(arr));
             // 已选中
             this.selectedArray = arr.map(v => v.id);
             this.$nextTick(() => {
-                console.log(999, this.displayList)
+                console.log(999, this.displayList);
-            })
+            });
         },
         // 获取列表
         getData() {
@@ -231,21 +230,19 @@ export default {
             //     }
             //     this.transferData = res.data.data || []  // allData
             //     this.allData = res.data.data || []
-
             // }).catch(err => {
             //     this.$message.error(err);
             // })
-            this.allData = []
+            this.allData = [];
-            this.transferData = []
+            this.transferData = [];
             let arr = JSON.parse(JSON.stringify(sjzyArray));
-
             arr.map(v => {
                 this.transferData.push({
                     type: this.type,
                     id: v[keyObj[this.type].idKey],
-                    name: v[keyObj[this.type].nameKey] || '--'
+                    name: v[keyObj[this.type].nameKey] || "--"
-                })
+                });
-            })
+            });
             this.allData = JSON.parse(JSON.stringify(this.transferData));
         },
         filterMethod(query, item) {
@@ -253,30 +250,33 @@ export default {
         },
         confirmSubmitHandle() {
             if (this.selectedArray.length > this.maxNum) {
-                return this.$message.error('最多选择十条数据！');
+                return this.$message.error("最多选择十条数据！");
             }
             this.showModal = false;
-            this.displayList = []
+            this.displayList = [];
             this.allData.map(v => {
                 if (this.selectedArray.includes(v.id)) {
-                    this.displayList.push(v)
+                    this.displayList.push(v);
                 }
-            })
+            });
-            this.displayList = this.displayList.concat(this.displayList)
+            this.$emit("update", {
-            this.$emit('update', {
                 title: this.type,
                 list: this.selectedArray
-            })
+            });
+        },
+        getDisplay(displayList) {
+            this.displayList = []
+            this.displayList = displayList
         },
         close() {
             // this.$emit("isShowRelatePopup", false);
             this.showModal = false;
-            this.selectedArray = []
+            this.selectedArray = [];
-            this.allData = []
+            this.allData = [];
-            this.transferData = []
+            this.transferData = [];
         },
-    }
+    },
-
+    components: { InfrastructureModal }
 }
 </script>
 <style lang="scss" scoped>

front/src/views/home/detailsPageInfrastructureTree.vue

@@ -131,38 +131,6 @@
               treeData.value = res.data.data
             }
           )
-          // selectDeptList({ type: select }).then((res) => {
-          //   // console.log('区划数据=========================>', res.data.data)
-          //   res.data.data.forEach((val) => {
-          //     if (val.type !== '全部能力目录') {
-          //       let obj = {
-          //         title: val.type,
-          //         total: val.total,
-          //         show: val.type === '市级' ? true : false,
-          //         select: false,
-          //         key: val.type,
-          //         children: [],
-          //       }
-          //       switch (val.type) {
-          //         case '市级':
-          //         case '其他':
-          //           generateChildren(val, obj)
-          //           break
-          //         case '区级':
-          //           generateChildren2(val, obj)
-          //           break
-          //       }
-          //       treeData.value.push(obj)
-          //     }
-          //   })
-          //   // 排序
-          //   const sortArr = ['全部能力目录', '市级', '区级', '企业', '其他']
-          //   treeData.value.sort((a, b) => {
-          //     return sortArr.indexOf(a.key) - sortArr.indexOf(b.key)
-          //   })
-          //   console.log('左侧树结构数据======================>', treeData.value)
-          //   showKey.value++
-          // })
         }
       }
       mybus.on('getDeptList', () => {