From 147821c2fbc8831f0eed89f504ef68dd1844e020 Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Tue, 19 Oct 2021 16:46:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BEdemo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 epmet-oper-web/public/index.html              |   2 +
 .../src/views/modules/demo/mapDemo copy.vue   | 122 ++++++++++++++++++
 .../src/views/modules/demo/mapDemo.vue        | 122 ++++++++++++++++++
 .../footbar/FootbarDefault111.vue             |  50 -------
 4 files changed, 246 insertions(+), 50 deletions(-)
 create mode 100644 epmet-oper-web/src/views/modules/demo/mapDemo copy.vue
 create mode 100644 epmet-oper-web/src/views/modules/demo/mapDemo.vue
 delete mode 100644 epmet-oper-web/src/views/modules/productConfig/footbar/FootbarDefault111.vue

diff --git a/epmet-oper-web/public/index.html b/epmet-oper-web/public/index.html
index 5a6631f..bf2efa3 100644
--- a/epmet-oper-web/public/index.html
+++ b/epmet-oper-web/public/index.html
@@ -5,6 +5,8 @@
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" />
+  <script src="https://map.qq.com/api/gljs?v=1.exp&key=XCUBZ-UYXCP-XZNDB-VI5P3-2Y3RO-6WBYO"></script>
+
   <!-- 站点配置 -->
   <script>
     window.SITE_CONFIG = {}
diff --git a/epmet-oper-web/src/views/modules/demo/mapDemo copy.vue b/epmet-oper-web/src/views/modules/demo/mapDemo copy.vue
new file mode 100644
index 0000000..fb9e9e8
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/demo/mapDemo copy.vue	
@@ -0,0 +1,122 @@
+<template>
+  <div class="div_total"
+       :style="{height:mapHeight+'px'}">
+    <div class="div_left">
+      <div class="div_search">
+        <el-input placeholder="输入要搜索的名称"></el-input>
+        <el-button type="primary"
+                   icon="el-icon-search"
+                   circle
+                   @click="searchMap"></el-button>
+
+      </div>
+      <div class="map"
+           id="app">
+      </div>
+    </div>
+    <div class="div_right"></div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+//定义事件处理方法
+var clickHandler = function (evt) {
+  var lat = evt.latLng.getLat().toFixed(6);
+  var lng = evt.latLng.getLng().toFixed(6);
+  console.log("您点击的的坐标是：" + lat + "," + lng);
+}
+
+// 定义地图中心点坐标
+var center = new window.TMap.LatLng(39.984120, 116.307484)
+// 定义map变量，调用 TMap.Map() 构造函数创建地图
+var map
+var search
+var markers
+var infoWindowList = Array(10);
+
+
+
+export default {
+  data () {
+    return {
+
+    }
+  },
+  components: {
+
+  },
+
+  async mounted () {
+    this.initMap();
+
+  },
+  computed: {
+    mapHeight () {
+
+      return this.clientHeight - 130;
+
+    },
+    ...mapGetters(['clientHeight']),
+  },
+
+  methods: {
+    initMap () {
+      map = new window.TMap.Map(document.getElementById('app'), {
+        center: center, // 设置地图中心点坐标
+        zoom: 17.2, // 设置地图缩放级别
+        viewMode: '2D'
+        // pitch: 43.5, // 设置俯仰角
+        // rotation: 45 // 设置地图旋转角度
+      })
+      // var search = new window.TMap.service.Search({ pageSize: 10 });
+      // var markers = new window.TMap.MultiMarker({
+      //   map: map,
+      //   geometries: [],
+      // });
+      console.log(window.TMap)
+      console.log(window)
+
+      //Map实例创建后，通过on方法绑定点击事件
+      map.on("click", clickHandler)
+    },
+    searchMap () {
+
+    }
+
+
+  },
+  props: {
+
+  }
+}
+</script>
+<style>
+.div_total {
+  width: 100%;
+  display: flex;
+}
+.div_left {
+  width: 70%;
+  height: 100%;
+  position: relative;
+}
+
+.map {
+  height: 100%;
+}
+
+.div_search {
+  z-index: 9999;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  display: flex;
+}
+
+/* .map {
+  width: 100%;
+  height: 400px;
+} */
+</style>
diff --git a/epmet-oper-web/src/views/modules/demo/mapDemo.vue b/epmet-oper-web/src/views/modules/demo/mapDemo.vue
new file mode 100644
index 0000000..74522d2
--- /dev/null
+++ b/epmet-oper-web/src/views/modules/demo/mapDemo.vue
@@ -0,0 +1,122 @@
+<template>
+
+  <div class="div_total"
+       :style="{height:mapHeight+'px'}">
+    <!-- <div class="div_left"> -->
+    <!-- <div class="div_search">
+        <el-input placeholder="输入要搜索的名称"></el-input>
+        <el-button type="primary"
+                   icon="el-icon-search"
+                   circle
+                   @click="searchMap"></el-button>
+
+      </div> -->
+    <div id="map"
+         class="map"></div>
+  </div>
+  <!-- <div class="div_right"></div> -->
+  <!-- </div> -->
+
+</template>
+
+<script>
+import "ol/ol.css";
+import { transform } from 'ol/proj'
+import Map from "ol/Map";
+import OSM from "ol/source/OSM";
+import XYZ from "ol/source/XYZ";
+import TileLayer from "ol/layer/Tile";
+import View from "ol/View";
+
+import { mapGetters } from 'vuex'
+
+
+
+
+export default {
+  data () {
+    return {
+
+    }
+  },
+  components: {
+
+  },
+
+  async mounted () {
+    this.initMap();
+
+  },
+  computed: {
+    mapHeight () {
+
+      return this.clientHeight - 130;
+
+    },
+    ...mapGetters(['clientHeight']),
+  },
+
+  methods: {
+    initMap () {
+      //加载高德地图的数据源
+      var gaodeMapLayer = new TileLayer({
+        title: "高德地图",
+        source: new XYZ({
+          //指定url瓦片
+          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
+          wrapX: true//x方向平铺，也可以选择false
+        })
+      });
+
+      //创建地图容器
+      var map = new Map({
+        layers: [gaodeMapLayer],
+        //加载瓦片图层数据
+        view: new View({
+          //中心点坐标
+          center: [120.38071744447801, 36.059107012804446],
+          // projection: 'EPSG:3857',
+          projection: 'EPSG:4326',
+          zoom: 11,
+          minZoom: 10
+        }),
+        target: 'map'
+        //目标加载到map中
+      })
+
+      map.on('singleclick', function (e) {
+        console.log(e.coordinate)
+        console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
+
+      })
+    }
+
+
+  },
+  props: {
+
+  }
+}
+</script>
+<style>
+.div_total {
+  width: 100%;
+}
+.div_left {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.map {
+  height: 100%;
+}
+
+.div_search {
+  z-index: 9999;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  display: flex;
+}
+</style>
diff --git a/epmet-oper-web/src/views/modules/productConfig/footbar/FootbarDefault111.vue b/epmet-oper-web/src/views/modules/productConfig/footbar/FootbarDefault111.vue
deleted file mode 100644
index 2c4c1d1..0000000
--- a/epmet-oper-web/src/views/modules/productConfig/footbar/FootbarDefault111.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <div>
-    <el-card shadow="never"
-             class="aui-card--fill">
-      <footbar-list ref="ref_footbarlist"
-                    :showFrom="'default'"
-                    :tableKeywork="'FootBar'"></footbar-list>
-    </el-card>
-  </div>
-</template>
-
-<script>
-
-import FootbarList from './FootbarList'
-
-
-
-
-export default {
-  data () {
-    return {
-
-    }
-  },
-  activated () {
-
-    this.$nextTick(() => {
-
-      this.$refs['ref_footbarlist'].doLayout() // 解决表格错位
-
-    })
-  },
-  components: {
-    FootbarList
-  },
-
-  mounted () {
-
-  },
-  computed: {
-
-  },
-  methods: {
-
-
-  }
-}
-</script>
-<style>
-</style>