部分接口联调

src/api/api.js

@@ -1,5 +1,5 @@
 // eta图表 我的图库 数据指标库
-import { dataBaseInterface, mychartInterface } from './modules/chartApi';
+import { dataBaseInterface, mychartInterface,chartFrameInterface } from './modules/chartApi';
 
 //接入的第三方的数据库
 import {
@@ -75,6 +75,7 @@ import {reportVarietyENInterence} from './modules/reportVariety'
 export {
   dataBaseInterface,
   mychartInterface,
+  chartFrameInterface,
   lzDataInterface,
   glDataInterface,
   smmDataInterface,

src/api/modules/chartApi.js

@@ -929,6 +929,13 @@ const mychartInterface = {
 	addClassify: params => {
 		return http.post('/my_chart/classify/add',params)
 	},
+	/**
+	 * 获取图表关联的节点列表
+	 * @param {MyChartClassifyId} params 
+	 */
+	getFrameNode:params =>{
+		return http.get('/my_chart/classify/framework_node_list',params)
+	},
 	/**
 	 * 删除分类
 	 * @param {MyChartClassifyId} params 
@@ -1092,8 +1099,96 @@ const mychartInterface = {
 		return http.get('/my_chart/search_by_es',params)
 	}
 }
+/* 图库框架 */
+const chartFrameInterface = {
+    /**
+     * 添加框架
+     * @param {Object} params 
+     * @param {String} params.FrameworkName 框架名称
+     * @param {String} params.FrameworkImg 框架图片地址
+     * @param {String} params.FrameworkContent 框架内容
+     * @param {Array} params.Nodes 框架所包含的节点数组
+     * @param {String} Nodes.NodeName 节点名称
+     * @param {Number} Nodes.MyChartClassifyId 节点对应图库分类id
+     * @returns 
+     */
+    addFrame: params => {
+        return http.post('/chart_framework/add',params)
+    },
+    /**
+     * 编辑框架
+     * @param {Object} params 
+     * @param {Number} params.ChartFrameworkId 框架id
+     * 其他参数同上
+     * @returns 
+     */
+    editFrame: params => {
+        return http.post('/chart_framework/edit',params)
+    },
+    getFrameDetail:params=>{
+        return http.get('/chart_framework/detail',params)
+    },
+    /**
+     * 重命名框架
+     * @param {Object} params 
+     * @param {Number} params.ChartFrameworkId
+     * @param {String} params.FrameworkName
+     * @returns 
+     */
+    reNameFrame: params => {
+        return http.post('/chart_framework/rename',params)
+    },
+    /**
+     * 删除框架
+     * @param {Object} params 
+     * @param {Number} params.ChartFrameworkId
+     * @returns 
+     */
+    deleteFrame: params => {
+        return http.post('/chart_framework/remove',params)
+    },
+    /**
+     * 公开/隐藏框架
+     * @param {Object} params 
+     * @param {Number} params.ChartFrameworkId
+     * @param {Number} params.IsPublic 0隐藏 1公开
+     * @returns 
+     */
+    changePublicFrame: params => {
+        return http.post('/chart_framework/edit_public',params)
+    },
+    /**
+     * 框架移动排序
+     * @param {Object} params 
+     * @param {Number} params.ChartFrameworkId
+     * @param {Number} params.PrevChartFrameworkId
+     * @param {Number} params.NextChartFrameworkId
+     * @returns 
+     */
+    moveFrame: params => {
+        return http.post('/chart_framework/move',params)
+    },
+    /**
+     * 获取公开框架目录
+     * @returns 
+     */
+    getPublicFrameList:params=>{
+        return http.get('/chart_framework/public_menu',params)
+    },
+    /**
+     * 获取我的框架列表
+     * @param {Object} params 
+     * @param {String} params.Keyword 筛选关键词
+     * @returns 
+     */
+    getMyFrameList:params=>{
+        return http.get('/chart_framework/list',params)
+    },
+
+}
 
 export {
 	dataBaseInterface,
 	mychartInterface,
+	chartFrameInterface
 }

src/views/chartFrame_manage/common/config.js

@@ -23,13 +23,13 @@ export const baseNode = {
             }
         },
         body:{
-            fill:'#fff',//背景色
-            stroke:'#333',//边框色
-            strokeWidth:2,//边框宽度
+            fill:'#ECF2FE',//背景色
+            stroke:'#0052D9',//边框色
+            strokeWidth:1,//边框宽度
             strokeDasharray:0,//虚线
         },
         label:{ //与svg text属性相同
-            fill:'#333',//文字颜色
+            fill:'#0052D9',//文字颜色
             fontSize:14,//文字大小
             fontWeight:'normal',//文字粗细
             fontStyle:'normal',//斜体

src/views/chartFrame_manage/common/event.js

@@ -105,7 +105,6 @@ export const bindKey = (graph,tempThis=null)=>{
     //ctrl+v粘贴元素
     graph.bindKey('ctrl+v', () => {
         if (!graph.isClipboardEmpty()) {
-            console.log('aaa')
             const selectCell = graph.paste({ offset: 30 })
             graph.cleanSelection()
             graph.select(selectCell)

src/views/chartFrame_manage/common/graph.js

@@ -112,7 +112,7 @@ export function myGraph(wrapper,tempThis) {
                 return new Shape.Edge({
                     attrs: {
                         line: {
-                            stroke: '#333',
+                            stroke: '#0052D9',
                             strokeWidth: 1,
                             strokeDasharray: "",//虚线间隔
                             sourceMarker: false,//起始箭头 

src/views/chartFrame_manage/components/frameContainer.vue

@@ -32,6 +32,12 @@ import { baseNode } from '../common/config';
 import FrameToolBar from './frameToolBar.vue';
 export default {
     components:{ElDropdownMenu,FrameToolBar},
+    props:{
+        FrameworkContent:{ //框架内容
+            type:String,
+            default:''
+        }
+    },
     data() {
         this.baseNode = baseNode
         return {
@@ -50,7 +56,7 @@ export default {
             isSelectNode:false,
             currentCell:null,
             canRedo:false,
-            canUndo:false
+            canUndo:false,
         };
     },
     watch:{
@@ -58,37 +64,18 @@ export default {
             if(newVal){
                 this.currentCell = null
             }
+        },
+        FrameworkContent(newVal){
+            newVal.length&&this.gragh&&this.graph.fromJSON(JSON.parse(newVal))
         }
     },
     methods: {
         init(){
             //如果需要在内部调用vue实例,则初始化时就将this传入
-            this.graph = new myGraph('frameContainer',this);
-            //mock
-            this.graph.addNode({
-                ...baseNode,
-                ...{
-                    data:{id:653,userId:218},
-                    label:'text'
-                }})
-            this.graph.addNode({
-                ...baseNode,
-                ...{
-                    x:200,
-                    y:200,
-                    data:{id:652,userId:218},
-                    label:'text2'
-            }})
-            this.graph.addNode({
-                ...baseNode,
-                ...{
-                    x:400,
-                    y:200,
-                    data:{id:370,userId:204},
-                    label:'别人的框架测试'
-            }})
-            //如果有内容
-            this.graph.scrollToContent({ animation: { duration: 600 }})
+            this.graph = new myGraph('frameContainer',this)
+            this.FrameworkContent.length&&this.graph.fromJSON(JSON.parse(this.FrameworkContent))
+            //如果有内容,将画布内容居中
+            this.FrameworkContent.length&&this.graph.scrollToContent({ animation: { duration: 600 }})
             //如果是非编辑页,加载完成画布内容后冻结画布
             !window.location.pathname.startsWith('/editframe')&&this.graph.freeze()
             //如果是编辑页，加载完成后清楚历史数据
@@ -139,15 +126,51 @@ export default {
             //清除选区
             this.graph.cleanSelection()
         },
-        deleteNode(){},
         hideContextMenu(){
             const dom = $('#context-menu-wrapper')[0];
             dom.style.left = '-9999px';
             dom.style.top = '-9999px';
         },
+        getContentPic(){
+            const { cells } = this.graph.toJSON();
+            let svgData = ''
+            this.graph.toSVG((dataUri) => {
+                svgData = dataUri 
+                
+            },{
+                preserveDimensions:true,//让svg为实际图片大小
+                beforeSerialize:(svg)=>{
+                    const {x,y,width,height} = this.graph.getContentBBox(cells)
+                    let {tx,ty} = this.graph.translate() // 画布偏移量
+                    //给导出的svg增加一点宽高
+                    svg.setAttribute('width',width+50)
+                    svg.setAttribute('height',height+50) 
+                    //设置viewBox使图像居中
+                    svg.setAttribute('viewBox',`${x-25} ${y-25} ${width+50} ${height+50}`)
+                },
+                copyStyles:false,
+                stylesheet: `
+                    svg{
+                        background-color:white;
+                    }
+                    .x6-port {
+                        visibility: hidden;
+                    }
+                    ` 
+            })
+            return svgData
+        },
+        getContentNodes(){
+            return this.graph.getNodes().map(node=>{
+                return {
+                    NodeName:node.label,
+                    MyChartClassifyId:Number(node.data.id)
+                }
+            })
+        }
     },
     mounted(){
-        this.init()
+        //this.init()
     }
 };
 </script>
@@ -167,10 +190,10 @@ export default {
         box-sizing: border-box;
 
         .x6-widget-minimap-viewport {
-            border-color: red;
+            border-color: #0052D9;
 
             .x6-widget-minimap-viewport-zoom {
-                border-color: red;
+                border-color: #0052D9;
             }
         }
 

src/views/chartFrame_manage/frameEditor.vue

@@ -2,15 +2,16 @@
     <!-- 添加编辑框架 -->
     <div class="frame-editor-wrap">
         <div class="option-wrap">
-            <el-input style="width:240px;" placeholder="请输入框架名称"></el-input>
+            <el-input style="width:240px;" placeholder="请输入框架名称" v-model="frameDetail.FrameworkName"></el-input>
             <el-button type="primary" style="margin-left:auto;" @click="handleEditNode({})">添加节点</el-button>
-            <el-button type="primary" style="margin-left:20px;">保存</el-button>
+            <el-button type="primary" style="margin-left:20px;" @click="saveFrame">保存</el-button>
         </div>
         <div class="editor-wrap">
             <!-- 沙盘图组件 -->
             <FrameContainer ref="container"
+                :FrameworkContent="frameDetail.FrameworkContent"
                 @editNode="handleEditNode"
-                @finishInit="getGraphObject"
+                @framePic="getFramePic"
             />
         </div>
         <!-- 添加/编辑节点弹窗 -->
@@ -35,13 +36,13 @@
                     </el-form-item>
                     <el-form-item label="节点链接" prop="nodeLink">
                         <el-select v-model="modifyNode.nodeLink" value-key="classifyId" placeholder="请选择节点链接" style="width:217px;">
-                            <el-option v-for="item in mockMyList" 
-                                :key="item.classifyId"
-                                :label="item.name"
-                                :value="{id:item.classifyId,userId:item.adminId}">
-                                <span style="float:left;">{{item.name}}</span>
+                            <el-option v-for="item in myList" 
+                                :key="item.MyChartClassifyId"
+                                :label="item.MyChartClassifyName"
+                                :value="{id:item.MyChartClassifyId,userId:item.AdminId}">
+                                <span style="float:left;">{{item.MyChartClassifyName}}</span>
                                 <span style="float:right;color: #8492a6; font-size: 13px"
-                                @click="goToList(item)"><i class="el-icon-view"></i></span>
+                                @click="goToList(item)"><img src="~@/assets/img/chart_m/check.png"></span>
                             </el-option>
                         </el-select>
                     </el-form-item>
@@ -58,34 +59,24 @@
 
 <script>
 import FrameContainer from './components/frameContainer.vue';
-
+import { mychartInterface,chartFrameInterface,dataBaseInterface } from '@/api/api.js';
 export default {
     components: { FrameContainer },
     data() {
         return {
+            frameId:this.$route.query.frameId||0,
+            frameDetail:{
+                FrameworkName:'',
+                FrameworkContent:''
+            },
+            lockLoding:null,
             modifyNode: {},
             isModifyNodeDialogShow: false,
             rules: {
                 nodeName: [{ required: true, message: "请输入节点名称", trigger: "blur" }],
                 nodeLink: [{ required: true, message: "请选择节点链接", trigger: "blur" }]
             },
-            mockMyList: [
-                {
-                    classifyId: 652,
-                    adminId:218,
-                    name: '框架1'
-                },
-                {
-                    classifyId: 651,
-                    adminId:218,
-                    name: '框架2'
-                },
-                {
-                    classifyId:370,
-                    adminId:204,
-                    name:'别人的框架'
-                }
-            ]
+            myList:[]
         };
     },
     methods: {
@@ -107,9 +98,75 @@ export default {
         getGraphObject(){
 
         },
-        getFrameDetail(){},
+        async saveFrame(){
+            if(!this.frameDetail.FrameworkName.length){
+                return this.$message.warning("请输入框架名称")
+            }
+            if(!this.$refs.container.graph.toJSON().cells.length){
+                return this.$message.warning('请绘制画布内容');
+            }
+
+            this.lockLoding = this.$loading({
+                lock: true,
+                text: '保存中...',
+                target: '.frame-container-wrap',
+                spinner: 'el-icon-loading',
+                background: 'rgba(255, 255, 255, 0.8)'
+            });
+
+            //获取框架内容图片
+            const svgData = this.$refs.container.getContentPic()
+            if(svgData){
+                const params = new FormData();
+                params.append('Img',svgData)
+                const { Data,Ret } = await dataBaseInterface.uploadImgSvg(params);
+                if(Ret !== 200) return;
+                if(!Data){
+                    return this.$message.warning("上传图片失败")
+                }
+                this.frameDetail.FrameworkImg = Data.ResourceUrl||''
+            }
+            //获取框架节点和内容
+            this.frameDetail.Nodes = this.$refs.container.getContentNodes()
+            this.frameDetail.FrameworkContent = JSON.stringify(this.$refs.container.graph.toJSON())
+            if(this.frameId){
+                //edit
+                chartFrameInterface.editFrame({...this.frameDetail,...{ChartFrameworkId:this.frameId}}).then(res=>{
+                    if(res.Ret!==200) return 
+                    this.$message.success("编辑成功")
+                })
+            }else{
+                //add 
+                chartFrameInterface.addFrame(this.frameDetail).then(res=>{
+                    if(res.Ret!==200) return 
+                    this.frameId = res.Data?res.Data.ChartFrameworkId:0
+                    this.frameDetail = res.Data||{FrameworkName:'',FrameworkContent:''}
+                    this.$message.success("新增成功")
+                })
+            }
+            this.lockLoding.close();
+        },
+        getMyList(){
+            mychartInterface.classifyList().then((res)=>{
+                if(res.Ret!==200) return
+                if(!res.Data) return 
+                this.myList = res.Data.List||[]
+            })
+        },
+        async getFrameDetail(){
+            if(this.frameId){
+                const res = await chartFrameInterface.getFrameDetail({ChartFrameworkId:Number(this.frameId)})
+                if(res.Ret!==200) return 
+                this.frameDetail = res.Data||{FrameworkName:'',FrameworkContent:''}
+            }
+            this.$nextTick(()=>{
+                this.$refs.container.init()
+            })
+            
+        },
     },
     mounted(){
+        this.getMyList()
         this.getFrameDetail()
     }
 };
@@ -122,6 +179,8 @@ export default {
     height: calc(100vh - 120px);
     *{box-sizing: border-box;}
     .option-wrap{
+        background-color:#fff;
+        padding:20px;
         display: flex;
         justify-content: space-between;
     }

src/views/chartFrame_manage/index.vue

@@ -53,7 +53,7 @@
                 <div class="my-list">
                     <p>我的框架</p>
                     <draggable
-                        v-model="mockFrameList"
+                        v-model="myFrameList"
                         class="classify-ul"
                         animation="300"
                         tag="ul"
@@ -61,8 +61,8 @@
                         @update="menuDragenter"
                         @end="menuDragOver"
                     >
-                        <li class="classify-item" :class="{'active':currentFrame.frameId===item.frameId}"
-                            v-for="item in mockFrameList" :key="item.frameId"
+                        <li class="classify-item" :class="{'active':currentFrame.ChartFrameworkId===item.ChartFrameworkId}"
+                            v-for="item in myFrameList" :key="item.ChartFrameworkId"
                             @click="chooseFrame(item)"
                             >
                             <span>
@@ -71,7 +71,7 @@
                                     style="width: 14px; height: 14px;"
                                 />
                             </span>
-                            <span class="item-label text_oneLine">{{ item.name }}</span>
+                            <span class="item-label text_oneLine">{{ item.FrameworkName }}</span>
                             <el-dropdown style="margin-right: 10px" @command="handleCommand" trigger="click">
                                 <span class="el-dropdown-link  el-dropdown-link-img">
                                     <img class="icon" src="~@/assets/img/chart_m/Group.png" v-if="item.IsPublic === 0">
@@ -110,9 +110,9 @@
                                     <i class="el-icon-more" style="font-size: 16px;transform: rotate(90deg);cursor: pointer"/>
                                 </span>
                                 <el-dropdown-menu slot="dropdown">
-                                    <el-dropdown-item v-if="permissionBtn.isShowBtn('myETAPermission','myChart_classifyOpt_rename')"
+                                    <el-dropdown-item
                                         :command="{key:'edit'}">重命名</el-dropdown-item>
-                                    <el-dropdown-item v-if="permissionBtn.isShowBtn('myETAPermission','myChart_classifyOpt_delete')"
+                                    <el-dropdown-item
                                         :command="{key:'del'}">删除</el-dropdown-item>
                                 </el-dropdown-menu>
                             </el-dropdown>
@@ -123,7 +123,7 @@
             </div>
         </div>
         <div class="detail-wrap page-block-wrap" id="detail-right">
-            <div class="empty" v-if="!currentFrame.frameId&&currentList.length===0">
+            <div class="empty" v-if="!currentFrame.ChartFrameworkId&&currentList.length===0">
                 <tableNoData text="暂无数据"/>
             </div>
             <template v-else>
@@ -145,8 +145,8 @@
                 </div>
                 <div class="detail" v-else>
                     <div class="top-info">
-                        <span>更新时间:{{currentFrame.updateTime}}</span>
-                        <span class="title text_oneLine">{{currentFrame.name}}</span>
+                        <span>更新时间:{{currentFrame.ModifyTime}}</span>
+                        <span class="title text_oneLine">{{currentFrame.FrameworkName}}</span>
                         <div class="tool">
                             <el-button type="text" @click="handleOption('edit',currentFrame)" v-if="frameType==='my'">编辑</el-button>
                             <el-button type="text" @click="handleOption('copy',currentFrame)">复制图片</el-button>
@@ -155,7 +155,8 @@
                         </div>
                     </div>
                     <div class="frame-wrap">
-                        <FrameContainer 
+                        <FrameContainer ref="container"
+                            :FrameworkContent="currentFrame.FrameworkContent"
                             @showDialog="handleShowDialog"/>
                     </div>
                 </div>
@@ -233,7 +234,7 @@
 import draggable from 'vuedraggable';
 import FrameContainer from './components/frameContainer.vue';
 import chartDetail from '@/views/mychart_manage/components/chartDetailDia.vue';
-import { mychartInterface } from '@/api/api.js';
+import { mychartInterface,chartFrameInterface } from '@/api/api.js';
 export default {
     components:{ draggable, FrameContainer,chartDetail},
     directives: {
@@ -281,6 +282,7 @@ export default {
                     children:[]
                 }
             ],
+            publicFrameList:[],
             currentList:[],
             mockFrameList:[
                 {
@@ -296,6 +298,7 @@ export default {
                     updateTime:'2023/10/11'
                 }
             ],
+            myFrameList:[],
             currentFrame:{},
             modifyFrame:{},
             isRenameDialogShow:false,
@@ -316,17 +319,27 @@ export default {
         slideHandle(){
             this.isSlideLeft = !this.isSlideLeft;
         },
-        getPublicList(){},
-        getMyList(type){
+        getPublicList(){
+            chartFrameInterface.getPublicFrameList().then(res=>{
+                if(res.Ret!==200) return 
+                this.publicFrameList = res.Data||[]
+            })
+        },
+        async getMyList(type){
+            const res = await chartFrameInterface.getMyFrameList()
+            if(res.Ret!==200) return 
+            this.myFrameList = res.Data||[]
             if(type!=='init') return 
             //如果是其他页面跳转来的
             if(this.$route.query.frameId){
-                this.currentFrame = this.mockFrameList.find(i=>i.frameId===Number(this.$route.query.frameId))||{}
+                this.currentFrame = this.myFrameList.find(i=>i.frameId===Number(this.$route.query.frameId))||{}
             }else{
-                //否则选择mockFrameList的第一个
-                this.currentFrame = this.mockFrameList[0]||{}
+                //否则选择myFrameList的第一个
+                this.currentFrame = this.myFrameList[0]||{}
             }
-            
+            this.$nextTick(()=>{
+                this.$refs.container.init()
+            })
         },
         searchHandle(){},
         nodeChange(data,node){
@@ -366,7 +379,7 @@ export default {
             optionMap[type](data)
         },
         handleEditFrame(data){
-            this.$router.push({path:'/editframe',query:{frameId:data.frameId}})
+            this.$router.push({path:'/editframe',query:{frameId:data.ChartFrameworkId}})
         },
         copyFrame(data){},
         deleteFrame(data){
@@ -444,7 +457,6 @@ export default {
         },
         //弹窗中移除了图表,对chartArr做对应改动
         removeChart(UniqueCode){
-            console.log('?',UniqueCode)
             this.chartArr.splice(this.chartArr.findIndex(item => item === UniqueCode), 1)
         }
     },