iscs 新版预览界面调整

src/jmapNew/shape/Section/index.js

@@ -4,7 +4,6 @@ import ELimitLines from './ELimitLines'; // 区段限速 (私有)
 import ELines from './ELines'; // 创建多线条 曲线 (私有)
 import EblockLines from './EblockLines'; // 区段封锁特有
 import ESeparator from './ESeparator'; // 分隔符 (私有)
-import EDerailer from './EDerailer'; // 脱轨器
 import EMouse from './EMouse';
 import EAxle from './EAxle'; // 创建计轴
 // import { EBackArrow, EBackArrowTriangle } from './EBackArrow'; // 折返进路箭头
@@ -62,8 +61,7 @@ export default class Section extends Group {
                 'separator': ESeparator, // 分隔符
                 'speedLimit': ELimitLines, // 限速线
                 'speedLimitName': ELimitName, // 限速线名称
-                'shuttleBack': EBackArrowGroup, // 折返箭头 (成都三号线显示)
+                'shuttleBack': EBackArrowGroup // 折返箭头 (成都三号线显示)
-				'derailer': EDerailer, //脱轨器
             };
             // 遍历当前线路下的绘图元素
             const model = this.model;

src/router/index.js

@@ -62,6 +62,8 @@ const IscsStationConfig = () => import('@/views/iscs/iscsSystem/stationConfig/in
 
 const IscsNewDesign = () => import('@/views/iscs_new/iscsDesign/index');
 const IscsNewDraw = () => import('@/views/iscs_new/iscsDraw/index');
+const IscsNewPreview = () => import('@/views/iscs_new/iscsPreview/index');
+
 
 const NewMapDraft = () => import('@/views/newMap/newMapdraft/index');
 const NewDesignPlatformUser = () => import('@/views/newMap/newDesignUser/index');
@@ -225,6 +227,15 @@ export const constantRoutes = [
 			i18n: 'router.iscsDraw',
 			roles: [admin]
 		}
+    },
+    {
+		path:'/iscs_new/design/compose/preview',
+		hidden: true,
+		component: IscsNewPreview,
+		meta: {
+			i18n: 'router.iscsDraw',
+			roles: [admin]
+		}
     },
 	{
 		path:'/iscs_new/design/map/edit',

src/views/iscs_new/iscsDraw/index.vue

@@ -13,6 +13,12 @@
               style="float: right; padding: 3px 0; margin-right: 5px;"
               @click="onSave"
             >保存</el-button>
+            <el-button
+              v-if=" composeElemList.length>0"
+              type="text"
+              style="float: right; padding: 3px 0; margin-right: 5px;"
+              @click="onPreview"
+            >预览</el-button>
           </div>
           <el-tabs id="cardTab" v-model="cardTab" class="card" type="border-card" @tab-click="onSelectCardTab">
             <el-tab-pane label="元素绘制" name="first">
@@ -212,6 +218,9 @@ export default {
                     this.onSave();
                 }
             });
+        },
+        onPreview() {
+            this.$router.push({ path: `/iscs_new/design/compose/preview`, query:{id:this.$route.query.id} });
         }
     }
 };

src/views/iscs_new/iscsPreview/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="mapPaint">
+      <div class="map-view">
+        <iscs-canvas ref="iscsCanvas" @selected="onSelected" />
+      </div>
+      <div class="right-card">
+        <!-- :class="{'hide': draftShow}"  -->
+        <el-card type="border-card" class="heightClass">
+          <div slot="header" class="clearfix">
+            <!-- 组件id为{{ $route.query.id }}  -->
+            状态预览
+          </div>
+          <div class="stateList">
+            <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-table>
+
+                </el-table>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </el-card>
+      </div>
+    </div>
+  </transition>
+</template>
+<script>
+import iscsCanvas from './iscsCanvas';
+import { EventBus } from '@/scripts/event-bus';
+export default {
+    name:'IscsPreview',
+    components: {
+        iscsCanvas
+    },
+    data() {
+        return {
+            draftShow: false,
+            selected: null,
+            statusTab:'',
+            composeElemList:[]
+        };
+    },
+    mounted() {
+        EventBus.$on('getComposeElemList', () => {
+            this.getComposeElemList();
+        });
+    },
+    methods:{
+        onSelectTab() {
+
+        },
+        getComposeElemList() {
+            const source = this.$iscs.getSource();
+            if (source &&
+				source.elementList &&
+				source.elementList.length) {
+                this.composeElemList = source.elementList;
+                this.statusTab = this.composeElemList[0].code;
+                debugger;
+            } else {
+                this.composeElemList = [];
+            }
+        },
+        onSelected(em) {
+            // if (em.model) {
+            //     this.selected = JSON.parse(JSON.stringify(em.model));
+            //     const elem = this.elementList.find(el => el.type == this.selected.type);
+            //     if (elem) {
+            //         elem.model = this.selected;
+            //         this.enabledTab = this.selected.type;
+            //         this.cardTab = 'first';
+            //     }
+            // } else {
+            //     this.selected = null;
+            //     this.clear(this.enabledTab);
+            // }
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+    .mapPaint{
+        height: 100%;
+        overflow: hidden;
+        width:100%;
+        position:absolute;
+        left:0;top:0;
+    }
+    .right-card{
+        width: 500px;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top:0;
+        transition: all 0.5s;
+        background: #fff;
+        z-index: 9;
+    }
+</style>

src/views/iscs_new/iscsPreview/iscsCanvas.vue

@@ -0,0 +1,185 @@
+<template>
+  <div>
+    <div :id="iscsId" v-loading="loading" :style="{ width: width +'px', height: height +'px',background:'#425a74' }" class="iscs-canvas" />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import Iscs from '@/iscs_new/map';
+import Idb from '../utils/indexedDb.js';
+import ShapeBuilder from '@/iscs_new/plugins/shapeBuilder';
+import ShapeProperty from '@/iscs_new/plugins/shapeProperty';
+import { EventBus } from '@/scripts/event-bus';
+import ShapeContextMenu from '@/iscs_new/plugins/shapeContextMenu';
+import { mapGetters } from 'vuex';
+
+export default {
+    data() {
+        return {
+            dataZoom: {
+                offsetX: '0',
+                offsetY: '0',
+                scaleRate: '1'
+            },
+            config: {
+                scaleRate: '1',
+                origin: {
+                    x: 0,
+                    y: 0
+                }
+            },
+            loading: false
+        };
+    },
+    computed: {
+        ...mapGetters('iscs', [
+            'iscs'
+        ]),
+        iscsId() {
+            return ['iscs', (Math.random().toFixed(5)) * 100000].join('_');
+        },
+        width() {
+            return document.documentElement.clientWidth;
+        },
+        height() {
+            return document.documentElement.clientHeight;
+        }
+    },
+    watch: {
+        '$store.state.config.canvasSizeCount': function (val) {
+            this.resize();
+        },
+        '$store.state.socket.equipmentStatus': function (val) {
+            if (val.length) {
+                this.stateMessage(val);
+            }
+        }
+    },
+    mounted() {
+        this.init();
+    },
+    beforeDestroy() {
+        this.destroy();
+    },
+    methods: {
+		// 初始化窗口
+        init() {
+            document.getElementById(this.iscsId).oncontextmenu = function (e) {
+                return false;
+            };
+
+            this.$iscs = new Iscs({
+                dom: document.getElementById(this.iscsId),
+                draw: true,
+                config: {
+                    renderer: 'canvas',
+                    width: this.width,
+                    height: this.height
+                },
+                options: {
+                    scaleRate: 1,
+                    offsetX: 0,
+                    offsetY: 0
+                },
+				plugins: [
+					// ShapeBuilder,
+					// ShapeProperty,
+					// ShapeContextMenu
+				]
+            });
+
+			const option = {
+				panEnable: true,
+				zoomEnable: true,
+				keyEnable: true,
+				draggle: false,
+				selecting: false,
+				selectable: false,
+				reflect: true
+			}
+			if (this.$route.query.id) {
+				setTimeout(_ => {
+					Idb.select('composeList', this.$route.query.id).then(resp => {
+						this.$iscs.setMap([], {
+							elementList: resp.elementList||[],
+							composeList: resp.composeList||[]
+						}, option);
+                        EventBus.$emit('getComposeElemList');
+					}).catch(error => {
+						this.$iscs.setMap([], {
+							elementList: [],
+							composeList: []
+						}, option);
+					})
+				}, 1000)
+			} else {
+				this.$iscs.setMap([], {
+					elementList: [],
+					composeList: []
+				}, option);
+			}
+
+            Vue.prototype.$iscs = this.$iscs;
+            this.$iscs.on('viewLoaded', this.onViewLoaded, this);
+            this.$iscs.on('contextmenu', this.onContextMenu, this);
+            // this.$iscs.on('click', this.onClick, this);
+			this.$iscs.on('reflect', this.onReflect, this);
+            this.$iscs.on('keyboard', this.onKeyboard, this);
+            window.document.oncontextmenu = function () {
+                return false;
+            };
+        },
+		// 视图加载完成
+        onViewLoaded(e) {
+        },
+        // 键盘快捷键事件
+        onKeyboard(hook) {
+            console.log(hook);
+        },
+        // 点击选择事件
+        onClick(em={}) {
+			this.$emit('selected', em);
+        },
+		onReflect(em={}) {
+			this.$emit('selected', this.$iscs.getShapeByCode(em.code));
+		},
+        // 右键点击事件
+        onContextMenu(em={}) {
+			this.$emit('contextMenu', em.model);
+        },
+		// 执行操作
+		doAction(list) {
+			this.$iscs && this.$iscs.render(list);
+		},
+		// 消息处理
+		stateMessage(val) {
+            this.$iscs && this.$iscs.setDeviceStatus(val);
+        },
+		// 充值窗口大小
+        resize() {
+            this.$nextTick(() => {
+                this.$iscs && this.$iscs.resize({ width: this.width, height: this.height });
+            });
+        },
+		// 销毁
+        destroy() {
+            if (this.$iscs) {
+                this.$iscs.destroy();
+                this.$iscs = null;
+                Vue.prototype.$iscs = null;
+            }
+        },
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .iscs-button{
+        position: absolute;
+        float: right;
+        right: 20px;
+        bottom: 15px;
+    }
+    .iscs-canvas{
+    }
+</style>