chinese-medicine/src/views/Index/Index.vue

<!--
 * @Author: wally
 * @email: 18603454788@163.com
 * @Date: 2021-02-22 09:20:03
 * @LastEditors: wally
 * @LastEditTime: 2021-05-12 10:42:57
-->
<template>
  <div class="flex-wrap">
    <div class="fill-width mb-3 flex-wrap">
      <a-card style="width: 50%; height: 400px; float: left" title="病例统计">
        <treemap style="margin: auto" />
      </a-card>
      <a-card style="width: 50%; height: 400px; float: right" :title="hospitalId ? '生物样本统计' : '各医院生物样本统计'">
        <piemap style="margin: auto" v-if="hospitalId === ''" />
        <piemap-hos style="margin: auto" v-else />
      </a-card>
    </div>
    <div class="fill-width mb-3">
      <a-card style="width: 100%; height: 400px" :title="hospitalId ? '医生病例分析' : '各医院病例分析'">
        <categorymap v-if="hospitalId === ''" />
        <categorymap-hos v-else />
      </a-card>
    </div>
    <div class="fill-width mb-3">
      <a-card style="width: 100%; height: 400px" title="每日病例统计">
        <cisualmap />
      </a-card>
    </div>
  </div>
</template>

<script>
import Treemap from 'components/Echarts/Treemap.vue';
import Cisualmap from 'components/Echarts/Cisualmap.vue';
import Categorymap from 'components/Echarts/Categorymap.vue';
import CategorymapHos from 'components/Echarts/CategorymapHos.vue';
import Piemap from 'components/Echarts/Piemap.vue';
import PiemapHos from 'components/Echarts/PiemapHos.vue';
import { mapState } from 'vuex';
export default {
  name: 'Index',
  components: { Treemap, Cisualmap, Categorymap, Piemap, PiemapHos, CategorymapHos },
  data() {
    return {
      str: '',
      showVideo: false,
    };
  },
  computed: mapState('home', ['hospitalId']),
  methods: {},
};
</script>

<style lang="stylus" scoped></style>