<template>
  <div style="padding: 0px 10px 10px 10px">
    <div class="formtitle">若尔盖养殖场</div>
    <div class="layouts">
      <div class="layoutsdiv">
        <div class="tile">总资源展示</div>
        <div class="echartsdiv">
          <!-- 总资源展示两个图表 -->
          <div id="Inventory" class="chartstyle"></div>
          <div id="Inventory1" class="chartstyle"></div>
        </div>
      </div>
      <div class="layoutsdiv">
        <div class="tile">综合育种植</div>
        <div style="display: flex">
          <div
            class="echartsdiv"
            style="display: flex; flex-direction: column; width: 100%"
          >
            <!-- 综合育种植图表 -->
            <div id="Inventory2" class="chartstyle2"></div>
            <div style="font-weight: 600; width: 100%">群体育种值趋势图</div>
          </div>
          <div class="flexdiv">
            <div style="width: 100%; display: flex; justify-content: center">
              <div style="font-weight: bold; width: 70%">平均育种值</div>
            </div>
            <div class="tabsdata">
              <div class="tabs">
                <div>平均育种值</div>
                <div>258</div>
              </div>
            </div>
            <div style="text-align: center">
              <img
                style="width: 100%"
                src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iot_breed/farm/2024/08/30581be380a8e407b6a193bc04d1a5f52a.jpg"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
      <div class="layoutsdiv">
        <div class="tile">系谱分析</div>
        <div style="display: flex">
          <img
            style="width: 100%"
            src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iot_breed/farm/2024/08/3045dfe9ebb60507a75748a7c58393a0da.jpg"
            alt=""
          />
          <!-- <div
            class="echartsdiv"
            style="display: flex; flex-direction: column; width: 100%"
          >
            <div
              id="Inventory2"
              style="height: 350px; text-align: center; width: 100%"
            ></div>
            <div style="font-weight: 600; width: 100%">群体系统发育NJ树</div>
          </div>
          <div style="width: 100%">
            <div style="text-align: center">
              <img
                style="width: 80%"
                src=""
                alt=""
              />
            </div>
          </div> -->
        </div>
      </div>
      <div class="layoutsdiv">
        <div class="tile">遗传病风险警告</div>
        <div style="display: flex">
          <div
            class="echartsdiv"
            style="display: flex; flex-direction: column; width: 100%"
          >
            <!-- 遗传病风险警告图表 -->
            <div id="Inventory3" class="chartstyle3"></div>
            <div style="font-weight: 600; width: 100%">
              群体遗传比风险概率图
            </div>
          </div>
          <div class="flexdiv">
            <!-- <div style="width: 100%; display: flex; justify-content: center">
              <div style="font-weight: bold; width: 70%">群体遗传病风险数量统计表</div>
            </div> -->
            <!-- <div class="tabsdata">
              <div class="tabs">
                <div>平均育种值</div>
                <div>132</div>
              </div>
            </div> -->
            <img
              style="width: 100%"
              src="https://smart-1251449951.cos.ap-guangzhou.myqcloud.com/iot_breed/farm/2024/08/30ed0c054a729a918a324a884a4e920ca7.jpg"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  methods: {},
  mounted() {
    setTimeout(() => {
      var myChart = echarts.init(document.getElementById('Inventory'))
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['奶牛', '种母牛', '种公牛', '犊牛']
        },
        series: [
          {
            name: '种质资源',
            type: 'bar',
            data: [35, 140, 300, 420]
          }
        ]
      })
      var myChart1 = echarts.init(document.getElementById('Inventory1'))
      myChart1.setOption({
        title: {
          text: '基因数据资源',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: ['西门塔尔牛', '九龙牦牛', '安格斯牛', '黄牛', '荷斯坦牛']
        },
        series: [
          {
            type: 'pie',
            radius: [30, 110],
            roseType: 'area',
            data: [
              { value: 40, name: '西门塔尔牛' },
              { value: 30, name: '九龙牦牛' },
              { value: 15, name: '安格斯牛' },
              { value: 10, name: '黄牛' },
              { value: 5, name: '荷斯坦牛' }
            ]
          }
        ]
      })
      var myChart2 = echarts.init(document.getElementById('Inventory2'))
      myChart2.setOption({
        title: {
          text: '育种值'
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            '82010000990',
            '82010000991',
            '82010000992',
            '82010000993',
            '82010000994',
            '82010000995',
            '82010000996',
            '82010000997'
          ]
        },
        yAxis: { type: 'value' },
        series: [
          {
            // name: '销量',
            type: 'line',
            data: [
              255.85, 252.16, 259.69, 250.76, 264.34, 255.24, 260.27, 238.7
            ],
            areaStyle: {}
          }
        ]
      })
      var myChart3 = echarts.init(document.getElementById('Inventory3'))
      myChart3.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['低风险', '高风险']
        },
        series: [
          {
            name: '占比',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 25, name: '低风险' },
              { value: 75, name: '高风险' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }, 500)
  }
}
</script>
  
  <style lang="less" scoped>
.formtitle {
  font-weight: bold;
  padding-left: 12px;
  padding-top: 10px;
  margin-bottom: 8px;
}
.layouts {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .layouts > .layoutsdiv {
    width: 47.5%;
    margin-top: 10px;
    background: white;
    padding: 18px 14px 18px 16px;
    border-radius: 2px;
  }
  .tile {
    border-bottom: 1px solid #29272718;
    padding-bottom: 10px;
    font-weight: 600;
    color: rgb(49, 49, 49);
    margin-bottom: 20px;
  }
  .echartsdiv {
    display: flex;
    .chartstyle {
      height: 400px;
      text-align: center;
    }
    .chartstyle2 {
      height: 350px;
      text-align: center;
      width: 100%;
    }
    .chartstyle3 {
      height: 350px;
      text-align: center;
      width: 100%;
    }
  }
  .echartsdiv div {
    width: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
  }
  .tabsdata {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 30px;
    .tabs {
      width: 80%;
      border: 1px solid #a6c5ee;
      display: flex;
      justify-content: space-between;
      color: #468ce7;
      background: #f2f6fb;
    }
    .tabs div {
      border: 1px solid #a6c5ee;
      text-align: center;
      width: 60%;
      padding: 8px 16px 8px 16px;
    }
  }
  .flexdiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
@media (max-width: 1669px) {
  .layouts > .layoutsdiv {
    width: 47% !important;
  }
  .chartstyle {
    height: 300px !important;
  }
  .chartstyle2 {
    height: 310px !important;
  }
  .chartstyle3 {
    height: 270px !important;
  }
}
</style>
  