settle_down_web/src/views/life-line/components/special-image.vue

<template>
    <div class="specialImage">
        <!--    <div class="title">专项一张图</div>-->
        <el-tabs v-model="activeName" class="dialog-supervise" @tab-click="handleClick">
            <el-tab-pane name="综合监管">
                <div slot="label">
                    <div class="el-tabs__item-icon">
                        <img alt="" src="@/views/life-line/monitor/assets/images/supervise_tabs_zhjg.svg">
                    </div>
                    <span>综合监管</span>
                </div>
                <!--        <div>燃气爆炸</div>-->
            </el-tab-pane>
            <el-tab-pane name="燃气爆炸">
                <div slot="label">
                    <div class="el-tabs__item-icon">
                        <img alt="" src="@/views/life-line/monitor/assets/images/supervise_tabs_gas.svg">
                    </div>
                    <span>燃气专项</span>
                </div>
                <!--        <div>燃气爆炸</div>-->
            </el-tab-pane>
            <el-tab-pane name="城市内涝">
                <div slot="label">
                    <div class="el-tabs__item-icon">
                        <img alt="" src="@/views/life-line/monitor/assets/images/supervise_tabs_waterLogging.svg">
                    </div>
                    <span>城市内涝</span>
                </div>
                <!--        <div>城市内涝</div>-->
            </el-tab-pane>
            <el-tab-pane name="供水爆管">
                <div slot="label">
                    <div class="el-tabs__item-icon">
                        <img alt="" src="@/views/life-line/monitor/assets/images/supervise_tabs_waterSupply.svg">
                    </div>
                    <span>供水专项</span>
                </div>
                <!--        <div>供水爆管</div>-->
            </el-tab-pane>
        </el-tabs>
        <el-tabs v-model="activeName" class="dialog-supervise" @tab-click="handleClick">
            <el-tab-pane name="道路塌陷">
                <div slot="label">
                    <div class="el-tabs__item-icon">
                        <img alt="" src="@/views/life-line/monitor/assets/images/supervise_tabs_road.svg">
                    </div>
                    <span>道路专项</span>
                </div>
                <!--        <div>道路塌陷</div>-->
            </el-tab-pane>
            <el-tab-pane name="桥梁倒塌">
                <div slot="label">
                    <div class="el-tabs__item-icon">
                        <img alt="" src="@/views/life-line/monitor/assets/images/supervise_tabs_bridge.svg">
                    </div>
                    <span>桥梁专项</span>
                </div>
                <!--        <div>桥梁倒塌</div>-->
            </el-tab-pane>
            <el-tab-pane name="地下管线">
                <div slot="label">
                    <div class="el-tabs__item-icon">
                        <img alt="" src="@/views/life-line/monitor/assets/images/supervise_tabs_pipeLine.svg">
                    </div>
                    <span>地下管线</span>
                </div>
                <!--        <div>地下管线</div>-->
            </el-tab-pane>
            <el-tab-pane name="第三方破坏">
                <div slot="label">
                    <div class="el-tabs__item-icon">
                        <img alt="" src="@/views/life-line/monitor/assets/images/supervise_tabs_other.svg">
                    </div>
                    <span>第三方施工</span>
                </div>
            </el-tab-pane>
        </el-tabs>
        <dialogFullScreen :dialog-visible="dialogVisible" @closeVideo="dialogVisible = false">
            <template slot="dialogBody">
                <div v-if="dialogVisible" class="dialogFullInfo">
                    <div class="close" @click="dialogVisible = false" />
                    <iframe :src="url" height="2700px" width="4800px" />
                </div>
            </template>
        </dialogFullScreen>
        <dialogFullScreen :dialog-visible="dialogVisible2" @closeVideo="dialogVisible2 = false">
            <template slot="dialogBody">
                <div v-if="dialogVisible2" class="dialogFullInfo">
                    <div class="close" @click="dialogVisible2 = false" />
                    <iframe :src="url2" height="2700px" width="4800px" />
                </div>
            </template>
        </dialogFullScreen>
        <dialogFullScreen :dialog-visible="dialogVisible3" @closeVideo="dialogVisible3 = false">
            <template slot="dialogBody">
                <div v-if="dialogVisible3" class="dialogFullInfo">
                    <div class="close" @click="dialogVisible3 = false" />
                    <iframe :src="url3" height="2700px" width="4800px" />
                </div>
            </template>
        </dialogFullScreen>
        <dialogFullScreen :dialog-visible="dialogVisible4" @closeVideo="dialogVisible4 = false">
            <template slot="dialogBody">
                <div v-if="dialogVisible4" class="dialogFullInfo">
                    <div class="close" @click="dialogVisible4 = false" />
                    <iframe class="scaleIframe" :src="url4" />
                </div>
            </template>
        </dialogFullScreen>
        <dialogFullScreen :dialog-visible="dialogVisible5" @closeVideo="dialogVisible5 = false">
            <template slot="dialogBody">
                <div v-if="dialogVisible5" class="dialogFullInfo">
                    <div class="close" @click="dialogVisible5 = false" />
                    <iframe class="scaleIframe" :src="url5" />
                </div>
            </template>
        </dialogFullScreen>
        <dialogFullScreen :dialog-visible="dialogVisible6" @closeVideo="dialogVisible6 = false">
            <template slot="dialogBody">
                <div v-if="dialogVisible6" class="dialogFullInfo">
                    <div class="close" @click="dialogVisible6 = false" />
                    <iframe :src="url6" height="2700px" width="4800px" />
                </div>
            </template>
        </dialogFullScreen>
        <dialogFullScreen :dialog-visible="dialogVisible7" @closeVideo="dialogVisible7 = false">
            <template slot="dialogBody">
                <div v-if="dialogVisible7" class="dialogFullInfo">
                    <div class="close" @click="dialogVisible7 = false" />
                    <iframe :src="url7" height="2700px" width="4800px" />
                </div>
            </template>
        </dialogFullScreen>
        <dialogWarning :dialog-visible="dialogWarning" @closeVideo="closeItem()">
            <template slot="dialogBody">
                <div
                    style="height:1049px;display: flex;flex-direction:column;align-items: center;justify-content: center;color: white;font-size: 80px">
                    <img src="@/components/my-dialog/image/warningIcon.png" style="margin-bottom: 60px">
                    {{ errMsg }}
                </div>
            </template>
        </dialogWarning>
    </div>
</template>

<script>
import dialogWarning from '@/components/my-dialog/dialogWarning.vue'
import dialogFor from '@/components/my-dialog/dialogFor.vue'
import dialogFullScreen from '@/components/my-dialog/dialogFullScreen.vue'
import myBus from '@/views/life-line/monitor/assets/js/myBus'

export default {
    name: 'SpecialImage',
    components: { dialogWarning, dialogFor, dialogFullScreen },
    data() {
        return {
            activeName: '综合监管',
            dialogWarning: false,
            dialogVisible: false,
            dialogVisible2: false,
            dialogVisible3: false,
            dialogVisible4: false,
            dialogVisible5: false,
            dialogVisible6: false,
            dialogVisible7: false,
            url: '',
            url2: '',
            url3: '',
            url4: '',
            url5: '',
            url6: '',
            url7: '',
            errMsg: '',
            mySacle: ''
        }
    },
    mounted() {
        myBus.$on('closeDialog', e => {
            this.dialogVisible = false
            this.dialogVisible2 = false
            this.dialogVisible3 = false
            this.dialogVisible4 = false
            this.dialogVisible5 = false
            this.dialogVisible6 = false
            this.dialogVisible7 = false
            this.activeName = '综合监管'
        })
        myBus.$on('showElse', e => {
            this.dialogVisible = false
            this.dialogVisible2 = false
            this.dialogVisible3 = false
            this.dialogVisible4 = false
            this.dialogVisible5 = false
            this.dialogVisible6 = false
            this.dialogVisible7 = false
            this.activeName = e
            this.handleClick({ name: e })
        })
        myBus.$on('mySacle', e => {
            console.log('mySacle', e)
            this.mySacle = e.sacle
        })
    },
    methods: {
        closeItem() {
            this.dialogWarning = false
            this.activeName = '综合监管'
        },
        closeItemFor(e) {
        },
        handleClick(e) {
            // console.log(e)
            if (e.name === '综合监管') {
                return
            } else {
                this.url = ''
                this.baseRequest('getThirdPartyLayerRoute', {
                    name: '主图层',
                    scene: e.name
                }).then((res) => {
                    this.baseRequest2('getTicket', {}).then(ticket => {
                        if (res.data.key === 200 && res.data.msg) {
                            if (e.name === '燃气爆炸') {
                                this.url = res.data.msg ? res.data.msg.includes('?') ? res.data.msg + '&ticket=' + ticket.data.data : res.data.msg + '?ticket=' + ticket.data.data : ''
                                if (this.url) {
                                    this.dialogVisible = true
                                }
                            }
                            if (e.name === '城市内涝') {
                                this.url2 = res.data.msg ? res.data.msg.includes('?') ? res.data.msg + '&ticket=' + ticket.data.data : res.data.msg + '?ticket=' + ticket.data.data : ''
                                if (this.url2) {
                                    this.dialogVisible2 = true
                                }
                            }
                            if (e.name === '供水爆管') {
                                this.url3 = res.data.msg ? res.data.msg.includes('?') ? res.data.msg + '&ticket=' + ticket.data.data : res.data.msg + '?ticket=' + ticket.data.data : ''
                                if (this.url3) {
                                    this.dialogVisible3 = true
                                }
                            }
                            if (e.name === '桥梁倒塌') {
                                const base = res.data.msg || '' // 如果res.data.msg不存在，则base为空字符串
                                const query = `ticket=${ticket.data.data}&scale=${this.mySacle}`
                                this.url4 = base + (base.includes('?') ? '&' : '?') + query
                                // this.url4 = res.data.msg ? res.data.msg.includes('?') ? res.data.msg + '&ticket=' + ticket.data.data : res.data.msg + '?ticket=' + ticket.data.data : ''
                                if (this.url4) {
                                    this.dialogVisible4 = true
                                }
                            }
                            if (e.name === '道路塌陷') {
                                const base = res.data.msg || '' // 如果res.data.msg不存在，则base为空字符串
                                const query = `ticket=${ticket.data.data}&scale=${this.mySacle}`
                                this.url5 = base + (base.includes('?') ? '&' : '?') + query
                                // this.url5 = res.data.msg ? res.data.msg.includes('?') ? res.data.msg + '&ticket=' + ticket.data.data : res.data.msg + '?ticket=' + ticket.data.data : ''

                                if (this.url5) {
                                    this.dialogVisible5 = true
                                }
                            }
                            if (e.name === '地下管线') {
                                this.url6 = res.data.msg ? res.data.msg.includes('?') ? res.data.msg + '&ticket=' + ticket.data.data : res.data.msg + '?ticket=' + ticket.data.data : ''
                                if (this.url6) {
                                    this.dialogVisible6 = true
                                }
                            }
                            if (e.name === '第三方破坏') {
                                this.url7 = res.data.msg ? res.data.msg.includes('?') ? res.data.msg + '&ticket=' + ticket.data.data : res.data.msg + '?ticket=' + ticket.data.data : ''
                                if (this.url7) {
                                    this.dialogVisible7 = true
                                }
                            }
                        } else {
                            // this.$message.warning('路径未设置')
                            this.errMsg = '路径未设置'
                            this.dialogWarning = true
                        }
                    })
                })
            }
        },
        baseRequest(opUrl, postData) {
            return this.$channel.globeRequest(
                'BoardController',
                opUrl,
                postData,
                'project'
            )
        },
        baseRequest2(opUrl, postData) {
            return this.$channel.globeRequest(
                'ThirdPartyStageRouteController',
                opUrl,
                postData,
                'project'
            )
        }
    }
}
</script>

<style lang="scss">
.dialogFacNew {
    min-height: 2160px !important;
    background: url("../../../components/my-dialog/image/bigDialogBg.png") no-repeat !important;
    background-color: #0a2661 !important;
    background-size: 100% !important;

    .el-dialog__headerbtn {
        background: url("../image/close-icon.png") no-repeat !important;
        background-size: cover;
        height: 60px;
        width: 60px;

        i {
            display: none; // 在这里隐藏弹窗默认的关闭图标
        }
    }
}

.specialImage {
    display: flex;
    justify-content: space-between;
    width: 11707px;

    .el-dialog__wrapper {
        pointer-events: none !important;
    }

    .el-dialog {
        pointer-events: auto !important;
    }

    //.el-dialog__headerbtn {
    //    font-size: 75px;
    //}

    .title {
        display: flex;
        justify-content: center;
        padding-top: 88px;
        font-size: 78px;
        color: #f19904;
        font-family: pmzd;
    }

    .dialog-supervise {
        position: relative;

        //height: 600px;
        .el-tabs__item.is-top:nth-child(2) {
            padding-left: 81px !important;
        }

        .el-tabs__nav {
            margin-left: 32px;
            display: flex;
            //grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
        }

        .el-tabs__active-bar {
            display: none;
        }

        .el-tabs__nav-wrap::after {
            background-color: transparent;
        }

        .el-tabs__nav-scroll {
            //height: 600px !important;
        }

        //#tab-燃气爆炸 {
        //  //display: grid;
        //  //grid-column-start: 1;
        //  //grid-column-end: 3;
        //  //position: absolute;
        //  width: 790px;
        //  margin: 0 5px;
        //  //height: 261px;
        //  padding: 81px;
        //  background: url("../image/item_longBgNew.svg") no-repeat 0 0;
        //  background-size: 100%;
        //  img {
        //    width: 100px;
        //  }
        //  &.is-active {
        //    background: url("../image/item_longBg_H.svg") no-repeat 0 0;
        //    background-size: 790px 302px;
        //    color: #f19904;
        //    .el-tabs__item-icon {
        //      width: 120px;
        //      img {
        //        filter: drop-shadow(100px 0px #f19904);
        //      }
        //    }
        //  }
        //}
        //#tab-城市内涝 {
        //  //position: absolute;
        //  //left: 759px;
        //  width: 790px;
        //  margin: 0 5px;
        //  //height: 261px;
        //  padding: 81px;
        //  background: url("../image/item_longBgNew.png") no-repeat 0 0;
        //  background-size: 100%;
        //  img {
        //    width: 100px;
        //  }
        //  &.is-active {
        //    background: url("../image/item_longBg_H.svg") no-repeat 0 0;
        //    background-size: 790px 302px;
        //    color: #f19904;
        //    .el-tabs__item-icon {
        //      width: 140px;
        //      img {
        //        filter: drop-shadow(100px 0px #f19904);
        //      }
        //    }
        //  }
        //}
        //#tab-供水爆管 {
        //     //position: absolute;
        //     //left: 1500px;
        //     width: 592px;
        //     margin: 0 5px;
        //     //height: 302px;
        //     padding: 81px;
        //     background: url("../image/item_BgNewBig.png") no-repeat 0 0 ;
        //     background-size: 100%;
        //    &.is-active {
        //        background: url("../image/dsfph.svg") no-repeat 0 0 ;
        //        background-size: 592px 302px;
        //        color: #f19904;
        //        .el-tabs__item-icon {
        //            width: 140px;
        //            img {
        //                filter: drop-shadow(100px 0px #f19904);
        //            }
        //        }
        //    }
        //  }
        //#tab-道路塌陷 {
        //     //position: absolute;
        //     //top: 270px;
        //     //left: 500px;
        //     margin: 0 5px;
        //     padding: 81px;
        //  }
        //#tab-桥梁倒塌 {
        //     //position: absolute;
        //     //top: 270px;
        //     margin: 0 5px;
        //     padding: 81px;
        //  }
        //#tab-地下管线 {
        //     //position: absolute;
        //     //top: 270px;
        //     //left: 1000px;
        //     margin: 0 5px;
        //     padding: 81px;
        //  }
        #tab-第三方破坏 {
            width: 906px;
            height: 282px;
            margin: 0 5px;
            background: url("../image/item_dxgxBg.png") no-repeat 0 0;
            padding: 81px 161px;

            &.is-active {
                background: url("../image/dxgxActive.png") no-repeat 0 0;
                background-size: 906px 282px;
                color: #f19904;

                .el-tabs__item-icon {
                    width: 130px;

                    img {
                        filter: drop-shadow(130px 0px #f19904);
                    }
                }
            }
        }

        //#tab-地下管线 {
        //     width: 906px;
        //     height: 282px;
        //     margin: 0 5px;
        //     background: url("../image/item_dxgxBg.png") no-repeat 0 0 ;
        //     padding: 81px 131px;
        //    &.is-active {
        //        background: url("../image/dxgxActive.png") no-repeat 0 0 ;
        //        background-size: 906px 282px;
        //        color: #f19904;
        //        .el-tabs__item-icon {
        //            width: 130px;
        //            img {
        //                filter: drop-shadow(130px 0px #f19904);
        //            }
        //        }
        //    }
        //  }
        #tab-供水爆管 {
            &>div {
                width: 596px;
            }
        }

        .el-tabs__item {
            display: inline-block;
            width: 758px;
            height: 282px;
            margin: 0 5px;
            padding: 81px;
            background: url("../image/item_BgNew.png") no-repeat 0 0;
            background-size: 758px 282px;
            color: #fff;
            font-size: 74px;

            &>div {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
            }

            span {}

            &.is-active {
                background: url("../image/item_bgH.png") no-repeat 0 0;
                background-size: 758px 282px;
                color: #f19904;

                .el-tabs__item-icon {
                    width: 130px;
                    height: 130px;

                    img {
                        filter: drop-shadow(130px 0px #f19904);
                    }
                }
            }

            &-icon {
                width: 100px;
                height: 100px;
                overflow: hidden;
                text-indent: -130px;

                img {
                    width: 100%;
                    height: 100%;
                    filter: drop-shadow(130px 0px #00f2ff);
                }
            }

            &#tab-returnBtn {
                background: none;
                margin-right: 400px;

                .el-button {
                    font-size: 78px;
                    color: #fff;
                    background: none;
                    border: none;

                    .el-icon-back {
                        color: #00f2ff;
                    }
                }
            }
        }
    }

    .el-tabs__item-icon {
        width: 130px !important;
        height: 130px !important;
        margin-right: 20px !important;
    }
}

.dialogFullInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5352px;
    height: 3024px;
    background: url("../../../components/my-dialog/image/dialogFullBg.png") no-repeat;
    background-size: 100%;

    position: relative;

    .close {
        width: 140px;
        height: 140px;
        position: absolute;
        // right: 5040px;
        right: 92px;
        top: 110px;
        z-index: 10;
        cursor: pointer;
    }

    .scaleIframe {
        --baseIframeWidth: 4800px;
        --baseIframeHeight: 2700px;
        width: calc(var(--baseIframeWidth)*var(--scale));
        height: calc(var(--baseIframeHeight)*var(--scale));
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center center;
        transform: translate(-50%, -50%) scale(calc(1 / var(--scale)), calc(1 / var(--scale)));
    }
}
</style>