<template>
  <div style="padding: 0px 30px 10px 30px">
    <el-row style="margin-top: 20px;">
      <el-col :span="7">
        <el-collapse v-model="noResponseActiveNames" style="margin-right: 15px;" class="collapse1">
          <el-collapse-item title="未响应工单" name="1">
            <el-row style="margin-bottom: 20px;">
              <el-col :span="10">
                <div style="margin-top: 20px;margin-left: 15px;font-size: 16px">全部</div>
                <div style="margin-top: 20px;margin-left: 15px;font-size: 40px;cursor: pointer" @click="noResponseClick()">{{ orderCount.未响应工单数量 }}</div>
              </el-col>
              <el-col :span="8">
                <div style="margin-top: 20px;margin-left: 0px;font-size: 16px">
                  异常
                  <el-tooltip class="item" effect="light" content="未响应时间超过10分钟" placement="top">
                    <i class="header-icon el-icon-info"/>
                  </el-tooltip>
                </div>
                <div style="margin-top: 20px;margin-left: 18px;font-size: 40px;cursor: pointer" @click="noResponseClick1()">{{ orderCount.未响应异常工单数量 }}</div>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-col>
      <el-col :span="8">
        <el-collapse v-model="serviceActiveNames" style="margin-right: 15px;" class="collapse1">
          <el-collapse-item title="维修中" name="1">
            <el-row style="margin-bottom: 20px;">
              <el-col :span="7">
                <div style="margin-top: 20px;margin-left: 15px;font-size: 16px">全部</div>
                <div style="margin-top: 20px;margin-left: 15px;font-size: 40px;cursor: pointer" @click="serviceClick()">{{ orderCount.维修中工单数量 }}</div>
              </el-col>
              <el-col :span="7">
                <div style="margin-top: 20px;margin-left: 15px;font-size: 16px">待确认</div>
                <div style="margin-top: 20px;margin-left: 15px;font-size: 40px;cursor: pointer" @click="confirmClick()">{{ orderCount.待确认工单数量 }}</div>
              </el-col>
              <el-col :span="7">
                <div style="margin-top: 20px;margin-left: 0px;font-size: 16px">
                  异常
                  <el-tooltip class="item" effect="light" content="装配车间维修时间 > 15分钟,加工车间维修时间 > 120分钟" placement="top">
                    <i class="header-icon el-icon-info"/>
                  </el-tooltip>
                </div>
                <div style="margin-top: 20px;margin-left: 15px;font-size: 40px;cursor: pointer" @click="serviceClick1()">{{ orderCount.维修中异常工单数量 }}</div>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-col>
      <el-col :span="9">
        <el-collapse v-model="peopleActiveNames" class="collapse1">
          <el-collapse-item title="维修人员状态" name="1">
            <el-row style="margin-bottom: 20px;">
              <el-col :span="6">
                <div style="margin-top: 20px;margin-left: 15px;font-size: 16px">应到</div>
                <div style="margin-top: 20px;margin-left: 15px;font-size: 40px;cursor: pointer" @click="peopleClick()">{{ orderCount.维修人员应到数量 }}</div>
              </el-col>
              <el-col :span="6">
                <div style="margin-top: 20px;margin-left: 15px;font-size: 16px">维修</div>
                <div style="margin-top: 20px;margin-left: 15px;font-size: 40px;cursor: pointer" @click="peopleClick()">{{ orderCount.维修人员维修数量 }}</div>
              </el-col>
              <el-col :span="6">
                <div style="margin-top: 20px;margin-left: 15px;font-size: 16px">可用</div>
                <div style="margin-top: 20px;margin-left: 15px;font-size: 40px;cursor: pointer" @click="peopleClick()">{{ orderCount.维修人员可用数量 }}</div>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </el-row>
    <div style="margin-top: 10px;">
      <el-tabs v-model="activeName">
        <el-tab-pane label="当前" name="1">
          <div style="height: 65px;line-height: 65px;width: 100%;background-color: rgb(245,245,245);margin-top: 10px">
            <el-input v-model="currentKeyword" style="width: 220px;height: 50px;margin-left: 20px" placeholder="工单号/设备名称" class="input11" @input="pageCurrent = 1;searchCurrentTable()" />
            <el-select v-model="machineShop" style="width:180px;margin-left: 20px" clearable class="select12" placeholder="请选择车间" @change="pageCurrent = 1;getProductionLine();getRegion();searchCurrentTable()">
              <el-option
                v-for="item in machineShops"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <el-select v-model="productionLine" style="width:180px;margin-left: 20px" clearable class="select12" placeholder="请选择产线" @change="pageCurrent = 1;getRegion();searchCurrentTable()">
              <el-option
                v-for="item in productionLines"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <el-select v-model="region" style="width:180px;margin-left: 20px" clearable class="select12" placeholder="请选择工序" @change="pageCurrent = 1;searchCurrentTable()">
              <el-option
                v-for="item in regions"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </div>
          <el-table
            v-loading="loading"
            :data="currentTableData"
            :header-cell-style="tableHeaderColor"
            :cell-style="tableColor1"
            element-loading-spinner="el-icon-loading"
            tooltip-effect="dark"
            style="width: 100%"
            @sort-change="currentSortChange">
            <el-table-column align="left" label="工单号" prop="工单号" min-width="90" show-overflow-tooltip sortable="custom">
              <template slot-scope="scope">
                <!--<span @click="currentClick(scope.row)">{{ scope.row.工单号 }}</span>-->
                <el-tag color="rgb(153,153,153)" size="mini" type="info" style="cursor: pointer" @click="currentClick(scope.row)" >{{ scope.row.工单号 }}</el-tag>
              </template>1
            </el-table-column>
            <el-table-column align="left" label="设备名称" prop="设备名称" min-width="140" show-overflow-tooltip sortable="custom">
              <template slot-scope="scope">
                <span>{{ scope.row.设备名称 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="工序名称" prop="工序名称" min-width="68" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.工序名称 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="车间名称" prop="车间名称" min-width="68" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.车间 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="故障类别" prop="故障类别" min-width="80" show-overflow-tooltip sortable="custom">
              <template slot-scope="scope">
                <span>{{ scope.row.故障名称 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="状态" prop="状态" min-width="65" show-overflow-tooltip sortable="custom">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.状态代码 === 1 || scope.row.状态代码 === 2" color="red" type="info" size="mini" >{{ scope.row.状态 }}</el-tag>
                <el-tag v-if="scope.row.状态代码 === 4" color="rgb(255,165,0)" type="info" size="mini" >{{ scope.row.状态 }}</el-tag>
                <el-tag v-if="scope.row.状态代码 === 3" color="#67c23a" type="info" size="mini" >{{ scope.row.状态 }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="left" label="维修人（正在进行）" prop="维修人" min-width="150" show-overflow-tooltip>
              <template slot-scope="scope">
                <div v-if="scope.row.维修人员姓名">
                  <el-tag v-for="(people,index) in scope.row.维修人员姓名" :key="index" color="rgb(0,142,207)" size="mini" type="info" style="margin: 0px 5px">{{ people }}</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="申请人" prop="申请人" min-width="70" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tag color="#c8c9cc" type="info" size="mini" >{{ scope.row.申请人姓名 }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="left" label="开始时间" prop="开始时间" min-width="105" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.开始时间 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="持续时长" min-width="70" show-overflow-tooltip >
              <template slot-scope="scope">
                <span>{{ scope.row.持续时长 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="检修项目" min-width="70" show-overflow-tooltip >
              <template slot-scope="scope">
                <el-button type="text" size="small" icon="el-icon-search" @click="openDetails(scope.row)">详情</el-button>
              </template>
            </el-table-column>
            <el-table-column align="left" label="操作" min-width="60" show-overflow-tooltip >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  style="font-size: 18px;padding: 0px"
                  @click="deleteOrder(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block" style="margin-top: 10px;">
            <el-pagination
              v-if="!loading"
              :current-page="pageCurrent"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"/>
          </div>
        </el-tab-pane>
        <el-tab-pane label="历史" name="2">
          <div style="height: 65px;line-height: 65px;width: 100%;background-color: rgb(245,245,245);margin-top: 10px">
            <el-input v-model="historyKeyword" style="width: 220px; margin-left: 20px;height: 50px" placeholder="工单号/设备名称" class="input11" @input="hisPageCurrent = 1;searchHistoryTable()" />
            <el-select v-model="machineShop1" style="width:180px;margin-left: 20px" clearable class="select12" placeholder="请选择车间" @change="hisPageCurrent = 1;getProductionLine1();getRegion1();searchHistoryTable()">
              <el-option
                v-for="item in machineShops1"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <el-select v-model="productionLine1" style="width:180px;margin-left: 20px" clearable class="select12" placeholder="请选择产线" @change="hisPageCurrent = 1;getRegion1();searchHistoryTable()">
              <el-option
                v-for="item in productionLines1"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <el-select v-model="region1" style="width:180px;margin-left: 20px" clearable class="select12" placeholder="请选择工序" @change="hisPageCurrent = 1;searchHistoryTable()">
              <el-option
                v-for="item in regions1"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <el-date-picker
              v-model="historyDate"
              :default-time="['00:00:00', '23:59:59']"
              :picker-options="pickerOptions"
              type="daterange"
              align="right"
              unlink-panels
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="margin-left: 50px;height: 51px"
              size="large"
              @change="hisPageCurrent = 1;searchHistoryTable()"/>
            <el-button
              type="primary"
              plain
              icon="el-icon-download"
              style="font-size: 16px;height: 50px;margin-left: 10px"
              @click="historyUpload()">导出</el-button>
          </div>
          <el-table
            v-loading="loading"
            :data="historyTableData"
            :header-cell-style="tableHeaderColor"
            :cell-style="tableColor1"
            element-loading-spinner="el-icon-loading"
            tooltip-effect="dark"
            style="width: 100%"
            @sort-change="historySortChange">
            <el-table-column align="left" label="工单号" prop="工单号" min-width="90" show-overflow-tooltip sortable="custom">
              <template slot-scope="scope">
                <!--<span @click="historyClick(scope.row)">{{ scope.row.工单号 }}</span>-->
                <el-tag color="rgb(153,153,153)" size="mini" type="info" style="cursor: pointer" @click="historyClick(scope.row)">{{ scope.row.工单号 }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="left" label="设备名称" prop="设备名称" min-width="140" show-overflow-tooltip sortable="custom">
              <template slot-scope="scope">
                <span>{{ scope.row.设备名称 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="工序名称" prop="工序名称" min-width="65" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.工序名称 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="车间名称" prop="车间名称" min-width="65" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.车间 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="故障类别" prop="故障类别" min-width="80" show-overflow-tooltip sortable="custom">
              <template slot-scope="scope">
                <span>{{ scope.row.故障名称 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="状态" prop="状态" min-width="50" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tag color="#67c23a" type="info" size="mini" >{{ scope.row.状态 }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="left" label="维修人(已完成)" prop="维修人员姓名" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <div v-if="scope.row.维修人员姓名">
                  <el-tag v-for="(people,index) in scope.row.维修人员姓名" :key="index" color="rgb(0,142,207)" size="mini" type="info" style="margin: 0px 5px">{{ people }}</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="申请人" prop="申请人" min-width="70" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tag color="#c8c9cc" type="info" size="mini" >{{ scope.row.申请人姓名 }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="left" label="开始时间" prop="开始时间" min-width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.开始时间 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="持续时长" min-width="70" show-overflow-tooltip >
              <template slot-scope="scope">
                <span>{{ scope.row.持续时长 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="检修项目" min-width="70" show-overflow-tooltip >
              <template slot-scope="scope">
                <el-button type="text" size="small" icon="el-icon-search" @click="openDetails(scope.row)">详情</el-button>
              </template>
            </el-table-column>
            <el-table-column align="left" label="操作" min-width="100" show-overflow-tooltip >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-download"
                  style="font-size: 16px;padding: 0px"
                  @click="hisUpload(scope.row)">导出</el-button>
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  style="font-size: 16px;padding: 0px"
                  @click="deleteOrder(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block" style="margin-top: 10px;">
            <el-pagination
              v-if="!loading"
              :current-page="hisPageCurrent"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="hisPageSize"
              :total="hisTotal"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="hisSizeChange"
              @current-change="hisCurrentChange"/>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="lableName" :label="lableName" name="3">
          <div style="height: 65px;line-height: 65px;width: 100%;background-color: rgb(245,245,245);margin-top: 10px">
            <el-input v-model="keyword" style="width: 220px; margin-left: 20px;height: 50px" placeholder="Search" class="input11" @input="pageCurrent1 = 1;searchTable()" />
            <el-select v-model="machineShop2" style="width:180px;margin-left: 20px" clearable class="select12" placeholder="请选择车间" @change="pageCurrent1 = 1;getProductionLine2();getRegion2();searchTable()">
              <el-option
                v-for="item in machineShops2"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <el-select v-model="productionLine2" style="width:180px;margin-left: 20px" clearable class="select12" placeholder="请选择产线" @change="pageCurrent1 = 1;getRegion2();searchTable()">
              <el-option
                v-for="item in productionLines2"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <el-select v-model="region2" style="width:180px;margin-left: 20px" clearable class="select12" placeholder="请选择工序" @change="pageCurrent1 = 1;searchTable()">
              <el-option
                v-for="item in regions2"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </div>
          <el-table
            v-loading="loading"
            :data="tableData"
            :header-cell-style="tableHeaderColor"
            :cell-style="tableColor1"
            element-loading-spinner="el-icon-loading"
            tooltip-effect="dark"
            style="width: 100%"
            @sort-change="sortChange">
            <el-table-column align="left" label="工单号" prop="工单号" min-width="90" show-overflow-tooltip sortable="custom">
              <template slot-scope="scope">
                <el-tag color="rgb(153,153,153)" size="mini" type="info" style="cursor: pointer" @click="rowClick(scope.row)">{{ scope.row.工单号 }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="left" label="设备名称" prop="设备名称" min-width="140" show-overflow-tooltip sortable="custom">
              <template slot-scope="scope">
                <span>{{ scope.row.设备名称 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="工序名称" prop="工序名称" min-width="70" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.工序名称 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="车间名称" prop="车间名称" min-width="70" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.车间 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="故障类别" prop="故障类别" min-width="80" show-overflow-tooltip sortable="custom">
              <template slot-scope="scope">
                <span>{{ scope.row.故障名称 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="状态" prop="状态" min-width="60" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tag v-if="scope.row.状态代码 === 1 || scope.row.状态代码 === 2" color="red" type="info" size="mini" >{{ scope.row.状态 }}</el-tag>
                <el-tag v-if="scope.row.状态代码 === 4" color="rgb(0,142,207)" type="info" size="mini" >{{ scope.row.状态 }}</el-tag>
                <el-tag v-if="scope.row.状态代码 === 3" color="rgb(255,165,0)" type="info" size="mini" >{{ scope.row.状态 }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="left" label="维修人（正在进行）" prop="维修人" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <div v-if="scope.row.维修人员姓名">
                  <el-tag v-for="(people,index) in scope.row.维修人员姓名" :key="index" color="rgb(0,142,207)" size="mini" type="info" style="margin: 0px 5px">{{ people }}</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="left" label="申请人" prop="申请人" min-width="70" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-tag color="#c8c9cc" type="info" size="mini" >{{ scope.row.申请人姓名 }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="left" label="开始时间" prop="开始时间" min-width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.开始时间 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="持续时长" min-width="70" show-overflow-tooltip >
              <template slot-scope="scope">
                <span>{{ scope.row.持续时长 }}</span>
              </template>
            </el-table-column>
            <el-table-column align="left" label="检修项目" min-width="70" show-overflow-tooltip >
              <template slot-scope="scope">
                <el-button type="text" size="small" icon="el-icon-search" @click="openDetails(scope.row)">详情</el-button>
              </template>
            </el-table-column>
            <el-table-column align="left" label="操作" min-width="60" show-overflow-tooltip >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  style="font-size: 18px;padding: 0px"
                  @click="deleteOrder(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block" style="margin-top: 10px;">
            <el-pagination
              v-if="!loading"
              :current-page="pageCurrent1"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize1"
              :total="total1"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"/>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-dialog :visible.sync="dialogFormVisible" width="80%" >
        <el-table
          :data="tableData1"
          :header-cell-style="tableHeaderColor"
          :cell-style="tableColor1"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)"
          tooltip-effect="dark"
          style="width: 100%"
          height="500px">
          <el-table-column align="left" label="部位" width="85">
            <template slot-scope="scope">
              <span>{{ scope.row.部位 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="部件" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.部件 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="检修项目" min-width="110">
            <template slot-scope="scope">
              <span>{{ scope.row.检修项目 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="方法/要领" width="85">
            <template slot-scope="scope">
              <span>{{ scope.row.方法要领 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="工具材料" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.工具材料 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="判定基准" min-width="150">
            <template slot-scope="scope">
              <span >{{ scope.row.判定基准 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="要领书" width="85">
            <template slot-scope="scope">
              <span>{{ scope.row.要领书 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="周期" width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.周期 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="实施部门" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.实施部门 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="设备状态" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.设备状态 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="点检" width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.点检 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="给油" width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.给油 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="更换" width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.更换 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="清扫" width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.清扫 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" label="工时/min" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.工时 }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { ExecDatabase } from '@/main'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      machineShop: '', // 车间
      machineShop_check: 0,
      region: '', // 工序
      region_check: 0,
      productionLine: '', // 产线
      productionLine_check: 0,
      machineShops: [], // 车间
      regions: [], // 工序
      productionLines: [], // 产线
      machineShop1: '', // 车间
      machineShop1_check: 0,
      region1: '', // 工序
      region1_check: 0,
      productionLine1: '', // 产线
      productionLine1_check: 0,
      machineShops1: [], // 车间
      regions1: [], // 工序
      productionLines1: [], // 产线
      machineShop2: '', // 车间
      machineShop2_check: 0,
      region2: '', // 工序
      region2_check: 0,
      productionLine2: '', // 产线
      productionLine2_check: 0,
      machineShops2: [], // 车间
      regions2: [], // 工序
      productionLines2: [], // 产线
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      historyDate: [],
      history_check: 0,
      aa: '',
      options: [],
      noResponseActiveNames: '1',
      serviceActiveNames: '1',
      peopleActiveNames: '1',
      orderCount: {},
      lableName: '',
      keyword: '',
      keyword_check: 0,
      tableData: [],
      order: '',
      where: '',
      activeName: '1',
      loading: false,
      currentKeyword: '',
      currentKeyword_check: 0,
      currentOrder: '',
      currentTableData: [],
      historyKeyword: '',
      historyKeyword_check: 0,
      historyOrder: '',
      historyTableData: [],
      tableData1: [],
      dialogFormVisible: false,
      activeNames: ['1', '2'],
      dialogFormVisible1: false,
      title1: '',
      form1: {},
      activeName11: '1',
      activeName12: '1',
      dialogFormVisible2: false,
      title2: '',
      orderValue: '',
      machineGroupValue: '',
      machineValue: '',
      assetNumber: '',
      machine: {},
      equipmentTableData: [{}],
      orderTableData: [{}],
      orderCurrent: {},
      statusTableData: [{}],
      hisTotal: 0, // 总条数
      hisPageSize: 10, // 每页显示条数
      hisPageCurrent: 1, // 后台获取页
      total1: 0, // 总条数
      pageSize1: 10, // 每页显示条数
      pageCurrent1: 1, // 后台获取页
      total: 0, // 总条数
      pageSize: 10, // 每页显示条数
      pageCurrent: 1 // 后台获取页
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'id',
      'token',
      'cname'
    ])
  },
  created() {
    this.searchCurrentTable()
    this.searchCount()
    this.searchHistoryTable()
    this.getMachineShop()
    this.getMachineShop1()
  },
  methods: {
    openDetails(row) {
      var param = []
      param[0] = ['设备代码', row.设备代码]
      param[1] = ['计划开始日期', row.计划开始日期]
      var Data = this.CreateData('11', '维修工单_预防维修_详情查询', param)
      ExecDatabase(Data).then(response => {
        this.tableData1 = response.data
      })
      this.dialogFormVisible = true
    },
    // 获得车间
    getMachineShop() {
      this.machineShops = []
      this.machineShop = ''
      var param = []
      var Data = this.CreateData('11', '设备管理_车间_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.machineShops.push({
            label: v.车间,
            value: v.车间代码
          })
        })
      }).then(() => {
      })
    },
    // 获得产线
    getProductionLine() {
      this.productionLines = []
      this.productionLine = ''
      var param = []
      param[0] = ['车间代码', this.machineShop]
      var Data = this.CreateData('11', '设备管理_产线_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.productionLines.push({
            label: v.产线名称,
            value: v.产线代码
          })
        })
      }).then(() => {
      })
    },
    // 获得工序
    getRegion() {
      this.regions = []
      this.region = ''
      var param = []
      param[0] = ['产线代码', this.productionLine]
      var Data = this.CreateData('11', '设备管理_工序_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.regions.push({
            label: v.工序名称,
            value: v.工序代码
          })
        })
      }).then(() => {
      })
    },
    // 获得车间
    getMachineShop1() {
      this.machineShops1 = []
      this.machineShop1 = ''
      var param = []
      var Data = this.CreateData('11', '设备管理_车间_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.machineShops1.push({
            label: v.车间,
            value: v.车间代码
          })
        })
      }).then(() => {
      })
    },
    // 获得产线
    getProductionLine1() {
      this.productionLines1 = []
      this.productionLine1 = ''
      var param = []
      param[0] = ['车间代码', this.machineShop1]
      var Data = this.CreateData('11', '设备管理_产线_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.productionLines1.push({
            label: v.产线名称,
            value: v.产线代码
          })
        })
      }).then(() => {
      })
    },
    // 获得工序
    getRegion1() {
      this.regions1 = []
      this.region1 = ''
      var param = []
      param[0] = ['产线代码', this.productionLine1]
      var Data = this.CreateData('11', '设备管理_工序_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.regions1.push({
            label: v.工序名称,
            value: v.工序代码
          })
        })
      }).then(() => {
      })
    },
    // 表头样式
    tableHeaderColor() {
      return 'background-color: rgb(250, 250, 250);height:20px;border-bottom: 4px rgb(170, 170, 170) solid;color: rgb(35, 35, 35);font-weight: 5000;padding: 5px 10px'
    },
    tableColor1() {
      return 'border-color: #E8E8E8;padding: 12px 0px 10px 0px'
    },
    // 根据条件查询工单数量
    searchCount() {
      var param = []
      param[0] = ['当前用户', this.id]
      var Data = this.CreateData('11', '维修工单_预防工单数量_查询', param)
      ExecDatabase(Data).then(response => {
        this.orderCount = response.data[0]
      })
    },
    // 点击未响应工单全部
    noResponseClick() {
      this.lableName = '未响应的工单（全部）'
      this.activeName = '3'
      this.keyword = ''
      this.where = 2
      this.pageCurrent1 = 1
      this.searchTable()
      this.productionLines2 = []
      this.productionLine2 = ''
      this.regions2 = []
      this.region2 = ''
      this.getMachineShop2()
    },
    // 点击未响应工单异常
    noResponseClick1() {
      this.lableName = '未响应的工单（异常）'
      this.activeName = '3'
      this.keyword = ''
      this.where = 3
      this.pageCurrent1 = 1
      this.searchTable()
      this.productionLines2 = []
      this.productionLine2 = ''
      this.regions2 = []
      this.region2 = ''
      this.getMachineShop2()
    },
    // 点击维修中工单全部
    serviceClick() {
      this.lableName = '正在维修中的工单（全部）'
      this.activeName = '3'
      this.keyword = ''
      this.where = 4
      this.pageCurrent1 = 1
      this.searchTable()
      this.productionLines2 = []
      this.productionLine2 = ''
      this.regions2 = []
      this.region2 = ''
      this.getMachineShop2()
    },
    // 点击维修中工单待确认
    confirmClick() {
      this.lableName = '正在维修中的工单（待确认）'
      this.activeName = '3'
      this.keyword = ''
      this.where = 5
      this.pageCurrent1 = 1
      this.searchTable()
      this.productionLines2 = []
      this.productionLine2 = ''
      this.regions2 = []
      this.region2 = ''
      this.getMachineShop2()
    },
    // 点击维修中工单异常
    serviceClick1() {
      this.lableName = '正在维修中的工单（异常）'
      this.activeName = '3'
      this.keyword = ''
      this.where = 6
      this.pageCurrent1 = 1
      this.searchTable()
      this.productionLines2 = []
      this.productionLine2 = ''
      this.regions2 = []
      this.region2 = ''
      this.getMachineShop2()
    },
    // 点击维修人员状态
    peopleClick() {
      this.$router.push({
        name: 'PersonnelStatus'
        // query: {
        //   jobNumber: row
        // }
      })
    },
    // 获得车间
    getMachineShop2() {
      this.machineShops2 = []
      this.machineShop2 = ''
      var param = []
      var Data = this.CreateData('11', '设备管理_车间_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.machineShops2.push({
            label: v.车间,
            value: v.车间代码
          })
        })
      }).then(() => {
      })
    },
    // 获得产线
    getProductionLine2() {
      this.productionLines2 = []
      this.productionLine2 = ''
      var param = []
      param[0] = ['车间代码', this.machineShop2]
      var Data = this.CreateData('11', '设备管理_产线_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.productionLines2.push({
            label: v.产线名称,
            value: v.产线代码
          })
        })
      }).then(() => {
      })
    },
    // 获得工序
    getRegion2() {
      this.regions2 = []
      this.region2 = ''
      var param = []
      param[0] = ['产线代码', this.productionLine2]
      var Data = this.CreateData('11', '设备管理_工序_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.regions2.push({
            label: v.工序名称,
            value: v.工序代码
          })
        })
      }).then(() => {
      })
    },
    // 当前工单条件查询
    searchTable() {
      this.tableData = []
      if (this.keyword) { this.keyword_check = 1 } else { this.keyword_check = 0 }
      if (this.machineShop2) { this.machineShop2_check = 1 } else { this.machineShop2_check = 0 }
      if (this.productionLine2) { this.productionLine2_check = 1 } else { this.productionLine2_check = 0 }
      if (this.region2) { this.region2_check = 1 } else { this.region2_check = 0 }
      var param = []
      param[0] = ['PageSize', this.pageSize1]
      param[1] = ['PageCurrent', this.pageCurrent1]
      param[2] = ['PageCount', '1111', 'int', '1']
      param[3] = ['ItemCount', '1111', 'int', '1']
      param[4] = ['排序方式', this.order]
      param[5] = ['关键字', this.keyword]
      param[6] = ['关键字_check', this.keyword_check]
      param[7] = ['条件代码', this.where]
      param[8] = ['当前用户', this.id]
      param[9] = ['车间', this.machineShop2]
      param[10] = ['车间_check', this.machineShop2_check]
      param[11] = ['产线', this.productionLine2]
      param[12] = ['产线_check', this.productionLine2_check]
      param[13] = ['工序', this.region2]
      param[14] = ['工序_check', this.region2_check]
      var Data = this.CreateData('11', '维修工单_预防当前工单_条件查询_分页', param)
      ExecDatabase(Data).then(response => {
        response.data.result.map(v => {
          if (v.维修人员姓名) {
            v.维修人员姓名 = v.维修人员姓名.split(',')
          }
          this.tableData.push({
            维修工单代码: v.维修工单代码,
            工单号: v.工单号,
            设备名称: v.设备名称,
            资产号: v.资产号,
            故障名称: v.故障名称,
            维修人员姓名: v.维修人员姓名,
            状态: v.状态,
            状态代码: v.状态代码,
            申请人姓名: v.申请人姓名,
            申请人代码: v.申请人代码,
            开始时间: v.开始时间,
            持续时长: v.持续时长,
            设备代码: v.设备代码,
            是否停机: v.是否停机,
            设备编号: v.设备编号,
            工序名称: v.工序名称,
            车间: v.车间,
            计划开始日期: v.计划开始日期
          })
        })
        this.total1 = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      })
    },
    // 根据排序查询工单
    sortChange(column) {
      if (column.order === 'ascending') {
        this.order = column.prop + ' asc'
      } else if (column.order === 'descending') { this.order = column.prop + ' desc' } else {
        this.order = ''
      }
      this.pageCurrent1 = 1
      this.searchTable()
    },
    // 根据排序顺序查询当前工单
    currentSortChange(column) {
      if (column.order === 'ascending') {
        this.currentOrder = column.prop + ' asc'
      } else if (column.order === 'descending') { this.currentOrder = column.prop + ' desc' } else {
        this.currentOrder = ''
      }
      this.pageCurrent = 1
      this.searchCurrentTable()
    },
    // 查询当前工单
    searchCurrentTable() {
      this.currentTableData = []
      if (this.currentKeyword) { this.currentKeyword_check = 1 } else { this.currentKeyword_check = 0 }
      if (this.machineShop) { this.machineShop_check = 1 } else { this.machineShop_check = 0 }
      if (this.productionLine) { this.productionLine_check = 1 } else { this.productionLine_check = 0 }
      if (this.region) { this.region_check = 1 } else { this.region_check = 0 }
      var param = []
      param[0] = ['PageSize', this.pageSize]
      param[1] = ['PageCurrent', this.pageCurrent]
      param[2] = ['PageCount', '1111', 'int', '1']
      param[3] = ['ItemCount', '1111', 'int', '1']
      param[4] = ['排序方式', this.currentOrder]
      param[5] = ['关键字', this.currentKeyword]
      param[6] = ['关键字_check', this.currentKeyword_check]
      param[7] = ['车间', this.machineShop]
      param[8] = ['车间_check', this.machineShop_check]
      param[9] = ['产线', this.productionLine]
      param[10] = ['产线_check', this.productionLine_check]
      param[11] = ['工序', this.region]
      param[12] = ['工序_check', this.region_check]
      var Data = this.CreateData('11', '维修工单_预防当前工单_查询_分页', param)
      ExecDatabase(Data).then(response => {
        console.log(response.data.result, 11111)
        response.data.result.map(v => {
          if (v.维修人员姓名) {
            v.维修人员姓名 = v.维修人员姓名.split(',')
          }
          this.currentTableData.push({
            维修工单代码: v.维修工单代码,
            工单号: v.工单号,
            设备名称: v.设备名称,
            资产号: v.资产号,
            故障名称: v.故障名称,
            维修人员姓名: v.维修人员姓名,
            状态: v.状态,
            状态代码: v.状态代码,
            申请人姓名: v.申请人姓名,
            申请人代码: v.申请人代码,
            开始时间: v.开始时间,
            持续时长: v.持续时长,
            设备代码: v.设备代码,
            是否停机: v.是否停机,
            设备编号: v.设备编号,
            工序名称: v.工序名称,
            车间: v.车间,
            计划开始日期: v.计划开始日期
          })
        })
        this.total = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      })
    },
    // 根据排序顺序查询历史工单
    historySortChange(column) {
      if (column.order === 'ascending') {
        this.historyOrder = column.prop + ' asc'
      } else if (column.order === 'descending') { this.historyOrder = column.prop + ' desc' } else {
        this.historyOrder = ''
      }
      this.hisPageCurrent = 1
      this.searchHistoryTable()
    },
    // 查询历史工单
    searchHistoryTable() {
      this.historyTableData = []
      var param = []
      if (this.historyKeyword) { this.historyKeyword_check = 1 } else { this.historyKeyword_check = 0 }
      if (this.machineShop1) { this.machineShop1_check = 1 } else { this.machineShop1_check = 0 }
      if (this.productionLine1) { this.productionLine1_check = 1 } else { this.productionLine1_check = 0 }
      if (this.region1) { this.region1_check = 1 } else { this.region1_check = 0 }
      if (this.historyDate === null) { this.history_check = 0 } else {
        if (this.historyDate.length === 0) { this.history_check = 0 } else {
          this.history_check = 1
          param[14] = ['开始日期', this.historyDate[0]]
          param[15] = ['结束日期', this.historyDate[1]]
        }
      }
      param[0] = ['PageSize', this.hisPageSize]
      param[1] = ['PageCurrent', this.hisPageCurrent]
      param[2] = ['PageCount', '1111', 'int', '1']
      param[3] = ['ItemCount', '1111', 'int', '1']
      param[4] = ['排序方式', this.historyOrder]
      param[5] = ['关键字', this.historyKeyword]
      param[6] = ['关键字_check', this.historyKeyword_check]
      param[7] = ['开始日期_check', this.history_check]
      param[8] = ['车间', this.machineShop1]
      param[9] = ['车间_check', this.machineShop1_check]
      param[10] = ['产线', this.productionLine1]
      param[11] = ['产线_check', this.productionLine1_check]
      param[12] = ['工序', this.region1]
      param[13] = ['工序_check', this.region1_check]
      var Data = this.CreateData('11', '维修工单_预防历史工单_查询_分页', param)
      ExecDatabase(Data).then(response => {
        response.data.result.map(v => {
          if (v.维修人员姓名) {
            v.维修人员姓名 = v.维修人员姓名.split(',')
          }
          this.historyTableData.push({
            维修工单代码: v.维修工单代码,
            工单号: v.工单号,
            设备名称: v.设备名称,
            资产号: v.资产号,
            故障名称: v.故障名称,
            维修人员姓名: v.维修人员姓名,
            状态: v.状态,
            状态代码: v.状态代码,
            申请人姓名: v.申请人姓名,
            申请人代码: v.申请人代码,
            开始时间: v.开始时间,
            持续时长: v.持续时长,
            设备代码: v.设备代码,
            是否停机: v.是否停机,
            设备编号: v.设备编号,
            工序名称: v.工序名称,
            车间: v.车间,
            计划开始日期: v.计划开始日期
          })
        })
        this.hisTotal = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      })
    },
    deleteOrder(row) {
      this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var param = []
        param[0] = ['维修工单代码', row.维修工单代码]
        var Data = this.CreateData('12', '维修工单_预防维修_删除', param)
        ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message.success('删除成功')
            this.searchCurrentTable()
            this.searchHistoryTable()
            this.searchTable()
            this.searchCount()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 导出历史工单
    historyUpload() {
      if (!this.historyDate) { this.$message.error('请选择时间区间') } else {
        if (this.historyDate.length === 0) { this.$message.error('请选择时间区间') } else {
          var param = []
          param[0] = ['开始日期', this.historyDate[0]]
          param[1] = ['结束日期', this.historyDate[1]]
          param[2] = ['排序方式', this.historyOrder]
          param[3] = ['关键字', this.historyKeyword]
          param[4] = ['关键字_check', this.historyKeyword_check]
          param[5] = ['车间', this.machineShop1]
          param[6] = ['车间_check', this.machineShop1_check]
          param[7] = ['产线', this.productionLine1]
          param[8] = ['产线_check', this.productionLine1_check]
          param[9] = ['工序', this.region1]
          param[10] = ['工序_check', this.region1_check]
          var Data = this.CreateData('2001', '维修工单_计划历史工单_导出', param)
          this.exportExcel_NPOI(Data)
        }
      }
    },
    // 导出工单
    hisUpload(row) {
      var param = []
      param[0] = ['维修工单代码', row.维修工单代码]
      var Data = this.CreateData('2001', '维修工单_工单_导出', param)
      this.exportExcel_NPOI(Data)
    },
    // 点击第三工单表格行
    rowClick(row) {
      this.$router.push({
        name: 'Test1',
        query: {
          jobNumber: row.维修工单代码,
          equipmentNumber: row.设备编号
        }
      })
    },
    //  点击历史工单表格行
    historyClick(row) {
      this.$router.push({
        name: 'Test1',
        query: {
          jobNumber: row.维修工单代码,
          equipmentNumber: row.设备编号
        }
      })
    },
    // 点击当前工单表格行
    currentClick(row) {
      console.log(row, 2123)
      this.$router.push({
        name: 'Test1',
        query: {
          jobNumber: row.维修工单代码,
          equipmentNumber: row.设备编号
        }
      })
    },
    hisSizeChange(val) {
      this.hisPageCurrent = 1
      this.hisPageSize = val
      this.searchHistoryTable()
    },
    hisCurrentChange(val) {
      this.hisPageCurrent = val
      this.searchHistoryTable()
    },
    handleSizeChange1(val) {
      this.pageCurrent1 = 1
      this.pageSize1 = val
      this.searchTable()
    },
    handleCurrentChange1(val) {
      this.pageCurrent1 = val
      this.searchTable()
    },
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchCurrentTable()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchCurrentTable()
    }
  }
}
</script>
<style scoped>
  >>>.collapse1 .el-collapse-item__header {
    height: 50px;
    border-bottom: 1px solid rgb(224, 224, 225);
    border-top: 1px solid rgb(224, 224, 225);
    font-size: 20px;
    font-weight: 500;
  }
  >>>.collapse1 .el-collapse-item__wrap {
    border-bottom: 1px solid rgb(224, 224, 225);
  }
  >>>.collapse1 .el-collapse-item__header.is-active {
    border-bottom-color: transparent;
  }
  .el-range-editor.el-input__inner {
    padding: 9px 10px;
  }
</style>
