fix-

ruoyi-ui/src/views/index.vue

@@ -59,7 +59,26 @@
         </div>
         <transition name="el-zoom-in-center">
           <div v-if="dialogInfoRight" class="dialog_info_right">
-            <div v-for="item in moBanDataList" :key="item.id">
+            <el-collapse v-model="activeNames" @change="panelChangeFn">
+              <el-collapse-item v-for="item in moBanDataList" :key="item.id" :title="item.bt" :name="item.id">
+                <div class="dialog_info_right_show">
+                  <div class="dialog_info_left_show_box" style="overflow-y: visible;">
+                    <div class="dialog_info_left_show_box_item" v-for="i in item.mbList" :key="i.id">
+                      <div class="dialog_info_left_show_l" style="width:17vw;">
+                        <div class="dialog_info_left_show_l_xsq" :style="{'width':i.w / getScrollSz(i.w)+'px','height':i.h / getScrollSz(i.w)+'px',}">
+                          <div class="dialog_info_left_show_l_xsq_txt" :style="{'font-size':i.fz / getScrollSz(i.w)+'px',color:i.col}" v-html="i.txt"></div>
+                        </div>
+                      </div>
+                      <div class="dialog_info_left_show_r" style="width: 3.5vw;">
+                        <div @click="putLeftFn(i)" class="show_r_btn dialog_info_left_show_r_btn3"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </el-collapse-item>
+            </el-collapse>
+
+            <!-- <div v-for="item in moBanDataList" :key="item.id">
               <div class="dialog_info_right_tit">{{ item.bt }}</div>
               <div class="dialog_info_right_show">
                 <div class="dialog_info_left_show_box">
@@ -73,10 +92,9 @@
                       <div @click="putLeftFn(i)" class="show_r_btn dialog_info_left_show_r_btn3"></div>
                     </div>
                   </div>
-
                 </div>
               </div>
-            </div>
+            </div> -->
 
           </div>
         </transition>
@@ -175,12 +193,13 @@ export default {
   name: 'indexView',
   data() {
     return {
+      activeNames: [1001, 1002, 1003, 1004, 1005, 1006],
       showEmit: false,
       boardEmitItem: {}, //修改弹窗的数据
       activeName: 'first',
       dialogTit: '门架式可变信息标志YK16+270',
-      dialogInfoLeft: false,
-      dialogInfoRight: false,
+      dialogInfoLeft: true,
+      dialogInfoRight: true,
       mapDialogTop: '0px',
       mapDialogLeft: '0px',
       keyMonitoringList: [
@@ -224,8 +243,11 @@ export default {
             { id: 308, txt: '谨慎驾驶, <br/> 注意安全', w: 768, h: 160, col: '#03FF00', fz: 60, align: 'center' }
           ]
         },
-        { id: 1002, bt: '日常通用', mbList: [{ id: 309, txt: '道路施工, <br/> 谨慎驾驶', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] },
-        { id: 1003, bt: '恶劣天气', mbList: [{ id: 309, txt: '救援   拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] }
+        { id: 1002, bt: '施工管控', mbList: [{ id: 309, txt: '道路施工, <br/> 谨慎驾驶', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] },
+        { id: 1003, bt: '恶劣天气', mbList: [{ id: 309, txt: '救援   拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] },
+        { id: 1004, bt: '交通拥堵', mbList: [{ id: 309, txt: '救援   拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] },
+        { id: 1005, bt: '突发事件', mbList: [{ id: 309, txt: '救援   拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] },
+        { id: 1006, bt: '警情播报', mbList: [{ id: 309, txt: '救援   拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, align: 'center' }] }
       ],
 
       tabInfoList: [
@@ -272,6 +294,9 @@ export default {
       // this.$refs.mapDialog.style.left = e.pixel.x + 'px'
       // console.log(this.$refs.mapDialog)
     },
+    panelChangeFn(val) {
+      console.log(val)
+    },
     // 接收子组件新增待发模板
     addInfo(form) {
       console.log(form, '待发新增')
@@ -969,4 +994,32 @@ export default {
 ::v-deep .el-tabs__active-bar {
   background-color: #3de8ff !important;
 }
+::v-deep .el-collapse-item__header {
+  color: #fff;
+  height: 28px;
+  background-color: #053b4f;
+  border: none;
+  padding-left: 0.5vw;
+}
+::v-deep .el-collapse {
+  color: #fff;
+  border: none;
+}
+::v-deep .el-collapse-item__wrap {
+  color: #fff;
+  will-change: height;
+  background-color: #053b4f;
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin-top: 0.5vh;
+  border: none;
+}
+::v-deep .el-collapse-item__content {
+  margin-bottom: 0;
+  padding: 0.5vh 0.5vw;
+}
+::v-deep .el-collapse-item {
+  margin-bottom: 1vh;
+}
 </style>