diff --git a/src/assets/images/inIcon.png b/src/assets/images/inIcon.png
new file mode 100644
index 0000000..1d0001d
--- /dev/null
+++ b/src/assets/images/inIcon.png
Binary files differ

diff --git a/src/assets/images/inIcon.png b/src/assets/images/inIcon.png
new file mode 100644
index 0000000..1d0001d
--- /dev/null
+++ b/src/assets/images/inIcon.png
Binary files differ
diff --git a/src/assets/images/outIcon.png b/src/assets/images/outIcon.png
new file mode 100644
index 0000000..b7d856d
--- /dev/null
+++ b/src/assets/images/outIcon.png
Binary files differ

diff --git a/src/assets/images/inIcon.png b/src/assets/images/inIcon.png
new file mode 100644
index 0000000..1d0001d
--- /dev/null
+++ b/src/assets/images/inIcon.png
Binary files differ
diff --git a/src/assets/images/outIcon.png b/src/assets/images/outIcon.png
new file mode 100644
index 0000000..b7d856d
--- /dev/null
+++ b/src/assets/images/outIcon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/dddt_icon.png b/src/assets/images/tanchuang/dddt_icon.png
new file mode 100644
index 0000000..e9b21ae
--- /dev/null
+++ b/src/assets/images/tanchuang/dddt_icon.png
Binary files differ

diff --git a/src/assets/images/inIcon.png b/src/assets/images/inIcon.png
new file mode 100644
index 0000000..1d0001d
--- /dev/null
+++ b/src/assets/images/inIcon.png
Binary files differ
diff --git a/src/assets/images/outIcon.png b/src/assets/images/outIcon.png
new file mode 100644
index 0000000..b7d856d
--- /dev/null
+++ b/src/assets/images/outIcon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/dddt_icon.png b/src/assets/images/tanchuang/dddt_icon.png
new file mode 100644
index 0000000..e9b21ae
--- /dev/null
+++ b/src/assets/images/tanchuang/dddt_icon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/jiantou_icon.png b/src/assets/images/tanchuang/jiantou_icon.png
new file mode 100644
index 0000000..3b030bd
--- /dev/null
+++ b/src/assets/images/tanchuang/jiantou_icon.png
Binary files differ

diff --git a/src/assets/images/inIcon.png b/src/assets/images/inIcon.png
new file mode 100644
index 0000000..1d0001d
--- /dev/null
+++ b/src/assets/images/inIcon.png
Binary files differ
diff --git a/src/assets/images/outIcon.png b/src/assets/images/outIcon.png
new file mode 100644
index 0000000..b7d856d
--- /dev/null
+++ b/src/assets/images/outIcon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/dddt_icon.png b/src/assets/images/tanchuang/dddt_icon.png
new file mode 100644
index 0000000..e9b21ae
--- /dev/null
+++ b/src/assets/images/tanchuang/dddt_icon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/jiantou_icon.png b/src/assets/images/tanchuang/jiantou_icon.png
new file mode 100644
index 0000000..3b030bd
--- /dev/null
+++ b/src/assets/images/tanchuang/jiantou_icon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/xcdt_icon.png b/src/assets/images/tanchuang/xcdt_icon.png
new file mode 100644
index 0000000..609db2c
--- /dev/null
+++ b/src/assets/images/tanchuang/xcdt_icon.png
Binary files differ

diff --git a/src/assets/images/inIcon.png b/src/assets/images/inIcon.png
new file mode 100644
index 0000000..1d0001d
--- /dev/null
+++ b/src/assets/images/inIcon.png
Binary files differ
diff --git a/src/assets/images/outIcon.png b/src/assets/images/outIcon.png
new file mode 100644
index 0000000..b7d856d
--- /dev/null
+++ b/src/assets/images/outIcon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/dddt_icon.png b/src/assets/images/tanchuang/dddt_icon.png
new file mode 100644
index 0000000..e9b21ae
--- /dev/null
+++ b/src/assets/images/tanchuang/dddt_icon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/jiantou_icon.png b/src/assets/images/tanchuang/jiantou_icon.png
new file mode 100644
index 0000000..3b030bd
--- /dev/null
+++ b/src/assets/images/tanchuang/jiantou_icon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/xcdt_icon.png b/src/assets/images/tanchuang/xcdt_icon.png
new file mode 100644
index 0000000..609db2c
--- /dev/null
+++ b/src/assets/images/tanchuang/xcdt_icon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/zxdt_icon.png b/src/assets/images/tanchuang/zxdt_icon.png
new file mode 100644
index 0000000..b97d245
--- /dev/null
+++ b/src/assets/images/tanchuang/zxdt_icon.png
Binary files differ

diff --git a/src/assets/images/inIcon.png b/src/assets/images/inIcon.png
new file mode 100644
index 0000000..1d0001d
--- /dev/null
+++ b/src/assets/images/inIcon.png
Binary files differ
diff --git a/src/assets/images/outIcon.png b/src/assets/images/outIcon.png
new file mode 100644
index 0000000..b7d856d
--- /dev/null
+++ b/src/assets/images/outIcon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/dddt_icon.png b/src/assets/images/tanchuang/dddt_icon.png
new file mode 100644
index 0000000..e9b21ae
--- /dev/null
+++ b/src/assets/images/tanchuang/dddt_icon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/jiantou_icon.png b/src/assets/images/tanchuang/jiantou_icon.png
new file mode 100644
index 0000000..3b030bd
--- /dev/null
+++ b/src/assets/images/tanchuang/jiantou_icon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/xcdt_icon.png b/src/assets/images/tanchuang/xcdt_icon.png
new file mode 100644
index 0000000..609db2c
--- /dev/null
+++ b/src/assets/images/tanchuang/xcdt_icon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/zxdt_icon.png b/src/assets/images/tanchuang/zxdt_icon.png
new file mode 100644
index 0000000..b97d245
--- /dev/null
+++ b/src/assets/images/tanchuang/zxdt_icon.png
Binary files differ
diff --git a/src/views/oneMap/components/ZHRQ.vue b/src/views/oneMap/components/ZHRQ.vue
index f98d803..fec607a 100644
--- a/src/views/oneMap/components/ZHRQ.vue
+++ b/src/views/oneMap/components/ZHRQ.vue
@@ -143,7 +143,7 @@
         </div>
       </div>
     </div>
-    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
+    <!-- <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopTableHeader">
         <span class="TopTableListSpan TopTableListSpan1">时间</span>
         <span class="TopTableListSpan TopTableListSpan2">事件明细</span>
@@ -152,7 +152,7 @@
         <span class="TopTableListSpan TopTableListSpan5">责任单位</span>
         <span class="TopTableListSpan TopTableListSpan6">督办</span>
       </div>
-      <!-- <div class="TopTableBody"> -->
+
       <Vue3SeamlessScroll :list="AllData.TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
         <div class="TopTableBody_list" v-for="item in AllData.TopTableData">
           <span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
@@ -171,8 +171,7 @@
           </span>
         </div>
       </Vue3SeamlessScroll>
-      <!-- </div> -->
-    </div>
+    </div> -->
     <div :class="['bottomBox', 'animate__animated', showPanel ? 'animate__bounceOutDown' : 'animate__fadeInUpBig']">
       <div class="TopTableHeader">
         <span class="TopTableListSpan TopTableListSpan1">指挥中心</span>

diff --git a/src/assets/images/inIcon.png b/src/assets/images/inIcon.png
new file mode 100644
index 0000000..1d0001d
--- /dev/null
+++ b/src/assets/images/inIcon.png
Binary files differ
diff --git a/src/assets/images/outIcon.png b/src/assets/images/outIcon.png
new file mode 100644
index 0000000..b7d856d
--- /dev/null
+++ b/src/assets/images/outIcon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/dddt_icon.png b/src/assets/images/tanchuang/dddt_icon.png
new file mode 100644
index 0000000..e9b21ae
--- /dev/null
+++ b/src/assets/images/tanchuang/dddt_icon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/jiantou_icon.png b/src/assets/images/tanchuang/jiantou_icon.png
new file mode 100644
index 0000000..3b030bd
--- /dev/null
+++ b/src/assets/images/tanchuang/jiantou_icon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/xcdt_icon.png b/src/assets/images/tanchuang/xcdt_icon.png
new file mode 100644
index 0000000..609db2c
--- /dev/null
+++ b/src/assets/images/tanchuang/xcdt_icon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/zxdt_icon.png b/src/assets/images/tanchuang/zxdt_icon.png
new file mode 100644
index 0000000..b97d245
--- /dev/null
+++ b/src/assets/images/tanchuang/zxdt_icon.png
Binary files differ
diff --git a/src/views/oneMap/components/ZHRQ.vue b/src/views/oneMap/components/ZHRQ.vue
index f98d803..fec607a 100644
--- a/src/views/oneMap/components/ZHRQ.vue
+++ b/src/views/oneMap/components/ZHRQ.vue
@@ -143,7 +143,7 @@
         </div>
       </div>
     </div>
-    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
+    <!-- <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopTableHeader">
         <span class="TopTableListSpan TopTableListSpan1">时间</span>
         <span class="TopTableListSpan TopTableListSpan2">事件明细</span>
@@ -152,7 +152,7 @@
         <span class="TopTableListSpan TopTableListSpan5">责任单位</span>
         <span class="TopTableListSpan TopTableListSpan6">督办</span>
       </div>
-      <!-- <div class="TopTableBody"> -->
+
       <Vue3SeamlessScroll :list="AllData.TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
         <div class="TopTableBody_list" v-for="item in AllData.TopTableData">
           <span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
@@ -171,8 +171,7 @@
           </span>
         </div>
       </Vue3SeamlessScroll>
-      <!-- </div> -->
-    </div>
+    </div> -->
     <div :class="['bottomBox', 'animate__animated', showPanel ? 'animate__bounceOutDown' : 'animate__fadeInUpBig']">
       <div class="TopTableHeader">
         <span class="TopTableListSpan TopTableListSpan1">指挥中心</span>
diff --git a/src/views/oneMap/components/dynamicInformation.vue b/src/views/oneMap/components/dynamicInformation.vue
index 644d8c6..45e018f 100644
--- a/src/views/oneMap/components/dynamicInformation.vue
+++ b/src/views/oneMap/components/dynamicInformation.vue
@@ -1,48 +1,89 @@
 <template>
-  <div class="dynamicInformation">
-    <div class="leftInfo">
-      <div class="title">中心动态</div>
-      <div class="title">现场动态</div>
-      <div class="title">调度动态</div>
-    </div>
-    <div class="rightInfo">
-      <div class="TopTableHeader">
-        <span class="TopTableListSpan TopTableListSpan1">时间</span>
-        <span class="TopTableListSpan TopTableListSpan2">事件明细</span>
-        <span class="TopTableListSpan TopTableListSpan3">地点</span>
-        <span class="TopTableListSpan TopTableListSpan4">状态</span>
-        <span class="TopTableListSpan TopTableListSpan5">责任单位</span>
-        <span class="TopTableListSpan TopTableListSpan6">督办</span>
+  <div class="dynamicInformation" :class="[showInfo ? 'openIcon' : 'closeIcon', showPanel ? 'leftShow' : 'centerShow']">
+    <!-- 左侧 -->
+    <div class="leftInfo" :class="['animate__animated', showInfo ? 'animate__fadeInLeft' : 'animate__fadeOutLeft']">
+      <div class="title" :class="infoIndex == 0 ? 'active' : ''" @click="changeDT(0)">
+        <img :src="zxdt_icon" alt="" class="TopInfoListIcon" />
+        中心动态
+        <img :src="jiantou_icon" alt="" class="jtIcon" v-show="infoIndex == 0" />
       </div>
-      <!-- <div class="TopTableBody"> -->
-      <Vue3SeamlessScroll :list="TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
-        <div class="TopTableBody_list" v-for="item in TopTableData">
-          <span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
-          <span class="TopTableListSpan TopTableListSpan2">{{ item.mx }}</span>
-          <span class="TopTableListSpan TopTableListSpan3">{{ item.dd }}</span>
-          <span class="TopTableListSpan TopTableListSpan4">{{ item.zt == 0 ? '未处理' : '已处理' }}</span>
-          <span class="TopTableListSpan TopTableListSpan5">{{ item.dw }}</span>
-          <span class="TopTableListSpan TopTableListSpan6">
-            <img class="TopTableListSpanImg2" src="@/assets/images/Sponge_screen/RQ/RQ_XX.png" alt="" @click="PaiFa(item)" />
-            <img
-              class="TopTableListSpanImg"
-              src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
-              alt=""
-              @click="XianChangLianXian(item)"
-            />
-          </span>
-        </div>
-      </Vue3SeamlessScroll>
-      <!-- </div> -->
+      <div class="title" :class="infoIndex == 1 ? 'active' : ''" @click="changeDT(1)">
+        <img :src="xcdt_icon" alt="" class="TopInfoListIcon" />
+        现场动态
+        <img :src="jiantou_icon" alt="" class="jtIcon" v-show="infoIndex == 1" />
+      </div>
+      <div class="title" :class="infoIndex == 2 ? 'active' : ''" @click="changeDT(2)">
+        <img :src="dddt_icon" alt="" class="TopInfoListIcon" />
+        调度动态
+        <img :src="jiantou_icon" alt="" class="jtIcon" v-show="infoIndex == 2" />
+      </div>
     </div>
+    <!-- 右侧 -->
+    <div class="rightInfo" :class="['animate__animated', showInfo ? 'animate__fadeInLeft' : 'animate__fadeOutLeft']">
+      <!-- 表头 -->
+      <el-row class="TopTableHeader">
+        <el-col :span="tableHeader.span[i]" v-for="(item, i) in tableHeader.titleList" :key="i">
+          <div class="headerSpan">{{ item }}</div>
+        </el-col>
+      </el-row>
+      <!-- 表格内容 -->
+      <Vue3SeamlessScroll :list="tableBodyData" :singleHeight="34" :hover="true" class="TopTableBody">
+        <el-row class="TopTableBody_list" v-for="(item, k) in tableBodyData" :key="k">
+          <template v-for="(info, j) in tableHeader.codeList" :key="info">
+            <!-- 中心动态 特殊展示 operate -->
+            <el-col :span="tableHeader.span[j]" v-if="info == 'operate'">
+              <div class="bodySpan">
+                <el-button class="bodyBtn" link>发布</el-button>
+                <el-button class="bodyBtn" link>解除</el-button>
+                <el-button class="bodyBtn" link>下载</el-button>
+              </div>
+            </el-col>
+            <!-- 现场动态 特殊展示-->
+            <el-col :span="tableHeader.span[j]" v-if="info == 'duban'">
+              <div class="bodySpan">
+                <img class="TopTableListSpanImg2" src="@/assets/images/Sponge_screen/RQ/RQ_XX.png" alt="" @click="PaiFa(item)" />
+                <img
+                  class="TopTableListSpanImg"
+                  src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
+                  alt=""
+                  @click="XianChangLianXian(item)"
+                />
+              </div>
+            </el-col>
+            <el-col :span="tableHeader.span[j]" v-if="info == 'zt'">
+              <div class="bodySpan">
+                {{ item[info] == 0 ? '未处理' : '已处理' }}
+              </div>
+            </el-col>
+            <!-- 通用展示 -->
+            <el-col :span="tableHeader.span[j]" v-else>
+              <el-tooltip effect="dark" :content="item[info]" placement="top">
+                <div class="bodySpan">{{ item[info] }}</div>
+              </el-tooltip>
+            </el-col>
+          </template>
+        </el-row>
+      </Vue3SeamlessScroll>
+    </div>
+
+    <img class="infoIcon" alt="" :src="showInfo ? inIcon : outIcon" @click="shrinkInfo" />
   </div>
 </template>
 
 <script setup name="dynamicInformation">
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-import { toRaw, toRefs } from 'vue';
+import { onMounted, toRaw, toRefs } from 'vue';
 
-const showPanel = ref(true); //面板展开收起
+import inIcon from '@/assets/images/inIcon.png';
+import outIcon from '@/assets/images/outIcon.png';
+import jiantou_icon from '@/assets/images/tanchuang/jiantou_icon.png';
+import dddt_icon from '@/assets/images/tanchuang/dddt_icon.png';
+import zxdt_icon from '@/assets/images/tanchuang/zxdt_icon.png';
+import xcdt_icon from '@/assets/images/tanchuang/xcdt_icon.png';
+
+const infoIndex = ref(0);
+const showInfo = ref(true); // 改变 dynamicInformation 宽度
+const showPanel = ref(true); //面板展开收起  改变定位left
 // 面板内容展开收起控制
 const props = defineProps({
   showPanel: {
@@ -50,44 +91,130 @@
   },
 });
 
+// 顶部表格数据
+const TopTableData1 = [
+  {
+    sj: '2024-09-26 10:00:29',
+    mx: '燃气常规检查发现泄漏',
+    dd: '宝塔区凤凰山街道二道街',
+    zt: 0, //0未处理 1已处理
+    dw: '延安市燃气总公司',
+    duban: null,
+  },
+  {
+    sj: '2024-09-27 16:10:248',
+    mx: '燃气常规检查发现泄漏',
+    dd: '宝塔区凤凰山街道二道街',
+    zt: 0, //0未处理 1已处理
+    dw: '延安市燃气总公司',
+    duban: null,
+  },
+  {
+    sj: '2024-09-26 10:00:29',
+    mx: '燃气常规检查发现泄漏',
+    dd: '宝塔区凤凰山街道二道街',
+    zt: 0, //0未处理 1已处理
+    dw: '延安市燃气总公司',
+    duban: null,
+  },
+  {
+    sj: '2024-09-27 16:10:248',
+    mx: '燃气常规检查发现泄漏',
+    dd: '宝塔区凤凰山街道二道街',
+    zt: 0, //0未处理 1已处理
+    dw: '延安市燃气总公司',
+    duban: null,
+  },
+];
+const TopTableData = [
+  {
+    xh: '1',
+    name: '燃气-Ⅳ级响应-20240629',
+    startTime: '2024-09-29 10:00:29',
+    endTime: '2024-09-30 10:00:29',
+    zt: 0, //0未处理 1已处理
+    type: '线下',
+    operate: null,
+  },
+  {
+    xh: '2',
+    name: '燃气-Ⅳ级响应-20240618',
+    startTime: '2024-09-18 10:00:29',
+    endTime: '2024-09-19 10:00:29',
+    zt: 0, //0未处理 1已处理
+    type: '线下',
+    operate: null,
+  },
+  {
+    xh: '3',
+    name: '燃气-Ⅳ级响应-20240618',
+    startTime: '2024-09-18 10:00:29',
+    endTime: '2024-09-19 10:00:29',
+    zt: 0, //0未处理 1已处理
+    type: '线下',
+    operate: null,
+  },
+  {
+    xh: '4',
+    name: '燃气-Ⅳ级响应-20240618',
+    startTime: '2024-09-18 10:00:29',
+    endTime: '2024-09-19 10:00:29',
+    zt: 0, //0未处理 1已处理
+    type: '线下',
+    operate: null,
+  },
+];
+const TopTableData2 = [
+  {
+    initiator: '延安城管指挥中心',
+    recipient: '燃气供应处',
+    startTime: '2024-10-21 13:00:29',
+    endTime: '2024-10-21 14:00:29',
+    type: '视频调度',
+  },
+  {
+    initiator: '延安城管指挥中心',
+    recipient: '燃气供应处',
+    startTime: '2024-10-21 13:00:29',
+    endTime: '2024-10-21 14:00:29',
+    type: '语音调度',
+  },
+  {
+    initiator: '延安城管指挥中心',
+    recipient: '延安市燃气总公司',
+    startTime: '2024-10-21 13:00:29',
+    endTime: '2024-10-21 14:00:29',
+    type: '语音调度',
+  },
+];
+
+const allData = [TopTableData, TopTableData1, TopTableData2];
+
 const AllData = reactive({
-  // 顶部表格数据
-  TopTableData: [
+  // 当前动态 表头数据
+  tableHeader: {},
+  // 调度总体 所有表头数据
+  tableHeaderData: [
     {
-      sj: '2024-09-26 10:00:29',
-      mx: '燃气常规检查发现泄漏',
-      dd: '宝塔区凤凰山街道二道街',
-      zt: 0, //0未处理 1已处理
-      dw: '延安市燃气总公司',
-      value: null,
+      titleList: ['序号', '应急响应名称', '启动时间', '结束时间', '状态', '审核方式', '应急响应操作'], //表头
+      codeList: ['xh', 'name', 'startTime', 'endTime', 'zt', 'type', 'operate'], //表头对应字段
+      span: [1, 5, 5, 5, 2, 2, 4], //表头布局间隔
     },
     {
-      sj: '2024-09-27 16:10:248',
-      mx: '燃气常规检查发现泄漏',
-      dd: '宝塔区凤凰山街道二道街',
-      zt: 0, //0未处理 1已处理
-      dw: '延安市燃气总公司',
-      value: null,
+      titleList: ['时间', '事件明细', '地点', '状态', '责任单位', '督办'],
+      codeList: ['sj', 'mx', 'dd', 'zt', 'dw', 'duban'],
+      span: [5, 5, 5, 2, 4, 3],
     },
     {
-      sj: '2024-09-26 10:00:29',
-      mx: '燃气常规检查发现泄漏',
-      dd: '宝塔区凤凰山街道二道街',
-      zt: 0, //0未处理 1已处理
-      dw: '延安市燃气总公司',
-      value: null,
-    },
-    {
-      sj: '2024-09-27 16:10:248',
-      mx: '燃气常规检查发现泄漏',
-      dd: '宝塔区凤凰山街道二道街',
-      zt: 0, //0未处理 1已处理
-      dw: '延安市燃气总公司',
-      value: null,
+      titleList: ['方式', '发起人', '接收人', '调度开始时间', '调度结束时间'],
+      codeList: ['type', 'initiator', 'recipient', 'startTime', 'endTime'],
+      span: [4, 5, 5, 5, 5],
     },
   ],
+  // 当前表格对应数据
+  tableBodyData: [],
 });
-const { TopTableData } = toRefs(AllData);
+const { tableHeader, tableHeaderData, tableBodyData } = toRefs(AllData);
 
 watch(
   () => props.showPanel,
@@ -112,24 +239,92 @@
 const XianChangLianXian = item => {
   bus.emit('OpenRY');
 };
+
+// 收缩信息
+const shrinkInfo = () => {
+  showInfo.value = !showInfo.value;
+};
+// 左侧动态切换
+const changeDT = index => {
+  infoIndex.value = index;
+  tableHeader.value = tableHeaderData.value[index];
+  tableBodyData.value = allData[index];
+};
+
+onMounted(() => {
+  // console.log(tableHeaderList.value);
+  tableHeader.value = tableHeaderData.value[infoIndex.value];
+  tableBodyData.value = allData[infoIndex.value];
+});
 </script>
 
 <style lang="scss" scoped>
 .dynamicInformation {
   position: absolute;
-  left: 490px;
+  // left: 490px;
   top: 110px;
   width: calc(100% - 1020px);
+  --parent-width: calc(100% - 1020px); /* 定义 CSS 变量 */
   height: 136px;
   box-sizing: border-box;
-  border: 1px solid red;
+  // border: 1px solid red;
   display: flex;
   align-items: center;
 
+  transition: all 1s ease;
+  // transition: left 1s ease;
+  &.openIcon {
+    width: calc(100% - 1020px);
+  }
+  &.closeIcon {
+    width: 0px;
+  }
+
+  &.centerShow {
+    will-change: transform;
+    transform: translateX(490px);
+  }
+  &.leftShow {
+    will-change: transform;
+    transform: translateX(30px);
+  }
+
   .leftInfo {
     width: 116px;
     height: 136px;
-    border: 1px solid yellow;
+    // border: 1px solid yellow;
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
+    border-radius: 6px;
+    border: 1px solid #47eef3;
+    box-sizing: border-box;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
+    display: flex;
+    flex-direction: column;
+    padding: 0px 0px 0px 10px;
+    // align-items: center;
+    justify-content: space-evenly;
+    .title {
+      position: relative;
+      display: flex;
+      align-items: center;
+      font-weight: 400;
+      font-size: 14px;
+      color: #fefefe;
+      cursor: pointer;
+      &.active {
+        color: #4efff1;
+      }
+      .TopInfoListIcon {
+        margin-right: 5px;
+      }
+      .jtIcon {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        // margin-left: 5px;
+      }
+    }
   }
 
   .rightInfo {
@@ -150,6 +345,14 @@
       background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
       border: 1px solid #74dde1;
       display: flex;
+      .headerSpan {
+        text-align: center;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 34px;
+        line-height: 34px;
+      }
     }
 
     .TopTableBody {
@@ -163,68 +366,67 @@
       // flex-wrap: nowrap;
 
       .TopTableBody_list {
-        display: inline-block;
+        // display: inline-block;
         width: 100%;
         height: 34px;
         /* 选择偶数行 */
         &:nth-child(even) {
           background: linear-gradient(0deg, #008599 0%, #08596d 100%);
         }
+        .bodySpan {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 34px;
+          line-height: 34px;
+          box-sizing: border-box;
+          cursor: default;
+          overflow: hidden;
+          text-overflow: ellipsis; /* 超出宽度后显示省略号 */
+          white-space: nowrap; /* 限制不允许换行 */
+          .TopTableListSpanImg {
+            width: 15px;
+            height: 19px;
+            margin: 7px;
+            cursor: pointer;
+          }
+          .TopTableListSpanImg2 {
+            width: 19px;
+            height: 19px;
+            margin: 7px;
+            cursor: pointer;
+          }
+          .bodyBtn {
+            color: #eee;
+            margin: 0;
+          }
+        }
       }
     }
 
-    .TopTableListSpan {
-      font-family: Source Han Sans CN;
-      font-weight: 400;
-      font-size: 14px;
-      color: #ffffff;
-      height: 34px;
-      line-height: 34px;
-      display: inline-block;
-      box-sizing: border-box;
-      overflow: hidden;
-      text-overflow: ellipsis; /* 超出宽度后显示省略号 */
-      white-space: nowrap; /* 限制不允许换行 */
-    }
-    .TopTableListSpan1 {
-      width: 20%;
-      text-align: left;
-      padding-left: 10px;
-    }
-    .TopTableListSpan2 {
-      width: 25%;
-      text-align: center;
-    }
-    .TopTableListSpan3 {
-      width: 20%;
-      text-align: center;
-    }
-    .TopTableListSpan4 {
-      width: 10%;
-      text-align: center;
-    }
-    .TopTableListSpan5 {
-      width: 15%;
-      text-align: center;
-    }
-    .TopTableListSpan6 {
-      width: 10%;
-      text-align: right;
-      padding-right: 10px;
+  }
 
-      .TopTableListSpanImg {
-        width: 15px;
-        height: 19px;
-        margin: 7px;
-        cursor: pointer;
-      }
-      .TopTableListSpanImg2 {
-        width: 19px;
-        height: 19px;
-        margin: 7px;
-        cursor: pointer;
-      }
-    }
+  .infoIcon {
+    position: absolute;
+    right: -15px;
+    // left: 0;
+    top: 40px;
+
+    cursor: pointer;
+    // transition: all 1s ease;
+    // --dtBox-width
+    // &.openIcon {
+    //   // transform: translateX(500px);
+    //   right: -15px;
+    // }
+    // &.closeIcon {
+    //   // transform: translateX(0px);
+    //   left: 0;
+    // }
   }
 }
 </style>

diff --git a/src/assets/images/inIcon.png b/src/assets/images/inIcon.png
new file mode 100644
index 0000000..1d0001d
--- /dev/null
+++ b/src/assets/images/inIcon.png
Binary files differ
diff --git a/src/assets/images/outIcon.png b/src/assets/images/outIcon.png
new file mode 100644
index 0000000..b7d856d
--- /dev/null
+++ b/src/assets/images/outIcon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/dddt_icon.png b/src/assets/images/tanchuang/dddt_icon.png
new file mode 100644
index 0000000..e9b21ae
--- /dev/null
+++ b/src/assets/images/tanchuang/dddt_icon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/jiantou_icon.png b/src/assets/images/tanchuang/jiantou_icon.png
new file mode 100644
index 0000000..3b030bd
--- /dev/null
+++ b/src/assets/images/tanchuang/jiantou_icon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/xcdt_icon.png b/src/assets/images/tanchuang/xcdt_icon.png
new file mode 100644
index 0000000..609db2c
--- /dev/null
+++ b/src/assets/images/tanchuang/xcdt_icon.png
Binary files differ
diff --git a/src/assets/images/tanchuang/zxdt_icon.png b/src/assets/images/tanchuang/zxdt_icon.png
new file mode 100644
index 0000000..b97d245
--- /dev/null
+++ b/src/assets/images/tanchuang/zxdt_icon.png
Binary files differ
diff --git a/src/views/oneMap/components/ZHRQ.vue b/src/views/oneMap/components/ZHRQ.vue
index f98d803..fec607a 100644
--- a/src/views/oneMap/components/ZHRQ.vue
+++ b/src/views/oneMap/components/ZHRQ.vue
@@ -143,7 +143,7 @@
         </div>
       </div>
     </div>
-    <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
+    <!-- <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
       <div class="TopTableHeader">
         <span class="TopTableListSpan TopTableListSpan1">时间</span>
         <span class="TopTableListSpan TopTableListSpan2">事件明细</span>
@@ -152,7 +152,7 @@
         <span class="TopTableListSpan TopTableListSpan5">责任单位</span>
         <span class="TopTableListSpan TopTableListSpan6">督办</span>
       </div>
-      <!-- <div class="TopTableBody"> -->
+
       <Vue3SeamlessScroll :list="AllData.TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
         <div class="TopTableBody_list" v-for="item in AllData.TopTableData">
           <span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
@@ -171,8 +171,7 @@
           </span>
         </div>
       </Vue3SeamlessScroll>
-      <!-- </div> -->
-    </div>
+    </div> -->
     <div :class="['bottomBox', 'animate__animated', showPanel ? 'animate__bounceOutDown' : 'animate__fadeInUpBig']">
       <div class="TopTableHeader">
         <span class="TopTableListSpan TopTableListSpan1">指挥中心</span>
diff --git a/src/views/oneMap/components/dynamicInformation.vue b/src/views/oneMap/components/dynamicInformation.vue
index 644d8c6..45e018f 100644
--- a/src/views/oneMap/components/dynamicInformation.vue
+++ b/src/views/oneMap/components/dynamicInformation.vue
@@ -1,48 +1,89 @@
 <template>
-  <div class="dynamicInformation">
-    <div class="leftInfo">
-      <div class="title">中心动态</div>
-      <div class="title">现场动态</div>
-      <div class="title">调度动态</div>
-    </div>
-    <div class="rightInfo">
-      <div class="TopTableHeader">
-        <span class="TopTableListSpan TopTableListSpan1">时间</span>
-        <span class="TopTableListSpan TopTableListSpan2">事件明细</span>
-        <span class="TopTableListSpan TopTableListSpan3">地点</span>
-        <span class="TopTableListSpan TopTableListSpan4">状态</span>
-        <span class="TopTableListSpan TopTableListSpan5">责任单位</span>
-        <span class="TopTableListSpan TopTableListSpan6">督办</span>
+  <div class="dynamicInformation" :class="[showInfo ? 'openIcon' : 'closeIcon', showPanel ? 'leftShow' : 'centerShow']">
+    <!-- 左侧 -->
+    <div class="leftInfo" :class="['animate__animated', showInfo ? 'animate__fadeInLeft' : 'animate__fadeOutLeft']">
+      <div class="title" :class="infoIndex == 0 ? 'active' : ''" @click="changeDT(0)">
+        <img :src="zxdt_icon" alt="" class="TopInfoListIcon" />
+        中心动态
+        <img :src="jiantou_icon" alt="" class="jtIcon" v-show="infoIndex == 0" />
       </div>
-      <!-- <div class="TopTableBody"> -->
-      <Vue3SeamlessScroll :list="TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
-        <div class="TopTableBody_list" v-for="item in TopTableData">
-          <span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
-          <span class="TopTableListSpan TopTableListSpan2">{{ item.mx }}</span>
-          <span class="TopTableListSpan TopTableListSpan3">{{ item.dd }}</span>
-          <span class="TopTableListSpan TopTableListSpan4">{{ item.zt == 0 ? '未处理' : '已处理' }}</span>
-          <span class="TopTableListSpan TopTableListSpan5">{{ item.dw }}</span>
-          <span class="TopTableListSpan TopTableListSpan6">
-            <img class="TopTableListSpanImg2" src="@/assets/images/Sponge_screen/RQ/RQ_XX.png" alt="" @click="PaiFa(item)" />
-            <img
-              class="TopTableListSpanImg"
-              src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
-              alt=""
-              @click="XianChangLianXian(item)"
-            />
-          </span>
-        </div>
-      </Vue3SeamlessScroll>
-      <!-- </div> -->
+      <div class="title" :class="infoIndex == 1 ? 'active' : ''" @click="changeDT(1)">
+        <img :src="xcdt_icon" alt="" class="TopInfoListIcon" />
+        现场动态
+        <img :src="jiantou_icon" alt="" class="jtIcon" v-show="infoIndex == 1" />
+      </div>
+      <div class="title" :class="infoIndex == 2 ? 'active' : ''" @click="changeDT(2)">
+        <img :src="dddt_icon" alt="" class="TopInfoListIcon" />
+        调度动态
+        <img :src="jiantou_icon" alt="" class="jtIcon" v-show="infoIndex == 2" />
+      </div>
     </div>
+    <!-- 右侧 -->
+    <div class="rightInfo" :class="['animate__animated', showInfo ? 'animate__fadeInLeft' : 'animate__fadeOutLeft']">
+      <!-- 表头 -->
+      <el-row class="TopTableHeader">
+        <el-col :span="tableHeader.span[i]" v-for="(item, i) in tableHeader.titleList" :key="i">
+          <div class="headerSpan">{{ item }}</div>
+        </el-col>
+      </el-row>
+      <!-- 表格内容 -->
+      <Vue3SeamlessScroll :list="tableBodyData" :singleHeight="34" :hover="true" class="TopTableBody">
+        <el-row class="TopTableBody_list" v-for="(item, k) in tableBodyData" :key="k">
+          <template v-for="(info, j) in tableHeader.codeList" :key="info">
+            <!-- 中心动态 特殊展示 operate -->
+            <el-col :span="tableHeader.span[j]" v-if="info == 'operate'">
+              <div class="bodySpan">
+                <el-button class="bodyBtn" link>发布</el-button>
+                <el-button class="bodyBtn" link>解除</el-button>
+                <el-button class="bodyBtn" link>下载</el-button>
+              </div>
+            </el-col>
+            <!-- 现场动态 特殊展示-->
+            <el-col :span="tableHeader.span[j]" v-if="info == 'duban'">
+              <div class="bodySpan">
+                <img class="TopTableListSpanImg2" src="@/assets/images/Sponge_screen/RQ/RQ_XX.png" alt="" @click="PaiFa(item)" />
+                <img
+                  class="TopTableListSpanImg"
+                  src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
+                  alt=""
+                  @click="XianChangLianXian(item)"
+                />
+              </div>
+            </el-col>
+            <el-col :span="tableHeader.span[j]" v-if="info == 'zt'">
+              <div class="bodySpan">
+                {{ item[info] == 0 ? '未处理' : '已处理' }}
+              </div>
+            </el-col>
+            <!-- 通用展示 -->
+            <el-col :span="tableHeader.span[j]" v-else>
+              <el-tooltip effect="dark" :content="item[info]" placement="top">
+                <div class="bodySpan">{{ item[info] }}</div>
+              </el-tooltip>
+            </el-col>
+          </template>
+        </el-row>
+      </Vue3SeamlessScroll>
+    </div>
+
+    <img class="infoIcon" alt="" :src="showInfo ? inIcon : outIcon" @click="shrinkInfo" />
   </div>
 </template>
 
 <script setup name="dynamicInformation">
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-import { toRaw, toRefs } from 'vue';
+import { onMounted, toRaw, toRefs } from 'vue';
 
-const showPanel = ref(true); //面板展开收起
+import inIcon from '@/assets/images/inIcon.png';
+import outIcon from '@/assets/images/outIcon.png';
+import jiantou_icon from '@/assets/images/tanchuang/jiantou_icon.png';
+import dddt_icon from '@/assets/images/tanchuang/dddt_icon.png';
+import zxdt_icon from '@/assets/images/tanchuang/zxdt_icon.png';
+import xcdt_icon from '@/assets/images/tanchuang/xcdt_icon.png';
+
+const infoIndex = ref(0);
+const showInfo = ref(true); // 改变 dynamicInformation 宽度
+const showPanel = ref(true); //面板展开收起  改变定位left
 // 面板内容展开收起控制
 const props = defineProps({
   showPanel: {
@@ -50,44 +91,130 @@
   },
 });
 
+// 顶部表格数据
+const TopTableData1 = [
+  {
+    sj: '2024-09-26 10:00:29',
+    mx: '燃气常规检查发现泄漏',
+    dd: '宝塔区凤凰山街道二道街',
+    zt: 0, //0未处理 1已处理
+    dw: '延安市燃气总公司',
+    duban: null,
+  },
+  {
+    sj: '2024-09-27 16:10:248',
+    mx: '燃气常规检查发现泄漏',
+    dd: '宝塔区凤凰山街道二道街',
+    zt: 0, //0未处理 1已处理
+    dw: '延安市燃气总公司',
+    duban: null,
+  },
+  {
+    sj: '2024-09-26 10:00:29',
+    mx: '燃气常规检查发现泄漏',
+    dd: '宝塔区凤凰山街道二道街',
+    zt: 0, //0未处理 1已处理
+    dw: '延安市燃气总公司',
+    duban: null,
+  },
+  {
+    sj: '2024-09-27 16:10:248',
+    mx: '燃气常规检查发现泄漏',
+    dd: '宝塔区凤凰山街道二道街',
+    zt: 0, //0未处理 1已处理
+    dw: '延安市燃气总公司',
+    duban: null,
+  },
+];
+const TopTableData = [
+  {
+    xh: '1',
+    name: '燃气-Ⅳ级响应-20240629',
+    startTime: '2024-09-29 10:00:29',
+    endTime: '2024-09-30 10:00:29',
+    zt: 0, //0未处理 1已处理
+    type: '线下',
+    operate: null,
+  },
+  {
+    xh: '2',
+    name: '燃气-Ⅳ级响应-20240618',
+    startTime: '2024-09-18 10:00:29',
+    endTime: '2024-09-19 10:00:29',
+    zt: 0, //0未处理 1已处理
+    type: '线下',
+    operate: null,
+  },
+  {
+    xh: '3',
+    name: '燃气-Ⅳ级响应-20240618',
+    startTime: '2024-09-18 10:00:29',
+    endTime: '2024-09-19 10:00:29',
+    zt: 0, //0未处理 1已处理
+    type: '线下',
+    operate: null,
+  },
+  {
+    xh: '4',
+    name: '燃气-Ⅳ级响应-20240618',
+    startTime: '2024-09-18 10:00:29',
+    endTime: '2024-09-19 10:00:29',
+    zt: 0, //0未处理 1已处理
+    type: '线下',
+    operate: null,
+  },
+];
+const TopTableData2 = [
+  {
+    initiator: '延安城管指挥中心',
+    recipient: '燃气供应处',
+    startTime: '2024-10-21 13:00:29',
+    endTime: '2024-10-21 14:00:29',
+    type: '视频调度',
+  },
+  {
+    initiator: '延安城管指挥中心',
+    recipient: '燃气供应处',
+    startTime: '2024-10-21 13:00:29',
+    endTime: '2024-10-21 14:00:29',
+    type: '语音调度',
+  },
+  {
+    initiator: '延安城管指挥中心',
+    recipient: '延安市燃气总公司',
+    startTime: '2024-10-21 13:00:29',
+    endTime: '2024-10-21 14:00:29',
+    type: '语音调度',
+  },
+];
+
+const allData = [TopTableData, TopTableData1, TopTableData2];
+
 const AllData = reactive({
-  // 顶部表格数据
-  TopTableData: [
+  // 当前动态 表头数据
+  tableHeader: {},
+  // 调度总体 所有表头数据
+  tableHeaderData: [
     {
-      sj: '2024-09-26 10:00:29',
-      mx: '燃气常规检查发现泄漏',
-      dd: '宝塔区凤凰山街道二道街',
-      zt: 0, //0未处理 1已处理
-      dw: '延安市燃气总公司',
-      value: null,
+      titleList: ['序号', '应急响应名称', '启动时间', '结束时间', '状态', '审核方式', '应急响应操作'], //表头
+      codeList: ['xh', 'name', 'startTime', 'endTime', 'zt', 'type', 'operate'], //表头对应字段
+      span: [1, 5, 5, 5, 2, 2, 4], //表头布局间隔
     },
     {
-      sj: '2024-09-27 16:10:248',
-      mx: '燃气常规检查发现泄漏',
-      dd: '宝塔区凤凰山街道二道街',
-      zt: 0, //0未处理 1已处理
-      dw: '延安市燃气总公司',
-      value: null,
+      titleList: ['时间', '事件明细', '地点', '状态', '责任单位', '督办'],
+      codeList: ['sj', 'mx', 'dd', 'zt', 'dw', 'duban'],
+      span: [5, 5, 5, 2, 4, 3],
     },
     {
-      sj: '2024-09-26 10:00:29',
-      mx: '燃气常规检查发现泄漏',
-      dd: '宝塔区凤凰山街道二道街',
-      zt: 0, //0未处理 1已处理
-      dw: '延安市燃气总公司',
-      value: null,
-    },
-    {
-      sj: '2024-09-27 16:10:248',
-      mx: '燃气常规检查发现泄漏',
-      dd: '宝塔区凤凰山街道二道街',
-      zt: 0, //0未处理 1已处理
-      dw: '延安市燃气总公司',
-      value: null,
+      titleList: ['方式', '发起人', '接收人', '调度开始时间', '调度结束时间'],
+      codeList: ['type', 'initiator', 'recipient', 'startTime', 'endTime'],
+      span: [4, 5, 5, 5, 5],
     },
   ],
+  // 当前表格对应数据
+  tableBodyData: [],
 });
-const { TopTableData } = toRefs(AllData);
+const { tableHeader, tableHeaderData, tableBodyData } = toRefs(AllData);
 
 watch(
   () => props.showPanel,
@@ -112,24 +239,92 @@
 const XianChangLianXian = item => {
   bus.emit('OpenRY');
 };
+
+// 收缩信息
+const shrinkInfo = () => {
+  showInfo.value = !showInfo.value;
+};
+// 左侧动态切换
+const changeDT = index => {
+  infoIndex.value = index;
+  tableHeader.value = tableHeaderData.value[index];
+  tableBodyData.value = allData[index];
+};
+
+onMounted(() => {
+  // console.log(tableHeaderList.value);
+  tableHeader.value = tableHeaderData.value[infoIndex.value];
+  tableBodyData.value = allData[infoIndex.value];
+});
 </script>
 
 <style lang="scss" scoped>
 .dynamicInformation {
   position: absolute;
-  left: 490px;
+  // left: 490px;
   top: 110px;
   width: calc(100% - 1020px);
+  --parent-width: calc(100% - 1020px); /* 定义 CSS 变量 */
   height: 136px;
   box-sizing: border-box;
-  border: 1px solid red;
+  // border: 1px solid red;
   display: flex;
   align-items: center;
 
+  transition: all 1s ease;
+  // transition: left 1s ease;
+  &.openIcon {
+    width: calc(100% - 1020px);
+  }
+  &.closeIcon {
+    width: 0px;
+  }
+
+  &.centerShow {
+    will-change: transform;
+    transform: translateX(490px);
+  }
+  &.leftShow {
+    will-change: transform;
+    transform: translateX(30px);
+  }
+
   .leftInfo {
     width: 116px;
     height: 136px;
-    border: 1px solid yellow;
+    // border: 1px solid yellow;
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
+    border-radius: 6px;
+    border: 1px solid #47eef3;
+    box-sizing: border-box;
+    box-shadow: inset 0 0 5px 5px #47eef38a;
+    display: flex;
+    flex-direction: column;
+    padding: 0px 0px 0px 10px;
+    // align-items: center;
+    justify-content: space-evenly;
+    .title {
+      position: relative;
+      display: flex;
+      align-items: center;
+      font-weight: 400;
+      font-size: 14px;
+      color: #fefefe;
+      cursor: pointer;
+      &.active {
+        color: #4efff1;
+      }
+      .TopInfoListIcon {
+        margin-right: 5px;
+      }
+      .jtIcon {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        // margin-left: 5px;
+      }
+    }
   }
 
   .rightInfo {
@@ -150,6 +345,14 @@
       background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
       border: 1px solid #74dde1;
       display: flex;
+      .headerSpan {
+        text-align: center;
+        font-weight: 400;
+        font-size: 14px;
+        color: #ffffff;
+        height: 34px;
+        line-height: 34px;
+      }
     }
 
     .TopTableBody {
@@ -163,68 +366,67 @@
       // flex-wrap: nowrap;
 
       .TopTableBody_list {
-        display: inline-block;
+        // display: inline-block;
         width: 100%;
         height: 34px;
         /* 选择偶数行 */
         &:nth-child(even) {
           background: linear-gradient(0deg, #008599 0%, #08596d 100%);
         }
+        .bodySpan {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          font-weight: 400;
+          font-size: 14px;
+          color: #ffffff;
+          height: 34px;
+          line-height: 34px;
+          box-sizing: border-box;
+          cursor: default;
+          overflow: hidden;
+          text-overflow: ellipsis; /* 超出宽度后显示省略号 */
+          white-space: nowrap; /* 限制不允许换行 */
+          .TopTableListSpanImg {
+            width: 15px;
+            height: 19px;
+            margin: 7px;
+            cursor: pointer;
+          }
+          .TopTableListSpanImg2 {
+            width: 19px;
+            height: 19px;
+            margin: 7px;
+            cursor: pointer;
+          }
+          .bodyBtn {
+            color: #eee;
+            margin: 0;
+          }
+        }
       }
     }
 
-    .TopTableListSpan {
-      font-family: Source Han Sans CN;
-      font-weight: 400;
-      font-size: 14px;
-      color: #ffffff;
-      height: 34px;
-      line-height: 34px;
-      display: inline-block;
-      box-sizing: border-box;
-      overflow: hidden;
-      text-overflow: ellipsis; /* 超出宽度后显示省略号 */
-      white-space: nowrap; /* 限制不允许换行 */
-    }
-    .TopTableListSpan1 {
-      width: 20%;
-      text-align: left;
-      padding-left: 10px;
-    }
-    .TopTableListSpan2 {
-      width: 25%;
-      text-align: center;
-    }
-    .TopTableListSpan3 {
-      width: 20%;
-      text-align: center;
-    }
-    .TopTableListSpan4 {
-      width: 10%;
-      text-align: center;
-    }
-    .TopTableListSpan5 {
-      width: 15%;
-      text-align: center;
-    }
-    .TopTableListSpan6 {
-      width: 10%;
-      text-align: right;
-      padding-right: 10px;
+  }
 
-      .TopTableListSpanImg {
-        width: 15px;
-        height: 19px;
-        margin: 7px;
-        cursor: pointer;
-      }
-      .TopTableListSpanImg2 {
-        width: 19px;
-        height: 19px;
-        margin: 7px;
-        cursor: pointer;
-      }
-    }
+  .infoIcon {
+    position: absolute;
+    right: -15px;
+    // left: 0;
+    top: 40px;
+
+    cursor: pointer;
+    // transition: all 1s ease;
+    // --dtBox-width
+    // &.openIcon {
+    //   // transform: translateX(500px);
+    //   right: -15px;
+    // }
+    // &.closeIcon {
+    //   // transform: translateX(0px);
+    //   left: 0;
+    // }
   }
 }
 </style>
diff --git a/src/views/oneMap/index.vue b/src/views/oneMap/index.vue
index 64cfe29..b7e0c61 100644
--- a/src/views/oneMap/index.vue
+++ b/src/views/oneMap/index.vue
@@ -41,7 +41,7 @@
       <!-- 地图标注点弹窗popup -->
       <PopupInfo></PopupInfo>
       <!-- 动态信息 -->
-      <!-- <dynamicInformation :showPanel="showPanel"></dynamicInformation> -->
+      <dynamicInformation v-show="AllData.ComShowID != 4" :showPanel="showPanel"></dynamicInformation>
       <!-- 左右面板展示隐藏-->
       <el-tooltip effect="dark" content="显隐面板" placement="top">
         <img