修改申报报错，添加安全运行监督功能

zh-baseversion-common/src/main/java/com/zehong/common/utils/GovernmentDataCopyUtil.java

 package com.zehong.common.utils;
 
 import java.lang.reflect.Field;
+import java.text.SimpleDateFormat;
 import java.util.HashMap;
 import java.util.Map;
 
@@ -25,11 +26,16 @@ public class GovernmentDataCopyUtil {
             if(targetMap.containsKey(targetName)){
                 Object value = field.get(source);
                 if(null != value){
+                    if (targetName.equals("birthday")|| targetName.equals("workTime")) {
+                        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
+                        targetMap.get(targetName).set(target,dateFormat.format(value));
+                    }else{
                         targetMap.get(targetName).set(target,value);
                     }
                 }
             }
         }
+    }
 
     /**
      * 拷贝为本地实体

zh-baseversion-system/src/main/java/com/zehong/system/service/impl/TProAppInforServiceImpl.java

@@ -131,9 +131,9 @@ public class TProAppInforServiceImpl implements ITProAppInforService {
         GovernmentDataCopyUtil.copyToGovernData(appInfor,proAppInfoVo);
         List<ProAppInfoVo> data = new ArrayList<>();
         data.add(proAppInfoVo);
-        JSONObject reportResult = governmentDataUtil.setInfo("professor/application/information","WRITE",data);
-        log.info("专家申报结果===================" + reportResult.toJSONString());
-        if(!"0".equals(reportResult.getString("resultCode"))) throw new CustomException("行业专家上报市局接口失败");
+        //JSONObject reportResult = governmentDataUtil.setInfo("professor/application/information","WRITE",data);
+        //log.info("专家申报结果===================" + reportResult.toJSONString());
+        //if(!"0".equals(reportResult.getString("resultCode"))) throw new CustomException("行业专家上报市局接口失败");
         return result;
     }
 }

zh-baseversion-web/src/utils/mapClass/map.js

@@ -1385,6 +1385,7 @@ export class EditorMap {
 
     const color = pipeColor[pipePressure];
 
+    if(this.pipeArr.length>1){
       this.pipeArr[1].forEach((pipe) => {
         const deviceExtData = pipe.getExtData();
       if (deviceExtData.pipeId === id) {
@@ -1396,6 +1397,7 @@ export class EditorMap {
         pipe.setOptions(options);
       }
     });
+    }
 
     this.infowindow.close();
     // 通过搜索上图的数据

zh-baseversion-web/src/views/supervision/safetysupervise/components/Left.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-11 15:07:47
+ * @LastEditTime: 2022-04-14 18:00:06
+ * @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
+-->
+<template>
+  <div style="display:flex; ">
+    <div class="upon" >物联监测设备</div>
+    <div class="left" id ="main2">
+      <Chars :options="option"/>
+    </div>
+    <div class="right">
+      <div class="onehang" style="margin-top: 15%">
+        <div class="onemax"></div>
+        <div class="one">总数量</div>
+        <div class="one">在线数量</div>
+      </div>
+      <div class="onehang">
+        <div class="onemax" ><div class="xiaoone" style="background: #ff7f50 "></div>压力表</div>
+        <div class="one">{{datanum.jmNum}}</div>
+        <div class="one">{{datanum.jmtNum}}</div>
+      </div>
+      <div class="onehang">
+        <div class="onemax"><div class="xiaoone" style="background:#32cd32"> </div>流量计</div>
+        <div class="one">{{datanum.syNum}}</div>
+        <div class="one">{{datanum.sytNum}}</div>
+      </div>
+      <div class="onehang">
+        <div class="onemax"><div class="xiaoone" style="background: #6495ed"></div>探测器</div>
+        <div class="one">{{datanum.gyNum}}</div>
+        <div class="one">{{datanum.gytNum}}</div>
+      </div>
+
+      <div class="onehang">
+        <div class="onemax"><div class="xiaoone" style="background: #6495ed"></div>温度计时</div>
+        <div class="one">{{datanum.gyNum}}</div>
+        <div class="one">{{datanum.gytNum}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Chars from "../../../../components/allCharsCom/Chars";
+  import { summaryUser } from "@/api/supervise/summary";
+  export default {
+    components: {
+      Chars
+    },
+    data() {
+      return {
+
+        total:4,
+        limit:2,
+        showSearch: true,
+        queryParams: {
+          pageNum: 1,
+          pageSize: 4,
+          enterpriseId:null,
+          nickName: null
+        },
+        // 特殊用户管控表格数据
+        specialuserList: [],
+        arr: [],
+        datanum:{
+          jmNum:0,
+          gyNum:0,
+          syNum:0,
+          jmtNum:0,
+          gytNum:0,
+          sytNum:0,
+        },
+        option:{
+          color: ['#ff7f50', '#32cd32', '#6495ed' ],
+          legend: {
+            top: '5%',
+            left: 'center'
+          },
+          series: [
+            {
+              name: 'Access From',
+              type: 'pie',
+              radius: ['40%', '70%'],
+              avoidLabelOverlap: false,
+              itemStyle: {
+                borderRadius: 10,
+                borderColor: '#fff',
+                borderWidth: 2
+              },
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: 40,
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                { value: 0 },
+                { value: 0 },
+                { value: 0 },
+                { value: 0 },
+              ]
+            }
+          ]
+        }
+      };
+    },
+    created() {
+      //this.getnum();
+    },
+    methods: {
+
+      //特殊用户
+      getnum(){
+        // summaryUser().then(res => {
+        //   if(res.code == 200){
+        //   this.datanum = res.data;
+        //   var data = [
+        //     { value: res.data.jmNum },
+        //     { value: res.data.syNum },
+        //     { value: res.data.gyNum }
+        //   ]
+        //   this.option.series[0].data = data;
+        // }
+        //console.log(this.option)
+        var myChart =  this.$echarts.init(document.getElementById('main2'));
+        myChart.setOption(this.option);
+      //})
+      }
+    },
+    mounted() {},
+  };
+</script>
+
+<style lang="scss" scoped>
+  .left{
+    width: 40%;
+    height: 30vh;
+  }
+  .right{
+    width: 55%;
+    height: 30vh;
+  }
+  .onehang{
+    width: 100%;
+    font-size: 14px;
+    display: flex;
+  }
+  .one{
+    height: 40px;
+    width: 30%;
+    text-align: center;
+  }
+  .onemax{
+    height: 40px;
+    width: 40%;
+    text-align: center;
+    display: flex;
+  }
+  .xiaoone{
+    height: 12px;
+    width: 20px;
+    margin-top: 4px;
+    margin-right: 5px;
+  }
+  .upon{
+    position: fixed;
+    width: 30%;
+    text-align: center;
+    font-size: 24px;
+  }
+</style>

zh-baseversion-web/src/views/supervision/safetysupervise/components/Middle.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-11 15:07:47
+ * @LastEditTime: 2022-04-20 11:09:34
+ * @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
+-->
+<template>
+  <div class="charsCom all-flex-h">
+    <div class="title">报警处置</div>
+    <div class="two all-flex">
+      <div class="left">
+        <div class="first">
+          <span class="text">报警情况</span>
+          <span>{{hiddenBookInfo.finishNum + hiddenBookInfo.unFinishNum}}次</span>
+        </div>
+        <div class="second all-flex">
+          <div class="left">未处理总数</div>
+          <div class="right">已处理总数</div>
+        </div>
+        <div class="third all-flex">
+          <div class="left">{{ hiddenBookInfo.unFinishNum}}</div>
+          <div class="right">{{hiddenBookInfo.finishNum}}</div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="first">
+          <span class="text">报警处置率</span>
+        </div>
+        <div class="chars-box" id ="main1">
+          <!--<Chars color="#604AFF" :options="option"></Chars>-->
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Chars from "@/components/allCharsCom/Chars";
+import { listDetectorReportData } from "@/api/detector/detectorReportData";
+export default {
+  components: {
+    Chars,
+  },
+  created(){
+    this.bottomOptions();
+  },
+  data() {
+    return {
+
+      option:{
+        color:['blue','lightblue'],
+        grid: {
+          bottom: "7%",
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        series: [
+          {
+            name: '访问来源',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            label: {
+              show: true,
+              position: 'center'
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              {value: 0, name: '未处理'},
+              {value: 0, name: '已处理'},
+            ]
+          }
+        ]
+      },
+      hiddenBookInfo: {
+        unFinishNum: 0,
+        finishNum: 0
+      },
+      total:0
+    };
+  },
+  methods: {
+    bottomOptions() {
+      listDetectorReportData({pageNum:1}).then(response => {
+        this.total= response.total;
+            listDetectorReportData({pageNum:1,isCancelAlarm:0}).then(res => {
+              this.option.series[0].data= [
+                {value: res.total, name: '未处理'},
+                {value: this.total-res.total, name: '已处理'},
+              ]
+              this.hiddenBookInfo= {
+                unFinishNum: res.total,
+                  finishNum: this.total-res.total
+              }
+              var myChart =  this.$echarts.init(document.getElementById('main1'));
+              myChart.setOption(this.option);
+            });
+      })
+
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.charsCom {
+  width: 100%;
+  height: 100%;
+  color: #333333;
+}
+.title {
+  text-align: center;
+  font-size: 24px;
+  margin-bottom: 7px;
+}
+.two {
+  // flex: 1;
+  > .left {
+    margin-right: 70px;
+    .first {
+      margin-bottom: 6px;
+    }
+    .second {
+      width: 200px;
+      height: 30px;
+      line-height: 30px;
+      box-sizing: border-box;
+      box-shadow: 0px 0px 3px 1px #dddddd;
+      margin-bottom: 19px;
+      > div {
+        // flex: 1;
+        text-align: center;
+
+        &.left {
+          color: #1d8cf3;
+        }
+        &.right {
+          color: #00c3f1;
+        }
+      }
+    }
+    .third {
+      text-align: center;
+      width: 200px;
+      margin-bottom: 24px;
+    }
+  }
+  > .right {
+    .first {
+      text-align: center !important;
+    }
+    .chars-box {
+      width: 220px;
+      height: 220px;
+      margin: 0 auto;
+    }
+  }
+  > div {
+    font-size: 16px;
+    flex: 1;
+    // display: flex;
+    // flex-direction: column;
+  }
+  .left,
+  .right {
+    // display: flex;
+    // flex-direction: column;
+    // justify-content: space-between;
+    .first {
+      text-align: left;
+      .text {
+        display: inline-block;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+.three {
+  font-size: 16px;
+  flex: 1;
+  // background: red;
+  .chars-box {
+    flex: 1;
+  }
+}
+</style>

zh-baseversion-web/src/views/supervision/safetysupervise/components/Pipe.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-14 15:49:20
+ * @LastEditTime: 2022-04-14 17:52:06
+ * @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/components/Pipe.vue
+-->
+<template>
+  <div class="pipe-wrapper">
+    <div class="top">
+      <div class="title">{{ deviceData.title }}</div>
+      <div class="close" @click="close">
+        <img src="@/assets/image-xjxc/close.png" alt="" />
+      </div>
+    </div>
+
+    <div class="bottom">
+      <div class="ele flex">
+        <div class="left zzz">任务标题</div>
+        <div class="right zzz">中燃翔科测试</div>
+      </div>
+      <div class="ele flex">
+        <div class="left zzz">任务类型</div>
+        <div class="right zzz">入户安检</div>
+      </div>
+      <div class="ele flex">
+        <div class="left zzz">任务内容</div>
+        <div class="right zzz">巡检巡查</div>
+      </div>
+      <div class="ele flex">
+        <div class="left zzz">执行单位</div>
+        <div class="right zzz">中燃翔科</div>
+      </div>
+      <div class="ele flex">
+        <div class="left zzz">执行人</div>
+        <div class="right zzz">林俊杰</div>
+      </div>
+
+      <div class="ele flex">
+        <div class="left">发现问题</div>
+        <div class="right img-wrapper">
+          <el-image
+            v-if="imgSrc"
+            style="width: 80px; height: 80px"
+            :src="imgSrc"
+            :preview-src-list="[imgSrc]"
+            :z-index="999999"
+          >
+          </el-image>
+          <img v-else src="@/assets/image-xjxc/nomal.jpg" alt="" />
+        </div>
+      </div>
+      <div class="ele flex">
+        <div class="left zzz">问题描述</div>
+        <div title="还没有找到问题原因" class="right zzz">还没有找到问题原因</div>
+      </div>
+      <div class="ele flex end">
+        <div class="left zzz">发现时间</div>
+        <div class="right">2022-01-02 12:12:12</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// deviceData
+export default {
+  data() {
+    return {
+      // imgSrc:
+      //   "http://222.223.203.154:8092/gassafety/profile/upload/2022/04/08/3f197bb6-ad51-43df-aded-e1b005008ad6.jpg",
+    };
+  },
+  methods: {
+    close() {
+      this.mapClass.infowindowClose();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.pipe-wrapper {
+  width: 230px;
+  padding: 10px 0 12px;
+  background-color: #fff;
+  box-sizing: border-box;
+  box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+  position: relative;
+  &::before {
+    content: "";
+    border-style: solid;
+    border-width: 9px 13px 9px 7px;
+    border-color: transparent #fff transparent transparent ;
+    position: absolute;
+    left:-20px;
+    top:50%;
+    margin-top:-9px;
+  }
+  .top {
+    box-sizing: border-box;
+    padding-bottom: 5px;
+    border-bottom: 1px solid #c4c4c4;
+    .title {
+      padding-left: 21px;
+      color: #1d8cf3;
+      font-size: 14px;
+      font-weight: 500;
+    }
+    .close {
+      position: absolute;
+      width: 13px;
+      height: 13px;
+      right: 10px;
+      top: 13px;
+      cursor: pointer;
+      img {
+        width: 100%;
+      }
+    }
+  }
+  .bottom {
+    padding: 10px 15px 0px 21px;
+    .ele {
+      font-size: 12px;
+      padding-bottom: 4px;
+      border-bottom: 1px dashed #ececec;
+      margin-bottom: 5px;
+      > div {
+        width: 80px;
+        color: #333333;
+        &.left{
+          font-weight: 500;
+        }
+        &.right {
+          text-align: left;
+        }
+        &.img-wrapper {
+          height: 80px;
+        }
+      }
+      &.end {
+        border-bottom: 0px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

zh-baseversion-web/src/views/supervision/safetysupervise/components/Right.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-11 15:07:47
+ * @LastEditTime: 2022-04-14 18:00:06
+ * @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
+-->
+<template>
+  <div class="charsCom all-flex-h">
+    <div class="title">报警设备</div>
+
+    <div class="four all-flex-h">
+      <div class="top flex">
+        <div>设备编号</div>
+        <div>设备类型</div>
+        <div>预警信息</div>
+        <div>预警时间</div>
+      </div>
+      <div class="scroll-wrapper">
+        <div v-if="loading" class="loading">加载中...</div>
+        <Scroll v-else-if="inforList.length > 0" :dataList="inforList">
+          <template v-slot="{ dataList }">
+            <ScroItem
+              v-for="(item, index) in dataList"
+              :key="item.fConGasProInforId"
+              :data="item"
+              :index="index"
+            />
+          </template>
+        </Scroll>
+        <div v-else class="no-data">暂无数据</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listDetectorReportData } from "@/api/detector/detectorReportData";
+import Scroll from "./Scroll";
+import ScroItem from "./ScroItem";
+import {getInfo} from "@/api/login";
+export default {
+  components: {
+    Scroll,
+    ScroItem
+  },
+  data() {
+    return {
+      notStarted:0,
+      completed:0,
+      inProgress:0,
+      loading: false,
+      user:{},
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        isCancelAlarm:0
+      },
+      inforList:[],
+      arr: [
+      ],
+    };
+  },
+  mounted() {},
+  created() {
+    this.getuserInfo();
+  },
+  methods: {
+    getuserInfo(){
+      getInfo().then(response => {
+        this.user = response.user.roles[0]
+        this.getList();
+      });
+    },
+    getList() {
+      this.loading = true;
+      listDetectorReportData(this.queryParams).then(response => {
+        this.inforList = response.rows;
+        this.loading = false;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.charsCom {
+  width: 100%;
+  height: 100%;
+}
+.title {
+  text-align: center;
+  font-size: 24px;
+  margin-bottom: 22px;
+}
+.two {
+  box-shadow: 0px 0px 3px 1px #dddddd;
+  height: 28px;
+  font-size: 14px;
+  margin-bottom: 15px;
+  > div {
+    line-height: 28px;
+    flex: 1;
+    text-align: center;
+    &.left {
+      color: #1f8df3;
+    }
+    &.middle {
+      flex: 1;
+      color: #03c4f1;
+    }
+    &.right {
+      color: #ffc337;
+    }
+  }
+}
+.three {
+  font-size: 16px;
+  margin-bottom: 10px;
+  > div {
+    flex: 1;
+    line-height: 24px;
+    text-align: center;
+  }
+}
+.four {
+  flex: 1;
+  font-size: 14px;
+  // 这个解决子元素overhidden失效问题
+  min-height: 0;
+  >.top {
+    background: rgba(24, 144, 255, 0.1);
+    height: 29px;
+    line-height: 29px;
+    > div {
+      flex: 1;
+      text-align: center;
+    }
+  }
+  .scroll-wrapper {
+    // font-size: 14px;
+    flex: 1;
+    // 这个解决子元素overhidden失效问题
+    min-height: 0;
+    // background: red;
+    // overflow: hidden;
+    // position:relative;
+  }
+}
+
+.loading, .no-data {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  font-size: 14px;
+}
+</style>

zh-baseversion-web/src/views/supervision/safetysupervise/components/ScroItem.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-12 18:02:16
+ * @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" :class="[{ n: index % 2 == 0, n2: index % 2 == 1 }]">
+    <div class="left zzz" :title="data.detectorCode">{{ data.detectorCode }}</div>
+    <div class="zzz" :title="data.fConstructionEnd">
+      {{getType(data.detectorType)}}
+    </div>
+    <div class="zzz" :title="data.statusName || ''">{{ data.statusName || '' }}</div>
+    <div class="zzz" :title="data.alarmTime || ''">{{ data.alarmTime || '-' }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+    },
+    index: {
+      type: Number,
+    },
+  },
+  methods: {
+    getType(value){
+      if(value==1){
+        return "家用探测器";
+      }else if(value==2){
+        return "工业探测器";
+      }else if(value==3){
+        return "激光家报";
+      }else if(value==4){
+        return "地下井探测器";
+      }else{
+        return '-'
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.top {
+  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;
+    font-size: 12px;
+    box-sizing: border-box;
+    padding: 0 2px;
+    &.left{
+      padding: 0 5px;
+    }
+  }
+}
+</style>

zh-baseversion-web/src/views/supervision/safetysupervise/components/Scroll.vue

+<template>
+  <div class="scroll-container" ref="container">
+    <div class="scroll-content" :style="{ transform: `translateY(${translateY}px)` }">
+      <slot :dataList="dataList" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    dataList: {
+      type: Array,
+      default: () => [],
+    },
+    speed: {
+      type: Number,
+      default: 0.5
+    },
+    interval: {
+      type: Number,
+      default: 24
+    }
+  },
+  data() {
+    return {
+      timer: null,
+      translateY: 0,
+      containerHeight: 0,
+      contentHeight: 0,
+      isHover: false
+    };
+  },
+  mounted() {
+    this.initScroll();
+  },
+  watch: {
+    dataList: {
+      handler() {
+        this.$nextTick(() => {
+          this.resetScroll();
+          this.initScroll();
+        });
+      },
+      deep: true
+    }
+  },
+  methods: {
+    initScroll() {
+      if (!this.$refs.container) return;
+
+      this.containerHeight = this.$refs.container.clientHeight;
+      this.contentHeight = this.$refs.container.firstElementChild?.scrollHeight || 0;
+
+      // 如果内容高度小于容器高度，不需要滚动
+      if (this.contentHeight <= this.containerHeight) {
+        this.stopScroll();
+        return;
+      }
+
+      this.startScroll();
+    },
+    startScroll() {
+      this.stopScroll();
+      this.timer = setInterval(() => {
+        if (this.isHover) return;
+
+        this.translateY -= this.speed;
+
+        // 当内容完全滚出容器时，重置位置
+        if (Math.abs(this.translateY) >= this.contentHeight) {
+          this.translateY = this.containerHeight;
+        }
+      }, this.interval);
+    },
+    stopScroll() {
+      if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = null;
+      }
+    },
+    resetScroll() {
+      this.translateY = 0;
+      this.stopScroll();
+    }
+  },
+  beforeDestroy() {
+    this.stopScroll();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.scroll-content {
+  position: absolute;
+  width: 100%;
+  transition: transform 0.1s linear;
+}
+</style>

zh-baseversion-web/src/views/supervision/safetysupervise/index.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-11 14:11:04
+ * @LastEditTime: 2022-04-14 10:45:52
+ * @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
+-->
+<template>
+  <div class="app-container xjxc">
+    <div class="wrapper flex-h">
+      <div class="top flex">
+        <div class="left">
+          <Left />
+        </div>
+        <div class="middle">
+          <Middle />
+        </div>
+        <div class="right">
+          <Right />
+        </div>
+      </div>
+      <div class="middle"></div>
+      <div class="bottom">
+        <MapBottom/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+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,
+    MapBottom
+  },
+  data() {
+    return {
+
+    };
+  },
+  mounted(){
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.app-main {
+}
+.xjxc {
+  height: calc(100vh - 50px) !important;
+}
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+.flex-h {
+  display: flex;
+  // justify-content: space-around;
+  flex-direction: column;
+  height: 100%;
+  .top {
+    height: 38.7%;
+
+    .left {
+      width: 34%;
+      padding: 15px 24px 19px;
+    }
+    .middle {
+      width: 35.3%;
+      padding: 15px 50px 19px 51px;
+    }
+    .right {
+      width: 30%;
+      padding: 15px 29px;
+    }
+    > div {
+      // box-shadow: 2px 0px 13px 1px rgba(0, 0, 0, 0.1);
+      box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
+      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 {
+    // height: 50%;
+  }
+}
+</style>