Начало Каталог Помощ
Регистрация Вход
yf_zd
/
cropland
1
0
Разклонения 0
Файлове Задачи 0 Заявки за сливане 0 Уики
Преглед на файлове

将组建地图改为原生api地图

yf_zd преди 4 години
родител
ef00ab27eb
ревизия
4e5cabb10c
променени са 18 файла, в които са добавени 1608 реда и са изтрити 310 реда
Разделен изглед Покажи статистика за разликите
  1. 4 1
      build/webpack.base.conf.js
  2. 1 1
      config/index.js
  3. 1 0
      index.html
  4. 2 1
      package.json
  5. 18 18
      src/main.js
  6. 99 0
      src/pages/plantGuard/MapInfoWindow.vue
  7. 150 132
      src/pages/plantGuard/baseAll.vue
  8. 5 2
      src/pages/plantGuard/cbdPhoto/cbdTabPhoto.vue
  9. 4 2
      src/pages/plantGuard/cbdTabPestStat.vue
  10. 3 3
      src/pages/plantGuard/equipState.vue
  11. 1154 0
      src/pages/plantGuard/page1 copy.vue
  12. 115 124
      src/pages/plantGuard/page1.vue
  13. 5 2
      src/pages/plantGuard/page4.vue
  14. 7 1
      src/router/index.js
  15. 25 7
      src/store/store.js
  16. 15 16
      src/util/server.js
  17. BIN
      static/images/1111.gif
  18. BIN
      static/images/projectIcon.png

+ 4 - 1
build/webpack.base.conf.js
Целия файл 

@@ -89,5 +89,8 @@ module.exports = {
 
     net: 'empty',
 
     tls: 'empty',
 
     child_process: 'empty'
 
-  }
 
+  },
 
+  externals: {
 
+    'AMap': 'AMap'
 
+  },
 
 }

+ 1 - 1
config/index.js
Целия файл 

@@ -12,7 +12,7 @@ module.exports = {
 
     proxyTable: {
 
       '/api': {
 
         // target: 'http://182.92.193.64:8002/',
 
-        target: 'http://192.168.1.77:8001/',
 
+        target: 'http://192.168.1.77:8000/',
 
         changeOrigin: true,
 
         pathRewrite: {
 
           '^/api': '/api' //重写接口

+ 1 - 0
index.html
Целия файл 

@@ -11,6 +11,7 @@
 
     <!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
 
     <meta name="format-detection" content="telephone=no, email=no"/>
 
     <script src="./static/js/ezuikit.js"></script>
 
+    <script src="https://webapi.amap.com/maps?v=2.0&key=3939967b919a8003377dd113fc445a3d&plugin=AMap.PolygonEditor"></script>
 
   </head>
 
   <body>
 
     <div id="app"></div>

+ 2 - 1
package.json
Целия файл 

@@ -36,7 +36,8 @@
 
     "vue-photo-preview": "^1.1.3",
 
     "vue-picture-bd-marker": "^1.3.8",
 
     "vue-router": "^3.0.1",
 
-    "vuex": "^3.6.2"
 
+    "vuex": "^3.6.2",
 
+    "vuex-persistedstate": "^4.0.0-beta.3"
 
   },
 
   "devDependencies": {
 
     "animate.css": "^4.1.1",

+ 18 - 18
src/main.js
Целия файл 

@@ -104,23 +104,23 @@ Vue.use(Viewer, {
 
 import 'viewerjs/dist/viewer.css'
 
 
 // 高德
 
-import VueAMap from 'vue-amap';
 
-Vue.use(VueAMap);
 
-VueAMap.initAMapApiLoader({
 
-  key: '3939967b919a8003377dd113fc445a3d',
 
-  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType','AMap.Geocoder','AMap.Geolocation','AMap.MouseTool'],
 
-  v: '1.4.4'
 
-});
 
-// 引入百度地图
 
-import BaiduMap from 'vue-baidu-map'
 
-import {
 
-  BmPolygon,
 
-  BmControl,
 
-  BmMarker
 
-} from 'vue-baidu-map'
 
-Vue.use(BaiduMap, BmPolygon, BmControl, BmMarker, {
 
-  ak: 'nroAiX0Lf6ppNEGt2dBLtDkOldGCPFwF'
 
-})
 
+// import VueAMap from 'vue-amap';
 
+// Vue.use(VueAMap);
 
+// VueAMap.initAMapApiLoader({
 
+//   key: '3939967b919a8003377dd113fc445a3d',
 
+//   plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType','AMap.Geocoder','AMap.Geolocation','AMap.MouseTool'],
 
+//   v: '1.4.4'
 
+// });
 
+// // 引入百度地图
 
+// import BaiduMap from 'vue-baidu-map'
 
+// import {
 
+//   BmPolygon,
 
+//   BmControl,
 
+//   BmMarker
 
+// } from 'vue-baidu-map'
 
+// Vue.use(BaiduMap, BmPolygon, BmControl, BmMarker, {
 
+//   ak: 'nroAiX0Lf6ppNEGt2dBLtDkOldGCPFwF'
 
+// })
 
 
 //导入全局样式
 
 import './assets/css/global.css'
 
@@ -191,7 +191,7 @@ router.beforeEach((to, from, next) => {
 
   let isLogin = JSON.parse(localStorage.getItem('isLogin'));
 
   if (to.path === '/login') {
 
     if (isLogin) {
 
-      next('/index/home') //登录后默认跳转到首页
 
+      next('/plantGuard') //登录后默认跳转到首页
 
     } else {
 
       next()
 
     }

+ 99 - 0
src/pages/plantGuard/MapInfoWindow.vue
Целия файл 

@@ -0,0 +1,99 @@
 
+<template>
 
+  <div v-show="visible">
 
+    <el-card class="box-card" style="padding: 0 80 30 80;width: 350px;border-radius: 10px;">
 
+      <div id="del-div">
 
+        <el-link type="primary" icon="el-icon-close" @click="close()"></el-link>
 
+      </div>
 
+      <div class="equipInfoWindowTitle">{{ (currEquip.device_type_id + '') | equipType }}</div>
 
+      <div class="equipInfoWindow">
 
+        <span>　设备ID：</span>
 
+        {{ currEquip.device_id }}
 
+      </div>
 
+      <div class="equipInfoWindow">
 
+        <span>设备名称：</span>
 
+        {{ currEquip.device_name || '暂无' }}
 
+      </div>
 
+      <div class="equipInfoWindow">
 
+        <span>设备位置：</span>
 
+        {{ currEquip.city }}
 
+      </div>
 
+      <div class="equipInfoWindow">
 
+        <span>上报时间：</span>
 
+        {{ (currEquip.addtime * 1000) | formatTime }}
 
+      </div>
 
+    </el-card>
 
+    <div class="amap-info-sharp">
 
+      <i class="el-icon-caret-bottom"></i>
 
+    </div>
 
+  </div>
 
+</template>
 
+<script>
 
+export default {
 
+  data() {
 
+    return {
 
+      infoWindow: null,
 
+      visible:false,
 
+      currEquip: {
 
+        device_type_id:null,
 
+        device_id:null,
 
+        device_name:null,
 
+        city:null,
 
+        addtime:0,
 
+      }
 
+    };
 
+  },
 
+  methods: {
 
+    initialize(e) {
 
+      this.visible = e.visible;
 
+      this.currEquip = e.currEquip;
 
+      this.infoWindow = e.infoWindow;
 
+    },
 
+    //关闭
 
+    close() {
 
+      this.infoWindow.close();
 
+    },
 
+  },
 
+  mounted(){
 
+    let infoWindow = new AMap.InfoWindow({
 
+        isCustom: true,
 
+        content: '',
 
+        offset: new AMap.Pixel(5, -11),
 
+    });
 
+    this.initialize({
 
+        currEquip: {},
 
+        visible: false,
 
+        infoWindow: infoWindow,
 
+    })
 
+  }
 
+};
 
+</script>
 
+ 
+<style  scoped>
 
+.amap-info-sharp {
 
+  bottom: -8px;
 
+  left: 48.5%;
 
+  position: absolute;
 
+  color: #fff;
 
+  z-index: 0;
 
+}
 
+#del-div {
 
+  position: absolute;
 
+  right: 20px;
 
+  top: 20px;
 
+  transform: scale(1.2);
 
+}
 
+
 
+.equipInfoWindowTitle {
 
+  border-bottom: 2px solid #35a478;
 
+  line-height: 33px;
 
+  margin-bottom: 5px;
 
+}
 
+.equipInfoWindow {
 
+  color: #585858;
 
+  font-size: 14px;
 
+  line-height: 22px;
 
+  span {
 
+    color: #333;
 
+  }
 
+}
 
+</style>

+ 150 - 132
src/pages/plantGuard/baseAll.vue
Целия файл 

@@ -2,36 +2,7 @@
 
 <template>
 
   <div class="inner">
 
     <div class="mapCover">
 
-      <el-amap
 
-        class="bm-view"
 
-        vid="amapDemo"
 
-        :center="center"
 
-        :amap-manager="amapManager"
 
-        :zoom="zoom"
 
-        :plugin="plugin"
 
-        :events="mapEvents"
 
-      >
 
-        <el-amap-marker 
-          v-for="(marker, index) in markers" 
-          :key="index" 
-          :position="marker.addr" 
-          :events="markersStatus.events" 
-          :visible="markersStatus.visible" 
-          :draggable="markersStatus.draggable" 
-          :icon="markersStatus.icon"
 
-          :offset="markersStatus.iconOffset"
 
-          :label="{content:marker.projectname,offset:[marker.projectname.length*-5/2,60]}"
 
-          :vid="index">
 
-        </el-amap-marker>
 
-        <!-- <el-amap-text 
-          v-for="(text,index) in markers" 
-          :key="index+markers.length"
 
-          :text="text.text" 
-          :offset="text.offset" 
-          :position="text.position" 
-          :events="text.events">
 
-        </el-amap-text> -->
 
-      </el-amap>
 
+      <div id="map">地图</div>
 
     </div>
 
     <div class="mapTypebox">
 
       <el-radio-group v-model="mapType" @change="changeMapType">
 
@@ -45,8 +16,7 @@
 
 <script>
 
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 
 //例如：import 《组件名称》 from '《组件路径》';
 
-import VueAMap from "vue-amap";
 
-let amapManager = new VueAMap.AMapManager();
 
+import { bd09togcj02,gcj02tobd09,wgs84togcj02,gcj02towgs84 } from "../../components/home/coordtransform_utils";  //纠偏方法
 
 export default {
 
   //import引入的组件需要注入到对象中才能使用
 
   components: {
 
@@ -54,62 +24,17 @@ export default {
 
   data() {
 
     //这里存放数据
 
     return {
 
-      amapManager,
 
-      center: [65.212881,31.279042],
 
-      zoom: 8,
 
+      // center: [65.212881,31.279042],
 
+      // zoom: 8,
 
       mapType: 1,
 
-      plugin: [
 
-        // {
 
-        //   pName: "ToolBar",
 
-        //   events: {
 
-        //     init(instance) {
 
-        //       console.log(instance);
 
-        //     }
 
-        //   }
 
-        // },
 
-        {
 
-          pName: "Scale",
 
-          events: {
 
-            init(instance) {
 
-              console.log(instance);
 
-            }
 
-          }
 
-        }
 
-        // {
 
-        //     pName: 'MapType',
 
-        //     defaultType: 0,
 
-        //     events: {
 
-        //       init(instance) {
 
-        //         console.log(instance);
 
-        //       }
 
-        //     }
 
-        //   }
 
-      ],
 
-      xyzTileLayer: null,
 
-      xyzTileLayer2: null,
 
-      mapEvents: {
 
-        init: o => {
 
-          this.xyzTileLayer = new AMap.TileLayer({
 
-            // 图块取图地址
 
-            getTileUrl:
 
-              "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=img_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
 
-            zIndex: 100
 
-          });
 
-          this.xyzTileLayer2 = new AMap.TileLayer({
 
-            // 图块取图地址
 
-            getTileUrl:
 
-              "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=cta_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
 
-            zIndex: 101
 
-          });
 
-          o.add(this.xyzTileLayer);
 
-          o.add(this.xyzTileLayer2);
 
-        }
 
-      },
 
+      tileLayer1: null,
 
+      tileLayer2: null,
 
+      equipListCurr:[],
 
       equipStyleObject:[
 
         {
 
-          url: require("@/assets/images/home/mapView/scd.png"), // 设别类型0
 
-          size: new AMap.Size(25, 15), // 图标大小
 
-          anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
 
+          url: require("../../../static/images/projectIcon.png"), // 设别类型0
 
+          size: new AMap.Size(70, 70), // 图标大小
 
+          anchor: new AMap.Pixel(0,0) // 图标显示位置偏移量，基准点为图标左上角
 
         },
 
         {
 
           url: require("@/assets/images/home/mapView/scd.png"), // 设别类型1
 
@@ -157,39 +82,46 @@ export default {
 
           anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
 
         },
 
       ],
 
-      queryInfo:{
 
-        equip_id:"",
 
-        d_id:"",
 
-        type:"",
 
-        model:""
 
+      icon:{
 
+        // 图标类型，现阶段只支持 image 类型
 
+        type: 'image',
 
+        // 图片 url
 
+        image: require("../../../static/images/projectIcon.png"),
 
+        // 图片尺寸
 
+        size: [74, 66],
 
+        // 图片相对 position 的锚点，默认为 bottom-center
 
+        anchor: 'center',
 
       },
 
-      markers: [
 
-        {
 
-          addr: [121.5273285, 31.21515044],
 
-          projectname: '南阳农田项目南阳农田项目',
 
-          uid:1
 
-        },
 
-      ],
 
+      // markers: [
 
+      //   {
 
+      //     addr: [121.5273285, 31.21515044],
 
+      //     projectname: '南阳农田项目南阳农田项目',
 
+      //     uid:1
 
+      //   },
 
+      // ],
 
       markersStatus:{
 
-          iconOffset: [-70, -70],
 
-          textOffset: [-35, 0],
 
-          icon:require('../../../static/images/icon5.svg'),
 
-          events: {
 
-            click: (e) => {
 
-              console.log(e.target.Ce.vid)
 
-              console.log(this.markers[e.target.Ce.vid])
 
-              this.$store.state.user_id = this.markers[e.target.Ce.vid].uid
 
-              this.$router.push('page1')
 
-            },
 
-            dragend: (e) => {
 
-              console.log('---event---: dragend')
 
-              // this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
 
-            }
 
+        iconOffset: [-70, -70],
 
+        textOffset: [-35, 0],
 
+        icon:require('../../../static/images/icon5.svg'),
 
+        events: {
 
+          click: (e) => {
 
+            console.log(e.target.Ce.vid)
 
+            console.log(this.markers[e.target.Ce.vid])
 
+            // this.$store.state.user_id = this.markers[e.target.Ce.vid].uid
 
+            this.$store.commit('setUserId',this.markers[e.target.Ce.vid].uid)
 
+            this.$router.push('page1')
 
           },
 
-          visible: true,
 
-          draggable: false,
 
+          dragend: (e) => {
 
+            console.log('---event---: dragend')
 
+            // this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
 
+          }
 
         },
 
-        txtLabels:[],
 
+        visible: true,
 
+        draggable: false,
 
+      },
 
+      txtLabels:[],
 
+      layer:null,
 
+      markers:[],
 
     };
 
   },
 
   //监听属性 类似于data概念
 
@@ -198,14 +130,55 @@ export default {
 
   watch: {},
 
   //方法集合
 
   methods: {
 
-    changeMapType(val){
 
-      let o = amapManager.getMap();    
+    // 初始化地图
 
+    infoMap(){
 
+        this.map = new AMap.Map("map", {
 
+            center: this.center,
 
+            resizeEnable: true,
 
+            zoom: 4,
 
+            lang: "en",
 
+        });
 
+        AMap.plugin(
 
+        [
 
+          "AMap.ToolBar",
 
+          "AMap.Scale",
 
+          "AMap.MouseTool",
 
+          "AMap.Geocoder",
 
+          "AMap.PolyEditor",
 
+        ],
 
+        () => {
 
+          this.map.addControl(new AMap.ToolBar());
 
+          this.map.addControl(new AMap.Scale());
 
+
 
+          this.geocoder = new AMap.Geocoder({
 
+            city: "全国",
 
+            radius: 1000,
 
+          });
 
+
 
+        }
 
+      );
 
+      this.tileLayer1 = new AMap.TileLayer({
 
+        tileUrl:
 
+          "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=img_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
 
+        zIndex: 10,
 
+      }); //卫星图层
 
+      this.tileLayer2 = new AMap.TileLayer({
 
+        // 图块取图地址
 
+        tileUrl:
 
+          "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=cta_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
 
+        zIndex: 101,
 
+      });
 
+      this.map.add(this.tileLayer1);
 
+      // this.map.add(this.tileLayer2);
 
+      this.getEquipList();
 
+    },
 
+    changeMapType(val){ 
       if(val==0){
 
-        this.xyzTileLayer.hide()
 
-        this.xyzTileLayer2.hide()
 
+        this.tileLayer1.hide()
 
+        this.tileLayer2.hide()
 
       }else{
 
-        this.xyzTileLayer.show()
 
-        this.xyzTileLayer2.show()
 
+        this.tileLayer1.show()
 
+        this.tileLayer2.show()
 
       }
 
     },
 
  
@@ -235,6 +208,12 @@ export default {
 
       }
 
     },
 
     getEquipList() {
 
+      this.layer = new AMap.LabelsLayer({
 
+          zooms: [3, 20],
 
+          zIndex: 1000,
 
+          collision: false,
 
+          allowCollision: false,
 
+      });
 
       let uid = sessionStorage.getItem("myuid");
 
       this.$axios({
 
         method: "POST",
 
@@ -244,24 +223,59 @@ export default {
 
         })
 
       }).then(res => {
 
         if (res.data.message == ""){
 
-          this.markers = res.data.data.user_project;
 
-          this.txtLabels = []
 
-          res.data.data.user_project.forEach((item) => {
 
-            this.txtLabels.push(new AMap.Text({
 
-              position: item.addr
 
-            }))
 
+          var data = res.data.data.user_project;
 
+          this.equipListCurr = data.map((item) => {
 
+            if (item.gps == 1) {
 
+              //GPS
 
+              item.lnglat = wgs84togcj02(item.lng, item.lat);
 
+            }
 
+            item.position=[item.lnglat[0],item.lnglat[1]]
 
+            item.text={
 
+                content: item.projectname,
 
+                direction: 'bottom',
 
+                offset: [-20, -5],
 
+                style: {
 
+                  // 字体大小
 
+                  fontSize: 16,
 
+                  // 字体颜色
 
+                  fillColor: '#ff0000',
 
+                  // 描边颜色
 
+                  strokeColor: '#ff0000',
 
+                  // 描边宽度
 
+                  strokeWidth: 1,
 
+                }
 
+            }
 
+            item.extData={
 
+              uid:item.uid
 
+            }
 
+            item.icon=this.icon
 
+            return item;
 
+              
           });
 
-          this.$nextTick(()=>{
 
-            let o = amapManager.getMap();
 
-            o.setFitView(this.txtLabels)
 
+
 
+          this.equipListCurr.forEach((item)=>{
 
+            var labelMarker = new AMap.LabelMarker(item);
 
+            labelMarker.on("click", (e) => {
 
+              this.equipMarkerClick(e.target.getExtData().uid);
 
+            });
 
+            this.markers.push(labelMarker);
 
           })
 
+
 
+          // 将 marker 添加到图层
 
+          this.layer.add(this.markers);
 
+          this.map.add(this.layer);
 
+          // this.massMarks.setMap(this.map);
 
+          // this.massMarks.on("click", (e) => {
 
+          //   this.equipMarkerClick(e.data);
 
+          // });
 
         } else {
 
           this.$message.error(res.data.message);
 
         }
 
       });
 
     },
 
-    equipMarkerClick(item) {
 
-    
+    equipMarkerClick(uid) {
 
+      this.$store.commit('setUserId',uid)
 
+      this.$router.push('page1')
 
     },
 
 
   },
 
@@ -269,7 +283,7 @@ export default {
 
   created() {},
 
   //生命周期 - 挂载完成（可以访问DOM元素）
 
   mounted() {
 
-    this.getEquipList()
 
+    this.infoMap()
 
   },
 
   beforeCreate() {}, //生命周期 - 创建之前
 
   beforeMount() {}, //生命周期 - 挂载之前
 
@@ -288,6 +302,10 @@ export default {
 
     position: relative;
 
     .mapCover{
 
         height: 100%;
 
+        #map{
 
+            width: 100%;
 
+            height: 100%;
 
+        }
 
     }
 
     .mapTypebox{
 
         position: absolute;

+ 5 - 2
src/pages/plantGuard/cbdPhoto/cbdTabPhoto.vue
Целия файл 

@@ -131,8 +131,11 @@ export default {
 
       }
 
     },
 
     lookmore(){
 
-      this.$store.state.cbd_photo_id = this.equipId
 
-      this.$store.state.cbd_photo_did = this.d_id
 
+      // this.$store.state.cbd_photo_id = this.equipId
 
+      // this.$store.state.cbd_photo_did = this.d_id
 
+      this.$store.commit('setCbdPhotoId',this.equipId)
 
+      this.$store.commit('setCbdPhotoDid',this.d_id)
 
+
 
       this.$router.push('cbdPhoto')
 
       // this.$router.push({
 
       //   path:'cbdPhoto',

+ 4 - 2
src/pages/plantGuard/cbdTabPestStat.vue
Целия файл 

@@ -432,8 +432,10 @@ export default {
 
     },
 
     // 查看害虫信息
 
     lookPestInfo(){
 
-		  this.$store.state.cbd_pest_id = this.equipId
 
-		  this.$store.state.cbd_pest_did = this.d_id
 
+		  // this.$store.state.cbd_pest_id = this.equipId
 
+      // this.$store.state.cbd_pest_did = this.d_id
 
+      this.$store.commit('setCbdPestId',this.equipId)
 
+      this.$store.commit('setCbdPestDid',this.d_id)
 
       this.$router.push('cbdPestStats')
 
     },

+ 3 - 3
src/pages/plantGuard/equipState.vue
Целия файл 

@@ -48,9 +48,9 @@ export default {
 
     return {
 
         equipState_dict,
 
         showState: {
 
-            "2": ["ds","ws","tbs","rps","tps","dps","tt","ct","at","ah","cv","bv","csq","dver","addtime"],
 
-            "3": ["ds","ws","tt","hs","at","ah","upds","dnds","vbat","rps","tps","lps","lamp","csq","dver","addtime"],
 
-            "4": ["ds","ws","tt","hs","at","ah","upds","dnds","vbat","rps","tps","lps","lamp","csq","dver","addtime"],
 
+            "2": ["ds","ws","rps","tps","dps","tt","ct","at","ah","cv","bv","csq","dver","addtime"],
 
+            "3": ["ds","ws","tt","hs","at","ah","upds","dnds","vbat","rps","tps","lps","csq","dver","addtime"],
 
+            "4": ["proj","ds","ws","at","ah","cv","bv","cs","bs","infr_ct","csq","dver","addtime"],
 
             "7": ["ds","at","ah","set_temp","pre_temp","bs","rps","usb_sta","vbat","csq","dver","addtime"],
 
         },
 
         equipData:{},

Файловите разлики са ограничени, защото са твърде много
+ 1154 - 0
src/pages/plantGuard/page1 copy.vue


+ 115 - 124
src/pages/plantGuard/page1.vue
Целия файл 

@@ -1,18 +1,10 @@
 
-<!--  -->
 
+<!-- 设备分布列表 -->
 
 <template>
 
   <div class="inner">
 
     <div class="mapCover">
 
-      <el-amap
 
-        class="bm-view"
 
-        vid="amapDemo"
 
-        :center="center"
 
-        :amap-manager="amapManager"
 
-        :zoom="zoom"
 
-        :plugin="plugin"
 
-        :events="mapEvents"
 
-      >
 
-        <el-amap-marker vid="component-marker" v-if="componentMarker.position.length" :position="componentMarker.position"  ></el-amap-marker>
 
-      </el-amap>
 
+      <div id="map">地图</div>
 
+      <!-- 弹框关键代码 -->
 
+    <infoWindowComponent ref="infoWindowComponent"></infoWindowComponent>
 
     </div>
 
     <div class="mapTypebox">
 
       <el-radio-group v-model="mapType" @change="changeMapType">
 
@@ -83,7 +75,7 @@
 
               <template v-solt:equipStateInner></template>
 
             </equip-info>
 
             <div class="equipData">
 
-              <div class="more" @click="lookmore()">查看更多</div>
 
+              <div class="more" @click="lookmore()">设备控制</div>
 
               <template>
 
                 <el-tabs v-model="activeName" @tab-click="tabshandleClick">
 
                   <el-tab-pane
 
@@ -119,7 +111,7 @@
 
               <template v-solt:equipStateInner></template>
 
             </equip-info>
 
             <div class="equipData">
 
-              <div class="more" @click="lookmore()">查看更多</div>
 
+              <div class="more" @click="lookmore()">设备控制</div>
 
               <template>
 
                 <el-tabs v-model="activeName" @tab-click="tabshandleClick">
 
                   <el-tab-pane
 
@@ -155,7 +147,7 @@
 
               <template v-solt:equipStateInner></template>
 
             </equip-info>
 
             <div class="equipData">
 
-              <div class="more" @click="lookmore()">查看更多</div>
 
+              <div class="more" @click="lookmore()">设备控制</div>
 
               <template>
 
                 <el-tabs v-model="activeName" @tab-click="tabshandleClick">
 
                   <el-tab-pane
 
@@ -191,7 +183,7 @@
 
               <template v-solt:equipStateInner></template>
 
             </equip-info>
 
             <div class="equipData">
 
-              <div class="more" @click="lookmore()">查看更多</div>
 
+              <div class="more" @click="lookmore()">设备控制</div>
 
               <template>
 
                 <el-tabs v-model="activeName" @tab-click="tabshandleClick">
 
                   <el-tab-pane
 
@@ -270,7 +262,7 @@
 
               <template v-solt:equipStateInner></template>
 
             </equip-info>
 
             <div class="equipData">
 
-              <div class="more" @click="lookmore()">查看更多</div>
 
+              <div class="more" @click="lookmore()">设备控制</div>
 
               <template>
 
                 <el-tabs v-model="activeName" @tab-click="tabshandleClick">
 
                   <el-tab-pane
 
@@ -322,8 +314,8 @@
 
 <script>
 
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 
 //例如：import 《组件名称》 from '《组件路径》';
 
-import VueAMap from "vue-amap";
 
-let amapManager = new VueAMap.AMapManager();
 
+import AMap from 'AMap'; 
+import infoWindowComponent from './MapInfoWindow.vue'
 
 import sidebar from "@/components/highStand/sidebar"
 
 import equipList from "@/components/highStand/equipList"
 
 import { bd09togcj02,gcj02tobd09,wgs84togcj02,gcj02towgs84 } from "@/components/home/coordtransform_utils.js";  //纠偏方法
 
@@ -339,6 +331,7 @@ import cbdTabPestStat from './cbdTabPestStat' //测报灯害虫统计
 
 export default {
 
   //import引入的组件需要注入到对象中才能使用
 
   components: {
 
+      infoWindowComponent,
 
       sidebar,
 
       equipList,
 
       dialogBox,
 
@@ -354,63 +347,13 @@ export default {
 
   data() {
 
     //这里存放数据
 
     return {
 
+      map:null,
 
+      center:[120.298433, 31.680335],
 
+      tileLayer1:null,
 
+      tileLayer2:null,
 
       user_id:'',
 
       sidebarComponents:'',
 
-      amapManager,
 
-      center: [106.323527,29.541514],
 
-      zoom: 5,
 
       mapType: 1,
 
-      plugin: [
 
-        // {
 
-        //   pName: "ToolBar",
 
-        //   events: {
 
-        //     init(instance) {
 
-        //       console.log(instance);
 
-        //     }
 
-        //   }
 
-        // },
 
-        {
 
-          pName: "Scale",
 
-          events: {
 
-            init(instance) {
 
-              console.log(instance);
 
-            }
 
-          }
 
-        }
 
-        // {
 
-        //     pName: 'MapType',
 
-        //     defaultType: 0,
 
-        //     events: {
 
-        //       init(instance) {
 
-        //         console.log(instance);
 
-        //       }
 
-        //     }
 
-        //   }
 
-      ],
 
-      componentMarker: {
 
-        position: []
 
-      },
 
-      infoWindow: null,
 
-      xyzTileLayer: null,
 
-      xyzTileLayer2: null,
 
-      mapEvents: {
 
-        init: o => {
 
-          this.xyzTileLayer = new AMap.TileLayer({
 
-            // 图块取图地址
 
-            getTileUrl:
 
-              "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=img_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
 
-            zIndex: 100
 
-          });
 
-          this.xyzTileLayer2 = new AMap.TileLayer({
 
-            // 图块取图地址
 
-            getTileUrl:
 
-              "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=cta_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
 
-            zIndex: 101
 
-          });
 
-          o.add(this.xyzTileLayer);
 
-          o.add(this.xyzTileLayer2);
 
-        }
 
-      },
 
       // tabs导航
 
       equipType:[
 
         {
 
@@ -602,6 +545,47 @@ export default {
 
   },
 
   //方法集合
 
   methods: {
 
+    // 初始化地图
 
+    infoMap(){
 
+        this.map = new AMap.Map("map", {
 
+            center: this.center,
 
+            resizeEnable: true,
 
+            zoom: 4,
 
+            lang: "en",
 
+        });
 
+        AMap.plugin(
 
+        [
 
+          "AMap.ToolBar",
 
+          "AMap.Scale",
 
+          "AMap.MouseTool",
 
+          "AMap.Geocoder",
 
+          "AMap.PolyEditor",
 
+        ],
 
+        () => {
 
+          this.map.addControl(new AMap.ToolBar());
 
+          this.map.addControl(new AMap.Scale());
 
+
 
+          this.geocoder = new AMap.Geocoder({
 
+            city: "全国",
 
+            radius: 1000,
 
+          });
 
+
 
+        }
 
+      );
 
+      this.tileLayer1 = new AMap.TileLayer({
 
+        tileUrl:
 
+          "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=img_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
 
+        zIndex: 10,
 
+      }); //卫星图层
 
+      this.tileLayer2 = new AMap.TileLayer({
 
+        // 图块取图地址
 
+        tileUrl:
 
+          "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=cta_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
 
+        zIndex: 101,
 
+      });
 
+      this.map.add(this.tileLayer1);
 
+      this.map.add(this.tileLayer2);
 
+    },
 
     getUserEquipType(){
 
       this.$axios({
 
         method: "POST",
 
@@ -673,14 +657,13 @@ export default {
 
           break;
 
       }
 
     },
 
-    changeMapType(val){
 
-      let o = amapManager.getMap();
 
+    changeMapType(val){ 
       if(val==0){
 
-        this.xyzTileLayer.hide()
 
-        this.xyzTileLayer2.hide()
 
+        this.tileLayer1.hide()
 
+        this.tileLayer2.hide()
 
       }else{
 
-        this.xyzTileLayer.show()
 
-        this.xyzTileLayer2.show()
 
+        this.tileLayer1.show()
 
+        this.tileLayer2.show()
 
       }
 
     },
 
     changeEquip(index,item){
 
@@ -688,7 +671,7 @@ export default {
 
       this.currSelectSite = index;
 
       this.detailsShow = ''
 
       this.searchEquipVal = ''
 
-      this.getEquipList()
 
+      this.getEquipList(item.type)
 
     },
 
     mouseOve(index,item){
 
       this.equipStyleLeft = 80*index
 
@@ -723,61 +706,42 @@ export default {
 
           break;
 
       }
 
     },
 
-    getEquipList() {
 
-      this.equipListloading = true;
 
-      this.componentMarker.position = []
 
-      // if(this.infoWindow){
 
-      //   this.infoWindow.close()
 
-      // }
 
-      var equip_type = this.currSelectType || '';
 
-      this.setZoom = 4;
 
+    getEquipList(type) {
 
       this.$axios({
 
         method: "POST",
 
         url: "/api/api_gateway?method=home.homes.equip_map_location",
 
         data: this.qs.stringify({
 
-          equip_type: equip_type,
 
-          device_id:this.searchEquipVal,
 
+          equip_type: type,
 
+          device_id: this.searchEquipVal,
 
           user_id:this.user_id
 
-        })
 
-      }).then(res => {
 
+        }),
 
+      }).then((res) => {
 
         if (res.data.message == "") {
 
           let data = res.data.data;
 
-          this.equipShow = false;
 
-          this.equips = data.map((item,index) => {
 
+          this.equipListCurr = data.map((item) => {
 
             this.iconFormat(item.device_type_id, item);
 
-            item.style = item.device_type_id
 
-            if(item.gps_type == 1){ //GPS
 
-              item.lnglat = wgs84togcj02(item.lng,item.lat)
 
-            }else{
 
-              // this.lnglatFormat(item);
 
+            item.style = item.device_type_id; //设备类型 2杀虫灯，3测报灯，4智能性诱，5气象站，6监控设备，7孢子仪，8性诱设备
 
+            if (item.gps_type == 1) {
 
+              //GPS
 
+              item.lnglat = wgs84togcj02(item.lng, item.lat);
 
             }
 
-            item.index = index
 
             return item;
 
           });
 
-          
-          if(this.massMarks){
 
-            this.massMarks.clear()
 
+          if (this.massMarks) {
 
+              console.log(this.massMarks);
 
+              
+            this.massMarks.clear();
 
           }
 
-          this.$nextTick(()=>{
 
-            console.log(this.equips)
 
-            this.equipList = this.equips;
 
-            this.equipListloading = false;
 
-            this.equipListCurr = this.equips;
 
-            this.massMarks = new AMap.MassMarks(this.equips, {
 
-              zIndex: 199, // 海量点图层叠加的顺序
 
-              zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
 
-              style: this.equipStyleObject // 设置样式对象
 
-            });
 
-            var o = amapManager.getMap();
 
-            this.massMarks.setMap(o)
 
-            this.massMarks.on('click',e =>{
 
-              this.$nextTick(()=>{
 
-                document.getElementById("equipListBox").scrollTop = 87*e.data.index;
 
-                
-                this.equipMarkerClick(e.data)  
-              })
 
-            })
 
-          })
 
+          this.massMarks = new AMap.MassMarks(this.equipListCurr, {
 
+            zIndex: 199, // 海量点图层叠加的顺序
 
+            zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
 
+            style: this.equipStyleObject, // 设置样式对象
 
+          });
 
+          this.massMarks.setMap(this.map);
 
+          this.massMarks.on("click", (e) => {
 
+            this.equipMarkerClick(e.data);
 
+            // this.openInfo(e.data);
 
+          });
 
         } else {
 
           this.$message.error(res.data.message);
 
         }
 
@@ -852,6 +816,27 @@ export default {
 
         });
 
       }
 
     },
 
+    /**
 
+    打开消息窗体
 
+    我这边实现的是点击marker事件后，弹出消息框
 
+    注：positionResult 为marker点击事件的 event
 
+    */
 
+    openInfo(positionResult) {
 
+        var that = this;
 
+        let infoWindow = new AMap.InfoWindow({
 
+            isCustom: true,
 
+            content: that.$refs.infoWindowComponent.$el,
 
+            offset: new AMap.Pixel(5, -11),
 
+        });
 
+        infoWindow.open(this.map, positionResult.lnglat);
 
+        this.infoWindow = infoWindow;
 
+        // 调用组件方法，初始化组件页面的infoWindow等数据
 
+        that.$refs.infoWindowComponent.initialize({
 
+            currEquip: positionResult,
 
+            visible: true,
 
+            infoWindow: infoWindow,
 
+        });
 
+    },
 
     //关闭方向
 
     stopConfigCamera() {
 
       this.$axios({
 
@@ -951,7 +936,7 @@ export default {
 
       this.nowPage = tab.name;
 
      
     },
 
-    // 查看更多控制
 
+    // 设备控制控制
 
     lookmore(){
 
       this.sidebarComponents = 'sidebar'
 
       this.detailsShow=""
 
@@ -968,6 +953,8 @@ export default {
 
     this.user_id = this.$store.state.user_id || sessionStorage.getItem("myuid");
 
     this.getUserEquipType()
 
     this.changeEquip(0,this.equipType[0])
 
+    this.infoMap()
 
+
 
   },
 
   beforeCreate() {}, //生命周期 - 创建之前
 
   beforeMount() {}, //生命周期 - 挂载之前
 
@@ -986,6 +973,10 @@ export default {
 
     position: relative;
 
     .mapCover{
 
         height: 100%;
 
+        #map{
 
+            width: 100%;
 
+            height: 100%;
 
+        }
 
     }
 
     .mapTypebox{
 
         position: absolute;

+ 5 - 2
src/pages/plantGuard/page4.vue
Целия файл 

@@ -758,8 +758,11 @@ export default {
 
 			})
 
 	},
 
 	distribute(id, username) {
 
-		this.$store.state.allo_equip_user_id = id
 
-		this.$store.state.allo_equip_usename = username
 
+		// this.$store.state.allo_equip_user_id = id
 
+		// this.$store.state.allo_equip_usename = username
 
+      this.$store.commit('setAlloEquipUserId',id)
 
+      this.$store.commit('setAlloEquipUsename',username)
 
+
 
 		this.$router.push('page5')
 
 	},
 
 	recharge(id) {

+ 7 - 1
src/router/index.js
Целия файл 

@@ -14,7 +14,6 @@ const Index = () => import('@/components/Indexold')
 
 // --------------------------------------首页模块 --------------------------------------------------
 
 const Home01 = () => import( /* webpackChunkName: "shouye" */ '@/components/home/Home01')
 
 const Home02 = () => import( /* webpackChunkName: "shouye" */ '@/components/home/Home02')
 
-const MapView = () => import( /* webpackChunkName: "shouye" */ '@/components/home/MapView')
 
 
 // --------------------------------------个人中心 --------------------------------------------------
 
 const PersonMsg = () => import( /* webpackChunkName: "shouye" */ '@/pages/personage/personMsg')
 
@@ -144,6 +143,7 @@ const PhotoView = () => import( /* webpackChunkName: "monitor" */ '@/Pages/monit
 
 const Page9 = () => import('@/Pages/plantGuard/page9') //水价管理-地图展示
 
 const Page10 = () => import('@/Pages/plantGuard/page10') //水价管理-地图展示
 
 const Page11 = () => import('@/Pages/plantGuard/page11') //水价管理-地图展示
 
+const MapView = () => import( /* webpackChunkName: "shouye" */ '@/components/home/MapView')
 
 
 Vue.use(Router)
 
 
@@ -163,6 +163,12 @@ export default new Router({
 
       component: PlantGuard,
 
       children:[
 
         {
 
+          path: 'mapView',
 
+          name: 'MapView',
 
+          component: MapView,
 
+          meta: { title: '数据监测',order:1,navname: '项目基地', }
 
+        },
 
+        {
 
           path: 'baseAll',
 
           name: 'BaseAll',
 
           component: BaseAll,

+ 25 - 7
src/store/store.js
Целия файл 

@@ -2,6 +2,7 @@
 
 // 状态管理
 
 import Vue from 'vue';//这里为固定格式照抄
 
 import Vuex from 'vuex';//这里为固定格式照抄
 
+import createPersistedState from 'vuex-persistedstate'
 
 Vue.use(Vuex);
 
 
 const store = new Vuex.Store({
 
@@ -16,12 +17,29 @@ const store = new Vuex.Store({
 
         
     },
 
     mutations: {
 
-      increment (state) {
 
-        
-      }
 
-    }
 
+      setUserId (state,val) {
 
+        state.user_id = val;
 
+      },
 
+      setAlloEquipUserId (state,val) {
 
+        state.allo_equip_user_id = val;
 
+      },
 
+      setAlloEquipUsename (state,val) {
 
+        state.allo_equip_usename = val;
 
+      },
 
+      setCbdPhotoId (state,val) {
 
+        state.cbd_photo_id = val;
 
+      },
 
+      setCbdPhotoDid (state,val) {
 
+        state.cbd_photo_did = val;
 
+      },
 
+      setCbdPestId (state,val) {
 
+        state.cbd_pest_id = val;
 
+      },
 
+      setCbdPestDid (state,val) {
 
+        state.cbd_pest_did = val;
 
+      },
 
+    },
 
+    plugins: [createPersistedState({ storage: window.sessionStorage })]
 
 })
 
 
-export default new Vuex.Store({
 
-    store
 
-})
 
+export default store

+ 15 - 16
src/util/server.js
Целия файл 

@@ -1,19 +1,18 @@
 
 //1.定义所有环境服务器地址
 
 const server = {
 
-    pro: "http://182.92.193.64:8004", //生产环境
 
-    dev: "http://182.92.193.64:8004", //测试环境
 
-    util: "" //其他环境，可以为空，为空则适配到测试环境
 
+  pro: "http://8.136.98.49:8002", //生产环境
 
+  dev: "http://182.92.193.64:8002", //测试环境
 
+  util: "http://192.168.1.14:8002/" //其他环境，可以为空，为空则适配到测试环境
 
+}
 
+//2.获取当前访问域名，并根据域名判断当前环境，然后获取指定环境的服务器地址
 
+var DOMIN = ""; //服务端接口访问跟路径
 
+const origin = location.hostname //当前访问域名
 
+for (var i in server) {
 
+  var item = server[i]
 
+  if (item.indexOf(origin) > -1) {
 
+    DOMIN = item
 
   }
 
-  //2.获取当前访问域名，并根据域名判断当前环境，然后获取指定环境的服务器地址
 
-  var DOMIN = ""; //服务端接口访问跟路径
 
-  const origin = location.hostname //当前访问域名
 
-  for (var i in server) {
 
-    var item = server[i]
 
-    if (item.indexOf(origin) > -1) {
 
-      DOMIN = item
 
-    }
 
-  }
 
-  //3. 特殊情况处理，如果没有在server变量中匹配到具体环境，则依次读取util、dev
 
-  if (!DOMIN) DOMIN = server.util ? server.util : server.dev
 
-  export {DOMIN}
 
-  
+}
 
+//3. 特殊情况处理，如果没有在server变量中匹配到具体环境，则依次读取util、dev
 
+if (!DOMIN) DOMIN = server.util ? server.util : server.dev
 
+export {DOMIN}

BIN
static/images/1111.gif
Целия файл


BIN
static/images/projectIcon.png
Целия файл