From 267fe54ec929ce610588d2e0ddc7feb11f02e2b5 Mon Sep 17 00:00:00 2001
From: cjp <3096114695@qq.com>
Date: Fri, 12 Jan 2024 17:45:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=9A=A7=E9=81=93=E5=AE=9A=E4=BD=8D?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/js/config.js                           |   2 +-
 src/assets/js/http.js                         |   4 +-
 src/store/index.js                            |   2 +
 .../tunnelPositioning/tunnelConfiguration.vue | 321 +++++++-----------
 4 files changed, 124 insertions(+), 205 deletions(-)

diff --git a/public/js/config.js b/public/js/config.js
index cf09db52..802d4761 100644
--- a/public/js/config.js
+++ b/public/js/config.js
@@ -16,7 +16,7 @@ var COMPANY = '' //通用
 // COMPANY = 'sccr'//四川成润
 // COMPANY = 'pssh'//坪山沙湖项目
 // COMPANY = 'jlw'//金林湾
-COMPANY = 'shzj'//上海张江
+// COMPANY = 'shzj'//上海张江
 // COMPANY = 'shjg'//上海优益（上海建工）
 // COMPANY = 'syhy'//沈阳和盈
 // COMPANY = 'jxwjj'//嘉兴王江泾公用码头项目
diff --git a/src/assets/js/http.js b/src/assets/js/http.js
index 03f9f406..02bacf96 100644
--- a/src/assets/js/http.js
+++ b/src/assets/js/http.js
@@ -81,11 +81,11 @@ if (process.env.NODE_ENV == 'development') {
   // axios.defaults.baseURL ='http://42.194.144.62:8099/' //坪山沙湖
   // axios.defaults.baseURL ='http://125.88.207.86:8099/' //坪山沙湖（最新）地址
   // axios.defaults.baseURL ='http://huli.zjzhiliao.com/jxjgdapi/' //金林湾测试线上
-  axios.defaults.baseURL ='http://101.43.164.214:45001/' //上海张江
+  // axios.defaults.baseURL ='http://101.43.164.214:45001/' //上海张江
   // axios.defaults.baseURL ='http://101.43.164.214:45011/' //上海优益（上海建工）
   // axios.defaults.baseURL = 'http://192.168.34.221:28888/' //郭圣雄本地
   
-  // axios.defaults.baseURL ='http://192.168.34.221:9111/' //郭圣雄本地
+  axios.defaults.baseURL ='http://192.168.34.221:9111/' //郭圣雄本地
   // axios.defaults.baseURL = 'http://182.90.224.237:51234' //郭圣雄远程
   // axios.defaults.baseURL ='http://101.43.164.214:45020/' //沈阳和盈
   // axios.defaults.baseURL ='http://183.249.224.118:9000/' //嘉兴王江泾公用码头
diff --git a/src/store/index.js b/src/store/index.js
index 741f5443..d76a5a6e 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -44,6 +44,8 @@ export default new Vuex.Store({
   
   state: {
     PAGESIZRS: [10, 20, 30, 50],
+    // UPLOADURL:' http://101.43.164.214:11111/upload/image/',//  百色
+    // FILEURL:' http://101.43.164.214:11111/image/',// 百色
     // UPLOADURL:'http://192.168.34.221:9111/upload/image/',// 郭圣雄
     // FILEURL:'http://192.168.34.221:9111/image/',//郭圣雄
     // UPLOADURL:'http://10.0.1.43:6023/upload/image',//测试
diff --git a/src/views/projectFront/tunnelPositioning/tunnelConfiguration.vue b/src/views/projectFront/tunnelPositioning/tunnelConfiguration.vue
index 2d8965dc..bb84f7d6 100644
--- a/src/views/projectFront/tunnelPositioning/tunnelConfiguration.vue
+++ b/src/views/projectFront/tunnelPositioning/tunnelConfiguration.vue
@@ -3,9 +3,7 @@
     <div class="left-menu">
       <div class="menu-title">隧道列表</div>
       <div class="add-btn">
-        <el-button icon="el-icon-circle-plus-outline" @click="addProject"
-          >隧道配置</el-button
-        >
+        <el-button icon="el-icon-circle-plus-outline" @click="addProject">隧道配置</el-button>
       </div>
       <vue-scroll style="height: calc(100% - 120px)">
         <div class="menu-box" v-if="deepExcavationList.length > 0">
@@ -18,16 +16,8 @@
           >
             <p>隧道名称：{{ item.tunnelName }}</p>
             <p>隧道长度：{{ item.tunnelLength }}</p>
-            <p>
-              施工进度：{{ item.constructionProgressBegin }}/{{
-                item.constructionProgressEnd
-              }}
-            </p>
-            <p>
-              Y值随机值范围：{{ item.yvalueRandomRangeStart }}-{{
-                item.yvalueRandomRangeEnd
-              }}
-            </p>
+            <p>施工进度：{{ item.constructionProgressBegin }}/{{ item.constructionProgressEnd }}</p>
+            <p>Y值随机值范围：{{ item.yvalueRandomRangeStart }}-{{ item.yvalueRandomRangeEnd }}</p>
 
             <div class="actions-box">
               <el-button type="text">
@@ -50,6 +40,19 @@
         <div class="table-title">平面图配置</div>
       </div>
       <div class="tunnelBox">
+        <div class="uplodEditMap" v-if="activeImgUrl != ''">
+          <el-upload
+            :action="$store.state.UPLOADURL"
+            multiple
+            name="files"
+            :show-file-list="false"
+            :limit="1"
+            :on-success="handleSuccess"
+            :on-remove="handleRemove"
+          >
+            <el-button size="small" type="primary">更换隧道图</el-button>
+          </el-upload>
+        </div>
         <!-- 平面图卡片 -->
         <div class="mapCard">
           <div class="searchCard">
@@ -64,31 +67,11 @@
             >
             </el-input>
           </div>
-          <el-table
-            class="tables"
-            style="min-height: 165px; margin: 0% 2%; width: 96%"
-            :data="List"
-          >
-            <el-table-column
-              align="center"
-              label="序号"
-              type="index"
-            ></el-table-column>
-            <el-table-column
-              prop="enterpriseName"
-              label="企业名称"
-              align="center"
-            ></el-table-column>
-            <el-table-column
-              prop="teamName"
-              label="班组名称"
-              align="center"
-            ></el-table-column>
-            <el-table-column
-              prop="count"
-              label="人数"
-              align="center"
-            ></el-table-column>
+          <el-table class="tables" style="min-height: 165px; margin: 0% 2%; width: 96%" :data="List">
+            <el-table-column align="center" label="序号" type="index"></el-table-column>
+            <el-table-column prop="enterpriseName" label="企业名称" align="center"></el-table-column>
+            <el-table-column prop="teamName" label="班组名称" align="center"></el-table-column>
+            <el-table-column prop="count" label="人数" align="center"></el-table-column>
           </el-table>
           <div class="countPeople">共计:{{ countPeople }}人</div>
         </div>
@@ -102,21 +85,15 @@
               v-for="item in pointTunnelList"
               :style="{ top: item.topPx + 'px', left: item.leftPx + 'px' }"
             >
-              <!-- 人员名字 -->
-              <span style="position: absolute; top: 58%; left: 8%">
-                {{ item.name }}</span
-              >
-              <img
-                style="width: 55px; height: 50px"
-                src="@/assets/images/tunneIcon.png"
-              />
+              <div style="width: 90px; text-align: center">
+                <!-- 人员名字 -->
+              <span style="position: absolute; top: 58%; left: 25%"> {{ item.name }}</span>
+              <img style="width: 55px; height: 50px" src="@/assets/images/tunneIcon.png" />
+              </div>
             </div>
           </div>
         </div>
-        <div
-          class="uplodMap"
-          v-else-if="activeImgUrl == '' && deepExcavationList.length > 0"
-        >
+        <div class="uplodMap" v-else-if="activeImgUrl == '' && deepExcavationList.length > 0">
           <el-upload
             :action="$store.state.UPLOADURL"
             list-type="picture-card"
@@ -131,82 +108,30 @@
           </el-upload>
           <span>上传隧道平面图</span>
         </div>
-        <div
-          v-else
-          class="no-data"
-          style="position: absolute; top: 40%; left: 45%"
-        >
+        <div v-else class="no-data" style="position: absolute; top: 40%; left: 45%">
           <img src="@/assets/images/noData2.png" />
           <p style="margin: 10% 20%">暂无平面图</p>
         </div>
       </div>
     </div>
     <!-- 新增隧道弹框 -->
-    <el-dialog
-      :modal-append-to-body="false"
-      @close="close"
-      :title="title"
-      :visible.sync="tunnelDialog"
-      width="667px"
-    >
+    <el-dialog :modal-append-to-body="false" @close="close" :title="title" :visible.sync="tunnelDialog" width="667px">
       <div class="dialog_content">
-        <el-form
-          size="medium"
-          ref="addEditForm"
-          :model="addEditForm"
-          :rules="addEditRules"
-          label-width="90px"
-          class="dialogFormBox"
-        >
+        <el-form size="medium" ref="addEditForm" :model="addEditForm" :rules="addEditRules" label-width="90px" class="dialogFormBox">
           <el-form-item label="隧道名称" prop="tunnelName">
-            <el-input
-              v-model="addEditForm.tunnelName"
-              placeholder="请输入"
-            ></el-input>
+            <el-input v-model="addEditForm.tunnelName" placeholder="请输入"></el-input>
           </el-form-item>
           <el-form-item label="隧道ID" prop="tunnelId">
-            <el-input
-              v-model="addEditForm.tunnelId"
-              placeholder="请输入"
-            ></el-input>
+            <el-input v-model="addEditForm.tunnelId" placeholder="请输入"></el-input>
           </el-form-item>
-          <el-form-item
-            label-width="115px"
-            label="隧道长度（m）"
-            prop="tunnelLength"
-            style="margin-left: -15px"
-          >
-            <el-input
-              style="margin-left: -10px"
-              v-model="addEditForm.tunnelLength"
-              placeholder="请输入"
-              type="number"
-            ></el-input>
+          <el-form-item label-width="115px" label="隧道长度（m）" prop="tunnelLength" style="margin-left: -15px">
+            <el-input style="margin-left: -10px" v-model="addEditForm.tunnelLength" placeholder="请输入" type="number"></el-input>
           </el-form-item>
-          <el-form-item
-            label-width="115px"
-            label="施工进度（m）"
-            prop="constructionProgressBegin"
-            style="margin-left: -15px"
-          >
-            <el-input
-              class="smallInput1"
-              type="number"
-              v-model="addEditForm.constructionProgressBegin"
-            ></el-input
-            >/
-            <el-input
-              class="smallInput2"
-              type="number"
-              v-model="addEditForm.constructionProgressEnd"
-            ></el-input>
+          <el-form-item label-width="115px" label="施工进度（m）" prop="constructionProgressBegin" style="margin-left: -15px">
+            <el-input class="smallInput1" type="number" v-model="addEditForm.constructionProgressBegin"></el-input>/
+            <el-input class="smallInput2" type="number" v-model="addEditForm.constructionProgressEnd"></el-input>
           </el-form-item>
-          <el-form-item
-            class="labeInput"
-            label="Y值随机范围（px）"
-            prop="yvalueRandomRangeStart"
-            style="margin-left: -10px"
-          >
+          <el-form-item class="labeInput" label="Y值随机范围（px）" prop="yvalueRandomRangeStart" style="margin-left: -10px">
             <el-input
               style="margin-left: -10px"
               class="smallInput1"
@@ -215,36 +140,15 @@
               type="number"
             ></el-input>
             -
-            <el-input
-              class="smallInput2"
-              v-model="addEditForm.yvalueRandomRangeEnd"
-              @change="inputNumber2"
-              type="number"
-            ></el-input>
+            <el-input class="smallInput2" v-model="addEditForm.yvalueRandomRangeEnd" @change="inputNumber2" type="number"></el-input>
           </el-form-item>
           <el-form-item label="备注" prop="remark">
-            <el-input
-              v-model="addEditForm.remark"
-              placeholder="请输入"
-              clearable=""
-            ></el-input>
+            <el-input v-model="addEditForm.remark" placeholder="请输入" clearable=""></el-input>
           </el-form-item>
 
           <div class="dialog-footer">
-            <el-button
-              class="cancleBtn"
-              @click="tunnelDialog = false"
-              icon="el-icon-circle-close"
-              size="medium"
-              >取消
-            </el-button>
-            <el-button
-              type="primary"
-              icon="el-icon-circle-check"
-              @click="submit"
-              size="medium"
-              >确定
-            </el-button>
+            <el-button class="cancleBtn" @click="tunnelDialog = false" icon="el-icon-circle-close" size="medium">取消 </el-button>
+            <el-button type="primary" icon="el-icon-circle-check" @click="submit" size="medium">确定 </el-button>
           </div>
         </el-form>
       </div>
@@ -254,13 +158,13 @@
 
 <script>
 import {
-  addLocationTunnelApi,//隧道列表
+  addLocationTunnelApi, //隧道列表
   deleteLocationTunnelApi,
   editLocationTunnelApi,
   getLocationTunnelApi,
-  getRealTimeLocationWorkerApi,//查询实时定位人数
-  getcountRealTimeLocationWorkerApi, //查询实时定位班组人员
-} from "@/assets/js/api/tunnelPositioning";
+  getRealTimeLocationWorkerApi, //查询实时定位人数
+  getcountRealTimeLocationWorkerApi //查询实时定位班组人员
+} from '@/assets/js/api/tunnelPositioning'
 export default {
   data() {
     return {
@@ -281,7 +185,7 @@ export default {
         yvalueRandomRangeEnd: null,
         remark: '',
         planarGraph: '',
-        id: '',
+        id: ''
       },
       addEditRules: {
         tunnelName: [
@@ -317,41 +221,40 @@ export default {
             required: true,
             message: '必填',
             trigger: 'change'
-          },
-        ],
+          }
+        ]
       },
       title: '',
       fileList: [],
       activeImgUrl: '',
       countPeople: 0,
       data1: 0,
-      data2: 0,
+      data2: 0
     }
   },
 
   created() {
     this.projectSn = this.$store.state.projectSn
     this.getList()
-
   },
   methods: {
     inputNumber(value) {
-      console.log('输入框的值---', value,this.addEditForm.yvalueRandomRangeEnd);
+      console.log('输入框的值---', value, this.addEditForm.yvalueRandomRangeEnd)
       // if (value >= 310 && value <= 530) {
       //   this.addEditForm.yvalueRandomRangeStart = value;
       // } else {
       //   this.$message.error('请输入符合范围内的数值:310-530')
       //   this.addEditForm.yvalueRandomRangeStart = ''
       // }
-      if (this.addEditForm.yvalueRandomRangeEnd == '' || (value < this.addEditForm.yvalueRandomRangeEnd)) {
-        this.addEditForm.yvalueRandomRangeStart = value;
+      if (this.addEditForm.yvalueRandomRangeEnd == '' || value < this.addEditForm.yvalueRandomRangeEnd) {
+        this.addEditForm.yvalueRandomRangeStart = value
       } else {
         this.$message.error('请输入正确的范围数值')
         this.addEditForm.yvalueRandomRangeStart = ''
       }
     },
     inputNumber2(value) {
-      console.log('输入框的值---', value);
+      console.log('输入框的值---', value)
       // if (value >= this.addEditForm.yvalueRandomRangeStart && value <= 530) {
       //   this.addEditForm.yvalueRandomRangeEnd = value;
       // } else {
@@ -359,7 +262,7 @@ export default {
       //   this.addEditForm.yvalueRandomRangeEnd = ''
       // }
       if (value > this.addEditForm.yvalueRandomRangeStart) {
-        this.addEditForm.yvalueRandomRangeEnd = value;
+        this.addEditForm.yvalueRandomRangeEnd = value
       } else {
         this.$message.error('请输入正确的范围数值')
         this.addEditForm.yvalueRandomRangeEnd = ''
@@ -368,7 +271,7 @@ export default {
     //人员查询
     getLocation() {
       this.getCountTimeLocationList()
-      this.getRealTimeLocationList(this.data1, this.data2)
+      this.getRealTimeLocationList(this.data2)
     },
     //查询实时定位班组人员
     getCountTimeLocationList() {
@@ -383,60 +286,68 @@ export default {
           this.List.forEach(item => {
             this.countPeople += item.count
           })
-          console.log('查询实时定位班组人员:::111', res);
+          console.log('查询实时定位班组人员:::111', res)
         }
-
       })
     },
     //查询实时定位人数
-    getRealTimeLocationList(tunnelLength, width, yvalueRandomRangeEnd, yvalueRandomRangeStart) {
+    getRealTimeLocationList(width) {
       getRealTimeLocationWorkerApi({
         projectSn: this.projectSn,
         locationTunnelId: this.addEditForm.id,
         queryStr: this.queryStr
       }).then(res => {
         if (res.result) {
-          console.log('查询实时定位人数---', res);
+          console.log('查询实时定位人数---', res)
           this.pointTunnelList = []
-          res.result.forEach((item) => {
+          res.result.forEach(item => {
             //渲染隧道人员点位信息
             //x轴：nx÷隧道长度*总像素=点的x轴
             //y轴：Y值随机值范围：100-200
-            let xPx = item.inlX / tunnelLength * width;
-            console.log('y轴的值', item.ny);
+            let xPx = (item.inlX / this.addEditForm.constructionProgressBegin) * width
+            console.log('y轴的值', item.ny)
             // let randomNum4 = parseInt(Math.random() * (yvalueRandomRangeEnd - yvalueRandomRangeStart + 1) + yvalueRandomRangeStart);
             // let yPx = randomNum4;
-            let pointTunneObj =
-            {
-              topPx: item.py,
+            let min = this.addEditForm.yvalueRandomRangeStart
+            let max = this.addEditForm.yvalueRandomRangeEnd
+            // 获取 min 到 max 之间的随机整数
+            let randomInt = Math.floor(Math.random() * (max - min + 1)) + min;
+            console.log("随机数",randomInt);
+            
+            let pointTunneObj = {
+              topPx: randomInt + 250,
               leftPx: xPx,
               name: item.personName
             }
-            this.pointTunnelList.push(pointTunneObj);
+            this.pointTunnelList.push(pointTunneObj)
           })
+          console.log('人员定位数据', this.pointTunnelList)
         }
       })
     },
     // 选中隧道
     checkTunnel(item, index) {
       this.data1 = item.tunnelLength
-      console.log('item---', item);
+      console.log('item---', item)
       this.activeImgUrl = ''
-      this.addEditForm.id = item.id
+      this.addEditForm = item
+      // this.addEditForm.constructionProgressBegin = item.constructionProgressBegin
       this.activeDeep = index
-      let width = 0;
-      if (item.planarGraph && item.planarGraph != "" && item.planarGraph != null) {
+      let width = 0
+      let height = 0
+      if (item.planarGraph && item.planarGraph != '' && item.planarGraph != null) {
         let Img = JSON.parse(item.planarGraph)
         this.activeImgUrl = Img[0].url
         //获取图片大小
-        let img = new Image();
-        img.src = this.$store.state.FILEURL + this.activeImgUrl;
-        let that = this;
-        img.onload = function () {
-          console.log('点击隧道列表--- img.width:' + img.width);
-          width = img.width;
+        let img = new Image()
+        img.src = this.$store.state.FILEURL + this.activeImgUrl
+        let that = this
+        img.onload = function() {
+          console.log('点击隧道列表--- img.width:' + img.width)
+          width = img.width
+          height = img.height
           that.data2 = width
-          that.getRealTimeLocationList(item.tunnelLength, width, item.yvalueRandomRangeEnd, item.yvalueRandomRangeStart)
+          that.getRealTimeLocationList(width)
           that.getCountTimeLocationList()
         }
       } else {
@@ -446,18 +357,17 @@ export default {
     //查询隧道列表
     getList() {
       getLocationTunnelApi({
-        projectSn: this.projectSn,
+        projectSn: this.projectSn
       }).then(res => {
         if (res.result) {
           //获取隧道长度
           this.deepExcavationList = res.result
-          console.log('查询隧道列表:::', res);
-          const activeItem = this.deepExcavationList[this.activeDeep];
+          console.log('查询隧道列表:::', res)
+          const activeItem = this.deepExcavationList[this.activeDeep]
           if (activeItem) {
-            this.checkTunnel(activeItem, this.activeDeep);
+            this.checkTunnel(activeItem, this.activeDeep)
           }
         }
-
       })
     },
     //新增隧道
@@ -475,7 +385,7 @@ export default {
         yvalueRandomRangeEnd: '',
         remark: '',
         planarGraph: '',
-        id: '',
+        id: ''
       }
       this.$nextTick(() => {
         this.$refs.addEditForm.clearValidate()
@@ -488,13 +398,13 @@ export default {
       this.addEditForm = JSON.parse(JSON.stringify(obj))
     },
     deleteTunnel(obj) {
-      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
+      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
       })
         .then(() => {
-          deleteLocationTunnelApi({ id: obj.id }).then((result) => {
+          deleteLocationTunnelApi({ id: obj.id }).then(result => {
             if (result.success) {
               this.$message.success(result.message)
               this.activeImgUrl = ''
@@ -503,23 +413,23 @@ export default {
             }
           })
         })
-        .catch(() => { })
+        .catch(() => {})
     },
     //新增/编辑
     submit() {
       let params = JSON.parse(JSON.stringify(this.addEditForm))
       params.projectSn = this.projectSn
-      this.$refs.addEditForm.validate((valid) => {
+      this.$refs.addEditForm.validate(valid => {
         if (valid) {
           if (this.title == '新增隧道') {
-            addLocationTunnelApi(params).then((result) => {
+            addLocationTunnelApi(params).then(result => {
               if (result.success) {
                 this.$message.success(result.message)
                 this.getList()
               }
             })
           } else if (this.title == '编辑隧道') {
-            editLocationTunnelApi(params).then((result) => {
+            editLocationTunnelApi(params).then(result => {
               if (result.success) {
                 this.$message.success(result.message)
                 this.getList()
@@ -535,13 +445,11 @@ export default {
     processTheFile() {
       //处理el上传的文件格式(结构)
       this.addEditForm.planarGraph = []
-      this.fileList.map((item) => {
+      this.fileList.map(item => {
         if (!item.response) {
           this.addEditForm.planarGraph.push(item)
           // console.log('符合的结构', item)
-        }
-        else if
-          (item.response) {
+        } else if (item.response) {
           // console.log('不符合的结构', item)
           this.addEditForm.planarGraph.push({
             name: item.response.data[0].filename,
@@ -550,13 +458,12 @@ export default {
         }
       })
       this.addEditForm.planarGraph = JSON.stringify(this.addEditForm.planarGraph)
-
     },
     handleSuccess(response, file, fileList) {
       this.fileList = fileList
       this.processTheFile()
-      console.log('上传图片时的信息--', this.addEditForm);
-      editLocationTunnelApi(this.addEditForm).then((result) => {
+      console.log('上传图片时的信息--', this.addEditForm)
+      editLocationTunnelApi(this.addEditForm).then(result => {
         if (result.success) {
           this.activeImgUrl = file.response.data[0].imageUrl
           this.$message.success(result.message)
@@ -572,7 +479,7 @@ export default {
       this.$nextTick(() => {
         this.$refs.addEditForm.clearValidate()
       })
-    },
+    }
   }
 }
 </script>
@@ -708,7 +615,7 @@ export default {
 
 .foundationPit-table {
   padding: 0 26px;
-  padding-top: 60px;
+  padding-top: 30px;
   .table-title {
     color: #262d48;
     font-weight: 600;
@@ -716,9 +623,17 @@ export default {
   }
 }
 .tunnelBox {
-  height: 86%;
+  height: 90%;
   position: relative;
   border: 2px solid #ccc;
+  .uplodEditMap {
+    position: absolute;
+    left: 1%;
+    top: 1%;
+    text-align: center;
+    line-height: 40px;
+    z-index: 10;
+  }
   .uplodMap {
     position: absolute;
     left: 40%;
@@ -728,7 +643,7 @@ export default {
   }
   .mapCard {
     width: 25%;
-    height: 35%;
+    height: 33%;
     left: 74%;
     position: absolute;
     top: 1%;
@@ -750,6 +665,8 @@ export default {
     .partenUrl {
       height: 100%;
       width: 100%;
+      box-sizing: border-box;
+      padding-top: 250px;
       overflow-x: scroll;
       position: relative;
       .pointTunnel {
@@ -789,4 +706,4 @@ export default {
 ::v-deep .el-upload .el-upload-list__item {
   display: none;
 }
-</style>
\ No newline at end of file
+</style>