在线地图

2 years ago · c5382b3f03
parent 4829207bb5
commit c5382b3f03
8 changed files with 135 additions and 13 deletions
--- a/public/static/map.html
+++ b/public/static/map.html
@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        #container {
+            width: 100vw;
+            height: 100vh;
+            /* border: 0.1px solid #495e70; */
+        }
+    </style>
+    <script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=CSfWwqFqSVkQaqcAAMxKyXg6Moe9UUqA"></script>
+</head>
+
+<body>
+    <div id="container"></div>
+    <script>
+        // 创建地图实例  
+        var map = new BMapGL.Map("container");          // 创建地图实例 
+        var point = new BMapGL.Point(121.619401, 30.046348);  // 创建点坐标 
+        map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
+        map.enableScrollWheelZoom(true);
+        map.setMapType(BMAP_SATELLITE_MAP);
+        // 禁止地图旋转和倾斜可以通过配置项进行设置
+        var map = new BMapGL.Map("allmap", {
+            enableRotate: false,
+            enableTilt: false
+        });
+    </script>
+</body>
+
+</html>
--- a/src/components/login.vue
+++ b/src/components/login.vue
@ -97,7 +97,7 @@ export default {
                    if (res.code === 200) {
                        sessionStorage.setItem('activeIndex', '1')
                        this.$router.push({
-                            path: '/home/safetyIndex'
+                            path: '/home/compositeIndex'
                        })
                    } else {
                        this.$message.error(res.msg)
--- a/src/router/index.js
+++ b/src/router/index.js
@ -18,7 +18,7 @@ const routes = [
        name: 'home',
        component: () => import('@/views/head'),
        children: [
-          // 待用首页
+          // 首页
          {
            path: 'compositeIndex',
            name: 'compositeIndex',
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -7,8 +7,8 @@ const request = axios.create({
  //baseURL: 'http://172.18.113.50:8080/zhapi',
  //baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强
  //baseURL: 'http://192.168.0.188:8888/zhapi',
-  //baseURL: 'http://121.41.91.94:12002/zhapi',
-  baseURL: `http://${window.location.host}/zhapi`,
+  baseURL: 'http://121.41.91.94:12002/zhapi',
+  //baseURL: `http://${window.location.host}/zhapi`,
  timeout: 50000,
  headers: { 'content-type': 'application/json' },
 })
--- a/src/views/compositeIndex/index.vue
+++ b/src/views/compositeIndex/index.vue
@ -3,6 +3,18 @@
  <div>
    <!-- 最底层地图框 -->
    <div class="map_box">
+      <!-- 嵌入在线地图 -->
+      <iframe
+        name="zhenhaimap"
+        id="iframeMap"
+        class="iframeMap"
+        :src="getPageUrl"
+        width="100%"
+        height="100%"
+        frameborder="0"
+        scrolling="no"
+        ref="iframeDom"
+      ></iframe>
      <div class="left_box">
        <!-- 园区企业 -->
        <CompanyNum ref="companyNum"></CompanyNum>
@ -11,6 +23,22 @@
        <!-- 园区车辆 -->
        <CompanyCar ref="companyCar"></CompanyCar>
      </div>
+      <!-- 点击切换 -->
+      <div class="select_box">
+        <el-select
+          v-model="select_value"
+          placeholder="请选择"
+          @change="change_map"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </div>
      <div class="right_box">
        <!-- 惠企服务 -->
        <CompanyService ref="companyService"></CompanyService>
@ -28,7 +56,7 @@ import Employee from "./components/employee";
 import CompanyCar from "./components/companyCar";
 import CompanyService from "./components/companyService";
 import Notification from "./components/notification";
-import Endanger from "./components/endanger"
+import Endanger from "./components/endanger";
 export default {
  name: "CompositeIndex",
  components: {
@ -37,12 +65,35 @@ export default {
    CompanyCar,
    CompanyService,
    Notification,
-    Endanger
+    Endanger,
  },
  data() {
-    return {};
+    return {
+      getPageUrl:'static/map.html', // 引入在线地图
+      options: [
+        {
+          value: "1",
+          label: "地图",
+        },
+        {
+          value: "2",
+          label: "排名",
+        },
+      ],
+      select_value: "地图",
+    };
+  },
+  methods: {
+    change_map(val) {
+      console.log("22222", val);
+      if (val == "2") {
+        console.log("789");
+        this.$router.push({
+          path: "/home/safetyIndex",
+        });
+      }
+    },
  },
-  methods: {},
 };
 </script>
 <style lang="less" scoped>
@ -52,15 +103,42 @@ export default {
  box-sizing: border-box;
  position: relative;
  //   border: 0.1px solid #495e70;
+  .iframeMap {
+    margin-top: 1vh;
+    z-index: 0;
+    height: 90vh;
+  }
  .left_box {
    position: absolute;
    width: 24vw;
    left: 20px;
+    top: 0vh;
  }
  .right_box {
    position: absolute;
    width: 24vw;
    right: 20px;
+    top: 0vh;
+  }
+  .select_box {
+    position: absolute;
+    width: 6vw;
+    height: 4vh;
+    top: 0.8vh;
+    right: 26vw;
+    /deep/.el-input__inner {
+      background: #223335;
+      color: aliceblue;
+    }
+    /deep/.el-select .el-input__inner {
+      border-color: #37fdc7;
+    }
+    /deep/.el-select .el-input__inner:focus {
+      border-color: #37fdc7;
+    }
+    // /deep/.el-select-dropdown {
+    //   background-color: rgb(19, 19, 21) !important;
+    // }
  }
 }
 </style>
--- a/src/views/head.vue
+++ b/src/views/head.vue
@ -13,7 +13,7 @@
        :router="true"
      >
        <div class="shu"></div>
-        <el-menu-item index="1" route="/home/safetyIndex"
+        <el-menu-item index="1" route="/home/compositeIndex"
          >综合指数</el-menu-item
        >
        <div class="shu"></div>
--- a/src/views/realtimeWarning/map.vue
+++ b/src/views/realtimeWarning/map.vue
@ -44,7 +44,8 @@ export default {
          styleJson,
        },
      });
-
+      console.log('this.dongtaiPoint[0]',this.dongtaiPoint[0]);
+      console.log('this.dongtaiPoint[1]',this.dongtaiPoint[1]);
      //  console.log(this.WaringList, 'waringList');
      let that = this;
      map.centerAndZoom(
--- a/src/views/safetyIndex/toubu.vue
+++ b/src/views/safetyIndex/toubu.vue
@ -113,11 +113,12 @@
      placeholder="请选择"
      class="topSelect"
      v-if="Selectvalue == '排名'"
+      @change="change_map"
    >
      <el-option label="排名" value="排名"> </el-option>
      <el-option label="地图" value="地图"> </el-option>
    </el-select>
-    <el-select
+    <!-- <el-select
      v-model="Selectvalue"
      placeholder="请选择"
      class="topSelect1"
@ -125,7 +126,7 @@
    >
      <el-option label="排名" value="排名"> </el-option>
      <el-option label="地图" value="地图"> </el-option>
-    </el-select>
+    </el-select> -->
    <div class="middleBox" v-if="Selectvalue == '排名'">
      <el-tabs
        type="border-card"
@ -243,7 +244,7 @@ export default {
    },
    getstatisticsDanger() {
      statisticsDanger().then((res) => {
-        console.log('ressss',res.data);
+        console.log("ressss", res.data);
        this.statisticsDangerData = res.data;
      });
    },
@ -278,6 +279,13 @@ export default {
        path: "/home/companyCanban",
      });
    },
+    change_map(val) {
+      if (val == "地图") {
+        this.$router.push({
+          path: "/home/compositeIndex",
+        });
+      }
+    },
  },
 };
 </script>