<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="factory">
          <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.shiftId"
                v-for="(x, index) in classesList"
              >
                {{ x.shiftDesc }}
              </option>
              <!-- <option :key="index" :value="x.seriesName" v-for="(x, index) in ceshib">{{ x.seriesName }}</option> -->
            </select>
          </div>
        </div>
        <div class="timebox">
          <div class="time">
            {{ gettimedata }}
          </div>
        </div>
      </div>
      <div class="content">
        <div class="item">
          <div class="titlebox">
            <div class="titlename">湿料罐总产量</div>
          </div>
          <div class="item-num">
            <img src="../../../assets/images/bg-zongchaliang.png" alt="" />
            <div class="number">{{ number4 }}</div>
          </div>
          <div class="titlebox">
            <div class="titlename">湿料罐产量</div>
          </div>
          <div class="echartsbox">
            <div
              id="echart4"
              style="margin: auto; width: 395px; height: 316px"
            ></div>
          </div>
          <div class="titlebox">
            <div class="titlename">湿料罐产量占比</div>
          </div>
          <div class="echartsbox echartspie">
            <Echarts3D
              :list="optionDatalist4"
              :colorlist="colorlist"
              style="margin: auto; width: 409.17px; height: 173px"
            ></Echarts3D>
          </div>
        </div>
        <div class="item">
          <div class="titlebox">
            <div class="titlename">成型机总产量</div>
          </div>
          <div class="item-num">
            <img src="../../../assets/images/bg-zongchaliang.png" alt="" />
            <div class="number">{{ number1 }}</div>
          </div>
          <div class="titlebox">
            <div class="titlename">成型机产量</div>
          </div>
          <div class="echartsbox">
            <div
              id="echart1"
              style="margin: auto; width: 395px; height: 316px"
            ></div>
          </div>
          <div class="titlebox">
            <div class="titlename">成型机产量占比</div>
          </div>
          <div class="echartsbox echartspie">
            <Echarts3D
              :list="optionDatalist1"
              :colorlist="colorlist"
              style="margin: auto; width: 439.17px; height: 183px"
            ></Echarts3D>
          </div>
        </div>
        <div class="item">
          <div class="titlebox">
            <div class="titlename">烘房总产量</div>
          </div>
          <div class="item-num">
            <img src="../../../assets/images/bg-zongchaliang.png" alt="" />
            <div class="number">{{ number2 }}</div>
          </div>
          <div class="titlebox">
            <div class="titlename">烘房产量</div>
          </div>
          <div class="echartsbox">
            <div
              id="echart2"
              style="margin: auto; width: 395px; height: 316px"
            ></div>
          </div>
          <div class="titlebox">
            <div class="titlename">烘房产量占比</div>
          </div>
          <div class="echartsbox echartspie">
            <Echarts3D
              :list="optionDatalist2"
              :colorlist="colorlist"
              style="margin: auto; width: 409.17px; height: 173px"
            ></Echarts3D>
          </div>
        </div>
        <div class="item">
          <div class="titlebox">
            <div class="titlename">收坯机总产量</div>
          </div>
          <div class="item-num">
            <img src="../../../assets/images/bg-zongchaliang.png" alt="" />
            <div class="number">{{ number3 }}</div>
          </div>
          <div class="titlebox">
            <div class="titlename">收坯机产量</div>
          </div>
          <div class="echartsbox">
            <div
              id="echart3"
              style="margin: auto; width: 395px; height: 316px"
            ></div>
          </div>
          <div class="titlebox">
            <div class="titlename">收坯机产量占比</div>
          </div>
          <div class="echartsbox echartspie">
            <Echarts3D
              :list="optionDatalist3"
              :colorlist="colorlist"
              style="margin: auto; width: 409.17px; height: 173px"
            ></Echarts3D>
          </div>
        </div>

        <!-- <div class="item"></div> -->
        <!-- <div class="item"></div> -->
      </div>
    </div>
  </v-scale-screen>
</template>

<script>
import {
  getBoardFactory,
  getMesBoardEquProductionToday,
  getBoardShifts,
} from "@/api/kanban/dailyoutput";
import * as echarts from "echarts";
import moment from "moment";
import Echarts3D from "./echarts3d.vue";
import Echarts3D2 from "./echarts3d2.vue";
export default {
  name: "Index",
  components: {
    Echarts3D,
    Echarts3D2,
  },
  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: [],
      colorlist: ["#005aff", "#f8b551"],
      datetime: null,
      time1: null,
    };
  },
  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.selectFactorylist();
    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);
    },
    selectFactorylist() {
      const _this = this;
      getBoardFactory({
        factory: null,
      }).then((response) => {
        if (response.data) {
          _this.getLineList = response.data;
          _this.selectxt = _this.getLineList[0].parentName;
          getBoardShifts({
            factory: _this.selectxt,
          }).then((response) => {
            if (response.data) {
              console.log(response.data);
              _this.classesList = response.data;
              _this.selectxtclasses = _this.classesList[0].shiftId;
              _this.initChart1();
              _this.time1 = setInterval(() => {
                _this.initChart1();
              }, 1000 * 60 * 1);
            }
          });
        }
      });
    },
    initChart1() {
      const _this = this;
      var myChart1 = echarts.init(document.querySelector("#echart1"));
      var option1 = {
        grid: {
          left: "80",
          right: "7%",
          top: "5%",
          bottom: "1%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          show: true,
          axisPointer: {
            type: "none",
          },
          formatter: function (e) {
            return `${e[0].data.name}\n${e[0].marker}${e[0].data.value}`;
          },
        },
        xAxis: {
          name: "辆",
          // max: total,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
          },
          axisLabel: {
            show: true,
          },
          axisTick: {
            show: true,
          },
        },
        yAxis: [
          {
            type: "category",
            inverse: false,
            data: [],
            axisLine: {
              show: true,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
        ],

        series: [
          {
            type: "pictorialBar",
            symbol: "rect",
            // symbolRepeat: "fixed",
            // symbolMargin: "2",
            // symbolClip: true,
            // symbolSize: [5, 20],
            // barWidth: 20,
            data: [],
            label: {
              normal: {
                formatter: "{b}",
                textStyle: {
                  color: "#D0DEEE",
                  fontSize: 12,
                },
                position: "left",
                distance: 10, //
                show: true,
              },
            },
            z: 10,
          },
          {
            type: "bar",
            itemStyle: {
              color: "#141A27",
            },
            label: {
              normal: {
                formatter: "{b}",
                textStyle: {
                  color: "#D0DEEE",
                  fontSize: 12,
                },
                position: "right",
                distance: 10, //
                show: true,
              },
            },
            data: [], // value鍊�
            tooltip: {
              show: false,
            },
            // barWidth: 30,
          },
        ],
      };
      myChart1.setOption(option1);
      getMesBoardEquProductionToday({
        factory: _this.selectxt,
        shiftId: _this.selectxtclasses,
        ymd: _this.datetime,
        equTypeCode: "equ_type_cxj",
      }).then((response) => {
        if (response) {
          if (response.data) {
            let numberlist = [];
            let dataoption = [];
            let totalArr = [];
            let barWidth1 = 20;
            let barWidth2 = 30;
            _this.optionDatalist1 = [];
            if (response.data.totalNum.length > 0) {
              _this.number1 = response.data.totalNum[0].totalNum;
            }
            if (response.data.everyNum.length > 0) {
              response.data.everyNum.forEach((item) => {
                let a = {};
                a.name = item.equName;
                a.value = item.totalNum;
                a.code = item.equCode;
                _this.optionDatalist1.push(a);
                dataoption.push(a);
                numberlist.push(item.totalNum);
              });
              // response.data.everyNum.forEach((item) => {
              //   let a = {};
              //   a.name = item.equName;
              //   a.value = item.totalNum;
              //   a.code = item.equCode;
              //   dataoption.push(a);
              //   _this.optionDatalist1.push(a);
              // });
              // response.data.everyNum.forEach((item) => {
              //   let a = {};
              //   a.name = item.equName;
              //   a.value = item.totalNum;
              //   a.code = item.equCode;
              //   dataoption.push(a);
              //   _this.optionDatalist1.push(a);
              // });
              // response.data.everyNum.forEach((item) => {
              //   let a = {};
              //   a.name = item.equName;
              //   a.value = item.totalNum;
              //   a.code = item.equCode;
              //   dataoption.push(a);
              //   _this.optionDatalist1.push(a);
              // });
              // response.data.everyNum.forEach((item) => {
              //   let a = {};
              //   a.name = item.equName;
              //   a.value = item.totalNum;
              //   a.code = item.equCode;
              //   dataoption.push(a);
              //   _this.optionDatalist1.push(a);
              // });
              dataoption.sort((a, b) => {
                return a.value - b.value;
              });
              let max = Math.max(...numberlist);
              max = max + 100;
              dataoption.forEach((item) => {
                totalArr.push(max);
              });
              if (dataoption.length > 10) {
                barWidth1 = "";
                barWidth2 = "";
              }
              option1 = {
                yAxis: [
                  {
                    data: dataoption,
                  },
                ],
                series: [
                  {
                    data: dataoption,
                    itemStyle: {
                      normal: {
                        color: function (params) {
                          var index_num = params.value;

                          for (var i = 0; i < dataoption.length; i++) {
                            //判断数据是否大于1
                            if (index_num > 1131) {
                              //var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
                              //return colorList[params.dataIndex];
                              return new echarts.graphic.LinearGradient(
                                0,
                                0,
                                1,
                                0,
                                [
                                  { offset: 0, color: "#FFB742" },
                                  { offset: 1, color: "#FFB742" },
                                ]
                              );
                            } else {
                              //var colorList = ['blue'];
                              //return colorList[params.dataIndex];
                              return new echarts.graphic.LinearGradient(
                                0,
                                0,
                                1,
                                0,
                                [
                                  { offset: 0, color: "#005954" },
                                  { offset: 1, color: "#66E1DF" },
                                ]
                              );
                            }
                          }
                        },
                      },
                    },
                    barWidth: barWidth1,
                  },
                  {
                    data: totalArr,
                    barWidth: barWidth2,
                  },
                ],
              };
              myChart1.setOption(option1);
            }
          }
        }
      });
      var myChart2 = echarts.init(document.querySelector("#echart2"));
      var option2 = {
        grid: {
          left: "70",
          right: "7%",
          top: "5%",
          bottom: "1%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          show: true,
          axisPointer: {
            type: "none",
          },
          formatter: function (e) {
            return `${e[0].data.name}\n${e[0].marker}${e[0].data.value}`;
          },
        },
        xAxis: {
          name: "辆",
          // max: total,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
          },
          axisLabel: {
            show: true,
          },
          axisTick: {
            show: true,
          },
        },
        yAxis: [
          {
            type: "category",
            inverse: false,
            data: [],
            axisLine: {
              show: true,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
        ],

        series: [
          {
            type: "pictorialBar",
            symbol: "rect",
            // symbolRepeat: "fixed",
            // symbolMargin: "2",
            // symbolClip: true,
            // symbolSize: [5, 20],
            barWidth: 20,
            data: [],
            label: {
              normal: {
                formatter: "{b}",
                textStyle: {
                  color: "#D0DEEE",
                  fontSize: 14,
                },
                position: "left",
                distance: 10, //
                show: true,
              },
            },
            z: 10,
          },
          {
            type: "bar",
            itemStyle: {
              color: "#141A27",
            },
            label: {
              normal: {
                formatter: "{b}",
                textStyle: {
                  color: "#D0DEEE",
                  fontSize: 14,
                },
                position: "right",
                distance: 10, //
                show: true,
              },
            },
            data: [], // value鍊�
            tooltip: {
              show: false,
            },
            barWidth: 30,
          },
        ],
      };
      myChart2.setOption(option2);
      getMesBoardEquProductionToday({
        factory: _this.selectxt,
        shiftId: _this.selectxtclasses,
        ymd: _this.datetime,
        equTypeCode: "equ_type_hf",
      }).then((response) => {
        if (response) {
          if (response.data) {
            let numberlist = [];
            let dataoption = [];
            let totalArr = [];
            _this.optionDatalist2 = [];
            if (response.data.totalNum.length > 0) {
              _this.number2 = response.data.totalNum[0].totalNum;
            }
            if (response.data.everyNum.length > 0) {
              response.data.everyNum.forEach((item) => {
                let a = {};
                a.name = item.equName;
                a.value = item.totalNum;
                a.code = item.equCode;
                _this.optionDatalist2.push(a);
                dataoption.push(a);
                numberlist.push(item.totalNum);
              });
              dataoption.sort((a, b) => {
                return a.value - b.value;
              });
              let max = Math.max(...numberlist);
              max = max + 100;
              dataoption.forEach((item) => {
                totalArr.push(max);
              });
              option2 = {
                yAxis: [
                  {
                    data: dataoption,
                  },
                ],
                series: [
                  {
                    data: dataoption,
                    itemStyle: {
                      normal: {
                        color: function (params) {
                          var index_num = params.value;

                          for (var i = 0; i < dataoption.length; i++) {
                            //判断数据是否大于1
                            if (index_num > 1131) {
                              //var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
                              //return colorList[params.dataIndex];
                              return new echarts.graphic.LinearGradient(
                                0,
                                0,
                                1,
                                0,
                                [
                                  { offset: 0, color: "#FFB742" },
                                  { offset: 1, color: "#FFB742" },
                                ]
                              );
                            } else {
                              //var colorList = ['blue'];
                              //return colorList[params.dataIndex];
                              return new echarts.graphic.LinearGradient(
                                0,
                                0,
                                1,
                                0,
                                [
                                  { offset: 0, color: "#005954" },
                                  { offset: 1, color: "#66E1DF" },
                                ]
                              );
                            }
                          }
                        },
                      },
                    },
                  },
                  {
                    data: totalArr,
                  },
                ],
              };
              myChart2.setOption(option2);
            }
          }
        }
      });
      var myChart3 = echarts.init(document.querySelector("#echart3"));
      var option3 = {
        grid: {
          left: "70",
          right: "7%",
          top: "5%",
          bottom: "1%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          show: true,
          axisPointer: {
            type: "none",
          },
          formatter: function (e) {
            return `${e[0].data.name}\n${e[0].marker}${e[0].data.value}`;
          },
        },
        xAxis: {
          name: "辆",
          // max: total,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
          },
          axisLabel: {
            show: true,
          },
          axisTick: {
            show: true,
          },
        },
        yAxis: [
          {
            type: "category",
            inverse: false,
            data: [],
            axisLine: {
              show: true,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
        ],

        series: [
          {
            type: "pictorialBar",
            symbol: "rect",
            // symbolRepeat: "fixed",
            // symbolMargin: "2",
            // symbolClip: true,
            // symbolSize: [5, 20],
            barWidth: 20,
            data: [],
            label: {
              normal: {
                formatter: "{b}",
                textStyle: {
                  color: "#D0DEEE",
                  fontSize: 14,
                },
                position: "left",
                distance: 10, //
                show: true,
              },
            },
            z: 10,
          },
          {
            type: "bar",
            itemStyle: {
              color: "#141A27",
            },
            label: {
              normal: {
                formatter: "{b}",
                textStyle: {
                  color: "#D0DEEE",
                  fontSize: 14,
                },
                position: "right",
                distance: 10, //
                show: true,
              },
            },
            data: [], // value鍊�
            tooltip: {
              show: false,
            },
            barWidth: 30,
          },
        ],
      };
      myChart3.setOption(option3);
      getMesBoardEquProductionToday({
        factory: _this.selectxt,
        shiftId: _this.selectxtclasses,
        ymd: _this.datetime,
        equTypeCode: "equ_type_spj",
      }).then((response) => {
        if (response) {
          if (response.data) {
            let numberlist = [];
            let dataoption = [];
            let totalArr = [];
            _this.optionDatalist3 = [];

            if (response.data.totalNum.length > 0) {
              _this.number3 = response.data.totalNum[0].totalNum;
            }
            if (response.data.everyNum.length > 0) {
              response.data.everyNum.forEach((item) => {
                let a = {};
                a.name = item.equName;
                a.value = item.totalNum;
                a.code = item.equCode;
                _this.optionDatalist3.push(a);
                dataoption.push(a);
                numberlist.push(item.totalNum);
              });
              dataoption.sort((a, b) => {
                return a.value - b.value;
              });
              let max = Math.max(...numberlist);
              max = max + 100;
              dataoption.forEach((item) => {
                totalArr.push(max);
              });
              option3 = {
                yAxis: [
                  {
                    data: dataoption,
                  },
                ],
                series: [
                  {
                    data: dataoption,
                    itemStyle: {
                      normal: {
                        color: function (params) {
                          var index_num = params.value;

                          for (var i = 0; i < dataoption.length; i++) {
                            //判断数据是否大于1
                            if (index_num > 1131) {
                              //var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
                              //return colorList[params.dataIndex];
                              return new echarts.graphic.LinearGradient(
                                0,
                                0,
                                1,
                                0,
                                [
                                  { offset: 0, color: "#FFB742" },
                                  { offset: 1, color: "#FFB742" },
                                ]
                              );
                            } else {
                              //var colorList = ['blue'];
                              //return colorList[params.dataIndex];
                              return new echarts.graphic.LinearGradient(
                                0,
                                0,
                                1,
                                0,
                                [
                                  { offset: 0, color: "#005954" },
                                  { offset: 1, color: "#66E1DF" },
                                ]
                              );
                            }
                          }
                        },
                      },
                    },
                  },
                  {
                    data: totalArr,
                  },
                ],
              };
              myChart3.setOption(option3);
            }
          }
        }
      });
      var myChart4 = echarts.init(document.querySelector("#echart4"));
      var option4 = {
        grid: {
          left: "70",
          right: "7%",
          top: "5%",
          bottom: "1%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          show: true,
          axisPointer: {
            type: "none",
          },
          formatter: function (e) {
            return `${e[0].data.name}\n${e[0].marker}${e[0].data.value}`;
          },
        },
        xAxis: {
          name: "辆",
          // max: total,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
          },
          axisLabel: {
            show: true,
          },
          axisTick: {
            show: true,
          },
        },
        yAxis: [
          {
            type: "category",
            inverse: false,
            data: [],
            axisLine: {
              show: true,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
        ],

        series: [
          {
            type: "pictorialBar",
            symbol: "rect",
            // symbolRepeat: "fixed",
            // symbolMargin: "2",
            // symbolClip: true,
            // symbolSize: [5, 20],
            barWidth: 20,
            data: [],
            label: {
              normal: {
                formatter: "{b}",
                textStyle: {
                  color: "#D0DEEE",
                  fontSize: 14,
                },
                position: "left",
                distance: 10, //
                show: true,
              },
            },
            z: 10,
          },
          {
            type: "bar",
            itemStyle: {
              color: "#141A27",
            },
            label: {
              normal: {
                formatter: "{b}",
                textStyle: {
                  color: "#D0DEEE",
                  fontSize: 14,
                },
                position: "right",
                distance: 10, //
                show: true,
              },
            },
            data: [], // value鍊�
            tooltip: {
              show: false,
            },
            barWidth: 30,
          },
        ],
      };
      myChart4.setOption(option4);
      getMesBoardEquProductionToday({
        factory: _this.selectxt,
        shiftId: _this.selectxtclasses,
        ymd: _this.datetime,
        equTypeCode: "equ_type_lg",
      }).then((response) => {
        if (response) {
          if (response.data) {
            let numberlist = [];
            let dataoption = [];
            let totalArr = [];
            _this.optionDatalist4 = [];
            if (response.data.totalNum.length > 0) {
              _this.number4 = response.data.totalNum[0].totalNum;
            }
            if (response.data.everyNum.length > 0) {
              response.data.everyNum.forEach((item) => {
                let a = {};
                a.name = item.equName;
                a.value = item.totalNum;
                a.code = item.equCode;
                _this.optionDatalist4.push(a);
                dataoption.push(a);
                numberlist.push(item.totalNum);
              });
              dataoption.sort((a, b) => {
                return a.value - b.value;
              });
              let max = Math.max(...numberlist);
              max = max + 100;
              dataoption.forEach((item) => {
                totalArr.push(max);
              });
              option4 = {
                yAxis: [
                  {
                    data: dataoption,
                  },
                ],
                series: [
                  {
                    data: dataoption,
                    itemStyle: {
                      normal: {
                        color: function (params) {
                          var index_num = params.value;

                          for (var i = 0; i < dataoption.length; i++) {
                            //判断数据是否大于1
                            if (index_num > 1131) {
                              //var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
                              //return colorList[params.dataIndex];
                              return new echarts.graphic.LinearGradient(
                                0,
                                0,
                                1,
                                0,
                                [
                                  { offset: 0, color: "#FFB742" },
                                  { offset: 1, color: "#FFB742" },
                                ]
                              );
                            } else {
                              //var colorList = ['blue'];
                              //return colorList[params.dataIndex];
                              return new echarts.graphic.LinearGradient(
                                0,
                                0,
                                1,
                                0,
                                [
                                  { offset: 0, color: "#005954" },
                                  { offset: 1, color: "#66E1DF" },
                                ]
                              );
                            }
                          }
                        },
                      },
                    },
                  },
                  {
                    data: totalArr,
                  },
                ],
              };
              myChart4.setOption(option4);
            }
          }
        }
      });
    },
    selectline() {
      const _this = this;
      this.optionDatalist1 = [];
      this.optionDatalist2 = [];
      this.optionDatalist3 = [];
      this.optionDatalist4 = [];
      getBoardShifts({
        factory: _this.selectxt,
      }).then((response) => {
        if (response.data) {
          console.log(response.data);
          _this.classesList = response.data;
          _this.selectxtclasses = _this.classesList[0].shiftId;
          _this.initChart1();
        }
      });
    },
    selectline2() {
      this.initChart1();
    },
    //左侧第一个选择类型下拉框 回调函数
  },
};
</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;
    .factory {
      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;
    justify-content: space-between;
    .item {
      width: 455px;
      height: 912px;
      background: url("../../../assets/images/bg-border3.png") no-repeat;
      background-size: 100% 100%;
      padding: 14px 0px 0px 33px;
      box-sizing: border-box;
      .item-num {
        margin-top: 30px;
        margin-bottom: 26px;
        text-align: center;
        position: relative;
        .number {
          position: absolute;
          top: 0px;
          left: 0px;
          right: 0px;
          bottom: 0px;
          font-size: 66px;
          font-weight: bold;
          color: #1afcff;
          line-height: 99px;
          text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
        }
      }
      .echartsbox {
        margin-bottom: 27px;
      }
      .echartspie {
        margin-top: 24px;
      }
    }
  }
}
.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;
  //   }
}
.factory {
  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: 310px;
  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: 88px;
  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;
}
</style>