<template>
  <m-grid
    :template="[
      'box1 map box4',
      'box2 map box5',
      'box3 box7 box6',
    ]"
    columns="0.6fr 1fr 0.6fr"
    rows="1fr 1fr 1fr"
    gap="0.5rem"
  >
    <QualityMap area="map"/>
    <m-card area="box1" title="质量预警">
      <QualityWarning />
    </m-card>
    <m-card area="box2" title="企业占比">
      <CompanyRate />
    </m-card>
    <m-card area="box3" title="检测合格率">
      <QualifiedRate />
    </m-card>
    <m-card area="box4" title="在线会诊">
      <Online />
    </m-card>
    <m-card area="box5" title="药品流通去向">
      <MedicineFlow />
    </m-card>
    <m-card area="box6" title="药品购买频次分析">
      <MedicineFrequency />
    </m-card>
    <m-card area="box7" title="病害测报">
      <Forecast />
    </m-card>
  </m-grid>
</template>

<script>
import QualityWarning from './components/quality-safety/quality-warning'
import CompanyRate from './components/quality-safety/company-rate'
import QualifiedRate from './components/quality-safety/qualified-rate'
import Online from './components/quality-safety/online'
import MedicineFlow from './components/quality-safety/medicine-flow'
import MedicineFrequency from './components/quality-safety/medicine-frequency'
import Forecast from './components/quality-safety/forecast'
import QualityMap from './components/quality-safety/quality-map'
export default {
  name: 'QualitySafety',
  components: {
    QualityWarning,
    CompanyRate,
    QualifiedRate,
    Online,
    MedicineFlow,
    MedicineFrequency,
    Forecast,
    QualityMap,
  },
  data() {
    return {}
  },
}
</script>

<style lang="stylus" scoped>

</style>
