web-website/src/views/resource/resource.vue

<template>
  <div id="resource">
    <el-row>
      <el-col :span="24">
        <div id="container">
          <!-- 自定义列表 -->
          <div style="width:220px" class="menus">
            <el-menu @select="typeSelect">
              <el-submenu index="1">
                <template #title>
                  <span>科技部门</span>
                </template>
                <el-menu-item index="1-1">科技部门</el-menu-item>
              </el-submenu>
              <el-submenu index="2">
                <template #title>
                  <span>科研院所</span>
                </template>
                <el-menu-item index="2-1">科研院所</el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <template #title>
                  <span>大专院校</span>
                </template>
                <el-menu-item index="3-1">大专院校</el-menu-item>
              </el-submenu>
              <el-submenu index="4">
                <template #title>
                  <span>科技企业</span>
                </template>
                <el-menu-item index="4-1">高新技术企业</el-menu-item>
                <el-menu-item index="4-2">创新型企业</el-menu-item>
              </el-submenu>
              <el-submenu index="5">
                <template #title>
                  <span>条件平台</span>
                </template>
                <el-menu-item index="5-1">重点实验室</el-menu-item>
                <el-menu-item index="5-2">工程技术研究中心</el-menu-item>
                <el-menu-item index="5-3">大学科技园</el-menu-item>
                <el-menu-item index="5-4">科技企业孵化器</el-menu-item>
                <el-menu-item index="5-5">产业化基地</el-menu-item>
                <el-menu-item index="5-6">技术转移示范机构</el-menu-item>
                <el-menu-item index="5-7">科技合作基地</el-menu-item>
                <el-menu-item index="5-8">院士工作站</el-menu-item>
                <el-menu-item index="5-9">技术创新联盟</el-menu-item>
                <el-menu-item index="5-10">科技创新中心</el-menu-item>
                <el-menu-item index="5-11">科技成果转化中试中心</el-menu-item>
              </el-submenu>
              <el-submenu index="6">
                <template #title>
                  <span>服务机构(科技)</span>
                </template>
                <el-menu-item index="6-1">生产力促进中心</el-menu-item>
                <el-menu-item index="6-2">技术合同登记点</el-menu-item>
                <el-menu-item index="6-3">技术大市场</el-menu-item>
                <el-menu-item index="6-4">科技成功评价试点</el-menu-item>
              </el-submenu>
              <el-submenu index="7">
                <template #title>
                  <span>重大项目</span>
                </template>
                <el-menu-item index="7-1">重大项目</el-menu-item>
              </el-submenu>
              <el-submenu index="8">
                <template #title>
                  <span>科技奖励</span>
                </template>
                <el-menu-item index="8-1">科技奖励</el-menu-item>
              </el-submenu>
            </el-menu>
          </div>
          <!-- 搜索框 -->
          <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
          <el-amap class="amap-box" :vid="'amap-vue'" :zoom="zoom" :center="center" :plugin="plugin">
            <!-- mark上方文字 -->
            <el-amap-text v-for="(t, index) in marktext" :key="`text${index}`" :text="t.text" :offset="[0, -50]" :position="t.position"></el-amap-text>
            <!-- 标记 -->
            <el-amap-marker
              v-for="(i, index) in markers"
              :key="`mark${index}`"
              :position="i.position"
              :events="i.events"
              :title="i.title"
              :address="i.address"
              :vid="index"
            ></el-amap-marker>
            <!-- 信息框体 -->
            <el-amap-info-window :position="window.position" :visible="window.visible" :events="window.events" :autoMove="true">
              <el-row>
                <el-col :span="24">
                  <el-link type="primary">标题:{{ windowInfo.title }}</el-link>
                </el-col>
                <el-col :span="24">电话:{{ windowInfo.tel }}</el-col>
                <el-col :span="24">地址:{{ windowInfo.address }}</el-col>
              </el-row>
            </el-amap-info-window>
          </el-amap>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { local } from '@/util/local';
import {
  kjbm,
  kyys,
  dzyx,
  gxjsqy,
  cxxqy,
  zdsys,
  gcjsyjzx,
  dxkjy,
  kjqyfhq,
  cyhjd,
  jszysfjg,
  kjhzjd,
  ysgzz,
  jscxlm,
  kjcxzx,
  kjcgzhzszx,
  sccjzx,
  jshtdjd,
  jsdsc,
  kjcgpjsd,
  zdxm,
  kjjl,
} from '@/util/kjbm';

const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
import VueAMap from 'vue-amap';
import Vue from 'vue';
Vue.use(VueAMap);
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'resource',
  props: {},
  components: {},
  data: function() {
    return {
      zoom: '17',
      center: [125.291162, 43.838597], //初始定位到中心
      // 标记点列表
      markers: [],
      // 标记点提示
      marktext: [],
      // 窗体信息
      window: {
        position: [125.291162, 43.838597],
        visible: false,
      },
      windowInfo: {},
      // 搜索框
      searchOption: {
        city: '长春',
        citylimit: true,
      },
      // 插件
      plugin: [
        {
          pName: 'Scale',
          events: {
            init(instance) {},
          },
        },
      ],
      // 1科技部门-kjbm
      kjbm: kjbm,
      // 2科研院所-kyys
      kyys: kyys,
      // 3大专院校-dzyx
      dzyx: dzyx,
      // 科技企业
      //    4高新技术企业-gxjsqy
      gxjsqy: gxjsqy,
      //    5创新型企业-cxxqy
      cxxqy: cxxqy,
      // 条件平台
      //    7重点实验室-zdsys
      zdsys: zdsys,
      //    8工程技术研究中心-gcjsyjzx
      gcjsyjzx: gcjsyjzx,
      //    9大学科技园-dxkjy
      dxkjy: dxkjy,
      //    10科技企业孵化器-,kjqyfhq
      kjqyfhq: kjqyfhq,
      //    11产品化基地-,cyhjd
      cyhjd: cyhjd,
      //    12技术转移示范机构-,jszysfjg
      jszysfjg: jszysfjg,
      //    13科技合作基地-,kjhzjd
      kjhzjd: kjhzjd,
      //    14院士工作站-,ysgzz
      ysgzz: ysgzz,
      //    15技术创新联盟-,jscxlm
      jscxlm: jscxlm,
      //    16科技创新中心-,kjcxzx
      kjcxzx: kjcxzx,
      //    17科技成果转化中试中心-,kjcgzhzszx
      kjcgzhzszx: kjcgzhzszx,
      // 服务机构（科技）
      //    18生产促进中心-,sccjzx
      sccjzx: sccjzx,
      //    19技术合同登记点-,jshtdjd
      jshtdjd: jshtdjd,
      //    20技术大市场-,jsdsc
      jsdsc: jsdsc,
      //    21科技成功评价试点-,kjcgpjsd
      kjcgpjsd: kjcgpjsd,
      // 22重大项目-,zdxm
      zdxm: zdxm,
      // 23科技奖励-,kjjl
      kjjl: kjjl,
    };
  },
  created() {
    this.handlemyMapFn();
  },
  methods: {
    // 搜索框回调
    onSearchResult(pois) {
      let latSum = 0;
      let lngSum = 0;
      if (pois.length > 0) {
        // 只处理第一个结果了
        const r = this.setMark(_.head(pois));
        const { position } = r;
        this.center = position;
      }
    },
    // 添加标记
    setMark(place) {
      let name = _.get(place, 'name');
      let tel = _.get(place, 'tel');
      let address = _.get(place, 'address');
      let lng = _.get(place, 'lng');
      let lat = _.get(place, 'lat');
      let position = [lng, lat];
      let obj = {
        position: position,
        events: {
          click: () => {
            this.markClick(position);
          },
        },
        title: `${name}`,
        tel: `${tel}`,
        address: `${address}`,
        label: { content: 'lable', offset: [3, 3] },
        desc: 'abc',
      };
      let text = {
        position: position,
        text: name,
      };
      let isDiff = this.markers.find(f => _.isEqual(f.position, position));
      if (!isDiff) {
        this.markers.push(obj);
        this.marktext.push(text);
      }
      return obj;
    },
    // 初始化地图
    handlemyMapFn() {
      VueAMap.initAMapApiLoader({
        key: '47947a002b2cddf99df02a1a5b1bc198',
        plugin: [
          'AMap.PolyEditor', //编辑 折线多，边形
          'AMap.PlaceSearch', // 查询
          'AMap.Autocomplete',
          'AMap.Scale',
          'AMap.OverView',
          'AMap.ToolBar',
          'AMap.MapType',
          'AMap.PolyEditor',
          'AMap.CircleEditor',
        ], // 默认高德 sdk 版本为 1.4.4
        v: '1.4.4',
      });
    },
    // 标记点击
    markClick(posi) {
      console.log(this.markers);
      const r = this.markers.find(f => _.isEqual(f.position, posi));
      console.log(r);
      // 设置窗口信息,自定义.反正在slot里的字段对上
      const info = {
        title: r.title,
        address: r.address,
        tel: r.tel,
      };
      this.$set(this, `windowInfo`, info);
      // 设置窗口信息
      const obj = {
        position: r.position,
        visible: true,
        events: {
          close: () => {
            // 初始化
            this.$set(this, `window`, { position: [125.291162, 43.838597], visible: false });
          },
        },
      };
      this.$set(this, `window`, obj);
    },
    // 点击导航菜单
    typeSelect(index) {
      this.$set(this, `markers`, []);
      this.$set(this, `marktext`, []);
      if (index === '1-1') {
        for (const i of this.kjbm) {
          this.setMark(i);
        }
      } else if (index === '2-1') {
        for (const i of this.kyys) {
          this.setMark(i);
        }
      } else if (index === '3-1') {
        for (const i of this.dzyx) {
          this.setMark(i);
        }
      } else if (index === '4-1') {
        let data = this.gxjsqy.filter(i => i.ing != '' && i.lat != '');
        for (const i of data) {
          this.setMark(i);
        }
      } else if (index === '4-2') {
        let data = this.cxxqy.filter(i => i.ing != '' && i.lat != '');
        for (const i of data) {
          this.setMark(i);
        }
      } else if (index === '5-1') {
        for (const i of this.zdsys) {
          this.setMark(i);
        }
      } else if (index === '5-2') {
        let data = this.gcjsyjzx.filter(i => i.ing != '' && i.lat != '');
        for (const i of data) {
          this.setMark(i);
        }
      } else if (index === '5-3') {
        for (const i of this.dxkjy) {
          this.setMark(i);
        }
      } else if (index === '5-4') {
        let data = this.kjqyfhq.filter(i => i.ing != '' && i.lat != '');
        for (const i of data) {
          this.setMark(i);
        }
      } else if (index === '5-5') {
        for (const i of this.cyhjd) {
          this.setMark(i);
        }
      } else if (index === '5-6') {
        for (const i of this.jszysfjg) {
          this.setMark(i);
        }
      } else if (index === '5-7') {
        for (const i of this.kjhzjd) {
          this.setMark(i);
        }
      } else if (index === '5-8') {
        let data = this.ysgzz.filter(i => i.ing != '' && i.lat != '');
        for (const i of data) {
          this.setMark(i);
        }
      } else if (index === '5-9') {
        let data = this.jscxlm.filter(i => i.ing != '' && i.lat != '');
        for (const i of data) {
          this.setMark(i);
        }
      } else if (index === '5-10') {
        for (const i of this.kjcxzx) {
          this.setMark(i);
        }
      } else if (index === '5-11') {
        let data = this.kjcgzhzszx.filter(i => i.ing != '' && i.lat != '');
        for (const i of data) {
          this.setMark(i);
        }
      } else if (index === '6-1') {
        let data = this.sccjzx.filter(i => i.ing != '' && i.lat != '');
        for (const i of data) {
          this.setMark(i);
        }
      } else if (index === '6-2') {
        for (const i of this.jshtdjd) {
          this.setMark(i);
        }
      } else if (index === '6-3') {
        for (const i of this.jsdsc) {
          this.setMark(i);
        }
      } else if (index === '6-4') {
        for (const i of this.kjcgpjsd) {
          this.setMark(i);
        }
      } else if (index === '7-1') {
        for (const i of this.zdxm) {
          this.setMark(i);
        }
      } else if (index === '8-1') {
        for (const i of this.kjjl) {
          this.setMark(i);
        }
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 100vh;
}
.search-box {
  position: absolute;
  top: 25px;
  right: 20px;
}
.menus {
  position: absolute;
  top: 25px;
  left: 20px;
  z-index: 200;
}
</style>