<template>
  <v-scale-screen width="1920" height="1080" :fullScreen="false">
    <div class="app-container home" style="">
      <div class="head">
        <div class="head-content">
          <div class="title">包装线产线生产看板</div>
        </div>
        <div class="head-logo">
          <img src="../../../assets/images/logo.png" alt="" />
        </div>
        <div class="back">
          <el-button
            @click="back()"
            type="primary"
            icon="el-icon-s-home"
          ></el-button>
        </div>
      </div>
      <div class="content-top">
        <div class="factoryCode">
          <div class="selectborder">
            <select
              v-model="selectxt"
              class="select1"
              @change="selectline(selectxt)"
            >
              <option
                :key="index"
                :value="x.parentName"
                v-for="(x, index) in getLineList"
              >
                {{ x.deptName }}
              </option>
              <!-- <option :key="index" :value="x.seriesName" v-for="(x, index) in ceshib">{{ x.seriesName }}</option> -->
            </select>
          </div>
          <div class="selectborder selectborder1">
            <select
              v-model="selectxtclasses"
              class="select1"
              @change="selectline2(selectxtclasses)"
            >
              <option
                :key="index"
                :value="x.equCode"
                v-for="(x, index) in dictDatatype"
              >
                {{ x.equName }}
              </option>
            </select>
          </div>
        </div>
        <div class="timebox">
          <div class="time">
            {{ gettimedata }}
          </div>
        </div>
      </div>
      <div class="content">
        <div class="itemleft" style="margin-right: 10px">
          <div class="item-table item-table1" style="margin-bottom: 10px">
            <div class="yield">
              <div class="yieldbox">
                <div class="yieldtitle">
                  <div class="yieldname">当日计划产量</div>
                </div>
                <div class="yieldnumber">
                  <div
                    class="numberbox"
                    :key="index"
                    v-for="(n, index) in planProduction"
                  >
                    <div class="number">{{ n }}</div>
                  </div>
                </div>
              </div>
              <div class="yieldbox">
                <div class="yieldtitle">
                  <div class="yieldname">产线目前产量</div>
                </div>
                <div class="yieldnumber">
                  <div
                    class="numberbox"
                    :key="index"
                    v-for="(n, index) in actProduction"
                  >
                    <div class="number">{{ n }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="yield" style="margin-top: 10px">
              <div class="yieldbox">
                <div class="yieldtitle">
                  <div class="yieldname">工单详情</div>
                </div>
              </div>
            </div>
            <div class="yieldtable" style="margin-top: 10px">
              <table
                class="table-thead"
                border="0"
                cellpadding="0"
                cellspacing="0"
              >
                <thead>
                  <tr style="height: 36px">
                    <td style="width: 8%">工单号</td>
                    <!-- <td style="width: 8%;">异常单号</td> -->
                    <td style="width: 16%">产品名称</td>
                    <td style="width: 14%">批次号</td>
                    <td style="width: 8%">计划数量</td>
                    <td style="width: 8%">完成数量</td>
                  </tr>
                </thead>
              </table>
              <div class="table-tbody">
                <!-- 	{workorderCodeSap:订单编码
	 productName：产品名称
	 batchCode：批次编码
	 quantitySplit：批次数量
	 quantityProduced：已生产数量
	} -->
                <!-- <vue-seamless-scroll :data="getlistcx" :class-option="classOption" class="wrapscroll"> -->
                <table border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr
                      :class="[index % 2 == 1 ? 'active1' : 'active2']"
                      style="height: 44px"
                      :key="index"
                      v-for="(n, index) in orderdetail"
                    >
                      <td style="width: 8%">{{ n.workorderCodeSap }}</td>
                      <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
                      <td style="width: 16%">{{ n.productName }}</td>
                      <td style="width: 12%">{{ n.batchCode }}</td>
                      <td style="width: 8%">{{ n.quantitySplit }}</td>
                      <td style="width: 8%">{{ n.quantityProduced }}</td>
                    </tr>
                  </tbody>
                </table>
                <!-- </vue-seamless-scroll> -->
              </div>
            </div>
          </div>
          <div class="itemleft-bottom">
            <div class="item-table1">
              <div class="titlebox" style="margin-bottom: 14px">
                <div class="titlename">近15日产线趋势图</div>
              </div>
              <div
                id="echart6"
                style="margin: auto; width: 1170px; height: 244.15px"
              ></div>
            </div>
          </div>
        </div>
        <div class="itemright">
          <div class="item-table item-table1">
            <div class="titlebox" style="margin-bottom: 14px">
              <div class="titlename">产线信息</div>
            </div>
            <div class="titlebox2" style="margin-bottom: 17px">
              <div class="icon">
                <img
                  src="../../../assets/images/packagingline/bg-title3.png"
                  alt=""
                />
              </div>
              <div class="titlename">当前工单信息</div>
            </div>
            <div class="table-tbody">
              <!-- <vue-seamless-scroll :data="getlistcx" :class-option="classOption" class="wrapscroll"> -->
              <table border="0" cellpadding="0" cellspacing="0">
                <tbody>
                  <tr style="height: 62px">
                    <td
                      style="
                        width: 4%;
                        background-color: #081831;
                        border-right: 1px solid #6c8097;
                      "
                    >
                      工单号
                    </td>
                    <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
                    <td style="width: 8%">
                      <span v-if="workOrder">{{
                        workOrder.workorderCodeSap
                      }}</span>
                    </td>
                  </tr>
                  <tr style="height: 62px">
                    <td
                      style="
                        width: 4%;
                        background-color: #081831;
                        border-right: 1px solid #6c8097;
                      "
                    >
                      产品名称
                    </td>
                    <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
                    <td style="width: 8%">
                      <span v-if="workOrder">{{ workOrder.productName }}</span>
                    </td>
                  </tr>
                  <tr style="height: 62px">
                    <td
                      style="
                        width: 4%;
                        background-color: #081831;
                        border-right: 1px solid #6c8097;
                      "
                    >
                      产品编码
                    </td>
                    <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
                    <td style="width: 8%">
                      <span v-if="workOrder">{{ workOrder.productCode }}</span>
                    </td>
                  </tr>
                  <tr style="height: 62px">
                    <td
                      style="
                        width: 4%;
                        background-color: #081831;
                        border-right: 1px solid #6c8097;
                      "
                    >
                      产线编码/名称
                    </td>
                    <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
                    <td style="width: 8%">
                      <span v-if="workOrder"
                        >{{ workOrder.equCode }}/{{ workOrder.equName }}</span
                      >
                    </td>
                  </tr>

                  <tr style="height: 62px">
                    <td
                      style="
                        width: 4%;
                        background-color: #081831;
                        border-right: 1px solid #6c8097;
                      "
                    >
                      数量/单位
                    </td>
                    <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
                    <td style="width: 8%">
                      <span v-if="workOrder"
                        >{{ workOrder.totalNum }}/{{ workOrder.unit }}</span
                      >
                    </td>
                  </tr>
                </tbody>
              </table>
              <!-- </vue-seamless-scroll> -->
            </div>
            <div
              class="titlebox2"
              style="margin-bottom: 17px; margin-top: 19px"
            >
              <div class="icon">
                <img
                  src="../../../assets/images/packagingline/bg-title3.png"
                  alt=""
                />
              </div>
              <div class="titlename">产线质量信息</div>
            </div>
            <div class="Totalnumberbox">
              <div class="Totalnumber">
                <div class="number1">巡检次数</div>
                <div v-if="taskNum" class="number2">{{ taskNum.taskNum }}</div>
              </div>
              <div class="Totalnumber Totalnumber1">
                <div class="number1">巡检抽样数量</div>
                <div v-if="taskSampleNum" class="number2">
                  {{ taskSampleNum.taskSampleNum }}
                </div>
              </div>
            </div>
            <div
              class="titlebox2"
              style="margin-bottom: 17px; margin-top: 19px"
            >
              <div class="icon">
                <img
                  src="../../../assets/images/packagingline/bg-title3.png"
                  alt=""
                />
              </div>
              <div class="titlename">产线效率用人</div>
            </div>
            <div class="Totalnumberbox">
              <div class="Totalnumber">
                <div class="number1">标准用人</div>
                <div v-if="taskNum" class="number2">{{ workOrder.standarMan }}</div>
              </div>
              <div class="Totalnumber Totalnumber1">
                <div class="number1">标准效率</div>
                <div v-if="taskSampleNum" class="number2">
                  {{ workOrder.standarXl }}
                </div>
              </div>
              
            </div>
            <div class="Totalnumberbox">
              <div class="Totalnumber">
                <div class="number1">实际用人</div>
                <div v-if="taskNum" class="number2">{{ workOrder.actMan }}</div>
              </div>
              <div class="Totalnumber Totalnumber1">
                <div class="number1">实际效率</div>
                <div v-if="taskSampleNum" class="number2">
                  {{ workOrder.actXl }}
                </div>
              </div>
              
            </div>
            <!-- “实际用人”、“标准效率”、“实际效率” -->
            <!-- <div class="data-box">
              <div class="box1 box">
                <div class="data1">15</div>
                <div class="data2">巡检次数</div>
              </div>
              <div class="box2 box">
                <div class="data1">15</div>
                <div class="data2">巡检抽样数量</div>
              </div>
              <div class="box3 box">
                <div class="data1">15</div>
                <div class="data2">标准用人</div>
              </div>
            </div>
            <div class="data-box">
              <div class="box1 box">
                <div class="data1">15</div>
                <div class="data2">实际用人</div>
              </div>
              <div class="box2 box">
                <div class="data1">15</div>
                <div class="data2">标准效率</div>
              </div>
              <div class="box3 box">
                <div class="data1">15</div>
                <div class="data2">实际效率</div>
              </div>
            </div> -->
            <!-- <div
              id="echart5"
              style="margin: auto; width: 570px; height: 374.15px"
            ></div> -->
          </div>
        </div>
      </div>
      <!-- <div class="item"></div> -->
      <!-- <div class="item"></div> -->
    </div>
  </v-scale-screen>
</template>

<script>
import {
  getBoardFactory,
  getProduceStaticInfo,
  getProduceNoOkList,
  getCheckProjectsPie,
  getProMonthNoOk,
  getLineDayNoOk,
  getMonthOfYearContrast,
} from "@/api/kanban/quality";
import {
  getDictData,
  getProduction15Days,
  getProductionLineInfo,
  getPorOrderList,
} from "@/api/kanban/Packagingline";
import { getDeviceRefreshTime } from "@/api/kanban/equipment";
import * as echarts from "echarts";
import moment from "moment";
// import Echarts3D from "./echarts3d.vue";
// import Echarts3D2 from "./echarts3d2.vue";
export default {
  name: "Index",
  components: {},
  data() {
    return {
      gettimedata: "",
      selectxt: null,
      selectxtclasses: null,
      getLineList: [],
      classesList: [],
      number1: 0,
      number2: 0,
      number3: 0,
      number4: 0,
      nameList: [],
      valueList: [1639, 1422, 1306, 1131, 1040, 732, 1040, 732],
      optionDatalist1: [],
      optionDatalist2: [],
      optionDatalist3: [],
      optionDatalist4: [],
      optionDatalist5: [],
      optionDatalist6: [],
      colorlist: ["#005aff", "#f8b551"],
      datetime: null,
      time1: null,
      getlist: [],
      repairlist: [],
      orderdetail: [],
      packaginglinerepairlist: [],
      packaginglinestabilizelist: [],
      packaginglineinfo: [],
      ordermessage: [],
      RefreshTime: null,
      dictDatatype: [],
      Realtimebox: [
        { name: "发片数量", number: 888 },
        { name: "理片数量", number: 888 },
        { name: "支架数量", number: 888 },
        { name: "包膜数量", number: 888 },
      ],
      Realtimebox2: [
        { name: "发片数量", number: 888 },
        { name: "理片数量", number: 888 },
        { name: "支架数量", number: 888 },
        { name: "包膜数量", number: 888 },
      ],
      workOrder: {},
      piedata: {},
      taskNum: {},
      taskSampleNum: {},
      // 当日计划产量
      planProduction: [],
      // 当日实际产量
      actProduction: [],
      ceshitable: [{}, {}, {}, {}, {}, {}],
    };
  },
  created() {},
  destroyed() {
    clearInterval(this.time1);
    this.time1 = null;
  },
  mounted() {
    // this.datetime = moment().subtract(2, "day").format("yyyy-MM-DD");
    //console.log('zhuanhuahou',this.dateRangeone)
    // this.getdatalist(this.selectxt)
    this.selectfactoryCodelist();

    this.gettime();
  },
  methods: {
    back() {
      this.$router.push({ path: "/index" });
    },
    gettime() {
      this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
      setInterval(() => {
        this.gettimedata = moment().format("YYYY-MM-DD HH:mm:ss ");
      }, 1000);
    },
    selectfactoryCodelist() {
      const _this = this;
      getBoardFactory({
        factory: null,
      }).then((response) => {
        if (response.data) {
          _this.getLineList = response.data;
          _this.selectxt = _this.getLineList[0].parentName;
          _this.getDictData();
        }
      });
    },
    getDeviceRefreshTime() {
      const _this = this;
      getDeviceRefreshTime().then((response) => {
        if (response) {
          this.RefreshTime = response.data;
          this.time1 = setInterval(() => {
            _this.getdatalist(_this.selectxt);
          }, 1000 * 60 * this.RefreshTime);
        }
      });
    },
    getDictData() {
      const _this = this;
      getDictData({
        factoryCode: "ds_" + _this.selectxt,
        equipmentTypeCode: "equ_type_bzx",
      }).then((response) => {
        if (response) {
          this.dictDatatype = response;
          _this.selectxtclasses = _this.dictDatatype[0].equCode;
          _this.getdatalist();
          _this.getDeviceRefreshTime();
        }
      });
    },
    getdatalist() {
      const _this = this;
      _this.initChart1();
      _this.piedata = [];
      getProductionLineInfo({
        equCode: _this.selectxtclasses,
        factoryCode: "ds_" + _this.selectxt,
      }).then((response) => {
        if (response) {
          _this.workOrder = response.data.workOrder; 
          _this.taskNum = response.data.taskNum;
          _this.taskSampleNum = response.data.taskSampleNum;
          if (response.data.piedata.checkList) {
            response.data.piedata.checkList.forEach((item) => {
              let a = {};
              let b = {};
              if (item.checkResult == "合格") {
                a.name = item.checkResult;
                a.value = item.quality;
                _this.piedata[0] = a;
              }
              if (item.checkResult == "不合格") {
                b.name = item.checkResult;
                b.value = item.quality;
                _this.piedata[1] = b;
              }
            });
            _this.initChart2();
          } else {
            _this.initChart3();
          }
        }
      });
      getPorOrderList({
        equCode: _this.selectxtclasses,
        factoryCode: "ds_" + _this.selectxt,
      }).then((response) => {
        if (response) {
          _this.orderdetail = response.data;
          if (_this.orderdetail.length == 0) {
            _this.orderdetail = this.ceshitable;
          }
        }
      });
    },
    // 订单异常信息
    selectline() {
      const _this = this;
      this.optionDatalist1 = [];
      this.optionDatalist5 = [];
      this.optionDatalist6 = [];
      _this.getDictData(_this.selectxt);
    },
    selectline2() {
      const _this = this;
      this.optionDatalist1 = [];
      this.optionDatalist5 = [];
      this.optionDatalist6 = [];
      _this.getdatalist(_this.selectxt);
    },
    initChart1() {
      const _this = this;
      var fontColor = "#D0DEEE";
      var myChart6 = echarts.init(document.querySelector("#echart6"));
      var option6 = {
        grid: {
          left: "2%",
          right: "4%",
          top: "18%",
          bottom: "1%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          show: true,
          right: "120",
          y: "10",
          icon: "stack",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#D0DEEE",
          },

          // nameTextStyle:{
          //         color: '#D0DEEE'
          //     },
          data: ["实际产量", "计划产量"],
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLabel: {
              color: fontColor,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#397cbc",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#2B3241",
              },
            },
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "数量",
            nameTextStyle: {
              color: "#D0DEEE",
            },
            min: 0,
            max: 1000,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#D0DEEE",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#27b4c2",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#2B3241",
              },
            },
          },
        ],
        series: [
          {
            name: "实际产量",
            data: [],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#586AF2" },
                  { offset: 1, color: "#1C293A" },
                ]),
              },
            },
          },
          {
            name: "计划产量",
            type: "line",
            stack: "总量",
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: "#88E4E3",
                lineStyle: {
                  color: "#88E4E3",
                  width: 1,
                },
              },
            },
            data: [],
          },
          // {
          //   name: "计划产量",
          //   data: [],
          //   type: "bar",
          //   showBackground: true,
          //   backgroundStyle: {
          //     color: "rgba(180, 180, 180, 0.2)",
          //   },
          //   itemStyle: {
          //     normal: {
          //       barBorderRadius: 5,
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //         { offset: 0, color: "#66E1DF" },
          //         { offset: 1, color: "#005954" },
          //       ]),
          //     },
          //   },
          // },
        ],
      };
      myChart6.setOption(option6);
      getProduction15Days({
        equCode: _this.selectxtclasses,
        factoryCode: "ds_" + _this.selectxt,
      }).then((response) => {
        if (response) {
          if (response.data.planProduction.length < 6) {
            response.data.planProduction = String(
              response.data.planProduction
            ).padStart(6, "0");
          }
          if (response.data.actProduction.length < 6) {
            response.data.actProduction = String(
              response.data.actProduction
            ).padStart(6, "0");
          }
          this.planProduction = response.data.planProduction.split("");
          this.actProduction = response.data.actProduction.split("");

          let seriesdata1 = response.data.acts;
          let seriesdata2 = response.data.plans;
          let xAxisdata = response.data.days;
          let max1 = Math.max(...seriesdata1) + 200;
          let max3 = Math.max(...seriesdata2) + 200;
          let yAxismax1 = 0;
          if (max1 > max3) {
            yAxismax1 = max1;
          } else {
            yAxismax1 = max3;
          }
          option6 = {
            xAxis: [
              {
                data: xAxisdata,
              },
            ],
            yAxis: [
              {
                max: yAxismax1,
              },
            ],
            series: [
              {
                data: seriesdata1,
              },
              {
                data: seriesdata2,
              },
            ],
          };
          myChart6.setOption(option6);
        }
      });
    },
    initChart2() {
      const _this = this;
      var data5 = this.piedata;
      console.log(data5);
      var myChart5 = echarts.init(document.querySelector("#echart5"));

      var option5 = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        color: ["#00E7E5", "#1DBEFF"],
        legend: {
          left: "left",
          orient: "vertical",
          bottom: 10,
          textStyle: {
            color: "black",
            padding: [5, 5, 5, -50],
            fontWeight: 600,
          },
          itemWidth: 50,
          itemHeight: 22,
        },
        series: [
          {
            radius: 120,
            name: "巡检",
            type: "pie",
            labelLine: {
              length: 40,
              length2: 85,
            },
            itemStyle: {
              borderWidth: 1,
              shadowBlur: 20,
              shadowOffsetY: 5,
            },
            center: ["50%", "55%"],
            avoidLabelOverlap: true,

            data: [
              {
                value: data5[0] && data5[0].name == "合格" ? data5[0].value : 0,
                name:
                  data5[0] && data5[0].name == "合格" ? data5[0].name : "合格",
                selected: true,
                itemStyle: {
                  color: "#129E92",
                  borderColor: "#3FFFE2",
                  shadowColor: "rgba(63, 255, 226, 0.5)",
                },
                labelLine: {
                  lineStyle: {
                    color: "#00EAE8",
                  },
                },
                label: {
                  // formatter: "{e|}\n{a|}{b|{c}/" + (d !== undefined ? "{d}%" : "") + "}{c|}",
                  formatter: "{e|}\n{a|}{b|{c}/{d}%}{c|}",

                  rich: {
                    a: {
                      padding: -33,
                    },
                    c: {
                      padding: [5, 0],
                      lineHeight: 60,
                      verticalAlign: "top",
                      backgroundColor: "#00EAE8",
                    },
                    b: {
                      color: "#00E7E5",
                      backgroundColor: "rgba(63, 255, 226, 0.2)",
                      height: 19,
                      width: 40,
                      borderRadius: 0,
                      padding: [5, 25],
                      verticalAlign: "top",
                    },
                    e: {
                      padding: -10,
                    },
                  },
                },
              },
              {
                value:
                  data5[1] && data5[1].name == "不合格" ? data5[1].value : 0,
                name:
                  data5[1] && data5[1].name == "不合格"
                    ? data5[1].name
                    : "不合格",
                itemStyle: {
                  color: "#105BA4",
                  borderColor: "#31B4FF",
                  shadowColor: "rgba(49, 180, 255, 0.8)",
                },
                labelLine: {
                  lineStyle: {
                    color: "#07D2FF",
                  },
                },
                label: {
                  formatter: "{e|}\n{c|}{b|{c}/{d}%}{a|}",
                  rich: {
                    c: {
                      padding: [5, 0],
                      lineHeight: 60,
                      verticalAlign: "top",
                      backgroundColor: "#07D2FF",
                    },
                    a: {
                      padding: -33,
                    },
                    b: {
                      color: "#1DBEFF",
                      backgroundColor: "rgba(49, 180, 255, 0.2)",
                      height: 19,
                      width: 20,
                      borderRadius: 0,
                      padding: [5, 25],
                      align: "right",
                      verticalAlign: "top",
                    },
                    e: {
                      padding: -10,
                    },
                  },
                },
              },
            ],
          },
        ],
      };
      myChart5.setOption(option5);
    },
    initChart3() {
      const _this = this;
      var data5 = this.piedata;
      console.log(data5);
      var myChart5 = echarts.init(document.querySelector("#echart5"));

      var option5 = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        color: ["#00E7E5", "#1DBEFF"],
        legend: {
          left: "left",
          orient: "vertical",
          bottom: 10,
          textStyle: {
            color: "black",
            padding: [5, 5, 5, -50],
            fontWeight: 600,
          },
          itemWidth: 50,
          itemHeight: 22,
        },
        series: [
          {
            radius: 120,
            name: "巡检",
            type: "pie",
            labelLine: {
              length: 40,
              length2: 85,
            },
            itemStyle: {
              borderWidth: 1,
              shadowBlur: 20,
              shadowOffsetY: 5,
            },
            center: ["50%", "55%"],
            avoidLabelOverlap: true,

            data: [
              {
                value: data5[0] && data5[0].name == "合格" ? data5[0].value : 0,
                name:
                  data5[0] && data5[0].name == "合格" ? data5[0].name : "合格",
                selected: true,
                itemStyle: {
                  color: "#129E92",
                  borderColor: "#3FFFE2",
                  shadowColor: "rgba(63, 255, 226, 0.5)",
                },
                labelLine: {
                  lineStyle: {
                    color: "#00EAE8",
                  },
                },
                label: {
                  formatter: "{e|}\n{a|}{b|{c}%}{c|}",
                  rich: {
                    a: {
                      padding: -33,
                    },
                    c: {
                      padding: [5, 0],
                      lineHeight: 60,
                      verticalAlign: "top",
                      backgroundColor: "#00EAE8",
                    },
                    b: {
                      color: "#00E7E5",
                      backgroundColor: "rgba(63, 255, 226, 0.2)",
                      height: 19,
                      width: 40,
                      borderRadius: 0,
                      padding: [5, 25],
                      verticalAlign: "top",
                    },
                    e: {
                      padding: -10,
                    },
                  },
                },
              },
              {
                value:
                  data5[1] && data5[1].name == "不合格" ? data5[1].value : 0,
                name:
                  data5[1] && data5[1].name == "不合格"
                    ? data5[1].name
                    : "不合格",
                itemStyle: {
                  color: "#105BA4",
                  borderColor: "#31B4FF",
                  shadowColor: "rgba(49, 180, 255, 0.8)",
                },
                labelLine: {
                  lineStyle: {
                    color: "#07D2FF",
                  },
                },
                label: {
                  formatter: "{e|}\n{c|}{b|{c}%}{a|}",
                  rich: {
                    c: {
                      padding: [5, 0],
                      lineHeight: 60,
                      verticalAlign: "top",
                      backgroundColor: "#07D2FF",
                    },
                    a: {
                      padding: -33,
                    },
                    b: {
                      color: "#1DBEFF",
                      backgroundColor: "rgba(49, 180, 255, 0.2)",
                      height: 19,
                      width: 20,
                      borderRadius: 0,
                      padding: [5, 25],
                      align: "right",
                      verticalAlign: "top",
                    },
                    e: {
                      padding: -10,
                    },
                  },
                },
              },
            ],
          },
        ],
      };
      myChart5.setOption(option5);
    },
    //左侧第一个选择类型下拉框 回调函数
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 0px 24px;
}

.home {
  width: 100%;
  height: 100vh;
  background: url("../../../assets/images/bg-body.png") no-repeat;
  background-size: 100% 100%;
  background-color: #050711;

  .head {
    width: 100%;
    height: 74px;
    position: relative;

    .head-content {
      height: 74px;
      background-image: url("../../../assets/images/bg-head.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      text-align: center;

      .title {
        font-size: 42px;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .head-logo {
      position: absolute;
      left: 0px;
      top: 1px;

      img {
        height: 38px;
        // width: ;
      }
    }

    .back {
      position: absolute;
      right: 0px;
      top: 5px;
    }
  }

  .content-top {
    display: flex;
    justify-content: space-between;
    position: relative;

    .factoryCode {
      width: 540px;
      height: 60px;
      background: url("../../../assets/images/bg- border1.png") no-repeat;
      background-size: 100% 100%;
      text-align: center;
      position: absolute;
      top: -17px;
      left: 0px;
    }

    .timebox {
      width: 480px;
      height: 60px;
      background: url("../../../assets/images/bg-border2.png") no-repeat;
      background-size: 100% 100%;
      text-align: center;
      position: absolute;
      top: -17px;
      right: 0px;

      .time {
        font-size: 30px;
        font-weight: 400;
        color: #ffffff;
        line-height: 71px;
      }
    }
  }

  .content {
    margin-top: 63px;
    display: flex;

    .itemleft {
      .item-table {
        width: 1243px;
        height: 542px;
        background: url("../../../assets/images/packagingline/bg-border1.png")
          no-repeat;
        background-size: 100% 100%;
        padding: 27px 21px 30px 25px;
        box-sizing: border-box;
        box-sizing: border-box;

        .yield {
          display: flex;
          align-items: center;

          // justify-content: space-between;
          .yieldbox {
            .yieldtitle {
              width: 401px;
              height: 37px;
              background: url("../../../assets/images/packagingline/bg-title1.png")
                no-repeat;
              background-size: 100% 100%;

              .yieldname {
                font-weight: bold;
                font-size: 22px;
                line-height: 37px;
                color: #ffffff;
                text-transform: none;
                margin-left: 40px;
              }
            }

            .yieldnumber {
              margin-top: 13px;
              display: flex;
              justify-content: space-around;
              .numberbox {
                width: 80px;
                height: 101px;
                background: url("../../../assets/images/packagingline/bg-num.png")
                  no-repeat;
                background-size: 100% 100%;
                margin-right: 10px;

                .number {
                  font-weight: 600;
                  font-size: 60px;
                  color: #ffffff;
                  line-height: 101px;
                  text-align: center;
                }
              }
            }
            .table-thead {
              width: 100%;
              height: 36px;
              margin: auto;
              background: #0a1a33;

              td {
                font-size: 19px;
                font-family: NotoSansHans-Medium, NotoSansHans;
                font-weight: 500;
                color: #159aff;
                text-align: center;
                white-space: nowrap;
              }
            }

            .table-tbody {
              height: 117px;
              // width: 1775px;
              margin: auto;
              overflow-y: scroll;

              table {
                width: 100%;

                tbody {
                  width: 100%;

                  td {
                    // font-size: 19px;
                    font-family: NotoSansHans-Medium, NotoSansHans;
                    font-weight: 500;
                    color: #ffffff;
                    text-align: center;
                    border-bottom: 1px solid #6c8097;
                    // border-left: 1px dashed #6C8097;
                  }
                }
              }
            }
          }

          .yieldbox:first-child {
            margin-right: 90px;
          }
        }
        .yieldtable {
          // justify-content: space-between;
          .yieldbox {
            .yieldtitle {
              // width: 401px;
              height: 37px;
              background: url("../../../assets/images/packagingline/bg-title1.png")
                no-repeat;
              background-size: 100% 100%;

              .yieldname {
                font-weight: bold;
                font-size: 22px;
                line-height: 37px;
                color: #ffffff;
                text-transform: none;
                margin-left: 40px;
              }
            }
          }

          .yieldbox:first-child {
            margin-right: 90px;
          }
          .table-thead {
            width: 100%;
            height: 36px;
            margin: auto;
            background: #0a1a33;

            td {
              font-size: 19px;
              font-family: NotoSansHans-Medium, NotoSansHans;
              font-weight: 500;
              color: #159aff;
              text-align: center;
              white-space: nowrap;
            }
          }

          .table-tbody {
            height: 220px;
            // width: 1775px;
            margin: auto;
            overflow-y: scroll;

            table {
              width: 100%;

              tbody {
                width: 100%;

                td {
                  // font-size: 19px;
                  font-family: NotoSansHans-Medium, NotoSansHans;
                  font-weight: 500;
                  color: #ffffff;
                  text-align: center;
                  border-bottom: 1px dashed #6c8097;
                  border-left: 1px dashed #6c8097;
                  // border-left: 1px dashed #6C8097;
                }
              }
            }
          }
        }
      }

      .itemleft-bottom {
        display: flex;

        .item-table1 {
          width: 1243px;
          height: 356px;
          background: url("../../../assets/images/packagingline/bg-border3.png")
            no-repeat;
          background-size: 100% 100%;
          padding: 27px 21px 30px 25px;
          box-sizing: border-box;

          .data-box {
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-bottom: 20px;

            .box {
              width: 176px;
              height: 179px;
              text-align: center;

              .data1 {
                font-weight: 500;
                font-size: 48px;
                color: #32c5ff;
                text-align: center;
                text-transform: none;
                margin-top: 41px;
              }

              .data2 {
                font-weight: 400;
                font-size: 22px;
                color: #ffffff;
                text-align: center;
                text-transform: none;
                margin-top: 29px;
              }
            }

            .box1 {
              background: url("../../../assets/images/packagingline/bg-yichang1.png")
                no-repeat;
              background-size: 100% 100%;

              .data1 {
                color: #32c5ff;
              }
            }

            .box2 {
              background: url("../../../assets/images/packagingline/bg-yichang2.png")
                no-repeat;
              background-size: 100% 100%;

              .data1 {
                color: #66ffff;
              }
            }

            .box3 {
              background: url("../../../assets/images/packagingline/bg-yichang3.png")
                no-repeat;
              background-size: 100% 100%;

              .data1 {
                color: #edb83f;
              }
            }
          }

          .table-thead {
            width: 100%;
            height: 36px;
            margin: auto;
            background: #0a1a33;

            td {
              font-size: 19px;
              font-family: NotoSansHans-Medium, NotoSansHans;
              font-weight: 500;
              color: #159aff;
              text-align: center;
              white-space: nowrap;
            }
          }

          .table-tbody {
            height: 117px;
            // width: 1775px;
            margin: auto;
            overflow-y: scroll;

            table {
              width: 100%;

              tbody {
                width: 100%;

                td {
                  // font-size: 19px;
                  font-family: NotoSansHans-Medium, NotoSansHans;
                  font-weight: 500;
                  color: #ffffff;
                  text-align: center;
                  border-bottom: 1px solid #6c8097;
                  // border-left: 1px dashed #6C8097;
                }
              }
            }
          }
          .Totalnumberbox {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .Totalnumber {
              width: 269px;
              height: 37px;
              background: url("../../../assets/images/packagingline/bg-title5.png")
                no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: space-around;

              .number1 {
                font-size: 14px;
                color: #ffffff;
                line-height: 20px;
              }

              .number2 {
                font-weight: 500;
                font-size: 24px;
                color: #2acfff;
              }
            }
          }
        }
      }
    }

    .itemright {
      .item-table1 {
        width: 610px;
        height: 912px;
        background: url("../../../assets/images/packagingline/bg-border3.png")
          no-repeat;
        background-size: 100% 100%;
        padding: 27px 21px 30px 25px;
        box-sizing: border-box;
        box-sizing: border-box;

        .table-thead {
          width: 100%;
          height: 44px;
          margin: auto;
          background: #0a1a33;

          td {
            font-size: 19px;
            font-family: NotoSansHans-Medium, NotoSansHans;
            font-weight: 500;
            color: #159aff;
            text-align: center;
            white-space: nowrap;
          }
        }

        .table-tbody {
          height: 320px;
          // width: 1775px;
          margin: auto;

          table {
            width: 100%;

            tbody {
              width: 100%;

              td {
                font-size: 19px;
                font-family: NotoSansHans-Medium, NotoSansHans;
                font-weight: 500;
                color: #ffffff;
                text-align: center;
                border: 1px dashed #6c8097;
              }
            }
          }
        }
      }

      .item-table1:first-child {
      }

      .Realtime {
        .Realtime-box {
          display: flex;

          .box {
            display: flex;
            align-items: flex-start;
            margin-right: 19px;

            .item {
              font-weight: 500;
              font-size: 15px;
              color: #ffffff;
              margin-left: 12px;

              .itemtitle {
              }

              .itemnumber {
                margin-top: 8px;
                color: #1dbdf2;
              }
            }
          }
        }
      }
      .Totalnumberbox {
        margin-top: 22px;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .Totalnumber:first-child {
          margin-right: 10px;
        }
        .Totalnumber {
          flex: 1;
          // width: 235px;
          height: 79px;
          background: url("../../../assets/images/packagingline/bg-title5.png")
            no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;

          .number1 {
            font-size: 16px;
            color: #ffffff;
            line-height: 20px;
          }

          .number2 {
            font-weight: 500;
            font-size: 24px;
            color: #2acfff;
          }
        }
      }
      .data-box {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 20px;

        .box {
          width: 176px;
          height: 179px;
          text-align: center;

          .data1 {
            font-weight: 500;
            font-size: 48px;
            color: #32c5ff;
            text-align: center;
            text-transform: none;
            margin-top: 41px;
          }

          .data2 {
            font-weight: 400;
            font-size: 22px;
            color: #ffffff;
            text-align: center;
            text-transform: none;
            margin-top: 29px;
          }
        }

        .box1 {
          background: url("../../../assets/images/packagingline/bg-yichang1.png")
            no-repeat;
          background-size: 100% 100%;

          .data1 {
            color: #32c5ff;
          }
        }

        .box2 {
          background: url("../../../assets/images/packagingline/bg-yichang2.png")
            no-repeat;
          background-size: 100% 100%;

          .data1 {
            color: #66ffff;
          }
        }

        .box3 {
          background: url("../../../assets/images/packagingline/bg-yichang3.png")
            no-repeat;
          background-size: 100% 100%;

          .data1 {
            color: #edb83f;
          }
        }
      }
    }
  }
}

.titlebox {
  width: 431px;
  height: 38px;
  background: url("../../../assets/images/bg-title.png") no-repeat;
  background-size: 100% 100%;
  //   text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  line-height: 38px;
  letter-spacing: 2px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
  padding-left: 60px;
  //   .titlename{
  //     position: relative;
  //     left: 24px;
  //   }
}

.titlebox2 {
  display: flex;
  align-items: center;

  .icon {
    margin-right: 10px;
  }

  .titlename {
    font-weight: 400;
    margin-right: 28px;
    font-size: 17px;
    color: #ffffff;
    line-height: 26px;
  }
}

.factoryCode {
  display: flex;
  // justify-content: space-around;
}

.selectborder {
  background-color: transparent;
  border-radius: 4px;
  // border: 2px solid #27408c;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 350px;
  margin-left: 50px;
}

.selectborder1 {
  background-color: transparent;
  border-radius: 4px;
  // border: 2px solid #27408c;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 300px;
  margin-left: 25px;
}

.selectborder select {
  /*清除select的边框样式*/
  border: none;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
  background-color: transparent;
  /*将select的宽高等于div的宽高*/
  width: 100%;
  height: 50px;
  /*隐藏select的下拉图标*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 25px;
  font-weight: 400;
  color: #ffffff;
  line-height: 42px;
}

.selectborder option {
  /*清除select的边框样式*/
  border: none;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
  background-color: transparent;
  /*将select的宽高等于div的宽高*/
  width: 100%;
  height: 50px;
  /*隐藏select的下拉图标*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-left: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #3fa2ff;
  border-radius: 0%;
}

.selectborder1 option {
  /*清除select的边框样式*/
  border: none;
  /*清除select聚焦时候的边框颜色*/
  outline: none;
  background-color: transparent;
  /*将select的宽高等于div的宽高*/
  width: 200px;
  height: 50px;
  /*隐藏select的下拉图标*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-left: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #3fa2ff;
  border-radius: 0%;
}

.selectborder:after {
  content: "";
  width: 24px;
  height: 24px;
  background: url(../../../assets/images/xiala.png) no-repeat center;
  /*通过定位将图标放在合适的位置*/
  position: absolute;
  right: 0px;
  top: 25%;
  /*给自定义的图标实现点击下来功能*/
  pointer-events: none;
}

.selectborder1:after {
  content: "";
  width: 24px;
  height: 24px;
  background: url(../../../assets/images/xiala.png) no-repeat center;
  /*通过定位将图标放在合适的位置*/
  position: absolute;
  right: 0px;
  top: 25%;
  /*给自定义的图标实现点击下来功能*/
  pointer-events: none;
}

::v-deep .el-button--primary {
  color: #ffffff;
  background-color: #325e82;
  border-color: #0a0f19;
}

.active1 {
  background: url("../../../assets/images/quality/bgtable.png");
}

.active2 {
}

::-webkit-scrollbar {
  width: 3px;
  height: 0px;
  background-color: #0c0642;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  background-color: #07356a;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #0091ff;
  // opacity: 0.1;
}

.progress {
  width: 100px;
  background-color: rgba(15, 182, 217, 0.3);
  border-radius: 10px;

  .bar {
    background: linear-gradient(
      90deg,
      rgba(15, 182, 217, 1),
      rgba(1, 255, 255, 1)
    );
    border-radius: 10px;
  }
}
</style>
