v3-lab-web/src/views/integratedManagement/laboratoryManagement/subject/index.vue

<template>
  <div class="app-container subject">
    <div class="page-container subject-page" v-if="pageType == 1">
      <div class="left-subject-list">
        <div class="page-form-title-box">
          <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item label="" prop="searchValue">
              <el-input
                v-model="queryParams.searchValue"
                placeholder="实验室/房间号"
                clearable
                maxlength="10"
                style="width:150px;"
              />
            </el-form-item>
            <el-form-item label="" prop="deptId">
              <el-select v-model="queryParams.deptId" filterable placeholder="二级单位" style="width:140px;">
                <el-option
                  v-for="dict in deptOptions"
                  :key="dict.deptId"
                  :label="dict.deptName"
                  :value="dict.deptId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="buildId">
              <el-select v-model="queryParams.buildId" filterable placeholder="楼栋" style="width:140px;">
                <el-option
                  v-for="dict in buildOptions"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="typeId">
              <el-select v-model="queryParams.typeId" placeholder="安全分类" style="width:140px;">
                <el-option
                  v-for="dict in typeList"
                  :key="dict.typeId"
                  :label="dict.subType"
                  :value="dict.typeId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="levelId">
              <el-select v-model="queryParams.levelId" placeholder="安全分级" style="width:140px;">
                <el-option
                  v-for="dict in levelList"
                  :key="dict.levelId"
                  :label="dict.titleName"
                  :value="dict.levelId"
                ></el-option>
              </el-select>
            </el-form-item>
            <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
            <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
            <el-dropdown @command="commandButton" style="float: right;">
              <p class="page-submit-common-style-button" style="width:105px;"
              >操作<span class="el-icon-arrow-down" style="margin-left:10px;"></span></p>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{command:1}" v-hasPermiRouter="['system:subject:add']">新增</el-dropdown-item>
                <!--<el-dropdown-item :command="{command:2}">关联配置</el-dropdown-item>-->
                <!--<el-dropdown-item :command="{command:3}">准入配置</el-dropdown-item>-->
                <el-dropdown-item :command="{command:4}">下载二维码</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-form-item v-hasPermiRouter="['system:subject:import']" style="float: right;">
              <import-component :importConfig="importConfig"></import-component>
            </el-form-item>
          </el-form>
        </div>
        <div class="page-content-box">
          <el-table class="table-box" ref="table-box" border :data="dataList" highlight-current-row
                    @select-all="handleSelectionChange" @select="handleSelectionChange" :row-key="getRowKeys"
                    @current-change="handleCurrentChange">
            <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
            <el-table-column label="排序" align="left" prop="orderNum" width="75">
              <template slot-scope="scope">
                <el-input maxlength="4" type="text" oninput="value=value.replace(/[^0-9.]/g,'')"
                          v-model="scope.row.orderNum" @focus="liveSort(scope.row)"
                          @blur="editSort(scope.row)">
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="实验室名称" align="left" prop="subName" show-overflow-tooltip/>
            <el-table-column label="房间号" align="left" prop="roomName" width="100" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.roomName?scope.row.roomName:'未绑定'}}</span>
              </template>
            </el-table-column>
            <el-table-column label="学院" align="left" prop="deptName" width="130" show-overflow-tooltip/>
            <el-table-column label="楼栋/楼层" align="left" prop="buildName" width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.buildName}}/{{scope.row.floorName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="分类/分级" align="left" prop="levelName" width="150" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.typeName}}/</span>
                <span :style="'color:'+scope.row.levelColor+';'">{{scope.row.levelName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="实验室负责人" align="left" prop="adminName" width="120" show-overflow-tooltip/>
            <el-table-column label="安全员" align="left" prop="safeUserNames" width="120" show-overflow-tooltip/>
            <el-table-column label="操作" align="left" width="140">
              <template slot-scope="scope">
                <div class="table-button-box">
                  <p class="table-button-null"></p>
                  <p class="table-button-p" v-hasPermiRouter="['system:subject:detail']"
                     @click.stop="clickPage(7,scope.row)">详情</p>
                  <el-dropdown trigger="click" size="mini" @command="(command) => handleCommand(command, scope.row)"
                               v-hasPermiRouter="['system:subject:edit']">
                    <p class="table-button-p">更多>></p>
                    <el-dropdown-menu slot="dropdown" style="margin:0!important;">
                      <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="1"
                                        v-hasPermiRouter="['system:subject:edit']">关联配置
                      </el-dropdown-item>
                      <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="2"
                                        v-hasPermiRouter="['system:subject:edit']">准入配置
                      </el-dropdown-item>
                      <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="3"
                                        v-hasPermiRouter="['system:subject:edit']">编辑
                      </el-dropdown-item>
                      <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="4"
                                        v-hasPermiRouter="['system:subject:edit']">
                        {{scope.row.accessControl?'关闭准入':'开启准入'}}
                      </el-dropdown-item>
                      <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="5"
                                        v-hasPermiRouter="['system:subject:edit']">信息牌下载
                      </el-dropdown-item>
                      <el-dropdown-item style="height:36px;line-height:36px;width:90px;text-align: center" command="6"
                                        >实验室设备
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                  <p class="table-button-null"></p>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
      <index-right-page ref="indexRightPage"></index-right-page>
    </div>
    <!--电子信息牌导出-->
    <el-dialog class="subject-dialog" title='' width="1267px" append-to-body
               :visible.sync="dialogType" v-if="dialogType" @close="dialogOff()"
               :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="subject-dialog-button-box">
        <p @click="dialogOff">取消</p>
        <p @click="downloadImg">下载</p>
      </div>
      <div id="subject-dialog-print-box" ref="canvasImg">
        <div class="subject-dialog-top-max-big-box">
          <div class="subject-dialog-top-level-box" :style="'background-color:'+dialogData.filedColor+';'">
            <p>{{dialogData.levelName}}</p>
            <p>{{dialogData.typeName}}</p>
          </div>
          <div class="subject-dialog-top-text1-box">
            <div class="subject-dialog-top-text-box">
              <div style="padding-right: 0;">
                <p>单</p>
                <p>位</p>
                <p>名</p>
                <p>称</p>
              </div>
              <p class="subject-dialog-top-text-p">{{dialogData.deptName}}</p>
            </div>
            <div class="subject-dialog-top-text-box">
              <div style="padding-right: 9px;">
                <p>实</p>
                <p>验</p>
                <p>室</p>
                <p>名</p>
                <p>称</p>
              </div>
              <p class="subject-dialog-top-text-p">{{dialogData.subjectName}}</p>
            </div>
            <div class="subject-dialog-top-text-box">
              <div>
                <p>实</p>
                <p>验</p>
                <p>室</p>
                <p>负</p>
                <p>责</p>
                <p>人</p>
              </div>
              <p class="subject-dialog-top-text-p">{{dialogData.adminName}}</p>
            </div>
          </div>
          <div class="subject-dialog-top-text2-box">
            <div class="subject-dialog-top-text-box">
              <div>
                <p>楼</p>
                <p style="text-align: right">宇</p>
              </div>
              <p class="subject-dialog-top-text-p">{{dialogData.buildName}}</p>
            </div>
            <div class="subject-dialog-top-text-box">
              <div>
                <p style="text-align: left">房</p>
                <p style="text-align: center">间</p>
                <p style="text-align: right">号</p>
              </div>
              <p class="subject-dialog-top-text-p">{{dialogData.room}}</p>
            </div>
            <div class="subject-dialog-top-text-box">
              <div>
                <p>负</p>
                <p>责</p>
                <p>人</p>
                <p>电</p>
                <p>话</p>
              </div>
              <p class="subject-dialog-top-text-p">{{dialogData.adminPhone}}</p>
            </div>
          </div>
          <div class="subject-dialog-top-code-box">
            <vue-qr style="display: block;height:164px;width:164px;margin:24px 18px;"
                    :text="identification+'?'+dialogData.qrCodeUrl" :size="300">
            </vue-qr>
          </div>
        </div>
        <div class="subject-dialog-bottom-max-big-box">
          <!--左侧图片部分-->
          <div class="subject-dialog-bottom-left-max-big-box">
            <div v-for="(item,index) in dialogData.imgList" class="for-max-box">
              <p class="for-title-p" :style="'background-color:'+item.showColour+';'">{{item.classifyName}}</p>
              <div>
                <img v-for="(minItem) in item.classifyList" :src="minItem">
              </div>
            </div>
          </div>
          <!--右侧文字部分-->
          <div class="subject-dialog-bottom-right-max-big-box">
            <div v-for="(item,index) in dialogData.textList" class="for-max-box">
              <p class="for-title-p" :style="'background-color:'+item.showColour+';'">{{item.classifyName}}</p>
              <div>
                <p v-for="(minItem) in item.classifyList">{{minItem}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--<div id="subject-dialog-print-box" ref="canvasImg">-->
        <!--<div class="subject-dialog-print-big-box">-->
          <!--&lt;!&ndash;信息栏&ndash;&gt;-->
          <!--<div class="subject-dialog-print-top-box">-->
            <!--<div class="subject-dialog-print-top-left-box">-->
              <!--<div class="subject-dialog-print-top-left-top-box">-->
                <!--&lt;!&ndash;实验室名称&ndash;&gt;-->
                <!--<div class="subject-dialog-name-box">-->
                  <!--<div class="title-box-1">-->
                    <!--<div class="title-box-2" :style="'background-color:'+dialogData.filedColor+';'">-->
                      <!--<div class="title-box-3">-->
                        <!--<p :style="'background-color:'+dialogData.filedColor+';'">-->
                          <!--{{dialogData.levelName}}丨{{dialogData.typeName}}</p>-->
                      <!--</div>-->
                    <!--</div>-->
                  <!--</div>-->
                  <!--<p class="title-p">实验室安全信息牌</p>-->
                <!--</div>-->
                <!--&lt;!&ndash;实验室信息&ndash;&gt;-->
                <!--<div class="subject-dialog-info-box">-->
                  <!--<div class="subject-dialog-info-left-box">-->
                    <!--<div class="subject-dialog-info-left-min-box">-->
                      <!--<div>-->
                        <!--<p class="text-p-left" style="margin-right:10px;">责</p>-->
                        <!--<p class="text-p-center">任</p>-->
                        <!--<p class="text-p-center">单</p>-->
                        <!--<p class="text-p-right" style="margin-left:10px;">位</p>-->
                      <!--</div>-->
                      <!--<p class="subject-dialog-info-left-p">： {{dialogData.deptName}}</p>-->
                    <!--</div>-->
                    <!--<div class="subject-dialog-info-left-min-box">-->
                      <!--<div>-->
                        <!--<p class="text-p-left" style="margin-right:6px;">实</p>-->
                        <!--<p class="text-p-center">验</p>-->
                        <!--<p class="text-p-center">室</p>-->
                        <!--<p class="text-p-center">名</p>-->
                        <!--<p class="text-p-right" style="margin-left:6px;">称</p>-->
                      <!--</div>-->
                      <!--<p class="subject-dialog-info-left-p">： {{dialogData.subjectName}} - {{dialogData.room}}</p>-->
                    <!--</div>-->
                    <!--<div class="subject-dialog-info-left-min-box">-->
                      <!--<div>-->
                        <!--<p class="text-p-left" style="margin-right:2px;">实</p>-->
                        <!--<p class="text-p-center">验</p>-->
                        <!--<p class="text-p-center">室</p>-->
                        <!--<p class="text-p-center">负</p>-->
                        <!--<p class="text-p-center">责</p>-->
                        <!--<p class="text-p-right" style="margin-left:2px;">人</p>-->
                      <!--</div>-->
                      <!--<p class="subject-dialog-info-left-p">： {{dialogData.adminName}}｜{{dialogData.adminPhone}}</p>-->
                    <!--</div>-->
                  <!--</div>-->
                  <!--<div class="subject-dialog-info-right-box">-->
                    <!--<vue-qr style="display: block;height:110px;width:110px;"-->
                            <!--:text="identification+'?'+dialogData.qrCodeUrl" :size="300">-->
                    <!--</vue-qr>-->
                  <!--</div>-->
                <!--</div>-->
              <!--</div>-->
              <!--<div class="subject-dialog-print-top-left-bottom-box">-->
                <!--&lt;!&ndash;1号右侧信息栏&ndash;&gt;-->
                <!--<div class="subject-dialog-print-top-left-bottom-left-box" v-if="dialogData.dataOne">-->
                  <!--<p class="data-title" :style="'background-color:'+dialogData.dataOne.showColour+';'">-->
                    <!--{{dialogData.dataOne.classifyName}}</p>-->
                  <!--<div class="data-for-text" v-if="dialogData.dataOne.classifyType == 1">-->
                    <!--<p v-for="(item,index) in dialogData.dataOne.classifyList" :key="index">{{index+1}}、{{item}}</p>-->
                  <!--</div>-->
                  <!--<div class="data-for-img" v-if="dialogData.dataOne.classifyType == 2">-->
                    <!--<img v-for="(item,index) in dialogData.dataOne.classifyList" :key="index" :src="item">-->
                  <!--</div>-->
                <!--</div>-->
                <!--&lt;!&ndash;2号右侧信息栏&ndash;&gt;-->
                <!--<div class="subject-dialog-print-top-left-bottom-right-box" v-if="dialogData.dataTwo">-->
                  <!--<p class="data-title" :style="'background-color:'+dialogData.dataTwo.showColour+';'">-->
                    <!--{{dialogData.dataTwo.classifyName}}</p>-->
                  <!--<div class="data-for-text" v-if="dialogData.dataTwo.classifyType == 1">-->
                    <!--<p v-for="(item,index) in dialogData.dataTwo.classifyList" :key="index">{{index+1}}、{{item}}</p>-->
                  <!--</div>-->
                  <!--<div class="data-for-img" v-if="dialogData.dataTwo.classifyType == 2">-->
                    <!--<img v-for="(item,index) in dialogData.dataTwo.classifyList" :key="index" :src="item">-->
                  <!--</div>-->
                <!--</div>-->
              <!--</div>-->
            <!--</div>-->
            <!--&lt;!&ndash;3号右侧信息栏&ndash;&gt;-->
            <!--<div class="subject-dialog-print-top-right-box" v-if="dialogData.dataThree">-->
              <!--<p class="data-title" :style="'background-color:'+dialogData.dataThree.showColour+';'">-->
                <!--{{dialogData.dataThree.classifyName}}</p>-->
              <!--<div class="data-for-text" v-if="dialogData.dataThree.classifyType == 1">-->
                <!--<p v-for="(item,index) in dialogData.dataThree.classifyList" :key="index">{{index+1}}、{{item}}</p>-->
              <!--</div>-->
              <!--<div class="data-for-img" v-if="dialogData.dataThree.classifyType == 2">-->
                <!--<img v-for="(item,index) in dialogData.dataThree.classifyList" :key="index" :src="item">-->
              <!--</div>-->
            <!--</div>-->
          <!--</div>-->
          <!--&lt;!&ndash;特殊类目&ndash;&gt;-->
          <!--<div class="subject-dialog-print-button-box" v-if="dialogData.specialBrandInfo"-->
               <!--:style="'background:'+dialogData.specialBrandInfo.showColour+';'">-->
            <!--<span v-for="(item,index) in dialogData.specialBrandInfo.classifyList" :key="index">{{item}}</span>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
      <div class="subject-dialog-shade" v-if="dialogShadeType"></div>
    </el-dialog>
    <!--新增/编辑-->
    <add-subject v-if="pageType == 2" :subjectData="subjectData"></add-subject>
    <!--准入配置-->
    <admission-configuration v-if="pageType == 4" :subjectData="subjectData"></admission-configuration>
    <!--关联配置-->
    <association-configuration v-if="pageType == 5" :subjectData="subjectData"></association-configuration>
    <!--详情-->
    <info-page v-if="pageType == 6" :subjectData="subjectData"></info-page>
    <!--批量二维码-->
    <batchQrCodeDialog ref="batchQrCodeDialog" :batchQrCodeDialogData="batchQrCodeDialogData"></batchQrCodeDialog>
  </div>
</template>

<script>
  /********************** V3 **********************/
  import vueQr from 'vue-qr'
  import html2canvas from 'html2canvas'
  import importComponent from '@/components/importComponent/importComponent.vue'
  import batchQrCodeDialog from '@/components/batchQrCodeDialog/batchQrCodeDialog.vue'
  import {
    getDeptDropList,
    systemBuildingGetTreeList,
    laboratoryClassTypeGetList,
    laboratoryClassLevelGetList
  } from '@/api/commonality/permission'
  import {
    laboratorySubRelInfoList,
    laboratorySubRelInfoGetDetailInfo,
    laboratorySubRelInfoGetHazardSubRelInfo,
    laboratorySubRelInfoUpdateBySort,
    laboratorySubRelInfoUpdateByControl,
    laboratoryBoardExportBoardInfo,
    laboratoryAppBoardMiddleInfo,
    laboratoryLevelConfigGetLevelTitleList, laboratoryTypeConfigGetList
  } from '@/api/integratedManagement/index'
  import indexRightPage from './indexRightPage/indexRightPage.vue'
  import addSubject from './addSubject.vue'
  import admissionConfiguration from './admissionConfiguration.vue'
  import associationConfiguration from './associationConfiguration.vue'
  import infoPage from './infoPage.vue'
  import { menuLinkPost } from "@/api/commonality/permission";

  export default {
    name: 'subject',
    components: {
      vueQr,
      importComponent,
      addSubject,
      admissionConfiguration,
      associationConfiguration,
      infoPage,
      indexRightPage,
      batchQrCodeDialog
    },
    data() {
      return {
        //二维码规则 服务器域名,需与微信后台开发配置内一致.
        identification: localStorage.getItem('codeOnlineAdd'),
        //批量二维码
        batchQrCodeDialogData: {},
        //电子信息牌
        dialogType: false,
        dialogData: {},
        dialogShadeType: false,
        //导入数据
        importConfig: {
          upLoadApi: '/laboratory/subRelInfo/importSubData',                //上传接口地址
          downloadApi: '/laboratory/subRelInfo/exportSubTemplate',          //下载模板接口地址
          loseApi: '/laboratory/subRelInfo/exportProblemData',             //失败报表接口地址
          fileName: '实验室导入模板'                                   //下载模板命名
        },
        //页面状态
        pageType: 1,
        // 查询参数
        queryParams: {
          page: 1,
          pageSize: 20,
          searchValue: '',
          deptId: '',
          typeId: '',
          levelId: ''
        },
        // 实验室表格数据
        dataList: [],
        // 楼栋
        buildOptions: [],
        // 总条数
        total: 0,
        //学院列表
        deptOptions: [],
        //实验室数据
        subjectData: {},
        // 临时保存排序
        orderNum: '',
        //分类数据
        typeList: [],
        //分级数据
        levelList: [],
        //二维码勾选数据
        codeList: ''
      }
    },
    created() {
    },
    mounted() {
      //获取院系列表
      this.getDeptDropList()
      //获取楼栋列表
      this.systemBuildingGetTreeList()
      //获取分类列表
      this.laboratoryClassTypeGetList()
      //获取分级列表
      this.laboratoryClassLevelGetList()
      //获取列表数据
      this.getList()
    },
    methods: {
      //操作按钮
      commandButton(item) {
        if (item.command == 1) {
          this.clickPage(2)
        } else if (item.command == 2) {

        } else if (item.command == 3) {

        } else if (item.command == 4) {
          if (this.codeList.length > 0) {
            let list = []
            this.codeList.forEach((item) => {
              list.push({
                code: item.infoId + '&subId=' + item.subId,
                name: item.subName,
                roomName: item.roomName
              })
            })
            this.$set(this, 'batchQrCodeDialogData', {
              title: '实验室二维码批量下载',                                               //弹窗名称(非必传)
              type: '5',                                                     //二维码类型 用于区分二维码功能类型
              codeList: list
            })
            this.$nextTick(function() {
              this.$refs['batchQrCodeDialog'].initialize()
            })
          } else {
            this.msgError('请勾选实验室')
          }
        }
      },
      // 页面切换
      clickPage(type, row) {
        if (this.pageType != type) {
          if (type == 1) {
            //列表页面
            this.pageType = type
            this.getList()
            this.$set(this, 'subjectData', {})
          } else if (type == 2) {
            //新增页面
            this.pageType = type
          } else if (type == 7) {
            //实验室详情
            this.getSubInfo(row, 1)
          }
        }
      },
      //更多按钮
      handleCommand(command, row) {
        let self = this
        switch (command) {
          case '1':
            //关联配置
            laboratorySubRelInfoGetHazardSubRelInfo({ infoId: row.infoId }).then(response => {
              this.$set(this, 'subjectData', response.data)
              this.$set(this, 'pageType', 5)
            })
            break
          case '2':
            //准入配置
            this.pageType = 4
            this.$set(this, 'subjectData', row)
            break
          case '3':
            //编辑页面
            this.getSubInfo(row, 2)
            break
          case '4':
            let text = row.accessControl ? '关闭' : '开启'
            //开启/关闭门禁权限
            self.$confirm('是否确认' + text + '实验室准入?', '', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(function() {
              laboratorySubRelInfoUpdateByControl({
                infoId: row.infoId,
                accessControl: !row.accessControl
              }).then(response => {
                self.msgSuccess(response.message)
                self.getList()
              })
            }).then(() => {
            }).catch(() => {
            })
            break
          case '5':
            laboratoryAppBoardMiddleInfo({
              labId: row.subId
            }).then(response => {
              response.data.imgList = [];
              response.data.textList = [];
              response.data.brandInfoSubjectVos.forEach((item,index)=>{
                if(item.classifyType == 1){
                  //文字
                  if(!response.data.textList[1]){
                    response.data.textList.push(item)
                  }
                }else if(item.classifyType == 2){
                  //图片
                  if(!response.data.imgList[2]){
                    response.data.imgList.push(item)
                  }
                }
              })
              this.$set(this, 'dialogData', response.data)
              this.$set(this, 'dialogType', true)
              this.$set(this, 'dialogShadeType', false)
              /****** 旧版本信息牌-开始 ******
              let textLength = 0
              let textIndex = null
              for (let i = 0; i < response.data.nonspecialBrandList.length; i++) {
                if (response.data.nonspecialBrandList[i].classifyType == 1) {
                  response.data.nonspecialBrandList[i].length = 0
                  for (let o = 0; o < response.data.nonspecialBrandList[i].classifyList.length; o++) {
                    response.data.nonspecialBrandList[i].length = response.data.nonspecialBrandList[i].length + response.data.nonspecialBrandList[i].classifyList[o].length
                  }
                  if (response.data.nonspecialBrandList[i].length > textLength) {
                    textLength = response.data.nonspecialBrandList[i].length
                    textIndex = i
                  }
                }
              }
              if (textIndex != null) {
                for (let i = 0; i < response.data.nonspecialBrandList.length; i++) {
                  if (textIndex == i) {
                    response.data.dataThree = response.data.nonspecialBrandList[i]
                  } else {
                    if (!response.data.dataOne) {
                      response.data.dataOne = response.data.nonspecialBrandList[i]
                    } else if (!response.data.dataTwo) {
                      response.data.dataTwo = response.data.nonspecialBrandList[i]
                    }
                  }
                }
              } else {
                console.log('2')
                if (response.data.nonspecialBrandList[0]) {
                  response.data.dataOne = response.data.nonspecialBrandList[0]
                }
                if (response.data.nonspecialBrandList[1]) {
                  response.data.dataTwo = response.data.nonspecialBrandList[1]
                }
                if (response.data.nonspecialBrandList[2]) {
                  response.data.dataThree = response.data.nonspecialBrandList[2]
                }
              }
              this.$nextTick(() => {
                this.$set(this, 'dialogData', response.data)
                this.$set(this, 'dialogType', true)
                this.$set(this, 'dialogShadeType', false)
              })
               ****** 旧版本信息牌-结束 ******/
            })
            break
          case '6':
            //跳转实验室设备第三方页面
            let obj = {
              //访问地址
              linkUrl: "http://labcontrol.nwafu.edu.cn/ysms/admin/#/generator-fac/Fac",
              // linkUrl: "https://lab.xf100.net/ysms-web/#/generator-fac/Fac",
              //请求地址
              reqApi: "labcontrol.nwafu.edu.cn/ysms/auth/ticket",
              // reqApi: "lab.xf100.net/ysms/auth/ticket",
            };
            this.isAuthCarryLink(obj);
            break
          default:
            break
        }
      },
      isAuthCarryLink(item) {
        let urlText = window.location.href.split('://')[0]+'://';
        let obj = {
          appId:'550e8400-e29b-41d4-a716-446655440000',
          appSecret:'Y3RpdGhpZXMpcmlzY2hlZGFwc2VjcmV0MGI3MzA1Mjc3Y2I0OTFlNGRhM2Q5ZTN6',
          timeStamp:Date.parse(new Date()),
          userId:localStorage.getItem('userId')
        };
        menuLinkPost(urlText+item.reqApi,obj).then(response => {
          this.carryLink(item.linkUrl,response.data)
        })
      },
      carryLink(linkUrl,data){
        let argument = '?ticket='+data.ticket;
        window.open(linkUrl+argument,'_blank','noreferrer')
      },
      //电子信息牌导出关闭按钮
      dialogOff() {
        this.$set(this, 'dialogType', false)
        this.$set(this, 'dialogData', {})
      },
      downloadImg() {
        if (!this.dialogShadeType) {
          this.$set(this, 'dialogShadeType', true)
          this.$nextTick(() => {
            this.createImage()
          })
        }
      },
      //下载电子信息牌
      async createImage() {
        try {
          const config = {
            useCORS: true
          }
          const canvas = await html2canvas(this.$refs.canvasImg, config) // 在这里，将需要转换成图片的部分作为参数传入html2canvas
          const image = canvas.toDataURL() // 将生成的canvas转换为DataURL格式
          this.$nextTick(() => {
            this.downloadQrCode(image)
          })
        } catch (e) {
          throw new Error(e)
        }
      },
      //下载BASE64图片
      downloadQrCode(image) {
        const blob = this.base64ToBlob(image, 'image/png')
        const url = URL.createObjectURL(blob)

        const link = document.createElement('a')
        link.href = url
        link.download = this.dialogData.subjectName + ' - ' + this.dialogData.room
        document.body.appendChild(link)
        link.click()
        // 清理
        document.body.removeChild(link)
        URL.revokeObjectURL(url)
        this.$nextTick(() => {
          this.msgSuccess('下载成功')
          this.$set(this, 'dialogType', false)
          this.$set(this, 'dialogData', {})
        })
      },
      base64ToBlob(base64Str, contentType, sliceSize) {
        contentType = contentType || ''
        sliceSize = sliceSize || 512

        const byteCharacters = atob(base64Str.split(',')[1])
        const byteArrays = []

        for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
          const slice = byteCharacters.slice(offset, offset + sliceSize)

          const byteNumbers = new Array(slice.length)
          for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i)
          }

          const byteArray = new Uint8Array(byteNumbers)
          byteArrays.push(byteArray)
        }

        const blob = new Blob(byteArrays, { type: contentType })
        return blob
      },
      getBase64Image(img) {
        let canvas = document.createElement('canvas')
        canvas.width = img.width
        canvas.height = img.height
        let ctx = canvas.getContext('2d')
        ctx.drawImage(img, 0, 0, img.width, img.height)
        let dataURL = canvas.toDataURL('image/png')
        return dataURL
        // return dataURL.replace("data:image/png;base64,", "");
      },
      //获取实验室详情 type:1.详情 2.编辑
      getSubInfo(row, type) {
        laboratorySubRelInfoGetDetailInfo({ infoId: row.infoId }).then(response => {
          let classifyList = []
          for (let i = 0; i < response.data.labInfoBrandModels.length; i++) {
            if (response.data.labInfoBrandModels[i].privateList.length > 0 && (response.data.labInfoBrandModels[i].brandType == 1 || response.data.labInfoBrandModels[i].brandType == 2)) {
              classifyList.push(response.data.labInfoBrandModels[i])
            }
          }
          response.data.classifyList = classifyList
          if (response.data.safeUserList[0]) {
            response.data.safeUserId = []
            response.data.safeUserList.forEach((item) => {
              response.data.safeUserId.push(item.safeUserId)
            })
          }
          this.$set(this, 'subjectData', response.data)
          if (type == 1) {
            //详情
            this.$set(this, 'pageType', 6)
          } else if (type == 2) {
            //编辑
            this.$set(this, 'pageType', 2)
          }
        })
      },
      //保存当前排序
      liveSort(row) {
        let obj = {
          orderNum: row.orderNum
        }
        this.orderNum = JSON.parse(JSON.stringify(obj))
      },
      //编辑排序
      editSort(row) {
        let self = this
        if (row.orderNum != this.orderNum.orderNum) {
          self.$confirm('是否确认修改排序?', '', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function() {
            let obj = {
              infoId: row.infoId,
              orderNum: row.orderNum
            }
            laboratorySubRelInfoUpdateBySort(obj).then(response => {
              self.msgSuccess('修改成功')
              self.getList()
            })
          }).then(() => {
          }).catch(() => {
            let obj = JSON.parse(JSON.stringify(self.orderNum))
            row.orderNum = obj.orderNum
          })
        }
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.$set(this.queryParams, 'page', 1)
        this.$set(this, 'codeList', '')
        this.$refs['table-box'].clearSelection()
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this, 'queryParams', {
          page: 1,
          pageSize: 20,
          searchValue: '',
          deptId: '',
          buildId: '',
          typeId: '',
          levelId: ''
        })
        this.$set(this, 'codeList', '')
        this.$refs['table-box'].clearSelection()
        this.getList()
      },
      //选中实验室
      handleCurrentChange(val) {
        this.$refs.indexRightPage.initialize(val)
      },
      /** 查询实验室列表 */
      getList() {
        laboratorySubRelInfoList(this.queryParams).then(response => {
          this.$set(this, 'dataList', response.data.records)
          this.$set(this, 'total', response.data.total)
          if (response.data.records[0]) {
            this.$refs['table-box'].setCurrentRow(response.data.records[0])
          }
        })
      },
      /** 查询学院列表 */
      getDeptDropList() {
        getDeptDropList({ deptName: '', level: 2, deptType: 1 }).then(response => {
          this.$set(this, 'deptOptions', response.data)
        })
      },
      //查询楼栋楼层
      systemBuildingGetTreeList() {
        systemBuildingGetTreeList({}).then(response => {
          let newList = []
          if (response.data[0]) {
            let list = this.forBuildFloor(response.data)
            for (let i = 0; i < list.length; i++) {
              if (list[i].buildFloorVoList) {
                for (let o = 0; o < list[i].buildFloorVoList.length; o++) {
                  if (list[i].buildFloorVoList[o].buildFloorVoList) {
                    newList.push(list[i].buildFloorVoList[o])
                  }
                }
              }
            }
          }
          this.$set(this, 'buildOptions', newList)
        })
      },
      //处理楼栋楼层数据
      forBuildFloor(list) {
        let self = this
        for (let i = 0; i < list.length; i++) {
          if (list[i].buildFloorVoList) {
            if (list[i].buildFloorVoList[0]) {
              list[i].buildFloorVoList = self.forBuildFloor(list[i].buildFloorVoList)
            } else {
              delete list[i].buildFloorVoList
            }
          } else {
            delete list[i].buildFloorVoList
          }
        }
        return list
      },
      //查询安全分级
      laboratoryClassLevelGetList() {
        laboratoryLevelConfigGetLevelTitleList({}).then(response => {
          this.$set(this, 'levelList', response.data)
        })
      },
      //查询安全分类
      laboratoryClassTypeGetList() {
        laboratoryTypeConfigGetList({}).then(response => {
          this.$set(this, 'typeList', response.data)
        })
      },
      //****************************************导入功能**************************************
      // 多选框选中数据
      handleSelectionChange(selection) {
        let self = this
        if (selection[40]) {
          this.$refs['table-box'].clearSelection()
          this.$nextTick(() => {
            let ids = []
            for (let i = 0; i < selection.length; i++) {
              if (i < 40) {
                ids.push(selection[i])
                self.$refs['table-box'].toggleRowSelection(selection[i], true)
              }
            }
            self.$set(self, 'codeList', ids)
          })
          this.msgError('最多勾选40条')
        } else {
          this.$set(this, 'codeList', selection.map(item => item))
        }
      },
      /*===记录勾选数据===
        需要再el-table 添加  :row-key="getRowKeys"
        需要在selection 添加 :reserve-selection="true"
      */
      getRowKeys(row) {
        return row.subId
      }
    }
  }
</script>

<style scoped lang="scss">
  .subject {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    box-shadow: none;
    margin: 0;
    .subject-page {
      flex: 1;
      display: flex;
      flex-direction: row;
      overflow: hidden;
      .left-subject-list {
        flex: 1;
        width: 1143px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
        border-radius: 10px 10px 10px 10px;
        margin: 5px 7px 20px 10px;
        .page-content-box {
          .table-box {
            ::v-deep .el-input--medium .el-input__inner {
              height: 26px;
              line-height: 26px;
              width: 55px;
              text-align: center;
              padding: 0 10px;
            }
          }
        }
      }
    }
    ::v-deep .el-table__row {
      td:nth-child(1) {
        padding: 0;
      }
    }
    ::v-deep .el-table__row {
      cursor: pointer;
    }
  }
</style>
<style lang="scss">
  .subject-dialog {
    .el-dialog__wrapper .el-dialog {
      margin-top: 0% !important;
    }
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      height: 890px;
      position: relative;
      padding: 0;
      margin: 0;
      overflow: hidden;
      .subject-dialog-button-box {
        position: absolute;
        right: 40px;
        top: 20px;
        display: flex;
        p {
          cursor: pointer;
          width: 70px;
          height: 30px;
          font-size: 14px;
          text-align: center;
          line-height: 30px;
        }
        p:nth-child(1) {
          border-radius: 6px 6px 6px 6px;
          border: 1px solid #E0E0E0;
          margin-right: 9px;
        }
        p:nth-child(2) {
          background: #0045AF;
          color: #fff;
          border-radius: 6px 6px 6px 6px;
        }
      }
    }
    #subject-dialog-print-box {
      width: 1187px;
      height: 839px;
      /*background-color: red;*/
      margin: 50px 40px 0;
      overflow: hidden;
      .subject-dialog-print-big-box {
        z-index: 5;
        width: 1147px;
        height: 799px;
        margin: 20px;
        /*background-color: blue;*/
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .subject-dialog-print-top-box {
          flex: 1;
          display: flex;
          overflow: hidden;
          .subject-dialog-print-top-left-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .subject-dialog-print-top-left-top-box {
              .subject-dialog-name-box {
                height: 60px;
                display: flex;
                overflow: hidden;
                background-color: #0045AF;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
                position: relative;
                .title-box-1 {
                  position: absolute;
                  left: 0;
                  top: -10px;
                  width: 174px;
                  height: 80px;
                  background-color: #fff;
                  border-top-right-radius: 100px;
                  border-bottom-right-radius: 100px;
                  overflow: hidden;
                  .title-box-2 {
                    margin-top: 10px;
                    width: 170px;
                    height: 60px;
                    border-radius: 100px;
                    overflow: hidden;
                    .title-box-3 {
                      margin: 3px;
                      width: 164px;
                      height: 54px;
                      background-color: #fff;
                      border-radius: 100px;
                      overflow: hidden;
                      p {
                        margin: 3px;
                        width: 158px;
                        height: 48px;
                        line-height: 48px;
                        text-align: center;
                        border-radius: 100px;
                        overflow: hidden;
                        font-size: 20px;
                        color: #fff;
                      }
                    }
                  }
                }
                .title-p {
                  margin-left: 204px;
                  line-height: 60px;
                  font-size: 30px;
                  color: #fff;
                }
              }
              .subject-dialog-info-box {
                margin-top: 12px;
                height: 180px;
                background: #F5F5F5;
                border-radius: 10px 10px 10px 10px;
                display: flex;
                overflow: hidden;
                .subject-dialog-info-left-box {
                  flex: 1;
                  padding-top: 9px;
                  .subject-dialog-info-left-min-box {
                    display: flex;
                    height: 29px;
                    margin: 7px 0 11px 15px;
                    div {
                      width: 140px;
                      margin-right: 10px;
                      display: flex;
                      p {
                        color: #000;
                        height: 29px;
                        line-height: 29px;
                        font-size: 22px;
                        overflow: hidden;
                      }
                      .text-p-left {

                      }
                      .text-p-center {
                        flex: 1;
                        text-align: center;
                      }
                      .text-p-right {

                      }
                    }
                    .subject-dialog-info-left-p {
                      color: #000;
                      height: 29px;
                      line-height: 29px;
                      font-size: 22px;
                      overflow: hidden;
                    }
                  }
                }
                .subject-dialog-info-right-box {
                  height: 110px;
                  width: 110px;
                  margin: 35px 23px 0 0;
                  img {
                    display: block;
                    height: 110px;
                    width: 110px;
                  }
                }
              }
            }
            .subject-dialog-print-top-left-bottom-box {
              flex: 1;
              display: flex;
              overflow: hidden;
              .subject-dialog-print-top-left-bottom-left-box {
                margin-top: 17px;
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                .data-title {
                  height: 60px;
                  line-height: 60px;
                  color: #fff;
                  text-align: center;
                  font-size: 24px;
                  border-top-left-radius: 10px;
                  border-top-right-radius: 10px;
                }
                .data-for-text {
                  flex: 1;
                  border: 2px solid #999;
                  border-top: none;
                  overflow: hidden;
                  border-bottom-left-radius: 10px;
                  border-bottom-right-radius: 10px;
                  padding: 5px 14px;
                  p {
                    font-size: 20px;
                    color: #000;
                    line-height: 24px;
                  }
                }
                .data-for-img {
                  flex: 1;
                  border: 2px solid #999;
                  border-top: none;
                  overflow: hidden;
                  border-bottom-left-radius: 10px;
                  border-bottom-right-radius: 10px;
                  line-height: 0;
                  img {
                    display: inline-block;
                    height: 121px;
                    width: 90px;
                    margin: 9px 0 0 31px;
                  }
                }
              }
              .subject-dialog-print-top-left-bottom-right-box {
                margin-left: 20px;
                margin-top: 17px;
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                .data-title {
                  height: 60px;
                  line-height: 60px;
                  color: #fff;
                  text-align: center;
                  font-size: 24px;
                  border-top-left-radius: 10px;
                  border-top-right-radius: 10px;
                }
                .data-for-text {
                  flex: 1;
                  border: 2px solid #999;
                  border-top: none;
                  overflow: hidden;
                  border-bottom-left-radius: 10px;
                  border-bottom-right-radius: 10px;
                  padding: 5px 14px;
                  p {
                    font-size: 20px;
                    color: #000;
                    line-height: 24px;
                  }
                }
                .data-for-img {
                  flex: 1;
                  border: 2px solid #999;
                  border-top: none;
                  overflow: hidden;
                  border-bottom-left-radius: 10px;
                  border-bottom-right-radius: 10px;
                  line-height: 0;
                  img {
                    display: inline-block;
                    height: 121px;
                    width: 90px;
                    margin: 9px 0 0 31px;
                  }
                }
              }
            }
          }
          .subject-dialog-print-top-right-box {
            margin-left: 20px;
            width: 308px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .data-title {
              height: 60px;
              line-height: 60px;
              color: #fff;
              text-align: center;
              font-size: 24px;
              border-top-left-radius: 10px;
              border-top-right-radius: 10px;
            }
            .data-for-text {
              flex: 1;
              border: 2px solid #999;
              border-top: none;
              overflow: hidden;
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
              padding: 9px 14px;
              p {
                font-size: 20px;
                color: #000;
                line-height: 24px;
              }
            }
            .data-for-img {
              flex: 1;
              border: 2px solid #999;
              border-top: none;
              overflow: hidden;
              border-bottom-left-radius: 10px;
              border-bottom-right-radius: 10px;
              line-height: 0;
              img {
                display: inline-block;
                height: 121px;
                width: 90px;
                margin: 11px 0 0 42px;
              }
            }
          }
        }
        .subject-dialog-print-button-box {
          margin-top: 20px;
          width: 1147px;
          height: 50px;
          border-radius: 10px 10px 10px 10px;
          padding: 0 28px;
          overflow: hidden;
          span {
            font-size: 18px;
            line-height: 50px;
            margin-right: 10px;
            color: #fff;
          }
        }
      }
      .subject-dialog-top-max-big-box{
        width:1107px;
        height:210px;
        margin:46px 40px 0;
        display: flex;
        .subject-dialog-top-level-box{
          width:120px;
          height:210px;
          border-top-left-radius:20px;
          border-bottom-left-radius: 20px;
          color:#fff;
          p{
            text-align: center;
          }
          p:nth-child(1){
            margin-top:48px;
            font-size:30px;
            height:43px;
            line-height: 43px;
            overflow: hidden;
          }
          p:nth-child(2){
            margin-top:15px;
            font-size:24px;
            height:35px;
            line-height: 35px;
            overflow: hidden;
          }
        }
        .subject-dialog-top-text1-box{
          flex:1;
          border:2px solid #e0e0e0;
          .subject-dialog-top-text-box:nth-child(1){
            border:none;
          }
          .subject-dialog-top-text-box{
            height:69px;
            display: flex;
            border-top:2px solid #e0e0e0;
            div{
              border-right:2px solid #e0e0e0;
              display: flex;
              padding:0 14px 0 10px;
              width:158px;
              line-height: 69px;
              p{
                flex:1;
                font-size:22px;
                color:#333;
                /*text-align:justify;*/
                /*text-align-last: justify;*/
              }
            }
            .subject-dialog-top-text-p{
              padding:0 10px;
              flex:1;
              display: flex;
              align-items: center;
              font-size:20px;
              color:#333;
              overflow: hidden;
            }
          }
        }
        .subject-dialog-top-text2-box{
          width:363px;
          border-top:2px solid #e0e0e0;
          border-bottom:2px solid #e0e0e0;
          .subject-dialog-top-text-box:nth-child(1){
            border:none;
          }
          .subject-dialog-top-text-box{
            height:69px;
            border-top:2px solid #e0e0e0;
            display: flex;
            div{
              border-right:2px solid #e0e0e0;
              display: flex;
              padding:0 28px 0 18px;
              width:158px;
              line-height: 69px;
              p{
                flex:1;
                font-size:22px;
                color:#333;
                /*text-align:justify;*/
                /*text-align-last: justify;*/
              }
            }
            .subject-dialog-top-text-p{
              padding:0 10px;
              flex:1;
              display: flex;
              align-items: center;
              font-size:20px;
              color:#333;
              overflow: hidden;
            }
          }
        }
        .subject-dialog-top-code-box{
          width:199px;
          height:210px;
          border:2px solid #e0e0e0;
        }
      }
      .subject-dialog-bottom-max-big-box{
        display: flex;
        width:1107px;
        height:479px;
        margin:20px 40px 0;
        .subject-dialog-bottom-left-max-big-box{
          flex:1;
          .for-max-box:nth-child(1){
            p{
              border-top-left-radius: 20px;
            }
          }
          .for-max-box:nth-child(3){
            p{
              border-bottom-left-radius: 20px;
            }
            div{
              border-bottom:2px solid #e0e0e0;
            }
          }
          .for-max-box{
            display: flex;
            p{
              overflow: hidden;
              color:#fff;
              font-size:22px;
              width:50px;
              height:160px;
              display: flex;
              justify-content: center; /* 水平居中 */
              align-items: center; /* 垂直居中 */
              writing-mode: vertical-rl; /* 垂直排列文本 */
              letter-spacing: 10px;
              padding-top:10px;
            }
            div{
              flex:1;
              border-top:2px solid #e0e0e0;
              padding:0 18px;
              height:159px;
              overflow: hidden;
              img{
                display: inline-block;
                width:96px;
                height:121px;
                margin:20px 0 0 26px;
              }
            }
          }
        }
        .subject-dialog-bottom-right-max-big-box{
          width:260px;
          height:479px;
          border:2px solid #e0e0e0;
          overflow: hidden;
          .for-max-box{
            display: flex;
            flex-direction: column;
            .for-title-p{
              padding-left:17px;
              color:#fff;
              font-size:22px;
              height:50px;
              line-height:50px;
              overflow: hidden;
            }
            div{
              overflow: hidden;
              padding:10px 12px;
              p{
                font-size:18px;
                min-height:30px;
                line-height:30px;
                color:#333;
              }
            }
          }
        }
      }
    }
  }
</style>