快完成了

gassafetyprogress-web/src/assets/styles/all.scss

@@ -574,6 +574,7 @@
       }
     }
   }
+
   .zzz {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -582,6 +583,10 @@
 
   // 滚动条公共样式
   .scrollStyle {
+    .el-table::before {
+      height: 0px !important;
+    }
+
     &::-webkit-scrollbar {
       width: 10px;
       background: rgba(6, 29, 51, 0.8);
@@ -614,6 +619,23 @@
     // overflow-y: none !important;
   }
 }
+
+// 巡检巡查table样式修改
+.map-bottom-wrapper {
+  .el-table__header {
+    tr th {
+      background-color: rgba(24, 144, 255, 0.1);
+      &.gutter {
+        display: none;
+      }
+    }
+  }
+  .el-table__row {
+    td {
+      padding: 0 !important;
+    }
+  }
+}
 // map里的label
 .amap-info {
   position: fixed !important;

gassafetyprogress-web/src/utils/mapClass/xjxcmap.js

+/*
+ * @Author: your name
+ * @Date: 2022-04-13 09:42:29
+ * @LastEditTime: 2022-04-13 10:03:22
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/utils/mapClass/xjxjmap.js
+ */
+import {EditorMap} from "./map"
+export class XjxcMap extends EditorMap {
+  constructor(contaienr, config = {}, vue){
+    super(contaienr, config = {}, vue)
+  }
+  
+
+}
+

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/Right.vue → gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Right.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-11 15:07:47
- * @LastEditTime: 2022-04-12 18:14:09
+ * @LastEditTime: 2022-04-13 09:25:51
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
@@ -29,7 +29,7 @@
       <div class="scroll-wrapper">
         <Scroll :dataList="arr">
           <template v-slot="{ dataList }">
-           <!-- <ScroItem v-for="(item,index) in dataList" :key="item.companyName+index" :data="item"/> -->
+           <ScroItem v-for="(item,index) in dataList" :key="item.companyName+index" :data="item" :index="index"/>
           </template>
         </Scroll>
       </div>
@@ -49,40 +49,76 @@ export default {
     return {
       arr: [
         {
-          companyName: 123,
+          companyName: "河北泽宏公司啊啊啊啊啊",
           time: "2022-04-09 07:29",
           text: "大师傅阿斯蒂芬阿斯蒂芬Î",
         },
         {
-          companyName: 123,
+          companyName: "河北泽宏公司啊啊啊啊啊",
           time: "2022-04-09 07:29",
           text: "大师傅阿斯蒂芬阿斯蒂芬Î",
         },
         {
-          companyName: 123,
+          companyName: "河北泽宏公司啊啊啊啊啊",
           time: "2022-04-09 07:29",
           text: "大师傅阿斯蒂芬阿斯蒂芬Î",
         },
         {
-          companyName: 123,
+          companyName: "河北泽宏公司啊啊啊啊啊",
           time: "2022-04-09 07:29",
           text: "大师傅阿斯蒂芬阿斯蒂芬Î",
         },
         {
-          companyName: 123,
+          companyName: "河北泽宏公司啊啊啊啊啊",
           time: "2022-04-09 07:29",
           text: "大师傅阿斯蒂芬阿斯蒂芬Î",
         },
         {
-          companyName: 123,
+          companyName: "河北泽宏公司啊啊啊啊啊",
           time: "2022-04-09 07:29",
           text: "大师傅阿斯蒂芬阿斯蒂芬Î",
         },
         {
-          companyName: 123,
+          companyName: "河北泽宏公司啊啊啊啊啊",
           time: "2022-04-09 07:29",
           text: "大师傅阿斯蒂芬阿斯蒂芬Î",
         },
+        {
+          companyName: "河北泽宏公司啊啊啊啊啊",
+          time: "2022-04-09 07:29",
+          text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        },
+        {
+          companyName: "河北泽宏公司啊啊啊啊啊",
+          time: "2022-04-09 07:29",
+          text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        },
+       
+        // {
+        //   companyName: 123,
+        //   time: "2022-04-09 07:29",
+        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        // },
+        // {
+        //   companyName: 123,
+        //   time: "2022-04-09 07:29",
+        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        // },
+        // {
+        //   companyName: 123,
+        //   time: "2022-04-09 07:29",
+        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        // },
+        // {
+        //   companyName: 123,
+        //   time: "2022-04-09 07:29",
+        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        // },
+        // {
+        //   companyName: 123,
+        //   time: "2022-04-09 07:29",
+        //   text: "大师傅阿斯蒂芬阿斯蒂芬Î",
+        // },
       ],
     };
   },
@@ -135,7 +171,7 @@ export default {
   font-size: 14px;
   // 这个解决子元素overhidden失效问题
   min-height: 0;
-  .top {
+  >.top {
     background: rgba(24, 144, 255, 0.1);
     height: 29px;
     line-height: 29px;

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/ScroItem.vue → gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/ScroItem.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-12 18:02:16
- * @LastEditTime: 2022-04-12 18:12:50
+ * @LastEditTime: 2022-04-13 09:24:43
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/ScrollItem.vue
 -->
 <template>
-  <div class="top flex">
-    <div class="zzz">{{ data.companyName }}</div>
-    <div class="zzz">{{ data.time }}</div>
-    <div class="zzz">{{ data.text }}</div>
+  <div class="top flex" :class="[{ n: index % 2 == 0, n2: index % 2 == 1 }]">
+    <div class="left zzz" :title="data.companyName">{{ data.companyName }}</div>
+    <div class="zzz" :title="data.time">{{ data.time }}</div>
+    <div class="zzz" :title="data.text">{{ data.text }}</div>
   </div>
 </template>
 
@@ -29,14 +29,25 @@ export default {
 
 <style lang="scss" scoped>
 .top {
-  background: rgba(24, 144, 255, 0.1);
+  width: 100%;
   height: 29px;
   line-height: 29px;
+  &.n {
+    color: #333333;
+  }
+  &.n2 {
+    color: #1f8df3;
+    background: rgba(0, 0, 0, 0.1);
+  }
   > div {
     flex: 1;
     text-align: center;
-    // box-sizing: border-box;
-    // padding: 0 5px;
+    font-size: 12px;
+    box-sizing: border-box;
+    padding: 0 2px;
+    &.left{
+      padding: 0 5px;
+    }
   }
 }
 </style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/Scroll.vue → gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Scroll.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-12 16:09:32
- * @LastEditTime: 2022-04-12 17:53:32
+ * @LastEditTime: 2022-04-13 15:41:17
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/components/scrollCom/scroll.vue
@@ -71,7 +71,7 @@ export default {
         if (this.top <= maxTop) {
           this.top = 0;
         }
-      }, 30);
+      }, 24);
     },
     stopScroll() {
       clearInterval(this.timer);
@@ -90,11 +90,12 @@ export default {
 <style lang="scss" scoped>
 .scroll {
   height: 100%;
-  background: red;
+  // background: red;
   overflow: hidden;
   position: relative;
 }
 .contain {
+  width: 100%;
   position: absolute;
 }
 </style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-11 14:11:04
- * @LastEditTime: 2022-04-12 14:53:40
+ * @LastEditTime: 2022-04-13 10:34:15
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/index.vue
@@ -14,33 +14,40 @@
           <Left />
         </div>
         <div class="middle">
-          <Middle/>
+          <Middle />
         </div>
         <div class="right">
-          <Right/>
+          <Right />
         </div>
       </div>
+      <div class="middle"></div>
       <div class="bottom">
-      
-
+        <MapBottom/>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import Left from "./topChars/Left";
-import Middle from "./topChars/Middle";
-import Right from "./topChars/Right";
+import Left from "./components/Left";
+import Middle from "./components/Middle";
+import Right from "./components/Right";
+import MapBottom from "./components/MapBottom";
 export default {
   components: {
     Left,
     Middle,
-    Right
+    Right,
+    MapBottom
   },
   data() {
-    return {};
+    return {
+
+    };
   },
+  mounted(){
+
+  }
 };
 </script>
 
@@ -69,12 +76,10 @@ export default {
     .middle {
       width: 35.3%;
       padding: 15px 80px 19px 71px;
-
     }
     .right {
       width: 25.2%;
       padding: 15px 29px;
-
     }
     > div {
       // box-shadow: 2px 0px 13px 1px rgba(0, 0, 0, 0.1);
@@ -82,8 +87,14 @@ export default {
       border-radius: 3px;
     }
   }
+  >.middle {
+    margin: 5px 0;
+    background: repeating-linear-gradient(135deg, transparent, transparent 3px, #D6D6D6 3px, #D6D6D6 8px);
+    height: 2px;
+  }
   .bottom {
     flex: 1;
+    background-color: red;
 
   }
   > div {