From 72fadaa8669b743bec11575b4f822982c4e297e0 Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Tue, 30 Mar 2021 10:29:48 +0800
Subject: [PATCH] =?UTF-8?q?iscs=E6=96=B0=E7=89=88=E7=BB=98=E5=9B=BE?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                     |  30 ++++
 src/views/iscs_new/iscsDesign/index.vue | 128 ++++++++++++++++
 src/views/iscs_new/iscsDraw/index.vue   | 191 ++++++++++++++++++++++++
 3 files changed, 349 insertions(+)
 create mode 100644 src/views/iscs_new/iscsDesign/index.vue
 create mode 100644 src/views/iscs_new/iscsDraw/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index b984b5659..f7b029a2d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -59,6 +59,9 @@ const IscsDesign = () => import('@/views/iscs/iscsDesign/index');
 const IscsConfig = () => import('@/views/iscs/iscsSystem/config/index');
 const IscsStationConfig = () => import('@/views/iscs/iscsSystem/stationConfig/index');
 
+const IscsNewDesign = () => import('@/views/iscs_new/iscsDesign/index');
+const IscsNewDraw = () => import('@/views/iscs_new/iscsDraw/index');
+
 const NewMapDraft = () => import('@/views/newMap/newMapdraft/index');
 const NewDesignPlatformUser = () => import('@/views/newMap/newDesignUser/index');
 
@@ -1138,6 +1141,33 @@ export const asyncRouter = [
             }
         ]
     },
+    {
+        path: '/iscs_new',
+        component: Layout,
+        hidden: true,
+        meta: {
+            i18n: 'router.iscsSystem',
+            roles: [admin]
+        },
+        children: [
+            {
+                path:'design',
+                redirect: '/iscs/design/edit',
+                component: IscsNewDesign,
+                meta: {
+                    i18n: 'router.iscsDraw',
+                    roles: [admin]
+                },
+                children: [
+                    {
+                        path: 'edit',
+                        component: IscsNewDraw,
+                        hidden: true
+                    }
+                ]
+            }
+        ]
+    },
     { // iscs系统
         path: '/iscs',
         component: Layout,
diff --git a/src/views/iscs_new/iscsDesign/index.vue b/src/views/iscs_new/iscsDesign/index.vue
new file mode 100644
index 000000000..5e8ebbbb4
--- /dev/null
+++ b/src/views/iscs_new/iscsDesign/index.vue
@@ -0,0 +1,128 @@
+<template>
+  <div class="app-wrapper">
+    <div class="left-card" :class="{'hide': viewShow}">
+      <div class="btn_right_box" @click="clickLeftBtn"><i :class="viewShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
+      <div class="examList" style="width:100%">
+        <!-- <demon-list ref="demonList" @createMap="createMap" /> -->
+      </div>
+    </div>
+    <transition>
+      <router-view />
+    </transition>
+    <!-- <context-menu /> -->
+    <!-- <map-create ref="mapCreate" :line-code="lineCode" @refresh="refresh" /> -->
+  </div>
+</template>
+
+<script>
+// import demonList from './demonList';
+import { launchFullscreen } from '@/utils/screen';
+import { getSessionStorage, setSessionStorage } from '@/utils/auth';
+// import MapCreate from './mapmanage/create';
+// import ContextMenu from './contextMenu';
+
+export default {
+    name: 'DesignPlatform',
+    components: {
+        // demonList,
+        // MapCreate,
+        // ContextMenu
+    },
+    data() {
+        return {
+            lineCode: '',
+            viewShow: false,
+            widthLeft: 450
+        };
+    },
+    computed: {
+        width() {
+            return this.$store.state.app.width;
+        }
+    },
+    watch: {
+        '$store.state.app.windowSizeCount': function() {
+            this.resize();
+        }
+    },
+    created() {
+        this.resize();
+    },
+    mounted() {
+        const againEnter = getSessionStorage('againEnter') || null;
+        if (!againEnter) {
+            launchFullscreen();
+            setSessionStorage('againEnter', true);
+        }
+    },
+    methods: {
+        refresh() {
+            this.$refs && this.$refs.demonList && this.$refs.demonList.loadInitData();
+        },
+        // createMap() {
+        //     this.$refs.mapCreate.show();
+        // },
+        resize() {
+            const width = this.$store.state.app.width;
+            const height = this.$store.state.app.height - 90;
+            this.$store.dispatch('config/resize', { width: width, height: height });
+        },
+        setMapResize(LeftWidth) {
+            const width = this.$store.state.app.width;
+            const height = this.$store.state.app.height - 90;
+            this.$store.dispatch('config/resize', { width: width, height: height });
+        },
+        clickLeftBtn() {
+            this.viewShow = !this.viewShow;
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .app-wrapper {
+        @include clearfix;
+        position: relative;
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+    }
+
+	.left-card{
+		width: 470px;
+		height: 100%;
+		position: absolute;
+		left: 0;
+		transform: translateX(-470px);
+		transition: all 0.5s;
+		background: #fff;
+		z-index: 9;
+		/deep/{
+			.v-modal{
+				opacity: 0;
+			}
+		}
+
+		&.hide{
+			transform: translateX(0);
+		}
+
+		.examList {
+			float: left;
+			height: 100%;
+		}
+
+		.btn_right_box{
+			position: absolute;
+			right: 0;
+			top: 50%;
+			padding: 8px 3px;
+			background: #fff;
+			z-index: 10;
+			transform: translateX(22px);
+			cursor: pointer;
+			border-radius: 0 5px 05px 0;
+		}
+    }
+</style>
diff --git a/src/views/iscs_new/iscsDraw/index.vue b/src/views/iscs_new/iscsDraw/index.vue
new file mode 100644
index 000000000..4133ceddc
--- /dev/null
+++ b/src/views/iscs_new/iscsDraw/index.vue
@@ -0,0 +1,191 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div class="mapPaint">
+      <div class="map-view">
+        <iscs-plate ref="iscsPlate" @iscsChange="iscsChange" />
+      </div>
+      <div class="right-card" :class="{'hide': draftShow}">
+        <div class="btn_draft_box" @click="clickDraftBtn"><i :class="draftShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
+        <!-- <iscs-operate v-if="iscsMode==='fas'" ref="iscsOperate" @iscsChange="iscsChange" @handleSave="handleSave" /> -->
+        <!-- <iscs-bas-operate v-else-if="iscsMode==='bas'" ref="iscsBasOperate" @iscsChange="iscsChange" @handleSave="handleSave" /> -->
+        <!-- <iscs-psd-operate v-else-if="iscsMode==='psd'" ref="iscsPsdOperate" @iscsChange="iscsChange" @handleSave="handleSave" /> -->
+        <!-- <iscs-cctv-operate v-else-if="iscsMode==='cctv'" ref="iscsCctvOperate" @iscsChange="iscsChange" @handleSave="handleSave" /> -->
+        <!-- <iscs-afc-operate v-else-if="iscsMode==='afc'" ref="iscsAfcOperate" @iscsChange="iscsChange" @handleSave="handleSave" /> -->
+        <!-- <iscs-acs-operate v-else-if="iscsMode==='acs'" ref="iscsAcsOperate" @iscsChange="iscsChange" @handleSave="handleSave" /> -->
+        <!-- <iscs-net-operate v-else-if="iscsMode==='netState'" ref="iscsNetOperate" @iscsChange="iscsChange" @handleSave="handleSave" /> -->
+        <!-- <iscs-automatic v-else-if="iscsMode==='afc02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" />  -->
+        <!-- 自动售检票/门禁 -->
+        <!-- <iscs-communication v-else-if="iscsMode==='communication02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" />  -->
+        <!-- 通信 -->
+        <!-- <iscs-fire-alarm v-else-if="iscsMode==='fas02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" />  -->
+        <!-- 火灾报警系统 -->
+        <!-- <iscs-power-monitoring v-else-if="iscsMode==='powerMonitoring02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" />   -->
+        <!-- 电力监控系统 -->
+        <!-- <iscs-signal-system v-else-if="iscsMode==='signalSystem02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" />  -->
+        <!-- 信号系统 -->
+        <!-- <iscs-environment v-else-if="iscsMode=='environment02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" />  -->
+        <!-- 环境与设备监控系统 -->
+        <!-- <iscs-psd v-else-if="iscsMode=='psdSystem02'" ref="" @iscsChange="iscsChange" @handleSave="handleSave" />  -->
+        <!-- 屏蔽门系统 -->
+      </div>
+      <div class="right-card" :class="{'hide': tableShow}">
+        <div class="btn_table_box" @click="clickTableBtn"><i :class="tableShow?'el-icon-arrow-right':'el-icon-arrow-left'" /></div>
+        <!-- <group-card @handleSave="handleSave" /> -->
+      </div>
+    </div>
+  </transition>
+</template>
+<script>
+import localStore from 'storejs';
+import IscsPlate from '@/views/iscsSystem/index';
+// import IscsOperate from './iscsOperate/index';
+// import IscsBasOperate from './iscsBasOperate/index';
+// import IscsPsdOperate from './iscsPsdOperate/index';
+// import IscsCctvOperate from './iscsCctvOperate/index';
+// import IscsAfcOperate from './iscsAfcOperate/index';
+// import IscsAcsOperate from './iscsAcsOperate/index';
+// import IscsNetOperate from './IscsNetOperate/index';
+// import IscsAutomatic from './iscsAutomatic/index';
+// import IscsCommunication from './iscsCommunication/index';
+// import IscsFireAlarm from './iscsFireAlarm/index';
+// import IscsPowerMonitoring from './iscsPowerMonitoring/index';
+// import IscsSignalSystem from './iscsSignalSystem/index';
+// import IscsPsd from './iscsPsd/index';
+// import IscsEnvironment from './iscsEnvironment/index';
+// import GroupCard from './group/card.vue';
+import { saveIscsElement } from '@/api/iscs';
+
+export default {
+    name: 'IscsView',
+    components: {
+        IscsPlate
+        // IscsOperate,
+        // IscsBasOperate,
+        // IscsPsdOperate,
+        // IscsCctvOperate,
+        // IscsAfcOperate,
+        // IscsAcsOperate,
+        // IscsNetOperate,
+        // IscsAutomatic,
+        // IscsCommunication,
+        // IscsFireAlarm,
+        // IscsPowerMonitoring,
+        // IscsSignalSystem,
+        // IscsPsd,
+        // IscsEnvironment,
+        // GroupCard
+    },
+    data() {
+        return {
+            size: {
+                width: this.$store.state.app.width - 521,
+                height: this.$store.state.app.height - 60
+            },
+            widthLeft: Number(localStore.get('LeftWidth')) || 450,
+            draftShow: false,
+            tableShow: false
+        };
+    },
+    computed:{
+        iscsMode() {
+            return this.$route.query.mode;
+        }
+    },
+    watch: {
+        $route(val) {
+            this.iscsChange(this.$route.query.mode, this.$route.query.system, this.$route.query.part);
+        }
+    },
+    mounted() {
+        this.$refs.iscsPlate.show(this.$route.query.mode, this.$route.query.system, this.$route.query.part);
+        this.$refs.iscsPlate.drawIscsInit();
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+        iscsChange(mode, system, part) {
+            this.$refs.iscsPlate.show(mode, system, part);
+            this.$refs.iscsPlate.drawIscsInit();
+        },
+        clickDraftBtn() {
+            this.draftShow = !this.draftShow;
+        },
+        clickTableBtn() {
+            this.tableShow = !this.tableShow;
+        },
+        handleSave(data) {
+            const param = {
+                graphData: data,
+                mapId: this.$route.query.mapId,
+                system: this.$route.query.system,
+                totalSystem: this.$route.query.mode,
+                userInterface: this.$route.query.part
+            };
+            saveIscsElement(param).then(resp => {
+                this.$message.success('ISCS数据保存成功！');
+            }).catch(() => {
+                this.$message.error('ISCS数据保存异常！');
+            });
+        }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    @import "src/styles/mixin.scss";
+
+    .map-view {
+        float: left;
+        width: 100%;
+    }
+
+	.mapPaint{
+        height: 100%;
+        overflow: hidden;
+    }
+
+	.right-card{
+		width: 470px;
+		height: 100%;
+		position: absolute;
+		right: 0;
+		transform: translateX(470px);
+		transition: all 0.5s;
+		background: #fff;
+		z-index: 9;
+		/deep/{
+			.v-modal{
+				opacity: 0;
+			}
+		}
+		&.hide{
+			transform: translateX(0);
+		}
+
+		.btn_draft_box{
+			position: absolute;
+			left: 0;
+			top: 50%;
+			padding: 8px 3px;
+			background: #fff;
+			z-index: 10;
+			transform: translateX(-22px);
+			cursor: pointer;
+			border-radius: 5px 0 0 5px;
+            box-shadow: -2px 0px 2px #000000;
+		}
+
+		.btn_table_box {
+			position: absolute;
+			left: 0;
+			top: calc(50% +  50px);
+			padding: 8px 3px;
+			background: #fff;
+			z-index: 10;
+			transform: translateX(-22px);
+			cursor: pointer;
+			border-radius: 5px 0 0 5px;
+            box-shadow: -2px 0px 2px #000000;
+		}
+    }
+</style>