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

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

<script>
import Vue from 'vue';
import IbpPan from '@/ibp/ibpPan';
import { parser } from '@/ibp/utils/parser';
import ibpData from '@/ibp/constant/ibpData';
import { mapGetters } from 'vuex';
import { exitFullscreen } from '@/utils/screen';
import { putJointTrainingSimulationUser } from '@/api/chat';
import { handlerIbpEvent } from '@/api/simulation';
import { IbpOperation } from '@/scripts/ConstDic';

export default {
    name: 'Ibp',
    props: {
        size: {
            type: Object,
            default() {
                return null;
            }
        }
    },
    data() {
        return {
            width: this.$store.state.config.width,
            height: this.$store.state.config.height,
            dataZoom: {
                offsetX: '0',
                offsetY: '0',
                scaleRate: '1'
            },
            config: {
                scaleRate: '1',
                origin: {
                    x: 0,
                    y: 0
                }
            },
            showBackButton: true,
            initTime: '',
            started: false,
            loading: false,
            stationCode: ''
        };
    },
    computed: {
        ...mapGetters([
            'canvasWidth',
            'canvasHeight'
        ]),
        ibpId() {
            return ['ibp', (Math.random().toFixed(5)) * 100000].join('_');
        }
    },
    watch: {
        '$store.state.config.canvasSizeCount': function (val) {
            this.reSize();
        },
        '$store.state.app.windowSizeCount': function() {
            this.setWindowSize();
        },
        '$store.state.training.initTime': function (initTime) {
            this.initTime = initTime;
            if (this.$ibp) {
                this.initClockTime(initTime);
            }
        },
        '$store.state.training.started': function (started) {
            this.started = started;
            if (this.$ibp) {
                this.setClockStart(started);
            }
        },
        '$store.state.socket.equipmentStatus': function (val) {
            if (val.length) {
                this.statusMessage(val);
            }
        }
    },
    mounted() {
        this.setWindowSize();
    },
    beforeDestroy() {
        this.ibpDestroy();
    },
    methods: {
        show (deviceCode, ibpPart) {
		    if (!deviceCode) {
		        return;
            }
            this.stationCode = deviceCode;
            document.getElementById(this.ibpId).oncontextmenu = function (e) {
                return false;
            };
		    let offsetX = 0;
		    if (ibpPart === 'left') {
                offsetX = 0;
            } else if (ibpPart === 'right') {
                offsetX = 1920;
            }
            this.ibpDestroy();
            this.loading = true;
            const data = parser(ibpData[deviceCode], {width: this.canvasWidth, height: this.canvasHeight});
            this.$ibp = new IbpPan({
                dom: document.getElementById(this.ibpId),
                config: {
                    renderer: 'canvas',
                    width: this.canvasWidth,
                    height: this.canvasHeight
                },
                options: {
                    scaleRate: 1,
                    offsetX: offsetX,
                    offsetY: 0
                },
                methods: {
                    viewLoaded: this.handleViewLoaded
                }
            });
            Vue.prototype.$ibp = this.$ibp;
            this.$ibp.on('contextmenu', this.onContextMenu, this);
            if (this.$route.query.group) {
                this.$ibp.on('selected', this.onSelected, this);
            }
            this.setMap(data, ibpData[deviceCode]);
            this.$store.dispatch('ibp/setIbpData', ibpData[deviceCode]);
            this.initClockTime(this.initTime);
            window.document.oncontextmenu = function () {
                return false;
            };
        },
        setMap(data, oldData) {
            this.$ibp.setMap(oldData, data);
        },
        // 点击选择事件
        onSelected(em) {
		    if (em.deviceModel.mean) {
                const params = { operate:IbpOperation[em.deviceModel.mean].operate, stationCode:this.stationCode };
                handlerIbpEvent(this.$route.query.group, params);
            }
        },
        // 右键点击事件
        onContextMenu(em) {
		    this.$store.dispatch('ibp/setUpdateDeviceData', em.eventTarget.model);
        },
        // 绘图时调用，元素可拖拽
        drawIbpInit() {
            this.$ibp && this.$ibp.drawIbpInit();
            this.showBackButton = false;
        },
        // 初始化电子表时间
        initClockTime(initTime) {
            this.$ibp.initClockTime(initTime);
        },
        // 设置电子时钟开始或停止
        setClockStart(started) {
            this.$ibp.setClockStart(started);
        },
        reSize() {
            this.$nextTick(() => {
                this.width = this.$store.state.config.width;
                this.height = this.$store.state.config.height;
                this.$ibp && this.$ibp.resize({ width: this.width, height: this.height });
            });
        },
        setWindowSize() {
            this.$nextTick(() => {
                const width = this.size ? this.size.width : this.$store.state.app.width;
                const height = this.size ? this.size.height : this.$store.state.app.height;
                this.$store.dispatch('config/resize', { width: width, height: height });
            });
        },
        back() {
            this.group = this.$route.query.group;
            this.$store.dispatch('training/over').then(() => {
                putJointTrainingSimulationUser(this.group).then(() => {
                    this.$router.push({ path: `/trainroom`, query: { group: this.group } });
                    exitFullscreen();
                });
            });
        },
        ibpDestroy() {
            if (this.$ibp) {
                this.$ibp.dispose();
                this.$ibp = '';
                Vue.prototype.$ibp = '';
            }
        },
        handleViewLoaded() {
            this.loading = false;
        },
        statusMessage(val) {
            this.$ibp && this.$ibp.setDeviceStatus(val);
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .ibp-button{
        position: absolute;
        float: right;
        right: 20px;
        bottom: 15px;
    }
    .ibp-canvas{
    }
</style>