弹框+ifram

src/components/dialog.vue

@@ -0,0 +1,92 @@
+<template >
+  <div class="dialogSec">
+    <el-dialog v-model="dialogTableVisible" title="闵行龙湖天街">
+      <el-row class="descriptText">
+        <el-col :span="12">所属街镇：虹桥镇</el-col>
+        <el-col :span="12">网格号：闵S2-3</el-col>
+        <el-col :span="12">位置：闵行区莘庄镇松辛路585号</el-col>
+        <el-col :span="12">统一社会代码：156531513533</el-col>
+        <el-col :span="12">场所面积：100m²</el-col>
+        <el-col :span="12">安全责任人：潘伟</el-col>
+        <el-col :span="12">安全管理人：李小鹏</el-col>
+        <el-col :span="12">单位类别：一般单位</el-col>
+        <el-col :span="12">单位使用性质：饭店</el-col>
+        <el-col :span="12">建筑性质：商业服务业</el-col>
+        <el-col :span="12">建筑结构：钢混结构</el-col>
+        <el-col :span="12">隐患扣分：25分</el-col>
+        <el-col :span="12">风险等级：<span style="color:red">高风险</span></el-col>
+        <br>
+        <el-col :span="12">所属街镇：虹桥镇</el-col>
+        <el-col :span="12">网格号：闵S2-3</el-col>
+        <el-col :span="12">位置：闵行区莘庄镇松辛路585号</el-col>
+        <el-col :span="12">统一社会代码：156531513533</el-col>
+        <el-col :span="12">场所面积：100m²</el-col>
+        <el-col :span="12">安全责任人：潘伟</el-col>
+        <el-col :span="12">安全管理人：李小鹏</el-col>
+        <el-col :span="12">单位类别：一般单位</el-col>
+        <el-col :span="12">单位使用性质：饭店</el-col>
+        <el-col :span="12">建筑性质：商业服务业</el-col>
+        <el-col :span="12">建筑结构：钢混结构</el-col>
+        <el-col :span="12">隐患扣分：25分</el-col>
+        <el-col :span="12">风险等级：<span style="color:red">高风险</span></el-col>
+      </el-row>
+      <br />
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      dialogTableVisible: true,
+      
+
+     
+
+ 
+
+      formInline: {
+        code: "",
+        name: "",
+      },
+    };
+  },
+  methods: {
+
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dialogSec {
+  
+  ::v-deep .el-dialog {
+    width:7rem!important;
+    border:1px solid rgba(115, 251, 253, 1);
+    box-shadow: inset 0 0 1px 0.0125rem rgba(115, 251, 253, 1);
+    background: rgba(0, 0, 0, 0.6);
+
+
+    
+  
+
+
+    .el-dialog__title {
+      color: #74fbfe;
+      font-size: 16px;
+    }
+    .el-dialog__body {
+      margin-top: 20px;
+    }
+    .descriptText{
+      color:#dbd2d2;
+      line-height:.3rem;
+        overflow-y:auto;
+        height:3rem;
+        &::-webkit-scrollbar {
+                        display: none;
+                    }
+    }
+  }
+}
+</style>

src/views/security-plan.vue

@@ -370,28 +370,15 @@
                  <!-- 疏导区每日动态 start -->
                  <div class="dailyNewSec">
                     <h4 style="display: flex">疏导区每日动态</h4>
-                    <div class="dailyItem dailyItemLeft">
+                    <div class="dailyItem ">
                         <el-row>
-                            <el-col>七宝镇党委书记杨维萍开展网格治理调研指导</el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col>华漕镇开展“地毯式”安全生产大检查活动</el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col>张雪松支队长带队到疏导区开展消防安全检查</el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col>陈国清政委到指挥所检查指导</el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col>总队召开进博会消防安保临战动员部署会</el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col>支队召开第六届进博会消防安保警师大会</el-col>
+                            <el-col v-for="(item,index) in dailyArray" :key="index">
+                                <a target="_blank" @click="openPdf(item.url)">{{ item.title }}</a>
+                            </el-col>
                         </el-row>
-                    </div>
-                    <div class="dailyItem dailyItemRight">
-                        <el-row>
+                       
+
+                        <!-- <el-row>
                             <el-col><a href="http://32.0.15.107:8080/mhvi/20231031.pdf" target="_blank">第七期 第六届中国国际进口博览会每日工作动态</a></el-col>
                             <el-col><a href="http://32.0.15.107:8080/mhvi/20231030.pdf" target="_blank">第六期 第六届中国国际进口博览会每日工作动态</a></el-col>
                             <el-col><a href="http://32.0.15.107:8080/mhvi/20231027.pdf" target="_blank">第五期 第六届中国国际进口博览会每日工作动态</a></el-col>
@@ -399,10 +386,8 @@
                             <el-col><a href="http://32.0.15.107:8080/mhvi/20231025.pdf" target="_blank">第三期 第六届中国国际进口博览会每日工作动态</a></el-col>
                             <el-col><a href="http://32.0.15.107:8080/mhvi/20231024.pdf" target="_blank">第二期 第六届中国国际进口博览会每日工作动态</a></el-col>
                             <el-col><a href="http://32.0.15.107:8080/mhvi/20231023.pdf" target="_blank">第一期 第六届中国国际进口博览会每日工作动态</a></el-col>
-                        </el-row>
-                        <el-row>
-                            <el-col></el-col>
-                        </el-row>
+                        </el-row> -->
+                 
                         <el-row>
                             <el-col>今日支队领导视察指挥中心</el-col>
                         </el-row>
@@ -933,11 +918,21 @@
                 
             </el-row>
         </div>
+
         <!-- pdf弹框 -->
-        <!-- <div class="pdf sadianTankang" >
-            <object :data="pdfUrl"></object>
-        </div> -->
+        <div class="dialogSec">
+            <el-dialog v-model="dialogTableVisible" title="" :showClose="false">
+                <iframe
+                    :src="pdfUrl"
+                    frameborder="0"
+                    style="width: 100%; height: 87vh"
+                ></iframe>
+            </el-dialog>
+        </div>
+
+        
     </el-row>
+
 </template>
 
 <script>
@@ -956,6 +951,37 @@ export default {
     data() {
         return {
             check: 1,
+            dialogTableVisible:false,
+            pdfUrl:'',
+            dailyArray:[{
+                    title: '第七期 第六届中国国际进口博览会每日工作动态',
+                    url: 'http://32.0.15.107:8080/mhvi/20231031.pdf',
+                },
+                {
+                    title: '第六期 第六届中国国际进口博览会每日工作动态',
+                    url: 'http://32.0.15.107:8080/mhvi/20231030.pdf',
+                },
+                {
+                    title: '第五期 第六届中国国际进口博览会每日工作动态',
+                    url: 'http://32.0.15.107:8080/mhvi/20231027.pdf',
+                },
+                {
+                    title: '第四期 第六届中国国际进口博览会每日工作动态',
+                    url: 'http://32.0.15.107:8080/mhvi/20231026.pdf',
+                },
+                {
+                    title: '第三期 第六届中国国际进口博览会每日工作动态',
+                    url: 'http://32.0.15.107:8080/mhvi/20231025.pdf',
+                },
+                {
+                    title: '第二期 第六届中国国际进口博览会每日工作动态',
+                    url: 'http://32.0.15.107:8080/mhvi/20231024.pdf',
+                },
+                {
+                    title: '第一期 第六届中国国际进口博览会每日工作动态',
+                    url: 'http://32.0.15.107:8080/mhvi/20231023.pdf',
+                },
+            ],
             tableData111:[{
                     id: '闵S1(华漕网格）',
                     count1: '1127',
@@ -1626,6 +1652,13 @@ export default {
         
     },
     methods: {
+        /**
+         * 每日动态弹框打开pdf
+         */
+        openPdf(val){
+            this.pdfUrl=val;
+            this.dialogTableVisible=true
+        },
 
         btnC(val) {
             this.check = val;
@@ -3340,31 +3373,15 @@ export default {
 
         .dailyNewSec{
             height:18%;
-            .dailyItemLeft{
-                margin-top:.2rem;   
-                line-height:.375rem;
-                font-size:.175rem;
-                width:39%;
-                display: inline-block;
-                vertical-align: middle;
-                height:60%;
-                overflow-y:scroll;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                .el-col::after {
-                    content: '|';
-                    margin-left: .15rem;
-
-                }
-            }
-            .dailyItemRight{
+           
+            .dailyItem{
                 vertical-align: middle;
-                margin-left:.15rem;
+                margin-left:1rem;
                 margin-top:.2rem;   
                 line-height:.375rem;
                 font-size:.175rem;
                 width:58%;
+                // margin:0 auto;
                 height:60%;
                 overflow-y:scroll;
                 display: inline-block;
@@ -3583,6 +3600,30 @@ export default {
 
         }
     }
+
+
+
+    .dialogSec {
+  ::v-deep .el-dialog {
+    width:16rem!important;
+    // border:1px solid rgba(115, 251, 253, 1);
+    // box-shadow: inset 0 0 1px 0.0125rem rgba(115, 251, 253, 1);
+    // background: rgba(0, 0, 0, 0.6);
+    margin-top:5vh!important;
+    height:87vh;
+    padding:0;
+    // margin: atuo;
+
+    .el-dialog__title {
+      color: #74fbfe;
+      font-size: 16px;
+    }
+    .el-dialog__body {
+      margin-top: 20px;
+    }
+   
+  }
+}
 </style>
 <style>
 .el-tooltip__popper {