状态显示 代码调整

src/iscs_new/map.js

@@ -91,7 +91,7 @@ class JMap {
         this.$painter.updateTransform(this.$option);
 
         // 解析模板
-		this.$shapeFactory.parseTemplates(templates)
+        this.$shapeFactory.parseTemplates(templates);
 
         // 数据加载完成 回调
         this.$eventEmitter.trigger(events.DataLoaded);
@@ -150,7 +150,7 @@ class JMap {
     repaint(source = {}) {
         this.$shapeFactory.parse(source, shape => {
             if (shape) {
-				this.$painter.add(shape)
+                this.$painter.add(shape);
             }
         });
         return this;
@@ -161,7 +161,7 @@ class JMap {
             let updateModel = this.isDrawing() ? this.$shapeFactory.updateSource(model, action) : model;
             let curShape = this.$shapeFactory.getShapeByCode(updateModel.code);
             let deps = null;
-			let oldShape = null
+            let oldShape = null;
             let newShape = null;
 
             if (updateModel) {
@@ -170,7 +170,7 @@ class JMap {
                 case orders.Binding:
                 case orders.Add:
                     newShape = this.$shapeFactory.createShape(updateModel, action.shapeType);
-						this.$shapeFactory.addShape(newShape)
+                    this.$shapeFactory.addShape(newShape);
                     this.$painter.add(newShape);
                     break;
                 case orders.Delete:
@@ -188,7 +188,7 @@ class JMap {
                     oldShape = this.$shapeFactory.removeShape(curShape);
                     this.$painter.remove(oldShape);
                     newShape = this.$shapeFactory.createShape(updateModel, action.shapeType);
-						this.$shapeFactory.addShape(newShape)
+                    this.$shapeFactory.addShape(newShape);
                     this.$painter.add(newShape);
                     break;
                 case orders.Unbinding:
@@ -197,6 +197,12 @@ class JMap {
                     this.$shapeFactory.addShape(oldShape);
                     this.$painter.add(oldShape);
                     break;
+                case orders.changeStatus:
+                    debugger;
+                    break;
+                case orders.ResetStatus:
+                    debugger;
+                    break;
                 }
             }
         });
@@ -272,11 +278,11 @@ class JMap {
         this.$shapeFactory.clear();
         this.$controller.clear();
         this.$painter.clear();
-		this.$zr.refresh()
+        this.$zr.refresh();
     }
 
     use(el) {
-		this.plugins.includes(el)||this.plugins.push(el)
+        this.plugins.includes(el) || this.plugins.push(el);
         el.install(this);
     }
 
@@ -289,7 +295,7 @@ class JMap {
         this.$zr && this.$zr.dispose();
         this.plugins.forEach(el => {
             el.uninstall(this);
-		})
+        });
         this.plugins = [];
     }
 

src/iscs_new/utils/orders.js

@@ -4,4 +4,6 @@ export default {
     Update: '&UPT',
     Binding: '&Binding',
     Unbinding: '&Unbinding',
-}
+    ChangeStatus:'&ChangeStatus',
+    ResetStatus:'&ResetStatus'
+};

src/views/iscs_new/iscsDraw/statusList.vue

@@ -66,7 +66,7 @@
           <template slot-scope="scope">
             <el-button type="success" size="mini" @click="modifyStatus(scope.$index,scope.row)">编辑状态组合</el-button>
             <el-button type="danger" size="mini" style="margin-top:5px;" @click="deleteStatus(scope.$index,scope.row)">删除</el-button>
-            <el-button type="primary" size="mini" style="margin-top:5px;" @click="previewStatus(scope.$index,scope.row)">预览</el-button>
+            <!-- <el-button type="primary" size="mini" style="margin-top:5px;" @click="previewStatus(scope.$index,scope.row)">预览</el-button> -->
           </template>
         </el-table-column>
       </el-table>
@@ -333,25 +333,25 @@ export default {
                 });
             }
 
-        },
+        }
-        previewStatus(index, row) {
+        // previewStatus(index, row) {
-            // const that = this;
+        //     // const that = this;
-            // if(needDefault)
+        //     // if(needDefault)
-            const list = Object.values(row.covertStatusList);
+        //     const list = Object.values(row.covertStatusList);
-            list.forEach(each=>{
+        //     list.forEach(each=>{
-                if (each.loop) {
+        //         if (each.loop) {
 
-                } else {
+        //         } else {
-                    const frameList = each.frameList;
+        //             const frameList = each.frameList;
-                    frameList.forEach(frame=>{
+        //             frameList.forEach(frame=>{
-                        // frame.name;
+        //                 // frame.name;
-                        // frame.status;
+        //                 // frame.status;
-                        // this.$iscs.
+        //                 // this.$iscs.
-                    });
+        //             });
-                }
+        //         }
-            });
+        //     });
-            // this.show = false;
+        //     // this.show = false;
-        }
+        // }
     }
 };
 </script>

src/views/iscs_new/iscsPreview/index.vue

@@ -2,22 +2,37 @@
   <transition name="el-zoom-in-center">
     <div class="mapPaint">
       <div class="map-view">
-        <iscs-canvas ref="iscsCanvas" @selected="onSelected" />
+        <iscs-canvas ref="iscsCanvas" @selected="onSelected" @setData="setData" />
       </div>
       <div class="right-card">
         <!-- :class="{'hide': draftShow}"  -->
         <el-card type="border-card" class="heightClass">
           <div slot="header" class="clearfix">
             <!-- 组件id为{{ $route.query.id }}  -->
-            状态编辑
+            状态预览
+            <!--  -->
+            <el-button
+              type="text"
+              style="float: right; padding: 3px 0; margin-right: 5px;"
+              @click="resetDefaultStatus"
+            >重置状态</el-button>
           </div>
           <div class="stateList">
-            <el-tabs v-model="statusTab" class="card" type="card" @tab-click="onSelectTab">
+            <!-- <el-card style="margin-top:10px;height:100%"> -->
-              <el-tab-pane v-for="(composeElem,index) in composeElemList" :key="index" :label="composeElem.name" :name="composeElem.code" :lazy="true">
+            <div v-for="(state,index) in stateList" :key="index" class="eachStatus">
+              <div>状态属性：{{ state.status }}</div>
+              <div>状态描述：{{ state.description }}</div>
+              <div>状态权重：{{ state.weight }}</div>
+              <div>状态是否可以初始化：{{ state.needDefault?'是':'否' }}</div>
+              <el-button type="primary" size="mini" style="margin-top:5px;" @click="previewStatus(state)">预览</el-button>
+            </div>
+            <!-- </el-card> -->
+            <!-- <el-tabs v-model="statusTab" class="card" type="card" @tab-click="onSelectTab"> -->
+            <!-- <el-tab-pane v-for="(composeElem,index) in composeElemList" :key="index" :label="composeElem.name" :name="composeElem.code" :lazy="true"> -->
             <!-- <table-form :ref="'tableform'+composeElem.code" :compose-elem="composeElem" /> -->
             <!-- stateList -->
-              </el-tab-pane>
+            <!-- </el-tab-pane> -->
-            </el-tabs>
+            <!-- </el-tabs> -->
           </div>
         </el-card>
       </div>
@@ -25,8 +40,10 @@
   </transition>
 </template>
 <script>
+import * as utils from '@/iscs_new/utils/utils';
 import iscsCanvas from './iscsCanvas';
-import { EventBus } from '@/scripts/event-bus';
+import orders from '@/iscs_new/utils/orders';
+import shapeType from '@/iscs_new/constant/shapeType.js';
 export default {
     name:'IscsPreview',
     components: {
@@ -37,42 +54,76 @@ export default {
             draftShow: false,
             selected: null,
             statusTab:'',
-            composeElemList:[]
+            stateList:[],
+            elementList:[]
         };
     },
     mounted() {
-        EventBus.$on('getComposeElemList', () => {
-            this.getComposeElemList();
-        });
     },
     methods:{
         onSelectTab() {
 
         },
-        getComposeElemList() {
+        setData(data ) {
-            const source = this.$iscs.getSource();
+            this.stateList = data.stateList;
-            if (source &&
+            this.elementList = utils.deepClone(data.shapeList);
-				source.elementList &&
-				source.elementList.length) {
-                this.composeElemList = source.elementList;
-                this.statusTab = this.composeElemList[0].code;
-            } else {
-                this.composeElemList = [];
-            }
         },
-        onSelected(em) {
+        previewStatus(data) {
-            // if (em.model) {
+            this.resetDefaultStatus();
-            //     this.selected = JSON.parse(JSON.stringify(em.model));
+            const that = this;
-            //     const elem = this.elementList.find(el => el.type == this.selected.type);
+            const list = Object.values(data.covertStatusList);
-            //     if (elem) {
+            list.forEach(each=>{
-            //         elem.model = this.selected;
+                if (each.loop) {
-            //         this.enabledTab = this.selected.type;
+                    debugger;
-            //         this.cardTab = 'first';
+                    // ChangeStatus
+                } else {
+                    const frameList = each.frameList;
+                    frameList.forEach(frame=>{
+                        const element = that.elementList.find(ele=>{ return ele.name == frame.name; });
+                        if (element) {
+                            const elementStyle = element.stateList.find(state=>{ return state.status == frame.status; });
+                            if (elementStyle) {
+                                const model = utils.deepClone(element);
+                                const style = elementStyle.style || {};
+                                // model.changeStyle =
+                                // if (style && JSON.stringify(style) != '{}') {
+                                //     const keys = Object.keys(style);
+                                //     keys.forEach(eachKey=>{
+                                //         model.style[eachKey] = style[eachKey];
+                                //     });
                                 // }
+                                const shape = elementStyle.shape || {};
+                                // if (shape && JSON.stringify(shape) != '{}') {
+                                //     const keys = Object.keys(shape);
+                                //     keys.forEach(eachShape=>{
+                                //         model.shape[eachShape] = style[eachShape];
+                                //     });
+                                // }
+                                // this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.ChangeStatus}}]);
+                            }
+                        }
+                    });
+                }
+            });
+        },
+        resetDefaultStatus() {
+            this.elementList.forEach(element=>{
+                const model = utils.deepClone(element);
+                // this.$refs.iscsCanvas.doAction([{model, action: {shapeType: shapeType.Element, order: orders.ResetStatus}}]);
+            });
+        },
+        // getComposeElemList() {
+        //     const source = this.$iscs.getSource();
+        //     if (source &&
+        // source.elementList &&
+        // source.elementList.length) {
+        //         this.composeElemList = source.elementList;
+        //         this.statusTab = this.composeElemList[0].code;
         //     } else {
-            //     this.selected = null;
+        //         this.composeElemList = [];
-            //     this.clear(this.enabledTab);
         //     }
+        // },
+        onSelected(em) {
         }
     }
 };
@@ -95,4 +146,21 @@ export default {
     background: #fff;
     z-index: 9;
 }
+.heightClass{height:100%;overflow:hidden;display:flex;width: 100%;flex-direction: column;}
+.eachStatus{
+    padding: 15px 30px;
+    border-bottom: 1px #ccc solid;
+    line-height: 150%;
+}
+.statelist{
+  height: 100%;
+  overflow: auto;
+}
+</style>
+<style lang="scss">
+.heightClass .el-card__body{
+  flex:1;
+  height: 100%;
+  overflow: hidden;
+}
 </style>

src/views/iscs_new/iscsPreview/iscsCanvas.vue

@@ -97,22 +97,22 @@ export default {
                 selecting: false,
                 selectable: false,
                 reflect: true
-			}
+            };
             if (this.$route.query.id) {
                 setTimeout(_ => {
-					Idb.select('composeList', this.$route.query.id).then(resp => {
+                    Idb.select('composeTemplateList', this.$route.query.id).then(resp => {
                         this.$iscs.setMap([], {
-							elementList: resp.elementList||[],
+                            elementList: resp.shapeList || [],
                             composeList: resp.composeList || []
                         }, option);
-                        EventBus.$emit('getComposeElemList');
+                        this.$emit('setData', resp);
                     }).catch(error => {
                         this.$iscs.setMap([], {
                             elementList: [],
                             composeList: []
                         }, option);
-					})
+                    });
-				}, 1000)
+                }, 1000);
             } else {
                 this.$iscs.setMap([], {
                     elementList: [],
@@ -169,7 +169,7 @@ export default {
                 this.$iscs = null;
                 Vue.prototype.$iscs = null;
             }
-        },
+        }
     }
 };
 </script>