添加主题切换

public/config.js

@@ -1,5 +1,8 @@
-window.CityGisJs = 'http://10.1.161.53:9082/vmap/CityGis.Bridge.js';
+// window.CityGisJs = 'http://10.1.161.53:9082/vmap/CityGis.Bridge.js';
+// window.CityGisHtml =
+//   'http://10.1.161.53:9082/vmap/GIS.html?appKey=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBsaWNhdGlvbl9pZCI6MzMsImFwcGxpY2F0aW9uX25hbWUiOiLmjZ_ogJciLCJleHAiOjE3NTIyMTgwNDZ9.3ZomslkPrbBJ2xmI0QFyaRPuL21cjuFoijDrkPazb8s&debug=false&maptype=25d&code=city&devicetype=lg&themeid=Gis&mapthemeid=undefined';
+window.CityGisJs = '/vmap/CityGis.Bridge.js';
 window.CityGisHtml =
-  'http://10.1.161.53:9082/vmap/GIS.html?appKey=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBsaWNhdGlvbl9pZCI6MzMsImFwcGxpY2F0aW9uX25hbWUiOiLmjZ_ogJciLCJleHAiOjE3NTIyMTgwNDZ9.3ZomslkPrbBJ2xmI0QFyaRPuL21cjuFoijDrkPazb8s&debug=false&maptype=25d&code=city&devicetype=lg&themeid=Gis&mapthemeid=undefined';
+  '/vmap/GIS.html?appKey=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBsaWNhdGlvbl9pZCI6MzMsImFwcGxpY2F0aW9uX25hbWUiOiLmjZ_ogJciLCJleHAiOjE3NTIyMTgwNDZ9.3ZomslkPrbBJ2xmI0QFyaRPuL21cjuFoijDrkPazb8s&debug=false&maptype=25d&code=city&devicetype=lg&themeid=Gis&mapthemeid=undefined';
 window.VITE_BASE_API = '/api';
 window.VITE_CityGIS_API = '/cityGIsApi';

src/components/map/GisMap.vue

@@ -25,99 +25,103 @@ let listen;
 const drawPointStore = useDrawPointStore();
 const mapStore = useMapStore();
 onMounted(() => {
-  myBridge.bridgeContent = bridge = new CityGis.Bridge({
-    id: 'map',
-    url: window.CityGisHtml,
-    onReady: function () {
-      console.log('ready');
-      regionZone('松江');
-      //默认加载
-      addImagePoint('newAdress', [{ x: -14926.528171515301, y: -1705.2657878212942 }], {
-        imageUrl: new URL(`@/assets/image/mapTools/new_icon.png`, import.meta.url).href
-      });
-      addImagePoint(
-        'touch',
-        [
-          { x: 9604.191858692775, y: -19248.016463574288 },
-          { x: 13799.47156001244, y: -11944.303054916069 },
-          { x: 17672.277882889364, y: -9192.565371300574 }
-        ],
-        {
-          imageUrl: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href
-        }
-      );
-    }
-  });
-
-  listen = async (arg) => {
-    console.log('listen', arg);
-    switch (arg.action) {
-      case 'getPoint': {
-        const data = arg.data;
-        drawPointStore.modifyCurrentDrawPointList('x', data.x);
-        drawPointStore.modifyCurrentDrawPointList('y', data.y);
-        // const index = drawPointStore.currentDrawPointList.length - 1;
-        // drawPointStore.setInfoBoxIndex(index);
-        // const pointInfo = {
-        //   index: index,
-        //   x: data.x,
-        //   y: data.y,
-        //   date: '',
-        //   described: ''
-        // };
-        // drawPointStore.pushCurrentDrawPointList(pointInfo);
-        // console.log(index);
-        // addPoint(drawPointStore.currentDrawPointList, 'drawPoint');
-        // if (index > 0) {
-        //   //画线
-        //   addPolyLine(drawPointStore.currentDrawPointList, 'drawLine');
-        // }
-        break;
+  try {
+    myBridge.bridgeContent = bridge = new CityGis.Bridge({
+      id: 'map',
+      url: window.CityGisHtml,
+      onReady: function () {
+        console.log('ready');
+        regionZone('松江');
+        //默认加载
+        addImagePoint('newAdress', [{ x: -14926.528171515301, y: -1705.2657878212942 }], {
+          imageUrl: new URL(`@/assets/image/mapTools/new_icon.png`, import.meta.url).href
+        });
+        addImagePoint(
+          'touch',
+          [
+            { x: 9604.191858692775, y: -19248.016463574288 },
+            { x: 13799.47156001244, y: -11944.303054916069 },
+            { x: 17672.277882889364, y: -9192.565371300574 }
+          ],
+          {
+            imageUrl: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href
+          }
+        );
       }
-      case 'mapclick': {
-        if (arg?.data?.flowCar?.length > 0 && arg?.data?.flowCar[0]?.id) {
-          //会商车
-          try {
-            const id = arg?.data?.flowCar[0]?.id;
-            const res = await getTrajectorPointOnCarById({ id: id });
-            if (res.code == 200) {
-              addTrajectory(res.data || [], id);
-              mapStore.pushFlowCarList('car_layer' + id);
-              setTimeout(() => {
-                playTrajectory(id);
-              }, 2000);
+    });
+
+    listen = async (arg) => {
+      console.log('listen', arg);
+      switch (arg.action) {
+        case 'getPoint': {
+          const data = arg.data;
+          drawPointStore.modifyCurrentDrawPointList('x', data.x);
+          drawPointStore.modifyCurrentDrawPointList('y', data.y);
+          // const index = drawPointStore.currentDrawPointList.length - 1;
+          // drawPointStore.setInfoBoxIndex(index);
+          // const pointInfo = {
+          //   index: index,
+          //   x: data.x,
+          //   y: data.y,
+          //   date: '',
+          //   described: ''
+          // };
+          // drawPointStore.pushCurrentDrawPointList(pointInfo);
+          // console.log(index);
+          // addPoint(drawPointStore.currentDrawPointList, 'drawPoint');
+          // if (index > 0) {
+          //   //画线
+          //   addPolyLine(drawPointStore.currentDrawPointList, 'drawLine');
+          // }
+          break;
+        }
+        case 'mapclick': {
+          if (arg?.data?.flowCar?.length > 0 && arg?.data?.flowCar[0]?.id) {
+            //会商车
+            try {
+              const id = arg?.data?.flowCar[0]?.id;
+              const res = await getTrajectorPointOnCarById({ id: id });
+              if (res.code == 200) {
+                addTrajectory(res.data || [], id);
+                mapStore.pushFlowCarList('car_layer' + id);
+                setTimeout(() => {
+                  playTrajectory(id);
+                }, 2000);
+              }
+            } catch (error) {
+              console.log(error);
             }
-          } catch (error) {
-            console.log(error);
           }
-        }
-        const key = Object.keys(arg.data).find((item) => {
-          return item == 'infectious' || item == 'feverClinic' || item == 'breathe';
-        });
-        if (key) {
-          try {
-            const res = await getTrajectorPointOnPeopleById({
-              id: arg.data[key][0].id
-            });
-            if (res.code == 200) {
-              drawPointStore.currentSelectName = arg.data[key][0].name;
-              drawPointStore.currentSelectId = arg.data[key][0].id;
-              drawPointStore.currentSelectCode = arg.data[key][0].code;
-              drawPointStore.currentDrawPointList = res.data || [];
-              drawPointStore.openBiddingTable = true;
-            } else {
-              console.log('获取病例轨迹数据错误');
+          const key = Object.keys(arg.data).find((item) => {
+            return item == 'infectious' || item == 'feverClinic' || item == 'breathe';
+          });
+          if (key) {
+            try {
+              const res = await getTrajectorPointOnPeopleById({
+                id: arg.data[key][0].id
+              });
+              if (res.code == 200) {
+                drawPointStore.currentSelectName = arg.data[key][0].name;
+                drawPointStore.currentSelectId = arg.data[key][0].id;
+                drawPointStore.currentSelectCode = arg.data[key][0].code;
+                drawPointStore.currentDrawPointList = res.data || [];
+                drawPointStore.openBiddingTable = true;
+              } else {
+                console.log('获取病例轨迹数据错误');
+              }
+            } catch (error) {
+              console.log(error);
             }
-          } catch (error) {
-            console.log(error);
           }
+          break;
         }
-        break;
       }
-    }
-  };
-  //鼠标操作地图监听
-  bridge.addEventListener(listen);
+    };
+    //鼠标操作地图监听
+    bridge.addEventListener(listen);
+  } catch (error) {
+    console.log(error);
+  }
 });
 </script>
 

src/stores/mapStore.js

@@ -18,6 +18,8 @@ export const useMapStore = defineStore('mapStore', () => {
   //当前病例点位列表
   const currentToolSelectArray = ref(['newAdress', 'touch']);
 
+  const mapTheme = ref('base');
+
   //区选择
   const selectPartKey = ref('松江区');
 
@@ -225,6 +227,7 @@ export const useMapStore = defineStore('mapStore', () => {
     pushFlowCarList,
     delFlowCarList,
     setCurrentToolSelectArray,
-    delCurrentToolSelectArray
+    delCurrentToolSelectArray,
+    mapTheme
   };
 });

src/utils/map/mapOperation.js

@@ -562,3 +562,8 @@ export function change3DTheme(is3D = false) {
 }
 
 //地图切换
+export function ThemeChange(name) {
+  invokeParams('ChangeMapTheme', {
+    mapthemeid: name
+  });
+}

src/views/DataCenterGis/DataCenterGis.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="data-center-gis-container">
+  <div class="data-center-gis-container" :class="[sizeType + 'Size']">
+    <div class="fontSizeBox" @click="drawerVisible = true">
+      <el-icon><Setting /></el-icon>
+    </div>
     <div class="gis-container">
       <div class="left-container">
         <leftMap />
@@ -8,29 +11,95 @@
         <rightPanel />
       </div>
     </div>
+    <el-drawer v-model="drawerVisible" title="设置" :with-header="false">
+      <el-form class="detail-box">
+        <el-form-item label="字体大小" label-position="top">
+          <el-slider v-model="sizeType" :step="50" show-stops :marks="marks" />
+        </el-form-item>
+        <el-form-item label="地图主题切换" label-position="top">
+          <div class="map-change">
+            <div class="map" @click="changeTheme('浅色')">
+              <img src="../../assets/image/政务地图.png" />浅色
+            </div>
+            <div class="map" @click="changeTheme('深色')">
+              <img src="../../assets/image/暗色地图.png" />深色
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-drawer>
   </div>
 </template>
 
 <script setup>
-import leftMap from './components/LeftMap.vue'
-import rightPanel from './components/RightPanel.vue'
-console.log(1)
+import { ref, reactive, watch } from 'vue';
+import leftMap from './components/LeftMap.vue';
+import rightPanel from './components/RightPanel.vue';
+import { ArrowDown, Setting } from '@element-plus/icons-vue';
+import { ThemeChange } from '@/utils/map/mapOperation';
+import { useMapStore } from '@/stores/mapStore';
+console.log(1);
+const sizeType = ref('default');
+const step = ref(0);
+const drawerVisible = ref(false);
+const marks = reactive({
+  0: '标准',
+  50: '大',
+  100: '超大'
+});
+
+const changeTheme = (val) => {
+  ThemeChange(val == '浅色' ? 'basetheme' : 'yaogantheme');
+};
+
+watch(
+  () => sizeType.value,
+  (val) => {
+    sliderChange(val);
+  }
+);
+
+const sliderChange = (val) => {
+  console.log(val);
+  if (val == 0) {
+    sizeType.value = 'default';
+  } else if (val == 50) {
+    sizeType.value = 'big';
+  } else if (val == 100) {
+    sizeType.value = 'veryBig';
+  }
+};
 </script>
 
 <style lang="scss">
 .data-center-gis-container {
+  position: relative;
   width: 100vw;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
+  .fontSizeBox {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 30px;
+    height: 30px;
+    font-size: 28px;
+    z-index: 999;
+    .el-dropdown-link {
+      font-size: 20px;
+      outline: none;
+    }
+  }
   .gis-container {
     display: flex;
     justify-content: flex-start;
     background-color: #e5f2ff;
-    height: 1081px;
+    height: 1080px;
     .left-container {
-      width: 1045px;
+      width: calc(100vw - 725px - 150px);
+      padding-left: 10px;
       height: 100%;
     }
     .right-container {
@@ -41,4 +110,60 @@ console.log(1)
     }
   }
 }
+
+.drop-box {
+  .el-dropdown-menu__item {
+    padding: 0;
+  }
+  .size-box {
+    display: inline-block;
+    width: 100px;
+    padding: 10px;
+    text-align: center;
+    &.active {
+      background-color: #e5f2ff;
+      color: #1257bc;
+    }
+  }
+}
+.detail-box {
+  .el-form-item__label {
+    font-size: 18px;
+  }
+}
+.el-slider {
+  margin: 0 10px;
+  margin-bottom: 55px;
+}
+.el-drawer__body {
+  .el-slider__runway {
+    height: 1px;
+  }
+  .el-slider__stop {
+    background-color: #0080ff;
+    transform: translate(-50%, -5px);
+    width: 1px;
+    height: 15px;
+    border-radius: 0;
+  }
+  .el-slider__marks-text {
+    font-size: 18px;
+  }
+}
+.map-change {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-top: 20px;
+  .map {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    img {
+      width: 180px;
+      height: 150px;
+    }
+  }
+}
 </style>

src/views/DataCenterGis/components/LeftMap.vue

@@ -391,13 +391,14 @@ const nextPoint = () => {
 <style lang="scss" scoped>
 .right-Panel-container {
   padding-top: 22px;
+  width: 100%;
   .top-title {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     background-image: url('@/assets/image/title-bg.png');
     background-size: 100% 100%;
-    width: 1020px;
+    width: 100%;
     font-size: 28px;
     color: #ffffff;
     margin-left: 10px;
@@ -410,7 +411,7 @@ const nextPoint = () => {
   }
   .map-container {
     position: relative;
-    width: 1045px;
+    width: 100%;
     height: 976px;
     margin-top: 27px;
 

src/views/DataCenterGis/components/RightPanel.vue

@@ -568,3 +568,75 @@ onMounted(() => {
   border-radius: 50px;
 }
 </style>
+
+<style lang="scss">
+.bigSize {
+  .right-Panel-container {
+    .title-container {
+      .title-text {
+        font-size: 22px;
+      }
+    }
+    .partition-box {
+      scrollbar-width: none;
+      .partition-card {
+        .title {
+          font-size: 20px;
+        }
+        .text-box {
+          font-size: 18px;
+          .num {
+            font-size: 20px;
+          }
+        }
+      }
+    }
+    .table-container {
+      .table-row-head,
+      .table-row-box {
+        font-size: 18px;
+      }
+      .el-table {
+        .cell {
+          font-size: 16px;
+        }
+      }
+    }
+  }
+}
+
+.veryBigSize {
+  .right-Panel-container {
+    .title-container {
+      .title-text {
+        font-size: 25px;
+      }
+    }
+    .partition-box {
+      scrollbar-width: none;
+      .partition-card {
+        .title {
+          font-size: 24px;
+        }
+        .text-box {
+          font-size: 22px;
+          .num {
+            font-size: 24px;
+          }
+        }
+      }
+    }
+    .table-container {
+      .table-row-head,
+      .table-row-box {
+        font-size: 22px;
+      }
+      .el-table {
+        .cell {
+          font-size: 20px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/DataCenterGis/components/TitleContent.vue

@@ -6,7 +6,7 @@
 
 <script></script>
 
-<style>
+<style lang="scss">
 .title-content {
   height: 30px;
   background-image: url('@/assets/image/small-title-bg.png');
@@ -21,4 +21,14 @@
     top: -5px;
   }
 }
+.bigSize {
+  .title-content {
+    font-size: 22px;
+  }
+}
+.veryBigSize {
+  .title-content {
+    font-size: 26px;
+  }
+}
 </style>

vite.config.js

@@ -5,7 +5,7 @@ import postcssPxToViewport from 'postcss-px-to-viewport';
 export default defineConfig({
   plugins: [vue()],
   server: {
-    port: '8090',
+    port: '8098',
     host: '0.0.0.0',
     proxy: {
       '/api': {
@@ -17,10 +17,18 @@ export default defineConfig({
       },
       '/cityGIsApi': {
         //apiTest是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会进到代理来
-        target: 'http://10.1.161.113:18080/', // 需要代理的域名
+        // target: 'http://10.1.161.113:18080/', // 需要代理的域名
+        target: 'http://58.34.215.19:9082/', // 需要代理的域名
         secure: false,
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/cityGIsApi/, '') //重写匹配的字段，如果不需要放在请求路径上，可以重写为""
+      },
+      '/vmap': {
+        //apiTest是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会进到代理来
+        // target: 'http://10.1.161.113:18080/', // 需要代理的域名
+        target: 'http://58.34.215.19:9082', // 需要代理的域名
+        secure: false,
+        changeOrigin: true
       }
     }
   },
@@ -33,11 +41,11 @@ export default defineConfig({
     postcss: {
       plugins: [
         postcssPxToViewport({
-          viewportWidth: 1950, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
+          viewportWidth: 1080, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
           viewportHeight: 1080, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
           unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
-          viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
-          fontViewportUnit: 'vw',
+          viewportUnit: 'vh', // 指定需要转换成的视窗单位，建议使用vw
+          fontViewportUnit: 'vh',
           selectorBlackList: [], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
           minPixelValue: 2, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
           mediaQuery: true, // 允媒体查许在询中转换`px`