From b87920c8a43785739998d9fb78af3dfa4e3f72eb Mon Sep 17 00:00:00 2001
From: chenhaojie <chenhaojie@datametatech.com>
Date: Thu, 7 Mar 2024 18:15:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A2=9E=E5=8A=A0=E6=B0=B4=E5=88=A9?=
 =?UTF-8?q?=E5=B7=A5=E7=A8=8B=E8=AF=A6=E6=83=85=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                             |  10 +-
 src/utils/index.js                            | 282 +++++++++---------
 .../waterSetting/runScene/index.vue           | 173 ++++++-----
 vue.config.js                                 |   7 +
 4 files changed, 254 insertions(+), 218 deletions(-)

diff --git a/public/index.html b/public/index.html
index a6ef527..a9cf1c9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,9 +7,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <script src="./config.js"></script>
+    
+    <link href="./lib/Cesium/Widgets/widgets.css" rel="stylesheet" />
+    <link href="./lib/sycim.min.css" rel="stylesheet" />
+    <script src="./lib/sycim.min.js"></script>
+    <script>
+      window.Cesium = sycim.Cesium;
+      sycim.config.baseUrl = "./lib/Cesium/";
+    </script>
+    <script src="./lib/SuperMap3D/SuperMap3D.js"></script>
     <title><%= webpackConfig.name %></title>
 
-
 	  <style>
     html,
     body,
diff --git a/src/utils/index.js b/src/utils/index.js
index 5a04b73..efdf77f 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,18 +1,19 @@
-import { parseTime } from './ruoyi'
+import { parseTime } from './ruoyi';
+import CanvasToImage from './canvas2Image';
 
 /**
  * 表格时间格式化
  */
 export function formatDate(cellValue) {
-  if (cellValue == null || cellValue == "") return "";
-  var date = new Date(cellValue)
-  var year = date.getFullYear()
-  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
-  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
-  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
-  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
-  var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
-  return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
+  if (cellValue == null || cellValue == '') return '';
+  var date = new Date(cellValue);
+  var year = date.getFullYear();
+  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
+  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+  var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+  return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
 }
 
 /**
@@ -22,39 +23,29 @@ export function formatDate(cellValue) {
  */
 export function formatTime(time, option) {
   if (('' + time).length === 10) {
-    time = parseInt(time) * 1000
+    time = parseInt(time) * 1000;
   } else {
-    time = +time
+    time = +time;
   }
-  const d = new Date(time)
-  const now = Date.now()
+  const d = new Date(time);
+  const now = Date.now();
 
-  const diff = (now - d) / 1000
+  const diff = (now - d) / 1000;
 
   if (diff < 30) {
-    return '刚刚'
+    return '刚刚';
   } else if (diff < 3600) {
     // less 1 hour
-    return Math.ceil(diff / 60) + '分钟前'
+    return Math.ceil(diff / 60) + '分钟前';
   } else if (diff < 3600 * 24) {
-    return Math.ceil(diff / 3600) + '小时前'
+    return Math.ceil(diff / 3600) + '小时前';
   } else if (diff < 3600 * 24 * 2) {
-    return '1天前'
+    return '1天前';
   }
   if (option) {
-    return parseTime(time, option)
+    return parseTime(time, option);
   } else {
-    return (
-      d.getMonth() +
-      1 +
-      '月' +
-      d.getDate() +
-      '日' +
-      d.getHours() +
-      '时' +
-      d.getMinutes() +
-      '分'
-    )
+    return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分';
   }
 }
 
@@ -63,18 +54,18 @@ export function formatTime(time, option) {
  * @returns {Object}
  */
 export function getQueryObject(url) {
-  url = url == null ? window.location.href : url
-  const search = url.substring(url.lastIndexOf('?') + 1)
-  const obj = {}
-  const reg = /([^?&=]+)=([^?&=]*)/g
+  url = url == null ? window.location.href : url;
+  const search = url.substring(url.lastIndexOf('?') + 1);
+  const obj = {};
+  const reg = /([^?&=]+)=([^?&=]*)/g;
   search.replace(reg, (rs, $1, $2) => {
-    const name = decodeURIComponent($1)
-    let val = decodeURIComponent($2)
-    val = String(val)
-    obj[name] = val
-    return rs
-  })
-  return obj
+    const name = decodeURIComponent($1);
+    let val = decodeURIComponent($2);
+    val = String(val);
+    obj[name] = val;
+    return rs;
+  });
+  return obj;
 }
 
 /**
@@ -83,14 +74,14 @@ export function getQueryObject(url) {
  */
 export function byteLength(str) {
   // returns the byte length of an utf8 string
-  let s = str.length
+  let s = str.length;
   for (var i = str.length - 1; i >= 0; i--) {
-    const code = str.charCodeAt(i)
-    if (code > 0x7f && code <= 0x7ff) s++
-    else if (code > 0x7ff && code <= 0xffff) s += 2
-    if (code >= 0xDC00 && code <= 0xDFFF) i--
+    const code = str.charCodeAt(i);
+    if (code > 0x7f && code <= 0x7ff) s++;
+    else if (code > 0x7ff && code <= 0xffff) s += 2;
+    if (code >= 0xdc00 && code <= 0xdfff) i--;
   }
-  return s
+  return s;
 }
 
 /**
@@ -98,13 +89,13 @@ export function byteLength(str) {
  * @returns {Array}
  */
 export function cleanArray(actual) {
-  const newArray = []
+  const newArray = [];
   for (let i = 0; i < actual.length; i++) {
     if (actual[i]) {
-      newArray.push(actual[i])
+      newArray.push(actual[i]);
     }
   }
-  return newArray
+  return newArray;
 }
 
 /**
@@ -112,13 +103,13 @@ export function cleanArray(actual) {
  * @returns {Array}
  */
 export function param(json) {
-  if (!json) return ''
+  if (!json) return '';
   return cleanArray(
-    Object.keys(json).map(key => {
-      if (json[key] === undefined) return ''
-      return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
+    Object.keys(json).map((key) => {
+      if (json[key] === undefined) return '';
+      return encodeURIComponent(key) + '=' + encodeURIComponent(json[key]);
     })
-  ).join('&')
+  ).join('&');
 }
 
 /**
@@ -126,21 +117,21 @@ export function param(json) {
  * @returns {Object}
  */
 export function param2Obj(url) {
-  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
+  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ');
   if (!search) {
-    return {}
+    return {};
   }
-  const obj = {}
-  const searchArr = search.split('&')
-  searchArr.forEach(v => {
-    const index = v.indexOf('=')
+  const obj = {};
+  const searchArr = search.split('&');
+  searchArr.forEach((v) => {
+    const index = v.indexOf('=');
     if (index !== -1) {
-      const name = v.substring(0, index)
-      const val = v.substring(index + 1, v.length)
-      obj[name] = val
+      const name = v.substring(0, index);
+      const val = v.substring(index + 1, v.length);
+      obj[name] = val;
     }
-  })
-  return obj
+  });
+  return obj;
 }
 
 /**
@@ -148,9 +139,9 @@ export function param2Obj(url) {
  * @returns {string}
  */
 export function html2Text(val) {
-  const div = document.createElement('div')
-  div.innerHTML = val
-  return div.textContent || div.innerText
+  const div = document.createElement('div');
+  div.innerHTML = val;
+  return div.textContent || div.innerText;
 }
 
 /**
@@ -161,20 +152,20 @@ export function html2Text(val) {
  */
 export function objectMerge(target, source) {
   if (typeof target !== 'object') {
-    target = {}
+    target = {};
   }
   if (Array.isArray(source)) {
-    return source.slice()
+    return source.slice();
   }
-  Object.keys(source).forEach(property => {
-    const sourceProperty = source[property]
+  Object.keys(source).forEach((property) => {
+    const sourceProperty = source[property];
     if (typeof sourceProperty === 'object') {
-      target[property] = objectMerge(target[property], sourceProperty)
+      target[property] = objectMerge(target[property], sourceProperty);
     } else {
-      target[property] = sourceProperty
+      target[property] = sourceProperty;
     }
-  })
-  return target
+  });
+  return target;
 }
 
 /**
@@ -183,18 +174,16 @@ export function objectMerge(target, source) {
  */
 export function toggleClass(element, className) {
   if (!element || !className) {
-    return
+    return;
   }
-  let classString = element.className
-  const nameIndex = classString.indexOf(className)
+  let classString = element.className;
+  const nameIndex = classString.indexOf(className);
   if (nameIndex === -1) {
-    classString += '' + className
+    classString += '' + className;
   } else {
-    classString =
-      classString.substr(0, nameIndex) +
-      classString.substr(nameIndex + className.length)
+    classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
   }
-  element.className = classString
+  element.className = classString;
 }
 
 /**
@@ -203,9 +192,9 @@ export function toggleClass(element, className) {
  */
 export function getTime(type) {
   if (type === 'start') {
-    return new Date().getTime() - 3600 * 1000 * 24 * 90
+    return new Date().getTime() - 3600 * 1000 * 24 * 90;
   } else {
-    return new Date(new Date().toDateString())
+    return new Date(new Date().toDateString());
   }
 }
 
@@ -216,38 +205,38 @@ export function getTime(type) {
  * @return {*}
  */
 export function debounce(func, wait, immediate) {
-  let timeout, args, context, timestamp, result
+  let timeout, args, context, timestamp, result;
 
   const later = function () {
     // 据上一次触发时间间隔
-    const last = +new Date() - timestamp
+    const last = +new Date() - timestamp;
 
     // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
     if (last < wait && last > 0) {
-      timeout = setTimeout(later, wait - last)
+      timeout = setTimeout(later, wait - last);
     } else {
-      timeout = null
+      timeout = null;
       // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
       if (!immediate) {
-        result = func.apply(context, args)
-        if (!timeout) context = args = null
+        result = func.apply(context, args);
+        if (!timeout) context = args = null;
       }
     }
-  }
+  };
 
   return function (...args) {
-    context = this
-    timestamp = +new Date()
-    const callNow = immediate && !timeout
+    context = this;
+    timestamp = +new Date();
+    const callNow = immediate && !timeout;
     // 如果延时不存在，重新设定延时
-    if (!timeout) timeout = setTimeout(later, wait)
+    if (!timeout) timeout = setTimeout(later, wait);
     if (callNow) {
-      result = func.apply(context, args)
-      context = args = null
+      result = func.apply(context, args);
+      context = args = null;
     }
 
-    return result
-  }
+    return result;
+  };
 }
 
 /**
@@ -259,17 +248,17 @@ export function debounce(func, wait, immediate) {
  */
 export function deepClone(source) {
   if (!source && typeof source !== 'object') {
-    throw new Error('error arguments', 'deepClone')
+    throw new Error('error arguments', 'deepClone');
   }
-  const targetObj = source.constructor === Array ? [] : {}
-  Object.keys(source).forEach(keys => {
+  const targetObj = source.constructor === Array ? [] : {};
+  Object.keys(source).forEach((keys) => {
     if (source[keys] && typeof source[keys] === 'object') {
-      targetObj[keys] = deepClone(source[keys])
+      targetObj[keys] = deepClone(source[keys]);
     } else {
-      targetObj[keys] = source[keys]
+      targetObj[keys] = source[keys];
     }
-  })
-  return targetObj
+  });
+  return targetObj;
 }
 
 /**
@@ -277,16 +266,16 @@ export function deepClone(source) {
  * @returns {Array}
  */
 export function uniqueArr(arr) {
-  return Array.from(new Set(arr))
+  return Array.from(new Set(arr));
 }
 
 /**
  * @returns {string}
  */
 export function createUniqueString() {
-  const timestamp = +new Date() + ''
-  const randomNum = parseInt((1 + Math.random()) * 65536) + ''
-  return (+(randomNum + timestamp)).toString(32)
+  const timestamp = +new Date() + '';
+  const randomNum = parseInt((1 + Math.random()) * 65536) + '';
+  return (+(randomNum + timestamp)).toString(32);
 }
 
 /**
@@ -296,7 +285,7 @@ export function createUniqueString() {
  * @returns {boolean}
  */
 export function hasClass(ele, cls) {
-  return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
+  return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
 }
 
 /**
@@ -305,7 +294,7 @@ export function hasClass(ele, cls) {
  * @param {string} cls
  */
 export function addClass(ele, cls) {
-  if (!hasClass(ele, cls)) ele.className += ' ' + cls
+  if (!hasClass(ele, cls)) ele.className += ' ' + cls;
 }
 
 /**
@@ -315,23 +304,21 @@ export function addClass(ele, cls) {
  */
 export function removeClass(ele, cls) {
   if (hasClass(ele, cls)) {
-    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
-    ele.className = ele.className.replace(reg, ' ')
+    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
+    ele.className = ele.className.replace(reg, ' ');
   }
 }
 
 export function makeMap(str, expectsLowerCase) {
-  const map = Object.create(null)
-  const list = str.split(',')
+  const map = Object.create(null);
+  const list = str.split(',');
   for (let i = 0; i < list.length; i++) {
-    map[list[i]] = true
+    map[list[i]] = true;
   }
-  return expectsLowerCase
-    ? val => map[val.toLowerCase()]
-    : val => map[val]
+  return expectsLowerCase ? (val) => map[val.toLowerCase()] : (val) => map[val];
 }
 
-export const exportDefault = 'export default '
+export const exportDefault = 'export default ';
 
 export const beautifierConf = {
   html: {
@@ -372,36 +359,32 @@ export const beautifierConf = {
     e4x: true,
     indent_empty_lines: true
   }
-}
+};
 
 // 首字母大小
 export function titleCase(str) {
-  return str.replace(/( |^)[a-z]/g, L => L.toUpperCase())
+  return str.replace(/( |^)[a-z]/g, (L) => L.toUpperCase());
 }
 
 // 下划转驼峰
 export function camelCase(str) {
-  return str.replace(/-[a-z]/g, str1 => str1.substr(-1).toUpperCase())
+  return str.replace(/-[a-z]/g, (str1) => str1.substr(-1).toUpperCase());
 }
 
 export function isNumberStr(str) {
-  return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
+  return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str);
 }
 
-
-
 export function copytree(tree, all = true) {
-  const objectTag = "[object Object]";
-  const arrayTag = "[object Array]";
+  const objectTag = '[object Object]';
+  const arrayTag = '[object Array]';
 
-  const _tostring = (value) =>
-    Object.prototype.toString.call(value);
+  const _tostring = (value) => Object.prototype.toString.call(value);
   // 记录所有的对象
   const map = new WeakMap();
   function copyTree(tree, all = true) {
     const treeTag = _tostring(tree);
-    const res =
-      treeTag === objectTag ? {} : treeTag === arrayTag ? [] : tree;
+    const res = treeTag === objectTag ? {} : treeTag === arrayTag ? [] : tree;
 
     if (treeTag !== objectTag && treeTag !== arrayTag) return res;
 
@@ -434,9 +417,28 @@ export function copytree(tree, all = true) {
 
 export function splitArr(data, senArrLen) {
   let data_len = data.length;
-  let ret = []
+  let ret = [];
   for (let i = 0; i < data_len; i += senArrLen) {
-    ret.push(data.slice(i, i + senArrLen))
+    ret.push(data.slice(i, i + senArrLen));
   }
-  return ret
+  return ret;
+}
+
+export function getCanvasImageAndViewPoint(viewer, w = 300, h = 300) {
+  viewer.scene.render();
+  console.log(CanvasToImage);
+  const imgNew = CanvasToImage.convertToImage(viewer.canvas, 'jpeg', w, h);
+  return {
+    ...getCameraViewPoint(viewer),
+    imageSrc: imgNew.src
+  };
+}
+
+export function getCameraViewPoint(viewer) {
+  return {
+    position: viewer.camera.positionWC.clone(),
+    heading: viewer.camera.heading,
+    pitch: viewer.camera.pitch,
+    roll: viewer.camera.roll
+  };
 }
diff --git a/src/views/aiSupervision/waterSetting/runScene/index.vue b/src/views/aiSupervision/waterSetting/runScene/index.vue
index f60b528..6777254 100644
--- a/src/views/aiSupervision/waterSetting/runScene/index.vue
+++ b/src/views/aiSupervision/waterSetting/runScene/index.vue
@@ -1,7 +1,11 @@
 <script>
 import { MessageBox } from 'element-ui';
+import RunSceneDetail from './detail/index.vue';
 export default {
   name: 'RunSceneConfig',
+  components: {
+    RunSceneDetail
+  },
   data() {
     return {
       keyword: '',
@@ -55,7 +59,8 @@ export default {
           label: '分组2',
           id: 2
         }
-      ]
+      ],
+      showDetail: false
     };
   },
   methods: {
@@ -72,6 +77,7 @@ export default {
       });
     },
     viewDetail(item) {
+      this.showDetail = true;
       console.log(item);
     },
     editItem(item) {
@@ -96,6 +102,9 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then((res) => {});
+    },
+    goBack() {
+      this.showDetail = false;
     }
   }
 };
@@ -103,40 +112,43 @@ export default {
 
 <template>
   <div class="slider-right">
-    <div class="top-title">水利工程运行场景配置</div>
-    <div class="table-box">
-      <div class="top-search">
-        <el-button type="primary" @click="createProject">新建项目</el-button>
-        <el-input class="search-input" placeholder="请输入场景名称或场景编号" v-model="keyword">
-          <el-button slot="append">搜索</el-button>
-        </el-input>
-      </div>
-      <el-table height="625" :data="tableData" border>
-        <el-table-column type="index" align="left" label="序号" width="80"> </el-table-column>
-        <el-table-column prop="num" align="left" label="项目编号" width="180"> </el-table-column>
-        <el-table-column prop="name" align="left" label="项目名称" width="180"> </el-table-column>
-        <el-table-column prop="interface_adress" align="left" label="接口地址"> </el-table-column>
-        <el-table-column prop="resource" align="left" label="关联图层资源目录" width="180"> </el-table-column>
-        <el-table-column align="center" label="操作" width="180">
-          <template slot-scope="scope">
-            <el-button type="text" @click="viewDetail(scope.row)">详情</el-button>
-            <el-button type="text" @click="editItem(scope.row)">编辑</el-button>
-            <el-button type="text" @click="deleteItem(scope.row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="pagination-box">
-        <el-pagination
-          background
-          class="pagination"
-          :current-page="pageData.pageNum"
-          :page-sizes="pageData.pageSizes"
-          layout="total, prev, pager, next, sizes, jumper"
-          :total="pageData.total"
-        >
-        </el-pagination>
+    <div class="content-wrapper" v-show="!showDetail">
+      <div class="top-title">水利工程运行场景配置</div>
+      <div class="table-box">
+        <div class="top-search">
+          <el-button type="primary" @click="createProject">新建项目</el-button>
+          <el-input class="search-input" placeholder="请输入场景名称或场景编号" v-model="keyword">
+            <el-button slot="append">搜索</el-button>
+          </el-input>
+        </div>
+        <el-table height="625" :data="tableData" border>
+          <el-table-column type="index" align="left" label="序号" width="80"> </el-table-column>
+          <el-table-column prop="num" align="left" label="项目编号" width="180"> </el-table-column>
+          <el-table-column prop="name" align="left" label="项目名称" width="180"> </el-table-column>
+          <el-table-column prop="interface_adress" align="left" label="接口地址"> </el-table-column>
+          <el-table-column prop="resource" align="left" label="关联图层资源目录" width="180"> </el-table-column>
+          <el-table-column align="center" label="操作" width="180">
+            <template slot-scope="scope">
+              <el-button type="text" @click="viewDetail(scope.row)">详情</el-button>
+              <el-button type="text" @click="editItem(scope.row)">编辑</el-button>
+              <el-button type="text" @click="deleteItem(scope.row)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination-box">
+          <el-pagination
+            background
+            class="pagination"
+            :current-page="pageData.pageNum"
+            :page-sizes="pageData.pageSizes"
+            layout="total, prev, pager, next, sizes, jumper"
+            :total="pageData.total"
+          >
+          </el-pagination>
+        </div>
       </div>
     </div>
+    <RunSceneDetail v-show="showDetail" @back="goBack"></RunSceneDetail>
     <el-dialog
       class="sy-dialog"
       width="50%"
@@ -173,64 +185,71 @@ export default {
 </template>
 
 <style scoped lang="less">
-.top-title {
-  height: 50px;
-  background-color: white;
-  display: flex;
-  padding-left: 16px;
-  align-items: center;
-  font-weight: 600;
-}
-
-.table-box {
+.slider-right,
+.content-wrapper {
   width: 100%;
-  height: calc(100% - 50px - 24px);
-  margin-top: 24px;
-  padding: 16px;
-  background-color: white;
+  height: 100%;
+  overflow: hidden;
 
-  .top-search {
+  .top-title {
+    height: 50px;
+    background-color: white;
     display: flex;
+    padding-left: 16px;
     align-items: center;
-    justify-content: space-between;
-    margin-bottom: 8px;
+    font-weight: 600;
+  }
+
+  .table-box {
+    width: 100%;
+    height: calc(100% - 50px - 24px);
+    margin-top: 24px;
+    padding: 16px;
+    background-color: white;
+
+    .top-search {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 8px;
 
-    .search-input {
-      width: 300px;
-      .el-input-group__append .el-button {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
+      .search-input {
+        width: 300px;
+        .el-input-group__append .el-button {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
       }
     }
-  }
 
-  .search-btn {
-    margin-left: 10px;
-    background-color: #37b29e;
-    border: none;
+    .search-btn {
+      margin-left: 10px;
+      background-color: #37b29e;
+      border: none;
 
-    &:hover {
-      background-color: #5ac6b9;
-    }
+      &:hover {
+        background-color: #5ac6b9;
+      }
 
-    &:active {
-      background-color: #2b8070;
+      &:active {
+        background-color: #2b8070;
+      }
     }
   }
-}
 
-.pagination-box {
-  margin-top: 16px;
-  margin-right: 16px;
-  text-align: right;
-}
+  .pagination-box {
+    margin-top: 16px;
+    margin-right: 16px;
+    text-align: right;
+  }
 
-.sy-dialog {
-  .el-form {
-    .el-form-item {
-      .el-form-item__content {
-        .el-select {
-          width: 100%;
+  .sy-dialog {
+    .el-form {
+      .el-form-item {
+        .el-form-item__content {
+          .el-select {
+            width: 100%;
+          }
         }
       }
     }
diff --git a/vue.config.js b/vue.config.js
index 5ec4dd6..592a5dd 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -50,6 +50,13 @@ module.exports = {
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: '/tianhui-admin-web'
         }
+      },
+      '/mapserver': {
+        target: 'http://172.16.32.63/tiles',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/mapserver': ''
+        }
       }
     },
     disableHostCheck: true