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 :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 class="d-flex flex-row flex-wrap">
        <div
          :class="(index + 1) % 3 === 0 ? 'mr0' : ''"
          :key="index"
          class="pic-box pb-10"
          v-for="(item,index) in list"
        >
          <div class="pic d-flex align-center justify-center">
            <img :src="item.url" class="fill-width fill-height" />
            <span class="font-bold-18 white--text">{{ item.title }}</span>
          </div>
          <div class="pic-introduce d-flex justify-center flex-column px-5">{{ item.introduce }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '@/common/platform.styl';
import LeftNav from './../components/LeftNav.vue';

export default {
  name: 'Institute',
  components: { LeftNav },
  data() {
    return {
      title: '服务超市-智慧创新研究院',
      title1: '创新平台-组织机构',
      typeOfPlatform: '服务超市',
      list: [
        {
          id: 1,
          title: '服务1',
          introduce: '研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系',
          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
        },
        {
          id: 2,
          title: '服务1',
          introduce: '研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系',
          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
        },
        {
          id: 3,
          title: '服务1',
          introduce: '研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系',
          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
        },
        {
          id: 4,
          title: '服务1',
          introduce: '研究院的介绍包含研究院，公司架构，和各中心的介绍。各中心介绍包含科创体系',
          url: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
        },
      ],
      treedata: [
        {
          //一定一定要注意这里有[]
          name: '协同创新中心',
          children: [
            {
              name: '功能食品协同创新平台',
              children: [
                { name: '功能食品资源开发' },
                { name: '营养健康功能因子分再鉴定及作用机制探究' },
                { name: '功能食品关键加工技术研发' },
                { name: '功能食品安全评价与风险监测' },
              ],
            },
            {
              name: '现代医药协同创新平台',
              children: [
                { name: '中医药与天然药物资源开发利用' },
                { name: '医药生物技术' },
                { name: '新药研发' },
                { name: '药理药效研究与安全评价' },
              ],
            },
            {
              name: '生物医学工程协同创新平台',
              children: [{ name: '生物信息技术' }, { name: '生物医学工程研发' }, { name: '生物力学和生物材料' }],
            },
            {
              name: '数字健康开发协同创新平台',
              children: [{ name: '健康医疗大数据挖掘与分析' }, { name: '基于纳米传感器的医疗健康' }, { name: '传染病预测预鉴数字技术' }],
            },
            { name: '科技资源共享服务平台' },
            { name: '知识产权与技术转移转化服务平台' },
            { name: '创新服务' },
          ],
        },
      ],
    };
  },
  mounted() {
    this.showChart();
  },
  methods: {
    showChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('treeChart'));
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
        },
        series: [
          {
            type: 'tree',
            data: this.treedata,
            top: '2%',
            left: '12%',
            bottom: '1%',
            right: '36%',
            symbolSize: 7,
            lineStyle: { width: 4 },
            itemStyle: { borderWidth: 3, borderColor: '#E77816' },
            label: { position: 'left', verticalAlign: 'middle', align: 'right', fontSize: 16 },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left',
              },
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

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

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

    span {
      position: absolute;
    }
  }

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