<template>
  <div style="background-color: rgb(0,12,60);width: 100%;height: 92vh;padding: 8px">
    <div style="border: rgb(5,255,255) solid 1px;height: 100%;width: 100%">
      <el-row style="height: 11%">
        <el-col :span="3">
          <div style="margin-top: 20px;width: 50px;margin-left: 70%">
            <img :src="require('@/assets/img/jiegang1.png')" style="width: 100%;height: 50px">
          </div>
        </el-col>
        <el-col :span="4" style="margin-top: 22px">
          <span style="font-size: 2rem;color: white;">解放动力</span>
        </el-col>
        <el-col :span="9" style="text-align: center;margin-top: 8px">
          <span class="text1" style="font-size: 3.2rem;text-shadow: 10px 10px 50px #09F0EC;color: white;letter-spacing: 4px">OKR设备数据驾驶舱</span>
        </el-col>
        <el-col :span="6" :offset="2" style="color: white;margin-top: 8px">
          <div style="float: left;font-size: 2.5rem;margin-top: 10px">
            <span>{{ (hour) + ':'+ (minute) + ':'+(second) }}</span>
          </div>
          <div style="float: left;margin-left: 40px">
            <div style="font-size: 1.8rem;">
              <span>{{ month + '.'+ day }}</span>
            </div>
            <div style="font-size: 1.8rem;">
              <span>{{ '星期'+ week.toString() }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row style="height: 52%">
        <el-col :span="18">
          <div style="height:45.7vh;filter:blur(10); border: 1px solid #5B9BD5;position: relative;margin-left: 8px">
            <span class="borderLeft1 boxborder"/>
            <span class="borderLeft2 boxborder"/>
            <span class="borderRight1 boxborder"/>
            <span class="borderRight2 boxborder"/>
            <el-table :header-cell-style="{color:'#f1f8ff',background: 'rgb(0,12,60)'}" height="4vh" style="width: 100%;padding: 0px;margin: 0px;font-size: 18px">
              <el-table-column align="left" label="车间" min-width="50"/>
              <el-table-column align="left" label="设备名称" min-width="190"/>
              <el-table-column align="left" label="产线" min-width="100"/>
              <el-table-column align="left" label="工序号" min-width="100"/>
              <el-table-column align="left" label="状态" min-width="80"/>
              <el-table-column align="left" label="工单号" min-width="140"/>
              <el-table-column align="left" label="维修人" min-width="140"/>
              <el-table-column align="left" label="报修时间" min-width="170"/>
              <el-table-column align="left" label="持续时长" min-width="120"/>
            </el-table>
            <el-row>
              <el-col :span="1">
                <div style="height:19.5vh;width:100%;border-bottom: 1px solid white;border-right: 1px solid white;color: white;font-size: 20px;line-height: 44px;letter-spacing: 10px;padding-left: 30%">装配车间</div>
              </el-col>
              <el-col :span="23">
                <div id="table_main" style="overflow: hidden;height:19.5vh;padding: 0;margin: 0;border-bottom: 1px solid white">
                  <div style="overflow:hidden;padding: 0;margin: 0">
                    <div style="padding: 0;margin: 0;">
                      <el-table
                        :show-header="false"
                        :data="marqueeList"
                        :cell-style="{color:'#f1f8ff',background: 'rgb(0,12,60)',border: 0}"
                        class="marquee"
                        style="width: 100%;color:white;background-color: transparent;font-size: 16px">
                        <el-table-column align="left" label="设备名称" min-width="190" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 30 ? 'color: red' : 'color: white'" >{{ scope.row.设备名称 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="产线" min-width="100" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 30 ? 'color: red' : 'color: white'" >{{ scope.row.产线名称 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="工序号" min-width="100" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 30 ? 'color: red' : 'color: white'" >{{ scope.row.工序名称 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="状态" min-width="80" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 30 ? 'color: red' : 'color: white'" >{{ scope.row.状态 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="工单号" min-width="140" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 30 ? 'color: red' : 'color: white'" >{{ scope.row.工单号 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="维修人" min-width="140" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 30 ? 'color: red' : 'color: white'" >{{ scope.row.维修人员姓名 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="报修时间" min-width="170" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 30 ? 'color: red' : 'color: white'" >{{ scope.row.开始时间 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="持续时长" min-width="120" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 30 ? 'color: red' : 'color: white'" >{{ scope.row.持续时长 }}</span>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                    <div id="table1">
                      <el-table
                        :show-header="false"
                        :data="marqueeList"
                        :cell-style="{color:'#f1f8ff',background: 'rgb(0,12,60)',border: 0}"
                        class="marquee"
                        style="width: 100%;color:white;background-color: transparent;font-size: 16px">
                        <el-table-column align="left" label="设备名称" min-width="190" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 30 ? 'color: red' : 'color: white'" >{{ scope.row.设备名称 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="产线" min-width="100" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 30 ? 'color: red' : 'color: white'" >{{ scope.row.产线名称 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="工序号" min-width="100" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 30 ? 'color: red' : 'color: white'" >{{ scope.row.工序名称 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="状态" min-width="80" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 30 ? 'color: red' : 'color: white'" >{{ scope.row.状态 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="工单号" min-width="140" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 30 ? 'color: red' : 'color: white'" >{{ scope.row.工单号 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="维修人" min-width="140" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 30 ? 'color: red' : 'color: white'" >{{ scope.row.维修人员姓名 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="报修时间" min-width="170" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 30 ? 'color: red' : 'color: white'" >{{ scope.row.开始时间 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="持续时长" min-width="120" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 30 ? 'color: red' : 'color: white'" >{{ scope.row.持续时长 }}</span>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="1" style="border-right: 1px solid white">
                <div style="height:22vh;width:100%;color: white;font-size: 20px;line-height: 50px;letter-spacing: 10px;padding-left: 30%">加工车间</div>
              </el-col>
              <el-col :span="23">
                <div id="table_main1" style="overflow: hidden;height:20vh;padding: 0;margin: 15px 0 0 0">
                  <div style="overflow:hidden;padding: 0;margin: 0">
                    <div style="padding: 0;margin: 0;">
                      <el-table
                        :show-header="false"
                        :data="marqueeList1"
                        :cell-style="{color:'#f1f8ff',background: 'rgb(0,12,60)',border: 0}"
                        class="marquee"
                        style="width: 100%;color:white;background-color: transparent;font-size: 16px">
                        <el-table-column align="left" label="设备名称" min-width="190" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 240 ? 'color: red' : 'color: white'" >{{ scope.row.设备名称 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="产线" min-width="100" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 240 ? 'color: red' : 'color: white'" >{{ scope.row.产线名称 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="工序号" min-width="100" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 240 ? 'color: red' : 'color: white'" >{{ scope.row.工序名称 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="状态" min-width="80" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 240 ? 'color: red' : 'color: white'" >{{ scope.row.状态 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="工单号" min-width="140" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 240 ? 'color: red' : 'color: white'" >{{ scope.row.工单号 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="维修人" min-width="140" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 240 ? 'color: red' : 'color: white'" >{{ scope.row.维修人员姓名 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="报修时间" min-width="170" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 240 ? 'color: red' : 'color: white'" >{{ scope.row.开始时间 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="持续时长" min-width="120" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 240 ? 'color: red' : 'color: white'" >{{ scope.row.持续时长 }}</span>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                    <div id="table11">
                      <el-table
                        :show-header="false"
                        :data="marqueeList1"
                        :cell-style="{color:'#f1f8ff',background: 'rgb(0,12,60)',border: 0}"
                        class="marquee"
                        style="width: 100%;color:white;background-color: transparent;font-size: 16px">
                        <el-table-column align="left" label="设备名称" min-width="190" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 240 ? 'color: red' : 'color: white'" >{{ scope.row.设备名称 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="产线" min-width="100" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 240 ? 'color: red' : 'color: white'" >{{ scope.row.产线名称 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="工序号" min-width="100" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 240 ? 'color: red' : 'color: white'" >{{ scope.row.工序名称 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="状态" min-width="80" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 240 ? 'color: red' : 'color: white'" >{{ scope.row.状态 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="工单号" min-width="140" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 240 ? 'color: red' : 'color: white'" >{{ scope.row.工单号 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="维修人" min-width="140" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 240 ? 'color: red' : 'color: white'" >{{ scope.row.维修人员姓名 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="报修时间" min-width="170" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 240 ? 'color: red' : 'color: white'" >{{ scope.row.开始时间 }}</span>
                          </template>
                        </el-table-column>
                        <el-table-column align="left" label="持续时长" min-width="120" show-overflow-tooltip>
                          <template slot-scope="scope">
                            <span :style="scope.row.状态代码 !== 4 && scope.row.持续分钟 > 240 ? 'color: red' : 'color: white'" >{{ scope.row.持续时长 }}</span>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="height:45.7vh;filter:blur(10); border: 1px solid #5B9BD5;position: relative;margin-left: 10px;margin-right:8px">
            <span class="borderLeft1 boxborder"/>
            <span class="borderLeft2 boxborder"/>
            <span class="borderRight1 boxborder"/>
            <span class="borderRight2 boxborder"/>
            <!--<div style="color: white;font-size: 20px;font-weight: bold;width: 100%;text-align: center;height: 4vh;line-height: 4vh">设备可动率</div>-->
            <!--<el-row>-->
            <!--<el-col :span="5" :offset="1" style="padding: 10px 0 0 0px">-->
            <!--<span style="color: white;font-size: 18px">装配车间:</span>-->
            <!--</el-col>-->
            <!--<el-col :span="6">-->
            <!--<el-input v-model="rate" style="width: 100%" @blur="machineValue = 2;updateRate()"/>-->
            <!--</el-col>-->
            <!--<el-col :span="5" :offset="1" style="padding: 10px 0 0 0px">-->
            <!--<span style="color: white;font-size: 18px">加工车间:</span>-->
            <!--</el-col>-->
            <!--<el-col :span="6">-->
            <!--<el-input v-model="rate1" style="width: 100%" @blur="machineValue = 1;updateRate()"/>-->
            <!--</el-col>-->
            <!--</el-row>-->
            <div style="color: white;font-size: 32px;font-weight: bold;width: 100%;text-align: center;height: 5vh;line-height: 5vh;letter-spacing: 6px">维修人员状态</div>
            <el-row style="margin-top: 20px;margin-left: 20px">
              <el-col :span="10" :offset="1" style="text-align: left">
                <span style="color: white;font-size: 26px">应急维护</span>
              </el-col>
              <el-col :span="12" style="text-align: center">
                <span style="color: white;font-size: 32px">{{ num }}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 26px;margin-left: 20px">
              <el-col :span="10" :offset="1" style="text-align: left">
                <span style="color: white;font-size: 26px">计划检修</span>
              </el-col>
              <el-col :span="12" style="text-align: center">
                <span style="color: white;font-size: 32px">{{ num1 }}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 26px;margin-left: 20px">
              <el-col :span="10" :offset="1" style="text-align: left">
                <span style="color: white;font-size: 26px">预防检修</span>
              </el-col>
              <el-col :span="12" style="text-align: center">
                <span style="color: white;font-size: 32px">{{ num5 }}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 26px;margin-left: 20px">
              <el-col :span="10" :offset="1" style="text-align: left">
                <span style="color: white;font-size: 26px">临时安排</span>
              </el-col>
              <el-col :span="12" style="text-align: center">
                <span style="color: white;font-size: 32px">{{ num2 }}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 26px;margin-left: 20px">
              <el-col :span="10" :offset="1" style="text-align: left">
                <span style="color: white;font-size: 26px">可用人员</span>
              </el-col>
              <el-col :span="12" style="text-align: center">
                <span style="color: white;font-size: 32px">{{ num3 }}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 26px;margin-left: 20px">
              <el-col :span="10" :offset="1" style="text-align: left">
                <span style="color: white;font-size: 26px">人员利用率</span>
              </el-col>
              <el-col :span="12" style="text-align: center">
                <span style="color: white;font-size: 32px">{{ num4 }}</span>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row style="height: 37%">
        <el-col :span="8">
          <div style="height:32vh;filter:blur(10); border: 1px solid #5B9BD5;position: relative;margin-left: 8px">
            <span class="borderLeft1 boxborder"/>
            <span class="borderLeft2 boxborder"/>
            <span class="borderRight1 boxborder"/>
            <span class="borderRight2 boxborder"/>
            <div id="myChart" style="width: 104%;height: 105%;text-align: center;margin-top: 10px"/>
          </div>
        </el-col>
        <el-col :span="10">
          <div style="height:32vh;filter:blur(10); border: 1px solid #5B9BD5;position: relative;margin-left: 10px">
            <span class="borderLeft1 boxborder"/>
            <span class="borderLeft2 boxborder"/>
            <span class="borderRight1 boxborder"/>
            <span class="borderRight2 boxborder"/>
            <div id="myChart2" style="width: 105%;height: 105%;text-align: center;margin-top: 10px"/>
          </div>
        </el-col>
        <el-col :span="6">
          <div style="height:32vh;filter:blur(10); border: 1px solid #5B9BD5;position: relative;margin-left: 10px;margin-right: 8px">
            <span class="borderLeft1 boxborder"/>
            <span class="borderLeft2 boxborder"/>
            <span class="borderRight1 boxborder"/>
            <span class="borderRight2 boxborder"/>
            <div id="myChart1" style="width: 100%;height: 100%;text-align: center;margin-top: 10px"/>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { ExecDatabase } from '@/main'
import $ from 'jquery'
import echarts from 'echarts'
export default {
  data() {
    return {
      num: '',
      num1: '',
      num2: '',
      num3: '',
      num4: '',
      num5: '',
      // machineValue: 0,
      // rate: '',
      // rate1: '',
      timer_table: null,
      timer_table1: null,
      timer_1: null,
      timer_2: null,
      timer_3: null,
      timer_4: null,
      timer_5: null,
      timer_6: null,
      marqueeList: [],
      marqueeList1: [],
      date: new Date(),
      month: '',
      day: '',
      minute: '',
      hour: '',
      second: '',
      week: ''
    }
  },
  mounted() {
    const _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.date = new Date() // 修改数据date
      this.month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
      this.day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      this.hour = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
      this.minute = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      this.second = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      this.week = '日一二三四五六'.charAt(new Date().getDay())
    }, 1000)
    this.timer_table = setInterval(this.tableGundong, 120)
    this.timer_table1 = setInterval(this.tableGundong1, 100)
    this.timer_1 = setInterval(this.getNum, 3000)
    this.timer_2 = setInterval(this.searchTable, 3000)
    this.timer_3 = setInterval(this.searchTable1, 3000)
    this.timer_4 = setInterval(this.searchTable2, 3000)
    this.timer_5 = setInterval(this.getDate, 3000)
    this.timer_6 = setInterval(this.getDate1, 3000)
  },
  beforeDestroy() {
    clearInterval(this.timer_table)
    clearInterval(this.timer_table1)
    clearInterval(this.timer_1)
    clearInterval(this.timer_2)
    clearInterval(this.timer_3)
    clearInterval(this.timer_4)
    clearInterval(this.timer_5)
    clearInterval(this.timer_6)
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  created() {
    this.getNum()
    this.getDate()
    this.getDate1()
    this.searchTable()
    this.searchTable1()
    this.searchTable2()
  },
  methods: {
    getNum() {
      var param = []
      var Data = this.CreateData('11', '维修工单_大屏幕_维修人员查询', param)
      ExecDatabase(Data).then(response => {
        console.log(response.data)
        if (response.data.length !== 0) {
          this.num = response.data[0].维修人员应急数量
          this.num1 = response.data[0].维修人员计划数量
          this.num2 = response.data[0].维修人员临时数量
          this.num3 = response.data[0].维修人员可用数量
          this.num4 = response.data[0].维修人员利用率
          this.num5 = response.data[0].维修人员预防数量
        }
      })
    },
    getDate() {
      var param = []
      param[0] = ['车间代码', 2]
      var Data = this.CreateData('11', '维修工单_大屏幕_工单查询', param)
      ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.marqueeList = response.data
        }
      })
    },
    getDate1() {
      var param = []
      param[0] = ['车间代码', 1]
      var Data = this.CreateData('11', '维修工单_大屏幕_工单查询', param)
      ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.marqueeList1 = response.data
        }
      })
    },
    // 循环滚动table
    tableGundong() {
      if (this.marqueeList.length > 0) {
        document.getElementById('table_main').scrollTop++// 改变层的水平坐标，实现向左移动
        if (document.getElementById('table_main').scrollTop >= document.getElementById('table1').scrollHeight) {
          document.getElementById('table_main').scrollTop = 0
        }
        if (this.marqueeList.length > 5) {
          $('#table_main').show()
        } else {
          $('#table1').hide()
          return
        }
      }
    },
    tableGundong1() {
      if (this.marqueeList1.length > 0) {
        document.getElementById('table_main1').scrollTop++// 改变层的水平坐标，实现向左移动
        if (document.getElementById('table_main1').scrollTop >= document.getElementById('table11').scrollHeight) {
          document.getElementById('table_main1').scrollTop = 0
        }
        if (this.marqueeList1.length > 5) {
          $('#table_main1').show()
        } else {
          $('#table11').hide()
          return
        }
      }
    },
    // 查询一周故障发生频次
    searchTable() {
      this.xdata = []
      this.ydata = []
      var param = []
      var Data = this.CreateData('11', '维修工单_大屏幕_一周故障频次', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          if (v.数量 === '' || v.数量 === null) {
            v.数量 = 0
          }
          this.xdata.push(v.星期)
          this.ydata.push(v.数量)
        })
      }).then(response => {
        this.drawLine()
      })
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      this.myChart.setOption({
        title: {
          left: 'center',
          text: '一周故障发生次数',
          textStyle: {
            fontWeight: 'bold',
            color: '#fff',
            fontSize: 22
          }
        },
        tooltip: {
          formatter: '{c} {b}'
        },
        xAxis: [{
          type: 'category',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          data: this.xdata
        }],
        yAxis: [{
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        }],
        series: [{
          data: this.ydata,
          type: 'line',
          itemStyle: {
            color: '#5dd9da'
          },
          lineStyle: {
            color: '#5dd9da',
            width: 1
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: '{c}',
              textStyle: {// 字体内容设置
                fontStyle: 'normal',
                fontWeight: 'normal',
                fontFamily: 'sans-serif',
                fontSize: 12
              }
            }
          },
          // 鼠标悬停时：
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }]
      })
    },
    // 查询突发故障类型占比
    searchTable1() {
      this.xdata1 = []
      var param = []
      var Data = this.CreateData('11', '维修工单_大屏幕_故障类型占比', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.xdata1.push({
            name: v.故障名称,
            value: v.数量
          })
        })
      }).then(response => {
        this.drawLine1()
      })
    },
    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart1 = echarts.init(document.getElementById('myChart1'))
      // 绘制图表
      this.myChart1.setOption({
        title: {
          left: 'center',
          text: '突发故障类型占比',
          textStyle: {
            fontWeight: 'bold',
            color: '#fff',
            fontSize: 22
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        series: [{
          data: this.xdata1,
          type: 'pie',
          radius: '50%',
          label: {
            fontSize: 14
          }
        }]
      })
    },
    // 查询生产线停机时间
    searchTable2() {
      this.xdata2 = []
      this.ydata2 = []
      var param = []
      var Data = this.CreateData('11', '维修工单_大屏幕_生产线停机时间', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          if (v.数量 === '' || v.数量 === null) {
            v.数量 = 0
          }
          this.xdata2.push(v.产线名称)
          this.ydata2.push(v.数量.toFixed(2))
        })
      }).then(response => {
        this.drawLine2()
      })
    },
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart2 = echarts.init(document.getElementById('myChart2'))
      // 绘制图表
      this.myChart2.setOption({
        title: {
          left: 'center',
          text: '月度TOP生产线停机时间(小时)',
          textStyle: {
            fontWeight: 'bold',
            color: '#fff',
            fontSize: 22
          }
        },
        tooltip: {
          formatter: '{c} {b}'
        },
        xAxis: [{
          type: 'category',
          nameRotate: 100,
          axisLabel: {
            show: true,
            formatter: function(value) {
              var ret = '' // 拼接加\n返回的类目项
              var maxLength = 3// 每项显示文字个数
              var valLength = value.length// X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
              if (rowN > 1) { // 如果类目项的文字大于3,
                for (var i = 0; i < rowN; i++) {
                  var temp = ''// 每次截取的字符串
                  var start = i * maxLength// 开始截取的位置
                  var end = start + maxLength// 结束截取的位置
                  temp = value.substring(start, end) + '\n'
                  ret += temp // 凭借最终的字符串
                }
                return ret
              } else {
                return value
              }
            },
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          data: this.xdata2
        }],
        yAxis: [{
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          splitLine: {
            show: false
          }
        }],
        series: [{
          data: this.ydata2,
          type: 'bar',
          itemStyle: {
            color: '#5dd9da'
          },
          lineStyle: {
            color: '#5dd9da',
            width: 1
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: '{c}',
              textStyle: {// 字体内容设置
                fontStyle: 'normal',
                fontWeight: 'normal',
                fontFamily: 'sans-serif',
                fontSize: 12
              }
            }
          },
          // 鼠标悬停时：
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }]
      })
    }
    // updateRate() {
    //   var param = []
    //   param[0] = ['车间代码', this.machineValue]
    //   param[1] = ['装配可动率', this.rate]
    //   param[2] = ['加工可动率', this.rate1]
    //   var Data = this.CreateData('12', '维修工单_大屏幕_设备可动率修改', param)
    //   ExecDatabase(Data).then(response => {
    //     if (response.data[0].result === '1') {
    //       this.getRate()
    //     }
    //   })
    // },
    // getRate() {
    //   var param = []
    //   var Data = this.CreateData('11', '维修工单_大屏幕_设备可动率查询', param)
    //   ExecDatabase(Data).then(response => {
    //     response.data.map(v => {
    //       if (v.车间代码 === 1) {
    //         this.rate1 = v.设备可动率
    //       }
    //       if (v.车间代码 === 2) {
    //         this.rate = v.设备可动率
    //       }
    //     })
    //   })
    // },
  }
}
</script>

<style scoped>
  .text1{
    display: block;
    /*渐变背景*/
    background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
    #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
    color: transparent; /*文字填充色为透明*/
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;          /*背景剪裁为文字，只将文字显示为背景*/
    background-size: 200% 100%;            /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
    /* 动画 */
    animation: masked-animation 4s infinite linear;
  }
  @keyframes masked-animation {
    0% {
      background-position: 0 0;   /*background-position 属性设置背景图像的起始位置。*/
    }
    100% {
      background-position: -100% 0;
    }
  }
  /*文字阴影*/
  /*div:first-child {        !*表示选择父元素的第一个子元素*!*/
    /*text-shadow: 3px 4px 3px #6c6c6c, -5px -5px 5px black;}*/
  .boxborder{position:absolute;padding:10px;border-style: solid;border-color: rgb(91,155,213)}
  .borderLeft1{border-width: 4px 0 0 4px;top:-4px;left:-4px;}
  .borderLeft2{border-width: 4px 4px 0 0;top:-4px;right:-4px;}
  .borderRight1{border-width: 0 0 4px 4px;bottom:-4px;left:-4px;}
  .borderRight2{border-width: 0 4px 4px 0;bottom:-4px;right:-4px;}
  >>>.el-table tbody tr:hover>td {
    background-color:rgb(0,12,60)!important
  }
  >>>.el-table th, .el-table tr,.el-table td{
    border: 0;
    background-color: rgb(0,12,60);
  }
  .el-table, .el-table__expanded-cell {
    background-color: #3f5c6d2c;
  }
  >>>.el-input__inner {
    background-color: rgb(0,12,60);
    border: 0px;
    color: white;
    font-size: 20px;
    padding: 0 0 0 10px ;
  }
</style>
<style>
  .marquee.el-table td, .el-table th {
    padding: 8px 0;
  }
  .marquee.el-table__row>td {
    border: none;
  }
  .marquee.el-table::before {
    height: 0px;
  }
</style>
