备战防御 右侧

package-lock.json

@@ -15,14 +15,17 @@
         "@vueup/vue-quill": "1.2.0",
         "@vueuse/core": "10.9.0",
         "animate.css": "4.1.1",
+        "autofit.js": "^3.1.3",
         "await-to-js": "3.0.0",
         "axios": "1.6.8",
+        "bignumber.js": "^9.1.2",
         "bpmn-js": "16.4.0",
         "crypto-js": "4.2.0",
         "diagram-js": "12.3.0",
         "didi": "9.0.2",
         "echarts": "5.5.0",
         "element-plus": "2.7.5",
+        "element-resize-detector": "^1.2.4",
         "file-saver": "2.0.5",
         "fuse.js": "7.0.0",
         "highlight.js": "11.9.0",
@@ -3121,6 +3124,11 @@
         "node": ">= 4.5.0"
       }
     },
+    "node_modules/autofit.js": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/autofit.js/-/autofit.js-3.1.3.tgz",
+      "integrity": "sha512-+TWc28CqwXmEcyVRofESxPt9WisGENDcTFzeJsNPhkPDouWL98QzAZxrID8K32joBNrulN2N0OZiL6X9Kv3wxg=="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.18",
       "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.18.tgz",
@@ -3224,6 +3232,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA=="
+    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
@@ -3233,6 +3246,14 @@
         "node": "*"
       }
     },
+    "node_modules/bignumber.js": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmmirror.com/bignumber.js/-/bignumber.js-9.1.2.tgz",
+      "integrity": "sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -4377,6 +4398,14 @@
         }
       }
     },
+    "node_modules/element-resize-detector": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
+      "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
+      "dependencies": {
+        "batch-processor": "1.0.0"
+      }
+    },
     "node_modules/emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/emojis-list/-/emojis-list-3.0.0.tgz",

package.json

@@ -24,14 +24,17 @@
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "10.9.0",
     "animate.css": "4.1.1",
+    "autofit.js": "^3.1.3",
     "await-to-js": "3.0.0",
     "axios": "1.6.8",
+    "bignumber.js": "^9.1.2",
     "bpmn-js": "16.4.0",
     "crypto-js": "4.2.0",
     "diagram-js": "12.3.0",
     "didi": "9.0.2",
     "echarts": "5.5.0",
     "element-plus": "2.7.5",
+    "element-resize-detector": "^1.2.4",
     "file-saver": "2.0.5",
     "fuse.js": "7.0.0",
     "highlight.js": "11.9.0",

src/assets/styles/index.scss

@@ -506,7 +506,7 @@ aside {
 }
 
 .gradient-text3 {
-  font-size: 38px;
+  font-size: 14px;
   color: transparent;
   background-image: linear-gradient(to bottom, #ffffff 25%, #2b72d6 100%);
   -webkit-background-clip: text;
@@ -598,25 +598,25 @@ aside {
 .common-table {
   .table-header {
     width: 100%;
-    min-height: 88px;
+    min-height: 31px;
     background: url('@/assets/images/common/header.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
     align-items: center;
-    padding: 0 10px;
+    padding: 0 19px;
     .td-cursor {
       cursor: pointer;
     }
   }
   .tr {
     width: 100%;
-    min-height: 88px;
+    min-height: 31px;
     background: url('@/assets/images/common/tr.png') no-repeat;
     background-size: 100% 100%;
     display: flex;
     align-items: center;
-    margin-top: 10px;
-    padding: 22.26px 10px;
+    margin-top: 6px;
+    padding: 2px 19px;
     .td {
       //white-space: nowrap;
       //overflow: hidden;
@@ -624,7 +624,7 @@ aside {
     }
   }
   .td {
-    font-size: 38px;
+    font-size: 14px;
     color: #edfaff;
     flex: 1;
     padding: 0 8px;
@@ -766,7 +766,7 @@ aside {
   background-position: bottom left;
   padding-left: 26px;
   color: #ffffff;
-  font-size: 14px;
+  font-size: 16px;
 }
 
 .common-title {

src/components/Chart/echarts_auto_tooltip.js

@@ -0,0 +1,172 @@
+/**
+ *  echarts tooltip 自动轮播
+ *  @param chart
+ *  @param chartOption
+ *  @param options
+ *  {
+ *  interval    轮播时间间隔，单位毫秒，默认为2000
+ *  loopSeries  boolean类型，默认为false。
+ *              true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip
+ * 	seriesIndex 默认为0，指定某个系列（option中的series索引）循环显示tooltip，
+ * 	            当loopSeries为true时，从seriesIndex系列开始执行.
+ *  }
+ * @returns {{clearLoop: clearLoop}}
+ */
+
+export const autoToolTip = (chart, chartOption, options) => {
+  let defaultOptions = {
+    interval: 2000,
+    loopSeries: false,
+    seriesIndex: 0,
+    updateData: null
+  }
+
+  if (!chart || !chartOption) {
+    return {}
+  }
+
+  let dataIndex = 0; // 数据索引，初始化为-1，是为了判断是否是第一次执行
+  let seriesIndex = 0; // 系列索引
+  let timeTicket = 0;
+  let seriesLen = chartOption.series.length; // 系列个数
+  let dataLen = 0; // 某个系列数据个数
+  let chartType; // 系列类型
+  let first = true;
+  // 不循环series时seriesIndex指定显示tooltip的系列，不指定默认为0，指定多个则默认为第一个
+  // 循环series时seriesIndex指定循环的series，不指定则从0开始循环所有series，指定单个则相当于不循环，指定多个
+  // 要不要添加开始series索引和开始的data索引？
+
+  if (options) {
+    options.interval = options.interval || defaultOptions.interval;
+    options.loopSeries = options.loopSeries || defaultOptions.loopSeries;
+    options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex;
+    options.updateData = options.updateData || defaultOptions.updateData;
+  } else {
+    options = defaultOptions;
+  }
+
+  // 如果设置的seriesIndex无效，则默认为0
+  if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) {
+    seriesIndex = 0;
+  } else {
+    seriesIndex = options.seriesIndex;
+  }
+
+  function autoShowTip() {
+    function showTip() {
+      // 判断是否更新数据
+      if (dataIndex === 0 && !first && typeof options.updateData === 'function') {
+        options.updateData();
+        chart.setOption(chartOption);
+      }
+      let series = chartOption.series;
+      chartType = series[seriesIndex].type; // 系列类型
+      dataLen = series[seriesIndex].data.length; // 某个系列的数据个数
+      let tipParams = { seriesIndex: seriesIndex };
+      // 数据长度为0或1不循环
+      if (dataLen <= 1) {
+        return false;
+      }
+      switch (chartType) {
+        case 'map':
+        case 'pie':
+        case 'chord':
+          tipParams.name = series[seriesIndex].data[dataIndex].name;
+          break;
+        case 'radar': // 雷达图
+          tipParams.seriesIndex = seriesIndex;
+          tipParams.dataIndex = dataIndex;
+          break;
+        default:
+          tipParams.dataIndex = dataIndex;
+          break;
+      }
+
+      if (chartType === 'pie' || chartType === 'radar') {
+        // 取消之前高亮的图形
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: options.loopSeries ? (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex,
+          dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1
+        });
+
+        // 高亮当前图形
+        chart.dispatchAction({
+          type: 'highlight',
+          seriesIndex: seriesIndex,
+          dataIndex: dataIndex
+        });
+      }
+
+      // 显示 tooltip
+      tipParams.type = 'showTip';
+      chart.dispatchAction(tipParams);
+
+      dataIndex = dataLen === 0 ? 0 : (dataIndex + 1) % dataLen;
+      if (options.loopSeries && dataIndex === 0 && !first) {
+        // 数据索引归0表示当前系列数据已经循环完
+        seriesIndex = (seriesIndex + 1) % seriesLen;
+      }
+
+      first = false;
+    }
+
+    showTip();
+    timeTicket = setInterval(showTip, options.interval);
+  }
+
+  // 关闭轮播
+  function stopAutoShow() {
+    if (timeTicket) {
+      clearInterval(timeTicket);
+      timeTicket = 0;
+
+      if (chartType === 'pie' || chartType === 'radar') {
+        // 取消高亮的图形
+        chart.dispatchAction({
+          type: 'downplay',
+          seriesIndex: options.loopSeries ? (seriesIndex === 0 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex,
+          dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1
+        });
+      }
+    }
+  }
+
+  let zRender = chart.getZr();
+
+  function zRenderMouseMove(param) {
+    if (param.event) {
+      // 阻止canvas上的鼠标移动事件冒泡
+      param.event.cancelBubble = true;
+    }
+
+    stopAutoShow();
+  }
+
+  // 离开echarts图时恢复自动轮播
+  function zRenderGlobalOut() {
+    if (!timeTicket) {
+      autoShowTip();
+    }
+  }
+
+  // 鼠标在echarts图上时停止轮播
+  chart.on('mousemove', stopAutoShow);
+  zRender.on('mousemove', zRenderMouseMove);
+  zRender.on('globalout', zRenderGlobalOut);
+
+  autoShowTip();
+
+  return {
+    clearLoop: function(){
+      if (timeTicket) {
+        clearInterval(timeTicket);
+        timeTicket = 0;
+      }
+
+      chart.off('mousemove', stopAutoShow);
+      zRender.off('mousemove', zRenderMouseMove);
+      zRender.off('globalout', zRenderGlobalOut);
+    }
+  };
+};

src/components/Chart/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div ref="canvas" class="canvas" />
+</template>
+
+<script setup lang="ts" name="Chart">
+import ElementResizeDetectorMaker from 'element-resize-detector';
+import { autoToolTip } from './echarts_auto_tooltip';
+import * as echarts from 'echarts';
+import { onUnmounted } from 'vue';
+
+interface Props {
+  option: object;
+  rotation?: boolean;
+  chartClick?: Function;
+  legendChange?: Function;
+}
+const props = withDefaults(defineProps<Props>(), {
+  rotation: false,
+  legendChange: () => {}
+});
+const emits = defineEmits(['ready', 'click']);
+
+// 渲染容器
+const canvas = ref<HTMLElement>();
+// echarts
+const myChart = shallowRef(null);
+// 加载状态
+let loaded = ref(false);
+
+watch(
+  props.option,
+  () => {
+    if (Object.keys(props.option).length !== 0) {
+      if (loaded.value && !!myChart.value) {
+        myChart.value.setOption(props.option, true);
+      } else {
+        load();
+      }
+    } else if (!!myChart.value) {
+      myChart.value.clear();
+    }
+  },
+  {
+    deep: true
+  }
+);
+
+// 加载事件
+const load = () => {
+  const that = this;
+  if (!myChart.value || Object.keys(myChart.value).length === 0) {
+    myChart.value = echarts.init(canvas.value);
+  }
+  // 基于准备好的dom，初始化echarts实例
+  myChart.value.clear();
+  myChart.value.setOption(props.option);
+  // 监听元素变化
+  const erd = ElementResizeDetectorMaker();
+
+  erd.listenTo(canvas.value, function () {
+    nextTick(function () {
+      // 使echarts尺寸重置
+      setTimeout(function () {
+        myChart.value.resize();
+      }, 500);
+    });
+  });
+  if (props.rotation) {
+    autoToolTip(myChart.value, props.option, { loopSeries: true });
+  }
+  emits('ready', myChart.value);
+  // 监听点击事件
+  if (props.chartClick) {
+    myChart.value.off('click', handleClick);
+    myChart.value.on('click', handleClick);
+  }
+  if (props.legendChange) {
+    myChart.value.on('legendselectchanged', function (params) {
+      props.legendChange(params, myChart.value);
+    });
+  }
+  loaded.value = true;
+};
+
+const handleClick = (params: any) => {
+  props.chartClick(params);
+};
+
+onMounted(() => {
+  if (!(JSON.stringify(props.option) === '{}')) {
+    load();
+  }
+});
+
+onUnmounted(() => {
+  myChart.value = null;
+});
+</script>
+
+<style lang="scss" scoped>
+.canvas {
+  width: 100%;
+  height: 100%;
+  // flex: 1;
+}
+</style>

src/types/components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     BpmnView: typeof import('./../components/BpmnView/index.vue')['default']
     Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
     BuildCode: typeof import('./../components/BuildCode/index.vue')['default']
+    Chart: typeof import('./../components/Chart/index.vue')['default']
     ChunkUpload: typeof import('./../components/ChunkUpload/index.vue')['default']
     CompanyMap: typeof import('./../components/Map/company-map.vue')['default']
     ContactSelect: typeof import('./../components/ContactSelect/index.vue')['default']

src/views/emergencyCommandMap/LeftSection/VideoMonitor.vue

@@ -265,7 +265,7 @@ initData();
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
-          padding-left: 10px;
+          padding: 0 5px 0 10px;
           color: #fff;
           background-color: rgba(18, 107, 248, 0.4);
           text-align: right;

src/views/routineCommandMap/LeftSection/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="left-section">
     <RiskMonitor />
-    <RealSituation style="margin: 20px 0" />
+    <RealSituation style="margin: 16px 0" />
     <VideoMonitor />
   </div>
 </template>
@@ -19,7 +19,7 @@ import RealSituation from './RealSituation.vue';
   display: flex;
   flex-direction: column;
   font-size: 16px;
-  margin-right: 65px;
+  margin-right: 20px;
   :deep(.video-card) {
     animation-name: slideLeft;
     animation-duration: 1.5s;

src/views/routineCommandMap/RightSection/EventReport/index.vue

@@ -2,30 +2,24 @@
   <div class="event-container">
     <div class="container-header">
       <div class="common-title-box">事件接报</div>
-      <div class="more" @click="showMoreEventManageList">查看更多&nbsp;&nbsp;>></div>
+<!--      <div class="more" @click="showMoreEventManageList">查看更多&nbsp;&nbsp;>></div>-->
     </div>
     <!-- 表格组件 -->
     <div class="common-table">
       <div class="table-header">
         <div class="td">事件标题</div>
-        <div class="td">事件类型</div>
         <div class="td">事发地点</div>
-        <div class="td">事发时间</div>
         <div class="td">事发状态</div>
         <div class="td">操作</div>
       </div>
       <div v-for="(item, index) in eventList" :key="index" class="tr">
-        <div class="td" @click="handleShowDetail(item)">{{ item.event_title }}</div>
-        <div class="td">
-          <dict-tag :class="['0', '1'].includes(item.event_type) ? 'primary-tag' : 'success-tag'" :options="mm_event_type" :value="item.event_type" />
-        </div>
-        <div class="td">
+        <div class="td" :title="item.event_title" @click="handleShowDetail(item)">{{ item.event_title }}</div>
+        <div class="td" :title="item.address">
           <div class="address-box">
             <i class="address-icon" />
             <div class="address-text">{{ item.address }}</div>
           </div>
         </div>
-        <div class="td">{{ item.event_time }}</div>
         <div class="td">
           <dict-tag :class="getEventStatusClass(item.event_status)" :options="mm_event_state" :value="item.event_status" />
         </div>
@@ -65,7 +59,7 @@ const { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(
 const router = useRouter();
 const queryParams = reactive({
   page: 1,
-  page_size: 7
+  page_size: 15
 });
 // 事件接报
 const eventManageState = reactive({
@@ -122,7 +116,7 @@ const getEventStatusClass = (value) => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 30px;
+    margin-bottom: 18px;
     .more {
       font-size: 36px;
       color: #00e8ff;
@@ -137,35 +131,31 @@ const getEventStatusClass = (value) => {
     flex: unset;
     text-align: left;
     &:nth-child(1) {
-      width: 305px;
+      flex-shrink: 0;
+      width: 150px;
     }
     &:nth-child(2) {
-      min-width: 200px;
       flex: 1;
     }
     &:nth-child(3) {
-      width: 610px;
-      max-width: 610px;
+      flex-shrink: 0;
+      width: 80px;
+      max-width: 80px;
       min-width: 0;
     }
     &:nth-child(4) {
-      width: 400px;
-    }
-    &:nth-child(5) {
-      width: 200px;
-    }
-    &:nth-child(6) {
-      width: 250px;
+      width: 90px;
     }
   }
   .address-box {
     display: flex;
     align-items: center;
     .address-icon {
-      min-width: 46px;
-      width: 46px;
-      height: 53px;
+      min-width: 14px;
+      width: 14px;
+      height: 16px;
       background: url('@/assets/images/routineCommandMap/eventReport/address.png') no-repeat;
+      background-size: 100% 100%;
       margin-right: 8px;
     }
     .address-text {
@@ -192,26 +182,26 @@ const getEventStatusClass = (value) => {
 }
 .tag1 {
   background-color: #38c95a;
-  border-radius: 8px;
-  padding: 12px;
+  border-radius: 12px;
+  padding: 4px 5px;
   display: inline-block;
 }
 .tag2 {
   background-color: #ff2b34;
-  border-radius: 8px;
-  padding: 12px;
+  border-radius: 12px;
+  padding: 4px 5px;
   display: inline-block;
 }
 .tag3 {
   background-color: #247dff;
-  border-radius: 8px;
-  padding: 12px;
+  border-radius: 12px;
+  padding: 4px 5px;
   display: inline-block;
 }
 .tag4 {
   background-color: #3e5185;
-  border-radius: 8px;
-  padding: 12px;
+  border-radius: 12px;
+  padding: 4px 5px;
   display: inline-block;
 }
 .btn-box {
@@ -221,27 +211,25 @@ const getEventStatusClass = (value) => {
   cursor: pointer;
   .start-icon {
     display: inline-block;
-    width: 50px;
-    height: 50px;
+    width: 15px;
+    height: 15px;
     background: url('@/assets/images/routineCommandMap/eventReport/start.png') no-repeat;
     background-size: 100% 100%;
-    margin-right: 8px;
   }
   .record-icon {
     display: inline-block;
-    width: 46px;
-    height: 50px;
+    width: 14px;
+    height: 15px;
     background: url('@/assets/images/routineCommandMap/eventReport/record.png') no-repeat;
     background-size: 100% 100%;
-    margin-right: 8px;
   }
 }
 .common-table {
   .table-header {
-    width: 1848px;
+    width: 511px;
   }
   .tr {
-    width: 1848px;
+    width: 511px;
   }
 }
 </style>

src/views/routineCommandMap/RightSection/chartOptions.ts

@@ -8,8 +8,8 @@ export const option1 = {
         z: 3,
         style: {
           image: pieBg,
-          width: 546,
-          height: 417
+          width: 161,
+          height: 123
         },
         left: 'center',
         top: 'center'

src/views/routineCommandMap/RightSection/index.vue

@@ -42,10 +42,10 @@
       </div>
     </div>
     <div class="chart-box">
-      <Chart :option="chartOption1" style="width: 546px; height: 546px" />
+      <Chart :option="chartOption1" style="width: 192px; height: 147px" />
       <div class="data-box2">
         <div class="table">
-          <div class="tr" style="background: none">
+          <div class="tr" style="background: none;margin-top: 0;">
             <div class="th"></div>
             <div class="th">事件类型</div>
             <div class="th">数量</div>
@@ -69,7 +69,7 @@
         </div>
       </div>
     </div>
-    <EventReport />
+    <EventReport style="margin-top: 20px;" />
   </div>
 </template>
 
@@ -169,13 +169,13 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   font-size: 36px;
-  margin-left: 65px;
-  width: 530px;
-  height: 100%;
+  margin-left: 20px;
+  width: 535px;
+  height: 948px;
   background: url('@/assets/images/routineCommandMap/eventReport/dialog.png') no-repeat;
   background-size: 100% 100%;
   position: relative;
-  padding: 140px 60px 0 50px;
+  padding: 47px 15px 0 10px;
   .box {
     .box-header {
       display: flex;
@@ -183,19 +183,20 @@ onMounted(() => {
       align-items: center;
     }
     .data-box {
-      width: 1896px;
-      height: 230px;
+      width: 516px;
+      height: 79px;
       background: url('@/assets/images/routineCommandMap/dataBox.png') no-repeat bottom center;
-      background-size: 1896px 123px;
+      background-size: 516px 34px;
       display: flex;
-      padding-left: 130px;
+      justify-content: space-between;
+      padding: 0 34px;
       .box-item {
         display: flex;
         align-items: center;
-        margin-right: 180px;
-        &:last-child {
-          margin-right: 0;
-        }
+        //margin-right: 34px;
+        //&:last-child {
+        //  margin-right: 0;
+        //}
         .year-icon {
           background: url('@/assets/images/routineCommandMap/year.png') no-repeat;
         }
@@ -208,32 +209,32 @@ onMounted(() => {
         .year-icon,
         .season-icon,
         .month-icon {
-          width: 192px;
-          height: 200px;
+          width: 53px;
+          height: 54px;
           background-size: 100% 100%;
           display: inline-block;
         }
         .box-flex {
-          margin-left: 38px;
+          margin-left: 11px;
           .text-box {
             display: flex;
             align-items: flex-end;
             .text1 {
-              font-size: 64px;
+              font-size: 18px;
               font-family: BEBAS-1;
             }
             .text2 {
-              font-size: 38px;
+              font-size: 12px;
               color: #a7ccdf;
               margin-left: 5px;
             }
           }
           .text3 {
-            font-size: 44px;
+            font-size: 14px;
             color: #ffffff;
           }
           .text4 {
-            font-size: 64px;
+            font-size: 18px;
             font-family: BEBAS-1;
             color: transparent;
             background-image: linear-gradient(to bottom, #ffffff 25%, #ff8015 100%);
@@ -246,8 +247,8 @@ onMounted(() => {
     }
   }
   .custom-select {
-    width: 440px !important;
-    margin-left: 30px;
+    width: 140px !important;
+    margin-left: 10px;
   }
 }
 .chart-box {
@@ -258,35 +259,42 @@ onMounted(() => {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 1204px;
-    height: 389px;
+    width: 391px;
+    height: 127px;
+    padding: 10px 0;
     background: url('@/assets/images/routineCommandMap/dataBox2.png') no-repeat;
+    background-size: 100% 100%;
+    margin-top: 29px;
     .table {
+      display: block;
+      height: 107px;
+      overflow-x: hidden;
+      overflow-y: auto;
       .tr {
         display: flex;
         align-items: center;
-        padding: 0 50px 0 0;
-        width: 1087px;
-        height: 96px;
+        padding-right: 21px;
+        width: 352px;
+        height: 30px;
         background: url('@/assets/images/routineCommandMap/eventReport/tr.png') no-repeat;
         background-size: 100% 100%;
-        margin-top: 15px;
+        margin-top: 8px;
         .td {
           &:nth-child(2) {
             color: #ffffff;
           }
           &:nth-child(4) {
-            font-size: 48px;
+            font-size: 16px;
             color: #00e8ff;
             font-family: BEBAS-1;
           }
         }
         .td,
         .th {
-          font-size: 38px;
+          font-size: 14px;
           color: #a7ccdf;
           &:nth-child(1) {
-            width: 90px;
+            width: 30px;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -297,24 +305,24 @@ onMounted(() => {
           }
           &:nth-child(3),
           &:nth-child(4) {
-            width: 240px;
+            width: 72px;
             text-align: right;
           }
         }
         .td-icon {
-          width: 36px;
-          height: 36px;
-          border-radius: 10px;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
           background-color: #247dff;
         }
         .td-icon2 {
-          width: 36px;
-          height: 36px;
-          border-radius: 10px;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
           background-color: #00fde7;
         }
         .td-text1 {
-          font-size: 48px;
+          font-size: 16px;
           color: transparent;
           background-image: linear-gradient(to bottom, #ffffff 25%, #2b72d6 100%);
           -webkit-background-clip: text;
@@ -323,7 +331,7 @@ onMounted(() => {
           font-family: BEBAS-1;
         }
         .td-text2 {
-          font-size: 48px;
+          font-size: 16px;
           color: transparent;
           background-image: linear-gradient(to bottom, #ffffff 25%, #21c8d4 100%);
           -webkit-background-clip: text;

src/views/routineCommandMap/index.vue

@@ -8,7 +8,7 @@
 <!--          <i :class="showLeftSection ? 'arrow-icon left-icon' : 'arrow-icon right-icon'" @click="handleTelescoping('left')" />-->
 <!--          <i :class="showRightSection ? 'arrow-icon2 right-icon' : 'arrow-icon2 left-icon'" @click="handleTelescoping('right')" />-->
 <!--        </MiddleSection>-->
-<!--        <RightSection v-show="showRightSection" />-->
+        <RightSection v-show="showRightSection" />
       </div>
       <FooterSection style="position: absolute; bottom: 0; left: 0" />
     </div>