From 62eb86e5ecd7e5f409af3235377fe69b4cdcf3e9 Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Wed, 7 Apr 2021 18:10:51 +0800
Subject: [PATCH] =?UTF-8?q?iscs=20=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/iscs_new/iscsDraw/iscsCanvas.vue | 414 +++++++++++++++++++++
 1 file changed, 414 insertions(+)
 create mode 100644 src/views/iscs_new/iscsDraw/iscsCanvas.vue

diff --git a/src/views/iscs_new/iscsDraw/iscsCanvas.vue b/src/views/iscs_new/iscsDraw/iscsCanvas.vue
new file mode 100644
index 000000000..376cce795
--- /dev/null
+++ b/src/views/iscs_new/iscsDraw/iscsCanvas.vue
@@ -0,0 +1,414 @@
+<template>
+  <div>
+    <!-- <div>
+      <el-row>
+        <el-input v-model="json" type="textarea" :rows="4" />
+        <el-button @click="doRemove"> 删除 </el-button>
+        <el-button @click="doUnbinding">解绑</el-button>
+        <el-button @click="doSource"> 源数据 </el-button>
+      </el-row>
+    </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 orders from '@/iscs_new/utils/orders';
+// import shapeType from '@/iscs_new/constant/shapeType';
+import { mapGetters } from 'vuex';
+// import { exitFullscreen } from '@/utils/screen';
+
+export default {
+    data() {
+        return {
+            json: '{}',
+            dataZoom: {
+                offsetX: '0',
+                offsetY: '0',
+                scaleRate: '1'
+            },
+            config: {
+                scaleRate: '1',
+                origin: {
+                    x: 0,
+                    y: 0
+                }
+            },
+            selected: null, // 选择复制元素
+            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();
+        this.$iscs.modelBuilder.addEventListener();
+    },
+    beforeDestroy() {
+        this.$iscs.modelBuilder.removeEventListener();
+        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
+                }
+            });
+
+            Vue.prototype.$iscs = this.$iscs;
+            this.$iscs.on('viewLoaded', this.onUpdate, this);
+            this.$iscs.on('contextmenu', this.onContextMenu, this);
+            this.$iscs.on('selected', this.onSelected, this);
+            this.$iscs.on('keyboard', this.onKeyboard, this);
+
+            // this.$iscs.setMap([
+            //     {
+            //         type: 'Device',
+            //         name: 'test',
+            //         isActive: false,
+            //         isFocus: false,
+            //         shapeList: [
+            //             { 	name: 'a',
+            //                 type: 'Rect',
+            //                 shape: {},
+            //                 style: {
+            //                     fill: 'red',
+            //                     stroke: 'black'
+            //                 },
+            //                 stateList: [
+            //                     { status: 'st1', sightless: false, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
+            //                     { status: 'st2', sightless: false, shape: {}, style:{ fill: 'blue', stroke: 'black'} }
+            //                 ]
+            //             },
+            //             { 	name: 'b',
+            //                 type: 'Circle',
+            //                 shape: {},
+            //                 style: {
+            //                     fill: 'red',
+            //                     stroke: 'black'
+            //                 },
+            //                 stateList: [
+            //                     { status: 'st1', sightless: false, shape: {}, style:{ fill: 'yellow', stroke: 'black'} },
+            //                     { status: 'st2', sightless: false, shape: {}, style:{ fill: 'blue', stroke: 'black'} }
+            //                 ]
+            //             }
+            //         ],
+            //         stateList: [
+            //             { status: 's1', frameList: [[{name: 'a', status: 'st1'}, {name: 'b', status: 'st1'}], [{name: 'a', status: 'st2'}]], weight: 2, loop: true, delay: 2000, time: 200, needDefault: true },
+            //             { status: 's2', frameList: [[{name: 'a', status: 'st2'}, {name: 'b', status: 'st1'}], [{name: 'a', status: 'st1'}, {name: 'b', status: 'st2'}]], weight: 1, loop: true, delay: 5000, time: 500, needDefault: false }
+            //         ]
+            //     }
+            // ], {
+            //     elementList: [
+            //         {
+            //             code: '1',
+            //             name: 'a',
+            //             type: 'Rect',
+            //             scale: [1, 1],
+            //             position: [0, 0],
+            //             rotation: 0,
+            //             shape: {
+            //                 x: 100,
+            //                 y: 100,
+            //                 width: 30,
+            //                 height: 30
+            //             },
+            //             style: {
+            //                 fill: 'red',
+            //                 stroke: 'black'
+            //             },
+            //             sightless: false,
+            //             composeCode: '100'
+            //         },
+            //         {
+            //             code: '2',
+            //             name: 'b',
+            //             type: 'Circle',
+            //             scale: [1, 1],
+            //             position: [0, 0],
+            //             rotation: 0,
+            //             shape: {
+            //                 cx: 100,
+            //                 cy: 100,
+            //                 r: 10
+            //             },
+            //             style: {
+            //                 fill: 'red',
+            //                 stroke: 'black'
+            //             },
+            //             sightless: false,
+            //             composeCode: '100'
+            //         },
+            //         {
+            //             code: '3',
+            //             name: 'a',
+            //             type: 'Rect',
+            //             scale: [1, 1],
+            //             position: [0, 0],
+            //             rotation: Math.PI / 4,
+            //             shape: {
+            //                 x: 200,
+            //                 y: 100,
+            //                 width: 30,
+            //                 height: 30
+            //             },
+            //             style: {
+            //                 fill: 'red',
+            //                 stroke: 'black'
+            //             },
+            //             sightless: false,
+            //             composeCode: '101'
+            //         },
+            //         {
+            //             code: '4',
+            //             name: 'b',
+            //             type: 'Circle',
+            //             scale: [1, 1],
+            //             position: [0, 0],
+            //             rotation: 0,
+            //             scale: [0.5, 0.5],
+            //             shape: {
+            //                 cx: 200,
+            //                 cy: 100,
+            //                 r: 10
+            //             },
+            //             style: {
+            //                 fill: 'red',
+            //                 stroke: 'black'
+            //             },
+            //             sightless: false,
+            //             composeCode: '101'
+            //         },
+            //         {
+            //             code: '5',
+            //             name: 'c',
+            //             type: 'Droplet',
+            //             scale: [0.5, 0.5],
+            //             position: [0, 0],
+            //             rotation: 0,
+            //             shape: {
+            //                 cx: 300,
+            //                 cy: 200,
+            //                 width: 30,
+            //                 height: 30
+            //             },
+            //             style: {
+            //                 fill: 'red',
+            //                 stroke: 'black'
+            //             },
+            //             sightless: false,
+            //             composeCode: ''
+            //         },
+            //         {
+            //             code: '6',
+            //             name: 'd',
+            //             type: 'Droplet',
+            //             scale: [1, 1],
+            //             position: [0, 0],
+            //             rotation: Math.PI / 2,
+            //             shape: {
+            //                 cx: 400,
+            //                 cy: 200,
+            //                 width: 20,
+            //                 height: 20
+            //             },
+            //             style: {
+            //                 fill: 'red',
+            //                 stroke: 'black'
+            //             },
+            //             sightless: false,
+            //             composeCode: ''
+            //         },
+            //         {
+            //             code: '7',
+            //             name: 'a',
+            //             type: 'Rect',
+            //             scale: [1, 1],
+            //             position: [100, 0],
+            //             rotation: Math.PI / 2,
+            //             shape: {
+            //                 x: 100,
+            //                 y: 100,
+            //                 width: 30,
+            //                 height: 60
+            //             },
+            //             style: {
+            //                 fill: 'red',
+            //                 stroke: 'black'
+            //             },
+            //             sightless: false,
+            //             composeCode: ''
+            //         }
+            //     ],
+            //     composeList: [
+            //         {
+            //             code: '100',
+            //             type: 'Device',
+            //             elementCodes: ['1', '2'],
+            //             scale: [0.5, 0.5],
+            //             position: [100, 100],
+            //             rotation: Math.PI / 2,
+            //             sightless: false,
+            //             composeCode: '1000'
+            //         },
+            //         {
+            //             code: '101',
+            //             type: 'Device',
+            //             elementCodes: ['3', '4'],
+            //             scale: [1, 1],
+            //             position: [200, 0],
+            //             rotation: 0,
+            //             sightless: false,
+            //             composeCode: '1000'
+            //         },
+            //         {
+            //             code: '1000',
+            //             type: 'Device',
+            //             scale: [1, 1],
+            //             position: [0, 0],
+            //             rotation: 0,
+            //             elementCodes: ['100', '101'],
+            //             sightless: false,
+            //             composeCode: ''
+            //         }
+            //     ]
+            // }, {
+            //     panEnable: true,
+            //     zoomEnable: true,
+            //     keyEnable: true,
+            //     draggle: true,
+            //     selecting: true,
+            //     selectable: true,
+            //     reflect: true
+            // });
+
+            window.document.oncontextmenu = function () {
+                return false;
+            };
+        },
+        onUpdate(e) {
+            // this.$iscs.update([
+            //     { status: 's1', code: '100', type: 'Device' },
+            //     { status: 's2', code: '101', type: 'Device' }
+            // ]);
+            setTimeout(e => {
+                // this.$iscs.update([
+                // 	{ status: 's0', code: '100', type: 'Device' },
+                // 	{ status: 's0', code: '101', type: 'Device' },
+                // ])
+            }, 15000);
+        },
+        // 键盘快捷键事件
+        onKeyboard(hook) {
+            console.log(hook);
+        },
+        // 点击选择事件
+        onSelected(em) {
+            this.selected = em;
+            console.log(em, 'selected');
+        },
+        // 右键点击事件
+        onContextMenu(em) {
+            this.selected = em;
+            console.log(em, 'contextMenu');
+        },
+        resize() {
+            this.$nextTick(() => {
+                this.$iscs && this.$iscs.resize({ width: this.width, height: this.height });
+            });
+        },
+        // back() {
+        //     this.group = this.$route.query.group;
+        //     this.$store.dispatch('training/over').then(() => {
+        //         putJointTrainingSimulationUserNew(this.group).then(() => {
+        //             this.$router.replace({ path: `/trainroom`, query: { group: this.group, lineCode:this.$route.query.lineCode } });
+        //             exitFullscreen();
+        //         });
+
+        //     });
+        // },
+        destroy() {
+            if (this.$iscs) {
+                this.$iscs.destroy();
+                this.$iscs = null;
+                Vue.prototype.$iscs = null;
+            }
+        },
+        stateMessage(val) {
+            this.$iscs && this.$iscs.setDeviceStatus(val);
+        }
+        // doRemove() {
+        //     if (this.selected) {
+        //         this.$iscs.render([
+        //             {
+        //                 model: this.selected.model,
+        //                 action: { order: orders.DELETE, shapeType: shapeType.Compose }
+        //             }
+        //         ]);
+        //     }
+        // },
+        // doUnbinding() {
+        //     if (this.selected) {
+        //         this.$iscs.render([
+        //             {
+        //                 model: this.selected.model,
+        //                 action: { order: orders.UNBINDING, shapeType: shapeType.Compose }
+        //             }
+        //         ]);
+        //     }
+        // },
+        // doSource() {
+        //     console.log(this.$iscs.getSource());
+        //     this.json = JSON.stringify(this.$iscs.getSource());
+        // }
+    }
+};
+</script>
+<style rel="stylesheet/scss" lang="scss" scoped>
+    .iscs-button{
+        position: absolute;
+        float: right;
+        right: 20px;
+        bottom: 15px;
+    }
+    .iscs-canvas{
+    }
+</style>