fix:isAdmin
This commit is contained in:
		
							parent
							
								
									7c2330039f
								
							
						
					
					
						commit
						81479c1a6b
					
				@ -15,6 +15,6 @@ const getters = {
 | 
			
		||||
  topbarRouters: (state) => state.permission.topbarRouters,
 | 
			
		||||
  defaultRoutes: (state) => state.permission.defaultRoutes,
 | 
			
		||||
  sidebarRouters: (state) => state.permission.sidebarRouters,
 | 
			
		||||
  isAdmin: (state) => (state.user.roles.includes('admin') || state.user.roles.includes('tenantadmin') ? true : false),
 | 
			
		||||
  // isAdmin: (state) => (state.user.roles.includes('admin') || state.user.roles.includes('tenantadmin') ? true : false),
 | 
			
		||||
};
 | 
			
		||||
export default getters;
 | 
			
		||||
 | 
			
		||||
@ -1,5 +1,5 @@
 | 
			
		||||
import Vue from 'vue';
 | 
			
		||||
let color = Vue.prototype.$colorList;
 | 
			
		||||
const color = Vue.prototype.$colorList;
 | 
			
		||||
export function pie(option, unit = '%') {
 | 
			
		||||
  return {
 | 
			
		||||
    color: color,
 | 
			
		||||
@ -146,19 +146,19 @@ export function barColumn(option, unit = '个') {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function autoHover(myChart, option, time) {
 | 
			
		||||
  let app = {
 | 
			
		||||
  const app = {
 | 
			
		||||
    currentIndex: -1,
 | 
			
		||||
  };
 | 
			
		||||
  var timeTicket = setInterval(function () {
 | 
			
		||||
    let dataLen = option.series[0].data.length;
 | 
			
		||||
    const dataLen = option.series[0].data.length;
 | 
			
		||||
    // 取消之前高亮的图形
 | 
			
		||||
    myChart.dispatchAction({
 | 
			
		||||
      type: 'downplay',
 | 
			
		||||
      seriesIndex: 0, //要展示的series数据索引
 | 
			
		||||
      seriesIndex: 0, // 要展示的series数据索引
 | 
			
		||||
      dataIndex: app.currentIndex,
 | 
			
		||||
    });
 | 
			
		||||
    app.currentIndex = (app.currentIndex + 1) % dataLen;
 | 
			
		||||
    //console.log(app.currentIndex);
 | 
			
		||||
    // console.log(app.currentIndex);
 | 
			
		||||
    // 高亮当前图形
 | 
			
		||||
    myChart.dispatchAction({
 | 
			
		||||
      type: 'highlight',
 | 
			
		||||
@ -174,7 +174,7 @@ export function autoHover(myChart, option, time) {
 | 
			
		||||
  }, time);
 | 
			
		||||
 | 
			
		||||
  myChart.on('mouseover', function (params) {
 | 
			
		||||
    //停止并显示当前的高亮和tooltip
 | 
			
		||||
    // 停止并显示当前的高亮和tooltip
 | 
			
		||||
    clearInterval(timeTicket);
 | 
			
		||||
    myChart.dispatchAction({
 | 
			
		||||
      type: 'downplay',
 | 
			
		||||
@ -195,7 +195,7 @@ export function autoHover(myChart, option, time) {
 | 
			
		||||
  myChart.on('mouseout', function () {
 | 
			
		||||
    timeTicket && clearInterval(timeTicket);
 | 
			
		||||
    timeTicket = setInterval(function () {
 | 
			
		||||
      let dataLen = option.series[0].data.length;
 | 
			
		||||
      const dataLen = option.series[0].data.length;
 | 
			
		||||
      // 取消之前高亮的图形
 | 
			
		||||
      myChart.dispatchAction({
 | 
			
		||||
        type: 'downplay',
 | 
			
		||||
@ -203,7 +203,7 @@ export function autoHover(myChart, option, time) {
 | 
			
		||||
        dataIndex: app.currentIndex,
 | 
			
		||||
      });
 | 
			
		||||
      app.currentIndex = (app.currentIndex + 1) % dataLen;
 | 
			
		||||
      //console.log(app.currentIndex);
 | 
			
		||||
      // console.log(app.currentIndex);
 | 
			
		||||
      // 高亮当前图形
 | 
			
		||||
      myChart.dispatchAction({
 | 
			
		||||
        type: 'highlight',
 | 
			
		||||
 | 
			
		||||
@ -1,9 +1,9 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="dataScreen-container" :style="{ width: `${style.width}px`, height: `${style.height}px`, transform: `${style.transform}` }">
 | 
			
		||||
    <div class="boxTop">
 | 
			
		||||
      <img src="./img/leftTitle.png" alt="" class="img1" />
 | 
			
		||||
      <img src="./img/leftTitle.png" alt="" class="img1">
 | 
			
		||||
      <div class="boxTopRight">
 | 
			
		||||
        <div class="index_animation__s5UDk"></div>
 | 
			
		||||
        <div class="index_animation__s5UDk" />
 | 
			
		||||
        <ul v-for="(item, index) in titleList" :key="index">
 | 
			
		||||
          <li
 | 
			
		||||
            :style="{
 | 
			
		||||
@ -17,18 +17,18 @@
 | 
			
		||||
        </ul>
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <component :baseId="baseId" :is="key"></component>
 | 
			
		||||
    <base-select v-model="baseId" :type="2"></base-select>
 | 
			
		||||
    <component :is="key" :base-id="baseId" />
 | 
			
		||||
    <base-select v-model="baseId" :type="2" />
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
// import './flexible'
 | 
			
		||||
import pageOne from './pageOne';
 | 
			
		||||
import pageTwo from './pageTwo';
 | 
			
		||||
import pageThree from './pageThree';
 | 
			
		||||
import pageFour from './pageFour';
 | 
			
		||||
import pageFive from './pageFive';
 | 
			
		||||
import pageOne from './pageOne'
 | 
			
		||||
import pageTwo from './pageTwo'
 | 
			
		||||
import pageThree from './pageThree'
 | 
			
		||||
import pageFour from './pageFour'
 | 
			
		||||
import pageFive from './pageFive'
 | 
			
		||||
export default {
 | 
			
		||||
  name: '',
 | 
			
		||||
  components: {
 | 
			
		||||
@ -36,14 +36,14 @@ export default {
 | 
			
		||||
    pageTwo,
 | 
			
		||||
    pageThree,
 | 
			
		||||
    pageFour,
 | 
			
		||||
    pageFive,
 | 
			
		||||
    pageFive
 | 
			
		||||
  },
 | 
			
		||||
  provide() {
 | 
			
		||||
    return {
 | 
			
		||||
      getType: () => this.key,
 | 
			
		||||
      getX: () => this.scale.x,
 | 
			
		||||
      getY: () => this.scale.y,
 | 
			
		||||
    };
 | 
			
		||||
      getY: () => this.scale.y
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
@ -53,48 +53,48 @@ export default {
 | 
			
		||||
        { name: '科技支撑', type: 'pageTwo' },
 | 
			
		||||
        { name: '产业基地', type: 'pageThree' },
 | 
			
		||||
        { name: '全维监测', type: 'pageFour' },
 | 
			
		||||
        { name: '朔源追朔', type: 'pageFive' },
 | 
			
		||||
        { name: '朔源追朔', type: 'pageFive' }
 | 
			
		||||
      ],
 | 
			
		||||
      titleImg1: require('./img/1.png'),
 | 
			
		||||
      titleImg2: require('./img/2.png'),
 | 
			
		||||
      style: {
 | 
			
		||||
        width: '1920',
 | 
			
		||||
        height: '1080',
 | 
			
		||||
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)',
 | 
			
		||||
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
 | 
			
		||||
      },
 | 
			
		||||
      current: 0,
 | 
			
		||||
      key: 'pageOne',
 | 
			
		||||
      scale: {},
 | 
			
		||||
    };
 | 
			
		||||
      scale: {}
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  mounted() {
 | 
			
		||||
    this.setScale();
 | 
			
		||||
    /*窗口改变事件*/
 | 
			
		||||
    this.setScale()
 | 
			
		||||
    /* 窗口改变事件*/
 | 
			
		||||
    window.onresize = () => {
 | 
			
		||||
      this.setScale();
 | 
			
		||||
    };
 | 
			
		||||
      this.setScale()
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    handleTabs(item, index) {
 | 
			
		||||
      window.addEventListener('resize', () => {
 | 
			
		||||
        this.setScale();
 | 
			
		||||
      });
 | 
			
		||||
        this.setScale()
 | 
			
		||||
      })
 | 
			
		||||
      if (index != this.current) {
 | 
			
		||||
        this.current = index;
 | 
			
		||||
        this.key = item.type;
 | 
			
		||||
        this.current = index
 | 
			
		||||
        this.key = item.type
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    getScale() {
 | 
			
		||||
      const w = window.innerWidth / this.style.width;
 | 
			
		||||
      const h = window.innerHeight / this.style.height;
 | 
			
		||||
      return { x: w, y: h };
 | 
			
		||||
      const w = window.innerWidth / this.style.width
 | 
			
		||||
      const h = window.innerHeight / this.style.height
 | 
			
		||||
      return { x: w, y: h }
 | 
			
		||||
    },
 | 
			
		||||
    setScale() {
 | 
			
		||||
      this.scale = this.getScale();
 | 
			
		||||
      this.style.transform = 'scaleY(' + this.scale.y + ') scaleX(' + this.scale.x + ') translate(-50%, -50%)';
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
};
 | 
			
		||||
      this.scale = this.getScale()
 | 
			
		||||
      this.style.transform = 'scaleY(' + this.scale.y + ') scaleX(' + this.scale.x + ') translate(-50%, -50%)'
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.dataScreen-container {
 | 
			
		||||
 | 
			
		||||
@ -1,51 +1,51 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div id="screen" :style="{ 'background-image': `url(${bg})`, 'background-size': '100% 100%' }">
 | 
			
		||||
    <div
 | 
			
		||||
      id="indexMap"
 | 
			
		||||
      v-if="type == 'pageThree'"
 | 
			
		||||
      id="indexMap"
 | 
			
		||||
      v-loading="loading"
 | 
			
		||||
      element-loading-background="#263840"
 | 
			
		||||
      element-loading-text="地图加载中"
 | 
			
		||||
      element-loading-spinner="el-icon-loading"
 | 
			
		||||
      :style="{ height: '100vh', width: '100vw', transform: `${scale}` }"
 | 
			
		||||
    ></div>
 | 
			
		||||
    <div class="boxTop"></div>
 | 
			
		||||
    <div class="boxCentLeft" v-if="type != 'pageThree' && type != 'pageFive'">
 | 
			
		||||
      <slot name="one"></slot>
 | 
			
		||||
    />
 | 
			
		||||
    <div class="boxTop" />
 | 
			
		||||
    <div v-if="type != 'pageThree' && type != 'pageFive'" class="boxCentLeft">
 | 
			
		||||
      <slot name="one" />
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="boxRightTop">
 | 
			
		||||
      <div class="title">{{ title[0] }}</div>
 | 
			
		||||
      <div class="content">
 | 
			
		||||
        <slot name="two"></slot>
 | 
			
		||||
        <slot name="two" />
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="boxRightBom">
 | 
			
		||||
      <div class="title">{{ title[1] }}</div>
 | 
			
		||||
      <div class="content">
 | 
			
		||||
        <slot name="three"></slot>
 | 
			
		||||
        <slot name="three" />
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="boxBomLeft" v-if="type != 'pageFive' && type != 'pageFour'">
 | 
			
		||||
    <div v-if="type != 'pageFive' && type != 'pageFour'" class="boxBomLeft">
 | 
			
		||||
      <div class="title">{{ title[2] }}</div>
 | 
			
		||||
      <div class="content">
 | 
			
		||||
        <slot name="four"></slot>
 | 
			
		||||
        <slot name="four" />
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="boxBomCent" v-if="type != 'pageFive' && type != 'pageFour'">
 | 
			
		||||
    <div v-if="type != 'pageFive' && type != 'pageFour'" class="boxBomCent">
 | 
			
		||||
      <div class="title">{{ title[3] }}</div>
 | 
			
		||||
      <div class="content">
 | 
			
		||||
        <slot name="five"></slot>
 | 
			
		||||
        <slot name="five" />
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="boxBomRight">
 | 
			
		||||
      <div class="title">{{ title[4] }}</div>
 | 
			
		||||
      <div class="content">
 | 
			
		||||
        <slot name="six"></slot>
 | 
			
		||||
        <slot name="six" />
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
    <div class="left" v-if="type == 'pageFive' || type == 'pageFour'">
 | 
			
		||||
    <div v-if="type == 'pageFive' || type == 'pageFour'" class="left">
 | 
			
		||||
      <div class="content">
 | 
			
		||||
        <slot name="seven"></slot>
 | 
			
		||||
        <slot name="seven" />
 | 
			
		||||
      </div>
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
@ -56,13 +56,13 @@ import mapMixin from './map';
 | 
			
		||||
export default {
 | 
			
		||||
  name: '',
 | 
			
		||||
  mixins: [mapMixin],
 | 
			
		||||
  inject: ['getType', 'getX', 'getY'],
 | 
			
		||||
  props: {
 | 
			
		||||
    bg: String,
 | 
			
		||||
    title: Array,
 | 
			
		||||
    baseId: Number,
 | 
			
		||||
  },
 | 
			
		||||
  inject: ['getType', 'getX', 'getY'],
 | 
			
		||||
  //TODO:使用eventBus祖孙传参待优化
 | 
			
		||||
  // TODO:使用eventBus祖孙传参待优化
 | 
			
		||||
  computed: {
 | 
			
		||||
    type() {
 | 
			
		||||
      return this.getType();
 | 
			
		||||
 | 
			
		||||
@ -1,6 +1,6 @@
 | 
			
		||||
import { listDevice } from '@/api/iot/device';
 | 
			
		||||
import { listLand } from '@/api/agriculture/land';
 | 
			
		||||
import { getDicts } from '@/api/system/dict/data';
 | 
			
		||||
import { listDevice } from '@/api/iot/device'
 | 
			
		||||
import { listLand } from '@/api/agriculture/land'
 | 
			
		||||
import { getDicts } from '@/api/system/dict/data'
 | 
			
		||||
const mapMixin = {
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
@ -9,66 +9,66 @@ const mapMixin = {
 | 
			
		||||
      baseUrl: process.env.VUE_APP_BASE_API,
 | 
			
		||||
      loading: false,
 | 
			
		||||
      landType: [],
 | 
			
		||||
      deviceType: [],
 | 
			
		||||
    };
 | 
			
		||||
      deviceType: []
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  watch: {
 | 
			
		||||
    baseId: {
 | 
			
		||||
      handler: async function (n) {
 | 
			
		||||
      handler: async function(n) {
 | 
			
		||||
        if (n) {
 | 
			
		||||
          await this.$nextTick();
 | 
			
		||||
          await this.$nextTick()
 | 
			
		||||
          if (this.type == 'pageThree') {
 | 
			
		||||
            this.loading = true;
 | 
			
		||||
            //获去地块数据
 | 
			
		||||
            let res = await listLand({ baseId: this.baseId });
 | 
			
		||||
            this.area = res.rows;
 | 
			
		||||
            //获取设备数据
 | 
			
		||||
            let res1 = await listDevice({ baseId: this.baseId });
 | 
			
		||||
            this.loading = true
 | 
			
		||||
            // 获去地块数据
 | 
			
		||||
            const res = await listLand({ baseId: this.baseId })
 | 
			
		||||
            this.area = res.rows
 | 
			
		||||
            // 获取设备数据
 | 
			
		||||
            const res1 = await listDevice({ baseId: this.baseId })
 | 
			
		||||
            this.device = res1.rows.map((item) => ({
 | 
			
		||||
              ...item,
 | 
			
		||||
              imgUrl: item.imgUrl.split(',').length > 1 ? item.imgUrl.split(',')[1] : item.imgUrl,
 | 
			
		||||
            }));
 | 
			
		||||
            this.initMap();
 | 
			
		||||
              imgUrl: item.imgUrl.split(',').length > 1 ? item.imgUrl.split(',')[1] : item.imgUrl
 | 
			
		||||
            }))
 | 
			
		||||
            this.initMap()
 | 
			
		||||
            getDicts('agriculture_land_type').then((response) => {
 | 
			
		||||
              this.landType = response.data;
 | 
			
		||||
            });
 | 
			
		||||
              this.landType = response.data
 | 
			
		||||
            })
 | 
			
		||||
            getDicts('iot_device_status').then((response) => {
 | 
			
		||||
              this.deviceType = response.data;
 | 
			
		||||
            });
 | 
			
		||||
              this.deviceType = response.data
 | 
			
		||||
            })
 | 
			
		||||
          }
 | 
			
		||||
        }
 | 
			
		||||
      },
 | 
			
		||||
      immediate: true,
 | 
			
		||||
    },
 | 
			
		||||
      immediate: true
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  async mounted() {},
 | 
			
		||||
  methods: {
 | 
			
		||||
    /** 初始化map */
 | 
			
		||||
    async initMap() {
 | 
			
		||||
      this.map = new this.AMap.Map('indexMap', {
 | 
			
		||||
        //设置地图容器id
 | 
			
		||||
        // 设置地图容器id
 | 
			
		||||
        mapStyle: 'amap://styles/grey',
 | 
			
		||||
        zoom: 16, //初始化地图级别
 | 
			
		||||
        zoom: 16, // 初始化地图级别
 | 
			
		||||
        // center: baseCoordinate, //初始化地图中心点位置
 | 
			
		||||
        doubleClickZoom: false,
 | 
			
		||||
      });
 | 
			
		||||
      await this.createAreaPolygon();
 | 
			
		||||
      await this.createDevicePoint();
 | 
			
		||||
      this.map.setFitView();
 | 
			
		||||
        doubleClickZoom: false
 | 
			
		||||
      })
 | 
			
		||||
      await this.createAreaPolygon()
 | 
			
		||||
      await this.createDevicePoint()
 | 
			
		||||
      this.map.setFitView()
 | 
			
		||||
    },
 | 
			
		||||
    /** 绘制地块 */
 | 
			
		||||
    createAreaPolygon() {
 | 
			
		||||
      let label = [],
 | 
			
		||||
        overlayGroup = [];
 | 
			
		||||
      const label = []
 | 
			
		||||
      const overlayGroup = []
 | 
			
		||||
      this.area.forEach((item) => {
 | 
			
		||||
        if (item.landPath) {
 | 
			
		||||
          let path = [],
 | 
			
		||||
            pointList = [];
 | 
			
		||||
          const path = []
 | 
			
		||||
          const pointList = []
 | 
			
		||||
          item.landPath.split('|').forEach((point) => {
 | 
			
		||||
            path.push(new this.AMap.LngLat(point.split(',')[0], point.split(',')[1]));
 | 
			
		||||
            pointList.push([Number(point.split(',')[0]), Number(point.split(',')[1])]);
 | 
			
		||||
          });
 | 
			
		||||
          let polygon = new this.AMap.Polygon({
 | 
			
		||||
            path.push(new this.AMap.LngLat(point.split(',')[0], point.split(',')[1]))
 | 
			
		||||
            pointList.push([Number(point.split(',')[0]), Number(point.split(',')[1])])
 | 
			
		||||
          })
 | 
			
		||||
          const polygon = new this.AMap.Polygon({
 | 
			
		||||
            path: path,
 | 
			
		||||
            fillColor: item.fillColor,
 | 
			
		||||
            fillOpacity: item.fillOpacity,
 | 
			
		||||
@ -76,14 +76,14 @@ const mapMixin = {
 | 
			
		||||
            strokeWeight: item.strokeWeight,
 | 
			
		||||
            strokeOpacity: item.strokeOpacity,
 | 
			
		||||
            extData: {
 | 
			
		||||
              ...item,
 | 
			
		||||
            },
 | 
			
		||||
          });
 | 
			
		||||
              ...item
 | 
			
		||||
            }
 | 
			
		||||
          })
 | 
			
		||||
          polygon.on('click', (e) => {
 | 
			
		||||
            this.createInfoWindow(e);
 | 
			
		||||
          });
 | 
			
		||||
          overlayGroup.push(polygon);
 | 
			
		||||
          //添加地块名称
 | 
			
		||||
            this.createInfoWindow(e)
 | 
			
		||||
          })
 | 
			
		||||
          overlayGroup.push(polygon)
 | 
			
		||||
          // 添加地块名称
 | 
			
		||||
          label.push(
 | 
			
		||||
            new this.AMap.Text({
 | 
			
		||||
              text: item.landName,
 | 
			
		||||
@ -93,119 +93,119 @@ const mapMixin = {
 | 
			
		||||
                background: 'transparent',
 | 
			
		||||
                color: '#fff',
 | 
			
		||||
                border: 'none',
 | 
			
		||||
                fontSize: '16px',
 | 
			
		||||
              },
 | 
			
		||||
                fontSize: '16px'
 | 
			
		||||
              }
 | 
			
		||||
            })
 | 
			
		||||
          );
 | 
			
		||||
          )
 | 
			
		||||
        }
 | 
			
		||||
      });
 | 
			
		||||
      this.map.add(new this.AMap.OverlayGroup(label));
 | 
			
		||||
      this.map.add(new this.AMap.OverlayGroup(overlayGroup));
 | 
			
		||||
      })
 | 
			
		||||
      this.map.add(new this.AMap.OverlayGroup(label))
 | 
			
		||||
      this.map.add(new this.AMap.OverlayGroup(overlayGroup))
 | 
			
		||||
    },
 | 
			
		||||
    /**  创建设备marker点 */
 | 
			
		||||
    createDevicePoint() {
 | 
			
		||||
      let devicePointList = [];
 | 
			
		||||
      const devicePointList = []
 | 
			
		||||
      this.device.forEach((device) => {
 | 
			
		||||
        if ((device.longitude, device.latitude)) {
 | 
			
		||||
          let marker = new this.AMap.Marker({
 | 
			
		||||
          const marker = new this.AMap.Marker({
 | 
			
		||||
            icon: new this.AMap.Icon({
 | 
			
		||||
              image: this.baseUrl + device.imgUrl,
 | 
			
		||||
              imageSize: new this.AMap.Size(32, 32),
 | 
			
		||||
              imageSize: new this.AMap.Size(32, 32)
 | 
			
		||||
            }),
 | 
			
		||||
            position: [device.longitude, device.latitude],
 | 
			
		||||
            title: device.deviceName,
 | 
			
		||||
            anchor: 'bottom-center',
 | 
			
		||||
            extData: {
 | 
			
		||||
              ...device,
 | 
			
		||||
            },
 | 
			
		||||
          });
 | 
			
		||||
              ...device
 | 
			
		||||
            }
 | 
			
		||||
          })
 | 
			
		||||
          marker.on('click', (e) => {
 | 
			
		||||
            this.createInfoWindow2(e);
 | 
			
		||||
          });
 | 
			
		||||
          devicePointList.push(marker);
 | 
			
		||||
            this.createInfoWindow2(e)
 | 
			
		||||
          })
 | 
			
		||||
          devicePointList.push(marker)
 | 
			
		||||
        }
 | 
			
		||||
      });
 | 
			
		||||
      this.map.add(new this.AMap.OverlayGroup(devicePointList));
 | 
			
		||||
      this.loading = false;
 | 
			
		||||
      })
 | 
			
		||||
      this.map.add(new this.AMap.OverlayGroup(devicePointList))
 | 
			
		||||
      this.loading = false
 | 
			
		||||
    },
 | 
			
		||||
    /** 获取地块中心点 */
 | 
			
		||||
    getAreaCenter(location) {
 | 
			
		||||
      var total = location.length;
 | 
			
		||||
      var X = 0,
 | 
			
		||||
        Y = 0,
 | 
			
		||||
        Z = 0;
 | 
			
		||||
      var total = location.length
 | 
			
		||||
      var X = 0
 | 
			
		||||
      var Y = 0
 | 
			
		||||
      var Z = 0
 | 
			
		||||
      location.forEach((lnglat) => {
 | 
			
		||||
        var lng = (lnglat[0] * Math.PI) / 180;
 | 
			
		||||
        var lat = (lnglat[1] * Math.PI) / 180;
 | 
			
		||||
        var x, y, z;
 | 
			
		||||
        x = Math.cos(lat) * Math.cos(lng);
 | 
			
		||||
        y = Math.cos(lat) * Math.sin(lng);
 | 
			
		||||
        z = Math.sin(lat);
 | 
			
		||||
        X += x;
 | 
			
		||||
        Y += y;
 | 
			
		||||
        Z += z;
 | 
			
		||||
      });
 | 
			
		||||
      X = X / total;
 | 
			
		||||
      Y = Y / total;
 | 
			
		||||
      Z = Z / total;
 | 
			
		||||
        var lng = (lnglat[0] * Math.PI) / 180
 | 
			
		||||
        var lat = (lnglat[1] * Math.PI) / 180
 | 
			
		||||
        var x, y, z
 | 
			
		||||
        x = Math.cos(lat) * Math.cos(lng)
 | 
			
		||||
        y = Math.cos(lat) * Math.sin(lng)
 | 
			
		||||
        z = Math.sin(lat)
 | 
			
		||||
        X += x
 | 
			
		||||
        Y += y
 | 
			
		||||
        Z += z
 | 
			
		||||
      })
 | 
			
		||||
      X = X / total
 | 
			
		||||
      Y = Y / total
 | 
			
		||||
      Z = Z / total
 | 
			
		||||
 | 
			
		||||
      var Lng = Math.atan2(Y, X);
 | 
			
		||||
      var Hyp = Math.sqrt(X * X + Y * Y);
 | 
			
		||||
      var Lat = Math.atan2(Z, Hyp);
 | 
			
		||||
      return [parseFloat((Lng * 180) / Math.PI), parseFloat((Lat * 180) / Math.PI)];
 | 
			
		||||
      var Lng = Math.atan2(Y, X)
 | 
			
		||||
      var Hyp = Math.sqrt(X * X + Y * Y)
 | 
			
		||||
      var Lat = Math.atan2(Z, Hyp)
 | 
			
		||||
      return [parseFloat((Lng * 180) / Math.PI), parseFloat((Lat * 180) / Math.PI)]
 | 
			
		||||
    },
 | 
			
		||||
    /** 信息窗体 */
 | 
			
		||||
    createInfoWindow(e) {
 | 
			
		||||
      var info = document.createElement('div');
 | 
			
		||||
      info.className = 'InfoBox';
 | 
			
		||||
      var title = document.createElement('div');
 | 
			
		||||
      title.className = 'title';
 | 
			
		||||
      title.innerHTML = `${e.target._opts.extData.landName}`;
 | 
			
		||||
      var type = document.createElement('div');
 | 
			
		||||
      var typeName = '';
 | 
			
		||||
      var info = document.createElement('div')
 | 
			
		||||
      info.className = 'InfoBox'
 | 
			
		||||
      var title = document.createElement('div')
 | 
			
		||||
      title.className = 'title'
 | 
			
		||||
      title.innerHTML = `${e.target._opts.extData.landName}`
 | 
			
		||||
      var type = document.createElement('div')
 | 
			
		||||
      var typeName = ''
 | 
			
		||||
      this.landType.forEach((item) => {
 | 
			
		||||
        if (item.dictValue == e.target._opts.extData.landType) {
 | 
			
		||||
          typeName = item.dictLabel;
 | 
			
		||||
          typeName = item.dictLabel
 | 
			
		||||
        }
 | 
			
		||||
      });
 | 
			
		||||
      type.className = 'type';
 | 
			
		||||
      })
 | 
			
		||||
      type.className = 'type'
 | 
			
		||||
      type.innerHTML = `<div class="item">类型:<div class="tag">${typeName}</div></div>
 | 
			
		||||
                            <div class="item">面积:${e.target._opts.extData.landArea}亩</div>`;
 | 
			
		||||
      info.appendChild(title);
 | 
			
		||||
      info.appendChild(type);
 | 
			
		||||
      let infoWindow = new this.AMap.InfoWindow({
 | 
			
		||||
                            <div class="item">面积:${e.target._opts.extData.landArea}亩</div>`
 | 
			
		||||
      info.appendChild(title)
 | 
			
		||||
      info.appendChild(type)
 | 
			
		||||
      const infoWindow = new this.AMap.InfoWindow({
 | 
			
		||||
        anchor: 'bottom-center',
 | 
			
		||||
        content: info, //使用默认信息窗体框样式,显示信息内容
 | 
			
		||||
      });
 | 
			
		||||
      infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()));
 | 
			
		||||
        content: info // 使用默认信息窗体框样式,显示信息内容
 | 
			
		||||
      })
 | 
			
		||||
      infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()))
 | 
			
		||||
    },
 | 
			
		||||
    createInfoWindow2(e) {
 | 
			
		||||
      var info = document.createElement('div');
 | 
			
		||||
      info.className = 'InfoBox';
 | 
			
		||||
      var title = document.createElement('div');
 | 
			
		||||
      title.className = 'title';
 | 
			
		||||
      title.innerHTML = `${e.target._opts.extData.deviceName}`;
 | 
			
		||||
      var num = document.createElement('div');
 | 
			
		||||
      num.className = 'num';
 | 
			
		||||
      num.innerHTML = `<div>编号:${e.target._opts.extData.serialNumber}</div>`;
 | 
			
		||||
      var tips = document.createElement('div');
 | 
			
		||||
      tips.className = 'tips';
 | 
			
		||||
      var statusName = '';
 | 
			
		||||
      var info = document.createElement('div')
 | 
			
		||||
      info.className = 'InfoBox'
 | 
			
		||||
      var title = document.createElement('div')
 | 
			
		||||
      title.className = 'title'
 | 
			
		||||
      title.innerHTML = `${e.target._opts.extData.deviceName}`
 | 
			
		||||
      var num = document.createElement('div')
 | 
			
		||||
      num.className = 'num'
 | 
			
		||||
      num.innerHTML = `<div>编号:${e.target._opts.extData.serialNumber}</div>`
 | 
			
		||||
      var tips = document.createElement('div')
 | 
			
		||||
      tips.className = 'tips'
 | 
			
		||||
      var statusName = ''
 | 
			
		||||
      this.deviceType.forEach((item) => {
 | 
			
		||||
        if (item.dictValue == e.target._opts.extData.status) {
 | 
			
		||||
          statusName = item.dictLabel;
 | 
			
		||||
          statusName = item.dictLabel
 | 
			
		||||
        }
 | 
			
		||||
      });
 | 
			
		||||
      tips.innerHTML = `${statusName}`;
 | 
			
		||||
      info.appendChild(title);
 | 
			
		||||
      info.appendChild(num);
 | 
			
		||||
      info.appendChild(tips);
 | 
			
		||||
      let infoWindow = new this.AMap.InfoWindow({
 | 
			
		||||
      })
 | 
			
		||||
      tips.innerHTML = `${statusName}`
 | 
			
		||||
      info.appendChild(title)
 | 
			
		||||
      info.appendChild(num)
 | 
			
		||||
      info.appendChild(tips)
 | 
			
		||||
      const infoWindow = new this.AMap.InfoWindow({
 | 
			
		||||
        anchor: 'bottom-center',
 | 
			
		||||
        content: info, //使用默认信息窗体框样式,显示信息内容
 | 
			
		||||
      });
 | 
			
		||||
      infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()));
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
};
 | 
			
		||||
export default mapMixin;
 | 
			
		||||
        content: info // 使用默认信息窗体框样式,显示信息内容
 | 
			
		||||
      })
 | 
			
		||||
      infoWindow.open(this.map, new this.AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()))
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
export default mapMixin
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user