<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-card style="height: 850px;overflow:scroll;padding: 0px 8px 0px 8px">
          <div style="height: 65px;line-height: 65px;width: 100%;background-color: rgb(245,245,245);margin-top: 10px">
            <span style="margin-left: 20px;font-size: 15px">{{ total }} 项 </span>
            <el-select v-model="machineShop" style="width:160px" clearable class="select12" placeholder="请选择车间" @change="pageCurrent = 1;getProductionLine();getRegion();searchTable()">
              <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:160px" clearable class="select12" placeholder="请选择产线" @change="pageCurrent = 1;getRegion();searchTable()">
              <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:160px" clearable class="select12" placeholder="请选择工序" @change="pageCurrent = 1;searchTable()">
              <el-option
                v-for="item in regions"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
            <el-select v-model="status" style="width:160px" clearable class="select12" placeholder="请选择设备状态" @change="pageCurrent = 1;searchTable()">
              <el-option
                v-for="item in statuss"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </div>
          <div style="margin-top: 30px">
            <el-row >
              <el-col :span="5">
                <span style="font-size: 25px">设备列表</span>
              </el-col>
              <el-col :span="4">
                <el-row >
                  <el-col :span="9">
                    <div class="div2" style="background-color: forestgreen"/>
                  </el-col>
                  <el-col :span="15">
                    <div style="margin-top: 7px">可用</div>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row >
                  <el-col :span="9">
                    <div class="div2" style="background-color: rgb(252,175,23)"/>
                  </el-col>
                  <el-col :span="15">
                    <div style="margin-top: 7px">维修中</div>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row >
                  <el-col :span="9">
                    <div class="div2" style="background-color: rgb(226,0,21)"/>
                  </el-col>
                  <el-col :span="15">
                    <div style="margin-top: 7px">故障停机</div>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row >
                  <el-col :span="9">
                    <div class="div2" style="background-color: rgb(0,142,207)"/>
                  </el-col>
                  <el-col :span="15">
                    <div style="margin-top: 7px">带病运转</div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
          <div v-for="(machine,index) in machines" :key="machine.设备代码" style="display: inline-block">
            <div :class="{changeStyle:changeSelectStyle === machine.设备代码}" style="margin: 30px 0px 0px 8px;border: 3px solid white;border-radius: 5px 5px 5px 5px">
              <div
                :class="{changeStyle1: machine.状态代码 === 1,changeStyle2: machine.状态代码 === 2,changeStyle3: machine.状态代码 === 3,changeStyle4: machine.状态代码 === 4}"
                class="div1"
                @click="machineClick(machine, index)">
                <div style="margin: 5px 5px;text-align: left;height: 35%;font-size: 14px">{{ machine.设备名称 + '(' + machine.ABC名称 + ')' }}</div>
                <div style="height: 32%;text-align: center">{{ machine.工序 }}</div>
                <div style="height: 32%;text-align: center">{{ machine.设备编号 }}</div>
              </div>
            </div>
          </div>
          <el-row style="margin-top: 10px;margin-left: 10px">
            <el-col :span="10">
              <el-pagination
                :current-page="pageCurrent"
                :page-sizes="[15, 20, 30, 40]"
                :page-size="pageSize"
                :total="total"
                layout="sizes, prev, pager, next"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"/>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="height: 850px;overflow:scroll;padding: 0px 8px 0px 8px">
          <div style="height: 65px;line-height: 65px;width: 100%;background-color: rgb(245,245,245);margin-top: 10px">
            <el-row>
              <el-col :span="20">
                <span style="margin-left: 20px">设备编号: </span>
                <el-input v-model="assetNumber" style="width:150px; margin-left: 20px;height: 50px" class="input11"/>
                <el-button v-if="isShow" type="text" icon="el-icon-close" style="height: 50px;margin-left: 10px" size="large" @click="assetNumberClose()"/>
                <el-button v-else type="text" icon="el-icon-search" style="height: 50px;margin-left: 10px" size="large" @click="assetNumberSearch()"/>
              </el-col>
              <el-col :span="4">
                <el-button v-if="isShow" type="text" icon="el-icon-document" style="margin-left: 45%;height: 50px" size="large" @click="details()"/>
              </el-col>
            </el-row>
          </div>
          <div v-if="isShow" style="margin-top: 15px">
            <span style="font-size: 24px">设备描述: {{ machine.设备名称 }}</span>
            <div v-if="orderCount !== 0">
              <div style="font-size: 24px;margin-top: 40px">进行中的工单</div>
              <el-table
                v-loading="loading"
                :data="tableData"
                :header-cell-style="tableHeaderColor"
                :cell-style="tableColor"
                element-loading-text="数据加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.2)"
                tooltip-effect="dark"
                style="width: 100%;"
                @sort-change="sortChange">
                <el-table-column align="left" label="工单号" prop="工单号" min-width="120" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <el-tag color="rgb(153,153,153)" size="mini" type="info" style="cursor: pointer" @click="orderClick(scope.row)">{{ scope.row.工单号 }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="状态" prop="状态" min-width="80" show-overflow-tooltip sortable="custom">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.状态代码 === 1 || scope.row.状态代码 === 2" color="rgb(227,0,21)" 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="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="120" show-overflow-tooltip sortable="custom">
                  <template slot-scope="scope">
                    <span>{{ scope.row.开始时间 }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="持续时长" min-width="100" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.持续时长 }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-form ref="form" :model="form" :rules="rules" label-position="top" label-width="80px" class="formItem">
              <el-row style="margin-top: 40px">
                <el-col :span="12">
                  <div style="border-right: rgb(224,224,224) 1px solid;">
                    <el-form-item style="color: black" label="故障类别" prop="faultType">
                      <el-select v-model="form.faultType" style="width:200px">
                        <el-option
                          v-for="item in faultTypes"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"/>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="故障发生时间" prop="faultTime">
                      <el-time-picker
                        v-model="form.faultTime"
                        :picker-options="{
                        selectableRange: '00:00:00 - 23:59:59'}"
                        style="width: 200px"
                        value-format="HH:mm:ss"
                        @change="faultTimeChange()"/>
                    </el-form-item>
                    <el-form-item label="迟报原因" prop="faultReason">
                      <div style="width: 90%;margin-top: 10px">
                        <el-input v-model="form.faultReason" type="textarea" class="inputext1" maxlength="255" show-word-limit clearable/>
                      </div>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="12">
                  <el-form-item style="color: black;margin-left: 20px" label="工单来源" prop="faultType">
                    <el-select v-model="form.workOrderSourceValue" style="width:200px">
                      <el-option
                        v-for="item in workOrderSource"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="" prop="switch">
                    <el-switch
                      v-model="form.switch"
                      active-text="是否事故"
                      style="margin-top: 20px;margin-left: 20px"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form-item label="故障现象" prop="faultDescription">
                  <div style="width: 60%;margin-top: 10px">
                    <el-input v-model="form.faultDescription" type="textarea" class="inputext1" maxlength="255" show-word-limit clearable/>
                  </div>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item >
                  <el-button class="button11" @click="submitOrder('form')">下 单</el-button>
                </el-form-item>
              </el-row>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--     设备信息-->
    <el-dialog :visible.sync="dialogFormVisible" :title="title" center width="1000px" height="750px">
      <el-row>
        <el-col :span="8">
          <div style="margin-left: 35px; height: 280px;width: 280px;">
            <img v-if="machine.图片" :src="machine.图片" style="border-radius:5px 5px 5px 5px;" class="avatar">
            <img v-else src="static/image.png" style="border-radius:5px 5px 5px 5px;" class="avatar">
          </div>
        </el-col>
        <el-col :span="16">
          <el-collapse v-model="activeNames" style="margin-left: 70px">
            <el-collapse-item title="基础信息" name="1">
              <el-row>
                <el-col :span="8">
                  <div class="div3">设备名称：</div>
                </el-col>
                <el-col :span="16">
                  <div class="div4">{{ machine.设备名称 }}</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div class="div3">保修起始日期：</div>
                </el-col>
                <el-col :span="16">
                  <div class="div4">{{ machine.保修起始日期 }}</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div class="div3">保修截至日期：</div>
                </el-col>
                <el-col :span="16">
                  <div class="div4">{{ machine.保修截至日期 }}</div>
                </el-col>
              </el-row>
            </el-collapse-item>
            <el-collapse-item title="位置" name="2">
              <el-row>
                <el-col :span="8">
                  <div class="div3">车间：</div>
                </el-col>
                <el-col :span="16">
                  <div class="div4">{{ machine.车间 }}</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div class="div3">产线：</div>
                </el-col>
                <el-col :span="16">
                  <div class="div4">{{ machine.产线 }}</div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <div class="div3">工序：</div>
                </el-col>
                <el-col :span="16">
                  <div class="div4">{{ machine.工序 }}</div>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
      <el-row>
        <el-button type="primary" plain style="margin-left: 90%;margin-top: 10px" size="large" @click="detailMachine()">详情</el-button>
      </el-row>
    </el-dialog>
    <!--    设备详情-->
    <el-dialog :title="title1" :visible.sync="dialogFormVisible1" center width="60%" >
      <el-form ref="form1" :model="form1" label-position="top" label-width="700px" label-padding-bottom="0px">
        <span style="font-size: 22px">设备信息</span>
        <el-card style="margin-top: 10px">
          <el-row>
            <el-col :span="18">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="资产号" prop="assetNumber">
                    <div class="div">{{ machine.资产号 }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="设备编号:" prop="description">
                    <div class="div">{{ machine.设备编号 }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="设备名称:" prop="description">
                    <div class="div">{{ machine.设备名称 }}</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="承包人:" prop="deviceGroup">
                    <div class="div">{{ machine.承包人 }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="网格长:" prop="people">
                    <div class="div">{{ machine.网格长 }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="ABC指标:" prop="quota">
                    <div class="div">{{ machine.ABC指标 }}</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="车间:" prop="machineShop">
                    <div class="div">{{ machine.车间 }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="产线:" prop="productionLine">
                    <div class="div">{{ machine.产线 }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="工序:" prop="region">
                    <div class="div">{{ machine.工序 }}</div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <div class="avatar-uploader" >
                <img v-if="machine.图片" :src="machine.图片" class="avatar">
                <img v-else src="static/image.png" class="avatar">
              </div>
            </el-col>
          </el-row>
        </el-card>
        <el-card style="margin-top: 20px">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="1">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="成本中心">
                    <div class="div">{{ machine.成本中心 }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="保修起始日期">
                    <div class="div">{{ machine.保修起始日期 }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="附加信息1">
                    <div class="div">{{ machine.附加信息1 }}</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="工作中心代码">
                    <div class="div">{{ machine.工作中心代码 }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="保修终止日期">
                    <div class="div">{{ machine.保修截至日期 }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="附加信息2">
                    <div class="div">{{ machine.附加信息2 }}</div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="制造商" name="2">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="制造商">
                    <div class="div">{{ machine.制造商 }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="型号">
                    <div class="div">{{ machine.设备型号 }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="生产序列号">
                    <div class="div">{{ machine.生产序列号 }}</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="供应商">
                    <div class="div">{{ machine.供应商 }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="制造日期">
                    <div class="div">{{ machine.制造日期 }}</div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="生命周期管理" name="3">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="开始日期">
                    <div class="div">{{ machine.生命周期开始日期 }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="警告日期">
                    <div class="div">{{ machine.生命周期警告日期 }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="报废日期">
                    <div class="div">{{ machine.生命周期报废日期 }}</div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="资产折旧" name="4">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="原值">
                    <div class="div">{{ machine.原值 }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="资产价值">
                    <div class="div">{{ machine.资产价值 }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="剩余价值">
                    <div class="div">{{ machine.剩余价值 }}</div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-card>
        <el-card style="margin-top: 20px">
          <el-tabs v-model="activeName1" @tab-click="handleClickMachineInfo">
            <el-tab-pane label="标准文件" name="1">
              <el-row>
                <div v-for="(file, key) in hadFile" :key="key">
                  <div class="wrapper">
                    <div class="content">
                      <div v-if="file.suffix==='pdf'" class="icon"><svg-icon icon-class="pdf" /></div>
                      <div v-else-if="file.suffix==='docx'||file.suffix === 'doc'" class="icon"><svg-icon icon-class="doc" /></div>
                      <div v-else-if="file.suffix==='xlsx' || file.suffix === 'xls'" class="icon"><svg-icon icon-class="excel" /></div>
                      <div v-else-if="file.suffix==='pptx' || file.suffix === 'ppt'" class="icon"><svg-icon icon-class="ppt" /></div>
                      <div v-else-if="file.suffix==='jpg' || file.suffix === 'jpeg'|| file.suffix === 'png'" class="icon"><svg-icon icon-class="pic" /></div>
                      <div v-else class="icon"><svg-icon icon-class="file" /></div>
                      <a id="appUrl2" :href="file.url" target="view_window"><div class="info">{{ file.name }}</div></a>
                    </div>
                  </div>
                </div>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="技术参考文件" name="2">
              <el-row>
                <div v-for="(file, key) in hadFile1" :key="key">
                  <div class="wrapper">
                    <div class="content">
                      <div v-if="file.suffix==='pdf'" class="icon"><svg-icon icon-class="pdf" /></div>
                      <div v-else-if="file.suffix==='docx'||file.suffix === 'doc'" class="icon"><svg-icon icon-class="doc" /></div>
                      <div v-else-if="file.suffix==='xlsx' || file.suffix === 'xls'" class="icon"><svg-icon icon-class="excel" /></div>
                      <div v-else-if="file.suffix==='pptx' || file.suffix === 'ppt'" class="icon"><svg-icon icon-class="ppt" /></div>
                      <div v-else-if="file.suffix==='jpg' || file.suffix === 'jpeg'|| file.suffix === 'png'" class="icon"><svg-icon icon-class="pic" /></div>
                      <div v-else class="icon"><svg-icon icon-class="file" /></div>
                      <a id="appUrl3" :href="file.url" target="view_window"><div class="info">{{ file.name }}</div></a>
                    </div>
                  </div>
                </div>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="备件列表" name="3">
              <el-table
                :data="spareTableData2"
                :header-cell-style="tableHeaderColor"
                :cell-style="tableColor3"
                element-loading-text="数据加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.2)"
                tooltip-effect="dark"
                height="402px"
                style="width: 75%">
                <el-table-column align="left" label="SAP编码" prop="SAP编码" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <div>{{ scope.row.SAP编码 }}</div>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="备件名称" prop="备件名称" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.物料描述 }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="库存地点" prop="库存地点" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.库存地点 }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="库存架位" prop="库存架位" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.库存架位 }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="一级帐数" prop="数量" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.SAP库存数量 }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="二级帐数" prop="二级帐" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.二级帐 }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="单价" prop="单价" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.单价 }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="备件更换历史" name="4">
              <el-table
                v-loading="loading"
                :data="spareTableData"
                :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"
                height="400px"
                style="width: 70%">
                <el-table-column align="left" label="SAP编码" prop="SAP编码" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <div>{{ scope.row.SAP编码 }}</div>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="备件名称" prop="备件名称" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.备件名称 }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="一级帐数" prop="数量" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.数量 }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="二级帐数" prop="二级帐" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.二级帐 }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="操作时间" prop="操作时间" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.操作时间 }}</span>
                  </template>
                </el-table-column>
              </el-table>
              <div class="block" style="margin-top: 10px;">
                <el-pagination
                  v-if="!loading"
                  :current-page="sparePageCurrent"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="sparePageSize"
                  :total="spareTotal"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange1"
                  @current-change="handleCurrentChange1"/>
              </div>
            </el-tab-pane>
            <el-tab-pane label="EM" name="5">
              <el-table
                v-loading="loading"
                :data="orderTableData"
                :header-cell-style="tableHeaderColor"
                :cell-style="tableColor2"
                element-loading-text="数据加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.2)"
                tooltip-effect="dark"
                height="400px"
                style="width: 90%">
                <el-table-column align="left" label="工单号" prop="工单号" min-width="120" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <el-tag color="rgb(153,153,153)" size="mini" type="info" style="cursor: pointer" @click="orderClick(scope.row)">{{ scope.row.工单号 }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="故障类别" prop="故障类别" min-width="80" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.故障名称 }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="故障现象" prop="故障现象" min-width="120" 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>
                  <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>
                    <el-tag v-if="scope.row.状态代码 === 5" color="green" type="info" size="mini" >{{ scope.row.状态 }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="开始时间" prop="开始时间" min-width="130" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.开始时间 }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="持续时长" prop="持续时长" min-width="120" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.持续时长 }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="CM" name="6">
              <el-table
                v-loading="loading"
                :data="orderTableData1"
                :header-cell-style="tableHeaderColor"
                :cell-style="tableColor2"
                element-loading-text="数据加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.2)"
                tooltip-effect="dark"
                height="400px"
                style="width: 90%">
                <el-table-column align="left" label="工单号" prop="工单号" min-width="120" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <el-tag color="rgb(153,153,153)" size="mini" type="info" style="cursor: pointer" @click="orderClick(scope.row)">{{ scope.row.工单号 }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="故障类别" prop="故障类别" min-width="80" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.故障名称 }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="故障现象" prop="故障现象" min-width="120" 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>
                  <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>
                    <el-tag v-if="scope.row.状态代码 === 5" color="green" type="info" size="mini" >{{ scope.row.状态 }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="开始时间" prop="开始时间" min-width="130" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.开始时间 }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="持续时长" prop="持续时长" min-width="120" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.持续时长 }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="PM" name="7">
              <el-table
                v-loading="loading"
                :data="orderTableData2"
                :header-cell-style="tableHeaderColor"
                :cell-style="tableColor2"
                element-loading-text="数据加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.2)"
                tooltip-effect="dark"
                height="400px"
                style="width: 90%">
                <el-table-column align="left" label="工单号" prop="工单号" min-width="120" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <el-tag color="rgb(153,153,153)" size="mini" type="info" style="cursor: pointer" @click="orderClick(scope.row)">{{ scope.row.工单号 }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="故障类别" prop="故障类别" min-width="80" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.故障名称 }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="故障现象" prop="故障现象" min-width="120" 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>
                  <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>
                    <el-tag v-if="scope.row.状态代码 === 5" color="green" type="info" size="mini" >{{ scope.row.状态 }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="开始时间" prop="开始时间" min-width="130" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.开始时间 }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="持续时长" prop="持续时长" min-width="120" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span>{{ scope.row.持续时长 }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { ExecDatabase } from '@/main'
import { MESDownloadFile } from '@/utils/request'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      hadFile: [],
      hadFile1: [],
      workOrderSource: [{
        value: '应急维修过程',
        label: '应急维修过程'
      }, {
        value: '预防维修过程',
        label: '预防维修过程'
      }, {
        value: '点检过程',
        label: '点检过程'
      }, {
        value: '巡检过程',
        label: '巡检过程'
      }, {
        value: '交接班',
        label: '交接班'
      }],
      keyword: '', // 关键词
      keyword_check: 0,
      machineShop: '', // 车间
      machineShop_check: 0,
      status: '',
      status_check: 0,
      region: '', // 工序
      region_check: 0,
      productionLine: '', // 产线
      productionLine_check: 0,
      machineShops: [], // 车间
      statuss: [], //
      regions: [], // 工序
      productionLines: [], // 产线
      machines: [], // 设备
      changeSelectStyle: -1,
      machine: [], // 设备
      machineValue: '', // 设备代码
      assetNumber: '', // 资产号
      faultTypes: [],
      form: {
        faultType: '',
        faultTime: '',
        faultReason: '',
        workOrderSourceValue: '',
        switch: false, // 是否事故
        faultDescription: '' // 问题描述
      },
      rules: {
        workOrderSourceValue: [{ required: true, trigger: 'blur' }],
        faultTime: [{ required: true, trigger: 'blur' }],
        faultDescription: [{ required: true, trigger: 'blur' }],
        faultType: [{ required: true, trigger: 'blur' }],
        faultReason: [{ required: false, trigger: 'blur' }]
      },
      isShow: false,
      dialogFormVisible: false,
      title: '',
      dialogFormVisible1: false,
      title1: '',
      form1: {},
      activeName: '1',
      activeName1: '1',
      activeNames: ['1', '2'],
      tableData: [],
      orderCount: 0, // 工单数量
      order: '', // 排序方式
      loading: false,
      loadingFiles: false,
      tableDataFiles: [],
      spareTableData: [],
      orderTableData: [],
      orderTableData1: [],
      orderTableData2: [],
      spareTableData1: [],
      spareTableData2: [],
      spareTotal: 0, // 总条数
      sparePageSize: 10, // 每页显示条数
      sparePageCurrent: 1, // 后台获取页
      total: 0, // 总条数
      pageSize: 15, // 每页显示条数
      pageCurrent: 1 // 后台获取页
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'id',
      'token',
      'cname'
    ])
  },
  created() {
    this.searchTable()
    this.getMachineShop()
    this.getStatus()
  },
  methods: {
    uploadManual() {
      this.hadFile = []
      var param = []
      param[0] = ['设备代码', this.machineValue]
      param[1] = ['类型', 1]
      var Data = this.CreateData('11', '基础数据_设备文件_查询数据', param)
      ExecDatabase(Data).then(res => {
        this.suffix = res.data
        if (res.data.length > 0) {
          const server = `${MESDownloadFile}`.split('/')
          res.data.map(item => {
            this.hadFile.push({
              url: `http://${server[2]}/webpage/part/${item.uid}.${item.suffix}`,
              name: `${item.name}.${item.suffix}`,
              suffix: item.suffix,
              id: item.num
            })
          })
        }
      })
    },
    uploadManual1() {
      this.hadFile1 = []
      var param = []
      param[0] = ['设备代码', this.machineValue]
      param[1] = ['类型', 2]
      var Data = this.CreateData('11', '基础数据_设备文件_查询数据', param)
      ExecDatabase(Data).then(res => {
        this.suffix = res.data
        if (res.data.length > 0) {
          const server = `${MESDownloadFile}`.split('/')
          res.data.map(item => {
            this.hadFile1.push({
              url: `http://${server[2]}/webpage/part/${item.uid}.${item.suffix}`,
              name: `${item.name}.${item.suffix}`,
              suffix: item.suffix,
              id: item.num
            })
          })
        }
      })
    },
    // 获得设备状态
    getStatus() {
      this.statuss = []
      this.status = ''
      var param = []
      var Data = this.CreateData('11', '设备管理_设备状态_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.statuss.push({
            label: v.设备状态,
            value: v.设备状态代码
          })
        })
      }).then(() => {
      })
    },
    // 获得车间
    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(() => {
      })
    },
    // 初始化设备
    searchTable() {
      this.machines = []
      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 }
      if (this.status) { this.status_check = 1 } else { this.status_check = 0 }
      var param = []
      param[0] = ['车间', this.machineShop]
      param[1] = ['车间_check', this.machineShop_check]
      param[2] = ['产线', this.productionLine]
      param[3] = ['产线_check', this.productionLine_check]
      param[4] = ['工序', this.region]
      param[5] = ['工序_check', this.region_check]
      param[6] = ['状态', this.status]
      param[7] = ['状态_check', this.status_check]
      param[8] = ['PageSize', this.pageSize]
      param[9] = ['PageCurrent', this.pageCurrent]
      param[10] = ['PageCount', '1111', 'int', '1']
      param[11] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '基础数据_设备_查询', param)
      ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.machines = response.data.result
        }
        this.total = parseInt(response.data.output[0].ItemCount)
        console.log(this.total, 'total')
      })
    },
    // 点击设备查询详细信息
    machineClick(machine, index) {
      this.form.switch = false
      this.form.faultDescription = ''
      this.form.faultReason = ''
      this.form.faultTime = ''
      this.form.workOrderSourceValue = ''
      this.assetNumber = machine.设备编号
      this.searchCurrentMachine()
      this.getFaultType()
    },
    // 输入设备编号查询详细信息
    assetNumberSearch() {
      this.form.switch = false
      this.form.faultDescription = ''
      this.form.faultReason = ''
      this.form.faultTime = ''
      this.form.workOrderSourceValue = ''
      this.searchCurrentMachine()
      this.getFaultType()
    },
    // 获得故障类别
    getFaultType() {
      this.faultTypes = []
      this.form.faultType = ''
      var param = []
      var Data = this.CreateData('11', '基础数据_设备故障_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.faultTypes.push({
            label: v.故障名称,
            value: v.故障代码
          })
        })
      }).then(() => {
      })
    },
    // 查询当前设备信息
    searchCurrentMachine() {
      var param = []
      param[0] = ['设备编号', this.assetNumber]
      var Data = this.CreateData('11', '维修工单_设备_查询', param)
      ExecDatabase(Data).then(response => {
        this.machineValue = response.data[0].设备代码
        this.machine = response.data[0]
        if (this.machine.图片 !== null) {
          this.machine.图片 = 'data:image/png;base64,' + this.machine.图片
        } else { this.machine.图片 = this.machine.图片 }
      }).then(response => {
        this.changeSelectStyle = this.machineValue
        this.searchOrder()
        this.isShow = true
      })
    },
    // 清空资产号
    assetNumberClose() {
      this.assetNumber = ''
      this.isShow = false
      this.changeSelectStyle = ''
    },
    // 查看设备信息
    details() {
      this.dialogFormVisible = true
      this.title = '设备编号: ' + this.machine.设备编号
    },
    // 查看设备详细信息
    detailMachine() {
      this.dialogFormVisible1 = true
      this.title1 = this.machine.设备编号
      this.activeName1 = '1'
      this.getSpare()
      this.getSpare2()
      this.getOrder()
      this.uploadManual()
      this.uploadManual1()
    },
    getSpare() {
      this.spareTableData = []
      var param = []
      param[0] = ['设备代码', this.machineValue]
      param[1] = ['PageSize', this.sparePageSize]
      param[2] = ['PageCurrent', this.sparePageCurrent]
      param[3] = ['PageCount', '1111', 'int', '1']
      param[4] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '维修工单_历史备件_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.result.map(v => {
          this.spareTableData.push({
            备件代码: v.备件代码,
            工单号: v.工单号,
            SAP编码: v.SAP编码,
            备件名称: v.备件名称,
            数量: v.数量,
            二级帐: v.二级帐,
            操作时间: v.操作时间
          })
        })
        this.spareTotal = parseInt(response.data.output[0].ItemCount)
      })
    },
    getSpare2() {
      var param = []
      param[0] = ['设备代码', this.machineValue]
      var Data = this.CreateData('11', '基础数据_设备_备件信息查询', param)
      ExecDatabase(Data).then(response => {
        this.spareTableData2 = response.data
      })
    },
    getOrder() {
      this.orderTableData = []
      this.orderTableData1 = []
      this.orderTableData2 = []
      var param = []
      param[0] = ['设备代码', this.machineValue]
      param[1] = ['工单类型', 'EM']
      var Data = this.CreateData('11', '维修工单_工单历史_查询_拆分', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.orderTableData.push({
            维修工单代码: v.维修工单代码,
            故障名称: v.故障名称,
            故障现象: v.故障现象,
            工单号: v.工单号,
            状态代码: v.状态代码,
            状态: v.状态,
            开始时间: v.开始时间,
            持续时长: v.持续时长,
            设备代码: v.设备代码,
            设备编号: v.设备编号
          })
        })
      })
      var param1 = []
      param1[0] = ['设备代码', this.machineValue]
      param1[1] = ['工单类型', 'CM']
      var Data1 = this.CreateData('11', '维修工单_工单历史_查询_拆分', param1)
      ExecDatabase(Data1).then(response => {
        response.data.map(v => {
          this.orderTableData1.push({
            维修工单代码: v.维修工单代码,
            故障名称: v.故障名称,
            故障现象: v.故障现象,
            工单号: v.工单号,
            状态代码: v.状态代码,
            状态: v.状态,
            开始时间: v.开始时间,
            持续时长: v.持续时长,
            设备代码: v.设备代码,
            设备编号: v.设备编号
          })
        })
      })
      var param2 = []
      param2[0] = ['设备代码', this.machineValue]
      param2[1] = ['工单类型', 'PM']
      var Data2 = this.CreateData('11', '维修工单_工单历史_查询_拆分', param2)
      ExecDatabase(Data2).then(response => {
        response.data.map(v => {
          this.orderTableData2.push({
            维修工单代码: v.维修工单代码,
            故障名称: v.故障名称,
            故障现象: v.故障现象,
            工单号: v.工单号,
            状态代码: v.状态代码,
            状态: v.状态,
            开始时间: v.开始时间,
            持续时长: v.持续时长,
            设备代码: v.设备代码,
            设备编号: v.设备编号
          })
        })
      })
    },
    getFileListMachine(filesType) {
      this.loadingFiles = true
      this.tableDataFiles = []
      var param = []
      param[0] = ['设备代码', this.machineValue]
      param[1] = ['文件类型', filesType]
      var Data = this.CreateData('11', '基础数据_设备_文件查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.tableDataFiles.push({
            参考文档名称: v.参考文档名称,
            参考文档类型: v.参考文档类型,
            参考文档代码: v.参考文档代码
          })
        })
        this.loadingFiles = false
      })
    },
    // 详情页切换标签
    handleClickMachineInfo(tab, event) {
      if (tab.name === '1') {
        this.uploadManual()
      } else if (tab.name === '2') {
        this.uploadManual1()
      }
    },
    downloadFiles(row) {
      var param = []
      param[0] = ['参考文档代码', row.参考文档代码]
      var Data = this.CreateData('2004', '基础数据_设备_文件下载', param)
      this.exportExcel_NPOI(Data)
    },
    // 查询工单
    searchOrder() {
      this.tableData = []
      var param = []
      param[0] = ['设备代码', this.machineValue]
      param[1] = ['排序方式', this.order]
      var Data = this.CreateData('11', '维修工单_查询', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          this.tableData.push({
            维修工单代码: v.维修工单代码,
            工单号: v.工单号,
            故障名称: v.故障名称,
            状态: v.状态,
            状态代码: v.状态代码,
            开始时间: v.开始时间,
            设备代码: v.设备代码,
            资产号: v.资产号,
            设备编号: v.设备编号,
            持续时长: v.持续时长
          })
        })
        this.orderCount = response.data.length
      })
    },
    // 表头样式
    tableHeaderColor() {
      return 'background-color: rgb(250, 250, 250);height:20px;border-bottom: 3px rgb(170, 170, 170) solid;color: rgb(35, 35, 35);font-weight: 5000;padding: 5px 10px'
    },
    tableColor() {
      return 'border-color: #E8E8E8;padding: 12px 0px 10px 0px'
    },
    tableColor1() {
      return 'border-color: #E8E8E8;padding: 7px 0px 5px 0px'
    },
    tableColor2() {
      return 'border-color: #E8E8E8;padding: 10px 0px 8px 0px'
    },
    // 根据排序顺序查询工单
    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.searchOrder()
    },
    faultTimeChange() {
      var param = []
      param[0] = ['故障发生时间', this.form.faultTime]
      var Data = this.CreateData('11', '维修工单_计算时间差', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].时间差 > 5) {
          this.rules.faultReason[0].required = true
        } else {
          this.rules.faultReason[0].required = false
        }
      })
    },
    // 新建工单
    submitOrder(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.machineValue === '') {
            this.$message.error('信息增加失败,重新选择设备')
          } else {
            var param = []
            param[0] = ['故障发生时间', this.form.faultTime]
            param[1] = ['故障现象', this.form.faultDescription]
            param[2] = ['是否事故', this.form.switch]
            param[3] = ['迟报原因', this.form.faultReason]
            param[4] = ['设备代码', this.machineValue]
            param[5] = ['申请人', this.id]
            param[6] = ['用户', this.cname]
            param[7] = ['故障类别', this.form.faultType]
            param[8] = ['工单来源', this.form.workOrderSourceValue]
            var Data = this.CreateData('12', '维修工单_计划检修_增加', param)
            ExecDatabase(Data).then(response => {
              if (response.data[0].result === '1') {
                this.$message({
                  message: '信息增加成功',
                  type: 'success'
                })
                this.form.switch = false
                this.form.faultDescription = ''
                this.form.faultReason = ''
                this.form.faultTime = ''
                this.form.faultType = ''
                this.form.workOrderSourceValue = ''
                this.searchCurrentMachine()
                this.searchTable()
              } else {
                this.$message.error('信息增加失败')
              }
            })
          }
        }
      })
    },
    // 点击工单
    orderClick(row) {
      this.$router.push({
        name: 'Test',
        query: {
          jobNumber: row
        }
      })
    },
    handleSizeChange(val) {
      this.pageCurrent = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageCurrent = val
      this.searchTable()
    },
    handleSizeChange1(val) {
      this.sparePageCurrent = 1
      this.sparePageSize = val
      this.getSpare()
    },
    handleCurrentChange1(val) {
      this.sparePageCurrent = val
      this.getSpare()
    }
  }
}
</script>

<style scoped>
  .div1{
    width:125px;
    height:125px;
    margin: 6px;
    background-color:rgb(239,239,240);
    border-radius:6px 6px 6px 6px;
    box-shadow:3px 3px 6px #666;
    overflow:hidden;
  }
  .div2{
    width:25px;
    height:25px;
    display: inline-block;
    border-radius:5px 5px 5px 5px;
    margin: 2px 0px 0px 5px;
    box-shadow:1px 1px 2px #000;
    overflow:hidden;
  }
  .changeStyle{
    border-color: grey !important;
  }
  .changeStyle1 {
    background-color:forestgreen;
  }
  .changeStyle2 {
    background-color:rgb(252,175,23);
  }
  .changeStyle3 {
    background-color:rgb(226,0,21);
  }
  .changeStyle4 {
    background-color:rgb(0,142,207);
  }
  .div3{
    font-size: 20px;
    color:#a9a9a9;
    margin-top:10px;
  }
  .div4{
    font-size: 18px;
    font-weight: bold;
    margin-top:10px;
  }
  .div {
    width: 220px;
    height:45px;
    margin-top: 0px;
    border-bottom: rgb(220,220,220) solid 2px
  }
  >>>.formItem .el-form-item__label {
    font-size: 24px;
    font-weight: 500;
    color: black;
    margin-top: 10px;
  }
  >>>.radio .el-radio__label {
    font-size: 16px;
    padding-left: 10px;
  }
  >>>.radio .el-radio {
    color: #606266;
    font-weight: 500;
    line-height: 2;
    cursor: pointer;
    outline: 0;
    margin-right: 30px;
  }
  >>>.inputext1 .el-textarea__inner {
    padding: 5px 15px;
    line-height: 1.5;
    width: 100%;
    height: 120px;
  }
  >>>.select12 .el-input__inner {
    height: 50px;
    width: 160px;
    background-color:white;
    border-radius: 0px;
  }
  .wrapper{
    width: 90%;
    height: 50px;
    overflow: hidden;
    border: 1px solid #b8c7d9;
    /*float: left;*/
    margin: 10px;
  }
  .content{
    position: relative;
    padding: 8px 8px 0 8px;
  }
  .action{
    position: absolute;
    top: 2px;
    right: 8px;
  }
  .delete{
    padding: 0 5px;
    border-radius: 3px;
    color: #0f84b0;
    font-size: 12px;
  }
  .delete:hover{
    background: -webkit-linear-gradient(top,#0ba9e3,#0099d3);
    color: #fff;
  }
  a{
    text-decoration: none;
  }
  .icon{
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 7px;
    margin-top: 2px;
    font-size: 26px;
  }
  .info{
    width: 300px;
    height: 50px;
    left: 44px;
    line-height: 30px;
    display: inline-block;
    color: #999;
  }
</style>
