融合服务 赋能场景 后台管理增删改查

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

@@ -31,12 +31,21 @@
               <el-input type="textarea" :rows="3" class="input-box" v-model="dataForm.description"
                 placeholder="请输入融合服务描述"></el-input>
             </el-form-item>
-            <el-form-item label="支撑场景" prop="applicationArea">
+            <el-form-item label="应用领域" prop="applicationArea">
-              <el-select v-model="dataForm.applicationArea" placeholder="请选择支撑场景" filterable>
+              <el-select v-model="dataForm.applicationArea" placeholder="请选择应用领域" filterable>
                 <el-option v-for="item in areaList" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
               </el-select>
             </el-form-item>
+            <el-form-item label="图片">
+              <el-upload ref="editUpload" class="upload-demo" :action="fileUploadUrl"
+                :on-success="eidtHandleAvatarSuccess" :before-upload="editBeforeAvatarUpload" :limit="1" :file-list="[]"
+                :on-remove="editUploadRemoveFile" :on-exceed="handleExceed" list-type="picture">
+                <el-button size="small" type="primary" class="button-new">点击上传</el-button>
+                <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
+                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+              </el-upload>
+            </el-form-item>
           </div>
 
           <!-- 组合能力 -->
@@ -44,8 +53,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"
@@ -74,21 +85,28 @@ import CombineAbility from './components/combine-ability.vue';
 import Cookies from 'js-cookie'
 import { tableColumns } from './IntegratedServices.vue';
 import { getFuseResourceList, getListParams, modalTypeText } from "./assignedScene/add-update-scene.vue";
+import InfrastructureModal from './assignedScene/components/infrastructure-modal.vue'
 
 export default {
   components: {
     CommonQuestion,
     IntegratedCombineAbility,
     CombineAbility,
+    InfrastructureModal,
   },
   data() {
     return {
-      fileUploadUrl: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('ucsToken')}`,
+      fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
       dataForm: {
         "name": "",
         "applicationArea": "",
         "description": "",
-        "fuseAttrList": [],
+        "fuseAttrList": [
+          {
+            "attrType": "服务图片",
+            "attrValue": "",
+          },
+        ],
         // 选择的能力
         "fuseResourceList": [
           {
@@ -96,7 +114,7 @@ export default {
             "sequence": ""
           }
         ],
-        type: '融合服务'
+        type: '打包模式'
       },
       rules: {
         name: [
@@ -126,7 +144,12 @@ export default {
         'jcssDom': '基础设施',
       },
       modalTypeText: modalTypeText,
-      abilityListObj: {}
+      abilityListObj: {},
+      // 限定图片
+      handleExceed() {
+        this.$message({ type: 'error', message: '最多支持一张图片上传' })
+      },
+      imageUrl: ''
     };
   },
   props: {
@@ -217,6 +240,11 @@ export default {
             'update': 'put'
           }
           this.dataForm.fuseResourceList = this.getFuseResourceList()
+          if (this.imageUrl == '') {
+            this.$message.error("请上传图片！");
+            return;
+          }
+          this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || '';
           this.$http
           [methodsObj[this.modalType]]("/fuse", this.dataForm)
             .then(({ data: res }) => {
@@ -249,8 +277,55 @@ export default {
         for (const key in this.refsParseArray) {
           this.$refs[key] && this.$refs[key].getDataInfo && this.$refs[key].getDataInfo(data)
         }
+        let _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {};
+        this.imageUrl = _imgObj.attrValue;
+        console.log('this.dataForm----详情-------->', this.dataForm);
       })
     },
+    beforeAvatarUpload(file) {
+      const isImage =
+        file.type === 'image/jpeg' ||
+        file.type === 'image/jpg' ||
+        file.type === 'image/png'
+      // const isLt2M = file.size / 1024 / 1024 < 2
+
+      if (!isImage) {
+        this.$message.error('上传头像图片只能是 jpg/png 格式!')
+      }
+      // if (!isLt2M) {
+      //   this.$message.error('上传头像图片大小不能超过 2MB!')
+      // }
+      return isImage
+    },
+    addUploadRemoveFile(file, fileList) {
+      this.$refs.addUpload.clearFiles()
+      this.imageUrl = ''
+    },
+    editBeforeAvatarUpload(file) {
+      const isImage =
+        file.type === 'image/jpeg' ||
+        file.type === 'image/jpg' ||
+        file.type === 'image/png'
+      // const isLt2M = file.size / 1024 / 1024 < 2
+
+      if (!isImage) {
+        this.$message.error('上传头像图片只能是 jpg/png 格式!')
+      }
+      // if (!isLt2M) {
+      //   this.$message.error('上传头像图片大小不能超过 2MB!')
+      // }
+      return isImage
+    },
+    editUploadRemoveFile(file, fileList) {
+      this.$refs.editUpload.clearFiles()
+      this.imageUrl = ''
+    },
+    eidtHandleAvatarSuccess(res, file) {
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.imageUrl = res.data
+    },
   },
   beforeDestroy() {
     this.clearForm()
@@ -372,4 +447,17 @@ export default {
   font-size: 18px;
   margin-bottom: 10px;
 }
+
+.title {
+  text-align: center;
+  font-weight: 600;
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+.avatar {
+  height: 100px;
+  width: 100px;
+  display: block;
+}
 </style>

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

@@ -57,7 +57,7 @@ import { type } from "os";
 export const tableColumns = {
   'name': '融合服务名称',
   'description': '融合服务描述',
-  'applicationArea': '支撑场景',
+  'applicationArea': '应用领域',
 }
 
 export default {
@@ -78,7 +78,7 @@ export default {
         name: "",
         order: 'desc',
         orderField: 'create_date',
-        type: '融合服务'
+        type: '打包模式'
       },
       qp: false,
       modalType: 'add',

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

@@ -31,9 +31,15 @@
               <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">
+            <el-form-item label="图片">
-              </upload>
+              <el-upload ref="editUpload" class="upload-demo" :action="fileUploadUrl"
+                :on-success="eidtHandleAvatarSuccess" :before-upload="editBeforeAvatarUpload" :limit="1" :file-list="[]"
+                :on-remove="editUploadRemoveFile" :on-exceed="handleExceed" list-type="picture">
+                <el-button size="small" type="primary" class="button-new">点击上传</el-button>
+                <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
+                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+              </el-upload>
             </el-form-item>
 
           </div>
@@ -55,8 +61,6 @@
             <div class="title">
               组合能力
             </div>
-            <!-- <combine-ability v-model="dataForm" :dataForm="dataForm" @update="updateDataForm" type="基础设施" ref="jcssDom"
-              :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"
@@ -100,10 +104,7 @@ 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 {
@@ -122,13 +123,12 @@ export const getDescJson = (text) => {
     },
   }
 }
-
 // 弹框的方法
 export const getListParams = {
   '数据资源': getJson('数据资源'),
   '组件服务': getJson('组件服务'),
+  '基础设施': ''
 }
-
 // 模态框标题
 export const modalTypeText = {
   add: '挂接',
@@ -166,7 +166,7 @@ export default {
   },
   data() {
     return {
-      fileUploadUrl: `${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('ucsToken')}`,
+      fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
       moreKeyTextObj: {
         nameObj: {
           text: '能力名称',
@@ -197,13 +197,12 @@ export default {
             "attrType": "解决方案",
             "attrValue": [{ description: "" }],
           },
-        ],
-        "fuseResourceList": [
           {
-            "resourceId": '',
+            "attrType": "服务图片",
-            "sequence": ""
+            "attrValue": "",
-          }
+          },
         ],
+        "fuseResourceList": [],
       },
       rules: {
         name: [
@@ -240,7 +239,12 @@ export default {
       },
       getListParams: getListParams,
       abilityListObj: {},
-      imgData: []
+      imgData: [],
+      // 限定图片
+      handleExceed() {
+        this.$message({ type: 'error', message: '最多支持一张图片上传' })
+      },
+      imageUrl: '',
     };
   },
   props: {
@@ -321,10 +325,14 @@ export default {
             'update': 'put'
           }
           this.dataForm.fuseResourceList = this.getFuseResourceList()
+          if (this.imageUrl == '') {
+            this.$message.error("请上传图片！");
+            return;
+          }
+          this.dataForm.fuseAttrList.find(v => v.attrType == '服务图片').attrValue = this.imageUrl || '';
           let _obj = Object.assign({}, this.dataForm, {
             type: '赋能场景'
           })
-
           this.$http
           [methodsObj[this.modalType]]("/fuse", _obj)
             .then(({ data: res }) => {
@@ -357,11 +365,61 @@ export default {
         for (const key in this.refsParseArray) {
           this.$refs[key] && this.$refs[key].getDataInfo && this.$refs[key].getDataInfo(data)
         }
+        let _imgObj = data.fuseAttrList.find(v => v.attrType == '服务图片') || {};
+        this.imageUrl = _imgObj.attrValue
         console.log('this.dataForm----详情-------->', this.dataForm);
       })
     },
-    changeInfoList() {
+    handleAvatarSuccess(res, file) {
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.imageUrl = res.data
+    },
+    beforeAvatarUpload(file) {
+      const isImage =
+        file.type === 'image/jpeg' ||
+        file.type === 'image/jpg' ||
+        file.type === 'image/png'
+      // const isLt2M = file.size / 1024 / 1024 < 2
 
+      if (!isImage) {
+        this.$message.error('上传头像图片只能是 jpg/png 格式!')
+      }
+      // if (!isLt2M) {
+      //   this.$message.error('上传头像图片大小不能超过 2MB!')
+      // }
+      return isImage
+    },
+    addUploadRemoveFile(file, fileList) {
+      this.$refs.addUpload.clearFiles()
+      this.imageUrl = ''
+    },
+    editBeforeAvatarUpload(file) {
+      const isImage =
+        file.type === 'image/jpeg' ||
+        file.type === 'image/jpg' ||
+        file.type === 'image/png'
+      // const isLt2M = file.size / 1024 / 1024 < 2
+
+      if (!isImage) {
+        this.$message.error('上传头像图片只能是 jpg/png 格式!')
+      }
+      // if (!isLt2M) {
+      //   this.$message.error('上传头像图片大小不能超过 2MB!')
+      // }
+      return isImage
+    },
+    editUploadRemoveFile(file, fileList) {
+      this.$refs.editUpload.clearFiles()
+      this.imageUrl = ''
+    },
+    eidtHandleAvatarSuccess(res, file) {
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.imageUrl = res.data
+      // this.imageUrl = URL.createObjectURL(file.raw);
     },
   },
   beforeDestroy() {
@@ -486,4 +544,10 @@ export default {
   font-size: 18px;
   margin-bottom: 10px;
 }
+
+.avatar {
+  height: 100px;
+  width: 100px;
+  display: block;
+}
 </style>

back/src/views/modules/ability/assignedScene/components/display-list.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="show-box" v-if="displayList.length > 0">
+        <div class="list-box">
+            <div v-for="(item, i) in displayList" :key="i">
+                <el-tooltip popper-class="testTooltip" effect="dark" :content="item[showKey] || '--'" placement="top">
+                    <div class="list-item">
+                        {{ item[showKey] || '--' }}
+                    </div>
+                </el-tooltip>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        displayList: {
+            type: Array,
+            default: () => []
+        },
+        showKey: {
+            type: String,
+            default: 'name'
+        },
+    },
+    watch: {
+        displayList: {
+            handler(newVal) {
+                this.displayList = newVal;
+            },
+            deep: true,
+            immediate: true,
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.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;
+}
+</style>

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

@@ -46,7 +46,7 @@
                 <div class="tree-table-box">
                     <InfrastructureTree @changeParentId="changeParentId"></InfrastructureTree>
                     <div class="table-box">
-                        <el-table v-loading="dataListLoading" :data="dataList" border
+                        <el-table v-loading="dataListLoading" :data="dataList" border ref="dataTable"
                             @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">
@@ -64,7 +64,6 @@
                     </div>
                 </div>
             </div>
-
             <template slot="footer">
                 <el-button @click="showModal = false">{{ $t("cancel") }}</el-button>
                 <el-button type="primary" @click="confirmSubmitHandle()">{{
@@ -72,15 +71,19 @@
                 }}</el-button>
             </template>
         </el-dialog>
+
+        <DisplayList :displayList="displayList"></DisplayList>
     </div>
 </template>
 
 <script>
 import InfrastructureTree from './infrastructure-tree.vue'
+import DisplayList from './display-list.vue';
 
 export default {
     components: {
         InfrastructureTree,
+        DisplayList
     },
     props: {
         // 最多选择的数据个数
@@ -141,18 +144,61 @@ export default {
         }
     },
     watch: {
-        showModal(newVal) {
+        async showModal(newVal) {
             if (newVal) {
-                this.getData()
+                await this.getData();
+                // 默认选中复选框
+                this.$nextTick(() => {
+                    this.selectCheckbox()
+                })
             }
         }
     },
     mounted() {
         // 获取视频资源
         this.getVideoBtn()
+        // 获取列表
         this.getData()
     },
     methods: {
+        selectCheckbox() {
+            if (this.selectedArray.length > 0) {
+                let list = []
+                this.dataList.forEach((item) => {
+                    this.selectedArray.forEach(val => {
+                        if (val === item.idtCameraChannel) {
+                            list.push(item)
+                        }
+                    })
+                })
+                if (list.length) {
+                    list.forEach((row) => {
+                        this.$refs.dataTable.toggleRowSelection(row, true)
+                    })
+                }
+            }
+        },
+        async getDataInfo(dataForm) {
+            await this.getVideoBtn();
+            await this.getData();
+            let arr = [];
+            let attrValue = dataForm.fuseResourceList.filter(v => v.type == this.type);
+            if (attrValue.length > 0) {
+                attrValue.map(val => {
+                    let item = this.dataList.find(v => v.idtCameraChannel == val.resourceId) || {};
+                    let _obj = {
+                        type: val.type,
+                        idtCameraChannel: val.resourceId,
+                        name: item.channelName
+                    };
+                    arr.push(_obj);
+                });
+            }
+            // 展示
+            this.displayList = JSON.parse(JSON.stringify(arr));
+            // 已选中
+            this.selectedArray = arr.map(v => v.idtCameraChannel);
+        },
         handleShowModal() {
             this.showModal = true;
         },
@@ -176,8 +222,10 @@ export default {
             this.currentList = this.tabData.find(v => v.tabName == btn).list || []
         },
         // 获取视频标签列表
-        getVideoBtn(btn) {
+        getVideoBtn() {
+            return new Promise((resolve, reject) => {
                 this.$http.get('/api/project/selectAllLabel', {}).then(res => {
+                    resolve(res)
                     if (res.data.code !== 1) {
                         return this.$message.error(res.msg);
                     }
@@ -185,8 +233,11 @@ export default {
 
                     this.changeBtn(this.activeBtn)
                 }).catch(err => {
+                    reject(err)
                     this.$message.error(err);
                 })
+            })
+
         },
         // 视频-清空标签
         clearVideo() {
@@ -216,16 +267,20 @@ export default {
                 radius: '',
                 labelCodes: '',
             }
+            return new Promise((resolve, reject) => {
                 this.$http.get('/api/project/selectByParentIdNew', { params: postData }).then(res => {
+                    resolve(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 => {
+                    reject(err)
                     this.$message.error(err);
                 })
+            })
+
         },
         changeParentId(parentId) {
             this.getData(parentId)
@@ -236,14 +291,17 @@ export default {
             }
             this.showModal = false;
             this.displayList = []
+            let idtCameraChannelArray = this.selectedArray.map(v => v.idtCameraChannel)
             this.dataList.map(v => {
-                if (this.selectedArray.includes(v.id)) {
+                if (idtCameraChannelArray.includes(v.idtCameraChannel)) {
-                    this.displayList.push(v)
+                    this.displayList.push({
+                        name: v.channelName
+                    })
                 }
             })
             this.$emit('update', {
                 title: this.type,
-                list: this.selectedArray
+                list: this.selectedArray.map(v => v.idtCameraChannel)
             })
         },
         close() {

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

@@ -23,6 +23,8 @@
             </template>
         </el-dialog>
 
+        <DisplayList></DisplayList>
+
         <div class="show-box" v-if="displayList.length > 0">
             <div class="list-box">
                 <div v-for="(item, i) in displayList" :key="i">
@@ -40,6 +42,7 @@
 
 <script>
 import InfrastructureModal from '../assignedScene/components/infrastructure-modal.vue'
+import DisplayList from '../assignedScene/components/display-list.vue'
 
 
 let sjzyArray = [
@@ -220,19 +223,6 @@ export default {
         },
         // 获取列表
         getData() {
-            // if (this.getDataParams.url === '') {
-            //     return;
-            // }
-            // this.$http[this.getDataParams.methods](this.getDataParams.url, this.getDataParams.postData).then(res => {
-            //     console.log('res.data------------>', res.data);
-            //     if (res.data.code !== 0) {
-            //         return this.$message.error(res.msg);
-            //     }
-            //     this.transferData = res.data.data || []  // allData
-            //     this.allData = res.data.data || []
-            // }).catch(err => {
-            //     this.$message.error(err);
-            // })
             this.allData = [];
             this.transferData = [];
             let arr = JSON.parse(JSON.stringify(sjzyArray));
@@ -269,14 +259,13 @@ export default {
             this.displayList = displayList
         },
         close() {
-            // this.$emit("isShowRelatePopup", false);
             this.showModal = false;
             this.selectedArray = [];
             this.allData = [];
             this.transferData = [];
         },
     },
-    components: { InfrastructureModal }
+    components: { InfrastructureModal, DisplayList }
 }
 </script>
 <style lang="scss" scoped>