完成设备模块搬迁

licp

2025-01-06 efad6058c9c9ee6ba754dc9cc61c8d744cd199b8

 src/components/do/a6-device/files.vue

@@ -1,416 +1,577 @@
<!-- 设备档案 -->
<template>
  <div class="page">
    <div class="page-header">
      <h4><span class="line"></span><span>设备档案</span></h4>
      <div class="btns">
        <el-button type="primary" size="small" @click="dialogVisible=true" style="margin-right: 16px;">修订档案</el-button>
        <!-- <el-button type="primary" size="small">添加附件</el-button> -->
        <el-upload
            class="upload-demo"
            :action="action"
            :headers="headers"
            :show-file-list="false"
            :limit="1"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            ref="upload"
            :on-error="onError">
            <el-button size="small" type="primary" :loading="inLoading">添加附件</el-button>
          </el-upload>
        <el-button type="primary" size="small" @click="openEditForm"
          style="">修订档案</el-button>
        <el-button type="primary" size="small" @click="dialogVisible1 = true"
          style="">添加附件</el-button>
        <el-button type="primary" v-if="isPermission('showDeviceQrCodeButton')" size="small" @click="deviceDialog = true"
          style="">查看设备二维码</el-button>
        <el-button type="primary" size="small" @click="handleDownOne"
          style="">导出</el-button>
      </div>
    </div>
    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-image src="" fit="fill" style="width: 200px;height: 300px;border: 1px solid #000;border-radius: 10px;margin-left: 30px;margin-top: 20px;">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" style="font-size: 40px;"></i>
    <div class="main_div">
      <el-row :gutter="20">
        <el-col :span="6">
          <!-- 加时间戳避免浏览器缓存问题 -->
          <el-image :src="`${javaApi}/img/${Mdata.imageUpload}`" fit="fill" :key="'personalPicture' + timeStamp"
            style="width: 200px;height: 300px;border: 1px solid #000;border-radius: 10px;margin-left: 30px;margin-top: 20px;">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" style="font-size: 40px;"></i>
            </div>
          </el-image>
        </el-col>
        <el-col :span="8">
          <div class="form-item">
            <label>设备名称</label>
            <!-- <p>{{ Mdata.deviceName }}</p> -->
            <el-tooltip
              class="item"
              :content="Mdata.deviceName"
            >
              <span class="text-ellipsis" >{{ Mdata.deviceName }}</span>
            </el-tooltip>
          </div>
        </el-image>
      </el-col>
      <el-col :span="8">
        <div class="form-item">
          <label>设备名称</label>
          <p>{{ handleData('扫描电镜(带能谱)') }}</p>
        </div>
        <div class="form-item">
          <label>大类</label>
          <p>{{ handleData('分析仪器') }}</p>
        </div>
        <div class="form-item">
          <label>内部编号</label>
          <p>{{ handleData('扫描电镜(带能谱)') }}</p>
        </div>
        <div class="form-item">
          <label>生产厂家</label>
          <p>{{ handleData('扫描电镜(带能谱)') }}</p>
        </div>
        <div class="form-item">
          <label>资产编码</label>
          <p>{{ handleData('扫描电镜(带能谱)') }}</p>
        </div>
        <div class="form-item">
          <label>出厂日期</label>
          <p>{{ handleData('2024-7-20') }}</p>
        </div>
        <div class="form-item">
          <label>启用日期</label>
          <p>{{ handleData('2024-7-20') }}</p>
        </div>
        <div class="form-item">
          <label>核准周期(月)</label>
          <p>{{ handleData('12') }}</p>
        </div>
        <div class="form-item">
          <label>检测类型</label>
          <p>{{ handleData('12') }}</p>
        </div>
        <div class="form-item">
          <label>报废时间</label>
          <p>{{ handleData('12') }}</p>
        </div>
        <div class="form-item">
          <label>准确度量值</label>
          <p>{{ handleData('12') }}</p>
        </div>
        <div class="form-item">
          <label>被授权人</label>
          <p>{{ handleData('12') }}</p>
        </div>
        <div class="form-item">
          <label>维修记录</label>
          <p>{{ handleData('12') }}</p>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="form-item">
          <label>规格型号</label>
          <p>{{ handleData('JSM-6010LA') }}</p>
        </div>
        <div class="form-item">
          <div class="form-item">
            <label>设备类型</label>
            <p>{{ Mdata.largeCategory }}</p>
          </div>

          <div class="form-item">
            <label>管理编号</label>
            <p>{{ Mdata.managementNumber }}</p>
          </div>
          <div class="form-item">
            <label>所属部门</label>
            <p>{{ Mdata.laboratoryName }}</p>
          </div>
          <div class="form-item">
            <label>生产厂家</label>
            <!-- <p>{{ Mdata.manufacturer }}</p> -->
            <el-tooltip
              class="item"
              :content="Mdata.manufacturer"
            >
              <span class="text-ellipsis" >{{ Mdata.manufacturer }}</span>
            </el-tooltip>
          </div>
          <div class="form-item">
            <label>资产编码</label>
              <p class="text-ellipsis">{{ Mdata.assetCode }}</p>
          </div>

          <div class="form-item">
            <label>出厂日期</label>
            <p>{{ Mdata.acquisitionDate | formaterDateTime }}</p>
          </div>
          <div class="form-item">
            <label>启用日期</label>
            <p>{{ Mdata.activationDate | formaterDateTime }}</p>
          </div>
          <div class="form-item">
            <label>核准周期(月)</label>
            <p>{{ Mdata.calibrationDate }}</p>
          </div>

          <div class="form-item">
            <label>报废时间</label>
            <p>{{ handleData() }}</p>
          </div>
          <div class="form-item">
            <label>准确度量值</label>
            <el-tooltip
              class="item"
              :content="Mdata.technicalIndicators"
            >
              <span class="text-ellipsis">{{ Mdata.technicalIndicators }}</span>
            </el-tooltip>
            <!-- <p>{{ Mdata.technicalIndicators }}</p> -->
          </div>
          <div class="form-item">
            <label>维修记录</label>
            <p>{{ handleData() }}</p>
          </div>
          <div class="form-item">
            <label>被授权人</label>
            <p>{{ Mdata.authorizedPersonName }}</p>
          </div>

        </el-col>
        <el-col :span="10">
          <div class="form-item">
            <label>规格型号</label>
            <p>{{ Mdata.specificationModel }}</p>
          </div>
          <!-- <div class="form-item">
          <label>细类</label>
          <p>{{ handleData('分析仪器') }}</p>
        </div>
        <div class="form-item">
          <label>设备状态</label>
          <el-radio-group v-model="form.value1" disabled>
            <el-radio :label="0" style="width: 40px;">合格</el-radio>
            <el-radio :label="1" style="width: 40px;">维修</el-radio>
            <el-radio :label="2" style="width: 40px;">停用</el-radio>
            <el-radio :label="3" style="width: 40px;">报废</el-radio>
          </el-radio-group>
        </div>
        <div class="form-item">
          <label>出厂编号</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>存放点</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>购置日期</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>产地</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>最近溯源日期</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>采购费用(元)</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>停用时间</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>设备负责人</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>验收记录</label>
          <p>{{ handleData() }}</p>
        </div>
        <div class="form-item">
          <label>核准证书</label>
          <p>{{ handleData() }}</p>
        </div>
      </el-col>
    </el-row>
    <h4 style="margin-bottom: 10px;margin-top: 10px;"><span class="line"></span><span>附件和相关文档</span></h4>
    <div class="tables">
      <ValueTable ref="ValueTable"
            :url="$api.auxiliaryWorkingHoursDay.selectAuxiliaryWorkingHoursDay"
            :delUrl="$api.auxiliaryWorkingHoursDay.deleteAuxiliaryWorkingHoursDay" :componentData="componentData" :key="upIndex" style="min-height: 400px;"/>
        </div> -->
          <div class="form-item">
            <label>出厂编号</label>
            <p>{{ Mdata.factoryNo }}</p>
          </div>
          <div class="form-items">
              <label>设备状态</label>
              <el-radio-group v-model="Mdata.deviceStatus" style="margin-left: 10px;">
              <el-radio :label="0"  :disabled="Mdata.deviceStatus != 0">正常</el-radio>
              <el-radio :label="1"  :disabled="Mdata.deviceStatus != 1">维修</el-radio>
              <el-radio :label="2"  :disabled="Mdata.deviceStatus != 2">停用</el-radio>
              <el-radio :label="3"  :disabled="Mdata.deviceStatus != 3">报废</el-radio>
             </el-radio-group>
          </div>
          <div class="form-item">
            <label>存放点</label>
            <p>{{ Mdata.storagePoint }}</p>
          </div>
          <div class="form-item">
            <label>产地</label>
            <p>{{ Mdata.origin }}</p>
          </div>
          <div class="form-item">
            <label>检验项</label>
            <el-tooltip
              class="item"
              effect="dark"
              :content="Mdata.insProductItem"
              placement="top"
            >
              <span class="text-ellipsis" >{{ Mdata.insProductItem }}</span>
            </el-tooltip>
          </div>
          <div class="form-item">
            <label>购置日期</label>
            <p>{{ Mdata.acquisitionDate | formaterDateTime }}</p>
          </div>

          <div class="form-item">
            <label>最近溯源日期</label>
            <p>{{ Mdata.lastCalibrationDate | formaterDateTime }}</p>
          </div>
          <div class="form-item">
            <label>采购费用(元)</label>
            <p>{{ Mdata.unitPrice }}</p>
          </div>
          <div class="form-item">
            <label>停用时间</label>
            <p>{{ Mdata.nextCalibrationDate | formaterDateTime }}</p>
          </div>
          <div class="form-item">
            <label>设备负责人</label>
            <p>{{ Mdata.equipmentManagerName }}</p>
          </div>
          <div class="form-item">
            <label>验收记录</label>
            <p>{{ handleData() }}</p>
          </div>
          <div class="form-item">
            <label>核准证书</label>
            <p>{{ Mdata.calibrateNo }}</p>
          </div>
        </el-col>
      </el-row>
      <h4 style="margin-bottom: 10px;margin-top: 10px;"><span class="line"></span><span>附件和相关文档</span></h4>
      <el-table height="200px" :data="tableDataA">
        <el-table-column header-align="center" align="center" prop="prop" label="序号" type="index" width="60" />
        <el-table-column prop="documentType" label="类型" min-width="100">
          <template v-slot="scope">
            {{ scope.row.documentType === '0' ? '附件' : scope.row.documentType === '1' ? '文档' : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" min-width="150" />
        <el-table-column prop="number" label="编号" min-width="150" />
        <el-table-column prop="version" label="版本" min-width="80" />
        <el-table-column prop="quantity" label="份数" min-width="80" />
        <el-table-column prop="pageCount" label="页码" min-width="80" />
        <el-table-column prop="provider" label="提供者" min-width="150" />
        <el-table-column prop="provideDate" label="提供日期" min-width="150" />
        <el-table-column prop="comments" label="备注" min-width="150" />
        <el-table-column fixed="right" label="操作" min-width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleAttachmentClick(scope.row)">下载附件</el-button>
            <el-button type="text" size="small" @click="handleViewClick(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="handleDeleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="档案修订" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
         <el-row style="display:flex;justify-content: space-around;">
            <!-- 左边布局 -->
            <el-col :span="7">
               <el-col>
                  <!-- 图片 -->
                  <el-image class="img" style="width:100%;height: 320px;marginBottom:16px"
                     :src="javaApi+'/img/'+formData.imageUpload">
                     <div slot="error" class="image-error" style="width: calc(100% -2px);
    <!-- 修订 -->
    <el-dialog title="修订档案" top="5vh" :visible.sync="dialogVisible" width="70%" @open="openFileRevisionDialog"
      :before-close="handleClose">
      <el-row style="display:flex;justify-content: space-around;">
        <!-- 左边布局 -->
        <el-col :span="7">
          <el-col>
            <!-- 图片 -->
            <el-image class="img" style="width:100%;height: 320px;margin-bottom:16px"
              :src="javaApi + '/img/' + editData.imageUpload">
              <div slot="error" class="image-error" style="width: calc(100% -2px);
            height: 318px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #EEEEEE;">
                        <i class="el-icon-picture-outline" style="font-size:60px;color:#666666;"></i>
                     </div>
                  </el-image>
                  <!-- 表单 -->
                  <el-form :model="formData" label-width="120px">
                     <el-form-item label="仪器名称:" required>
                     <el-input v-model="formData.deviceName" size="small"></el-input>
                              </el-form-item>
                     <el-form-item label="仪器名称EN:" required>
                        <el-input v-model="formData.enDeviceName" size="small"></el-input>
                                 </el-form-item>
                     <el-form-item label="规格型号:" required>
                        <el-input v-model="formData.specificationModel" size="small"></el-input>
                                 </el-form-item>
                     <el-form-item label="生产厂家:">
                        <el-input v-model="formData.manufacturer" size="small"></el-input>
                                 </el-form-item>
                              </el-form>
                           </el-col>
                        </el-col>
                        <!-- 中间布局 -->
                        <el-col :span="7">
                           <el-form :model="formData" label-width="116px">
                              <el-form-item label="校准服务机构:">
                     <el-input v-model="formData.calibrationServices" size="small"></el-input>
                     </el-form-item>
                     <el-form-item label="出厂编号:">
                     <el-input v-model="formData.factoryNo" size="small"></el-input>
                     </el-form-item>
                     <el-form-item label="管理编号:" required>
                     <el-input v-model="formData.managementNumber" size="small"></el-input>
                     </el-form-item>
                     <el-form-item label="购置日期:">
                                 <el-date-picker style="width:100%" v-model="formData.acquisitionDate" type="date"
                                    format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期">
                                 </el-date-picker>
                              </el-form-item>
                     <el-form-item label="启用日期:" required>
                                 <el-date-picker style="width:100%" v-model="formData.activationDate" type="date"
                                    format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期">
                                 </el-date-picker>
                              </el-form-item>
                     <el-form-item label="管理人:">
                     <el-select v-model="formData.equipmentManager" placeholder="请选择" size="small" style="width:100%">
                        <el-option v-for="item in responsiblePersonList" :key="item.value" :label="item.label"
                        :value="item.value">
                        </el-option>
                     </el-select>
                     </el-form-item>
                     <el-form-item label="存放点:">
                     <el-input v-model="formData.storagePoint" size="small"></el-input>
                     </el-form-item>
                     <el-form-item label="技术指标:">
                     <el-input v-model="formData.technicalIndicators" :rows="7" type="textarea" size="small"></el-input>
                     </el-form-item>
               </el-form>
            </el-col>
            <!-- 右边布局 -->
            <el-col :span="7">
               <el-form :model="formData" label-width="140px" ref="ruleForm">
                <i class="el-icon-picture-outline" style="font-size:60px;color:#666666;"></i>
              </div>
            </el-image>
            <!-- 表单 -->
            <el-form :model="editData" label-width="120px" ref="rules1" :rules="rules1">
              <el-form-item label="仪器名称:" prop="deviceName">
                <el-input v-model="editData.deviceName" size="small"></el-input>
              </el-form-item>
              <el-form-item label="仪器名称EN:" prop="enDeviceName">
                <el-input v-model="editData.enDeviceName" size="small"></el-input>
              </el-form-item>
              <el-form-item label="规格型号:" prop="specificationModel">
                <el-input v-model="editData.specificationModel" size="small"></el-input>
              </el-form-item>
              <el-form-item label="生产厂家:">
                <el-input v-model="editData.manufacturer" size="small"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-col>
        <!-- 中间布局 -->
        <el-col :span="7">
          <el-form :model="editData" label-width="116px" ref="rules2" :rules="rules1">
            <el-form-item label="校准服务机构:">
              <el-input v-model="editData.calibrationServices" disabled size="small"></el-input>
            </el-form-item>
            <el-form-item label="资产编码:">
              <el-input v-model="editData.assetCode" size="small"></el-input>
            </el-form-item>
            <el-form-item label="产地:">
              <el-input v-model="editData.origin" size="small"></el-input>
            </el-form-item>
            <el-form-item label="出厂编号:">
              <el-input v-model="editData.factoryNo" size="small"></el-input>
            </el-form-item>
            <el-form-item label="管理编号:" prop="managementNumber">
              <el-input v-model="editData.managementNumber" size="small"></el-input>
            </el-form-item>
            <el-form-item label="购置日期:">
              <el-date-picker style="width:100%" v-model="editData.acquisitionDate" type="date" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="启用日期:" prop="activationDate">
              <el-date-picker style="width:100%" v-model="editData.activationDate" type="date" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="负责人:">
              <el-select v-model="editData.equipmentManager" placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in responsiblePersonList" :key="item.name" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="存放点:">
              <el-input v-model="editData.storagePoint" size="small"></el-input>
            </el-form-item>
            <el-form-item label="技术指标:">
              <el-input v-model="editData.technicalIndicators" :rows="7" type="textarea" size="small"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 右边布局 -->
        <el-col :span="7">
          <el-form :model="editData" label-width="140px" ref="ruleForm" :rules="rules1">
            <!-- 实验室列表 -->
            <el-form-item label="所属部门:">
              <el-select v-model="formData.subordinateDepartmentsId" placeholder="请选择" size="small" style="width:100%">
              <el-select v-model="editData.subordinateDepartmentsId" placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in subordinateDepartmentsList" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="检测项目:">
              <el-cascader
              v-model="formData.insProductIds"
              :options="options"
              :show-all-levels="false"
              :props="props"
              placeholder="请选择" size="small"
              style="width:100%;"
              :collapse-tags="true"
              separator=","
           filterable
              clearable></el-cascader>
              <el-cascader v-model="editData.insProductIds" :options="options" :show-all-levels="false" :props="props"
                placeholder="请选择" size="small" style="width:100%;" :collapse-tags="true" separator="," filterable
                clearable></el-cascader>
            </el-form-item>
            <el-form-item label="最近校准日期:">
                     <el-date-picker style="width:100%" v-model="formData.latestTraceability" format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择日期">
                     </el-date-picker>
                  </el-form-item>
            <el-form-item label="下次校准日期:">
                     <el-date-picker style="width:100%" v-model="formData.latestTraceability" format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择日期">
                     </el-date-picker>
                  </el-form-item>
            <!-- <el-form-item label="最近校准日期:">
              <el-date-picker style="width:100%" v-model="Mdata.latestTraceability" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd" type="date" size="small" placeholder="选择日期">
              </el-date-picker>
            </el-form-item> -->
            <!-- <el-form-item label="下次校准日期:">
              <el-date-picker style="width:100%" v-model="Mdata.nextCalibrationDate" format="yyyy-MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss" type="date" size="small" placeholder="选择日期">
              </el-date-picker>
            </el-form-item> -->
            <el-form-item label="设备类型:">
              <el-select v-model="formData.largeCategory" placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in equipmentList" :key="item.value" :label="item.label"
                  :value="item.value">
              <el-select v-model="editData.largeCategory" placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in equipmentList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单价(万元):">
              <el-input v-model="formData.unitPrice" size="small"></el-input>
              <el-input v-model="editData.unitPrice" size="small"></el-input>
            </el-form-item>
            <el-form-item label="当前状态:" required>
                     <el-select v-model="formData.deviceStatus" placeholder="请选择" size="small" style="width:100%">
                        <el-option v-for="item in deviceStatusList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                     </el-select>
                  </el-form-item>
            <el-form-item label="校准周期（月）:" required>
              <el-input v-model="formData.calibrationDate" size="small"></el-input>
            <el-form-item label="当前状态:" prop="deviceStatus">
              <el-select v-model="editData.deviceStatus" placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in deviceStatusList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
                  <el-form-item label="图片:">
                     <div
                        style="border: 1px solid #DCDFE6;border-radius:4px;height:32px;lineHeight:32px;display:flex;justify-content: space-around;font-size: 13px;">
                        <div v-show="formData.imageName" class="picName">{{formData.imageName}}</div>
                        <el-upload :action="action" :on-success="handleSuccessUpImg2" :show-file-list="false"
                           accept='image/jpg,image/jpeg,image/png' :headers="headers" :on-change="beforeUpload"
                           :on-error="onError" ref='upload'>
                           <el-button type="text" style="height:30px;padding-top:8px">上传</el-button>
                        </el-upload>
                     </div>
                  </el-form-item>
               </el-form>
            </el-col>
         </el-row>
         <span slot="footer" class="dialog-footer">
            <el-row>
               <el-button @click="handleClose">取 消</el-button>
               <el-button type="primary" @click="submitForm" :loading="upLoad">确 定</el-button>
            </el-row>
         </span>
      </el-dialog>
            <el-form-item label="校准周期（月）:" prop="calibrationDate">
              <el-input v-model="editData.calibrationDate" size="small"></el-input>
            </el-form-item>
            <el-form-item label="被授权人:">
              <el-select v-model="editData.authorizedPerson" multiple  placeholder="请选择" size="small" style="width:100%">
                <el-option v-for="item in responsiblePersonList" :key="item.name" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="图片:">
              <!-- <div
                style="border: 1px solid #DCDFE6;border-radius:4px;height:32px;lineHeight:32px;display:flex;justify-content: space-around;font-size: 13px;">
                <div v-show="Mdata.imageName" class="picName">{{ Mdata.imageName }}</div>
                <el-upload :action="action" :on-success="handleSuccessUpImg2" :show-file-list="false"
                  accept='image/jpg,image/jpeg,image/png' :headers="headers" :on-change="beforeUpload"
                  :on-error="onError" ref='upload'>
                  <el-button type="text" style="height:30px;padding-top:8px"><span v-if="Mdata.imageName"></span></el-button>
                </el-upload>
              </div> -->

              <div>
                <div v-show="editData.imageName" class="picName">{{ editData.imageName }}</div>
                <el-upload :action="action" :on-success="handleSuccessUpImg2" :show-file-list="false"
                  accept='image/jpg,image/jpeg,image/png' :headers="headers" :on-change="beforeUpload"
                  :on-error="onError" ref='upload' class="avatar-uploader"
                  >
                  <img v-if="editData.imageUpload" :src="javaApi + '/img/' + editData.imageUpload" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-row>
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm" :loading="upLoad">确 定</el-button>
        </el-row>
      </span>
    </el-dialog>
    <el-dialog title="添加设备附件" top="5vh" v-if="dialogVisible1" :visible.sync="dialogVisible1" width="40%">
      <el-form ref="form" :model="addFile" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="维护类型：">
              <el-radio-group v-model="addFile.documentType">
                <el-radio :label="0">附件</el-radio>
                <el-radio :label="1">文档</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="档案名称：">
              <el-input size="small" placeholder="请输入" clearable v-model="addFile.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库号/资产编号:">
              <el-input size="small" placeholder="请输入" clearable v-model="addFile.number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版本：">
              <el-input size="small" placeholder="请输入" clearable v-model="addFile.version"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="份数：">
              <el-input-number v-model="addFile.quantity" controls-position="right" style="width: 100%;" size="small"
                :min="0" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="页码：">
              <el-input-number v-model="addFile.pageCount" controls-position="right" style="width: 100%;" size="small"
                :min="0" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提供者：">
              <el-input size="small" placeholder="请输入" clearable v-model="addFile.provider"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归档日期：">
              <el-date-picker type="date" style="width:100%" placeholder="请选择日期" size="small" v-model="addFile.archiveDate"
                format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input type="textarea" :rows="2" size="small" v-model="addFile.comments"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件：" style="float: left;">
              <el-upload class="upload-demo" :action="action" :headers="headers" ref="uploadFile" :on-error="onError"
                :on-remove="handleRemove" :on-success="onSuccess" :before-remove="beforeRemove" multiple :limit="1"
                :on-exceed="handleExceed" :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-row>
          <el-button @click="dialogVisible1 = false" size="small">取 消</el-button>
          <el-button type="primary" @click="saveRecord" size="small" :loading="isLoading">{{ isAddFileUpdate == true ?
            '更新' :
            '确 定' }}</el-button>
        </el-row>
      </span>
    </el-dialog>
    <el-dialog
      title="设备二维码"
      :visible.sync="deviceDialog"
       top="5vh"
      width="30%">
      <div style="width:90%;text-align: right;">
        <el-button type="primary" size="mini" @click="clickGeneratePicture">下载图片</el-button>
        <el-button type="primary" size="mini" @click="labelPrint">标签打印</el-button>
      </div>
      <div class="device-main" ref="deviceQrCode" id="deviceCode">
        <div class="device-center" >
          <p class="device-title">{{Mdata.deviceName}}</p>
          <div class="device-footer">
            <div>
                <vueQr class="qr-code" :text="'https://zttx-lims.ztt.cn:8021/lims/qr/qrScan?code='+Mdata.managementNumber+'&type=device'" :size="200" :margin="10"></vueQr>
            </div>
            <div class="device-number">
              <span class="device-text">设备编码:</span>
              <span class="device-text">{{Mdata.managementNumber}}</span>
            </div>
            <div class="device-name">
              <span class="device-text">设备型号:</span>
              <span class="device-text">{{Mdata.specificationModel}}</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { MessageBox } from 'element-ui'
import ValueTable from '../../tool/value-table.vue'
import fileDownload from '../../../util/file'
import vueQr from 'vue-qr'
import PrintJS from 'print-js'
import domtoimage from 'dom-to-image';
import {isPermission} from '../../../util/auth'
export default {
  components: {
    ValueTable
  filters:{
    formaterDateTime(dateTime){
      if(dateTime === undefined || dateTime === null || dateTime === ''){
        return dateTime
      }
      return dateTime.split(" ")[0]
    }
  },
  data(){
    return{
      componentData: {
        entity: {
          week: null,
          weekDay: null,
          dateTime: null,
          name:null,
          orderBy: {
            field: 'id',
            order: 'desc'
          }
        },
        isIndex: true,
        showSelect: false,
        select: false,
        isPage:false,
        do: [{
          id: 'getFile',
          font: '附件',
          type: 'text',
          method: 'getFile'
        }, {
          id: 'handleLook',
          font: '查看',
          type: 'text',
          method: 'handleLook'
        },{
          id: 'delete',
          font: '删除',
          type: 'text',
          method: 'doDiy',
          disabFun: (row, index) => {
            return row.state === '已审核' || row.state === '已批准'
          }
        }],
        tagField: {
          shift:{
            select:[]
          },
          state:{
            select:[
              {
                label:'已提交',
                value:'已提交',
                type:'primary'
              },
              {
                label:'已审核',
                value:'已审核',
                type:'warning'
              },
              {
                label:'已批准',
                value:'已批准',
                type:'success'
              },
            ]
          },
          weekDay:{
            select:[]
          }
        },
        linkEvent: {},
        selectField: {
          shift:{
            select:[]
          },
          state:{
            select:[
              {
                label:'已提交',
                value:'已提交',
                type:'primary'
              },
              {
                label:'已审核',
                value:'已审核',
                type:'warning'
              },
              {
                label:'已批准',
                value:'已批准',
                type:'success'
              },
            ]
          },
          weekDay:{
            select:[]
          }
        },
        requiredAdd: [],
        requiredUp: []
         },
      upIndex:0,
      dialogVisible:false,
      inLoading:false,
      form: {
        value1:''
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    ValueTable,
    vueQr
  },
  data() {
    return {
      isPermission:isPermission,
      deviceDialog: false,//查看设备二维码弹框
      rules1: {
        deviceName: [
            { required: true, message: '请输入仪器名称', trigger: 'blur' },
          ],
          enDeviceName: [
            { required: true, message: '请输入仪器名称EN', trigger: 'blur' },
          ],
          specificationModel: [
            { required: true, message: '请输入规格型号', trigger: 'blur' },
          ],
          managementNumber: [
            { required: true, message: '请输入管理编号', trigger: 'blur' },
          ],
          activationDate: [
            { required: true, message: '请输入启用日期', trigger: 'blur' },
          ],
          deviceStatus: [
            { required: true, message: '请输入当前状态', trigger: 'blur' },
          ],
          calibrationDate: [
            { required: true, message: '请输入校准周期(月)', trigger: 'blur' },
          ],
      },
      upLoad:false,
      formData:{},
      responsiblePersonList:[],
      subordinateDepartmentsList:[],
      options:[],
      equipmentList:[],
      deviceStatusList:[],
      props: { multiple: true,emitPath:false,value:'id',label:'name' },
      // dateForm: {

      // },
      fileList: [], // 添加附件上传文件列表
      timeStamp: '', // 给图片添加key，在每次加载页面的时候新建时间戳
      equipmentManager: [],
      formLabelWidth: '100px',
      dialogVisible1: false,
      recordNumber: '',
      inLoading: false, // 控制上传按钮加载状态
      isLoading: false, // 控制确定按钮加载状态
      formData: {},
      tableDataA: [],
      num: 1,
      //添加附件数据收集
      addFile: {
        documentType: '', // 维护类型
        archiveDate: null, // 归档日期
        name: '', // 档案名称
        number: '', // 库号/资产编号
        version: '', // 版本
        quantity: 1, // 份数
        pageCount: 1, // 页码
        provider: '', // 提供者
        comments: "", // 备注
        fileName: "", // 文件原名称
        systemFileName: "", // 系统生成名称
      },
      componentData: {
        entity: { name: "", orderBy: { field: "id", order: "asc" } },
        page: { current: "1", size: "80" }
      },
      upIndex: 0,
      dialogVisible: false,
      dialogVisible1: false,
      inLoading: false,
      upLoad: false,
      responsiblePersonList: [],
      subordinateDepartmentsList: [],
      options: [],
      equipmentList: [],
      deviceStatusList: [],
      props: { multiple: true, emitPath: false, value: 'id', label: 'name' },
      // 收集设备档案数据
      Mdata: {
        deviceName: null
      },
      isAddFileUpdate: false,
      editData: {
        authorizedPerson: [],
      },
    }
  },
  computed: {
@@ -423,90 +584,288 @@
      return this.javaApi + this.$api.deviceScope.uploadFile
    }
  },
  mounted(){
    this.selectDevicePrincipal()
    this.obtainItemParameterList()
    this.getInsProductIds()
    this.selectEnumByCategory()
  mounted() {
    // 收集数据
    this.getList(this.clickNodeVal.value)
    // 获取相关文档的数据
    this.getPage()
    this.timeStamp = Date.now()
  },
  methods: {
    handleData(m){
      if(m){
      /**
     * 将页面指定节点内容转为图片
     * 1.拿到想要转换为图片的内容节点DOM；
     * 2.转换，拿到转换后的canvas
     * 3.转换为图片
     */
     clickGeneratePicture() {
      const _than = this
      domtoimage.toPng(_than.$refs.deviceQrCode,{ quality: 1,width:440,}).then(function (dataUrl) {
        // 将转换后的图像数据存储为 data URL
        fileDownload.downloadIamge(dataUrl,_than.Mdata.deviceName)
      });
    },
    //打印设备二维码
    labelPrint(){
      PrintJS({
            printable: 'deviceCode',//页面
            type: "html",//文档类型
            maxWidth:360,
            css: ['/static/css/device-print.css'],
            style: '@page { size: auto;  margin: 0mm;}',
            targetStyles: ["*"], // 使用dom的所有样式，很重要
        });
    },
    openFileRevisionDialog() {
      // 获取档案修订负责人下拉框数据
      this.selectDevicePrincipal()
      // 获取档案修订所属部门下拉框数据
      this.obtainItemParameterList()
      // 获取档案修订设备状态下拉框数据
      this.selectEnumByCategory()
      // 获取档案修订检验项目级联弹框数据
      this.getInsProductIds()
    },
    //附件和相关文档事件
    handleAttachmentClick(row) {
      console.log(row)
      if (row.fileName && row.documentType == 0) {
        const fileUrl = this.javaApi + '/img/' + row.fileName;
        fileDownload.downloadIamge(fileUrl, row.systemFileName)
      } else if (row.fileName && row.documentType == 1) {
        const url = this.javaApi+'/word/'+ row.fileName
        const link = document.createElement('a');
        link.href = url;
        link.download = row.fileName;
        link.click();
        this.$message.success('下载成功')
      } else {
        this.$message.warning('未上传文件！')
      }
    },
    handleViewClick(row) {
      this.isAddFileUpdate = true
      this.addFile = { ...row }
      this.dialogVisible1 = true
      if (row.fileName) {
        const obj = Object.assign({
          name: row.fileName,
          url: row.fileName,
          status: 'success',
          uid: Date.now(),
        })
        this.fileList.push(obj)
      }
    },
    handleDeleteClick(row) {
      // 删除逻辑
      MessageBox.confirm('确定要删除该记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$axios.delete(this.$api.getDocuments.list + "/" + row.id).then(res => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.getPage()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    saveRecord() {
      //转换数据
      this.addFile.deviceId = this.clickNodeVal.value
      let obj= this.addFile.systemFileName
      this.addFile.systemFileName = obj.name
      this.addFile.fileName = obj.url

      // 更新
      if (this.isAddFileUpdate) {
        this.$axios.put(this.$api.getDocuments.updateDocument, this.addFile, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(res => {
          if (res.code == 200) {
            this.$message.success('更新成功')
            this.dialogVisible1 = false;
            this.getPage()
          }
        })
      } else {
        // 新增
        this.$axios.post(this.$api.getDocuments.list, this.addFile).then(res => {
          if (res.code == 200) {
            this.$message.success('保存成功')
            this.dialogVisible1 = false;
            this.getPage()
          }
        })
      }
    },
    onSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.addFile.systemFileName = response.data
        this.addFile.fileName = file.name
      } else {
        this.$refs.uploadFile.clearFiles()
        this.$message.error('上传失败：' + response.message)
      }
    },
    handleRemove(file, fileList) {
      this.deleteFile(this.addFile.systemFileName)
    },
    deleteFile(fileName) {
      this.$axios.delete(this.$api.personnel.deleteCNASFile + "?fileName=" + fileName).then(res => {
        this.$message.success('删除成功！')
      })
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 获取相关文档数据的api
    getPage() {
      this.$axios.get(this.$api.getDocuments.get + "/" + this.clickNodeVal.value).then(res => {
        if (res.code == 200)
          this.tableDataA = res.data
      })
    },
    // 收集数据
    getList(id) {
      this.$axios
        .get(
          this.$api.deviceScope.selectDeviceByCode + "?id=" + id)
        .then(res => {
          // 将分类列表的信息存起来
          if (res.code == 200) {
            this.Mdata = res.data;
            this.Mdata.insProductIds = this.Mdata.insProductIds.split(',')
            this.Mdata.authorizedPerson = JSON.parse(this.Mdata.authorizedPerson)
          }
        });
    },
    handleData(m) {
      if (m) {
        return m
      }else{
      } else {
        return '-'
      }
    },
    handleClose(){
    handleClose() {
      this.dialogVisible = false
    },
    handleSuccess(response,){
      this.inLoading = false;
      if (response.code == 200) {
        this.$message.success('上传成功')
        // 更新页面
      }else{
        this.$message.error(response.message)
      }
    //打开修订档案弹框
    openEditForm(){
      this.editData = JSON.parse(JSON.stringify(this.Mdata))
      this.$nextTick(()=>{
        this.dialogVisible = true
      })
    },
    submitForm(){
      if(!this.formData.deviceName){
          this.$message.error('未输入仪器名称')
    //修订档案
    submitForm() {
      let flag = true
      this.$refs['rules1'].validate((valid) => {
        if (!valid) {
          flag = false;
          return false;
        }
      });
      this.$refs['rules2'].validate((valid) => {
        if (!valid) {
          flag = false;
          return false;
        }
      });
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          flag = false;
          return false;
        }
      });
      if(!flag) {
        return;
      }
      delete this.editData.nextCalibrationDate
      delete this.editData.createTime
      delete this.editData.updateTime
      delete this.editData.createUser
      delete this.editData.updateUser
      delete this.editData.orderBy
      // this.Mdata.equipmentManager = 1;

      this.editData.userAllow = this.equipmentManager.toString();
      this.editData.insProductIds = Array.isArray(this.editData.insProductIds)
        ? this.editData.insProductIds.join(',')
        : '';
      this.upLoad = true;
      this.editData.authorizedPerson = JSON.stringify(this.editData.authorizedPerson)
      this.$axios.post(this.$api.deviceScope.upDeviceParameter, this.editData, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        if (res.code === 201) {
          this.upLoad = false
          return
        }
        if(!this.formData.enDeviceName){
          this.$message.error('未输入仪器名称EN')
          return
        this.$message.success('修改成功')
        this.upLoad = false
        this.getList(this.clickNodeVal.value)
        this.dialogVisible = false
      }).catch(e => {
        this.$message.error('修改失败')
        this.dialogVisible = false
        this.upLoad = false
      })
    },
    // 导出
    handleDownOne(row) {
      this.outLoading = true
      this.$axios.get(this.$api.deviceCheck.exportDeviceFile + '?deviceId=' + this.clickNodeVal.value, {
        responseType: "blob"
      }).then(res => {
        this.outLoading = false
        const blob = new Blob([res], { type: 'application/octet-stream' });
        //将Blob 对象转换成字符串
        let reader = new FileReader();
        reader.readAsText(blob, 'utf-8');
        reader.onload = () => {
          try {
            let result = JSON.parse(reader.result);
            if (result.message) {
              this.$message.error(result.message);
            } else {
              const url = URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.href = url;
              link.download = '设备档案卡.doc';
              link.click();
              this.$message.success('导出成功')
            }
          } catch (err) {
            console.log(err);
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '设备档案卡.doc';
            link.click();
            this.$message.success('导出成功')
          }
        }
        if(!this.formData.specificationModel){
          this.$message.error('未输入规格型号')
          return
        }
        if(!this.formData.managementNumber){
          this.$message.error('未输入管理编号')
          return
        }
        if(!this.formData.activationDate){
          this.$message.error('未输入启用日期')
          return
        }
        if(this.formData.deviceStatus==='' || this.formData.deviceStatus===null){
          this.$message.error('未选择当前状态')
          return
        }
        if(!this.formData.calibrationDate){
          this.$message.error('未输入校准周期（月）')
          return
        }
            delete this.formData.createTime
            delete this.formData.updateTime
            delete this.formData.createUser
            delete this.formData.updateUser
        this.formData.insProductIds = this.formData.insProductIds?this.formData.insProductIds.join():''
        this.upLoad = true;
            this.$axios.post(this.$api.deviceScope.upDeviceParameter, this.formData, {
               headers: {
                  'Content-Type': 'application/json'
               }
            }).then(res => {
               if (res.code === 201) {
                  this.upLoad = false
                  return
               }
               this.$message.success('修改成功')
               this.upLoad = false
               this.dialogVisible = false
            }).catch(e => {
               this.$message.error('修改失败')
               this.dialogVisible = false
               this.upLoad = false
            })
      })
    },
    handleSuccessUpImg2(response) {
      if (response.code == 200) {
        this.$nextTick(() => {
          this.formData.imageUpload = response.data.url;
          this.formData.imageName = response.data.name;
          this.editData.imageUpload = response.data.url;
          this.editData.imageName = response.data.name;
          console.log(this.javaApi + 'img/' + this.editData.imageUpload);

        })
      }
    },
@@ -525,21 +884,18 @@
    },
    // 获取负责人列表
    selectDevicePrincipal() {
      this.$axios.get(this.$api.deviceScope.selectDevicePrincipal).then(res => {
        let data = []
        res.data.forEach(a => {
          data.push({
            label: a.name,
            value: a.id
          })
        })
        this.responsiblePersonList = data
      this.$axios.post(this.$api.user.selectUserList, this.componentData, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        this.responsiblePersonList = res.data.body.records;
      })
    },
    obtainItemParameterList() {
      this.$axios.get(this.$api.laboratoryScope.obtainItemParameterList).then(res => {
        let data = []
        res.data.forEach(a=>{
        res.data.forEach(a => {
          data.push({
            label: a.laboratoryName,
            value: a.id
@@ -548,22 +904,22 @@
        this.subordinateDepartmentsList = data
      })
    },
    getInsProductIds(){
    getInsProductIds() {
      this.$axios.post(this.$api.capacityScope.getInsProduction).then(res => {
        this.options = res.data.map((m,i)=>{
        this.options = res.data.map((m, i) => {
          m.id = m.name;
          return m
        })
        this.options.forEach(item=>{
          if(item.children.length==0){
        this.options.forEach(item => {
          if (item.children.length == 0) {
            item.children = null;
          }else{
            item.children.forEach(m=>{
              if(m.children.length==0){
          } else {
            item.children.forEach(m => {
              if (m.children.length == 0) {
                m.children = null;
              }else{
                m.children.forEach(n=>{
                  if(n.children&&n.children.length==0){
              } else {
                m.children.forEach(n => {
                  if (n.children && n.children.length == 0) {
                    n.children = null;
                  }
                })
@@ -579,8 +935,8 @@
        category: "设备状态"
      }).then(res => {
        this.deviceStatusList = res.data
        this.deviceStatusList.forEach(a=>{
          if(!isNaN(a.value)){
        this.deviceStatusList.forEach(a => {
          if (!isNaN(a.value)) {
            a.value = parseInt(a.value)
          }
        })
@@ -591,59 +947,233 @@
        this.equipmentList = res.data
      })
    },
  },
  watch: {
    // 监听点击el-tree的数据，进行数据刷新
    clickNodeVal(newVal) {
      if (newVal.value) {
        this.getList(newVal.value)
        this.getPage()
      }
    },
    dialogVisible1(newVal) {
      if (newVal == false) {
        this.isAddFileUpdate = false
        this.addFile = {}
        this.fileList = []
      }
    }
  }
}
</script>

<style scoped>
.page{
  width: 100%;
  height: 100%;
.main_div {
  height: calc(100vh - 15em);
  overflow-y: auto;
  overflow-x: hidden;
}
.page-header{

.page {
  width: 100%;
  height: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
h4{

h4 {
  display: flex;
  align-items: center;
}
h4 .line{

h4 .line {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}
.tables{
  width: calc(100vw - 390px);

.tables {
  width: 100%;
}

.el-image {
  position: relative;
}
.el-icon-picture-outline{

.el-icon-picture-outline {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  transform: translate(-50%, -50%);
}
.form-item{

.form-item {
  line-height: 34px;
  display: flex;
  align-items: center;
  font-size: 14px;
}
.form-item label{
  width: 110px;

.text-ellipsis {
  display: inline-block;
  width: 200px;                    /* 或者您可以设置一个具体的宽度值 */
  box-sizing: border-box;         /* 确保padding和border不影响元素的总宽度 */
  white-space: nowrap;            /* 禁止文本换行 */
  text-overflow: ellipsis;        /* 使用省略号表示被截断的文本 */
  overflow: hidden;               /* 隐藏超出容器的内容 */
}

.form-items {
  line-height: 34px;
   /* display: flex; */
  /* align-items: center;  */
  margin-left: 15%;
  font-size: 14px;
}


.form-item label {
  min-width: 130px;
  display: inline-block;
  text-align: right;
  margin-right: 20px;
  color: #999;
}

.form-item p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* 这里设置你想要的行数 */
  -webkit-box-orient: vertical;
}

.btns {
  display: flex;
  align-items: center;
}

.search_thing,
.check_thing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.search_label,
.check_label {
  width: 120px;
}

.search_input,
.check_data,
.check_input {
  flex-grow: 1;
}

.avatar-uploader .el-upload {
    border: 1px dashed #190505;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

.device-main{
  width:90%;
  margin:0px 5%;
  height:460px;
  padding:25px 0px;
  background-color: #fff;
}
.device-center{
  width:90%;
  height:460px;
  margin:0px 5%;
  border-radius: 15px;
  background-color: #fff;
  overflow: hidden;
  /* box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, 0.3); */
  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.3))
}
.device-title{
  position: relative;
  top:20px;
  z-index: 2;
  font-size: clamp(1rem, 0.582rem + 1.59vw, 1.475rem);
  font-weight: bold;
  color: #4f6ab2;
  width: 100%;
  height:90px;
  line-height: 100px;
  text-align: center;
}
.device-footer{
  width:100%;
  height:420px;
  background-color: #3361d0;
  position: relative
}
.device-footer::after{
  content: "";
  width: 100%;
   height: 70px;
   position: absolute;
  top:-30px;
  border-radius: 0 0 50% 50%;
  background-color: #fff;
}
.device-footer .qr-code{
  width: 55%;
  height: 200px;
  position: relative;
  top: 60px;
  left:22.5%;
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
}
.device-number{
  width:80%;
  height: 20px;
  margin-left:20%;
  position: relative;
  top: 80px;
}
.device-text{
  color:#fff;
  font-weight: bold;
  font-size:100%;
}
.device-name{
  width:80%;
  margin-left:20%;
  height: 20px;
  position: relative;
  top: 90px;
}
</style>