<template>
  <div class="container" :style="{ width: `${style.width}px`, height: `${style.height}px`, transform: `${style.transform}` }">
    <div class="content">
      <div class="c-left">
        <div class="left-header">
          <div>
            <img :src="titlePng" alt="logo" />
          </div>
        </div>
      </div>
      <div class="c-center">
        <div class="center-header">充电宝生产看板</div>
      </div>
      <div class="c-right">
        <div class="right">
          <div class="right-head">
            <span>{{ time }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="content_main">
      <div class="content_main_calendar">
        <el-col :span="10">
          <dv-border-box-12 class="items" style="height: 110px">
            <div style="height: 100px;overflow: hidden">
              <div style="display: flex;justify-content: center;align-items: center;">
                <div style="background: transparent;margin: 0 10px;width: 100%;height: 80px">
                  <div style="display: flex;align-items: center;justify-content: center">
                    <el-col :span="6" style="text-align: center">
                      <img src="../img/plan.png" height="48" width="48"/></el-col>
                    <el-col :span="18" style="text-align: center">
                      <div style="font-size: 38px;font-weight: bolder;margin-left: -20px">{{stationPlan.今日计划}}</div>
                      <div style="margin-left: 0px">今日计划</div>
                    </el-col>
                  </div>
                </div>
                <div style="background: transparent;margin: 0 10px;width: 100%;height: 80px">
                  <div style="display: flex;align-items: center;justify-content: center">
                    <el-col :span="6" style="text-align: center">
                      <img src="../img/up.png" height="48" width="48"/></el-col>
                    <el-col :span="18" style="text-align: center">
                      <div style="font-size: 38px;font-weight: bolder;margin-left: -20px">{{stationPlan.上线数量}}</div>
                      <div style="margin-left: 0px">上线数量</div>
                    </el-col>
                  </div>
                </div>
                <div style="background: transparent;margin: 0 10px;width: 100%;height: 80px">
                  <div style="display: flex;align-items: center;justify-content: center">
                    <el-col :span="6" style="text-align: center">
                      <img src="../img/down.png" height="48" width="48"/></el-col>
                    <el-col :span="18" style="text-align: center">
                      <div style="font-size: 38px;font-weight: bolder;margin-left: -20px">{{stationPlan.下线数量}}</div>
                      <div style="margin-left: 0px">装配下线</div>
                    </el-col>
                  </div>
                </div>
                <div style="background: transparent;margin: 0 10px;width: 100%;height: 80px">
                  <div style="display: flex;align-items: center;justify-content: center">
                    <el-col :span="6" style="text-align: center">
                      <img src="../img/down.png" height="48" width="48"/></el-col>
                    <el-col :span="18" style="text-align: center">
                      <div style="font-size: 38px;font-weight: bolder;margin-left: -20px">{{stationPlan.下线数量}}</div>
                      <div style="margin-left: 0px">测试下线</div>
                    </el-col>
                  </div>
                </div>
                <div style="background: transparent;margin: 0 10px;width: 100%;height: 80px">
                  <div style="display: flex;align-items: center;justify-content: center">
                    <el-col :span="6" style="text-align: center">
                      <img src="../img/okRate.png" height="48" width="48"/></el-col>
                    <el-col :span="18" style="text-align: center">
                      <div style="font-size: 38px;font-weight: bolder;margin-left: -20px">{{stationPlan.合格率}}</div>
                      <div style="margin-left: 0px">合格率</div>
                    </el-col>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box-12>
          <dv-border-box-12 class="items" style="height: 350px">
            <div style="margin: 5px 0 5px 10px">
              <span style="width: 20px;height: 10px;background: #016ce9;display: inline-block;"></span>
              <span style="color: #fff"> 计划执行</span>
            </div>
            <div style="height: 300px;overflow: hidden">
              <el-table
                  ref="multipleTable"
                  :header-cell-style="{background:'transparent',color:'#ffffff',fontSize: '18px',padding: '2px 0'}"
                  style="width: 100%"
                  height="32px"
                  border
                  size="mini">
                <el-table-column align="center" type="index" label="序号" width="60px" />
                <el-table-column align="center" label="订单号" width="200px"></el-table-column>
                <el-table-column align="center" label="产品编号"></el-table-column>
<!--                <el-table-column align="center" label="型号" width="60px"></el-table-column>-->
                <el-table-column align="center" label="上线时间" width="100px"></el-table-column>
                <el-table-column align="center" label="在制工位" width="100px"></el-table-column>
              </el-table>
              <vue-seamless-scroll
                  ref="seamlessScroll"
                  :class-option="workPlanRollConfig"
                  :data="tableData1"
                  style="overflow: hidden"
              >
                <el-table
                    ref="multipleTable"
                    :data="tableData1"
                    :show-header="false"
                    :header-cell-style="{background:'#tansparent',color:'#ffffff',fontSize: '16px'}"
                    style="width: 100%"
                    border
                    size="mini">
                  <el-table-column align="center" type="index" label="序号" width="60px" />
                  <el-table-column align="center" label="订单号" width="200px">
                    <template slot-scope="scope">
                      {{ scope.row.订单号 }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="产品编号">
                    <template slot-scope="scope">
                      {{ scope.row.产品编号 }}
                    </template>
                  </el-table-column>
                  <!--                  <el-table-column align="center" label="型号" width="60px">-->
                  <!--                    <template slot-scope="scope">-->
                  <!--                      {{ scope.row.机型号 }}-->
                  <!--                    </template>-->
                  <!--                  </el-table-column>-->
                  <el-table-column align="center" label="上线时间" width="100px">
                    <template slot-scope="scope">
                      {{ scope.row.上线时间 }}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="在制工位" width="100px">
                    <template slot-scope="scope">
                      {{ scope.row.在制工位 }}
                    </template>
                  </el-table-column>
                </el-table>
              </vue-seamless-scroll>
            </div>
          </dv-border-box-12>
          <dv-border-box-12 class="items" style="height: 510px">
            <div style="margin: 5px 0 5px 10px">
              <span style="width: 20px;height: 10px;background: #016ce9;display: inline-block;"></span>
              <span style="color: #fff"> 生产指标</span>
            </div>
            <div style="position: relative; top: 0px;">
              <div style="height: 235px">
                <el-col :span="12">
                  <div id="leftMiddlePie" style="height: 230px"></div>
                </el-col>
                <el-col :span="12">
                  <div id="leftBottomPie" style="height: 230px"></div>
                </el-col>
              </div>
              <div style="height: 235px">
                <el-col :span="12">
                  <div id="rightMiddlePie" style="height: 230px"></div>
                </el-col>
                <el-col :span="12">
                  <div id="rightBottomPie" style="height: 230px"></div>
                </el-col>
              </div>
            </div>
          </dv-border-box-12>
        </el-col>
        <el-col :span="14">
          <dv-border-box-12 class="items" style="height: 650px">
            <div style="margin: 5px 0 5px 10px">
              <span style="width: 20px;height: 10px;background: #016ce9;display: inline-block;"></span>
              <span style="color: #fff"> 装配工位信息</span>
              <div style="display: flex;float: right;align-items: center">
                <div style="width: 16px;height: 16px;background: #e6a23c;display: inline-block;"></div>
                <span style="margin: 0 10px">空闲</span>
                <div style="width: 16px;height: 16px;background: #00893d;display: inline-block"></div>
                <span style="margin: 0 10px">工作</span>
                <div style="width: 16px;height: 16px;background: #4bbdff;display: inline-block"></div>
                <span style="margin: 0 10px">暂停</span>
                <div style="width: 16px;height: 16px;background: #ff0000;display: inline-block"></div>
                <span style="margin: 0 10px">在线返修</span>
              </div>
            </div>
            <div style="height: 600px;width: 100%;display: flex;justify-content: center;flex-wrap: wrap">
              <div v-for="(item, index) in stationInfo" :key="index" class="station-item">
                <div style="text-align: center;border-radius: 10px 10px 0 0;height: 30px;font-size: 22px" :style="getStationStatus(item)">{{item.工位号}}</div>
                <div style="display: flex;align-items: center;justify-content: center;margin-top: 5px">
                  <el-col :span="6" style="text-align: center">
                    <img src="../img/plan.png" height="40" width="40"/></el-col>
                  <el-col :span="18" style="text-align: center">
                    <div v-if="item.工位状态 !== 0" style="height: 45px;width: 155px;font-size: 18px;font-weight: bolder;word-break: break-all">{{item.Last_发动机号}}</div>
                    <div v-else style="height: 45px;width: 142px;font-size: 18px">&nbsp;</div>
                    <div>产品编号</div>
                  </el-col>
                </div>
                <el-divider style="background: #016ce9"></el-divider>
                <div style="display: flex;align-items: center;justify-content: center;margin-top: 10px">
                  <el-col :span="6" style="text-align: center">
                    <img src="../img/FaultsTime.png" height="32" width="32"/></el-col>
                  <el-col :span="18" style="text-align: center">
                    <div v-if="item.工位状态 !== 0" style="font-size: 18px;font-weight: bolder">{{item.进站时间}}</div>
                    <div v-else style="font-size: 18px">&nbsp;</div>
                    <div>进站时间</div>
                  </el-col>
                </div>
                <el-divider style="background: #016ce9"></el-divider>
                <div style="display: flex;align-items: center;justify-content: center;margin-top: 10px">
                  <el-col :span="6" style="text-align: center">
                    <img src="../img/person.png" height="32" width="32"/></el-col>
                  <el-col :span="18" style="text-align: center">
                    <div v-if="item.工位状态 !== 0" style="font-size: 18px;font-weight: bolder">{{item.操作者}}</div>
                    <div v-else style="font-size: 18px">&nbsp;</div>
                  </el-col>
                </div>
                <el-divider style="background: #016ce9"></el-divider>
                <div style="display: flex;align-items: center;justify-content: center;flex-direction: column;margin-top: 10px">
                  <div v-if="item.工位状态 !== 0">在制时间(m)：<span style="font-size: 24px;font-weight: bolder">{{item.滞留时间}}</span></div>
                  <div v-else>在制时间(m)：<span style="font-size: 24px;font-weight: bolder">0</span></div>
                </div>
              </div>
            </div>
          </dv-border-box-12>
          <dv-border-box-12 class="items" style="height: 320px">
            <el-col :span="12">
              <div style="margin: 5px 0 5px 10px">
                <span style="width: 20px;height: 10px;background: #016ce9;display: inline-block;"></span>
                <span style="color: #fff"> 工位节拍(m)</span>
              </div>
              <div style="position: relative; top: 0px">
                <div id="centerBottomLeftPie" style="height: 280px"></div>
              </div>
            </el-col>
            <el-col :span="12">
              <div style="margin: 5px 0 5px 10px">
                <span style="width: 20px;height: 10px;background: #016ce9;display: inline-block;"></span>
                <span style="color: #fff"> JPH</span>
              </div>
              <div style="position: relative; top: 0px">
                <div id="rightTopPie" style="height: 280px"></div>
<!--                <div id="centerBottomRightPie" style="height: 280px"></div>-->
              </div>
            </el-col>
          </dv-border-box-12>
        </el-col>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import * as echarts from 'echarts'
let leftMiddlePie = null // 左中饼图
let leftBottomPie = null // 左下饼图
let rightTopPie = null // 右中饼图
let rightMiddlePie = null // 右中饼图
let rightBottomPie = null // 右下饼图
let centerBottomLeftPie = null // 中下左饼图
const centerBottomRightPie = null // 中下右饼图
export default {
  data() {
    return {
      stationInfo: [],
      stationPlan: {
        今日计划: 0,
        上线数量: 0,
        下线数量: 0,
        下线数量1: 0,
        合格率: 0
      },
      leftMiddlePieOption: null,
      leftMiddlePieData: 0,
      leftBottomPieOption: null,
      leftBottomPieData: 0,
      rightTopPieOption: null,
      rightTopPieDataX: [],
      rightTopPieDataY1: [],
      rightTopPieDataY2: [],
      rightMiddlePieOption: null,
      rightMiddlePieData: 0,
      rightBottomPieOption: null,
      rightBottomPieData: 0,
      centerBottomLeftPieOption: null,
      centerBottomLeftPieDataX: [],
      centerBottomLeftPieDataY1: [],
      centerBottomLeftPieDataY2: [],
      centerBottomRightPieOption: null,
      centerBottomRightPieDataX: [],
      centerBottomRightPieDataY1: [],
      centerBottomRightPieDataY2: [],
      titlePng: '',
      titlePng1: '',
      timer: '',
      timer1: '',
      time: 'time',
      workPlanRollConfig: {
        step: 0.05,
        direction: 1,
        limitMoveNum: 6,
        openWatch: true,
        hoverStop: false
      },
      tableData1: [],
      style: {
        width: '1920',
        height: '1080',
        transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)'
      }
    }
  },

  created() {
  },
  mounted() {
    const that = this
    // 定时器部分
    this.timer = setInterval(() => {
      this.time = this.getNowTime()
    }, 1000)
    // 页面自适应大小部分
    that.setScale()
    window.addEventListener('resize', () => {
      that.setScale()
    })
    this.initEchartDom()
    this.setEchartData()
    this.getLogo()

    // 数据库读取部分
    this.getMainPlanCountInfoData()
    this.getMainPlanCountInfoData1()
    this.getMainPlanCountInfoData2()

    this.timer = setInterval(() => {
      this.getMainPlanCountInfoData()
      this.getMainPlanCountInfoData1()
      this.getMainPlanCountInfoData2()
    }, 3000)
    this.timer1 = setInterval(() => {
      this.setEchartData()
    }, 3000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    clearInterval(this.timer1)
  },
  methods: {
    getStationStatus(row) {
      // 0：空闲，1：暂停工作，2：在工作  3: 返修中
      let bgc = '#e6a23c'
      switch (row.工位状态) {
        case 0:
          bgc = '#e6a23c'
          break
        case 1:
          bgc = '#4bbdff'
          break
        case 2:
          bgc = '#00893d'
          break
        case 3:
          bgc = '#ff0000'
          break
        default:
          bgc = '#e6a23c'
          break
      }
      return {
        backgroundColor: bgc
      }
    },
    initEchartDom() {
      leftMiddlePie = echarts.init(document.getElementById('leftMiddlePie'))
      leftBottomPie = echarts.init(document.getElementById('leftBottomPie'))
      rightTopPie = echarts.init(document.getElementById('rightTopPie'))
      rightMiddlePie = echarts.init(document.getElementById('rightMiddlePie'))
      rightBottomPie = echarts.init(document.getElementById('rightBottomPie'))
      centerBottomLeftPie = echarts.init(document.getElementById('centerBottomLeftPie'))
      // centerBottomRightPie = echarts.init(document.getElementById('centerBottomRightPie'))
    },
    setEchartData() {
      this.getLeftMiddlePieData()
      // this.getLeftBottomPieData()
      this.getRightTopPieData()
      // this.getRightMiddlePieData()
      // this.getRightBottomPieData()
      this.getCenterBottomLeftPieData()
      // this.getCenterBottomRightPieData()
    },
    getLeftMiddlePieData() {
      const data = this.CreateData1('11', 'TV_生产指标查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length <= 0) { return }
        this.leftMiddlePieData = res.data[0].产量达成率
        this.leftBottomPieData = res.data[0].计划完成率
        this.rightMiddlePieData = res.data[0].质量FTT
        this.rightBottomPieData = res.data[0].开动率
      }).then(() => {
        this.leftMiddlePieOptionSet()
        this.leftBottomOptionSet()
        this.rightMiddlePieOptionSet()
        this.rightBottomPieOptionSet()
      })
    },
    leftMiddlePieOptionSet() {
      const value = this.leftMiddlePieData
      this.leftMiddlePieOption = {
        title: [{
          text: '产量达成率',
          left: 'center',
          top: '80%',
          textStyle: {
            color: '#ffffff',
            fontSize: 20
          }
        }, {
          text: value + '%',
          left: 'center',
          top: '60%',
          textStyle: {
            color: '#ffffff',
            fontSize: 35,
            fontWeight: 'bold'
          }
        }],
        series: [
          {
            type: 'gauge',
            radius: '100%',
            startAngle: 200,
            endAngle: -20,
            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [0.6, '#ff0000'],
                  [0.8, '#ffcc00'],
                  [1, '#00893d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -15,
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            splitLine: {
              distance: -15,
              length: 15,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              color: 'inherit',
              distance: 20,
              fontSize: 15
            },
            detail: {
              show: false
            },
            data: [
              {
                value: value
              }
            ]
          }
        ]
      }
      leftMiddlePie.setOption(this.leftMiddlePieOption)
    },
    getLeftBottomPieData() {
      this.leftBottomOptionSet()
      // const data = this.CreateData1('11', 'TV_综合可动率_查询_HX')
      // this.ExecDatabase(data).then((res) => {
      //   if (res.data.length <= 0) { return }
      //   this.leftMiddlePieData = res.data[0].综合可动率
      // }).then(() => {
      //   this.leftBottomOptionSet()
      // })
    },
    leftBottomOptionSet() {
      const value = this.leftBottomPieData
      this.leftBottomPieOption = {
        title: [{
          text: '计划完成率',
          left: 'center',
          top: '80%',
          textStyle: {
            color: '#ffffff',
            fontSize: 20
          }
        }, {
          text: value + '%',
          left: 'center',
          top: '60%',
          textStyle: {
            color: '#ffffff',
            fontSize: 35,
            fontWeight: 'bold'
          }
        }],
        series: [
          {
            type: 'gauge',
            radius: '100%',
            startAngle: 200,
            endAngle: -20,
            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [0.6, '#ff0000'],
                  [0.8, '#ffcc00'],
                  [1, '#00893d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -15,
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            splitLine: {
              distance: -15,
              length: 15,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              color: 'inherit',
              distance: 20,
              fontSize: 15
            },
            detail: {
              show: false
            },
            data: [
              {
                value: value
              }
            ]
          }
        ]
      }
      leftBottomPie.setOption(this.leftBottomPieOption)
    },
    getRightTopPieData() {
      const data = this.CreateData1('11', 'TV_工位JPH查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length <= 0) { return }
        this.rightTopPieDataX = []
        this.rightTopPieDataY1 = []
        this.rightTopPieDataY2 = []
        for (let i = 0; i < res.data.length; i++) {
          this.rightTopPieDataX.push(res.data[i]['Hour'])
          this.rightTopPieDataY1.push(res.data[i]['OnlineCount'])
          this.rightTopPieDataY2.push(res.data[i]['OfflineCount'])
        }
      }).then(() => {
        this.rightTopPieOptionSet()
      })
    },
    rightTopPieOptionSet() {
      const X = this.rightTopPieDataX
      const Y1 = this.rightTopPieDataY1
      const Y2 = this.rightTopPieDataY2
      this.rightTopPieOption = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['上线数量', '下线数量'],
          x: 'left', // 可设定图例在左、右、居中
          top: 10,
          left: 120,
          textStyle: {
            // 图例文字的样式
            color: '#fff',
            fontSize: 15
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: X,
            axisLabel: {
              color: '#fff'
            }
          }
        ],
        yAxis: [
          {
            axisLabel: {
              color: '#fff'
            },
            type: 'value',
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,1)'
              }
            }
          }
        ],
        series: [
          {
            name: '上线数量',
            type: 'bar',
            data: Y1,
            color: '#4bbdff'
          },
          {
            name: '下线数量',
            type: 'bar',
            data: Y2,
            color: '#ffa521'
          }
        ]
      }
      rightTopPie.setOption(this.rightTopPieOption)
    },
    getRightMiddlePieData() {
      this.rightMiddlePieOptionSet()
      // const data = this.CreateData1('11', 'TV_综合可动率_查询_HX')
      // this.ExecDatabase(data).then((res) => {
      //   if (res.data.length <= 0) { return }
      //   this.leftMiddlePieData = res.data[0].综合可动率
      // }).then(() => {
      //   this.rightMiddlePieOptionSet()
      // })
    },
    rightMiddlePieOptionSet() {
      const value = this.rightMiddlePieData
      this.rightMiddlePieOption = {
        title: [{
          text: '质量FTT',
          left: 'center',
          top: '80%',
          textStyle: {
            color: '#ffffff',
            fontSize: 20
          }
        }, {
          text: value + '%',
          left: 'center',
          top: '60%',
          textStyle: {
            color: '#ffffff',
            fontSize: 35,
            fontWeight: 'bold'
          }
        }],
        series: [
          {
            type: 'gauge',
            radius: '100%',
            startAngle: 200,
            endAngle: -20,
            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [0.6, '#ff0000'],
                  [0.8, '#ffcc00'],
                  [1, '#00893d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -15,
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            splitLine: {
              distance: -15,
              length: 15,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              color: 'inherit',
              distance: 20,
              fontSize: 15
            },
            detail: {
              show: false
            },
            data: [
              {
                value: value
              }
            ]
          }
        ]
      }
      rightMiddlePie.setOption(this.rightMiddlePieOption)
    },
    getRightBottomPieData() {
      this.rightBottomPieOptionSet()
      // const data = this.CreateData1('11', 'TV_综合可动率_查询_HX')
      // this.ExecDatabase(data).then((res) => {
      //   if (res.data.length <= 0) { return }
      //   this.leftMiddlePieData = res.data[0].综合可动率
      // }).then(() => {
      //   this.rightBottomPieOptionSet()
      // })
    },
    rightBottomPieOptionSet() {
      const value = this.rightBottomPieData
      this.rightBottomPieOption = {
        title: [{
          text: '开动率',
          left: 'center',
          top: '80%',
          textStyle: {
            color: '#ffffff',
            fontSize: 20
          }
        }, {
          text: value + '%',
          left: 'center',
          top: '60%',
          textStyle: {
            color: '#ffffff',
            fontSize: 35,
            fontWeight: 'bold'
          }
        }],
        series: [
          {
            type: 'gauge',
            radius: '100%',
            startAngle: 200,
            endAngle: -20,
            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [0.6, '#ff0000'],
                  [0.8, '#ffcc00'],
                  [1, '#00893d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -15,
              length: 5,
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            splitLine: {
              distance: -15,
              length: 15,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              color: 'inherit',
              distance: 20,
              fontSize: 15
            },
            detail: {
              show: false
            },
            data: [
              {
                value: value
              }
            ]
          }
        ]
      }
      rightBottomPie.setOption(this.rightBottomPieOption)
    },
    getCenterBottomLeftPieData() {
      const data = this.CreateData1('11', 'TV_工位节拍查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length <= 0) { return }
        this.centerBottomLeftPieDataX = []
        this.centerBottomLeftPieDataY1 = []
        this.centerBottomLeftPieDataY2 = []
        for (let i = 0; i < res.data.length; i++) {
          this.centerBottomLeftPieDataX.push(res.data[i]['工位号'])
          this.centerBottomLeftPieDataY1.push(res.data[i]['在线时间'])
          this.centerBottomLeftPieDataY2.push(res.data[i]['标准节拍'])
        }
      }).then(() => {
        this.centerBottomLeftPieOptionSet()
      })
    },
    centerBottomLeftPieOptionSet() {
      const X = this.centerBottomLeftPieDataX
      const Y1 = this.centerBottomLeftPieDataY1
      const Y2 = this.centerBottomLeftPieDataY2
      this.centerBottomLeftPieOption = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['实际节拍', '标准节拍'],
          x: 'left', // 可设定图例在左、右、居中
          top: 10,
          left: 120,
          textStyle: {
            // 图例文字的样式
            color: '#fff',
            fontSize: 15
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: X,
            axisLabel: {
              color: '#fff'
            }
          }
        ],
        yAxis: [
          {
            axisLabel: {
              color: '#fff'
            },
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          }
        ],
        series: [
          {
            name: '实际节拍',
            type: 'bar',
            data: Y1,
            itemStyle: {
              color: function(params) {
                console.log(params.data)
                console.log(Y2[params['dataIndex']])
                const color = params.data > Y2[params['dataIndex']] ? '#ffa521' : '#00893d'
                return color
              }
            }
          },
          {
            name: '标准节拍',
            type: 'line',
            data: Y2,
            color: '#4bbdff'
          }
        ]
      }
      centerBottomLeftPie.setOption(this.centerBottomLeftPieOption)
    },
    getCenterBottomRightPieData() {
      this.centerBottomRightPieOptionSet()
      // const data = this.CreateData1('11', 'TV_综合可动率_查询_HX')
      // this.ExecDatabase(data).then((res) => {
      //   if (res.data.length <= 0) { return }
      //   this.leftMiddlePieData = res.data[0].综合可动率
      // }).then(() => {
      //   this.rightTopPieOptionSet()
      // })
    },
    centerBottomRightPieOptionSet() {
      const X = this.centerBottomRightPieDataX
      const Y1 = this.centerBottomRightPieDataY1
      const Y2 = this.centerBottomRightPieDataY2
      this.centerBottomRightPieOption = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['实际节拍', '标准节拍'],
          x: 'left', // 可设定图例在左、右、居中
          top: 10,
          left: 120,
          textStyle: {
            // 图例文字的样式
            color: '#fff',
            fontSize: 15
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: X,
            axisLabel: {
              color: '#fff'
            }
          }
        ],
        yAxis: [
          {
            axisLabel: {
              color: '#fff'
            },
            type: 'value',
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,1)'
              }
            }
          }
        ],
        series: [
          {
            name: '实际节拍',
            type: 'bar',
            data: Y1,
            itemStyle: {
              color: function(params) {
                const color = params.data > Y2[params['seriesIndex']] ? '#ffa521' : '#00893d'
                return color
              }
            }
          },
          {
            name: '标准节拍',
            type: 'line',
            data: Y2,
            color: '#4bbdff'
          }
        ]
      }
      centerBottomRightPie.setOption(this.centerBottomRightPieOption)
    },
    zeroFill(i) {
      if (i >= 0 && i <= 9) {
        return '0' + i
      } else {
        return i
      }
    },
    getNowTime() {
      const date = new Date()
      const month = this.zeroFill(date.getMonth() + 1)
      const day = this.zeroFill(date.getDate())
      const hour = this.zeroFill(date.getHours())
      const minute = this.zeroFill(date.getMinutes())
      const second = this.zeroFill(date.getSeconds())
      return (
        date.getFullYear() +
          '-' +
          month +
          '-' +
          day +
          ' ' +
          hour +
          ':' +
          minute +
          ':' +
          second
      )
    },
    getScale() {
      const w = window.innerWidth / this.style.width
      const h = window.innerHeight / this.style.height
      return { x: w, y: h }
    },
    setScale() {
      const scale = this.getScale()
      this.style.transform = 'scaleY(' + scale.y + ') scaleX(' + scale.x + ') translate(-50%, -50%)'
    },
    getMainPlanCountInfoData() {
      const data = this.CreateData1('11', 'TV_工位信息查询')
      this.ExecDatabase(data).then((res) => {
        console.log(res.data)
        if (res.data.length > 0) {
          this.stationInfo = res.data
        }
      })
    },
    getMainPlanCountInfoData1() {
      const data = this.CreateData1('11', 'TV_计划信息查询')
      this.ExecDatabase(data).then((res) => {
        if (res.data.length > 0) {
          this.stationPlan.今日计划 = res.data[0].今日计划
          this.stationPlan.上线数量 = res.data[0].上线数量
          this.stationPlan.下线数量 = res.data[0].下线数量
          this.stationPlan.下线数量1 = res.data[0].下线数量1
          this.stationPlan.合格率 = res.data[0].合格率
        }
      })
    },

    getMainPlanCountInfoData2() {
      const data = this.CreateData1('11', 'TV_计划执行查询')
      this.ExecDatabase(data).then((res) => {
        this.tableData1 = res.data
      })
    },

    planCellStyle({ row }) {
      if (Number(row.是否上线) === 1) {
        return 'background-color: #00893d'
      }
    },
    getLogo() {
      axios.get('../../logo.png', {
        responseType: 'arraybuffer'
      }).then(res => {
        this.titlePng = 'data:image/jpeg;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      })
    }
  },
  computed: {},
  watch: {},
  props: {},
  directives: {
    scroll: {
      bind(
        el,
        {
          value: { delay, speed } = {
            delay: 0,
            speed: 50
          }
        }
      ) {
        //  delay 延迟  //speed滚动速度
        // 数据少不滚动
        // 无缝滚动
        let scrollInterval
        setTimeout(() => {
          scrollInterval = setInterval(goScroll, speed)
        }, delay)
        el.addEventListener('mouseenter', () => {
          clearInterval(scrollInterval)
        })
        el.addEventListener('mouseleave', () => {
          scrollInterval = setInterval(goScroll, speed)
        })

        function goScroll() {
          const scrollTotalHeight = JSON.parse(JSON.stringify(el.scrollTop))
          el.scrollTop++
          if (scrollTotalHeight === el.scrollTop) {
            el.scrollTop = 0
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  background-image:url("../assets/image/interact.png");background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  z-index: 100;
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  //background-color: #000d3a;
  color: white;

  .content {
    width: 100%;
    height: 6%;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 5px 0 20px 0;
    border-bottom: 2px solid #3d4a61;
    .c-left {
      width: 25%;
      //background-color: #000d3a;
      .left-header {
        //background-color: #000d3a;
        display: flex;
        align-items: center;
        margin-top: 50px;
        img {
          margin-left: 50px;
          height: 50px;
        }
        span {
          font-size: 3.5rem;
          margin-left: 1rem;
        }
      }
    }

    .c-center {
      width: 50%;
      //background-color: #000d3a;
      box-sizing: border-box;
      .center-header {
        //background-color: #000d3a;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
        font-weight: bold;
        letter-spacing: 13px;
      }
    }

    .c-right {
      width: 25%;
      //background-color: #000d3a;
      .right-header {
        //background-color: #000d3a;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 4rem;
      }
    }
  }
}
.right {
  width: 100%;
  height: 100%;
  //background-color: #000d3a;
  padding-left: 1.5%;
  box-sizing: border-box;
  .right-head {
    height: 8%;
    display: flex;
    justify-content: flex-end;
    span {
      margin: 55px 25px 25px 25px;
      font-weight: 700;
      font-size: 35px;
      color: #fff;
    }
  }

  .main {
    height: 90%;
    .top {
      width: 100%;
      height: 35%;

      .cook-list {
        width: 100%;
        height: 80%;
        display: flex;
        flex-wrap: wrap;
      }
      .spot-check {
        span {
          font-size: 1rem;
        }
      }
    }

    .center {
      width: 100%;
      height: 35%;

      .center-main {
        width: 100%;
        height: 90%;
        .center-left {
          height: 100%;
          .left-top {
            height: 50%;
            display: flex;

            div {
              width: 33.33%;
              height: 100%;
            }
          }
          .left-bottom {
            height: 50%;
          }
        }

        .center-right {
          width: 40%;
          height: 100%;
          > span {
            color: #fff;
          }

          ::v-deep .row-item {
            .ceil {
              padding: 0;
            }
          }
        }
      }
      .year-plan {
        span {
          font-size: 1rem;
        }
      }
    }

    .bottom {
      width: 100%;
      height: 33%;
      .bottom-top {
        display: flex;
        width: 100%;
        height: 45%;
        .andong-left {
          width: 60%;
          height: 100%;
          > span {
            color: #fff;
          }

          .analyse {
            width: 100%;
            height: 90%;
          }
        }

        .andong-right {
          width: 40%;
          height: 100%;
          > span {
            color: #fff;
          }

          .call {
            width: 100%;
            height: 90%;
          }
        }
      }
      .bottom-bottom {
        width: 100%;
        height: 44.5%;

        ::v-deep .header-item {
          font-size: 6px;
          padding: 0;
        }
        ::v-deep .row-item {
          font-size: 4px;
          padding: 0;
          .ceil {
            padding: 0;
          }
        }
      }
    }
  }
}
.content_main {
  .content_main_calendar {
    margin: 10px 20px;
    .items {
      height: 950px;
      padding: 1rem;
      box-sizing: border-box;
      .item-head {
        height: 10rem;
        display: grid;
        grid-template-columns: repeat(3, 33.3%);
        grid-template-rows: repeat(2, 50%);
        justify-items: center;
        align-content: center;
        box-sizing: border-box;
        padding-bottom: 1rem;

        background: linear-gradient(90deg, #043079 50%, transparent 0)
        repeat-x,
        linear-gradient(90deg, #043079 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #043079 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #043079 50%, transparent 0) repeat-y;
        background-size: 0px 10px, 20px 10px, 10px 0px, 10px 0px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;

        animation: linearGradientMove 0.3s infinite linear;
      }
      .opStatus_all {
        background-color: #21ffff;
        border-radius: 10px;
        font-size:20px;
        border: 1px solid #409eff;
        width: 260px ;
        height: 270px;
        margin-left: 45px;
        margin-bottom: 10px;
      }
      .opStatus_single {
        display: flex;
        justify-content: flex-start;
        margin: 10px 0 10px 10px;
      }
      .opStatus_single_value {
        width: 100px;
        background-color: #aaaaaa;
        text-align: left;
        padding: 0 3px;
        color: #000d3a;
        border-radius: 3px;
      }
      .station-item{
        width: 240px;
        height: 270px;
        margin: 10px;
        border: 1px solid #409eff;
        border-radius: 10px;
        ::v-deep .el-divider{
          background: #122a61;
          margin: 7px 0;
        }
      }
      @keyframes linearGradientMove {
        100% {
          background-position: -20px 0, 20px 100%, 0 20px, 100% -20px;
        }
      }

      .item-content {
        box-sizing: border-box;
        margin-top: 50px;
        box-sizing: border-box;

        .bg {
          width: 100%;
          height: 100%;
          background-size: 100% 100%;
        }

        .btns {
          position: absolute;
          margin-left: 1rem;
          z-index: 999;

          div {
            border: 2px solid #244d71;
            //background-color: #000d3a;
            color: #ffffff;
            padding: 0.5rem 2rem;
            margin: 0.5rem 0;
            font-size: 1.2rem;
          }
        }
      }

      .item-head > div {
        display: flex;
        align-items: center;
        width: 15rem;

        img {
          height: 4.5rem;
          width: 4.5rem;
          object-fit: cover;
        }

        .data {
          display: flex;
          flex-direction: column;

          .data-value {
            font-size: 1.5rem;
            font-weight: bold;
          }
        }
      }
    }
  }
}
::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
::v-deep .el-table td, .el-table th.is-leaf {
  border: 1px solid #ffffff;
  font-size: 14px;
}
::v-deep.el-table tbody tr:hover > td {
  //background-color: transparent !important
}
::v-deep .el-table tr {
  pointer-events:none;
  background-color: transparent !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  color: rgb(255, 255, 255) !important;
}
::v-deep .el-table td, .el-table th {
  padding: 10px 0 !important;
  font-size: 18px;
}

</style>
