<template>
  <div class="app-container">
    <div class="left-content">
      <div class="top-box">
        <div class="device-info">
          <div class="info-title">
            <i class="iconfont icon-shebeixinxi" style="color: #46B3F8;font-size: 30px;"></i>
            设备信息
          </div>
          <div class="info-content">
            <el-row justify="space-evenly">
              <el-col :span="12">设备编码</el-col>
              <el-col :span="12">11</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">设备名称</el-col>
              <el-col :span="12">11</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">运行时长</el-col>
              <el-col :span="12">11</el-col>
            </el-row>
          </div>
        </div>
        <div class="user-info">
          <div class="info-title">
            <svg-icon icon-class="renyuanxinxi" style="font-size: 30px;" />
            人员信息
          </div>
          <div class="info-content">
            <el-row justify="space-evenly">
              <el-col :span="12">操作员</el-col>
              <el-col :span="12">张一一</el-col>
            </el-row>
            <el-row>
              <el-col :span="12">人员ID</el-col>
              <el-col :span="12">11</el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="produce-info">
        <div class="info-title">
          <svg-icon icon-class="shengchanxinxi" style="font-size: 30px;" /> 生产信息
        </div>
        <div class="info-content">
          <el-row justify="space-evenly">
            <el-col :span="12">操作员</el-col>
            <el-col :span="12">张一一</el-col>
          </el-row>
          <el-row>
            <el-col :span="12">人员ID</el-col>
            <el-col :span="12">11</el-col>
          </el-row>
        </div>
      </div>
      <div class="barchart">
        <v-chart class="chart-class" :option="bar_option" />
      </div>
    </div>
    <div class="right-content">
      <div class="zhangli">
        <v-chart class="chart-class" :option="line_option" />
      </div>
      <div class="table">

        啊啊 1720*828
        1680*788
      </div>
    </div>
  </div>
</template>

<script setup>
import { getBaseInfoNew,qualitynewDeviceOutputQuality } from "@/api/home";



let pass = ref([0]);
let noPass = ref([0]);
let bar_option = ref({
  title: {
    text: '产量',
    textStyle: {
      color: '#797979'
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['合格', '不合格'],
    textStyle: {
      color: '#797979'
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['0'],
      axisLabel: {
        fontSize: 12,
        color: '#797979'
      },
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {

        fontSize: 12,
        color: '#797979'
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
        }
      },
    }
  ],
  series: [
    {
      name: '合格',
      type: 'bar',
      stack: 'Ad',
      shape: 'circle',
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#91cc75'
      },
      data: [0]
    },
    {
      name: '不合格',
      type: 'bar',
      stack: 'Ad',
      shape: 'circle',
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#5470c6'
      },
      data: [0],
      label: {
        show: true,
        position: 'top',
        color: "#797979",
        formatter: function (p) {
          let sum = pass.value[p.dataIndex] + noPass.value[p.dataIndex];
          return sum;
        }
      }
    }
  ]
})

let line_option = ref({
  title: {
    text: '张力值',
    left: '0',
    textStyle: {
      color: '#000'
    }
  },
  xAxis: {
    name: '针数',
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    name: '张力',
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
})

function getData() {
  getBaseInfoNew().then(res => {
    console.log(res);
  });
  qualitynewDeviceOutputQuality().then(res => {
    pass.value = res.data.pass;
    noPass.value = res.data.noPass;
    bar_option.value.series[0].data = res.data.pass;
    bar_option.value.series[1].data = res.data.noPass;
    bar_option.value.xAxis[0].data = res.data.time;
  });

}
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 828px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: auto;

  .left-content {
    width: 700px;
    height: 100%;
    margin-right: 15px;

    .info-title {
      height: 50px;
      font-size: 26px;
      color: #797979;
      font-weight: bold;
      line-height: 50px;

      .iconfont {
        margin-right: 10px;
      }
    }

    .info-content {
      width: 100%;
      height: 158px;
      font-size: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .top-box {
      width: 100%;
      height: 208px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;



      .device-info {
        width: 48%;
        height: 100%;
        padding: 5px 5px 5px 10px;
        box-sizing: border-box;
        background-color: #E9F3FA;
        border-radius: 10px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      }

      .user-info {
        width: 48%;
        height: 100%;
        padding: 5px 5px 5px 10px;
        box-sizing: border-box;
        background-color: #FAF1EB;
        border-radius: 10px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      }
    }

    .produce-info {
      width: 100%;
      height: 208px;
      padding: 5px 5px 5px 10px;
      box-sizing: border-box;
      background-color: #F0F8F0;
      border-radius: 10px;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      margin-bottom: 15px;
    }

    .barchart {
      width: 100%;
      height: calc(100% - 416px - 30px);
      padding: 5px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);


    }


  }

  .chart-class {
    width: 100%;
    height: 100%;
  }

  .right-content {
    flex: 1;
    height: 100%;

    .zhangli {
      width: 100%;
      height: 431px;
      padding: 5px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      margin-bottom: 15px;
    }

    .table {
      width: 100%;
      height: calc(100% - 416px - 30px);
      padding: 5px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    }

  }
}
</style>
