<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>{{ time }} <span style="color:#ff9829">智能线</span> 每日产量</span>
          </div>
          <div class="body">
            <div class="chartsdom" id="chart_ptrend"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>{{ time }} <span style="color:#ff9829">智能线</span> 每日产品合格率</span>
          </div>
          <div class="body">
            <div class="chartsdom" id="chart_arc"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getCountDay, getPassRate } from "@/api/index";
import { timeFormate } from "@/utils/timeFormate";
export default {
  name: "Index",
  data() {
    return {
      xData: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'],
      data1: [],
      data2: [],
      time: ''
    };
  },
  mounted() {
    this.getData();
    this.time = timeFormate(new Date());
  },
  methods: {
    /** 获取列表数据 */
    async getData() {
      let list1 = [];
      await getCountDay().then(res => {
        if (res.data) {
          this.xData.forEach((item) => {
            Object.keys(res.data).forEach((key) => {
              if (item === key) {
                list1.push(res.data[key]['智能线'])
              }
            })
          })

          this.data1 = list1;
          this.getEchart1();
        }
      }).catch();

      let list2 = [];
      await getPassRate().then(res => {
        if (res.data) {
            this.xData.forEach((item) => {
                Object.keys(res.data).forEach((key) => {
                if (item === key) {
                    list2.push(Number(res.data[key]['合格率']?.split('%')[0]))
                }
                })
            })

          this.data2 = list2;
          this.getEchart2();
        }
      }).catch();
    },
    getEchart1() {
      let myChart = this.$echarts.init(document.getElementById('chart_ptrend'));
      let itemStyle = {
        barBorderRadius: [8, 0],
        color: '#179bf1'
      }

      this.option = {
        baseOption: {
          timeline: {
            show: false},
          calculable: true,
          grid: {
            top: '20%',
            bottom: '20%'
          },
          xAxis: [{
            type: 'category',
            axisLabel: {
              margin: 10,
              interval: 0,
              fontSize: 14,
              color: '#222'
            },
            data: this.xData,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#222',
              }
            },
          }],
          yAxis: [{
            type: 'value',
            name: '双',
            nameTextStyle: {
                fontSize: 14
            },
            axisLabel: {
              margin: 10,
              interval: 0,
              fontSize: 14,
              color: '#222'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#222'
              }
            }
          }],
          series: [{
            type: 'bar',
            barWidth: 20,
            legendHoverLink: true,
            label: {
              show: true,
              position: 'top',
              color: '#179bf1',
              fontSize: 14,
              fontWeight: 800
            },
          }]
        },
        options: [{
          series: [{
            data: this.data1
          }]
        }]
      }

      myChart.setOption(this.option, true);

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
    getEchart2() {
      let myChart = this.$echarts.init(document.getElementById('chart_arc'));
      this.option = {
          tooltip: {
            trigger: 'axis',
            showContent: false,
          },
          color: '#ffeb7b',
          grid: {
          top: 100,
          left: 60,
          right: 60,
          bottom: 80,
          containLabel: true //轴上的数值
          },
          xAxis: {
              type: 'category',
              data: this.xData,
              boundaryGap: true,
              axisTick: {
                  show: false
              }, 
              axisLabel: {
                  margin: 10,
                  fontSize: 14,
                  formatter: '{value}'
              },
              axisLine: {
                  show: false,
                  lineStyle: {
                      color: '#222',
                  }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed'
                }
              }
          },
          yAxis: {
              type: 'value',
              max: 100,
              min: 60,
              axisLabel: {
                  margin: 10,
                  fontSize: 14,
                  formatter: '{value} %'
              },
              axisTick: {
                  show: true
              }, 
              axisLine: {
                  show: false,
                  lineStyle: {
                      color: '#222'
                  }
              },
          },
          series: [{
              name: '合格率',
              type: 'line',
              data: this.data2,
              symbolSize: 10,
              lineStyle: {
                  width: 4
              },
              itemStyle: {
                  normal: {
                      label: {
                          show: true,
                          color: '#222',
                          fontSize: 14,
                          position: 'top',
                          formatter: function (params) {
                              return params.value + '%'
                          }
                      }
                  }
              },
              smooth: true,
          }]
      };
      myChart.setOption(this.option, true);

      window.addEventListener('resize', () => {
          myChart.resize();
      });
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
    .chartsdom {
      width: 100%;
      height: 500px;
    }
  }
}
</style>

