style(hitch-screen): 调整页面布局和样式，更新图表图片

- 将echart和数据面板使用flex布局水平排列，优化页面宽度适配
- 修改body宽度为100vw，允许自动滚动以适应不同屏幕尺寸
- 移除多余CSS属性，优化样式结构
- 替换图表图片资源路径，更新视觉效果
- 更改iframe滚动属性为自动，动态绑定高度以提升用户体验
- 添加iframe消息监听，支持来自嵌入页面的导航交互

public/hitch-screen/index.html

@@ -23,27 +23,29 @@
     <label class="legend-item legend-yellow"><input type="checkbox" id="filterPlanned" checked> 问题设备</label>
     <!--    <label class="legend-item legend-red"><input type="checkbox" id="filterUnplanned" checked> 非计划性维修设备</label>-->
   </div>
-  <div id="echart" class="echart"></div>
-  <div class="data">
-    <div>
-      <span id="monthNum">暂无</span>
-    </div>
-    <div>
-      <span id="waitNum">暂无</span>
-      <span id="rate">暂无</span>
-    </div>
-    <div style="height: 80%;">
-      <div id="weekJob" class="item title">
-        <span>设备编号</span>
-        <span>保养任务</span>
-        <span>保养计划时间</span>
+  <div style="display:flex;width:1920px;justify-content:space-between;align-items:center;">
+    <div id="echart" class="echart"></div>
+    <div class="data">
+      <div>
+        <span id="monthNum">暂无</span>
+      </div>
+      <div>
+        <span id="waitNum">暂无</span>
+        <span id="rate">暂无</span>
       </div>
-      <div class="scrollDiv str_wrap str_vertical"></div>
-      <!--      <div class="item">
+      <div style="height: 80%;">
+        <div id="weekJob" class="item title">
+          <span>设备编号</span>
+          <span>保养任务</span>
+          <span>保养计划时间</span>
+        </div>
+        <div class="scrollDiv str_wrap str_vertical"></div>
+        <!--      <div class="item">
         <span>设备名称</span>
         <span>正常</span>
         <span>2021/03/21</span>
       </div>-->
+      </div>
     </div>
   </div>
 </body>
@@ -67,23 +69,6 @@
     z-index: 1000;
   }
 
-  .back-btn {
-    display: inline-block;
-    margin-right: 15px;
-    padding: 4px 14px;
-    background-color: #174FBF;
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-    font-size: 14px;
-    cursor: pointer;
-    vertical-align: middle;
-    transition: background-color 0.2s;
-  }
-
-  .back-btn:hover {
-    background-color: #0f3d99;
-  }
 
   #mapName {
     width: 120px;
@@ -204,7 +189,7 @@
       myChart.resize()
     }, 100)
   }
-  img.src = './static/03_01.png'
+  img.src = './static/03_04.png'
 
 
   var option = {

public/hitch-screen/static/index.css

@@ -1,18 +1,17 @@
 body {
   padding: 0px;
   margin: 0px;
-  width: 1920px;
-  height: 1080px;
+  width: 100vw;
+  overflow-y: auto;
+  overflow-x: auto;
 }
 
 .echart {
-  float: left;
   width: 1334px;
   height: 1080px;
 }
 
 .data {
-  float: right;
   width: 586px;
   height: 1080px;
   background: url("right.png") no-repeat;

src/views/big-screen/RepairScreen.vue

@@ -1,31 +1,25 @@
 <template>
-  <iframe
-    :src="url"
-    id="mobsf"
-    scrolling="no"
-    frameborder="0"
-    allowtransparency="true"
-    width="100%"
+  <iframe :src="url" id="mobsf" scrolling="auto" frameborder="0" allowtransparency="true" width="100%"
     :height="clientHeight"></iframe>
 </template>
 
 <script>
 
 export default {
-  data () {
+  data() {
     return {
       url: '/hitch-screen/index.html',
       clientHeight: '1000px'
     }
   },
-  mounted () {
+  mounted() {
     window.addEventListener('message', this.handleIframeMessage)
   },
-  beforeDestroy () {
+  beforeDestroy() {
     window.removeEventListener('message', this.handleIframeMessage)
   },
   methods: {
-    handleIframeMessage (event) {
+    handleIframeMessage(event) {
       if (event.data && event.data.action === 'navigateHome') {
         this.$router.push('/')
       }