lanju-front/src/views/kanban/Packagingline/index.vue

<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">
          <div class="item-table item-table1">
            <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
              id="echart6"
              style="margin: auto; width: 1170px; height: 244.15px"
            ></div>
          </div>
          <div class="itemleft-bottom">
            <div class="item-table1">
              <div class="titlebox" style="margin-bottom: 14px">
                <div class="titlename">效率异常</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>
              <table
                class="table-thead"
                border="0"
                cellpadding="0"
                cellspacing="0"
              >
                <thead>
                  <tr style="height: 36px">
                    <td style="width: 12%">日期</td>
                    <!-- <td style="width: 8%;">异常单号</td> -->
                    <td style="width: 8%">异常类型</td>
                    <td style="width: 8%">异常原因</td>
                  </tr>
                </thead>
              </table>
              <div class="table-tbody">
                <!-- <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: 39px"
                      :key="index"
                      v-for="(n, index) in orderdetail"
                    >
                      <td style="width: 10%">{{ n.incomeTime }}</td>
                      <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
                      <td style="width: 8%">人员问题</td>
                      <td style="width: 8%">理片机坏了</td>
                    </tr>
                  </tbody>
                </table>
                <!-- </vue-seamless-scroll> -->
              </div>
            </div>
            <div class="item-table1">
              <div class="titlebox" style="margin-bottom: 14px">
                <div class="titlename">人员变动分析</div>
              </div>
              <div class="progress">
                <div class="bar" style="width: 73%"></div>
              </div>
              <div class="Totalnumberbox">
                <div class="Totalnumber">
                  <div class="number1">标准用人</div>
                  <div class="number2">8</div>
                </div>
                <div class="Totalnumber Totalnumber1">
                  <div class="number1">实际用人</div>
                  <div class="number2">8</div>
                </div>
              </div>
              <div
                class="titlebox2"
                style="margin-bottom: 17px; margin-top: 18px"
              >
                <div class="icon">
                  <img
                    src="../../../assets/images/packagingline/bg-title3.png"
                    alt=""
                  />
                </div>
                <div class="titlename">每日平均产线人员</div>
              </div>

              <div
                id="echart1"
                style="margin: auto; width: 555.88px; height: 124.67px"
              ></div>
              <table
                class="table-thead"
                border="0"
                cellpadding="0"
                cellspacing="0"
              >
                <thead>
                  <tr style="height: 36px">
                    <td style="width: 12%">日期</td>
                    <!-- <td style="width: 8%;">异常单号</td> -->
                    <td style="width: 8%">标准人数</td>
                    <td style="width: 8%">实际人数</td>
                  </tr>
                </thead>
              </table>
              <div class="table-tbody">
                <!-- <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: 39px"
                      :key="index"
                      v-for="(n, index) in orderdetail"
                    >
                      <td style="width: 10%">{{ n.incomeTime }}</td>
                      <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
                      <td style="width: 8%">12</td>
                      <td style="width: 8%">12</td>
                    </tr>
                  </tbody>
                </table>
                <!-- </vue-seamless-scroll> -->
              </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: 36px">
                    <td
                      style="
                        width: 4%;
                        background-color: #081831;
                        border-right: 1px solid #6c8097;
                      "
                    >
                      产线编码/名称
                    </td>
                    <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
                    <td style="width: 8%">
                      {{ workOrder.equCode }}/{{ workOrder.equName }}
                    </td>
                  </tr>
                  <tr style="height: 36px">
                    <td
                      style="
                        width: 4%;
                        background-color: #081831;
                        border-right: 1px solid #6c8097;
                      "
                    >
                      产品编码
                    </td>
                    <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
                    <td style="width: 8%">{{ workOrder.productCode }}</td>
                  </tr>
                  <tr style="height: 36px">
                    <td
                      style="
                        width: 4%;
                        background-color: #081831;
                        border-right: 1px solid #6c8097;
                      "
                    >
                      产品名称
                    </td>
                    <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
                    <td style="width: 8%">{{ workOrder.productName }}</td>
                  </tr>
                  <tr style="height: 36px">
                    <td
                      style="
                        width: 4%;
                        background-color: #081831;
                        border-right: 1px solid #6c8097;
                      "
                    >
                      工单号
                    </td>
                    <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
                    <td style="width: 8%">{{ workOrder.workorderCodeSap }}</td>
                  </tr>
                  <tr style="height: 36px">
                    <td
                      style="
                        width: 4%;
                        background-color: #081831;
                        border-right: 1px solid #6c8097;
                      "
                    >
                      数量/单位
                    </td>
                    <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
                    <td style="width: 8%">
                      {{ workOrder.totalNum }}/{{ workOrder.unit }}
                    </td>
                  </tr>
                </tbody>
              </table>
              <!-- </vue-seamless-scroll> -->
            </div>
            <div
              class="titlebox2"
              style="margin-bottom: 17px; margin-top: 18px"
            >
              <div class="icon">
                <img
                  src="../../../assets/images/packagingline/bg-title3.png"
                  alt=""
                />
              </div>
              <div class="titlename">实时数量</div>
            </div>
            <div class="Realtime">
              <div class="Realtime-box">
                <div class="box" :key="index" v-for="(x, index) in Realtimebox">
                  <div class="icon1">
                    <img
                      src="../../../assets/images/packagingline/icon-title4.png"
                      alt=""
                    />
                  </div>
                  <div class="item">
                    <div class="itemtitle">发片数量</div>
                    <div class="itemnumber">888</div>
                  </div>
                </div>
              </div>
              <div class="Realtime-box" style="margin-top: 26px">
                <div
                  class="box"
                  :key="index"
                  v-for="(x, index) in Realtimebox2"
                >
                  <div class="icon1">
                    <img
                      src="../../../assets/images/packagingline/icon-title4.png"
                      alt=""
                    />
                  </div>
                  <div class="item">
                    <div class="itemtitle">发片数量</div>
                    <div class="itemnumber">888</div>
                  </div>
                </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 class="number2">4625</div>
              </div>
              <div class="Totalnumber Totalnumber1">
                <div class="number1">标准效率</div>
                <div class="number2">700 PC/H</div>
              </div>
              <div class="Totalnumber Totalnumber1">
                <div class="number1">实际效率</div>
                <div class="number2">700 PC/H</div>
              </div>
            </div>

            <div
              id="echart5"
              style="margin: auto; width: 570px; height: 304.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,
} 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: [{}, {}, {}, {}],
      Realtimebox2: [{}, {}, {}, {}],
      workOrder: {},
      // 当日计划产量
      planProduction: [],
      // 当日实际产量
      actProduction: [],
    };
  },
  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();
      getProductionLineInfo({
        equCode: _this.selectxtclasses,
        factoryCode: "ds_" + _this.selectxt,
      }).then((response) => {
        if (response) {
          _this.workOrder = response.data.workOrder;
        }
      });
    },
    // 订单异常信息
    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 data6 = this.optionDatalist6;
      var myChart1 = echarts.init(document.querySelector("#echart1"));
      var fontColor = "#D0DEEE";
      var xData = (function () {
        var data = [];
        for (var i = 2; i < 8; i++) {
          data.push(i + "月");
        }
        return data;
      })();
      var option1 = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          top: "20%",
          containLabel: true,
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.5)",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "rgba(255,255,255,0.7)",
              fontSize: 18,
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "rgba(255,255,255,0.5)",
              fontSize: 20,
            },
            splitArea: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "女",
            type: "bar",
            stack: "总量",
            barMaxWidth: 35,
            barGap: "10%",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#121A2E", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#2F61EB", // 0% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: [709, 1917, 2455, 2610, 1719, 1433],
          },

          {
            name: "男",
            type: "bar",
            stack: "总量",
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#7ABDF9", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#7ABDF9", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                barBorderRadius: 0,
              },
            },
            data: [100, 100, 100, 100, 100, 100],
          },
        ],
      };
      myChart1.setOption(option1);
      var myChart5 = echarts.init(document.querySelector("#echart5"));
      var fontColor = "#D0DEEE";
      var option5 = {
        // backgroundColor: '#424956',
        // title: {
        //     text: '请求数',
        //     textStyle: {
        //         fontWeight: 'normal',
        //         fontSize: 16,
        //         color: '#F1F1F3'
        //     },
        //     left: '6%'
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#57617B",
            },
          },
        },
        legend: {
          // itemWidth: 14,
          // itemHeight: 5,
          // itemGap: 13,
          // data: ['移动', '电信', '联通'],
          // right: '4%',
          // textStyle: {
          //     fontSize: 12,
          //     color: '#292f39'
          // },
          show: true,
          right: "4%",
          y: "10",
          icon: "stack",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#D0DEEE",
          },

          // nameTextStyle:{
          //         color: '#D0DEEE'
          //     },
          data: ["移动", "电信", "联通"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          top: "20%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
            data: [
              "13:00",
              "13:05",
              "13:10",
              "13:15",
              "13:20",
              "13:25",
              "13:30",
              "13:35",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位（%）",
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
              },
            },
            splitLine: {
              lineStyle: {
                color: "#57617B",
              },
            },
          },
        ],
        series: [
          {
            name: "移动",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 3,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgba(16,97,204, 0.3)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(17,235,210, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgba(16,97,204,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(17,235,210,1)",
                  },
                ]),
              },
              emphasis: {
                color: "rgb(0,196,132)",
                borderColor: "rgba(0,196,132,0.2)",
                extraCssText: "box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);",
                borderWidth: 10,
              },
            },
            data: [220, 182, 191, 134, 150, 120, 110, 125],
          },
          {
            name: "电信",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 3,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(205,52,42, 0.5)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(235,235,21, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgba(205,52,42,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(235,235,21,1)",
                  },
                ]),
              },
              emphasis: {
                color: "rgb(99,250,235)",
                borderColor: "rgba(99,250,235,0.2)",
                extraCssText: "box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);",
                borderWidth: 10,
              },
            },
            data: [120, 110, 125, 145, 122, 165, 122, 220],
          },
        ],
      };
      myChart5.setOption(option5);
      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: "计划产量",
            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) {
          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);
        }
      });
    },
    //左侧第一个选择类型下拉框 回调函数
  },
};
</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: 442px;
        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;

              .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;
                }
              }
            }
          }

          .yieldbox:first-child {
            margin-right: 90px;
          }
        }
      }

      .itemleft-bottom {
        display: flex;

        .item-table1 {
          width: 610px;
          height: 456px;
          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: 180px;
          // 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 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .Totalnumber {
          width: 155px;
          height: 49px;
          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;
          }
        }
        .Totalnumber1 {
          width: 176px;
        }
      }
    }
  }
}

.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>