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" background-color="#409eff" text-color="#fff" active-text-color="#fff">
              <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-col :span="4" class="dataList">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="数据列表" name="first">
                <first :firstList="firstList" :total="firstTotal" @tabBtn="tabBtn"></first>
              </el-tab-pane>
              <el-tab-pane label="国家级" name="second">
                <first :firstList="secondList" :total="secondTotal" @tabBtn="tabBtn"></first>
              </el-tab-pane>
              <el-tab-pane label="省级" name="third">
                <first :firstList="thirdList" :total="thirdTotal" @tabBtn="tabBtn"></first>
              </el-tab-pane>
              <el-tab-pane label="科技部 吉林省共建" name="fourth">
                <first :firstList="fourthList" :total="fourthTotal" @tabBtn="tabBtn"></first>
              </el-tab-pane>
            </el-tabs>
          </el-col>
          <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.address || '暂无' }}</el-col>
                <el-col :span="24">简介:{{ windowInfo.introduction || '暂无' }}</el-col>
              </el-row>
            </el-amap-info-window>
          </el-amap>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import first from './parts/first.vue';
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: {
    first,
  },
  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,
      activeName: 'first',
      // 数据列表
      firstList: [],
      firstTotal: 0,
      // 国家级
      secondList: [],
      secondTotal: 0,
      // 省级
      thirdList: [],
      thirdTotal: 0,
      // 科技部
      fourthList: [],
      fourthTotal: 0,
    };
  },
  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 introduction = _.get(place, 'introduction');
      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}`,
        introduction: `${introduction}`,
        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) {
      const r = this.markers.find(f => _.isEqual(f.position, posi));
      // 设置窗口信息,自定义.反正在slot里的字段对上
      const info = {
        title: r.title,
        address: r.address,
        introduction: r.introduction,
      };
      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);
        }
        this.$set(this, `firstList`, this.kjbm);
        this.$set(this, `firstTotal`, this.kjbm.length);
      } else if (index === '2-1') {
        for (const i of this.kyys) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.kyys);
        this.$set(this, `firstTotal`, this.kyys.length);
      } else if (index === '3-1') {
        for (const i of this.dzyx) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.dzyx);
        this.$set(this, `firstTotal`, this.dzyx.length);
      } else if (index === '4-1') {
        let data = this.gxjsqy.filter(i => i.ing != '' && i.lat != '');
        for (const i of data) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.gxjsqy);
        this.$set(this, `firstTotal`, this.gxjsqy.length);
      } else if (index === '4-2') {
        let data = this.cxxqy.filter(i => i.ing != '' && i.lat != '');
        for (const i of data) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.cxxqy);
        this.$set(this, `firstTotal`, this.cxxqy.length);
      } else if (index === '5-1') {
        for (const i of this.zdsys) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.zdsys);
        this.$set(this, `firstTotal`, this.zdsys.length);
      } else if (index === '5-2') {
        let data = this.gcjsyjzx.filter(i => i.ing != '' && i.lat != '');
        for (const i of data) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.gcjsyjzx);
        this.$set(this, `firstTotal`, this.gcjsyjzx.length);
      } else if (index === '5-3') {
        for (const i of this.dxkjy) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.dxkjy);
        this.$set(this, `firstTotal`, this.dxkjy.length);
      } else if (index === '5-4') {
        let data = this.kjqyfhq.filter(i => i.ing != '' && i.lat != '');
        for (const i of data) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.kjqyfhq);
        this.$set(this, `firstTotal`, this.kjqyfhq.length);
      } else if (index === '5-5') {
        for (const i of this.cyhjd) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.cyhjd);
        this.$set(this, `firstTotal`, this.cyhjd.length);
      } else if (index === '5-6') {
        for (const i of this.jszysfjg) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.jszysfjg);
        this.$set(this, `firstTotal`, this.jszysfjg.length);
      } else if (index === '5-7') {
        for (const i of this.kjhzjd) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.kjhzjd);
        this.$set(this, `firstTotal`, this.kjhzjd.length);
      } else if (index === '5-8') {
        let data = this.ysgzz.filter(i => i.ing != '' && i.lat != '');
        for (const i of data) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.ysgzz);
        this.$set(this, `firstTotal`, this.ysgzz.length);
      } else if (index === '5-9') {
        let data = this.jscxlm.filter(i => i.ing != '' && i.lat != '');
        for (const i of data) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.jscxlm);
        this.$set(this, `firstTotal`, this.jscxlm.length);
      } else if (index === '5-10') {
        for (const i of this.kjcxzx) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.kjcxzx);
        this.$set(this, `firstTotal`, this.kjcxzx.length);
      } else if (index === '5-11') {
        let data = this.kjcgzhzszx.filter(i => i.ing != '' && i.lat != '');
        for (const i of data) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.kjcgzhzszx);
        this.$set(this, `firstTotal`, this.kjcgzhzszx.length);
      } else if (index === '6-1') {
        let data = this.sccjzx.filter(i => i.ing != '' && i.lat != '');
        for (const i of data) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.sccjzx);
        this.$set(this, `firstTotal`, this.sccjzx.length);
      } else if (index === '6-2') {
        for (const i of this.jshtdjd) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.jshtdjd);
        this.$set(this, `firstTotal`, this.jshtdjd.length);
      } else if (index === '6-3') {
        for (const i of this.jsdsc) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.jsdsc);
        this.$set(this, `firstTotal`, this.jsdsc.length);
      } else if (index === '6-4') {
        for (const i of this.kjcgpjsd) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.kjcgpjsd);
        this.$set(this, `firstTotal`, this.kjcgpjsd.length);
      } else if (index === '7-1') {
        for (const i of this.zdxm) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.zdxm);
        this.$set(this, `firstTotal`, this.zdxm.length);
      } else if (index === '8-1') {
        for (const i of this.kjjl) {
          this.setMark(i);
        }
        this.$set(this, `firstList`, this.kjjl);
        this.$set(this, `firstTotal`, this.kjjl.length);
      }
    },
    // 点击小分类
    handleClick(tab, event) {
      if (tab.index == '1') {
        let data = local.filter(i => i.xtype == '1');
        if (data) this.$set(this, `secondList`, data);
        this.$set(this, `secondTotal`, data.length);
      } else if (tab.index == '2') {
        let data = local.filter(i => i.xtype == '2');
        if (data) this.$set(this, `thirdList`, data);
        this.$set(this, `thirdTotal`, data.length);
      } else if (tab.index == '3') {
        let data = local.filter(i => i.xtype == '3');
        if (data) this.$set(this, `fourthList`, data);
        this.$set(this, `fourthTotal`, data.length);
      }
    },
    tabBtn(data) {
      let datas = [data];
      this.onSearchResult(datas);
    },
  },
  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;
}
/deep/.el-menu-item.is-active {
  background: #377ecc !important;
}
/deep/.el-submenu__title i {
  color: #fff;
}
.dataList {
  position: absolute;
  top: 75px;
  right: 20px;
  width: 19%;
  z-index: 1;
  min-height: 870px;
  background: #fff;
}
</style>