wiki/src/views/ServiceMarket/Children/Institute.vue

<template>
  <div>
    <!-- 公司介绍 -->
    <div class="d-flex flex-nowrap inner">
      <left-nav />
      <div class="flex-1">
        <div class="px-3 py-10">
          <div class="d-flex flex-row fill-width justify-center py-10">
            <img src="~assets/fwcs01.png" />
          </div>
          <div>
            <div class="font-16 textColor line-height-36">
              山西智汇协同创新研究院有限公司是维基智汇科技有限公司旗下，集创新创业咨询服务和协同创新为一体的新型研发机构。
              研究院秉承“创新、开放、协作、共赢”的发展理念，坚持专业化、高端化、市场化、国际化发展路线，立足新科技革命和产业发展前沿，
              聚焦创新创业发展需求，以为不同创新主体提供定制化科创整体解决方案为核心，以数智网络平台、战略合作平台和知识培训平台为支撑，
              以资源整合和协同创新研究为引擎，致力打造共融共生、共创共享的全链条一体化开放式创新创业咨询服务体系，构筑创新创业生态系统。
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 公司架构 -->
    <div class="white">
      <div class="d-flex flex-nowrap inner">
        <div style="width: 17%"></div>
        <div class="flex-1">
          <div class="px-3 py-10">
            <div class="d-flex flex-row fill-width justify-center py-10">
              <img src="~assets/fwcs02.png" />
            </div>
            <div>
              <div class="font-16 textColor line-height-36">
                研究院下没六个咨询服务中心和一个专家委员会：科创体系与科创能力咨询服务中心、知识产权与技术转移咨询服务中心、数字化转型咨询服务中心、科技信息咨询服务中心、科创战略协同研究中心、山西奥依工业设计咨询服务中心。
              </div>
              <div class="font-16 textColor line-height-36">
                以中心为主体，以团队为单元，以平台为支撑，围绕创新创业发展需求，整合各类优质资源，打造全链条一体化开放式创新创业新生态。
              </div>
              <div :style="{ height: '500px' }" id="treeChart"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 中心介绍 -->
    <div class="d-flex flex-nowrap inner">
      <div style="width: 17%"></div>
      <div class="flex-1 flex-row fill-width justify-center pt-10">
        <div class="px-3 py-10">
          <img src="~assets/fwcs03.png" />
        </div>
      </div>
    </div>
    <div class="inner pb-10">
      <div v-if="partners && partners.length > 0">
        <div :key="i" v-for="(list, i) in partners">
          <div class="d-flex flex-row flex-wrap" v-if="list.backendSearchList && list.backendSearchList.length > 0">
            <div
              :class="(index + 1) % 3 === 0 ? 'mr0' : ''"
              :key="index"
              class="pic-box pb-10"
              v-for="(item, index) in list.backendSearchList"
            >
              <div class="pic d-flex align-center justify-center">
                <img :src="item.logoUrl" class="fill-width fill-height" />
                <span class="font-bold-18 white--text">{{ item.name }}</span>
              </div>
              <div class="pic-introduce d-flex justify-start flex-column pa-3 px-5">{{ item.description }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import '@/common/platform.styl';
import LeftNav from './../components/LeftNav.vue';

export default {
  name: 'Institute',
  components: { LeftNav },
  data() {
    return {
      title: '中心介绍',
      typeOfPlatform: '研究院',
      treedata: [
        {
          //一定一定要注意这里有[]
          name: '山西智汇协同创新研究院有限公司',
          children: [
            { name: '三大平台', children: [{ name: '数智网络平台' }, { name: '战略合作平台' }, { name: '知识培训平台' }] },
            { name: '专家委员会' },
            {
              name: '咨询服务中心',
              children: [
                { name: '科创体系与科创能力咨询服务中心' },
                { name: '知识产权与技术转移咨询服务中心' },
                { name: '数字化转型咨询服务中心' },
                { name: '科技信息咨询服务中心' },
                { name: '科创战略协同研究中心' },
                { name: '山西奥依工业设计咨询服务中心' },
              ],
            },
          ],
        },
      ],
    };
  },

  computed: mapState('home', ['partners']),

  async created() {
    this.setPartners([]);
    const { title, typeOfPlatform } = this;
    console.log('title, typeOfPlatform : ', title, typeOfPlatform);
    const params = {
      param: {
        pageNum: 1,
        // pageSize: -1,
        type: title === '中心介绍' ? 0 : title === '合作伙伴' ? 1 : 2,
        typeOfPlatform: typeOfPlatform === '研究院' ? 0 : typeOfPlatform === '孵化平台' ? 1 : 2,
      },
    };
    console.log('params: ', params);
    await this.getFrontSearchCompany(params);
  },

  mounted() {
    this.showChart();
  },

  methods: {
    ...mapMutations('home', ['setPartners', 'setProfile']),
    ...mapActions('home', ['getFrontSearchCompany']),
    showChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('treeChart'));
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
        },
        series: [
          {
            type: 'tree',
            data: this.treedata,
            left: '30%',
            right: '2%',
            top: '8%',
            bottom: '2%',
            symbol: 'emptyCircle',
            symbolSize: 7,
            lineStyle: { width: 4 },
            itemStyle: { borderWidth: 3, borderColor: '#E77816' },
            label: { position: 'left', verticalAlign: 'middle', align: 'right', fontSize: 16 },
            leaves: {
              label: {
                position: 'top',
                verticalAlign: 'middle',
                align: 'right',
              },
            },
            expandAndCollapse: true,
            animationDurationUpdate: 750,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="stylus" scoped>
.pic-box {
  width: 32%;
  margin-right: 2%;

  .pic {
    width: 100%;
    height: 230px;
    position: relative;

    span {
      position: absolute;
    }
  }

  .pic-introduce {
    width: 100%;
    height: 110px;
    background: #EBEBEB;
  }
}
</style>