rt-sim-training-client/src/views/iscsSystem/index.vue

<template>
  <div>
    <div :id="iscsId" v-loading="loading" :style="{ width: this.canvasWidth +'px', height: this.canvasHeight +'px',background:'#000' }" class="iscs-canvas" />
    <el-button v-if="showBackButton" class="iscs-button" type="primary" @click="back">{{ $t('global.back') }}</el-button>
  </div>
</template>

<script>
import Vue from 'vue';
import Iscs from '@/iscs/iscs';
import { parser } from '@/iscs/utils/parser';
import iscsData from '@/iscs/constant/iscsData';
import { mapGetters } from 'vuex';
import { exitFullscreen } from '@/utils/screen';
import { putJointTrainingSimulationUser } from '@/api/chat';
import { handlerIscsEvent } from '@/api/simulation';
import { IscsOperation } from '@/scripts/ConstDic';

export default {
    name: 'Iscs',
    props: {
        size: {
            type: Object,
            default() {
                return null;
            }
        }
    },
    data() {
        return {
            dataZoom: {
                offsetX: '0',
                offsetY: '0',
                scaleRate: '1'
            },
            config: {
                scaleRate: '1',
                origin: {
                    x: 0,
                    y: 0
                }
            },
            showBackButton: true,
            initTime: '',
            started: false,
            loading: false,
            stationCode: '',
            banUpOpenScreenDoor: false,
            banDownOpenScreenDoor: false
        };
    },
    computed: {
        ...mapGetters([
            'canvasWidth',
            'canvasHeight'
        ]),
        iscsId() {
            return ['iscs', (Math.random().toFixed(5)) * 100000].join('_');
        },
        width() {
            return this.$store.state.config.width;
        },
        height() {
            return this.$store.state.config.height;
        }
    },
    watch: {
        '$store.state.config.canvasSizeCount': function (val) {
            this.reSize();
        },
        '$store.state.socket.equipmentStatus': function (val) {
            if (val.length) {
                this.statusMessage(val);
            }
        }
    },
    mounted() {
    },
    beforeDestroy() {
        this.iscsDestroy();
    },
    methods: {
        show (deviceCode) {
            if (!deviceCode) {
                return;
            }
            document.getElementById(this.iscsId).oncontextmenu = function (e) {
                return false;
            };
            this.iscsDestroy();
            this.loading = true;
            const data = parser(iscsData[deviceCode], {width: this.canvasWidth, height: this.canvasHeight});
            this.$iscs = new Iscs({
                dom: document.getElementById(this.iscsId),
                config: {
                    renderer: 'canvas',
                    width: this.width,
                    height: this.height
                },
                options: {
                    scaleRate: 1,
                    offsetX: 0,
                    offsetY: 0
                },
                methods: {
                    viewLoaded: this.handleViewLoaded
                }
            });
            Vue.prototype.$iscs = this.$iscs;
            this.$iscs.on('contextmenu', this.onContextMenu, this);
            if (this.$route.query.group) {
                this.$iscs.on('selected', this.onSelected, this);
            }
            this.setIscs(data, iscsData[deviceCode]);
            this.$store.dispatch('iscs/setIscsData', iscsData[deviceCode]);
            window.document.oncontextmenu = function () {
                return false;
            };
        },
        setIscs(data, oldData) {
            this.$iscs.setIscs(oldData, data);
        },
        // 点击选择事件
        onSelected(em) {
            if (em.deviceModel.mean) {
                switch (IscsOperation[em.deviceModel.mean].event) {
                case 'UpHoldTrain':
                case 'UpCancelHoldTrain':
                case 'DownHoldTrain':
                case 'DownCancelHoldTrain':
                    handlerIscsEvent(this.$route.query.group, {operate:IscsOperation[em.deviceModel.mean].operate, stationCode:this.stationCode});
                    break;
                case 'BanUpOpenScreenDoor':
                    this.banUpOpenScreenDoor = !this.banUpOpenScreenDoor;
                    break;
                case 'BanDownOpenScreenDoor':
                    this.banDownOpenScreenDoor = !this.banDownOpenScreenDoor;
                    break;
                case 'UpOpenScreenDoor':
                    this.openScreenDoor(this.banUpOpenScreenDoor, IscsOperation[em.deviceModel.mean].operate);
                    break;
                case 'DownOpenScreenDoor':
                    this.openScreenDoor(this.banDownOpenScreenDoor, IscsOperation[em.deviceModel.mean].operate);
                    break;
                }
            }
        },
        openScreenDoor(flag, operate) {
            if (flag) {
                handlerIscsEvent(this.$route.query.group, {operate: operate, stationCode:this.stationCode});
            }
        },
        // 右键点击事件
        onContextMenu(em) {
            this.$store.dispatch('iscs/setUpdateDeviceData', em.eventTarget.model);
        },
        // 绘图时调用，元素可拖拽
        drawIscsInit() {
            this.$iscs && this.$iscs.drawIscsInit();
            this.showBackButton = false;
        },
        reSize() {
            this.$nextTick(() => {
                this.width = this.$store.state.config.width;
                this.height = this.$store.state.config.height;
                this.$iscs && this.$iscs.resize({ width: this.width, height: this.height });
            });
        },
        back() {
            this.group = this.$route.query.group;
            this.$store.dispatch('training/over').then(() => {
                putJointTrainingSimulationUser(this.group).then(() => {
                    this.$router.replace({ path: `/trainroom`, query: { group: this.group, lineCode:this.$route.query.lineCode } });
                    exitFullscreen();
                });
            });
        },
        iscsDestroy() {
            if (this.$iscs) {
                this.$iscs.dispose();
                this.$iscs = '';
                Vue.prototype.$iscs = '';
            }
        },
        handleViewLoaded() {
            this.loading = false;
        },
        statusMessage(val) {
            this.$iscs && this.$iscs.setDeviceStatus(val);
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .iscs-button{
        position: absolute;
        float: right;
        right: 20px;
        bottom: 15px;
    }
    .iscs-canvas{
    }
</style>