<template>
  <div class="app-container">
    <div class="headTitle">注塑车间品质生产监控平台</div>
    <div class="title" v-for="(i,k) in title"
         :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
      {{ i }}
    </div>
    <!--每日人力出勤-->
    <div class="manpowerAttendance" id="manpowerAttendance">
      <Chart ref="manpowerAttendance"></Chart>
    </div>

    <!--IQC-->
    <div class="IQC" id="IQC">
      <div style="background-color: #09417088">
        <div class="scrollTableItem" style="font-weight: bold; width: 8%;">
          序号
        </div>
        <div class="scrollTableItem" style="font-weight: bold; width:20%;">
          订单编号
        </div>
        <div class="scrollTableItem" style="font-weight: bold;width: 37%">
          产品型号
        </div>
        <div class="scrollTableItem" style="font-weight: bold; width: 12%;">
          订单数量
        </div>
        <div class="scrollTableItem" style="font-weight: bold; width: 12%;">
          完成数量
        </div>
        <div class="scrollTableItem" style="font-weight: bold; width: 11%;">
          差异数
        </div>
      </div>
      <vue-seamless-scroll
          :class-option="scrollTableOption"
          :data="scrollTableData"
          class="case-item"
          style="height: calc(100% - 35px);overflow: hidden;"
      >
        <div
            v-for="(item, index) in scrollTableData"
            :key="index"

        >
          <div :style='"background-color:" + ((index % 2 === 0)? "#05346088":"#032d5788")+";line-height:1.8vw"'>
            <div
                class="scrollTableItem" style=" width: 8%;">
              {{ item.COLUMN_A }}
            </div>
            <div
                class="scrollTableItem" style=" width:20%;">
              {{ item.COLUMN_B }}
            </div>
            <div
                class="scrollTableItem" style="width: 37%">
              {{ item.COLUMN_C }}
            </div>
            <div
                class="scrollTableItem" style=" width: 12%;">
              {{ item.COLUMN_D }}
            </div>
            <div
                class="scrollTableItem" style=" width: 12%;">
              {{ item.COLUMN_E }}
            </div>
            <div
                class="scrollTableItem" style=" width: 11%;">
              {{ item.COLUMN_F }}
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>

    <!--生产效率-->
    <div class="productionEfficiency" id="productionEfficiency">
      <Chart ref="productionEfficiency"></Chart>
    </div>


    <!--周质量分析-->
    <div class="equipmentPowerOne" id="equipmentPowerOne">
      <Chart ref="equipmentPowerOne"></Chart>
    </div>
    <div class="equipmentPowerTwo" id="equipmentPowerTwo">
      <Chart ref="equipmentPowerTwo"></Chart>
    </div>
    <div class="equipmentPowerThree" id="equipmentPowerThree">
      <Chart ref="equipmentPowerThree"></Chart>
    </div>
    <div class="equipmentPowerFour" id="equipmentPowerFour">
      <Chart ref="equipmentPowerFour"></Chart>
    </div>
    <div class="equipmentPowerFive" id="equipmentPowerFive">
      <Chart ref="equipmentPowerFive"></Chart>
    </div>
    <div class="equipmentPowerSix" id="equipmentPowerSix">
      <Chart ref="equipmentPowerSix"></Chart>
    </div>

    <!--不良品监控-->
    <div class="defectiveProducts" id="defectiveProducts">
      <Chart ref="defectiveProducts"></Chart>
    </div>

    <div class="topLeft" id="topLeft">
      <Chart ref="topLeft"></Chart>
    </div>

    <div v-html="safeDayHtml"></div>
    <div class="totalNum">合计：{{ totalNum }}台</div>
    <div class="info1">订单数量:{{ info1.ddsl }} 完成数量:{{ info1.wcsl }} 清单率:{{
        info1.wcsl === 0 ? 0 : ((info1.wcsl / info1.ddsl) * 100).toFixed(2)
      }}%
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import Chart from "../../../components/board/Chart";
import * as echarts from 'echarts'
import {getData} from "@/api/board/getData";
import {mixData} from "@/api/board/mixData";

let intervalFun = null
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default {
  components: {
    vueSeamlessScroll,
    Chart
  },
  name: "Liner",
  data() {
    return {
      nowLine: 2,
      nowWeek: "",
      info1: {
        "ddsl": 1000,
        "wcsl": 1000
      },
      title: [
        '产量统计',
        '三日订单执行情况',
        'OEE',
        '周生产型号统计',
        '机台完成情况',
        '不良品监控',
      ],
      totalNum: 0,
      titlePosition: [
        {
          top: 11.5,
          left: 5.5
        },
        {
          top: 11.5,
          left: 32
        },
        {
          top: 11.5,
          left: 73.5
        },
        {
          top: 55.4,
          left: 5.5
        },
        {
          top: 55.4,
          left: 32
        },
        {
          top: 55.4,
          left: 73.6
        },
      ],
      scrollTableOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0,
      },
      scrollTableData: [],
      safeDayHtml: null,
      RequestDataSet: [
        {
          e: 'zh-1-01',
          i: "scada_aq_pro_tj_02('CX_01')",
          f: (e) => {
            this.totalNum = e.reduce((v1, v2) => v1 + v2.Y_VALUE_TWO, 0)
            this.$refs.topLeft.setData({
              grid: {
                top: "20%",
                left: "1%",
                right: "5%",
                bottom: "1%",
                containLabel: true,
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              legend: {
                right: '0',
                data: ['计划产量', '实际产量'],
                textStyle: {
                  fontSize: 0.75 * vw,
                  color: "#F1F1F3",
                },
              },
              xAxis: [
                {
                  type: 'category',
                  axisTick: {show: false},
                  axisLabel: {
                    rotate: -20,
                    margin: 20,
                    textStyle: {
                      fontSize: 0.75 * vw,
                      color: "#F1F1F3",
                    },
                  },
                  data: e.map(e => e.X_VALUE),
                }
              ],
              yAxis: [
                {
                  axisLabel: {
                    textStyle: {
                      fontSize: 0.75 * vw,
                      color: "#F1F1F3",
                    },
                  },
                  splitLine: {
                    lineStyle: {
                      color: "rgba(255,255,255,0.1)",
                    },
                  },
                  type: 'value'
                }
              ],
              series: [
                {
                  name: '计划产量',
                  type: 'bar',
                  barGap: 0,
                  emphasis: {
                    focus: 'series'
                  },
                  barWidth: '30%',
                  barMaxWidth: '50px',
                  itemStyle: {
                    //图形样式
                    normal: {
                      color: true ? '#db8151' : "#64BCEC",
                    },
                  },
                  label: {
                    show: true,
                    position: "top",
                    formatter: `{c}${''}`,
                    textStyle: {
                      color: "rgba(255,255,255,0.5)",
                      fontSize: 0.75 * vw
                    },
                  },
                  data: e.map(e => e.Y_VALUE_ONE),
                },
                {
                  name: '实际产量',
                  type: 'bar',
                  emphasis: {
                    focus: 'series'
                  },
                  barWidth: '30%',
                  barMaxWidth: '50px',
                  barGap: '40%',
                  label: {
                    show: true,
                    position: "top",
                    formatter: `{c}${''}`,
                    textStyle: {
                      color: "rgba(255,255,255,0.5)",
                      fontSize: 0.75 * vw
                    },
                  },
                  itemStyle: {
                    //图形样式
                    normal: {
                      color: true ? '#9ce375' : "#4FD3B9",
                    },
                  },
                  data: e.map(e => e.Y_VALUE_TWO),
                },
              ]
            })
          }
        },
        {
          e: 'zh-1-03',
          i: "scada_aq_pro_three_02('CX_01')",
          f: (e) => {
            this.info1 = {
              ddsl: e.reduce((v1, v2) => v1 + parseFloat(v2.COLUMN_D) || 0, 0),
              wcsl: e.reduce((v1, v2) => v1 + parseFloat(v2.COLUMN_E) || 0, 0)
            }
            this.scrollTableData = e
          }
        },
        {
          e: 'zh-1-05',
          i: "",
          f: (e) => {
            this.$refs.manpowerAttendance.setData({
              color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'],
              grid: {
                top: "20%",
                bottom: "15%",
                right: "5%"
              },
              dataZoom: [],
              xAxis: {
                margin: 10,
                nameTextStyle: {
                  color: '#c0c3cd',
                  padding: [0, 0, -10, 0],
                  fontSize: 14,
                },
                axisLabel: {
                  color: '#c0c3cd', //X轴文字
                  fontSize: 14,
                  interval: 0,
                  margin: 20,
                  rotate: -20,
                },
                axisTick: {
                  lineStyle: {
                    color: '#0B1535',
                    width: 1,
                  },
                  show: false,
                },
                splitLine: {
                  show: false,
                },
                axisLine: {
                  lineStyle: {
                    color: '#384267',
                    width: 1,
                    type: 'dashed',
                  },
                  show: true,
                },
                data: e.x,
                type: 'category',
              },
              yAxis: {
                type: 'value',
                nameTextStyle: {
                  color: '#c0c3cd',
                  padding: [0, 0, -10, 0],
                  fontSize: 14,
                },
                axisLabel: {
                  color: '#c0c3cd', //Y轴文字
                  fontSize: 14,
                },
                axisTick: {
                  lineStyle: {
                    color: '#384267',
                    width: 1,
                  },
                  show: true,
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#384267',
                    type: 'line',
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: '#fff',
                    width: 1,
                    type: 'line',
                  },
                  show: false,
                },
              },
              series: [
                {
                  data: e.y,
                  type: 'pictorialBar',
                  barMaxWidth: 'auto',
                  barWidth: 1.5 * vw,
                  symbol: 'rect',
                  itemStyle: {
                    color: function (val) {
                      if (e.y.length - val.dataIndex === 1) {
                        return 'red'
                      } else if (e.y.length - val.dataIndex === 2) {
                        return 'yellow'

                      } else {
                        return '#35AAFE'
                      }
                    }
                  },
                  label: {
                    normal: {
                      show: true,
                      position: "top",
                      textStyle: {
                        color: "#a8aab0",
                        fontStyle: "normal",
                        fontFamily: "微软雅黑",
                        fontSize: 0.75 * vw,
                      },
                    },
                  }
                },
                {
                  data: e.y,
                  type: 'pictorialBar',
                  barWidth: 1.5 * vw,
                  symbolPosition: 'end',
                  symbol: 'diamond',
                  itemStyle: {
                    color: function (val) {
                      if (e.y.length - val.dataIndex === 1) {
                        return 'red'
                      } else if (e.y.length - val.dataIndex === 2) {
                        return 'yellow'
                      } else {
                        return '#66c8ff'
                      }
                    }
                  },
                  symbolOffset: ['0%', '-50%'],
                  symbolSize: [1.5 * vw, 10],
                  zlevel: 4,
                },
                {
                  data: e.y.map(val => 1),
                  type: 'pictorialBar',
                  barWidth: 1.5 * vw,
                  symbolPosition: 'end',
                  symbol: 'diamond',
                  itemStyle: {
                    color: function (val) {
                      if (e.y.length - val.dataIndex === 1) {
                        return 'red'
                      } else if (e.y.length - val.dataIndex === 2) {
                        return 'yellow'

                      } else {
                        return '#66c8ff'
                      }
                    }
                  },
                  symbolOffset: ['0%', '-20%'],
                  symbolSize: [1.5 * vw, 10],
                  zlevel: 4,
                },
                // {
                //   type: 'pictorialBar',
                //   name: 'pictorial element',
                //   symbol: function (val, index) {
                //     // return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex]
                //   },
                //   symbolSize: [40, 40],
                //   z: 10,
                //   data: e.y.map(val => {
                //     return {
                //       value: val,
                //       symbolPosition: 'end',
                //       symbolOffset: [0, '-190%']
                //     }
                //   })
                // },
              ]
            })
          }
        },
        {
          e: 'zh-1-06',
          i: "scada_aq_pro_xh_02('CX_01')",
          f: (e) => {
            this.$refs.productionEfficiency.setData({
              grid: {
                top: "10%",
                left: '10%',
                right: "5%",
                bottom: '15%',
                // containLabel: true
              },
              dataZoom: [],
              xAxis: {
                data: e.map(e => e.X_VALUE),
                axisLine: {
                  lineStyle: {
                    color: "#0177d4",
                  },
                },
                axisLabel: {
                  color: "#fff",
                  fontSize: 0.5 * vw,
                  interval: 0,
                  rotate: -20,
                },
              },
              yAxis: {
                nameTextStyle: {
                  color: "#fff",
                  fontSize: 16,
                },
                axisLine: {
                  lineStyle: {
                    color: "#0177d4",
                  },
                },
                axisLabel: {
                  color: "#fff",
                  fontSize: 16,
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#0177d4",
                  },
                },
              },
              series: [
                {
                  type: "bar",
                  barWidth: 1 * vw,
                  itemStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          0,
                          1,
                          [
                            {
                              offset: 0,
                              color: "#00b0ff",
                            },
                            {
                              offset: 0.8,
                              color: "#7052f4",
                            },
                          ],
                          false
                      ),
                    },
                  },
                  label: {
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "#fff",
                      fontSize: 0.75 * vw
                    },
                  },
                  data: e.map(e => e.Y_VALUE),
                },
              ],
            })
          }
        },
        {
          e: 'zh-1-07',
          i: "scada_aq_zj_gx_01('CX_01')",
          f: (e) => {
            let data = e[0] || {}
            this.$refs.equipmentPowerOne.setData({
              series: [
                {
                  type: "pie",
                  clockWise: false,
                  radius: ['60%', '75%'],
                  itemStyle: {
                    normal: {
                      label: {
                        show: false,
                      },
                      labelLine: {
                        show: false,
                      },
                      shadowBlur: 0,
                      shadowColor: "#389af4",
                    },
                  },
                  hoverAnimation: false,
                  center: ["50%", "50%"],
                  data: [
                    {
                      value: parseFloat(data.COLUMN_A),
                      label: {
                        normal: {
                          rich: {
                            a: {
                              color: "#389af4",
                              align: "center",
                              fontSize: 1.1 * vw,
                              fontWeight: "bold",
                            },
                            b: {
                              color: "#fff",
                              align: "center",
                              fontSize: 0.9 * vw,
                            },
                          },
                          formatter: function (params) {
                            return (
                                "{a|" +
                                parseFloat(data.COLUMN_A) +
                                "%}" +
                                "\n{b|内胆检漏}"
                            );
                          },
                          position: "center",
                          show: true,
                          textStyle: {
                            fontSize: "14",
                            fontWeight: "normal",
                            color: "#fff",
                          },
                        },
                      },
                      itemStyle: {
                        normal: {
                          color: "#389af4",
                          shadowColor: "#389af4",
                          shadowBlur: 0,
                        },
                      },
                    },
                    {
                      value: 100 - parseFloat(data.COLUMN_A),
                      name: "invisible",
                      itemStyle: {
                        normal: {
                          color: "#412a4e",
                        },
                        emphasis: {
                          color: "#412a4e",
                        },
                      },
                    },
                  ],
                },
              ],
            })
          }
        },
      ],
    }
  },
  mounted() {

    // this.RequestDataSet.forEach(val => {
    //   mixData(val)
    // })
    //
    // intervalFun = setInterval(() => {
    //   this.RequestDataSet.forEach(val => {
    //     mixData(val)
    //   })
    // }, 1000 * 10)

    this.$refs.topLeft.setData({
      grid: {
        top: "20%",
        left: "1%",
        right: "5%",
        bottom: "1%",
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        right: '0',
        data: ['计划产量', '实际产量'],
        textStyle: {
          fontSize: 0.75 * vw,
          color: "#F1F1F3",
        },
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {show: false},
          axisLabel: {
            // rotate: -20,
            margin: 5,
            textStyle: {
              fontSize: 0.75 * vw,
              color: "#F1F1F3",
            },
          },
          data: ['2025/10/11', '2025/10/12', '2025/10/13', '2025/10/14'],
        }
      ],
      yAxis: [
        {
          axisLabel: {
            textStyle: {
              fontSize: 0.75 * vw,
              color: "#F1F1F3",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          type: 'value'
        }
      ],
      series: [
        {
          name: '计划产量',
          type: 'bar',
          barGap: 0,
          emphasis: {
            focus: 'series'
          },
          barWidth: '30%',
          barMaxWidth: '20px',
          itemStyle: {
            //图形样式
            normal: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 从上(0)到下(1)
                  [
                    {offset: 0, color: '#F9D842',}, // 顶部颜色
                    {offset: 1, color: '#C44B25'}    // 底部颜色
                  ]
              )
            },
          },
          label: {
            show: true,
            position: "top",
            formatter: `{c}${''}`,
            textStyle: {
              color: "rgba(255,255,255,0.5)",
              fontSize: 0.75 * vw
            },
          },
          data: [700, 830, 790, 700],
        },
        {
          name: '实际产量',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          barWidth: '30%',
          barMaxWidth: '20px',
          barGap: '40%',
          label: {
            show: true,
            position: "top",
            formatter: `{c}${''}`,
            textStyle: {
              color: "rgba(255,255,255,0.5)",
              fontSize: 0.75 * vw
            },
          },
          itemStyle: {
            //图形样式
            normal: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 从上(0)到下(1)
                  [
                    {offset: 0, color: '#1AE7AD'},   // 顶部颜色
                    {offset: 1, color: '#00EF59'}    // 底部颜色
                  ]
              )
            },
          },
          data: [900, 750, 900, 1000],
        },
      ]
    })

    this.scrollTableData = [
      {COLUMN_A: '01', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
      {COLUMN_A: '02', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
      {COLUMN_A: '03', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
      {COLUMN_A: '04', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
      {COLUMN_A: '05', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
      {COLUMN_A: '06', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
    ]

    this.$refs.manpowerAttendance.setData({
      color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'],
      grid: {
        top: "10%",
        bottom: "15%",
        right: "5%"
      },
      dataZoom: [],
      xAxis: {
        margin: 10,
        nameTextStyle: {
          color: '#c0c3cd',
          padding: [0, 0, -10, 0],
          fontSize: 14,
        },
        axisLabel: {
          color: '#c0c3cd', //X轴文字
          fontSize: 14,
          interval: 0,
          margin: 5,
          // rotate: -20,
        },
        axisTick: {
          lineStyle: {
            color: '#0B1535',
            width: 1,
          },
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: '#384267',
            width: 1,
            type: 'dashed',
          },
          show: true,
        },
        data: [1, 2, 3, 4, 5, 6],
        type: 'category',
      },
      yAxis: {
        type: 'value',
        nameTextStyle: {
          color: '#c0c3cd',
          padding: [0, 0, -10, 0],
          fontSize: 14,
        },
        axisLabel: {
          color: '#c0c3cd', //Y轴文字
          fontSize: 14,
        },
        axisTick: {
          lineStyle: {
            color: '#384267',
            width: 1,
          },
          show: true,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#384267',
            type: 'line',
          },
        },
        axisLine: {
          lineStyle: {
            color: '#fff',
            width: 1,
            type: 'line',
          },
          show: false,
        },
      },
      series: [
        {
          data: [95, 95, 95, 95, 95, 95],
          type: 'pictorialBar',
          barMaxWidth: '20px',
          barWidth: 1.5 * vw,
          symbol: 'rect',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, // 从上(0)到下(1)
                [
                  {offset: 0, color: '#31D4F9',}, // 顶部颜色
                  {offset: 1, color: '#2A41CF'}    // 底部颜色
                ]
            )
          },
          label: {
            normal: {
              show: true,
              position: "top",
              textStyle: {
                color: "#a8aab0",
                fontStyle: "normal",
                fontFamily: "微软雅黑",
                fontSize: 0.75 * vw,
              },
            },
          }
        },
      ]
    })

    this.$refs.productionEfficiency.setData({
      grid: {
        top: "10%",
        left: '15%',
        right: "5%",
        bottom: '15%',
        // containLabel: true
      },
      dataZoom: [],
      xAxis: {
        data: ['BC-BD-100H', 'BC-BD-100H', 'BC-BD-100H', 'BC-BD-100H', 'BC-BD-100H', 'BC-BD-100H'],
        axisLine: {
          lineStyle: {
            color: "#0177d4",
          },
        },
        axisLabel: {
          color: "#fff",
          fontSize: 0.7 * vw,
          interval: 0,
          rotate: -20,
        },
      },
      yAxis: {
        nameTextStyle: {
          color: "#fff",
          fontSize: 16,
        },
        axisLine: {
          lineStyle: {
            color: "#0177d4",
          },
        },
        axisLabel: {
          color: "#fff",
          fontSize: 11,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#0177d4",
          },
        },
      },
      series: [
        {
          type: "bar",
          barWidth: 1 * vw,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#00b0ff",
                    },
                    {
                      offset: 0.8,
                      color: "#7052f4",
                    },
                  ],
                  false
              ),
            },
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#fff",
              fontSize: 0.75 * vw
            },
          },
          data: [471, 577, 950, 86, 153, 364],
        },
      ],
    })

    this.$refs.equipmentPowerOne.setData({
      grid: {
        top: "20%",
        left: "1%",
        right: "5%",
        bottom: "1%",
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        right: '0',
        data: ['计划产量', '实际产量'],
        textStyle: {
          fontSize: 0.75 * vw,
          color: "#F1F1F3",
        },
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {show: false},
          axisLabel: {
            // rotate: -20,
            margin: 5,
            textStyle: {
              fontSize: 0.75 * vw,
              color: "#F1F1F3",
            },
          },
          data: [1, 2, 3, 4, 5, 6],
        }
      ],
      yAxis: [
        {
          axisLabel: {
            textStyle: {
              fontSize: 0.75 * vw,
              color: "#F1F1F3",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          type: 'value'
        }
      ],
      series: [
        {
          name: '计划产量',
          type: 'bar',
          barGap: 0,
          emphasis: {
            focus: 'series'
          },
          barWidth: '30%',
          barMaxWidth: '20px',
          itemStyle: {
            //图形样式
            normal: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 从上(0)到下(1)
                  [
                    {offset: 0, color: '#F9D842',}, // 顶部颜色
                    {offset: 1, color: '#C44B25'}    // 底部颜色
                  ]
              )
            },
          },
          label: {
            show: true,
            position: "top",
            formatter: `{c}${''}`,
            textStyle: {
              color: "rgba(255,255,255,0.5)",
              fontSize: 0.75 * vw
            },
          },
          data: [75, 50, 82, 55, 55, 40],
        },
        {
          name: '实际产量',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          barWidth: '30%',
          barMaxWidth: '20px',
          barGap: '40%',
          label: {
            show: true,
            position: "top",
            formatter: `{c}${''}`,
            textStyle: {
              color: "rgba(255,255,255,0.5)",
              fontSize: 0.75 * vw
            },
          },
          itemStyle: {
            //图形样式
            normal: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 从上(0)到下(1)
                  [
                    {offset: 0, color: '#1AE7AD'},   // 顶部颜色
                    {offset: 1, color: '#00EF59'}    // 底部颜色
                  ]
              )
            },
          },
          data: [65, 39, 75, 42, 65, 65],
        },
      ]
    })

    this.$refs.defectiveProducts.setData({
      grid: {
        top: "20%",
        left: "1%",
        right: "5%",
        bottom: "1%",
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        right: '0',
        textStyle: {
          fontSize: 0.75 * vw,
          color: "#F1F1F3",
        },
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {show: false},
          axisLabel: {
            // rotate: -20,
            margin: 5,
            textStyle: {
              fontSize: 0.75 * vw,
              color: "#F1F1F3",
            },
          },
          data: ['08:00','09:00','10:00','11:00','12:00','13:00','1400','15:00','16:00',],
        }
      ],
      yAxis: [
        {
          axisLabel: {
            textStyle: {
              fontSize: 0.75 * vw,
              color: "#F1F1F3",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
            },
          },
          type: 'value'
        }
      ],
      series: [
        {
          name: '不良数',
          type: 'line',
          barGap: 0,
          emphasis: {
            focus: 'series'
          },
          barWidth: '30%',
          barMaxWidth: '20px',
          itemStyle: {
            //图形样式
            normal: {
              color: '#62C2FA'
            },
          },
          label: {
            show: true,
            position: "top",
            formatter: `{c}${''}`,
            textStyle: {
              color: "rgba(255,255,255,0.5)",
              fontSize: 0.75 * vw
            },
          },
          data: [0,0,0,0,0,0,0,0,0],
        },
        {
          name: '目标',
          type: 'line',
          emphasis: {
            focus: 'series'
          },
          barWidth: '30%',
          barMaxWidth: '20px',
          barGap: '40%',
          label: {
            show: true,
            position: "top",
            formatter: `{c}${''}`,
            textStyle: {
              color: "rgba(255,255,255,0.5)",
              fontSize: 0.75 * vw
            },
          },
          itemStyle: {
            //图形样式
            normal: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1, // 从上(0)到下(1)
                  [
                    {offset: 0, color: '#1AE7AD'},   // 顶部颜色
                    {offset: 1, color: '#00EF59'}    // 底部颜色
                  ]
              )
            },
          },
          data: [1,1,1,1,1,1,1,1,1],
        },
      ]
    })
  },
  methods: {},
  beforeDestroy() {
    if (intervalFun) {
      clearInterval(intervalFun)
      intervalFun = null
    }
  }
}
</script>
<style scoped>
.app-container {
  background-image: url("../../../assets/board/week.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.headTitle {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -100%);
  font-size: 1.5vw;
  color: #d6eaed;
  letter-spacing: 10px;
}

.title {
  position: absolute;
  transform: translateY(-50%);
  color: #dddddd;
  font-size: 1vw;
  letter-spacing: 2px;
}

.manpowerAttendance {
  position: absolute;
  width: 25%;
  height: 35%;
  top: 15%;
  left: 71.5%;
}

.IQC {
  position: absolute;
  width: 40%;
  height: 35%;
  top: 15%;
  left: 30%;
}

.productionEfficiency {
  position: absolute;
  width: 25%;
  height: 35%;
  top: 60%;
  left: 3%;
}

.topLeft {
  position: absolute;
  width: 25%;
  height: 34%;
  top: 15.5%;
  left: 3.5%;
}

.equipmentPowerOne {
  position: absolute;
  width: 39%;
  height: 34%;
  top: 60%;
  left: 30.5%;
}

.equipmentPowerTwo {
  position: absolute;
  width: 13%;
  height: 16%;
  top: 60%;
  left: 43.5%;
}

.equipmentPowerThree {
  position: absolute;
  width: 13%;
  height: 16%;
  top: 60%;
  left: 56.5%;
}

.equipmentPowerFour {
  position: absolute;
  width: 13%;
  height: 16%;
  top: 76%;
  left: 30.5%;
}

.equipmentPowerFive {
  position: absolute;
  width: 13%;
  height: 16%;
  top: 76%;
  left: 43.5%;
}

.equipmentPowerSix {
  position: absolute;
  width: 13%;
  height: 16%;
  top: 76%;
  left: 56.5%;
}

.defectiveProducts {
  position: absolute;
  width: 25%;
  height: 35%;
  top: 59%;
  left: 71.5%;
}

.scrollTableItem {
  color: rgb(185, 186, 192);
  margin: auto 0px;
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  display: inline-block;
  width: calc(100% / 6);
}

.totalNum {
  position: absolute;
  top: 11.3%;
  left: 18%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 0.9vw;
}

.info1 {
  position: absolute;
  top: 11.3%;
  left: 44.5%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 1vw;
}

.classSelect {
  position: absolute;
  top: 6.5%;
  left: 4%;
}

.el-radio {
  color: #fff !important;
}

.el-button {
  background: #00000000 !important;
  color: #fff !important;
}

.clickLine {
  color: #1890ff !important;
}
</style>
