Merge branch 'chartFrame-add'

src/views/chartFrame_manage/common/config.js

@@ -10,6 +10,25 @@ const portStyle = {
         }
     }
     }
+//利用NodeTool实现角标
+export const textTool = {
+    name:'button',
+    args:{
+        x:'100%',
+        y:'100%',
+        offset:{x:-12,y:-5},
+        markup:[{
+            tagName:'text',
+            textContent:'aaa',
+            attrs:{
+                fill: '#0052D9',
+                fontSize: 12,
+                textAnchor: 'middle',
+                pointerEvents: 'none',
+            }
+        }]
+    }
+}
 //基础节点
 export const baseNode = {
     shape:'rect',

src/views/chartFrame_manage/common/graph.js

@@ -9,13 +9,9 @@ const viewConfig = {
         restrict:true,//节点移动时无法超出画布
     },
     interacting:function (cellView){ //禁止节点移动
-        /* if(cellView.cell.getData().disableMove){
-            return false
-        } */
-        return false
+        return {'nodeMovable':false,'edgeMovable':false}
     },
     highlighting:{},
-    /* connecting:{}, */
     history:false,//关闭画布撤销/重做能力。
     keyboard:false,
     clipboard: false,

src/views/chartFrame_manage/components/frameContainer.vue

@@ -32,7 +32,7 @@
 <script>
 import { ElDropdownMenu } from 'element-ui';
 import { myGraph } from '../common/graph';
-import { baseNode } from '../common/config';
+import { baseNode , textTool } from '../common/config';
 import FrameToolBar from './frameToolBar.vue';
 export default {
     components:{ElDropdownMenu,FrameToolBar},
@@ -40,6 +40,10 @@ export default {
         FrameworkContent:{ //框架内容
             type:String,
             default:''
+        },
+        Nodes:{
+            type:Array,
+            default:[]
         }
     },
     data() {
@@ -70,9 +74,6 @@ export default {
                 this.currentCell = null
             }
         },
-        FrameworkContent(newVal){//当框架内容发生改变时,画布内容也发生改变
-            newVal.length&&this.gragh&&this.graph.fromJSON(JSON.parse(newVal))
-        }
     },
     computed:{
         contextMenu(){//右键菜单,根据权限配置
@@ -95,6 +96,8 @@ export default {
             this.FrameworkContent.length&&this.graph.fromJSON(JSON.parse(this.FrameworkContent))
             //如果有内容,将画布内容居中
             this.FrameworkContent.length&&this.graph.scrollToContent({ animation: { duration: 600 }})
+            //如果有内容,遍历每个节点,赋值chartNum
+            this.FrameworkContent.length&&this.setNodeInfo()
             //如果是非编辑页,加载完成画布内容后冻结画布
             window.location.pathname.startsWith('/chartframe')&&this.graph.freeze()
             //如果是编辑页，加载完成后清除历史数据
@@ -104,6 +107,17 @@ export default {
         dispose(){
             this.graph&&this.graph.dispose()
         },
+        setNodeInfo(){
+            const nodes = this.graph.getNodes()
+            this.Nodes.forEach(node=>{
+                const currentNode = nodes.find(item=>item.id===node.NodeId)
+                if(currentNode){
+                    currentNode.removeTools()
+                    const toolOption = this.getToolOption({chartNum:node.ChartNum||0,color:currentNode.attrs.label.fill})
+                    currentNode.addTools(toolOption)
+                }
+            })
+        },
         //添加/编辑节点
         editNode(node){
             //获取视口范围
@@ -114,6 +128,9 @@ export default {
                 currentNode.data.id=node.nodeLink.MyChartClassifyId
                 currentNode.label=node.nodeName
                 currentNode.data.nodeLink = node.nodeLink
+                currentNode.removeTools()
+                const toolOption = this.getToolOption({chartNum:node.nodeLink.ChartNum,color:currentNode.attrs.label.fill})
+                currentNode.addTools(toolOption)
             }else{
                 //在视口范围内添加节点
                 this.graph.addNode({
@@ -125,12 +142,19 @@ export default {
                     height:50,
                     data:{
                         id:node.nodeLink.MyChartClassifyId,//存储节点对应的myETA分类id
-                        nodeLink:node.nodeLink
+                        nodeLink:node.nodeLink,
                     },
-                    label:node.nodeName||''
+                    label:node.nodeName||'',
+                    tools:[this.getToolOption({chartNum:node.nodeLink.ChartNum,color:baseNode.attrs.label.fill})]
                 }})
             }
         },
+        getToolOption({chartNum,color}){
+            const options = _.cloneDeep(textTool)
+            options.args.markup[0].textContent = chartNum +''
+            options.args.markup[0].attrs.fill = color
+            return options
+        },
         //点击右键菜单事件
         handleContext(key){
             const select_cell = this.graph.getSelectedCells()
@@ -191,6 +215,7 @@ export default {
         getContentNodes(){
             return this.graph.getNodes().map(node=>{
                 return {
+                    NodeId:node.id,
                     NodeName:node.label,
                     MyChartClassifyId:Number(node.data.id)
                 }

src/views/chartFrame_manage/components/frameToolBar.vue

@@ -115,7 +115,7 @@
                             :class="{'img-disabled':!isSelectNode&&!isSelectEdge,'actived':isSelectNode||isSelectEdge}">
                     </label>
                     <input type="color" id="storke" style="width: 0;height: 0;visibility: hidden;" 
-                        :value="cellStyle.stroke"
+                        :value="nodeStyle.stroke"
                         @input="valueChange"/>
                     <span class="disabled" v-if="!isSelectNode&&!isSelectEdge"></span>
                 </span>
@@ -311,7 +311,15 @@ export default {
                 if(styleMap[id]){
                     attr = this.isSelectNode?styleMap[id][0]:styleMap[id][1]
                 } 
+                
                 this.currentCell.attr(attr,value)
+                //改变节点字体颜色时,角标的颜色也一起改变
+                if(attr==='label/fill'){
+                    let tool = this.currentCell.getTools().items[0]
+                    tool.args.markup[0].attrs.fill = value
+                    this.currentCell.removeTools()
+                    this.currentCell.addTools(tool)
+                }
             }
         },
         changeCellStyle({attr,value}){

src/views/chartFrame_manage/css/basePage.scss

@@ -57,12 +57,20 @@
                 overflow-y: auto;
             } */
             .public-catalog{
+                .title{
+                    cursor: pointer;
+                    span{
+                        margin-left: 5px;
+                    }
+                }
                 .catalog-tree{
-                    margin: 20px 0;
+                   /*  margin: 20px 0; */
+                   margin-top:20px;
                     min-height: 100px;
                 }
             }
             .my-list{
+                margin-top: 20px;
                 .classify-item{
                     display: flex;
                     align-items: center;

src/views/chartFrame_manage/css/customTree.scss

@@ -1,4 +1,4 @@
-.chart-frame-wrap{
+.chart-frame-wrap,.tree-wrap{
     .catalog-tree{
         .custom-tree-node {
             display: flex !important;

src/views/chartFrame_manage/frameEditor.vue

@@ -3,7 +3,8 @@
     <div class="frame-editor-wrap">
         <div class="option-wrap">
             <el-input style="width:240px;" placeholder="请输入框架名称" v-model.trim="frameDetail.FrameworkName"></el-input>
-            <el-button type="primary" style="margin-left:auto;" @click="handleEditNode({})"
+            <el-button type="primary" plain style="margin-left:auto;" @click="returnListPage">返回</el-button>
+            <el-button type="primary" style="margin-left:20px;" @click="handleEditNode({})"
                 v-if="permissionBtn.isShowBtn('chartFramePermission','chartframe_my_editNode')">添加节点</el-button>
             <el-button type="primary" style="margin-left:20px;" @click="saveFrame"
                 v-if="permissionBtn.isShowBtn('chartFramePermission','chartframe_my_saveFrame')">保存</el-button>
@@ -12,6 +13,7 @@
             <!-- 沙盘图组件 -->
             <FrameContainer ref="container"
                 :FrameworkContent="frameDetail.FrameworkContent"
+                :Nodes="frameDetail.Nodes"
                 @editNode="handleEditNode"
                 @framePic="getFramePic"
             />
@@ -70,6 +72,7 @@ export default {
             frameDetail:{
                 FrameworkName:'',
                 FrameworkContent:'',
+                Nodes:[]
             },
             lockLoding:null,
             modifyNode: {},//正在编辑的节点
@@ -151,6 +154,11 @@ export default {
                     this.$router.replace({path:'/editframe',query:{frameId:this.frameId}})
                 })
             }
+            //重新加载一次画布
+            this.$refs.container.dispose()
+            this.$nextTick(()=>{
+                this.$refs.container.init()
+            })
         },
         getMyList(){
             mychartInterface.classifyList().then((res)=>{
@@ -163,7 +171,7 @@ export default {
             if(this.frameId){
                 const res = await chartFrameInterface.getFrameDetail({ChartFrameworkId:Number(this.frameId)})
                 if(res.Ret!==200) return 
-                this.frameDetail = res.Data||{FrameworkName:'',FrameworkContent:''}
+                this.frameDetail = res.Data||{FrameworkName:'',FrameworkContent:'',Nodes:[]}
             }
             //获取到框架内容后再加载graph
             this.$nextTick(()=>{
@@ -171,6 +179,10 @@ export default {
             })
             
         },
+        //返回至列表页,并选中当前页的框架(如果是编辑)
+        returnListPage(){
+            this.$router.push({path:'/chartframe',query:{frameId:this.frameId||''}})
+        }
     },
     mounted(){
         this.getMyList()

src/views/chartFrame_manage/index.vue

@@ -34,8 +34,8 @@
             </div>
             <div class="catalog-list">
                 <div class="public-catalog">
-                    <p>公共框架</p>
-                    <div class="catalog-tree">
+                    <p @click="expandPublic = !expandPublic" class="title">公共框架<span><i :class="{'el-icon-arrow-down':!expandPublic,'el-icon-arrow-up':expandPublic}"></i></span></p>
+                    <div class="catalog-tree" v-show="expandPublic">
                         <el-tree
                             ref="catalogTree"
                             class="catalog-tree other-tree"
@@ -167,7 +167,8 @@
                     <div class="frame-wrap">
                         <!--沙盘图组件-->
                         <FrameContainer ref="container"
-                            :FrameworkContent="currentFrame.FrameworkContent"
+                            :FrameworkContent="currentFrameDetail.FrameworkContent"
+                            :Nodes="currentFrameDetail.Nodes"
                             @showDialog="handleShowDialog"/>
                     </div>
                 </div>
@@ -243,7 +244,7 @@
 
 <script>
 import draggable from 'vuedraggable';
-import FrameContainer from './components/frameContainer.vue';
+import FrameContainer from './components/frameContainer';
 import chartDetail from '@/views/mychart_manage/components/chartDetailDia.vue';
 import { mychartInterface,chartFrameInterface } from '@/api/api.js';
 import {copyBlob} from '@/utils/svgToblob.js';
@@ -273,6 +274,7 @@ export default {
     data() {
         return {
             isSlideLeft:false,//控制左侧目录栏是否显示
+            expandPublic:false,//控制公共框架展开收起
 
             /* drag 我的框架相关 */
             dragStartIndex:0,
@@ -291,6 +293,7 @@ export default {
             currentList:[],//选择公共框架时,框架列表
             myFrameList:[],//我的框架列表
             currentFrame:{},//选择的框架
+            currentFrameDetail:{},//选中的框架详情
             /* frame node */
             myETADetailDialogShow:false,//点击节点时,弹出myeta图表详情弹框
             modifyFrame:{},//正在修改的框架
@@ -391,16 +394,21 @@ export default {
                 this.currentFrame={}
             }
         },
-        handleInitGraph(){
+        async handleInitGraph(){
+            //获取框架详情
+            if(this.currentFrame.ChartFrameworkId){
+                const res = await chartFrameInterface.getFrameDetail({ChartFrameworkId:Number(this.currentFrame.ChartFrameworkId)})
+                this.currentFrameDetail = res.Data||{}
+            }
             //判断一下框架内容是否是合法的JSON,否则置为空
             try{
-                JSON.parse(this.currentFrame.FrameworkContent)
+                JSON.parse(this.currentFrameDetail.FrameworkContent)
             }catch(e){
-                this.currentFrame.FrameworkContent = ''
+                this.currentFrameDetail.FrameworkContent = ''
             }
             this.$nextTick(()=>{
                 //若框架有内容,才加载画布
-                this.currentFrame.FrameworkContent&&this.$refs.container.init()
+                this.currentFrameDetail.FrameworkContent&&this.$refs.container.init()
             })
         },
         /* 拖动相关 */

src/views/mychart_manage/index.vue

@@ -48,8 +48,8 @@
       </div>
       <div class="left-bottom">
         <div class="public-classify" v-if="publicClassifyList.length">
-          <h3 class="classify-type">公共图库</h3>
-          <ul class="public-ul">
+          <h3 @click="expandPublic = !expandPublic" class="classify-type">公共图库<span><i :class="{'el-icon-arrow-down':!expandPublic,'el-icon-arrow-up':expandPublic}"></i></span></h3>
+          <!-- <ul class="public-ul">
             <li
               :class="[
                 'classify-item',
@@ -74,7 +74,32 @@
                 </el-dropdown>
               </div>
             </li>
-          </ul>
+          </ul> -->
+          <div class="tree-wrap" v-show="expandPublic">
+                <el-tree
+                    ref="catalogTree"
+                    class="catalog-tree other-tree"
+                    empty-text="暂无图库"
+                    :data="publicClassifyList"
+                    node-key="nodeKeyId"
+                    :expand-on-click-node="false"
+                    @current-change="(data,node)=>{nodeChange(data,node)}"
+                    >
+                    <div class="custom-tree-node" slot-scope="{ data,node }">
+                        <span class="tree-label">{{ data.name }}</span>
+                        <div class="right-item right-item-box" >
+                            <el-dropdown @command="handleCommand" trigger="click" v-if="isShowDropPublic&&data.MyChartClassifyId">
+                            <span class="el-dropdown-link"> 
+                                <i class="el-icon-more" style="font-size: 16px;transform: rotate(90deg);cursor: pointer"/>
+                            </span>
+                            <el-dropdown-menu slot="dropdown">
+                                <el-dropdown-item :command="{key:'copy'}" :disabled="select_classify_userid === roleId">复制</el-dropdown-item>
+                            </el-dropdown-menu>
+                            </el-dropdown>
+                        </div>
+                    </div>
+                </el-tree>
+            </div>
         </div>
         <div class="classify" v-if="classifyList.length">
           <h3 class="classify-type">我的图库</h3>
@@ -166,7 +191,7 @@
         
         <div class="cont-top">
           <span>共{{ total }}张图表</span>
-          <span v-if="ispublic === 1">分享人: {{ publicClassifyList.find(item => item.MyChartClassifyId === select_classify).RealName}}</span>
+          <span v-if="ispublic === 1">分享人: {{ RealName }}</span>
         </div>
         <div
           class="chart-public-list"
@@ -229,7 +254,7 @@
         </div>
       </div>
       <div v-else class="nodata">
-        <span v-if="ispublic === 1" class="sharer">分享人: {{ publicClassifyList.find(item => item.MyChartClassifyId === select_classify).RealName}}</span>
+        <span v-if="ispublic === 1" class="sharer">分享人: {{ RealName }}</span>
         <tableNoData text="暂无图表"/>
       </div>
     </div>
@@ -324,6 +349,8 @@ export default {
   },
   data() {
     return {
+      expandPublic:false,
+      RealName:'',
       haveData: true,
       isSlideLeft: false, //收起分类
       search_txt: '',
@@ -473,10 +500,36 @@ export default {
     getPublicClassify() {
       mychartInterface.publicClassify().then((res) => {
         if(res.Ret !== 200) return;
-        this.publicClassifyList = res.Data ? res.Data.List.map(item => ({
+        /* this.publicClassifyList = res.Data ? res.Data.List.map(item => ({
           ...item,
           fromPublic: 1
-        })) : [];
+        })) : []; */
+        this.publicClassifyList = res.Data?res.Data.List||[]:[]
+        /* this.publicClassifyList = [{
+            MenuAdminId:204,
+            MenuName:"ficc销售name",
+            Items:[{
+                MyChartClassifyId:370,
+                MyChartClassifyName:"图库2.0",
+                RealName:'ficc销售'
+            }]
+        }] */
+        this.publicClassifyList = this.publicClassifyList.map(list=>{
+            list.name = list.MenuName
+            list.nodeKeyId = 'list' + list.MenuAdminId
+            if(list.Items){
+                list.children = list.Items.map(item=>{
+                    return {
+                        ...item,
+                        ...{
+                            nodeKeyId:'item'+ item.MyChartClassifyId,
+                            name:item.MyChartClassifyName
+                        }
+                    }
+                })
+            }
+            return list
+        })
       })
     },
 
@@ -550,9 +603,28 @@ export default {
 			if(!this.search_have_more) return;
 			this.searchApi(this.current_search,++this.search_page);
 		},
-
+    nodeChange(data,node){
+        if(node.level===1){
+            this.select_classify = 0
+            this.haveData = false
+            this.total = 0
+            this.page_no = 1
+            this.chartList = []
+            this.ispublic=''
+            return
+        }
+        this.RealName = data.RealName
+        this.chooseClassify({
+            MyChartClassifyId:data.MyChartClassifyId,
+            fromPublic:1,
+            AdminId:data.AdminId
+        })
+    },
     /* 切换分类 */
     chooseClassify({MyChartClassifyId,fromPublic,AdminId}) {
+      if(fromPublic!==1){
+        this.$refs.catalogTree.setCurrentKey(null)
+      }
       this.select_classify = MyChartClassifyId;
       this.ispublic = fromPublic;
       this.select_classify_userid = AdminId;
@@ -936,6 +1008,7 @@ export default {
 };
 </script>
 <style lang="scss">
+@import "../chartFrame_manage/css/customTree.scss";
 .mychart_container {
   position: relative;
   .right-item-box {
@@ -1059,6 +1132,9 @@ export default {
         margin-bottom: 20px;
         /* .public-ul {
         } */
+        .tree-wrap{
+            padding:15px;
+        }
       }
     }
     .noclassify {