<template>
  <div>
    <el-card style="height: 958px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="设备实时状态" name="first">
          <div style="overflow-y: auto;height: 850px">
            <div style="display: flex;flex-wrap: wrap">
              <div v-for="(item, index) in deviceList1" :key="index" class="toolCard">
                <div style="width: 520px;height: 200px;border: 1px solid #afafaf;border-radius: 5px">
                  <div :id="'OP_status_' + item.工位号" style="font-size: 20px;font-weight: bold;padding: 5px;background-color: #717171;color: #fff;text-align: center">{{'【' + item.工位号 + '】' }}-{{'【' + item.设备名称 + '】' }}</div>
                  <div v-if="item.工位号 === 'OP10'" style="margin-left: 0px;">
                    <el-col :span="8">
                      <el-row class="row-style-device">【料厚】<span class="show-span-device">{{Math.floor(tagIdList['Tag_018'])}}</span></el-row>
                      <el-row class="row-style-device">【上限】<span class="show-span-device">{{Math.floor(tagIdList['Tag_019'])}}</span></el-row>
                      <el-row class="row-style-device">【下限】<span class="show-span-device">{{Math.floor(tagIdList['Tag_020'])}}</span></el-row>
                    </el-col>
                    <el-col :span="8">
                      <el-row class="row-style-device">【不平度1】<span class="show-span-device">{{Math.floor(tagIdList['Tag_021'])}}</span></el-row>
                      <el-row class="row-style-device">【上限】<span class="show-span-device">{{Math.floor(tagIdList['Tag_022'])}}</span></el-row>
                      <el-row class="row-style-device">【下限】<span class="show-span-device">{{Math.floor(tagIdList['Tag_023'])}}</span></el-row>
                    </el-col>
                    <el-col :span="8">
                      <el-row class="row-style-device">【不平度2】<span class="show-span-device">{{Math.floor(tagIdList['Tag_024'])}}</span></el-row>
                      <el-row class="row-style-device">【上限】<span class="show-span-device">{{Math.floor(tagIdList['Tag_025'])}}</span></el-row>
                      <el-row class="row-style-device">【下限】<span class="show-span-device">{{Math.floor(tagIdList['Tag_026'])}}</span></el-row>
                    </el-col>
                  </div>
                  <div v-if="item.工位号 === 'OP20'" style="margin-left: 0px;">
                    <el-row class="row-style-device">【产量统计】<span class="show-span-device">{{Math.floor(tagIdList['Tag_036'])}}</span></el-row>
                  </div>
                  <div v-if="item.工位号 === 'OP30'" style="margin-left: 0px;">
                    <el-row class="row-style-device">【节拍】<span class="show-span-device">{{Math.floor(tagIdList['Tag_045'])}}</span></el-row>
                    <el-row class="row-style-device">【保压时间】<span class="show-span-device">{{Math.floor(tagIdList['Tag_046'])}}</span></el-row>
                    <el-row class="row-style-device">【吨位】<span class="show-span-device">{{Math.floor(tagIdList['Tag_048'])}}</span></el-row>
                  </div>
                  <div v-if="item.工位号 === 'OP40'" style="margin-left: 0px;">
                    <el-row class="row-style-device">【水箱温度1】<span class="show-span-device">{{Math.floor(tagIdList['Tag_060'])}}</span></el-row>
                    <el-row class="row-style-device">【水箱温度2】<span class="show-span-device">{{Math.floor(tagIdList['Tag_061'])}}</span></el-row>
                    <el-row class="row-style-device">【9ST温度】<span class="show-span-device">{{Math.floor(tagIdList['Tag_062'])}}</span></el-row>
                  </div>
                  <div v-if="item.工位号 === 'OP50'" style="margin-left: 0px;">
                    <el-row class="row-style-device" style="margin-top: 5px;margin-bottom: 0">【抛丸时长】<span class="show-span-device">{{Math.floor(tagIdList['Tag_072'])}}</span></el-row>
                    <el-col :span="12">
                      <el-row class="row-style-device">【抛丸转速1】<span class="show-span-device">{{Math.floor(tagIdList['Tag_074'])}}</span></el-row>
                      <el-row class="row-style-device">【抛丸转速2】<span class="show-span-device">{{Math.floor(tagIdList['Tag_075'])}}</span></el-row>
                      <el-row class="row-style-device">【抛丸转速3】<span class="show-span-device">{{Math.floor(tagIdList['Tag_076'])}}</span></el-row>
                    </el-col>
                    <el-col :span="12">
                      <el-row class="row-style-device">【抛丸电流1】<span class="show-span-device">{{Math.floor(tagIdList['Tag_077'])}}</span></el-row>
                      <el-row class="row-style-device">【抛丸电流2】<span class="show-span-device">{{Math.floor(tagIdList['Tag_078'])}}</span></el-row>
                      <el-row class="row-style-device">【抛丸电流3】<span class="show-span-device">{{Math.floor(tagIdList['Tag_079'])}}</span></el-row>
                    </el-col>
                  </div>
                  <div v-if="item.工位号 === 'OP60'" style="margin-left: 0px;">
                    <el-col :span="12">
                      <el-row class="row-style-device">【不等高值1】<span class="show-span-device">{{Math.floor(tagIdList['Tag_082'])}}</span></el-row>
                      <el-row class="row-style-device">【上限】<span class="show-span-device">{{Math.floor(tagIdList['Tag_084'])}}</span></el-row>
                      <el-row class="row-style-device">【下限】<span class="show-span-device">{{Math.floor(tagIdList['Tag_085'])}}</span></el-row>
                    </el-col>
                    <el-col :span="12">
                      <el-row class="row-style-device">【不等高值2】<span class="show-span-device">{{Math.floor(tagIdList['Tag_083'])}}</span></el-row>
                      <el-row class="row-style-device">【上限】<span class="show-span-device">{{Math.floor(tagIdList['Tag_084'])}}</span></el-row>
                      <el-row class="row-style-device">【下限】<span class="show-span-device">{{Math.floor(tagIdList['Tag_085'])}}</span></el-row>
                    </el-col>
                  </div>
                </div>
              </div>
            </div>
            <div style="display: flex;flex-wrap: wrap">
              <div v-for="(item, index) in deviceList" :key="index" class="toolCard">
                <div style="width: 520px;height: 325px;border: 1px solid #afafaf;border-radius: 5px">
                  <div :id="'OP_status_' + item.工位号" style="font-size: 20px;font-weight: bold;padding: 5px;background-color: #717171;color: #fff;text-align: center">{{'【' + item.工位号 + '】' }}-{{'【' + item.设备名称 + '】' }}</div>
                  <div style="margin-left: 0px;">
                    <table  border="1" cellspacing="0" style="border-color: #717171;margin: 2px">
                      <tr style="font-size: 18px;;height: 35px">
                        <th style="width: 80px"></th>
                        <th style="width: 85px">X</th>
                        <th style="width: 85px">Y</th>
                        <th style="width: 85px">Z</th>
                        <th style="width: 85px">U</th>
                        <th style="width: 85px">V</th>
                      </tr>
                      <tr style="text-align: center;font-size: 18px;height: 30px">
                        <td style="font-size: 16px">相对(mm)</td>
                        <td>{{machineInfo_position[item.工位号].relative[0]}}</td>
                        <td>{{machineInfo_position[item.工位号].relative[1]}}</td>
                        <td>{{machineInfo_position[item.工位号].relative[2]}}</td>
                        <td>{{machineInfo_position[item.工位号].relative[3]}}</td>
                        <td>{{machineInfo_position[item.工位号].relative[4]}}</td>
                      </tr>
                      <tr style="text-align: center;font-size: 18px;height: 30px">
                        <td style="font-size: 16px">绝对(mm)</td>
                        <td>{{machineInfo_position[item.工位号].absolute[0]}}</td>
                        <td>{{machineInfo_position[item.工位号].absolute[1]}}</td>
                        <td>{{machineInfo_position[item.工位号].absolute[2]}}</td>
                        <td>{{machineInfo_position[item.工位号].absolute[3]}}</td>
                        <td>{{machineInfo_position[item.工位号].absolute[4]}}</td>
                      </tr>
                      <tr style="text-align: center;font-size: 18px;height: 30px">
                        <td style="font-size: 16px">机械(mm)</td>
                        <td>{{machineInfo_position[item.工位号].machine[0]}}</td>
                        <td>{{machineInfo_position[item.工位号].machine[1]}}</td>
                        <td>{{machineInfo_position[item.工位号].machine[2]}}</td>
                        <td>{{machineInfo_position[item.工位号].machine[3]}}</td>
                        <td>{{machineInfo_position[item.工位号].machine[4]}}</td>
                      </tr>
                      <tr style="text-align: center;font-size: 18px;height: 30px">
                        <td style="font-size: 16px">剩余(mm)</td>
                        <td>{{machineInfo_position[item.工位号].distance[0]}}</td>
                        <td>{{machineInfo_position[item.工位号].distance[1]}}</td>
                        <td>{{machineInfo_position[item.工位号].distance[2]}}</td>
                        <td>{{machineInfo_position[item.工位号].distance[3]}}</td>
                        <td>{{machineInfo_position[item.工位号].distance[4]}}</td>
                      </tr>
                      <tr style="text-align: center;font-size: 18px;height: 30px">
                        <td style="font-size: 16px">负载(%)</td>
                        <td>{{machineInfo_position[item.工位号].servoLoad[0]}}</td>
                        <td>{{machineInfo_position[item.工位号].servoLoad[1]}}</td>
                        <td>{{machineInfo_position[item.工位号].servoLoad[2]}}</td>
                        <td>{{machineInfo_position[item.工位号].servoLoad[3]}}</td>
                        <td>{{machineInfo_position[item.工位号].servoLoad[4]}}</td>
                      </tr>
                    </table>
                  </div>
                  <div style="text-align: left;margin-left: 10px;font-size: 16px">
                    <el-col :span="14">
                      <el-row>
                        <el-col :span="12">
                          <div style="height: 30px;line-height: 30px">F：{{ machineInfo_position[item.工位号].feedRateAxis[0] }}</div>
                        </el-col>
                        <el-col :span="12">
                          <div style="height: 30px;line-height: 30px">S：{{ machineInfo_position[item.工位号].spindleSpeedAxis[0] }}</div>
                        </el-col>
                      </el-row>
                      <div style="height: 30px;line-height: 30px">程序名称：
                        <span style="color: #009e1c;font-weight: bolder">{{ machineInfo_work[item.工位号].programNumber }}</span>
                      </div>
                      <el-row>
                        <el-col :span="12">
                          <div style="height: 30px;line-height: 30px">主轴倍率：
                            <span style="color: #009e1c;font-weight: bolder">{{machineInfo_work[item.工位号].spindleSpeed }}%</span>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div style="height: 30px;line-height: 30px">进给倍率：
                            <span style="color: #009e1c;font-weight: bolder">{{machineInfo_work[item.工位号].feedRate}}%</span>
                          </div>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :span="10">
                      <el-row>
                        <el-col :span="9">
                          <div class="orderNumberStyle">切削时间</div>
                        </el-col>
                        <el-col :span="15">
                          <div class="orderNumberStyle" style="margin-right: 1px;">{{ machineInfo_time[item.工位号].cuttingTime }}</div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="9">
                          <div class="orderNumberStyle">运行时间</div>
                        </el-col>
                        <el-col :span="15">
                          <div class="orderNumberStyle" style="margin-right: 1px;">{{ machineInfo_time[item.工位号].workTime }}</div>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="9">
                          <div class="orderNumberStyle">循环时间</div>
                        </el-col>
                        <el-col :span="15">
                          <div class="orderNumberStyle" style="margin-right: 1px;">{{ machineInfo_time[item.工位号].cyclingTime }}</div>
                        </el-col>
                      </el-row>
                    </el-col>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="设备运行历史" name="second" style="height: 867px">
          <span>工位号：</span>
          <el-select v-model="opnameThis" style="width:250px" multiple collapse-tags placeholder="工位号">
            <el-option
                v-for="item in opnames"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
          <span style="margin-left: 10px">参数名称：</span>
          <el-input v-model="paramName" placeholder="请输入参数名称" style="width: 180px" clearable></el-input>
          <span style="margin-left: 10px">日期：</span>
          <el-date-picker v-model="deliveryDate2" :picker-options="pickerOptions" type="daterange" range-separator="至" start-placeholder="开始日期" value-format="yyyy-MM-dd" end-placeholder="结束日期" style="width:250px"/>
          <el-button :disabled="loading2" type="success" plain icon="el-icon-search" style="margin-left: 10px" @click="searchTableOther()">查询</el-button>
<!--          <el-button :disabled="loading2" type="warning" plain icon="el-icon-download" style="margin-left: 10px" @click="searchTableOther1()">导出</el-button>-->
          <div style="margin-top: 10px">
            <el-table
                v-loading="loading2"
                :data="tableDataOther"
                :header-cell-style="{background:'#F5F5F5'}"
                element-loading-text="数据加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.2)"
                tooltip-effect="dark"
                style="width: 80%"
                height="685"
                border
                highlight-current-row
                stripe>
              <el-table-column
                  type="index"
                  align="center"
                  width="50">
              </el-table-column>
              <el-table-column align="center" label="工位号" min-width="100">
                <template slot-scope="scope">
                  {{ scope.row.工位号 }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="零件号" min-width="150">
                <template slot-scope="scope">
                  {{ scope.row.零件号 }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="产品编码" min-width="100">
                <template slot-scope="scope">
                  {{ scope.row.产品编码 }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="参数名称" min-width="150">
                <template slot-scope="scope">
                  {{ scope.row.变量名称 }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="参数值" min-width="200">
                <template slot-scope="scope">
                  {{ scope.row.变量值 }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="采集时间" min-width="150">
                <template slot-scope="scope">
                  {{ scope.row.更新时间 }}
                </template>
              </el-table-column>
            </el-table>
            <div class="block" style="margin-top: 10px;">
              <el-pagination
                  v-if="!loading2"
                  :current-page="PageCurrent"
                  :page-sizes="[50, 70, 100, 150]"
                  :page-size="pageSize"
                  :total="total"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"/>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { getNowTime2, formatTime } from '@/utils/tool'
export default {
  data() {
    return {
      tagIdList: {
        'Tag_018': '', // OP10料厚值
        'Tag_019': '', // OP10料厚值上限
        'Tag_020': '', // OP10料厚值下限
        'Tag_021': '', // OP10不平度值1
        'Tag_022': '', // OP10不平度值1上限
        'Tag_023': '', // OP10不平度值1下限
        'Tag_024': '', // OP10不平度值2
        'Tag_025': '', // OP10不平度值2上限
        'Tag_026': '', // OP10不平度值2下限
        'Tag_036': '', // OP20产量统计
        'Tag_045': '', // OP30节拍
        'Tag_046': '', // OP30保压时间
        'Tag_048': '', // OP30吨位
        'Tag_060': '', // OP40水箱温度1
        'Tag_061': '', // OP40水箱温度2
        'Tag_062': '', // OP409ST温度
        'Tag_072': '', // OP50抛丸时长
        'Tag_074': '', // OP50抛丸转速1
        'Tag_075': '', // OP50抛丸转速2
        'Tag_076': '', // OP50抛丸转速3
        'Tag_077': '', // OP50抛丸电流1
        'Tag_078': '', // OP50抛丸电流2
        'Tag_079': '', // OP50抛丸电流3
        'Tag_082': '', // OP60不等高值1
        'Tag_083': '', // OP60不等高值2
        'Tag_084': '', // OP60不等高上限值
        'Tag_085': '' // OP60不等高下限值
      },
      deviceList: [],
      deviceList1: [],
      machineInfo_position: {},
      machineInfo_position1: {
        relative: [0, 0, 0, 0, 0],
        absolute: [0, 0, 0, 0, 0],
        machine: [0, 0, 0, 0, 0],
        distance: [0, 0, 0, 0, 0],
        feedRateAxis: [0, 0, 0, 0, 0],
        servoLoad: [0, 0, 0, 0, 0],
        spindleSpeedAxis: [0, 0, 0, 0, 0]
      },
      machineInfo_time: {},
      machineInfo_time1: {
        startTime: '0 H 0 M 0 S',
        cuttingTime: '0 H 0 M 0 S',
        workTime: '0 H 0 M 0 S',
        cyclingTime: '0 H 0 M 0 S'
      },
      machineInfo_work: {},
      machineInfo_work1: {
        partCount: '0',
        spindleSpeed: '0',
        feedRate: '0',
        currentToolNum: '0',
        programNumber: '[0]  [0]'
      },
      lightStatus: {},
      lightStatus1: {
        auto: 0, // 自动模式
        manual: 0, // 手动模式
        emergency: 0, // 急停模式
        shutdown: 0, // 停机模式
        work: 0, // 加工状态
        ready: 0, // 待机状态
        off: 1, // 关机状态
        alarm: 0 // 报警状态
      },
      lightStatusFinal: {},
      lightStatusFinal1: {
        status: 5 // 1运行 2报警 3开机 4急停 5掉线
      },
      machineInfo_state: {},
      otherDeviceList: [],
      activeName: 'first',
      paramName: '',
      planData: 0,
      planTime: 0,
      productionTime: 0,
      dialogVisibleDevice: false,
      opnameThis: '',
      opnames: [],
      addData: {
        planDate: '',
        Value: 0,
        disabled: false
      },
      editData: {
        planDate: '',
        Value: '',
        ID: '',
        disabled: true
      },
      daliyOutPutData_X: [],
      daliyOutPutData_Y: [],
      daliyOutPutData_Average: [],
      daliyOutPutData1_X: [],
      daliyOutPutData1_Y: [],
      daliyOutPutData1_Average: [],
      deliveryDate: [],
      deliveryDate1: [],
      deliveryDate2: [],
      deliveryDate3: [],
      loading: false,
      loading1: false,
      loading2: false,
      loading3: false,
      tableData: [],
      tableDataOee: [],
      tableDataOther: [],
      tableDataStatus: [],
      total: 0, // 总条数
      pageSize: 50, // 每页显示条数
      PageCurrent: 1, // 后台获取页
      total3: 0, // 总条数
      pageSize3: 50, // 每页显示条数
      PageCurrent3: 1 // 后台获取页
    }
  },
  computed: {
    pickerOptions({ $props }) {
      return {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }

  },
  mounted() {
    this.searchTable()
    this.searchTable1()
    this.searchTableOtherCurrent()
  },
  beforeDestroy() {
  },
  created() {
    this.opnameThis = this.opname
    const start = new Date()
    const end = new Date(start.getTime() - 3600 * 1000 * 24 * 15)
    this.deliveryDate[1] = getNowTime2(start)
    this.deliveryDate[0] = getNowTime2(end)
    this.deliveryDate1[1] = getNowTime2(start)
    this.deliveryDate1[0] = getNowTime2(end)
    this.deliveryDate2[1] = getNowTime2(start)
    this.deliveryDate2[0] = getNowTime2(end)
    this.deliveryDate3[1] = getNowTime2(start)
    this.deliveryDate3[0] = getNowTime2(end)
    this.searchTableOpName()
  },
  watch: {
  },
  methods: {
    searchTableOpName() {
      var param = []
      this.opnames = []
      var Data = this.CreateData('11', '工位管理_工位基础信息_查询', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.opnames.push({
            label: response.data[i].工位号 + '-' + response.data[i].工位名称,
            value: response.data[i].工位号,
            id: response.data[i].GUID
          })
        }
      })
    },
    receiveMessage(type, opName, msg) {
      switch (type) {
        case 'C_B_MoveInfo':
          if (this.machineInfo_position[opName]) {
            this.machineInfo_position[opName] = msg
          }
          break
        case 'C_B_TimeInfo':
          if (this.machineInfo_time[opName]) {
            msg.workTime = formatTime(msg.workTime)
            msg.cyclingTime = formatTime(msg.cyclingTime)
            msg.cuttingTime = formatTime(msg.cuttingTime)
            msg.startTime = formatTime(msg.startTime)
            this.machineInfo_time[opName] = msg
            if (opName === 'OP70') console.log(msg.workTime)
          }
          break
        case 'C_B_WorkInfo':
          if (this.machineInfo_work[opName]) {
            this.machineInfo_work[opName] = msg
          }
          break
        case 'C_B_StatusInfo':
          {
            const S_data = msg
            if (this.lightStatusFinal[opName]) {
              this.lightStatusFinal[opName].status = parseInt(S_data.statusFinal)
              this.toolInfoColor(opName, this.lightStatusFinal[opName].status)
            }
          }
          break
        case 'C_B_QtyInfo':
          {
            const S_data = msg
            this.tagIdList[S_data.tagId] = S_data.tagValue
          }
          break
      }
      this.$forceUpdate()
    },
    toolInfoColor(opName, status) {
      const opDom = document.getElementById('OP_status_' + opName)
      let backgroundColor = '#808080'
      if (status === 1) {
        backgroundColor = '#009e1c'
      }
      if (status === 3) {
        backgroundColor = '#ff2020'
      }
      if (status === 2) {
        backgroundColor = '#ffc823'
      }
      if (status === 4) {
        backgroundColor = '#ff2020'
      }
      opDom.style.backgroundColor = backgroundColor
    },
    searchTable() {
      var param = []
      this.deviceList = []
      var Data = this.CreateData('11', '设备管理_设备信息_机床_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          for (let i = 0; i < response.data.length; i++) {
            this.machineInfo_position[response.data[i]['工位号']] = {}
            this.machineInfo_time[response.data[i]['工位号']] = {}
            this.machineInfo_work[response.data[i]['工位号']] = {}
            this.lightStatusFinal[response.data[i]['工位号']] = {}
            this.machineInfo_position[response.data[i]['工位号']] = this.machineInfo_position1
            this.machineInfo_time[response.data[i]['工位号']] = this.machineInfo_time1
            this.machineInfo_work[response.data[i]['工位号']] = this.machineInfo_work1
            this.lightStatusFinal[response.data[i]['工位号']] = this.lightStatusFinal1
            this.deviceList.push({
              工位号: response.data[i]['工位号'],
              设备名称: response.data[i]['设备名称'],
              状态代码: response.data[i]['状态代码'],
              系统类型: response.data[i]['系统类型']
            })
          }
        }
        console.log(this.deviceList)
      })
    },
    searchTable1() {
      var param = []
      this.deviceList1 = []
      var Data = this.CreateData('11', '设备管理_设备信息_其他_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          for (let i = 0; i < response.data.length; i++) {
            this.lightStatusFinal[response.data[i]['工位号']] = {}
            this.lightStatusFinal[response.data[i]['工位号']] = this.lightStatusFinal1
            this.deviceList1.push({
              工位号: response.data[i]['工位号'],
              设备名称: response.data[i]['工位名称'],
              状态代码: response.data[i]['状态代码'],
              系统类型: response.data[i]['系统类型']
            })
          }
        }
        console.log(this.deviceList)
      })
    },
    searchTableOtherCurrent() {
      var param = []
      var Data = this.CreateData('11', '设备管理_设备当前信息_其他_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          for (let i = 0; i < response.data.length; i++) {
            this.tagIdList[response.data[i]['TagID']] = response.data[i]['变量值']
          }
        }
      })
    },
    searchTableOee() {
      if (this.deliveryDate1.length < 2) {
        this.$message.warning('请选择查询时间')
        return
      }
      if (this.deliveryDate1[0] === '') {
        this.$message.warning('请选择查询时间')
        return
      }
      this.loading1 = true
      this.tableDataOee = []
      this.daliyOutPutData1_X = []
      this.daliyOutPutData1_Y = []
      var param = []
      param[0] = ['startTime', this.deliveryDate1[0]]
      param[1] = ['endTime', this.deliveryDate1[1]]
      param[2] = ['opname', 'OP70']
      // param[2] = ['opname', this.opnameThis]
      var Data = this.CreateData('11', 'LG_临工看板_设备管理_OEE查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.tableDataOee = response.data
        }
        for (const responseElement of this.tableDataOee) {
          this.daliyOutPutData1_X.push(responseElement['日期'].substring(5, 10))
          this.daliyOutPutData1_Y.push(responseElement['OEE'])
        }
        this.loading1 = false
        setTimeout(() => {
          this.drawLine52()
        }, 500)
      })
    },
    searchTableOee1() {
      if (this.tableDataOee.length === 0) {
        this.$message.warning('请先查询数据')
        return
      }
      if (this.deliveryDate1.length < 2) {
        this.$message.warning('请选择查询时间')
        return
      }
      if (this.deliveryDate1[0] === '') {
        this.$message.warning('请选择查询时间')
        return
      }
      var param = []
      const blob = this.$echarts.init(document.getElementById('myChart26359')).getDataURL({ 'backgroundColor': '#fff' })
      param[0] = ['startTime', this.deliveryDate1[0]]
      param[1] = ['endTime', this.deliveryDate1[1]]
      param[2] = ['opname', this.opnameThis]
      var Data = this.CreateData('2003', 'LG_临工看板_设备管理_OEE查询导出', param)
      this.exportExcel_NPOI(Data, blob)
    },

    searchTableOther() {
      if (this.deliveryDate2.length < 2) {
        this.$message.warning('请选择查询时间')
        return
      }
      if (this.deliveryDate2[0] === '') {
        this.$message.warning('请选择查询时间')
        return
      }
      this.loading2 = true
      this.tableDataOther = []
      let op = ''
      if (this.opnameThis.length === 0) {
        for (const datum of this.opnames) {
          op += `${datum.value}","`
        }
      } else {
        for (const datum of this.opnameThis) {
          op += `${datum}","`
        }
      }
      op = '\'' + op.substring(0, op.length - 3).replaceAll('"', '\'') + '\''
      var param = []
      param[0] = ['开始时间', this.deliveryDate2[0]]
      param[1] = ['结束时间', this.deliveryDate2[1]]
      param[2] = ['参数名称', this.paramName]
      param[3] = ['PageCurrent', this.PageCurrent]
      param[4] = ['PageSize', this.pageSize]
      param[5] = ['PageCount', '1111', 'int', '1']
      param[6] = ['ItemCount', '1111', 'int', '1']
      param[7] = ['工位号', op]
      var Data = this.CreateData('11', '设备管理_设备历史数据_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.tableDataOther = response.data.result
          this.total = parseInt(response.data.output[0].ItemCount)
        }
        this.loading2 = false
      })
    },
    searchTableOther1() {
      if (this.tableDataOther.length === 0) {
        this.$message.warning('请先查询数据')
        return
      }
      if (this.deliveryDate2.length < 2) {
        this.$message.warning('请选择查询时间')
        return
      }
      if (this.deliveryDate2[0] === '') {
        this.$message.warning('请选择查询时间')
        return
      }
      var param = []
      param[0] = ['开始时间', this.deliveryDate2[0]]
      param[1] = ['结束时间', this.deliveryDate2[1]]
      param[2] = ['opName', this.opnameThis]
      const blob = 'data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7'
      var Data = this.CreateData('2003', 'LG_临工看板_设备管理_参数导出', param)
      this.exportExcel_NPOI(Data, blob)
    },

    searchTableStatus() {
      if (this.deliveryDate3.length < 2) {
        this.$message.warning('请选择查询时间')
        return
      }
      if (this.deliveryDate3[0] === '') {
        this.$message.warning('请选择查询时间')
        return
      }
      this.loading3 = true
      this.tableDataStatus = []
      var param = []
      param[0] = ['开始时间', this.deliveryDate3[0]]
      param[1] = ['结束时间', this.deliveryDate3[1]]
      param[2] = ['opName', this.opnameThis]
      param[3] = ['PageCurrent', this.PageCurrent3]
      param[4] = ['PageSize', this.pageSize3]
      param[5] = ['PageCount', '1111', 'int', '1']
      param[6] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', 'LG_临工看板_设备管理_实际运行时间查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.tableDataStatus = response.data.result
          this.total3 = parseInt(response.data.output[0].ItemCount)
        }
        this.loading3 = false
      })
    },
    searchTableStatus1() {
      if (this.tableDataStatus.length === 0) {
        this.$message.warning('请先查询数据')
        return
      }
      if (this.deliveryDate3.length < 2) {
        this.$message.warning('请选择查询时间')
        return
      }
      if (this.deliveryDate3[0] === '') {
        this.$message.warning('请选择查询时间')
        return
      }
      var param = []
      param[0] = ['开始时间', this.deliveryDate3[0]]
      param[1] = ['结束时间', this.deliveryDate3[1]]
      param[2] = ['opName', this.opnameThis]
      const blob = 'data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7'
      var Data = this.CreateData('2003', 'LG_临工看板_设备管理_实际运行时间查询_导出', param)
      this.exportExcel_NPOI(Data, blob)
    },
    // 开机率
    drawLine51() {
      this.$echarts.dispose(document.getElementById('myChart26358'))
      if (this.daliyOutPutData_X.length === 0) return
      // 基于准备好的dom，初始化echarts实例
      const myChart26358 = this.$echarts.init(document.getElementById('myChart26358'))
      // 绘制图表
      myChart26358.setOption(
        {
          title: {
            text: '开机率(%)'
          },
          grid: [
            {
              left: '5%',
              top: '12%',
              right: '5%',
              bottom: '15%'
            }
          ],
          tooltip: {
          },
          xAxis: {
            type: 'category',
            data: this.daliyOutPutData_X,
            axisLine: {
              lineStyle: {
                color: '#409EFF'
              },
              symbol: ['none', 'arrow'],
              symbolOffset: [0, 10]
            },
            axisLabel: {
              color: '#409EFF',
              interval: 0,
              rotate: 45
            }
          },
          yAxis: {
            style: '#409EFF',
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#409EFF'
              },
              symbol: ['none', 'arrow'],
              symbolOffset: [0, 10]
            },
            axisLabel: {
              color: '#409EFF'
            }
          },
          series: [
            {
              data: this.daliyOutPutData_Y,
              type: 'bar',
              color: '#009797',
              label: {
                show: true
              },
              markLine: {
                symbol: 'none',
                data: [{ type: 'average', name: '平均值' }],
                lineStyle: {
                  color: '#ffc823'
                },
                label: {
                  position: 'end',
                  color: '#409EFF',
                  distance: -80
                }
              }
            }
          ]

        }
      )
    },
    // oee
    drawLine52() {
      this.$echarts.dispose(document.getElementById('myChart26359'))
      if (this.daliyOutPutData_X.length === 0) return
      // 基于准备好的dom，初始化echarts实例
      const myChart26359 = this.$echarts.init(document.getElementById('myChart26359'))
      // 绘制图表
      myChart26359.setOption(
        {
          title: {
            text: 'OEE(%)'
          },
          grid: [
            {
              left: '5%',
              top: '12%',
              right: '5%',
              bottom: '15%'
            }
          ],
          tooltip: {
          },
          xAxis: {
            type: 'category',
            data: this.daliyOutPutData1_X,
            axisLine: {
              lineStyle: {
                color: '#409EFF'
              },
              symbol: ['none', 'arrow'],
              symbolOffset: [0, 10]
            },
            axisLabel: {
              color: '#409EFF',
              interval: 0,
              rotate: 45
            }
          },
          yAxis: {
            style: '#409EFF',
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#409EFF'
              },
              symbol: ['none', 'arrow'],
              symbolOffset: [0, 10]
            },
            axisLabel: {
              color: '#409EFF'
            }
          },
          series: [
            {
              data: this.daliyOutPutData1_Y,
              type: 'bar',
              color: '#009797',
              label: {
                show: true
              },
              markLine: {
                symbol: 'none',
                data: [{ type: 'average', name: '平均值' }],
                lineStyle: {
                  color: '#ffc823'
                },
                label: {
                  position: 'end',
                  color: '#409EFF',
                  distance: -80
                }
              }
            }
          ]

        }
      )
    },
    handleSizeChange(val) {
      this.PageCurrent = 1
      this.pageSize = val
      this.searchTableOther()
    },
    handleCurrentChange(val) {
      this.PageCurrent = val
      this.searchTableOther()
    },
    handleSizeChange3(val) {
      this.PageCurrent3 = 1
      this.pageSize3 = val
      this.searchTableStatus()
    },
    handleCurrentChange3(val) {
      this.PageCurrent3 = val
      this.searchTableStatus()
    }
  }
}
</script>
<style scoped>
  .orderNumberStyle {
    height: 30px;
    line-height: 30px;
    text-align:center;
    font-size: 18px;
    border: 1px solid #717171;
  }
  .toolCard {
    text-align: center;
    font-size: 30px;
    margin: 10px 0 10px 10px;
  }
  .row-style-device{
    border-bottom: 1px solid #00893d;
    padding: 0px 2px;
    margin: 10px 0;
    font-size: 20px;
  }
  .show-span-device{
    color: #ffaa13;
    font-size: 26px;
    font-weight: bolder
  }
</style>

