FE_bankTeaching/src/pages/counter/list/index.vue

<template>
    <div class="wrap">
        <back-Button />
       <!-- <img class="sth bg" v-lazy="lazyImg[2]" alt="" /> -->
        <!-- <img class="sth guide" src="@/assets/img/guide.png" alt="" /> -->
        <img class="sth man cp" v-lazy="lazyImg[0]" alt=""  @click="showData('客户签字',0)"/>
        <img class="sth counter" v-lazy="lazyImg[1]" alt="" />
        <img class="sth glass" v-lazy="lazyImg[2]" alt="" @click="showData('客户签字',0)"/>

        <!-- 系统录入 height: 178px;position:relative;top:-450px;right:20px-->
        <el-tooltip placement="top" popper-class="sth-popper">
            <div slot="content">
                <img style="height: 150px;position:relative;top:10vh;right:20px" v-lazy="lazyImg[3]" alt="" />
            </div>
            <img @click="showManage" class="sth computer cp" v-lazy="lazyImg[4]" alt="" />
        </el-tooltip>
<!--        点击打开传票栏-->
        <el-tooltip placement="top" popper-class="sth-popper" offset="50">
            <div slot="content">
                <img v-lazy="lazyImg[5]" alt="" />
            </div>
            <img class="sth summons cp" v-lazy="lazyImg[6]" alt="" @click="showData('传票栏',1)" />
        </el-tooltip>
<!--        点击打开普通凭证箱-->
        <el-tooltip placement="top-start" popper-class="sth-popper" offset="250">
            <div slot="content">
                <img v-lazy="lazyImg[7]" alt="" />
            </div>
            <img class="sth voucher-box cp" v-lazy="lazyImg[8]" alt="" @click="showData('普通凭证箱',2)" />
        </el-tooltip>
<!--        点击打开重要凭证箱-->
        <el-tooltip placement="top-start" popper-class="sth-popper" offset="250">
            <div slot="content">
                <img v-lazy="lazyImg[9]" alt="" />
            </div>
            <img class="sth important cp" v-lazy="lazyImg[10]" alt="" @click="showData('重要空白凭证箱',3)" />
        </el-tooltip>
<!--        点击打开钱箱-->
        <el-tooltip placement="left-start" popper-class="sth-popper">
            <div slot="content">
                <img v-lazy="lazyImg[11]" alt="" />
            </div>
            <img class="sth money-box cp" v-lazy="lazyImg[12]" alt="" @click="showData('钱箱',4)" />
        </el-tooltip>
<!--        点击打开印章盒-->
        <el-tooltip placement="top" popper-class="sth-popper" offset="-100">
            <div slot="content">
                <img v-lazy="lazyImg[13]" alt="" />
            </div>
            <img class="sth seal-box cp" v-lazy="lazyImg[14]" @click="showData('印章盒',5)" alt="" />
        </el-tooltip>
<!--        点击打开验钞机-->
        <el-tooltip placement="top" popper-class="sth-popper" offset="-100">
            <div slot="content">
                <img v-lazy="lazyImg[15]" alt="" />
            </div>
            <img class="sth currency-detector cp" v-lazy="lazyImg[16]" @click="showData('验钞机',6)" alt="" />
        </el-tooltip>
<!--        点击打开打印机-->
        <el-tooltip placement="top" popper-class="sth-popper" offset="-400">
            <div slot="content">
                <img v-lazy="lazyImg[17]" alt="" />
            </div>
            <img class="sth printer cp" v-lazy="lazyImg[18]" alt="" @click="showData('打印机',7)" />
        </el-tooltip>
<!--        点击打开密码器-->
        <el-tooltip placement="top" popper-class="sth-popper" offset="50">
            <div slot="content">
                <img v-lazy="lazyImg[19]" alt="" />
            </div>
            <img class="sth cipher-machine cp" v-lazy="lazyImg[20]" @click="showData('密码器',8)" alt="" />
        </el-tooltip>

        <el-tooltip placement="top" popper-class="sth-popper" offset="50">
            <div slot="content">
<!--                <img v-lazy="this.lazyImg[29]" alt=""  />-->
            </div>
            <img class="sth employee" v-lazy="lazyImg[21]" @click="setShowBusiness(true)" alt="" />
        </el-tooltip>

        <el-tooltip placement="top" popper-class="sth-popper" offset="-50">
            <div slot="content">
                <img v-lazy="lazyImg[22]" alt="" />
            </div>
            <p class="employeeText" @click="showData('资料',9)">资料</p>
        </el-tooltip>
<!--        点击打开刷卡器-->
        <el-tooltip placement="top" popper-class="sth-popper" offset="00">
            <div slot="content">
                <img v-lazy="lazyImg[23]" alt="" />
            </div>
            <img class="sth card-machine cp" v-lazy="lazyImg[24]" alt="" @click="showData('刷卡器',10)" />
        </el-tooltip>
<!--        点击打开身份证-->
        <el-tooltip placement="top" popper-class="sth-popper" offset="-100">
            <div slot="content">
                <img v-lazy="lazyImg[25]" alt="" />
            </div>
            <img class="sth idCard-scanner cp" v-lazy="lazyImg[26]" @click="showData('身份证扫描仪',11)" alt="" />
        </el-tooltip>

        <!-- 物品栏 -->
        <div ref="goods" class="goods-dia" :class="{ active: showGoods }">
            <!-- goodsShelfTotalData goods2 -->
            <div :id="item.name" v-for="(item) in goodsShelfTotalData" :key="item.id" class=" justify-center" :class="{ checked: checkList.includes(item.id),file:true }" @click="goodsDblClickFn(item)">
                <img :style="item.name==='开户申请书'?'margin-top:10px;':''" :src="item.src" alt="" />
                <p>{{item.name}}</p>
            </div>
        </div>
        <div class="goods" :class="{ active: showGoods }" @click="toggleGoods">
            <span>物品栏</span>
            <img class="icon" v-lazy="lazyImg[27]" alt="" />
        </div>

        <!-- 硬件交互--弹框 -->
        <div v-show="showPop" width="900px" class="data-dia">
            <div class="dia-header">
                <div class="data-title">{{ popText }}</div>
                <img class="close" v-lazy="lazyImg[28]" alt="" @click="closePop" />
            </div>
            <p v-if="popText=='密码器'" class="tips"></p>
            <p v-else-if="popText=='重要空白凭证箱'||popText=='普通凭证箱'" class="tips">- 请从以下物品中选取所需材料 -</p>
            <p v-else class="tips">- 请从物品栏选中或拖拽所需材料 -</p>
            <div v-if="popText==='密码器'" style="width:800px;padding-right:150px;padding-top:80px">
                <el-form :model="passwordForm" :rules="passwordRules" ref="form" label-width="180px">
                    <el-form-item label="密码" prop="password">
                        <el-input v-focus show-password v-model="passwordForm.password" maxlength="6" onkeyup="{this.value=this.value.replace(/\D/g,'')}" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="passwordAgain">
                        <el-input show-password v-model="passwordForm.passwordAgain"  maxlength="6" onkeyup="this.value=this.value.replace(/\D/g,'')" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
            </div>

            <div v-else-if="popText==='印章盒'" class="seal" style="width:970px;">
                <div class="left">
                    <!-- dblClickFn(item) -->
                    <div v-for="(item, index) in sealArr" :key="item.id" :class="{ checked: sealChecked.includes(item.id),file:true }" @click="checkSeal(item.id)">
                        <img :src="item.src" alt="" />
                        <p>{{item.name}}</p>
                    </div>
                </div>
                <div class="box right" ref="popUpSeal">
                    <!-- receptionList -->
                    <div class="img-wrap2" :class="{ checked: commonChecked.includes(item.id) }" v-for="(item, index) in goodState" @click='dislodgeItem(index)' :key="item.id" >
                        <img :src="item.src" class="fileSeal"  alt="" />
                        <p class="text">{{item.name}}</p>
                    </div>
<!--                    <div v-for="(item, index) in goods" :key="index" :class="{ checked: checkList.includes(item.id),file:true }" @click="dblClickFn(item)">-->
<!--                        <img :src="item.src" alt="" />-->
<!--                        <p>{{item.name}}</p>-->
<!--                    </div>-->
                </div>
            </div>

            <div v-else-if="popText==='重要空白凭证箱'" class="seal" style="width:1200px;">
                <div class="left else">
                    <div v-for="(item) in importanceArr" :key="item.id" :class="{ checked: importantChecked.includes(item.id),file:true, importanceArrClass: true }" @click="dblClickFn(item)">
                        <img :src="item.src" alt="" />
                        <p>{{item.name}}</p>
                    </div>
                </div>
            </div>
            <div v-else-if="popText==='普通凭证箱'" class="seal" style="width:1200px;">
                <div class="left else">
                    <div v-for="(item) in commonArr" :key="item.id" :class="{ checked: commonChecked.includes(item.id),file:true }" @click="dblClickFn(item)">
                        <img :src="item.src" alt="" />
                        <p>{{item.name}}</p>
                    </div>
                </div>
            </div>
            <div v-else-if="popText==='身份证扫描仪'" class="list" ref="popUp">
                <div class="img-wrap" :class="{ checked: commonChecked.includes(item.id),'img-wrap':true }" v-for="(item, index) in  receptionList" :key="item.id" @click='dislodgeItem(index)'>
                    <img :src="item.src" class="file"  alt="" />
                    <p class="text">{{item.name}}</p>
                </div>
            </div>
            <div v-else-if="popText==='身份证扫描器'" class="list" ref="popUp">
                <div class="img-wrap" v-for="(item, index) in  receptionList" :class="{ checked: commonChecked.includes(item.id),'img-wrap':true }" :key="item.id" @click='dislodgeItem(index)'>
                    <img :src="item.src" class="file"  alt="" />
                    <p class="text">{{item.name}}</p>
                </div>
            </div>
            <div v-else-if="popText==='刷卡器'" class="list" ref="popUp">
                <div class="img-wrap" v-for="(item, index) in  receptionList" :class="{ checked: commonChecked.includes(item.id),'img-wrap':true }" @click='dislodgeItem(index)' :key="item.id">
                    <img :src="item.src" class="file"  alt="" />
                    <p class="text">{{item.name}}</p>
                </div>
            </div>
            <!-- 暂时未确定是否公共使用一个弹框  receptionList-->
            <div v-else class="list" ref="popUp"><!-- 钱箱 / 传票栏 ... 一系列可存物品弹框  -->
                <div class="img-wrap" v-for="(item, index) in  goodState" @click='dislodgeItem(index)' :class="{ checked: commonChecked.includes(item.id),'img-wrap':true }" :key="item.id">
                    <img :src="item.src" class="file"  alt="" />
                    <p class="text">{{item.name }}</p>
                </div>
            </div>
            <div class="dia-footer">
                <button v-throttle @click="popSure" type="button">确定</button>
            </div>
        </div>

        <!-- 蒙版 -->
        <div v-show="showPop" class="masking"></div>

        <!-- 商业银行系统的全屏功能实现 -->
        <div :class="full ? 'fullScreenSystem' : 'system'" v-if="manageVisible">
            <router-view></router-view>
        </div>
        <el-dialog
            custom-class="data-dia"
            :visible.sync="showImg"
            width="634px"
            >
            <img :src="imgSrc" class="imgPop" alt="">
<!--            <div :style="{'background':'url('+imgSrc+')','height':'500px','background-repeat': 'no-repeat',-->
<!--            'background-size': '100% 100%'}" class="imgPop">-->
<!--            </div>-->
<!-- 银行卡 -->
<div v-if="magnifyData.id == 16" style="position: absolute;top:0;width: 634px">
                <div style='position: relative;top: 220px;left: 70px;width:250px;font-size: 24px;color: #fff'>
                    {{magnifyData.cardNub}}
                </div>
            </div>
            <!-- 身份证 -->
            <div v-if="magnifyData.id == 13" style="position: absolute;top:0;width: 634px">
                <div style='position: relative;top: 73px;left: 80px;width:220px'>
                    {{magnifyData.userName}}
                </div>
                <div style='position: relative;top: 96px;left: 80px;width:220px'>
                    {{magnifyData.sex}}
                    <span style='position: relative;top:0px;left: 95px'> {{magnifyData.nation}}</span>
                </div>
                <div style='position: relative;top: 120px;left: 80px;width:220px'>
                   <span> {{magnifyData.dateBirthYear}}</span>
                    <span style='position: relative;top:0px;left: 60px'> {{magnifyData.dateBirthMonth}}</span>
                    <span style='position: relative;top:0px;left: 100px'> {{magnifyData.dateBirthDay}}</span>
                </div>
                <div style='position: relative;top: 145px;left: 80px;width:230px'>
                    {{magnifyData.address}}
                </div>
                <div style='position: relative;top: 215px;left: 160px;width:220px'>
                    {{magnifyData.idCardNo}}
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
import Sortable from 'sortablejs'
import manage from '../../manage/index';
import { addOperation, getOperation } from '@/api/http';
import backButton from '@/components/backButton'
import { myConfig } from './myConfig.js'

export default {
    name: 'index',
    components: {
        manage: manage,
        backButton
    },
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.passwordForm.password&&/^[0-9]*$/.test(this.passwordForm.password)&&this.passwordForm.password.length===6) {
                    // this.$refs.passwordForm.validateField('password');
                    callback();
                }else{
                    callback(new Error('请注意密码格式以及密码长度'))
                }
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value.length < 6) {
                callback(new Error('两次输入密码不一致!'));
            } else  if(value  !== this.passwordForm.password){
                callback(new Error('两次输入密码不一致!'));
            }else{
                callback();
            }
        };
        return {
            // cultureIn: [], // 传票栏
            // peopleSign: [],
            // moneyBox: [],
            showBusiness: false,
            manageVisible: false, // 显示系统录入
            checkList: [],// 物品栏选中
            boxStart: [], // 起始箱子物品
            boxStart2: [], // 起始物品栏
            elseBoxCheck:[],/* 所有其他可从物品栏拖拽物品进入的弹框 */
          //身份证扫描仪//审核资料//验钞机//选择重要空白凭证
          // 拿业务的东西替换掉
            magnifyData:{},
          auditGoodsShelf:[
              {name:'身份证', src:require('@/assets/img/goods/idcard.png'), id:13,
                  userName:'啧啧啧',
                  sex:'男',
                  nation:'汉',
                  dateBirthYear:'1994',
                  dateBirthMonth:'4',
                  dateBirthDay:'1',
                  address:'奥斯卡巅峰计划拉水电费啥地方',
                  idCardNo:'465852346854168479'},
              {name:'开户申请书', src:require('@/assets/img/goods/khsqs.png'), id:14},
              {name:'现金', src:require('@/assets/img/goods/cash-sm.png'), id:15},
              {name:'身份证复印件', src:require('@/assets/img/idCard-copy-sm.png'), id:23},
          ],
          //系统录入 //选择普通空白凭证
          systemInputGoodsShelf:[
              {name:'身份证', src:require('@/assets/img/goods/idcard.png'), id:13,
                  userName:'啧啧啧',
                  sex:'男',
                  nation:'汉',
                  dateBirthYear:'1994',
                  dateBirthMonth:'4',
                  dateBirthDay:'1',
                  address:'奥斯卡巅峰计划拉水电费啥地方',
                  idCardNo:'465852346854168479'},
              {name:'开户申请书', src:require('@/assets/img/goods/khsqs.png'), id:14},
              {name:'现金', src:require('@/assets/img/goods/cash-sm.png'), id:15},
              {name:'银行卡', src:require('@/assets/img/goods/bankCard.png'), id:16,cardNub:'1865 3549 5675 5589'},
              {name:'身份证复印件', src:require('@/assets/img/idCard-copy-sm.png'), id:23},
          ],
          //打印资料 //客户签字 //印章盒
          printoutGoodsShelf:[
              {name:'身份证', src:require('@/assets/img/goods/idcard.png'), id:13,
                  userName:'啧啧啧',
                  sex:'男',
                  nation:'汉',
                  dateBirthYear:'1994',
                  dateBirthMonth:'4',
                  dateBirthDay:'1',
                  address:'奥斯卡巅峰计划拉水电费啥地方',
                  idCardNo:'465852346854168479'},
              {name:'开户申请书', src:require('@/assets/img/goods/khsqs.png'), id:14},
              {name:'现金', src:require('@/assets/img/goods/cash-sm.png'), id:15},
              {name:'银行卡', src:require('@/assets/img/goods/bankCard.png'), id:16,cardNub:'1865 3549 5675 5589'},
              {name:'存款凭条', src:require('@/assets/img/goods/ckpt.png'), id:17},
              {name:'身份证复印件', src:require('@/assets/img/idCard-copy-sm.png'), id:23},
          ],
            //钱箱
            cashboxGoodsShelf:[
                {name:'身份证', src:require('@/assets/img/goods/idcard.png'), id:13,
                    userName:'啧啧啧',
                    nation:'男',
                    dateBirth:'汉',
                    address:'奥斯卡巅峰计划拉水电费啥地方',
                    idCardNo:'465852346854168479'},
                {name:'现金', src:require('@/assets/img/goods/cash-sm.png'), id:15},
                {name:'身份证复印件', src:require('@/assets/img/idCard-copy-sm.png'), id:23},
            ],
          // 总盒子里面的东西 写在computed了 业务物品
        //   goodsShelfTotalData:[
        //       {name:'身份证', src:require('@/assets/img/goods/idcard.png'), id:13,
        //           userName:'啧啧啧',
        //           sex:'男',
        //           nation:'汉',
        //           dateBirthYear:'1994',
        //           dateBirthMonth:'4',
        //           dateBirthDay:'1',
        //           address:'深圳市宝安区新安街道华联全景G1栋403',
        //           idCardNo:'4 4 1 4 2 2 1 9 9 8 0 8 1 6 8 4 7 9 '},
        //       {name:'开户申请书', src:require('@/assets/img/goods/khsqs.png'), id:14},
        //       {name:'现金', src:require('@/assets/img/goods/cash-sm.png'), id:15},
        //       {name:'身份证复印件', src:require('@/assets/img/idCard-copy-sm.png'), id:23},
        //   ],
            // goods:[/* 物品栏物品 */
            // ],
            popArr:[/* 弹窗展示的物品 */
                {name:'银行卡',src:require('@/assets/img/goods/bankCard.png'),id:16,cardNub:'1865 3549 5675 5589'},
                {name:'定期存单',src:require('@/assets/img/seal/paid.png'),id:19},
                {name:'预留印鉴卡',src:require('@/assets/img/seal/paid.png'),id:439},
                {name:'转账支票',src:require('@/assets/img/goods/xd-zzzp.png'),id:412},
                {name:'银行承兑汇票',src:require('@/assets/img/seal/paid.png'),id:30},
                {name:'现金支票',src:require('@/assets/img/goods/xjzp.png'),id:411},
                {name:'取款凭条',src:require('@/assets/img/goods/qkpt.png'),id:425},
                {name:'转账凭条',src:require('@/assets/img/goods/zzpt.png'),id:426},
                {name:'业务收费凭证',src:require('@/assets/img/goods/ywsfpz.png'),id:479},
                {name:'利息清单',src:require('@/assets/img/goods/lxqd.png'),id:427},
                {name:'普通空白凭证',src:require('@/assets/img/goods/ptkbpz.png'),id:438},
                {name:'身份证',src:require('@/assets/img/goods/idcard.png'),id:13,
                    userName:'啧啧啧',
                    sex:'男',
                    nation:'汉',
                    dateBirthYear:'1994',
                    dateBirthMonth:'4',
                    dateBirthDay:'1',
                    address:'奥斯卡巅峰计划拉水电费啥地方',
                    idCardNo:'465852346854168479'},
                {name:'身份证复印件',src:require('@/assets/img/idCard-copy-sm.png'),id:23},
                {name:'开户申请书',src:require('@/assets/img/goods/khsqs.png'),id:14},
                {name:'现金',src:require('@/assets/img/goods/cash-sm.png'),id:15},
                {name:'存款凭条',src:require('@/assets/img/goods/ckpt.png'),id:17},
                // 以下是我自己加的 本来没有，业务需要
                {name:'开户申请书凭证联',src:require('@/assets/img/goods/khsqs.png'),id:24},
                {name:'开户申请书回单',src:require('@/assets/img/goods/khsqs.png'),id:21},
                {name:'存款凭条凭证联',src:require('@/assets/img/goods/ckpt.png'),id:269},
                {name:'存款凭条回单',src:require('@/assets/img/goods/ckpt.png'),id:22},
                {name:'取款凭条凭证联',src:require('@/assets/img/goods/qkpt.png'),id:420},
                {name:'取款凭条回单',src:require('@/assets/img/goods/qkpt.png'),id:421},
                {name:'转账凭条凭证联',src:require('@/assets/img/goods/zzpt.png'),id:419},
                {name:'转账凭条回单',src:require('@/assets/img/goods/zzpt.png'),id:418},
                {name:'利息清单凭证联',src:require('@/assets/img/goods/lxqd.png'),id:422},
                {name:'利息清单回单',src:require('@/assets/img/goods/lxqd.png'),id:424},
                {name:'旧定期存单',src:require('@/assets/img/seal/paid.png'),id:430},
                {name:'新定期存单',src:require('@/assets/img/seal/paid.png'),id:429},
                {name:'新定期存单凭证联',src:require('@/assets/img/seal/paid.png'),id:485},
                {name:'新定期存单回单',src:require('@/assets/img/seal/paid.png'),id:486},
                {name:'法人身份证',src:require('@/assets/img/goods/idcard.png'),id:442},
                {name:'法人身份证复印件',src:require('@/assets/img/idCard-copy-sm.png'),id:431},
                {name:'开立银行结算账户申请书',src:require('@/assets/img/goods/ApplicationBankSettlement.png'),id:432},
                {name:'统一社会信用代码证',src:require('@/assets/img/goods/营业执照.png'),id:434},
                {name:'统一社会信用代码证复印件',src:require('@/assets/img/goods/营业执照复印件.png'),id:435},
                {name:'开户许可证',src:require('@/assets/img/goods/开户许可证.png'),id:436},
                {name:'开户许可证复印件',src:require('@/assets/img/goods/开户许可证复印件.png'),id:437},
                {name:'开立银行结算账户申请书凭证联',src:require('@/assets/img/goods/ApplicationBankSettlement.png'),id:432},
                {name:'开立银行结算账户申请书回单',src:require('@/assets/img/goods/ApplicationBankSettlement.png'),id:433},
                {name:'现金存款凭证',src:require('@/assets/img/goods/CashCertificate.png'),id:409},
                {name:'现金存款凭证联',src:require('@/assets/img/goods/CashCertificate.png'),id:487},
                {name:'现金存款凭证回单',src:require('@/assets/img/goods/CashCertificate.png'),id:441},
                {name:'现金支票本联',src:require('@/assets/img/goods/xjzp.png'),id:473},
                {name:'现金支票存根',src:require('@/assets/img/goods/xjzp.png'),id:472},
                {name:'转账支票本联',src:require('@/assets/img/goods/sy-zzzp.png'),id:476},
                {name:'转账支票存根',src:require('@/assets/img/goods/sy-zzzp.png'),id:474},
                {name:'特殊业务申请书',src:require('@/assets/img/goods/businessSpecialApplication.png'),id:407},
                {name:'特殊业务申请书凭证联',src:require('@/assets/img/goods/businessSpecialApplication.png'),id:478},
                {name:'特殊业务申请书回单',src:require('@/assets/img/goods/businessSpecialApplication.png'),id:477},
                {name:'密码挂失申请书',src:require('@/assets/img/goods/businessReportMissUser.png'),id:406},
                {name:'密码挂失申请书凭证联',src:require('@/assets/img/goods/businessReportMissUser.png'),id:466},
                {name:'密码挂失申请书回单',src:require('@/assets/img/goods/businessReportMissUser.png'),id:468},
                {name:'密码挂失申请书银行留存联',src:require('@/assets/img/goods/businessReportMissUser.png'),id:467},
                {name:'支票领购单',src:require('@/assets/img/goods/businessReportMissUser.png'),id:413},
                {name:'支票领购单回单',src:require('@/assets/img/goods/businessReportMissUser.png'),id:480},
                {name:'支票领购单凭证联',src:require('@/assets/img/goods/businessReportMissUser.png'),id:488},
                {name:'业务收费凭证回单',src:require('@/assets/img/goods/ywsfpz.png'),id:481},
                {name:'业务收费凭证凭证联',src:require('@/assets/img/goods/ywsfpz.png'),id:482},
            ],
            receptionList:[

            ],
            sealArr:[/* 印章盒物品 */ // 不要改动id和name! 要出问题的
                {name:'收讫章',src:require('@/assets/img/seal/paid.png'),id:'收讫章'},
                {name:'销户章',src:require('@/assets/img/seal/closing.png'),id:'销户章'},
                {name:'私章',src:require('@/assets/img/seal/personal.png'),id:'私章'},
                {name:'附件章',src:require('@/assets/img/seal/accessory.png'),id:'附件章'},
                {name:'付讫章',src:require('@/assets/img/seal/paid.png'),id:'付讫章'},
                {name:'业务专用章',src:require('@/assets/img/seal/business.png'),id:'业务专用章'},
                {name:'转讫章',src:require('@/assets/img/seal/Transfer.png'),id:'转讫章'},
            ],
            importanceArr:[/* 重要空白凭证 */
                {name:'银行卡',src:require('@/assets/img/goods/bankCard.png'),id:16,cardNub:'1865 3549 5675 5589'},
                {name:'定期存单',src:require('@/assets/img/seal/paid.png'),id:19},
                {name:'预留印鉴卡',src:require('@/assets/img/seal/paid.png'),id:439},
                {name:'转账支票',src:require('@/assets/img/goods/xd-zzzp.png'),id:412},
                {name:'银行承兑汇票',src:require('@/assets/img/seal/paid.png'),id:30},
                {name:'现金支票',src:require('@/assets/img/goods/xjzp.png'),id:411},
                {name:'新定期存单',src:require('@/assets/img/seal/paid.png'),id:192},
            ],
            commonArr:[/* 普通凭证箱 */
                {name:'存款凭条',src:require('@/assets/img/goods/ckpt.png'),id:17},
                {name:'取款凭条',src:require('@/assets/img/goods/qkpt.png'),id:425},
                {name:'转账凭条',src:require('@/assets/img/goods/zzpt.png'),id:426},
                {name:'业务收费凭证',src:require('@/assets/img/goods/ywsfpz.png'),id:479},
                {name:'利息清单',src:require('@/assets/img/goods/lxqd.png'),id:427},
                {name:'普通空白凭证',src:require('@/assets/img/goods/ptkbpz.png'),id:438},
            ],
            sealChecked:[],/* 印章盒选中 */
            importantChecked:[],// 重要凭证选中
            commonChecked:[],// 普通凭证选中
            passwordForm:{
                password:'',
                passwordAgain: ''
            },
            passwordRules:{
                password:[
                    {  validator: validatePass, trigger: 'blur' },
                ],
                passwordAgain:[
                    { validator: validatePass2, trigger: 'blur' },
                ]
            },
            clickNum:0,
            clickNum2:0,
            showImg:false,
            imgSrc:'',
            nbm:0,
            lazyImg: [
                require('@/assets/img/man.png'),
                require('@/assets/img/counter.png'),
                require('@/assets/img/glass.png'),
                require('@/assets/img/tooltip/system.png'),
                require('@/assets/img/computer.png'),
                require('@/assets/img/tooltip/cpl.png'),
                require('@/assets/img/summons.png'),
                require('@/assets/img/tooltip/ptpzx.png'),
                require('@/assets/img/voucher-box.png'),
                require('@/assets/img/tooltip/zk.png'),
                require('@/assets/img/important.png'),
                require('@/assets/img/tooltip/qx.png'),
                require('@/assets/img/money-box.png'),
                require('@/assets/img/tooltip/yzh.png'),
                require('@/assets/img/seal-box.png'),
                require('@/assets/img/tooltip/ycj.png'),
                require('@/assets/img/currency-detector.png'),
                require('@/assets/img/tooltip/dyj.png'),
                require('@/assets/img/printer.png'),
                require('@/assets/img/tooltip/mmq.png'),
                require('@/assets/img/cipher-machine.png'),
                require('@/assets/img/employee.png'),
                require('@/assets/img/tooltip/data.png'),
                require('@/assets/img/tooltip/skj.png'),
                require('@/assets/img/card-machine.png'),
                require('@/assets/img/tooltip/sfz.png'),
                require('@/assets/img/idCard-scanner.png'),
                require('@/assets/svg/arrow-right.svg'),
                require('@/assets/svg/close.svg'),
                require('@/assets/img/selectBusiness.png')
            ]
        };
    },
    computed: {
        businessKey() {
            return this.$store.state.system.businessKey
        },
        full: function () {// 全屏
            return this.$store.state.system.fullScreen;
        },
        showPop:function(){/* 展示弹框 */
            this.receptionList = []
            if(this.$store.state.system.popText == '刷卡器'){
                if (this.$store.state.system.id == '62,1'){
                    this.nbm = 62
                    let param= {
                        parentId: this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,5,26,57,62,75'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let accountVoucher = sessionStorage.getItem('accountVoucher')
                            this.receptionList = JSON.parse(accountVoucher);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (this.$store.state.system.id == '63'){
                    this.nbm = 63
                    let param= {
                        parentId: this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,5,26,57,63,78'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let nomBusinessDepositCard = sessionStorage.getItem('nomBusinessDepositCard')
                            this.receptionList = JSON.parse(nomBusinessDepositCard);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (this.$store.state.system.id == '64'){
                    this.nbm = 64
                    let param= {
                        parentId: this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,5,26,57,64,85'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let nomCurrentWithdrawalCard = sessionStorage.getItem('nomCurrentWithdrawalCard')
                            this.receptionList = JSON.parse(nomCurrentWithdrawalCard);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (this.$store.state.system.id == '65'){
                    this.nbm = 65
                    let param= {
                        parentId: this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,5,26,57,65,94'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let nomCurrentTransferCard = sessionStorage.getItem('nomCurrentTransferCard')
                            this.receptionList = JSON.parse(nomCurrentTransferCard);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (this.$store.state.system.id == '66'){
                    this.nbm = 66
                    let param= {
                        parentId: this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,5,26,57,66,103'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let nomCurrentSettleCard = sessionStorage.getItem('nomCurrentSettleCard')
                            this.receptionList = JSON.parse(nomCurrentSettleCard);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (this.$store.state.system.id == '67,1'){
                    this.nbm = 67
                    let param= {
                        parentId: this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,5,26,57,67,113'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let nomCurrentCancellCard1 = sessionStorage.getItem('nomCurrentCancellCard1')
                            this.receptionList = JSON.parse(nomCurrentCancellCard1);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (myConfig[this.$store.state.system.id]){
                    let  { nbm, parentId, name } = myConfig[this.$store.state.system.id]
                    parentId = this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + parentId

                    this.nbm = nbm
                    let param= {
                        parentId
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            let tmpName = sessionStorage.getItem(name)
                            if(tmpName) {
                                this.receptionList = JSON.parse(tmpName);
                            }else {
                                var list = data.data.judgmentRuleReqs
                                for(var j=0;j<list.length;j++){
                                    for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                        if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                            this.receptionList.push(this.goodsShelfTotalData[i])
                                        }
                                    }
                                }
                            }
                            
                        }else{
                            let tmpName = sessionStorage.getItem(name)
                            this.receptionList = JSON.parse(tmpName);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else{
                    let dataList = JSON.parse(sessionStorage.getItem('dataList'));
                    if (dataList){
                        this.receptionList = []
                        for(var j=0;j<dataList.length;j++){
                            for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                if(dataList[j].answerId == this.goodsShelfTotalData[i].id){
                                    this.receptionList.push(this.goodsShelfTotalData[i])
                                }
                            }
                        }
                    }
                }
            }
            else if(this.$store.state.system.popText == '密码器'){
                if(this.$store.state.system.id == '62,1'){
                    let accountPassword = sessionStorage.getItem('accountPassword');
                    if(accountPassword){
                        this.passwordForm.password = accountPassword
                        this.passwordForm.passwordAgain = accountPassword
                    }
                }else if(this.$store.state.system.id == '64,2'){
                    let nomCurrentWithdrawalPassword = sessionStorage.getItem('nomCurrentWithdrawalPassword');
                    if(nomCurrentWithdrawalPassword){
                        this.passwordForm.password = nomCurrentWithdrawalPassword
                        this.passwordForm.passwordAgain = nomCurrentWithdrawalPassword
                    }
                }else if(this.$store.state.system.id == '65'){
                    let nomCurrentTransferPassword = sessionStorage.getItem('nomCurrentTransferPassword');
                    if(nomCurrentTransferPassword){
                        this.passwordForm.password = nomCurrentTransferPassword
                        this.passwordForm.passwordAgain = nomCurrentTransferPassword
                    }
                }else if(this.$store.state.system.id == '66,2'){
                    let nomCurrentSettlePassword = sessionStorage.getItem('nomCurrentSettlePassword');
                    if(nomCurrentSettlePassword){
                        this.passwordForm.password = nomCurrentSettlePassword
                        this.passwordForm.passwordAgain = nomCurrentSettlePassword
                    }
                }else if(myConfig[this.$store.state.system.id]){
                    const { name } = myConfig[this.$store.state.system.id]
                    let nomCurrentSettlePassword = sessionStorage.getItem(name);
                    if(nomCurrentSettlePassword){
                        this.passwordForm.password = nomCurrentSettlePassword
                        this.passwordForm.passwordAgain = nomCurrentSettlePassword
                    }
                }else{

                    let accountPasswordAll = sessionStorage.getItem('accountPasswordAll');
                    if(accountPasswordAll){
                        this.passwordForm.password = accountPasswordAll
                        this.passwordForm.passwordAgain = accountPasswordAll
                    }
                }
            }
            else if(this.$store.state.system.popText == '身份证扫描仪' || this.$store.state.system.popText.includes('身份证扫描') || this.$store.state.system.popText.includes('银行')){
                
                if (this.$store.state.system.id == '33'){
                    
                    this.nbm = 33
                    let param= {
                        parentId: this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,5,25,33,41'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let nomClientIdentity = sessionStorage.getItem('nomClientIdentity')
                            this.receptionList = JSON.parse(nomClientIdentity);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (this.$store.state.system.id == '34'){
                    this.nbm = 34
                    let param= {
                        parentId: this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,5,25,34,54'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let firmClientIdentity = sessionStorage.getItem('firmClientIdentity')
                            this.receptionList = JSON.parse(firmClientIdentity);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (this.$store.state.system.id == '67,2'){
                    this.nbm = 67
                    let param= {
                        parentId: this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,5,26,57,67,116'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let nomCurrentCancellCard2 = sessionStorage.getItem('nomCurrentCancellCard2')

                            this.receptionList = JSON.parse(nomCurrentCancellCard2);
                            
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (myConfig[this.$store.state.system.id]){
                    let { nbm, parentId, name } = myConfig[this.$store.state.system.id]
                    parentId = this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + parentId
                    this.nbm = nbm
                    let param= {
                        parentId
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            let tmpName = sessionStorage.getItem(name)
                            if(tmpName) {
                                this.receptionList = JSON.parse(tmpName);
                            }else {
                                var list = data.data.judgmentRuleReqs
                                for(var j=0;j<list.length;j++){
                                    for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                        if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                            this.receptionList.push(this.goodsShelfTotalData[i])
                                        }
                                    }
                                }
                            }
                            
                        }else{
                            let tmpName = sessionStorage.getItem(name)
                            this.receptionList = JSON.parse(tmpName);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                    // const { nbm, name } = myConfig[this.$store.state.system.id]
                    // this.nbm = nbm
                    // let tmpName = sessionStorage.getItem(name)
                    // this.receptionList = JSON.parse(tmpName);
                    
                    // if(this.receptionList == null){
                    //     this.receptionList = []
                    // }
                }else{
                    let dataList = JSON.parse(sessionStorage.getItem('dataList'));
                    if (dataList){
                        this.receptionList = []
                        for(var j=0;j<dataList.length;j++){
                            for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                if(dataList[j].answerId == this.goodsShelfTotalData[i].id){
                                    this.receptionList.push(this.goodsShelfTotalData[i])
                                }
                            }
                        }
                    }
                }
            }
            if(!this.showGoods) this.checkList = []
            return this.$store.state.system.showPop;
        },
        popText:function(){/* 文字 */
            return this.$store.state.system.popText;
        },
        id:function(){/* 文字 */
            return this.$store.state.system.id;
        },
        showGoods:function() {
            return this.$store.state.system.showGoods
        },
        myMap() { // 用做对照表 相应的popText对应相应的数组名字
            if(this.popText === '钱箱') {
                return 'moneyBox'
            }else if(this.popText === '客户签字'){
                return 'peopleSign'
            }else if(this.popText == '传票栏') {
                return 'cultureIn'
            }else if(this.popText == '印章盒') {
                return 'sealBox'
            }else if(this.popText == '验钞机') {
                return 'currencyDetector'
            }else if(this.popText == '打印机') {
                return 'printer'
            }else if(this.popText == '资料') {
                return 'resource'
            }else {
                return ''
            }
        },
        ...mapGetters({
            goodsShelfTotalData: 'system/goods2',
            cultureIn: 'system/cultureIn', // 传票栏
            peopleSign: 'system/peopleSign',
            goodState: 'system/goodState',
        })
    },
    watch: {
        '$route.path': function (val) {
            // 控制弹框显隐
            let arr = val.split('/').slice(-2);
            if (arr.pop() === 'manage' || arr[0] === 'manage') {
                this.manageVisible = true;
            } else {
                this.manageVisible = false;
            }
        },
        manageVisible(newVal) {
            if(newVal === false) {
                this.changeShowGoods(false)
            }
        },
        showPop(newVal) {
            if(newVal) {
                if(this.popText === '重要空白凭证箱') {
                    this.$nextTick(() => {
                        const importanceArrClassArr = document.getElementsByClassName('importanceArrClass')
                        for(let i=0;i<this.importanceArr.length;i++) {
                            new Sortable(importanceArrClassArr[i], {
                                animation: 150,
                                group: {
                                    name:'shared',
                                    pull:'clone',// 是否可以被移出或克隆
                                    put:false// 禁止拖入
                                },
                                sort: false,// 禁止排序
                                onEnd: evt => { // 结束拖拽
                                    if(this.judgePosition(evt)){
                                        const getIt = evt.target.textContent
                                        for(var i=0;i<this.goods.length;i++){
                                            if (this.goods[i].name == getIt){
                                                return this.$message.warning('物品栏中已有该物品')
                                            }
                                        }
                                        for(let i=0;i<this.popArr.length; i++) {
                                            if(this.popArr[i].name === getIt) {
                                                this.$store.commit('system/changeGoods',{push:[this.popArr[i]]})
                                                return 
                                            }
                                        }
                                    }else{
                                        this.$message.warning('非可拖拽的交互！') 
                                    }
                                }
                            })
                        };
                    })
                }else if(this.myMap) {
                    this.boxStart = this.goodState.map(item => item.id)
                    this.boxStart2 = this.goodsShelfTotalData.map(item => item.id)
                }
            }else {
                this.commonChecked = []
                this.sealChecked = []
                this.importantChecked = []
                // 去掉临时存储的证件
                this.boxStart = []
                this.boxStart2 = []
                
            }
        },
        id(newVal) {
            console.log('新的id值')
            console.log(newVal)
        }
    },
    created() {
        let arr = this.$route.path.split('/').slice(-2);
        if (arr.pop() === 'manage' || arr[0] === 'manage') {
            this.manageVisible = true;
        } else {
            this.manageVisible = false;
        }

        //在页面加载时读取localStorage里的状态信息
        if(sessionStorage.getItem('businessKey')) {
            this.$store.commit('system/setBusinessKey', sessionStorage.getItem('businessKey'))
        }
        if(sessionStorage.getItem('businessSelect')) {
            // 调试时注释掉
            // this.$store.commit('system/setBusinessSelect', JSON.parse(sessionStorage.getItem('businessSelect')))
        }
        window.addEventListener("beforeunload",()=>{    
            sessionStorage.setItem('businessKey', this.$store.state.system.businessKey)
            // sessionStorage.setItem('businessSelect', JSON.stringify(this.$store.state.system.businessSelect))
        }) 
    },
    mounted(){
        let that = this
        // 拖拽-物品栏
        new Sortable(this.$refs.goods, {
            animation: 150,
            group: {
                name:'shared',
                pull:'clone',// 是否可以被移出或克隆
                put:false// 禁止拖入
            },
            sort: false,// 禁止排序
            onEnd: function (/**Event*/evt) { // 结束拖拽
                // 判断拖拽的地址 popUp和popUpSeal都是可以被拖拽上去的
                if(!that.$refs.popUp && !that.$refs.popUpSeal) return that.$message.warning('非可拖拽的交互！') 
                let targetDom
                if(that.$refs.popUp) {
                    targetDom = that.$refs.popUp.getBoundingClientRect()
                }else if(that.$refs.popUpSeal)  {
                    targetDom = that.$refs.popUpSeal.getBoundingClientRect()
                }
                if(evt.originalEvent.pageX<targetDom.right&&evt.originalEvent.pageX>targetDom.left){
                    if(evt.originalEvent.pageY<targetDom.bottom&&evt.originalEvent.pageY>targetDom.top){
                        /* oldindex识别是拖拽了哪个文件 */
                        // console.log(that.goodsShelfTotalData[evt.oldIndex].name,'执行拖拽2');
                        // that.clickList.push(that.goodsShelfTotalData[evt.oldIndex].name)

                        if(that.$refs.popUp) {
                            if(that.myMap) {
                                const id = that.goodsShelfTotalData[evt.oldIndex].id
                                
                                that.outThingsGoods([id])
                                that.pushThings({ idArr: [id], name: that.myMap})
                            }else{
                                for(var i=0;i<that.popArr.length;i++){
                                    if (that.goodsShelfTotalData[evt.oldIndex].name == that.popArr[i].name){
                                        if (that.receptionList == null){
                                            that.receptionList = []
                                        }
                                        if (that.receptionList.length){
                                            for(var j=0;j< that.receptionList.length;j++){
                                                if (that.receptionList[j].name == that.goodsShelfTotalData[evt.oldIndex].name){
                                                    return;
                                                }
                                            }
                                            that.receptionList.push(that.popArr[i])
                                        }else{
                                            that.receptionList.push(that.popArr[i])
                                        }
                                    }
                                }
                            }
                        }
                        
                        // 印章的拖拽
                        else if(that.$refs.popUpSeal) {
                            that.outThingsGoods([that.goodsShelfTotalData[evt.oldIndex].id])
                            that.pushThings({ idArr: [ that.goodsShelfTotalData[evt.oldIndex].id ], name: that.myMap})
                            
                        }
                        
                    }
                }
            },
        });
        // (item, index) in importanceArr" :ref="'importanceArr'+index
        // 拖拽-弹框
        new Sortable(this.$refs.popUp, {
            animation: 150,
            group: {
                name:'shared',
                pull:'clone',// 是否可以被移出或克隆
                put:false
            },
            sort: false,// 禁止排序
            // 结束拖拽
            onEnd: function (/**Event*/evt) {
                if(!that.$refs.goods) return that.$message.warning('非可拖拽的交互！')
                let targetDom = that.$refs.goods.getBoundingClientRect()
                if(evt.originalEvent.pageX<targetDom.right&&evt.originalEvent.pageX>targetDom.left){
                    if(evt.originalEvent.pageY<targetDom.bottom&&evt.originalEvent.pageY>targetDom.top){
                        /* oldindex识别是拖拽了哪个文件 */
                        that.checkList.push(that.importanceArr[evt.oldIndex].name)
                        if(that.goodsShelfTotalData.length > 0){
                            for(var i=0;i<that.goodsShelfTotalData.length;i++){
                                if(that.goodsShelfTotalData[i].name == that.importanceArr[evt.oldIndex].name){
                                    return
                                }
                            }
                            // that.goodsShelfTotalData.push(that.importanceArr[evt.oldIndex])
                            that.addGoods(that.importanceArr[evt.oldIndex]) 
                        }
                    }
                }
                // // console.log(refParamBox,'目标dom',refParamBox.getBoundingClientRect());
                // // 判断拖拽的地址
                // let targetDom = that.$refs.goods.getBoundingClientRect()
                // console.log(evt.oldIndex)
                // if(evt.originalEvent.pageX<targetDom.right&&evt.originalEvent.pageX>targetDom.left){
                //     if(evt.originalEvent.pageY<targetDom.bottom&&evt.originalEvent.pageY>targetDom.top){
                //         console.log(evt)
                //         // this.importanceArr[evt.oldIndex]
                //         // this.importanceArr
                //         alert('拉入到弹框')
                //     }
                // }
            },
        });

    },
    methods: {
        ...mapMutations({
            replaceThingsGoods: 'system/replaceThingsGoods',
            replaceThings: 'system/replaceThings',
            setShowBusiness: 'system/setShowBusiness',
            changeShowGoods: 'system/changeShowGoods',
            setGoodsOpen: 'system/setGoodsOpen',
            removeGoodsOpen: 'system/removeGoodsOpen',
            addGoodsOpen: 'system/addGoodsOpen',
            setBusinessKey: 'system/setBusinessKey',
            addGoods: 'system/addGoods',
            deleteGoods: 'system/deleteGoods',
            stampJudge: 'system/stampJudge',
            payMoney: 'system/payMoney',
            backPeople: 'system/backPeople',
            backCulture: 'system/backCulture',
            pushThings: 'system/pushThings',
            pushThingsGoods: 'system/pushThingsGoods',
            outThings: 'system/outThings',
            outThings2: 'system/outThings2',
            outThingsGoods: 'system/outThingsGoods',
        }),
        dislodgeItem(index){
            // 点一下飞回来
            if(this.myMap) {
                const tmpId = this.goodState[index].id

                this.outThings2({ name: this.myMap, index }) // 用下标解决bug
                this.pushThingsGoods([tmpId])
                
            }else {
                // 
                // const index = this.receptionList.findIndex(item => item.id === id)
                this.receptionList.splice(index,1);
            }
            // this.receptionList.splice(index,1);
        },
        toggleGoods() {
            this.changeShowGoods(!this.showGoods)
        },
        showData(type,nbm) {/* 展示弹窗-type为弹窗标题文字 */
          this.nbm = nbm
          // 业务的东西
          // this.goodsShelfTotalData = [...this.goods2]
            if(type == '普通凭证箱' || type == '系统'){
                // this.goodsShelfTotalData = this.systemInputGoodsShelf
                let parentId = ''
                if(type == '普通凭证箱'){
                    parentId = this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,3'
                }
                if(type == '系统'){
                    parentId = this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,5'
                }
            }else if(type == '身份证扫描仪' || type == '验钞机' || type == '资料' || type == '重要空白凭证箱' || type == '身份证扫描器'){
              // this.goodsShelfTotalData = this.auditGoodsShelf
                let parentId = ''
                if(type == '重要空白凭证箱'){
                    parentId = this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,2'
                }
                if(type == '资料'){
                    parentId = this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,11'
                }
                if(type == '验钞机'){
                    parentId = this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,9'
                }
                if(type == '身份证扫描仪'){
                    parentId = this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,7'
                }
                let param= {
                    parentId: parentId
                }
            }else if(type == '打印机' || type == '客户签字' ||  type == '印章盒'){
              // this.goodsShelfTotalData = this.printoutGoodsShelf
                let parentId = ''
                if(type == '打印机'){
                    parentId = this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,10'
                }
                if(type == '客户签字'){
                    parentId = this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,12'
                }
                if(type == '印章盒'){
                    parentId = this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,8'
                }
            }else if(type == '钱箱'){
                // this.goodsShelfTotalData = this.cashboxGoodsShelf;
                let param= {
                    parentId: this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,1'
                }
                getOperation(param).then((data)=> {
                    if (data.data.status == 200) {
                        var list = data.data.judgmentRuleReqs
                        for(var j=0;j<list.length;j++){
                            for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                    this.receptionList.push(this.goodsShelfTotalData[i])
                                }
                            }
                        }
                    }else{
                        this.receptionList = []
                    }
                }).catch((error)=>{
                })
            }
            this.changeShowGoods(true)
            if(type !== '系统') {
                this.$store.commit('system/changePop',{show:true,text:type, id: this.id})
            }
        },
        checkData(item) {/* 选中物品 */
            let _this = this
            _this.clickNum++;
            if (_this.clickNum === 2) {  
                _this.clickNum = 0;
                //  处理双击事件... 
                _this.showImg = true
                _this.imgSrc = item.src
            } 
            setTimeout(function () {
                if (_this.clickNum === 1) {
                    _this.clickNum = 0; 
                    //  处理单击事件... 
                    console.log('单击事件');
                    _this.checkList.includes(item.id) ? _this.checkList.splice(_this.checkList.indexOf(item.id), 1) : _this.checkList.push(item.id);
                }
            }, 200) 
        },
        dblClickFn(item,val){/* 选中/预览  单/双击函数 */
            let that = this
            this.clickNum++
            if (this.clickNum === 2) {  //  处理双击事件
                this.clickNum = 0;  
                this.showImg = true
                this.imgSrc = item.src
            }
            setTimeout(function () {
                let arr
                switch (that.popText) {
                    case '普通凭证箱': arr = that.commonChecked
                        break;
                    case '印章盒':arr = that.sealChecked
                        break;
                    case '重要空白凭证箱':arr = that.importantChecked
                        break;
                    default:
                        break;
                }
                if(val==='goods') arr = that.checkList
                if (that.clickNum === 1) {//  处理单击事件
                    that.clickNum = 0; 
                    if(that.popText==='印章盒'){
                        arr.splice(0,1,item.id)
                    }else if(val==='goods'&&that.popText==='印章盒'){
                        that.checkList.length=0
                        that.checkList.push(item.id)
                    }else{
                        // console.log(item.id)
                        arr.includes(item.id) ? arr.splice(arr.indexOf(item.id), 1) : arr.push(item.id);
                    }
                }
            }, 200)
        },
        goodsDblClickFn(item){/* 选中/预览  单/双击函数 */
            this.clickNum2++
            if (this.clickNum2 === 2) {  //  处理双击事件
                // 有些东西图片不放大
                const judge = item.name.includes('本联') || item.name.includes('凭证联') || item.name.includes('回单') || (item.name.includes('复印件') && !item.name.includes('身份证复印件'))
                if(!(judge)) {
                    this.clickNum2 = 0;  
                    this.showImg = true
                    console.log(item)
                    this.magnifyData = item
                    this.imgSrc = item.src
                }
            }
            setTimeout(() => {
                if(this.myMap) {
                    this.outThingsGoods([ item.id ])
                    this.pushThings({ idArr: [item.id], name: this.myMap})
                    
                }else {
                    const index = this.receptionList.findIndex(item2 => item2.id === item.id)
                    if(index === -1) {
                        this.receptionList.push(item)
                    }
                }
                this.clickNum2 = 0
            }, 200)
        },
        checkSeal(id) {/* 选中印章 */
            this.sealChecked.includes(id) ? this.sealChecked.splice(this.sealChecked.indexOf(id), 1) : this.sealChecked.push(id);
        },
        checkImportant(id){/* 选中重空凭证 */
            this.importantChecked.includes(id) ? this.importantChecked.splice(this.importantChecked.indexOf(id), 1) : this.importantChecked.push(id);
        },
        checkCommon(item){/* 选中普通凭证 */
            this.commonChecked.includes(id) ? this.commonChecked.splice(this.commonChecked.indexOf(id), 1) : this.commonChecked.push(id);
        },
        closePop() {// 关闭弹窗
            if(this.myMap) {
                if(this.myMap === 'sealBox') {
                    if(this.goodState.length) {
                        const { id } = this.goodState[0]
                        this.outThings({name: this.myMap, idArr: [ id ]})
                        this.pushThingsGoods( [ id ] )
                    }
                }else {
                    this.replaceThings({ name: this.myMap, idArr: [...this.boxStart] })
                    this.replaceThingsGoods( [...this.boxStart2] )
                }
            }

          this.receptionList = [];
          this.changeShowGoods(false)
        this.$store.commit('system/changePop',{show:false,text:''})
        },
        closeData() {
            this.checkList = [];
        },
        showManage() {// 展示系统管理
            this.manageVisible = true;
            // this.$router.push('/counter/list/manage/consumerClient');
            this.$router.push('/counter/list/manage/consumerClient');
            
        },
        popSure(){/* 弹框-确定 */
            // 拦截 由于下面太多没拦截的，所以在这拦截舒服
            if(this.popText.includes('刷卡')) {
                for (let i=0;i<this.receptionList.length;i++){
                    if(this.receptionList[i].id !== 16) {
                        this.$message({
                            center: true,
                            showClose: true,
                            message: '刷卡失败!请放入银行卡或存折!',
                            type: 'error'
                        });
                        return
                    }
                }
            }

            if(this.popText.includes('身份证扫描')) {
                for (let i=0;i<this.receptionList.length;i++){
                    if(this.receptionList[i].id !== 13 && this.receptionList[i].id !== 442) {
                        this.$message({
                            center: true,
                            showClose: true,
                            message: '刷卡失败!请放入身份证!',
                            type: 'error'
                        });
                        return
                    }
                }
            }

            if(this.popText === '身份证扫描仪' || this.popText === '刷卡器' || this.popText === '密码器') {
                if (this.$store.state.system.id == '33' && this.popText === '身份证扫描仪'){
                    this.nbm = 33
                    // this.goodsShelfTotalData = this.auditGoodsShelf
                    if (this.receptionList.length >0){
                        sessionStorage.setItem('nomClientIdentity', JSON.stringify(this.receptionList))
                    }
                    console.log(sessionStorage.getItem('nomClientIdentity'))
                }else if (this.$store.state.system.id == '34' && this.popText === '身份证扫描仪' ){
                    this.nbm = 34
                    // this.goodsShelfTotalData = this.auditGoodsShelf
                    if (this.receptionList.length >0){
                        sessionStorage.setItem('firmClientIdentity', JSON.stringify(this.receptionList))
                    }
                }else if (this.$store.state.system.id == '63' && this.popText === '刷卡器'){
                    this.nbm = 63
                    // this.goodsShelfTotalData = this.auditGoodsShelf
                    if (this.receptionList.length >0){
                        sessionStorage.setItem('nomBusinessDepositCard', JSON.stringify(this.receptionList))
                    }
                }else if (this.$store.state.system.id == '64' && this.popText === '刷卡器'){
                    this.nbm = 64
                    if (this.receptionList.length >0){
                        sessionStorage.setItem('nomCurrentWithdrawalCard', JSON.stringify(this.receptionList))
                    }
                }else if (this.$store.state.system.id == '64,2' && this.popText === '密码器'){
                    this.nbm = 64
                    if (this.passwordForm.passwordAgain){
                        let accountPassword = '';
                        accountPassword = this.passwordForm.passwordAgain
                        sessionStorage.setItem('nomCurrentWithdrawalPassword', accountPassword)
                    }
                }else if (this.$store.state.system.id == '65' && this.popText === '刷卡器'){
                    this.nbm = 65
                    // this.goodsShelfTotalData = this.auditGoodsShelf
                    if (this.receptionList.length >0){
                        sessionStorage.setItem('nomCurrentTransferCard', JSON.stringify(this.receptionList))
                    }
                    // if (this.passwordForm.passwordAgain){
                    //     let accountPassword = '';
                    //     accountPassword = this.passwordForm.passwordAgain
                    //     sessionStorage.setItem('nomCurrentTransferPassword', accountPassword)
                    // }
                }else if (this.$store.state.system.id == '66' && this.popText === '刷卡器'){
                    this.nbm = 66
                    // this.goodsShelfTotalData = this.auditGoodsShelf
                    if (this.receptionList.length >0){
                        sessionStorage.setItem('nomCurrentSettleCard', JSON.stringify(this.receptionList))
                    }
                    // if (this.passwordForm.passwordAgain){
                    //     let accountPassword = '';
                    //     accountPassword = this.passwordForm.passwordAgain
                    //     sessionStorage.setItem('nomCurrentSettlePassword', accountPassword)
                    // }
                }else if (this.$store.state.system.id == '66,2' && this.popText === '密码器'){
                    this.nbm = 66
                    if (this.passwordForm.passwordAgain){
                        let accountPassword = '';
                        accountPassword = this.passwordForm.passwordAgain
                        sessionStorage.setItem('nomCurrentSettlePassword', accountPassword)
                    }
                }else if (this.$store.state.system.id == '67,1' && this.popText === '刷卡器'){
                    this.nbm = 67
                    // this.goodsShelfTotalData = this.auditGoodsShelf
                    if (this.receptionList.length >0){
                        sessionStorage.setItem('nomCurrentCancellCard1', JSON.stringify(this.receptionList))
                    }
                }else if (this.$store.state.system.id == '67,2' && this.popText === '身份证扫描仪'){
                    this.nbm = 67
                    // this.goodsShelfTotalData = this.auditGoodsShelf
                    if (this.receptionList.length >0){
                        sessionStorage.setItem('nomCurrentCancellCard2', JSON.stringify(this.receptionList))
                    }
                    
                }else if (this.$store.state.system.id == '33'){
                            this.nbm = 33
                            // this.goodsShelfTotalData = this.auditGoodsShelf
                            if (this.receptionList.length >0){
                                sessionStorage.setItem('nomClientIdentity', JSON.stringify(this.receptionList))
                            }
                }else if (this.$store.state.system.id == '34'){
                    this.nbm = 34
                    // this.goodsShelfTotalData = this.auditGoodsShelf
                    if (this.receptionList.length >0){
                        sessionStorage.setItem('firmClientIdentity', JSON.stringify(this.receptionList))
                    }
                }else if (myConfig[this.$store.state.system.id]){ // myConfig[this.$store.state.system.id]
                    
                    const { nbm, name, isPassword, machine } = myConfig[this.$store.state.system.id]
                    this.nbm = nbm
                    if(!isPassword) {
                        if (this.receptionList.length >0 && machine === this.popText){
                            sessionStorage.setItem(name, JSON.stringify(this.receptionList))
                        }
                    }else {
                        if (this.passwordForm.passwordAgain){
                                let accountPassword = '';
                                accountPassword = this.passwordForm.passwordAgain
                                sessionStorage.setItem(name, accountPassword)
                            }
                    }
                    
                    
                }else if (this.$store.state.system.id == '67,3'){
                    this.nbm = 67
                    if (this.passwordForm.passwordAgain){
                        let accountPassword = '';
                        accountPassword = this.passwordForm.passwordAgain
                        sessionStorage.setItem('nomCurrentCancellPassword', accountPassword)
                    }
                }else if (this.$store.state.system.id == '62,1' && this.popText === '刷卡器'){
                this.nbm = 62
                if (this.receptionList.length >0){
                    sessionStorage.setItem('accountVoucher', JSON.stringify(this.receptionList))
                }
                }else if (this.$store.state.system.id == '62,1' && this.popText === '密码器'){
                this.nbm = 62
                if (this.passwordForm.passwordAgain){
                    let accountPassword = '';
                    accountPassword = this.passwordForm.passwordAgain
                    sessionStorage.setItem('accountPassword', accountPassword)
                }
                }else if (this.$store.state.system.id == '62,2' && this.popText === '刷卡器'){
                        this.nbm = 62
                        // this.goodsShelfTotalData = this.auditGoodsShelf
                        
                        if (this.receptionList.length >0){
                            sessionStorage.setItem('accountVoucherTwo', JSON.stringify(this.receptionList))
                        }
                }else if (this.$store.state.system.id == '62,2' && this.popText === '密码器'){
                        this.nbm = 62
                        if (this.passwordForm.passwordAgain){
                            let accountPasswordTwo = ''
                            accountPasswordTwo = this.passwordForm.passwordAgain
                            sessionStorage.setItem('accountPasswordTwo', accountPasswordTwo)
                        }
                }else if (this.$store.state.system.id == '62,3' && this.popText === '刷卡器'){
                        this.nbm = 62
                        // this.goodsShelfTotalData = this.auditGoodsShelf
                        if (this.receptionList.length >0){
                            sessionStorage.setItem('accountVoucherThree', JSON.stringify(this.receptionList))
                        }
                }else if (this.$store.state.system.id == '62,3' && this.popText === '密码器'){
                        this.nbm = 62
                        if (this.passwordForm.passwordAgain){
                            let accountPasswordThree = ''
                            accountPasswordThree = this.passwordForm.passwordAgain
                            sessionStorage.setItem('accountPasswordThree', accountPasswordThree)
                        }
                }
            }else {
                let formList = []
                // this.toggleGoods()
                // this.$message.success(`${this.popText}操作成功！`)
                
                if (this.nbm == 0){ // 客户签字
                    let projectId = sessionStorage.getItem('projectId')
                    let startTime = sessionStorage.getItem('startTime')
                    for (var i=0;i<this.goodState.length;i++){formList.push({"answerId":this.goodState[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + "285,287,9,"+this.goodState[i].id,"type": ""})}
                    let params= {
                        parentId: this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,12',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    addOperation(params).then((data)=>{
                        
                    }).catch((error)=>{
                    })
                }else if (this.nbm == 1){ //传票栏
                    let projectId = sessionStorage.getItem('projectId')
                    let startTime = sessionStorage.getItem('startTime')
                    for (var i=0;i<this.goodState.length;i++){formList.push({"answerId":this.goodState[i].id,"emptyOne": "", "emptyTwo": "", "operationIds": this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + "285,287,4,"+this.goodState[i].id,"type": ""})}
                    let params= {
                        parentId:this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,4',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    addOperation(params).then((data)=>{
                        
                    }).catch((error)=>{
                    })
                }else if (this.nbm == 2){ //普通凭证箱
                    let clickList = this.commonChecked
                    this.pushThingsGoods([...clickList])
                    if(clickList.length===0) return this.$message.warning(`请选择物品后再确定！`)
                    let projectId = sessionStorage.getItem('projectId')
                    let startTime = sessionStorage.getItem('startTime')
                    let formList = []
                    for (var i=0;i<clickList.length;i++){formList.push({ "answerId":clickList[i], "emptyOne": "", "emptyTwo": "", "operationIds": this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + "285,287,3,"+clickList[i], "type": "" })}
                    let params= {
                        parentId:this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,3',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    addOperation(params).then((data)=>{
                        
                    }).catch((error)=>{
                    })
                    clickList = []
                }else if (this.nbm == 3){ //重要空白凭证箱
                    let clickList=this.importantChecked
                    this.pushThingsGoods([...clickList])
                    if(clickList.length===0) return this.$message.warning(`请选择物品后再确定！`)
                    let projectId = sessionStorage.getItem('projectId')
                    let startTime = sessionStorage.getItem('startTime')
                    let formList = []
                    for (var i=0;i<clickList.length;i++){formList.push({ "answerId":clickList[i], "emptyOne": "", "emptyTwo": "", "operationIds": this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + "285,287,3,"+clickList[i], "type": "" })}
                    let params= {
                        parentId:this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,2',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    addOperation(params).then((data)=>{
                        
                    }).catch((error)=>{
                    })
                    clickList = []
                }else if (this.nbm == 4){ //钱箱
                    let projectId = sessionStorage.getItem('projectId')
                    let startTime = sessionStorage.getItem('startTime')
                    let formList = [];
                    for (var i=0;i<this.goodState.length;i++){
                        if(this.goodState[i].id !== 15) {
                            this.$message({
                                center: true,
                                showClose: true,
                                message: '请放入现金!',
                                type: 'error'
                            });
                            return
                        }
                        formList.push(
                            {
                                "answerId":this.goodState[i].id,
                                "emptyOne": "",
                                "emptyTwo": "",
                                "operationIds": this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + "285,287,1,"+this.goodState[i].id,
                                "type": "" 
                            }
                        )
                    }
                    let params= {
                        parentId:this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,1',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    addOperation(params).then((data)=>{
                        
                    }).catch((error)=>{
                    })
                }else if (this.nbm == 5){ //印章盒
                    if(this.goodState.length === 0) {
                        this.$message({
                            message: '请放入证件进行盖章!',
                            type: 'warning'
                        });
                        return 
                    }
                    if(this.sealChecked.length === 0) {
                        this.$message({
                            message: '请选择印章!',
                            type: 'warning'
                        });
                        return 
                    }
                    
                    // 进去会排序 多的不用管
                    const sealArr = [...this.sealChecked]
                    this.stampJudge(sealArr)
                    this.sealChecked = []
                    // this.sealChecked = []
                    // this.$store.commit('system/changePop', {show: false, text: ''})
                }else if (this.nbm == 6){ //验钞机
                    let projectId = sessionStorage.getItem('projectId')
                    let startTime = sessionStorage.getItem('startTime')
                    for (var i=0;i<this.goodState.length;i++){formList.push({"answerId":this.goodState[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + "285,287,9,"+this.goodState[i].id,"type": ""})}
                    let params= {
                        parentId:this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,9',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    addOperation(params).then((data)=>{
                        
                    }).catch((error)=>{
                    })

                    // that.outThingsGoods([that.goodsShelfTotalData[evt.oldIndex].id])
                }else if (this.nbm == 7){ //打印机
                    let projectId = sessionStorage.getItem('projectId')
                    let startTime = sessionStorage.getItem('startTime')
                    for (var i=0;i<this.goodState.length;i++){formList.push({"answerId":this.goodState[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + "285,287,10,"+this.goodState[i].id,"type": ""})}
                    let params= {
                        parentId:this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,10',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    addOperation(params).then((data)=>{
                        
                    }).catch((error)=>{
                    })
                }else if(this.nbm == 8){  // 密码器
                    if (this.nbm == 8){
                        let formList = []
                        let ruleReqs = sessionStorage.getItem('ruleReqs')
                        if (ruleReqs){formList = JSON.parse(ruleReqs);}else{formList = []}
                        for (var i=0;i<this.receptionList.length;i++){formList.push({"emptyOne": "18", "emptyTwo": this.passwordForm.passwordAgain, "operationIds": this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + "285,287,282,"+this.receptionList[i].id,"type": "3"})}
                        sessionStorage.setItem('ruleReqs', JSON.stringify(formList))
                    }
                    if(this.passwordForm.password && this.passwordForm.passwordAgain){
                        if(this.passwordForm.password.length >=6 && this.passwordForm.passwordAgain.length >=6){
                            if(this.passwordForm.password == this.passwordForm.passwordAgain) {
                            this.$store.commit('system/changePop', {show: false, text: ''})
                            this.$message.success(`${this.popText}操作成功！`)
                            }
                        }
                    }else{
                        this.$message.error('请输入密码和确认密码');
                    }
                }else if (this.nbm == 9){//资料
                    let projectId = sessionStorage.getItem('projectId')
                    let startTime = sessionStorage.getItem('startTime')
                    for (var i=0;i<this.goodState.length;i++){formList.push({"answerId":this.goodState[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + "285,287,11,"+this.goodState[i].id,"type": ""})}
                    let params= {
                        parentId:this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,11',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    addOperation(params).then((data)=>{
                        
                    }).catch((error)=>{
                    })
                }else if (this.nbm == 10){ //刷卡器
                    let projectId = sessionStorage.getItem('projectId')
                    let startTime = sessionStorage.getItem('startTime')
                    for (var i=0;i<this.receptionList.length;i++){formList.push({"answerId":this.receptionList[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + "285,287,6,"+this.receptionList[i].id,"type": ""})}
                    let params= {
                        parentId:this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,6',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    addOperation(params).then((data)=>{
                        
                    }).catch((error)=>{
                    })
                }else if (this.nbm == 11){ //身份证扫描仪
                    let projectId = sessionStorage.getItem('projectId')
                    let startTime = sessionStorage.getItem('startTime')
                    for (var i=0;i<this.receptionList.length;i++){formList.push({"answerId":this.receptionList[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + "285,287,7,"+this.receptionList[i].id,"type": ""})}
                    let params= {
                        parentId:this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id + ',' + '285,287,7',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    addOperation(params).then((data)=>{
                        
                    }).catch((error)=>{
                    })
                }else{
                    // this.goodsShelfTotalData = this.auditGoodsShelf
                    
                }
                // 如果不是钱箱或传票栏或印章盒或传票栏或客户，刷卡后返回
                if(this.nbm !== 4 && this.nbm!== 1 && this.nbm!== 5 && this.nbm!== 1 && this.nbm!== 0) {
                    const tmpGoods = this.goodState.map(item => item.id)
                    this.outThings({name: this.myMap, idArr: [ ...tmpGoods ]})
                    this.pushThingsGoods([...tmpGoods])
                }
                // this.$store.commit('system/changePop',{show:false,text:''}) // 关闭弹窗
            }
            // this.closePop()
            // }
            if(this.nbm !== 5) {
                // 印章盒特殊处理
                this.$store.commit('system/changePop', {show: false, text: ''})
            }
            this.$message({
                message: '提交成功',
                type: 'success'
            });

        },
        toPart(){
            this.$router.push('/index')
        },
        judgePosition(evt) {
            const targetDom = this.$refs.goods.getBoundingClientRect()
            return evt.originalEvent.pageX<targetDom.right&&evt.originalEvent.pageX>targetDom.left && evt.originalEvent.pageY<targetDom.bottom&&evt.originalEvent.pageY>targetDom.top
        },

    }
};
</script>

<style lang="scss" scoped>
.businessClass {
    width: 300px;
    height: 100px;
    background-color: skyblue;
    text-align: center;
    line-height: 100px;
    font-size: 23px;
}

.wrap {
    .bg {
        top: 0;
        left: 0;
        // width: 100%;
        height: calc(100vh - 60px);
    }

    

    // 公共样式-------------------兼容1400*900

    .wrap {
            width: 100%;
            position: relative;
            height: calc(100vh - 68px);
            overflow: hidden;
            background:url("../../../assets/img/integrated-counter-bg.png");
        }
        .counter {
            top: 30vh;
            left: 15vw;
            width: 80vw;
            position: absolute;
        }
        .glass {
            cursor: pointer;
            // 玻璃窗
            top: 16vh;
            left: 50vw;
            width: 38vw;
            position: absolute;
        }
        .employee {
            // 柜员
            // top: 57%;
            // left: 42%;
            // width: 23%;
            cursor: pointer;
            top: 50vh;
            left: 40vw;
            width: 23vw;
            position: absolute;
        }
        // 先放着
        .employeeText {
            // 资料文字
            position: absolute;
            top: 64vh;
            left: 58vw;
            color: #000;
            transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
            font-size: 18px;
            width: 100px;
            height: 100px;
            cursor: pointer
        }
        .man {
            // 人
            top: 10vh;
            left: 70vw;
            width: 23vw;
            height: 50vh;
        }
        .money-box {
            // 钱箱
            top: 57vh;
            left: 18vw;
            width: 8vw;
        }
        .important {
            // 重空箱
            top: 52vh;
            left: 26vw;
            width: 8vw;
        }
        .voucher-box {
            // 普通箱
            top: 38vh;
            left: 34vw;
            width: 8vw;
        }
        .summons {
            // 传票栏
            top: 40vh;
            left: 40vw;
            width: 8vw;
        }
        .computer {
            top: 30vh;
            left: 44vw;
            width: 10vw;
        }
        .card-machine {
            top: 47vh;
            left: 52vw;
            width: 6vw;
        }
        .idCard-scanner {
            top: 52vh;
            left: 54vw;
            width: 6vw;
        }
        .seal-box {
            top: 56vh;
            left: 62vw;
            width: 6vw;
        }
        .currency-detector {
            top: 62vh;
            left: 66vw;
            width: 8vw;
        }
        .printer {
            top: 70vh;
            left: 72vw;
            width: 8vw;
        }
        .cipher-machine {
            top: 50vh;
            left: 68vw;
            width: 6vw;
        }


        // 公共样式-------------------

        @media screen and (min-width: 1920px) {
        .wrap {
            width: 100%;
            position: relative;
            height: calc(100vh - 68px);
            overflow: hidden;
            background:url("../../../assets/img/integrated-counter-bg.png");
        }
        .counter {
            top: 116px;
            left: 357px;
            width: 1300px;
        }
        .glass {
            top: -100px;
            left: 900px;
            width: 700px;
        }
        .employee {
            top: 325px;
            left: 820px;
            width: 340px;
        }
        .employeeText {
            position: absolute;
            top: 435px;
            left: 1070px;
            color: #000;
            transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
            font-size: 18px;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
        }
        .man {
            top: 82px;
            right: 150px;
            width: 262px;
        }
        .money-box {
            top: 380px;
            left: 430px;
            width: 150px;
        }
        .important {
            top: 360px;
            left: 510px;
            width: 145px;
        }
        .voucher-box {
            top: 222px;
            left: 615px;
            width: 140px;
        }
        .summons {
            top: 250px;
            left: 700px;
            width: 139px;
        }
        .computer {
            top: 90px;
            left: 850px;
            width: 200px;
        }
        .card-machine {
            top: 355px;
            left: 1050px;
            width: 80px;
        }
        .idCard-scanner {
            top: 405px;
            left: 1110px;
            width: 65px;
        }
        .seal-box {
            top: 420px;
            left: 1170px;
            width: 70px;
        }
        .currency-detector {
            top: 420px;
            left: 1235px;
            width: 140px;
        }
        .printer {
            top: 470px;
            left: 1330px;
            width: 180px;
        }
        .cipher-machine {
            top: 284px;
            left: 1172px;
            width: 90px;
        }
        .el-tooltip__popper.sth-popper {
            padding: 0;
            // background-color: transparent;
            background-color: #fff;
            img {
                height: 78px;
            }
            .popper__arrow {
                display: none;
            }
        }
    }
    @media screen and (min-width: 1400px) and (max-width: 1500px) and (min-height: 850px) and (max-height: 950px) {
    .wrap {
            width: 100%;
            position: relative;
            height: calc(100vh - 68px);
            overflow: hidden;
            background:url("../../../assets/img/integrated-counter-bg.png");
        }
        .counter {
            top: 25vh;
            left: 15vw;
            width: 78vw;
            position: absolute;
        }
        .glass {
            // 玻璃窗
            top: 7vh;
            left: 47vw;
            width: 41vw;
            position: absolute;
        }
        .employee {
            top: 44vh;
            left: 42vw;
            width: 21vw;
            position: absolute;
        }
        // 先放着
        .employeeText {
            // 资料文字
            position: absolute;
            top: 58vh;
            left: 58vw;
            color: #000;
            transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
            font-size: 18px;
            width: 100px;
            height: 100px;
            cursor: pointer
        }
        .man {
            // 人
            top: 10vh;
            left: 70vw;
            width: 19vw;
            height: 50vh;
        }
        .money-box {
            // 钱箱
            top: 51vh;
            left: 20vw;
            width: 8vw;
        }
        .important {
            // 重空箱
            top: 50vh;
            left: 25vw;
            width: 8vw;
        }
        .voucher-box {
            // 普通箱
            top: 36vh;
            left: 31vw;
            width: 8vw;
        }
        .summons {
            // 传票栏
            top: 39vh;
            left: 36vw;
            width: 8vw;
        }
        .computer {
            top: 26vh;
            left: 44vw;
            width: 10vw;
        }
        .card-machine {
            top: 45vh;
            left: 54vw;
            width: 5vw;
        }
        .idCard-scanner {
            top: 50vh;
            left: 57vw;
            width: 4vw;
        }
        .seal-box {
            top: 52vh;
            left: 61vw;
            width: 5vw;
        }
        .currency-detector {
            top: 55vh;
            left: 68vw;
            width: 8vw;
        }
        .printer {
            top: 62vh;
            left: 75vw;
            width: 8vw;
        }
        .cipher-machine {
            top: 42vh;
            left: 63vw;
            width: 6vw;
        }
    }
    @media screen and (min-width: 1400px) and (max-width: 1500px) and (min-height: 950px) and (max-height: 1100px) {
    .wrap {
            width: 100%;
            position: relative;
            height: calc(100vh - 68px);
            overflow: hidden;
            background:url("../../../assets/img/integrated-counter-bg.png");
        }
        .counter {
            top: 30vh;
            left: 15vw;
            width: 80vw;
            position: absolute;
        }
        .glass {
            // 玻璃窗
            top: 20vh;
            left: 50vw;
            width: 38vw;
            position: absolute;
        }
        .employee {
            // 柜员
            // top: 57%;
            // left: 42%;
            // width: 23%;
            top: 48vh;
            left: 40vw;
            width: 23vw;
            position: absolute;
        }
        // 先放着
        .employeeText {
            // 资料文字
            position: absolute;
            top: 59vh;
            left: 58vw;
            color: #000;
            transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
            font-size: 18px;
            width: 100px;
            height: 100px;
            cursor: pointer
        }
        .man {
            // 人
            top: 10vh;
            left: 70vw;
            width: 23vw;
            height: 50vh;
        }
        .money-box {
            // 钱箱
            top: 54vh;
            left: 20vw;
            width: 8vw;
        }
        .important {
            // 重空箱
            top: 52vh;
            left: 26vw;
            width: 8vw;
        }
        .voucher-box {
            // 普通箱
            top: 38vh;
            left: 34vw;
            width: 8vw;
        }
        .summons {
            // 传票栏
            top: 40vh;
            left: 40vw;
            width: 8vw;
        }
        .computer {
            top: 30vh;
            left: 44vw;
            width: 10vw;
        }
        .card-machine {
            top: 45vh;
            left: 52vw;
            width: 6vw;
        }
        .idCard-scanner {
            top: 50vh;
            left: 56vw;
            width: 6vw;
        }
        .seal-box {
            top: 54vh;
            left: 64vw;
            width: 6vw;
        }
        .currency-detector {
            top: 58vh;
            left: 68vw;
            width: 8vw;
        }
        .printer {
            top: 66vh;
            left: 74vw;
            width: 8vw;
        }
        .cipher-machine {
            top: 46vh;
            left: 68vw;
            width: 6vw;
        }
    }
    @media screen and (min-width: 1298px) and (max-width: 1390px){
    .wrap {
            width: 100%;
            position: relative;
            height: calc(100vh - 68px);
            overflow: hidden;
            background:url("../../../assets/img/integrated-counter-bg.png");
        }
        .counter {
            top: 30vh;
            left: 15vw;
            width: 80vw;
            position: absolute;
        }
        .glass {
            // 玻璃窗
            top: 14vh;
            left: 48vw;
            width: 42vw;
            position: absolute;
        }
        .employee {
            // 柜员
            // top: 57%;
            // left: 42%;
            // width: 23%;
            top: 47vh;
            left: 42vw;
            width: 22vw;
            position: absolute;
        }
        // 先放着
        .employeeText {
            // 资料文字
            position: absolute;
            top: 60vh;
            left: 58vw;
            color: #000;
            transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
            font-size: 18px;
            width: 100px;
            height: 100px;
            cursor: pointer
        }
        .man {
            // 人
            top: 14vh;
            left: 70vw;
            width: 20vw;
            height: 48vh;
        }
        .money-box {
            // 钱箱
            top: 54vh;
            left: 20vw;
            width: 8vw;
        }
        .important {
            // 重空箱
            top: 52vh;
            left: 26vw;
            width: 8vw;
        }
        .voucher-box {
            // 普通箱
            top: 40vh;
            left: 32vw;
            width: 8vw;
        }
        .summons {
            // 传票栏
            top: 42vh;
            left: 38vw;
            width: 8vw;
        }
        .computer {
            top: 30vh;
            left: 44vw;
            width: 10vw;
        }
        .card-machine {
            top: 48vh;
            left: 55vw;
            width: 5vw;
        }
        .idCard-scanner {
            top: 52vh;
            left: 58vw;
            width: 4vw;
        }
        .seal-box {
            top: 55vh;
            left: 63vw;
            width: 5vw;
        }
        .currency-detector {
            top: 55vh;
            left: 67vw;
            width: 8vw;
        }
        .printer {
            top: 59vh;
            left: 73vw;
            width: 10vw;
        }
        .cipher-machine {
            top: 46vh;
            left: 63vw;
            width: 6vw;
        }
    }
    @media screen and (min-width: 1250px) and (max-width: 1290px){
    .wrap {
            width: 100%;
            position: relative;
            height: calc(100vh - 68px);
            overflow: hidden;
            background:url("../../../assets/img/integrated-counter-bg.png");
        }
        .counter {
            top: 30vh;
            left: 15vw;
            width: 80vw;
            position: absolute;
        }
        .glass {
            // 玻璃窗
            top: 14vh;
            left: 49vw;
            width: 42vw;
            position: absolute;
        }
        .employee {
            // 柜员
            // top: 57%;
            // left: 42%;
            // width: 23%;
            top: 46vh;
            left: 40vw;
            width: 23vw;
            position: absolute;
        }
        // 先放着
        .employeeText {
            // 资料文字
            position: absolute;
            top: 59vh;
            left: 58vw;
            color: #000;
            transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
            font-size: 18px;
            width: 100px;
            height: 100px;
            cursor: pointer
        }
        .man {
            // 人
            top: 10vh;
            left: 70vw;
            width: 23vw;
            height: 50vh;
        }
        .money-box {
            // 钱箱
            top: 52vh;
            left: 20vw;
            width: 8vw;
        }
        .important {
            // 重空箱
            top: 50vh;
            left: 26vw;
            width: 8vw;
        }
        .voucher-box {
            // 普通箱
            top: 40vh;
            left: 32vw;
            width: 8vw;
        }
        .summons {
            // 传票栏
            top: 40vh;
            left: 38vw;
            width: 8vw;
        }
        .computer {
            top: 30vh;
            left: 44vw;
            width: 10vw;
        }
        .card-machine {
            top: 47vh;
            left: 54vw;
            width: 6vw;
        }
        .idCard-scanner {
            top: 51vh;
            left: 58vw;
            width: 6vw;
        }
        .seal-box {
            top: 54vh;
            left: 64vw;
            width: 6vw;
        }
        .currency-detector {
            top: 56vh;
            left: 68vw;
            width: 8vw;
        }
        .printer {
            top: 62vh;
            left: 74vw;
            width: 8vw;
        }
        .cipher-machine {
            top: 44vh;
            left: 64vw;
            width: 6vw;
        }
    }
    @media screen and (min-width: 1500px) and (max-width: 1550px) {
        .wrap {
            width: 100%;
            position: relative;
            height: calc(100vh - 68px);
            overflow: hidden;
            background:url("../../../assets/img/integrated-counter-bg.png");
        }
        .counter {
            top: 23vh;
            left: 15vw;
            width: 68vw;
            position: absolute;
        }
        .glass {
            // 玻璃窗
            top: 5vh;
            left: 45vw;
            width: 35vw;
            position: absolute;
        }
        .employee {
            // 柜员
            top: 43vh;
            left: 39vw;
            width: 18vw;
            position: absolute;
        }
        // 先放着
        .employeeText {
            // 资料文字
            position: absolute;
            top: 57vh;
            left: 52vw;
            color: #000;
            transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
            font-size: 18px;
            width: 100px;
            height: 100px;
            cursor: pointer
        }
        .man {
            // 人
            top: 14vh;
            left: 66vw;
            width: 16vw;
        }
        .money-box {
            // 钱箱
            top: 48vh;
            left: 19vw;
            width: 8vw;
        }
        .important {
            // 重空箱
            top: 46vh;
            left: 24vw;
            width: 8vw;
        }
        .voucher-box {
            // 普通箱
            top: 32vh;
            left: 29vw;
            width: 8vw;
        }
        .summons {
            // 传票栏
            top: 36vh;
            left: 34vw;
            width: 7vw;
        }
        .computer {
            top: 22vh;
            left: 40vw;
            width: 10vw;
        }
        .card-machine {
            top: 45vh;
            left: 50vw;
            width: 5vw;
        }
        .idCard-scanner {
            top: 50vh;
            left: 53vw;
            width: 4vw;
        }
        .seal-box {
            top: 52vh;
            left: 56vw;
            width: 4vw;
        }
        .currency-detector {
            top: 51vh;
            left: 60vw;
            width: 8vw;
        }
        .printer {
            top: 58vh;
            left: 66vw;
            width: 8vw;
        }
        .cipher-machine {
            top: 39vh;
            left: 57vw;
            width: 5vw;
        }
    }
    @media screen and (min-width: 1551px) and (max-width: 1919px) {
        .wrap{
            width: 1550px;
            position: relative;
            height: calc(100vh - 68px);
            overflow: hidden;
            background:url("../../../assets/img/integrated-counter-bg.png");
        }
        .counter {
            width: 65vw;
            top: 30%;
            left: 18%;
            height: 67vh;
        }
        .glass {
            // 玻璃窗
            top: 13vh;
            left: 46vw;
            width: 33vw;
        }

        .employee {
            // 柜员
            top: 373px;
            left: 675px;
            width: 283px;
            position: relative;
        }
        .employeeText {
            // 资料文字
            position: absolute;
            top: 517px;
            left: 893px;
            color: #000;
            transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
            font-size: 18px;
            width: 100px;
            text-align: center;
            height: 100px;
            line-height: 100px;
            cursor: pointer

        }
        .man {
            // 人
            top: 191px;
            left: 1090px;
            width: 199px;
        }
        .money-box {
            // 钱箱
            top: 480px;
            left: 353px;
            width: 129px;
        }
        .important {
            // 重空箱
            top: 51vh;
            left: 26vw;
            width: 118px;
        }
        .voucher-box {
            // 普通箱
            top: 40vh;
            left: 31vw;
            width: 112px;
        }
        .summons {
            // 传票栏
            top: 42vh;
            left: 35vw;
            width: 112px;
        }
        .computer {
            top: 29vh;
            left: 42vw;
            width: 148px;
        }
        .card-machine {
            top: 48vh;
            left: 50vw;
            width: 60px;
        }
        .idCard-scanner {
            top: 52vh;
            left: 53vw;
            width: 46px;
        }
        .seal-box {
            top: 55vh;
            left: 57vw;
            width: 50px;
        }
        .currency-detector {
            top: 56vh;
            left: 62vw;
            width: 117px;
        }
        .printer {
            top: 60vh;
            left: 67vw;
            width: 149px;
        }
        .cipher-machine {
            top: 394px;
            left: 932px;
            width: 79px;
        }
    }
    
    // 配合公共样式---------------



    .goods {
        position: fixed;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 65px;
        height: 165px;
        cursor: pointer;
        z-index: 998;
        background: url(../../../assets/img/sth-bg.png) 0 0/100% 100% no-repeat;
        span {
            width: 30px;
            margin-bottom: 10px;
            color: #fff;
            font-size: 24px;
            text-align: center;
        }
        .icon {
            width: 30px;
            transition: all 0.5s;
        }
        &:hover {
            opacity: 0.9;
        }
        &.active {
            
            .icon {
                transform: rotate(180deg);
                
            }
        }
    }
    .goods-dia {
        display: flex;
        justify-content: center;
        width: 100%;
        white-space: nowrap;
        overflow-x: auto;
        position: fixed;
        bottom: 0;
        left: -100%;
        padding: 20px 300px   20px 300px;
        transition: all 0.5s;
        background-color: rgba(255, 255, 255, 0.7);
        .file {
            position: relative;
            min-width: 140px;
            height: 140px;
            text-align: center;
            background: url(../../../assets/img/data-frame.png) 0 0 / cover no-repeat;
            cursor: pointer;
            margin: 0 10px;
            img {
                width: 95%;
                max-height: 90px;
                margin: auto;
                position: absolute;
                top: .5vh;
                left: 50%;
                transform: translateX(-50%);
                // margin-top: 40px;
                margin-top: 5px;
            }
            p {
                position: absolute;
                bottom: 0;
                width: 100%;
                line-height: 40px;
                text-align: center;
                font-size: 18px;
                color: #000;
            }
            &.checked {
                background: url(../../../assets/img/data-frame-checked.png) 0 0 / cover no-repeat,
                    url(../../../assets/svg/checked.svg) 165px 7% / auto no-repeat;
                p {
                    color: #fff;
                }
            }
        }
        &.active {
            left: 0;
            z-index: 998;
        }
        img {
            cursor: pointer;
            &:last-child {
                margin-right: 0;
            }
        }
    }
    // 兼容小屏幕的goods-dia
    @media screen and (min-width: 1200px) and (max-width: 1919px) {
        .goods-dia {
                height: 18vh;
                width: 100%;
                .justify-center {
                    //max-height: 13vh;
                }
                .file {
                    top: 0;
                    //max-height: 13vh;
                    img {
                        max-height: 90px;
                        margin: auto;
                        margin-top: 1vh;
                    }
                    p {
                        //top: 9vh;
                        line-height: 40px;
                        font-size: 18px;
                    }
                }
            }
    }

}
.imgPop{
    width: 100%;
}
.masking{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: .5;
    background: #e6e6e6;
    z-index: 99;
}
.data-dia {
    border-radius: 16px;
    // margin-top: 4vh !important;
    background: #fff;
    position: fixed;
    // top: 7%;
    margin-top: 7vh!important;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 0 15px 15px;
    z-index: 997;
    border: 1px solid #e6e6e6;
    max-height: 600px;
    //overflow: auto;
    .dia-header {
        position: relative;
        .data-title {
            height:70px;
            width: 300px;
            margin: 0 auto;
            line-height: 70px;
            text-align: center;
            color: #fff;
            font-size: 24px;
            background: url(../../../assets/img/dia-title.png) 0 0 / cover no-repeat;
        }
        .close {
            position: absolute;
            top: 15px;
            right: 15px;
            cursor: pointer;
        }
    }

    // 业务选择中的
    .take-list2{
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        flex-wrap: wrap;
        height: 40vh;
        overflow: auto;
        li{
            display: inline-flex;
            align-items: center;
            width: 30%;
            height: 10vh;
            margin: 1vh 0;
            border: 4px solid #DBDBDB;
            border-radius: 20px;
            cursor: pointer;
            background-color: rgba(216,216,216,0.10);
            // &:first-child{
            //     margin: 0 0px 50px 0;
            // }
            // &:last-child{
            //     margin-left: 50px;
            // }
            img{
                width: 20%;
                margin: 0;
                //height: 154px;
                //margin: 0 45px;
            }
            p{
                font-size: 14px;
                color: #000;
                text-align: center;
                padding: 0 20px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            &.checked{
                background: rgba(97,145,255,0.10) url(../../../assets/svg/checked.svg) 96% 7%/auto no-repeat;
                border-color: #6191FF;
            }
        }
    }
    .dia-header2 {
        position: relative;height: 50px;
        line-height: 50px;
        background-color: skyblue;

        .data-title2 {
            position: absolute;
            left: 15px;
            height: 50px;
            line-height: 50px;
        }
        .close {
            height: 50px;
            position: absolute;
            right: 15px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: center;
            img {
                vertical-align: center;
            }
        }
    }
    .tips {
        margin: 20px 0 50px;
        text-align: center;
        font-size: 20px;
        color: #000;
    }
    .tips2 {
        margin: 1vh 0 2vh 0;
        text-align: left;
        font-size: 20px;
        color: #000;
    }
    .list {
        width: 940px;
        max-height: 30vh;
        min-height: 30vh;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        .img-wrap{
            background: url(../../../assets/img/data-frame.png) 0 0 / cover no-repeat;
            width: 140px;
            height: 140px;
            display: flex;
            justify-content: center;
            margin: 5px 10px;
            position: relative;
            cursor: pointer;
            .file {
                position: relative;
                max-width: 135px;
                max-height: 90px;
                text-align: center;
                margin: 10px 10px ;
                img {
                    margin-top: 45px;
                }
                p {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    line-height: 40px;
                    text-align: center;
                    font-size: 18px;
                    color: #000;
                }
            }
            .text{
                font-size: 18px;
                white-space:nowrap;
                position: absolute;
                bottom: 7px;
                left: 50%;
                transform: translate(-50%,0);
            }
            &.checked {
                background: url(../../../assets/img/data-frame-checked.png) 0 0 / cover no-repeat,
                    url(../../../assets/svg/checked.svg) 165px 7% / auto no-repeat;
                p {
                    color: #fff;
                }
            }
        }
    }
    .seal{
        width: 970px;
        margin-top: -5vh;
        max-height: 30vh;
        min-height: 30vh;
        overflow: auto;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        .box{
            border: 2px solid #e6e6e6;
            width: 45%;
            min-height: 280px;
            border-radius: 10px;
            padding: 10px;
        }
        .left{
            display: flex;
            width: 50%;
            flex-wrap: wrap;
            max-height: 30vh;
            min-height: 30vh;
            overflow: auto;
            .file {
                position: relative;
                width: 140px;
                height: 140px;
                text-align: center;
                background: url(../../../assets/img/data-frame.png) 0 0 / cover no-repeat;
                cursor: pointer;
                margin: 5px 7px;
                &:last-child {
                    margin-right: 0;
                }
                &:nth-child(n>1){
                    margin-top: 0;
                }
                img {
                    width: 90px;
                    max-height: 90px;
                    margin: 10px auto 0;
                    z-index: 9;
                }
                p {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    line-height: 37px;
                    text-align: center;
                    font-size: 18px;
                    color: #000;
                }
                &.checked {
                    background: url(../../../assets/img/data-frame-checked.png) 0 0 / cover no-repeat,
                        url(../../../assets/svg/checked.svg) 163px 7% / auto no-repeat;
                    
                    p {
                        color: #fff;
                    }
                }
            }
            &.active {
                left: 0;
                z-index: 9999;
            }
            img {
                cursor: pointer;
                &:last-child {
                    margin-right: 0;
                }
            }
        }
        .right{
            margin-left: 5%;
        }
        .else{
            width: 100%;
        }
        .img-wrap2{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            img {
                width: 300px;
                height: 200px;
            }
        }
    }
    .dia-footer {
        margin-top: 65px;
        text-align: center;
        button {
            width: 300px;
            line-height: 60px;
            color: #fff;
            font-size: 24px;
            background-color: rgb(81, 147, 255);
            border: 0;
            border-radius: 20px;
            cursor: pointer;
            &:hover {
                opacity: 0.9;
            }
        }
    }
    .dia-footer2 {
        height: 70px;
        line-height: 70px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .busyButtonBox {
            display: flex;
            justify-content: space-between;
        }
    }
}

// 兼容小的data-dia
@media screen and (min-width: 1200px) and (max-width: 1919px) {
        .data-dia {
            top: 7%;
            left: 50%;
            min-height: 65vh;
            .seal{
                margin-top: -5vh;
                max-height: 30vh;
                min-height: 30vh;
                //overflow: auto;
                //display: flex;
                //justify-content: space-around;
                //flex-wrap: wrap;
                .left{
                    max-height: 30vh;
                    min-height: 30vh;
                    overflow: auto;
                    display: flex;
                    //justify-content: space-around;
                    flex-wrap: wrap;
                    .file {
                        //height: 10vh;
                        img {
                            //height: 10vh;
                            //width: 5vw;
                            margin: 10px auto 0;
                            z-index: 9;
                        }
                        p {
                            line-height: 4vh;
                        }
                    }
                }
                .box{
                    //background-color: red;
                    border: 2px solid #e6e6e6;
                    height: 2vh;
                    width: 45%;
                    min-height: 280px;
                    border-radius: 10px;
                    padding: 10px;
                }
                .else{
                    width: 100%;
                }
            }
            .dia-footer {
                //position: absolute;
                //bottom: 1vh;
                //left: 50%;
                //transform: translateX(-50%);
            }
        }
    }
.system {
    margin-top: -8vh;
    position: absolute;
    top: 12%;
    left: 50%;
    z-index: 9;
    transform: translate(-50%, 0);
    width: 1280px;
}
.fullScreenSystem {
    width: 100vw;
    margin-top: 0;
    position: absolute;
    top: 0%;
    left: 50%;
    z-index: 9;
    transform: translate(-50%, 0);
}
/deep/ .view .el-dialog__body {
    padding: 0 !important;
    background: #f5f6f8;
    width: 100%;
    height: 100%;
    overflow: hidden;

}
.sth{
position: absolute;
&.cp{
    cursor: pointer;
}
}
.guide{
top: 80px;
left: 10px;
width: 150px;
cursor: pointer;
background:url(../../../assets/img/lobby-btn-bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
line-height: 50px;
font-size: 24px;
text-align: center;
color: #fff;

&:hover{
    opacity: .9;
}
}
</style>