模块添加双击放大功能

whyczyk

2021-10-18 edba26ba8377814d94b65b4a1a1fe04f0365afc9

模块添加双击放大功能

 src/components/charts/AcInput.vue

@@ -1,144 +1,144 @@
<template>
    <div class="echarts-wrapper">
        <div class="echarts-content" ref="chart"></div>
        <div class="echarts-text-wrapper">
            <div class="color-strip" :style="{'backgroundColor':resColor}"></div>
            <div class="echarts-text">
                {{title}}
            </div>
        </div>
    </div>
    <div class="echarts-wrapper">
        <div class="echarts-content" ref="chart"></div>
        <div class="echarts-text-wrapper">
            <div class="color-strip" :style="{'backgroundColor':resColor}"></div>
            <div class="echarts-text">
                {{title}}
            </div>
        </div>
    </div>
</template>

<script>
    import * as echarts from "echarts";
import * as echarts from "echarts";

    export default {
        name: "AcInput",
        chart: "",
        chartData: "",
        data() {
            return {
                acColor: '#813a74',
                resColor: '#ff649d',
                title: ''
            }
        },
        methods: {
            setOption(opt) {
                this.$options.chart.setOption(opt);
            },
            setData(sendData) {
                this.$options.chartData = sendData;
                this.acColor = sendData.acColor;
                this.resColor = sendData.resColor;
                this.title = sendData.title;
                let option = {
                    title: {
                        text: sendData.data + '%',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            color: "#fff",
                            fontSize: 24,
                        }
                    },
                    series: [{
                        name: "",
                        type: 'gauge',
                        radius: '90%',
                        startAngle: 180.5,
                        endAngle: -0.5,
                        min: 0,
                        max: 100,
                        title: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 20,
                                color: [
                                    [
                                        sendData.data / 100, this.acColor
                                    ],
                                    [
                                        1, this.resColor
                                    ]
                                ]
                            }
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer: {
                            show: false,
                        },
                        itemStyle: {
                            normal: {
                                color: '#FF0000',
                            }
                        },
                        data: [{
                            value: sendData,
                            name: '年售电量情况'
                        }]
                    }]
                };
export default {
    name: "AcInput",
    chart: "",
    chartData: "",
    data() {
        return {
            acColor: '#813a74',
            resColor: '#ff649d',
            title: ''
        }
    },
    methods: {
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        setData(sendData) {
            this.$options.chartData = sendData;
            this.acColor = sendData.acColor;
            this.resColor = sendData.resColor;
            this.title = sendData.title;
            let option = {
                title: {
                    text: sendData.data + '%',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        color: "#fff",
                        fontSize: 24,
                    }
                },
                series: [{
                    name: "",
                    type: 'gauge',
                    radius: '90%',
                    startAngle: 180.5,
                    endAngle: -0.5,
                    min: 0,
                    max: 100,
                    title: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 20,
                            color: [
                                [
                                    sendData.data / 100, this.acColor
                                ],
                                [
                                    1, this.resColor
                                ]
                            ]
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false
                    },
                    pointer: {
                        show: false,
                    },
                    itemStyle: {
                        normal: {
                            color: '#FF0000',
                        }
                    },
                    data: [{
                        value: sendData,
                        name: '年售电量情况'
                    }]
                }]
            };

                // 设置配置项
                this.setOption(option);
            },
            resize() {
                setTimeout(() => {
                    this.$options.chart.resize();
                    if (JSON.stringify(this.$options.chartData) != '{}') {
                        this.setData(this.$options.chartData);
                    }
                }, 300)
            }
        },
        mounted() {
            // 基于准备好的dom，初始化echarts实例
            this.$options.chart = echarts.init(this.$refs.chart);
            // 设置配置项
            this.setOption(option);
        },
        resize() {
            setTimeout(() => {
                this.$options.chart.resize();
                if (JSON.stringify(this.$options.chartData) != '{}') {
                    this.setData(this.$options.chartData);
                }
            }, 300)
        }
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.$options.chart = echarts.init(this.$refs.chart);

            window.addEventListener('resize', this.resize);
        },
        destroyed() {
            window.removeEventListener('resize', this.resize);
        }
    }
        window.addEventListener('resize', this.resize);
    },
    destroyed() {
        window.removeEventListener('resize', this.resize);
    }
}
</script>

<style scoped>
    .echarts-text-wrapper {
        position: absolute;
        top: 56%;
        left: 22.5%;
        width: 55%;
        text-align: center;
    }
.echarts-text-wrapper {
    position: absolute;
    top: 56%;
    left: 22.5%;
    width: 55%;
    text-align: center;
}

    .color-strip {
        height: 4px;
    }
.color-strip {
    height: 4px;
}

    .echarts-text {
        display: inline-block;
        margin-top: 8px;
        padding: 8px 20px;
        background-color: #083880;
        border: 1px solid #01b1e0;
        border-radius: 16px;
        font-size: 12px;
    }
.echarts-text {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 20px;
    background-color: #083880;
    border: 1px solid #01b1e0;
    border-radius: 16px;
    font-size: 12px;
}
</style>

 src/components/charts/AcInputWarp.vue

@@ -1,5 +1,5 @@
<template>
    <div class="chartCon">
    <div class="chartCon" @dblclick="dblclick">
        <div class="chartItem" @click="clickItem('熔丝告警')">
            <ac-input id="AcInput0" ref="AcInput0"></ac-input>
        </div>
@@ -32,6 +32,44 @@

    },
    methods: {
        findParents(node, select) {
            var parent = node.parentNode;
            if (parent === null || parent.className.indexOf(select) != -1) {
                return parent;
            } else {
                return this.findParents(parent, select);
            }
        },
        dblclick(e) {
            this.isAllScreen = !this.isAllScreen
            let parents = this.findParents(e.currentTarget, 'vdr')
            if (this.isAllScreen) {
                this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
                parents.style.transform = 'none';
                parents.style.width = '100%';
                parents.style.height = '100%';
                parents.style.position = 'fixed';
                parents.style.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
                parents.style.top = 0;
                parents.style.zIndex = 99999;
            } else {
                parents.style.transform = this.parentsStyle.transform;
                parents.style.width = this.parentsStyle.width;
                parents.style.height = this.parentsStyle.height;
                parents.style.position = this.parentsStyle.position;
                parents.style.left = 'initial';
                parents.style.right = 'initial';
                parents.style.bottom = 'initial';
                parents.style.top = 'initial';
                parents.style.zIndex = 'auto';
            }
            this.$refs.AcInput0.resize();
            this.$refs.AcInput1.resize();
            this.$refs.AcInput2.resize();
            this.$refs.AcInput3.resize();
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({

 src/components/charts/CustomPie.vue

@@ -1,5 +1,5 @@
<template>
    <div class="echarts-wrapper">
    <div class="echarts-wrapper" @dblclick="dblclick">
        <div class="echarts-content" ref="chart"></div>
    </div>
</template>
@@ -22,6 +22,41 @@
        }
    },
    methods: {
        findParents(node, select) {
            var parent = node.parentNode;
            if (parent === null || parent.className.indexOf(select) != -1) {
                return parent;
            } else {
                return this.findParents(parent, select);
            }
        },
        dblclick(e) {
            this.isAllScreen = !this.isAllScreen
            let parents = this.findParents(e.currentTarget, 'vdr')
            if (this.isAllScreen) {
                this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
                parents.style.transform = 'none';
                parents.style.width = '100%';
                parents.style.height = '100%';
                parents.style.position = 'fixed';
                parents.style.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
                parents.style.top = 0;
                parents.style.zIndex = 99999;
            } else {
                parents.style.transform = this.parentsStyle.transform;
                parents.style.width = this.parentsStyle.width;
                parents.style.height = this.parentsStyle.height;
                parents.style.position = this.parentsStyle.position;
                parents.style.left = 'initial';
                parents.style.right = 'initial';
                parents.style.bottom = 'initial';
                parents.style.top = 'initial';
                parents.style.zIndex = 'auto';
            }
            this.$options.chart.resize();
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({

 src/components/charts/MonCap.vue

@@ -1,5 +1,5 @@
<template>
    <div class="flex-box" @click="toParentPage">
    <div class="flex-box" @click="toParentPage" @dblclick="dblclick">
        <div class="flex-box-body">
            <circle-chart id="circleChart" ref="circleChart"></circle-chart>
        </div>
@@ -57,6 +57,41 @@
        }
    },
    methods: {
        findParents(node, select) {
            var parent = node.parentNode;
            if (parent === null || parent.className.indexOf(select) != -1) {
                return parent;
            } else {
                return this.findParents(parent, select);
            }
        },
        dblclick(e) {
            this.isAllScreen = !this.isAllScreen
            let parents = this.findParents(e.currentTarget, 'vdr')
            if (this.isAllScreen) {
                this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
                parents.style.transform = 'none';
                parents.style.width = '100%';
                parents.style.height = '100%';
                parents.style.position = 'fixed';
                parents.style.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
                parents.style.top = 0;
                parents.style.zIndex = 99999;
            } else {
                parents.style.transform = this.parentsStyle.transform;
                parents.style.width = this.parentsStyle.width;
                parents.style.height = this.parentsStyle.height;
                parents.style.position = this.parentsStyle.position;
                parents.style.left = 'initial';
                parents.style.right = 'initial';
                parents.style.bottom = 'initial';
                parents.style.top = 'initial';
                parents.style.zIndex = 'auto';
            }
            this.$refs.circleChart.resize();
        },
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",

 src/components/charts/PictorialBar.vue

@@ -1,5 +1,5 @@
<template>
    <div class="echarts-wrapper" @click="toParentPage">
    <div class="echarts-wrapper" @click="toParentPage" @dblclick="dblclick">
        <div class="echarts-content" ref="chart"></div>
    </div>
</template>
@@ -24,6 +24,41 @@
        }
    },
    methods: {
        findParents(node, select) {
            var parent = node.parentNode;
            if (parent === null || parent.className.indexOf(select) != -1) {
                return parent;
            } else {
                return this.findParents(parent, select);
            }
        },
        dblclick(e) {
            this.isAllScreen = !this.isAllScreen
            let parents = this.findParents(e.currentTarget, 'vdr')
            if (this.isAllScreen) {
                this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
                parents.style.transform = 'none';
                parents.style.width = '100%';
                parents.style.height = '100%';
                parents.style.position = 'fixed';
                parents.style.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
                parents.style.top = 0;
                parents.style.zIndex = 99999;
            } else {
                parents.style.transform = this.parentsStyle.transform;
                parents.style.width = this.parentsStyle.width;
                parents.style.height = this.parentsStyle.height;
                parents.style.position = this.parentsStyle.position;
                parents.style.left = 'initial';
                parents.style.right = 'initial';
                parents.style.bottom = 'initial';
                parents.style.top = 'initial';
                parents.style.zIndex = 'auto';
            }
            this.$options.chart.resize();
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({

 src/components/charts/RoseChart.vue

@@ -1,5 +1,5 @@
<template>
    <div class="echarts-wrapper" @click="toParentPage">
    <div class="echarts-wrapper" @click="toParentPage" @dblclick="dblclick">
        <div class="echarts-content" ref="chart"></div>
    </div>
</template>
@@ -24,6 +24,41 @@
        }
    },
    methods: {
        findParents(node, select) {
            var parent = node.parentNode;
            if (parent === null || parent.className.indexOf(select) != -1) {
                return parent;
            } else {
                return this.findParents(parent, select);
            }
        },
        dblclick(e) {
            this.isAllScreen = !this.isAllScreen
            let parents = this.findParents(e.currentTarget, 'vdr')
            if (this.isAllScreen) {
                this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
                parents.style.transform = 'none';
                parents.style.width = '100%';
                parents.style.height = '100%';
                parents.style.position = 'fixed';
                parents.style.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
                parents.style.top = 0;
                parents.style.zIndex = 99999;
            } else {
                parents.style.transform = this.parentsStyle.transform;
                parents.style.width = this.parentsStyle.width;
                parents.style.height = this.parentsStyle.height;
                parents.style.position = this.parentsStyle.position;
                parents.style.left = 'initial';
                parents.style.right = 'initial';
                parents.style.bottom = 'initial';
                parents.style.top = 'initial';
                parents.style.zIndex = 'auto';
            }
            this.$options.chart.resize();
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({

 src/components/charts/RoseChartED.vue

@@ -1,5 +1,5 @@
<template>
    <div class="echarts-wrapper" @click="toParentPage">
    <div class="echarts-wrapper" @click="toParentPage" @dblclick="dblclick">
        <div class="echarts-content" ref="chart"></div>
    </div>
</template>
@@ -24,6 +24,41 @@
        }
    },
    methods: {
        findParents(node, select) {
            var parent = node.parentNode;
            if (parent === null || parent.className.indexOf(select) != -1) {
                return parent;
            } else {
                return this.findParents(parent, select);
            }
        },
        dblclick(e) {
            this.isAllScreen = !this.isAllScreen
            let parents = this.findParents(e.currentTarget, 'vdr')
            if (this.isAllScreen) {
                this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
                parents.style.transform = 'none';
                parents.style.width = '100%';
                parents.style.height = '100%';
                parents.style.position = 'fixed';
                parents.style.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
                parents.style.top = 0;
                parents.style.zIndex = 99999;
            } else {
                parents.style.transform = this.parentsStyle.transform;
                parents.style.width = this.parentsStyle.width;
                parents.style.height = this.parentsStyle.height;
                parents.style.position = this.parentsStyle.position;
                parents.style.left = 'initial';
                parents.style.right = 'initial';
                parents.style.bottom = 'initial';
                parents.style.top = 'initial';
                parents.style.zIndex = 'auto';
            }
            this.$options.chart.resize();
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({

 src/components/charts/RoseChartHea.vue

@@ -1,5 +1,5 @@
<template>
    <div class="echarts-wrapper" @click="toParentPage">
    <div class="echarts-wrapper" @click="toParentPage" @dblclick="dblclick">
        <div class="echarts-content" ref="chart"></div>
    </div>
</template>
@@ -23,6 +23,41 @@
        }
    },
    methods: {
        findParents(node, select) {
            var parent = node.parentNode;
            if (parent === null || parent.className.indexOf(select) != -1) {
                return parent;
            } else {
                return this.findParents(parent, select);
            }
        },
        dblclick(e) {
            this.isAllScreen = !this.isAllScreen
            let parents = this.findParents(e.currentTarget, 'vdr')
            if (this.isAllScreen) {
                this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
                parents.style.transform = 'none';
                parents.style.width = '100%';
                parents.style.height = '100%';
                parents.style.position = 'fixed';
                parents.style.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
                parents.style.top = 0;
                parents.style.zIndex = 99999;
            } else {
                parents.style.transform = this.parentsStyle.transform;
                parents.style.width = this.parentsStyle.width;
                parents.style.height = this.parentsStyle.height;
                parents.style.position = this.parentsStyle.position;
                parents.style.left = 'initial';
                parents.style.right = 'initial';
                parents.style.bottom = 'initial';
                parents.style.top = 'initial';
                parents.style.zIndex = 'auto';
            }
            this.$options.chart.resize();
        },
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",

 src/components/charts/abeamProChart.vue

@@ -1,5 +1,5 @@
<template>
    <div class="flexCon">
    <div class="flexCon" @dblclick="dblclick">
        <div class="con">
            <div class="echarts-wrapper">
                <div class="echarts-content" ref="chart">
@@ -35,6 +35,41 @@
        }
    },
    methods: {
        findParents(node, select) {
            var parent = node.parentNode;
            if (parent === null || parent.className.indexOf(select) != -1) {
                return parent;
            } else {
                return this.findParents(parent, select);
            }
        },
        dblclick(e) {
            this.isAllScreen = !this.isAllScreen
            let parents = this.findParents(e.currentTarget, 'vdr')
            if (this.isAllScreen) {
                this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
                parents.style.transform = 'none';
                parents.style.width = '100%';
                parents.style.height = '100%';
                parents.style.position = 'fixed';
                parents.style.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
                parents.style.top = 0;
                parents.style.zIndex = 99999;
            } else {
                parents.style.transform = this.parentsStyle.transform;
                parents.style.width = this.parentsStyle.width;
                parents.style.height = this.parentsStyle.height;
                parents.style.position = this.parentsStyle.position;
                parents.style.left = 'initial';
                parents.style.right = 'initial';
                parents.style.bottom = 'initial';
                parents.style.top = 'initial';
                parents.style.zIndex = 'auto';
            }
            this.$options.chart.resize();
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({
@@ -63,7 +98,6 @@
        },
        organizeData(posData) {
            let dataColor = posData.color;
            let bgColor = posData.bgColor;
            let yData = posData.yData;
            let radius = (this.$refs.chart.clientHeight / 4 - 7) > 0 ? this.$refs.chart.clientHeight / 4 - 7 : 0;
            let data = posData.data;

 src/components/charts/dischargeCircuit.vue

@@ -1,5 +1,5 @@
<template>
    <div class="echarts-wrapper" @click="toParentPage">
    <div class="echarts-wrapper" @click="toParentPage" @dblclick="dblclick">
        <div class="echarts-content" ref="dischargeCircuit">

        </div>
@@ -45,6 +45,41 @@
        }
    },
    methods: {
        findParents(node, select) {
            var parent = node.parentNode;
            if (parent === null || parent.className.indexOf(select) != -1) {
                return parent;
            } else {
                return this.findParents(parent, select);
            }
        },
        dblclick(e) {
            this.isAllScreen = !this.isAllScreen
            let parents = this.findParents(e.currentTarget, 'vdr')
            if (this.isAllScreen) {
                this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
                parents.style.transform = 'none';
                parents.style.width = '100%';
                parents.style.height = '100%';
                parents.style.position = 'fixed';
                parents.style.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
                parents.style.top = 0;
                parents.style.zIndex = 99999;
            } else {
                parents.style.transform = this.parentsStyle.transform;
                parents.style.width = this.parentsStyle.width;
                parents.style.height = this.parentsStyle.height;
                parents.style.position = this.parentsStyle.position;
                parents.style.left = 'initial';
                parents.style.right = 'initial';
                parents.style.bottom = 'initial';
                parents.style.top = 'initial';
                parents.style.zIndex = 'auto';
            }
            this.$options.discharge.resize();
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({

 src/components/charts/histogramAlternating.vue

@@ -1,5 +1,5 @@
<template>
    <div class="echarts-wrapper echartsAlternating" ref="echartsAlternating">
    <div class="echarts-wrapper echartsAlternating" ref="echartsAlternating" @dblclick="dblclick">
        <div class="echarts-content" ref="alternating">

        </div>
@@ -45,6 +45,41 @@
        }
    },
    methods: {
        findParents(node, select) {
            var parent = node.parentNode;
            if (parent === null || parent.className.indexOf(select) != -1) {
                return parent;
            } else {
                return this.findParents(parent, select);
            }
        },
        dblclick(e) {
            this.isAllScreen = !this.isAllScreen
            let parents = this.findParents(e.currentTarget, 'vdr')
            if (this.isAllScreen) {
                this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
                parents.style.transform = 'none';
                parents.style.width = '100%';
                parents.style.height = '100%';
                parents.style.position = 'fixed';
                parents.style.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
                parents.style.top = 0;
                parents.style.zIndex = 99999;
            } else {
                parents.style.transform = this.parentsStyle.transform;
                parents.style.width = this.parentsStyle.width;
                parents.style.height = this.parentsStyle.height;
                parents.style.position = this.parentsStyle.position;
                parents.style.left = 'initial';
                parents.style.right = 'initial';
                parents.style.bottom = 'initial';
                parents.style.top = 'initial';
                parents.style.zIndex = 'auto';
            }
            this.$options.chart.resize();
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({

 src/components/charts/imgPieChart.vue

@@ -1,5 +1,5 @@
<template>
    <div class="echarts-wrapper">
    <div class="echarts-wrapper" @dblclick="dblclick">
        <div class="echarts-content" ref="chart">

        </div>
@@ -32,6 +32,42 @@
        }
    },
    methods: {
        findParents(node, select) {
            var parent = node.parentNode;
            if (parent === null || parent.className.indexOf(select) != -1) {
                return parent;
            } else {
                return this.findParents(parent, select);
            }
        },
        dblclick(e) {
            this.isAllScreen = !this.isAllScreen
            let parents = this.findParents(e.currentTarget, 'vdr')
            if (this.isAllScreen) {
                this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
                parents.style.transform = 'none';
                parents.style.width = '100%';
                parents.style.height = '100%';
                parents.style.position = 'fixed';
                parents.style.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
                parents.style.top = 0;
                parents.style.zIndex = 99999;
            } else {
                parents.style.transform = this.parentsStyle.transform;
                parents.style.width = this.parentsStyle.width;
                parents.style.height = this.parentsStyle.height;
                parents.style.position = this.parentsStyle.position;
                parents.style.left = 'initial';
                parents.style.right = 'initial';
                parents.style.bottom = 'initial';
                parents.style.top = 'initial';
                parents.style.zIndex = 'auto';
            }
            this.$options.chart.resize();
            this.organizeData(this.$options.chartData)
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({

 src/components/charts/latticeBar.vue

@@ -1,5 +1,5 @@
<template>
    <div class="echarts-wrapper">
    <div class="echarts-wrapper" @dblclick="dblclick">
        <div class="echarts-content" ref="chart">

        </div>
@@ -30,6 +30,41 @@
        }
    },
    methods: {
        findParents(node, select) {
            var parent = node.parentNode;
            if (parent === null || parent.className.indexOf(select) != -1) {
                return parent;
            } else {
                return this.findParents(parent, select);
            }
        },
        dblclick(e) {
            this.isAllScreen = !this.isAllScreen
            let parents = this.findParents(e.currentTarget, 'vdr')
            if (this.isAllScreen) {
                this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
                parents.style.transform = 'none';
                parents.style.width = '100%';
                parents.style.height = '100%';
                parents.style.position = 'fixed';
                parents.style.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
                parents.style.top = 0;
                parents.style.zIndex = 99999;
            } else {
                parents.style.transform = this.parentsStyle.transform;
                parents.style.width = this.parentsStyle.width;
                parents.style.height = this.parentsStyle.height;
                parents.style.position = this.parentsStyle.position;
                parents.style.left = 'initial';
                parents.style.right = 'initial';
                parents.style.bottom = 'initial';
                parents.style.top = 'initial';
                parents.style.zIndex = 'auto';
            }
            this.$options.chart.resize();
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({

 src/components/charts/monomerVoltage.vue

@@ -1,5 +1,5 @@
<template>
    <div class="echarts-wrapper" @click="toParentPage">
    <div class="echarts-wrapper" @click="toParentPage" @dblclick="dblclick">
        <div class="echarts-content" ref="monomerVoltage">

        </div>
@@ -45,6 +45,41 @@
        }
    },
    methods: {
        findParents(node, select) {
            var parent = node.parentNode;
            if (parent === null || parent.className.indexOf(select) != -1) {
                return parent;
            } else {
                return this.findParents(parent, select);
            }
        },
        dblclick(e) {
            this.isAllScreen = !this.isAllScreen
            let parents = this.findParents(e.currentTarget, 'vdr')
            if (this.isAllScreen) {
                this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
                parents.style.transform = 'none';
                parents.style.width = '100%';
                parents.style.height = '100%';
                parents.style.position = 'fixed';
                parents.style.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
                parents.style.top = 0;
                parents.style.zIndex = 99999;
            } else {
                parents.style.transform = this.parentsStyle.transform;
                parents.style.width = this.parentsStyle.width;
                parents.style.height = this.parentsStyle.height;
                parents.style.position = this.parentsStyle.position;
                parents.style.left = 'initial';
                parents.style.right = 'initial';
                parents.style.bottom = 'initial';
                parents.style.top = 'initial';
                parents.style.zIndex = 'auto';
            }
            this.$options.chart.resize();
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({

 src/components/charts/powerChart.vue

@@ -1,5 +1,5 @@
<template>
    <div class="chartCon">
    <div class="chartCon" @dblclick="dblclick">
        <div class="chartItem">
            <pross-pie-chart id="prossPieChart0" ref="prossPieChart0"></pross-pie-chart>
        </div>
@@ -32,6 +32,44 @@

    },
    methods: {
        findParents(node, select) {
            var parent = node.parentNode;
            if (parent === null || parent.className.indexOf(select) != -1) {
                return parent;
            } else {
                return this.findParents(parent, select);
            }
        },
        dblclick(e) {
            this.isAllScreen = !this.isAllScreen
            let parents = this.findParents(e.currentTarget, 'vdr')
            if (this.isAllScreen) {
                this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
                parents.style.transform = 'none';
                parents.style.width = '100%';
                parents.style.height = '100%';
                parents.style.position = 'fixed';
                parents.style.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
                parents.style.top = 0;
                parents.style.zIndex = 99999;
            } else {
                parents.style.transform = this.parentsStyle.transform;
                parents.style.width = this.parentsStyle.width;
                parents.style.height = this.parentsStyle.height;
                parents.style.position = this.parentsStyle.position;
                parents.style.left = 'initial';
                parents.style.right = 'initial';
                parents.style.bottom = 'initial';
                parents.style.top = 'initial';
                parents.style.zIndex = 'auto';
            }
            this.$refs.prossPieChart0.resize();
            this.$refs.prossPieChart1.resize();
            this.$refs.prossPieChart2.resize();
            this.$refs.prossPieChart3.resize();
        },
        setData(data) {
            this.$nextTick(() => {
                if (data) {

 src/components/charts/triangleBarChart.vue

@@ -1,5 +1,5 @@
<template>
    <div class="echarts-wrapper">
    <div class="echarts-wrapper" @dblclick="dblclick">
        <div class="echarts-content" ref="chart">

        </div>
@@ -31,6 +31,41 @@
        }
    },
    methods: {
        findParents(node, select) {
            var parent = node.parentNode;
            if (parent === null || parent.className.indexOf(select) != -1) {
                return parent;
            } else {
                return this.findParents(parent, select);
            }
        },
        dblclick(e) {
            this.isAllScreen = !this.isAllScreen
            let parents = this.findParents(e.currentTarget, 'vdr')
            if (this.isAllScreen) {
                this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
                parents.style.transform = 'none';
                parents.style.width = '100%';
                parents.style.height = '100%';
                parents.style.position = 'fixed';
                parents.style.left = 0;
                parents.style.right = 0;
                parents.style.bottom = 0;
                parents.style.top = 0;
                parents.style.zIndex = 99999;
            } else {
                parents.style.transform = this.parentsStyle.transform;
                parents.style.width = this.parentsStyle.width;
                parents.style.height = this.parentsStyle.height;
                parents.style.position = this.parentsStyle.position;
                parents.style.left = 'initial';
                parents.style.right = 'initial';
                parents.style.bottom = 'initial';
                parents.style.top = 'initial';
                parents.style.zIndex = 'auto';
            }
            this.$options.chart.resize();
        },
        toParentPage(value) {
            if (typeof (value) == 'string') {
                window.parent.parent.postMessage({

 src/pages/exhibition.vue

@@ -61,6 +61,7 @@
        })
    },
    methods: {

        // 加载布局数据
        loadLayout() {
            let sendData = {