首页site弹窗相关

shuishen

2022-09-21 7d90119a2459eb3521cd1de3987e1f08bb071083

首页site弹窗相关

 src/styles/base/index.scss

@@ -50,8 +50,18 @@

.car-video-box {
    .el-dialog {
        left: auto !important;
        right: 240px;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        width: 720px;
        height: 480px;
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);

        .el-dialog__body {
            flex: 1;
        }
    }
}


 src/styles/dc/index.scss

@@ -7,27 +7,4 @@
    .scale-bar {
        border-color: #000 !important;
    }
}

.car-video-box .el-dialog {
    margin-top: 0 !important;
    position: fixed !important;
    top: 200px;
    left: 400px;
    // right: 0;
    // bottom: 0;
    // margin: auto;
  
    width: 821px;
    height: 450px;
  
    .el-dialog__body {
      padding: 10px !important;
      height: calc(100% - 50px);
  
      iframe {
        width: 100%;
        height: 100%;
      }
    }
  }
}

 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-21 10:27:15
 * @LastEditTime: 2022-09-21 12:03:05
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -68,6 +68,7 @@
                <div id="EquipmentEcharts" class="echarts-box"></div>
            </div>
        </div>

        <div class="right-container">
            <div class="case-box">
                <div class="title">
@@ -129,6 +130,7 @@
                <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
            </div>
        </div>

        <div class="top-container">
            <div class="selectBox">
                <div class="choose" v-if="oneSelected==''">请选择</div>
@@ -149,6 +151,48 @@
                </select>
            </div>
        </div>

        <el-dialog
            :title="dialogTitle"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <div
                style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"
            >
                <video
                    src="/video/sp.mp4"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    ref="videoElement"
                    style="object-fit: fill"
                ></video>
            </div>
        </el-dialog>

        <el-dialog
            :title="panoramaTitle"
            :modal="true"
            :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <div
                style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"
            >
                <iframe
                    src="http://vr.jxpskj.com/JXSFKZQJ/QJ/"
                    style="width: 100%; height: 100%;"
                    frameborder="0"
                ></iframe>
            </div>
        </el-dialog>
    </div>
</template>

@@ -162,6 +206,10 @@
            phoneLayerShow: false,
            monitoringLayerShow: false,
            panoramaLayerShow: false,
            dialogTitle: '',
            dialogVisible: false,
            panoramaTitle: '',
            panoramaVisible: false,

            carList: [{
                name: '1号警车',
@@ -665,7 +713,8 @@
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'carLayers',
                        type: "billboard",
                        params: item
                        params: item,
                        incident: this.siteClick
                    })
                })
            } else {
@@ -699,7 +748,8 @@
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'monitoringLayers',
                        type: "billboard",
                        params: item
                        params: item,
                        incident: this.siteClick
                    })
                })
            } else {
@@ -716,7 +766,8 @@
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'panoramaLayers',
                        type: "billboard",
                        params: item
                        params: item,
                        incident: this.panoramaSiteClick
                    })
                })
            } else {
@@ -744,6 +795,30 @@
                }
            }
            this.chooseData = obj
        },

        siteClick (e) {
            this.dialogTitle = e.overlay.attrParams.name
            this.dialogVisible = true

            if (this.$refs.videoElement && this.$refs.videoElement != null) {
                this.$refs.videoElement.currentTime = 0
                this.$refs.videoElement.play()
            }
        },

        dialogBeforeClose () {
            this.$refs.videoElement.pause()
            this.dialogVisible = false
        },

        panoramaSiteClick (e) {
            this.panoramaTitle = e.overlay.attrParams.name
            this.panoramaVisible = true
        },

        panoramaBeforeClose () {
            this.panoramaVisible = false
        }
    },
    watch: {