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

<template>
    <div class="wrap minWidthJudge overflow-hidden">
        <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="changePeopleJudge"/> -->
        <img slot="reference" class="sth man cp" v-lazy="lazyImg[0]" alt=""  @click="changePeopleJudge"/>
        <img class="sth counter" v-lazy="lazyImg[1]" alt="" />
        <img class="sth glass" v-lazy="lazyImg[2]" alt="" @click="changePeopleJudge"/>

        <!-- 系统录入 height: 178px;position:relative;top:-450px;right:20px-->
        <el-tooltip placement="top" popper-class="sth-popper" close-delay="0">
            <div slot="content" class="computerContent" @click="showManage" v-show="!manageVisible">
                <img v-lazy="lazyImg[3]" style="height: 100px;" alt="" />
            </div>
            <div class="bg-gray-50 "  @click="showManage">
                <img class="sth computer cp" v-lazy="lazyImg[4]" alt="" @click="showManage"/>
            </div>
        </el-tooltip>
<!--        点击打开传票栏-->
        <el-tooltip placement="top" popper-class="sth-popper" offset="50">
            <div slot="content">
                <img v-lazy="lazyImg[5]" class="contentHeight" 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]" class="contentHeight" 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]" class="contentHeight" 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]" class="contentHeight" 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" @click="showData('印章盒',5)">
                <img v-lazy="lazyImg[13]" class="contentHeight" alt="" @click="showData('印章盒',5)" />
            </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]" class="contentHeight" 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]" style="height: 50px;" 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]" class="contentHeight" 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"   style="margin-left: -250px">
               <!-- <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" @click="showData('资料',9)">
                <img v-lazy="lazyImg[22]" class="contentHeight" @click="showData('资料',9)" 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]" class="contentHeight" 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]" class="contentHeight" 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 img-wrap" :class="{ checked: checkList.includes(item.id),file:true }" @click="goodsDblClickFn(item)">
                <!-- <img :style="item.name==='开户申请书'?'margin-top:10px;':''" :src="item.src" alt="" /> -->
                <el-image
                    style="width: 110px; height: 70px; margin-top: 10px;"
                    :src="item.src"
                    fit="fit"
                    :title="item.name"
                    :alt="item.name"></el-image>
                <p>{{item.name}}</p>
                <!-- <el-image
                    style="width: 100px; height: 70px;margin-top: 10px;"
                    :src="item.src"
                    fit="scale-down"></el-image>
                <p>{{item.name}}</p> -->
            </div>
        </div>
        <div class="goods" :class="{ active: showGoods }" @click="toggleGoods">
            <span class="">物品栏</span>
            <img class="icon" v-lazy="lazyImg[27]" alt="" />
        </div>

        <!-- 硬件交互--弹框 -->
            

        <div v-show="showPop" width="900px" class="data-dia  z500 max-h-screen 2xl:-mt-20;" ref="dataDia" v-drag>
            <div class="dia-header h-1/6">
                <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" key="passwordFormpasswordAgain" class="flex flex-col justify-center">
                    <!-- <el-form-item class="password-wrap" label="密码" prop="passwordAgain">
                        <el-input :class="{'password-input': !viewPassword1}" v-focus v-model="passwordForm.passwordAgain" maxlength="6" onkeyup="{this.value=this.value.replace(/\D/g,'')}" autocomplete="new-password" auto-complete="new-password"></el-input>
                        <i class="view el-icon-view" @click="viewPassword1 = !viewPassword1"></i>
                    </el-form-item>
                    <el-form-item class="password-wrap" label="确认密码" prop="password2" key="passwordFormpassword2" v-if="needPasswordAgain">
                        <el-input :class="{'password-input': !viewPassword2}" v-model="passwordForm.password2"  maxlength="6" onkeyup="this.value=this.value.replace(/\D/g,'')" autocomplete="off" auto-complete="off"></el-input>
                        <i class="view el-icon-view" @click="viewPassword2 = !viewPassword2"></i>
                    </el-form-item> -->
                    <el-form-item class="password-wrap" label="密码" prop="passwordAgain">
                        <el-input v-focus v-model="passwordForm.passwordAgain" maxlength="6" onkeyup="{this.value=this.value.replace(/\D/g,'')}" autocomplete="new-password" auto-complete="new-password"  show-password></el-input>
                    </el-form-item>
                    <el-form-item class="password-wrap" label="确认密码" prop="password2" key="passwordFormpassword2" v-if="needPasswordAgain">
                        <el-input v-model="passwordForm.password2"  maxlength="6" onkeyup="this.value=this.value.replace(/\D/g,'')" autocomplete="off" auto-complete="off"  show-password></el-input>
                    </el-form-item>
                </el-form>
            </div>

            <div v-else-if="popText==='印章盒'" class=" seal 2xl:w-7/12 xl:w-9/12 lg:w-full h-5/6 max-h-full ">
                <div class="left min-h-full">
                    <!-- 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="item.name" :title="item.name" />
                        <p>{{item.name}}</p>
                    </div>
                </div>
                <div class="bg-gray-400 box right min-h-full" 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 v-if="item.name.includes('复印件')" :src="item.src" class="fileSeal"  :alt="item.name" :title="item.name" />
                        <el-image
                            width="100%"
                            v-else
                            :src="item.src"
                            class="fileSeal max-h-96"
                            :alt="item.name"
                            :title="item.name"
                            fit="contain"></el-image>
                        <!-- <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 content-center" style="width:1200px;">
                <div class="left else content-center justify-center">
                    <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="" /> -->
                        <el-image
                            style="width: 100px; height: 70px;margin-top: 10px;"
                            :src="item.src"
                            fit="scale-down"></el-image>
                        <p>{{item.name}}</p>
                    </div>
                </div>
            </div>
            <div v-else-if="popText==='普通凭证箱'" class="seal content-center" style="width:1200px;">
                <div class="left else content-center justify-center">
                    <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="" /> -->
                        <el-image
                            style="width: 100px; height: 70px;margin-top: 10px;"
                            :src="item.src"
                            :fit="fit"></el-image>
                        <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="" /> -->
                    <el-image
                        :src="item.src"
                        class="file"
                        :alt="item.name"
                        :title="item.name"
                        fit="scale-down"></el-image>
                    <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="" /> -->
                    <el-image
                        :src="item.src"
                        class="file"
                        :alt="item.name"
                        :title="item.name"
                        fit="scale-down"></el-image>
                    <p class="text">{{item.name}}</p>
                </div>
            </div>
            
            
            <div v-else-if="popText==='刷卡器'" ref="popUp" class="list  ">
                <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="" /> -->
                    <el-image
                        :src="item.src"
                        class="file"
                        :alt="item.name"
                        :title="item.name"
                        fit="scale-down"></el-image>
                    <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  goodState" :class="{ checked: commonChecked.includes(item.id),'img-wrap':true }" @click='dislodgeItem(index)' :key="item.id">
                    <!-- <img :src="item.src" class="file"  alt="" /> -->
                    <el-image
                        :src="item.src"
                        class="file"
                        :alt="item.name"
                        :title="item.name"
                        fit="scale-down"></el-image>
                    <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  goodState" :class="{ checked: commonChecked.includes(item.id),'img-wrap':true }" @click='dislodgeItem(index)' :key="item.id">
                    <!-- <img :src="item.src" class="file"  alt="" /> -->
                    <el-image
                        :src="item.src"
                        class="file"
                        :alt="item.name"
                        :title="item.name"
                        fit="scale-down"></el-image>
                    <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="" /> -->
                    <el-image
                        :src="item.src"
                        class="file"
                        :alt="item.name"
                        :title="item.name"
                        fit="scale-down"></el-image>
                    <p class="text">{{item.name }}</p>
                </div>
            </div>

            

            <div class="dia-footer">
                <button v-throttle @click="popSure" class="w-20" type="button">确定</button>
                <!-- <el-button type="primary" v-throttle @click="popSure">确定</el-button> -->
            </div>
        </div>

        

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

        <!-- 商业银行系统的全屏功能实现  v-if="manageVisible" -->
        <div :class="full ? 'fullScreenSystem' : 'system'" class="systemconfig" v-show="manageVisible">
            <!-- <transition name='systemComputer' enter-active-class="Down" leave-active-class="animate__animated animate__bounceOutDown">
                <router-view></router-view>
            </transition> -->
            <router-view></router-view>
        </div>


        <!-- 图片查看器 -->
        <el-dialog
            custom-class="data-dia "
            class="imgIndex"
            :visible.sync="showImg"
            width="850px"
            >
            <!-- <p style="position: absolute;top: 350px; left: 90px;">test</p> -->
            <!-- <h3 style="position: absolute;top: 10px; left: 400px;">aaa</h3> -->
            <img :src="imgSrc" class="imgPop imgIndex min-w-full " 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>

        <!-- <tip-dialog /> -->




        <!-- 客户返还资料或签字的对话框 -->
        <el-dialog
            title="客户对话中..."
            :visible.sync="peopleJudge"
            custom-class="2xl:w-7/12 xl:w-9/12 lg:w-full h-auto rounded-2xl border-2 border-gray-600"
            center>
            <h3 class="text-2xl antialiased text-center">请选择客户签字或返还资料</h3>
            <span slot="footer" class="dialog-footer">
                <el-button @click="peopleDoing(1)" style="width:200px;height:50px;">客户签字</el-button>
                <el-button type="primary" @click="peopleDoing(2)" style="width:200px;height:50px;">返还资料</el-button>
            </span>
        </el-dialog>
        
        <el-dialog
            title="提示"
            :visible.sync="voucherCardGet"
            width="30%"
            center>
            <h3 class="text-2xl antialiased text-center">请问需要取出几张银行卡</h3>
            <span slot="footer" class="dialog-footer">
                <el-button @click="voucherCardGetIt(1)">取出一张</el-button>
                <el-button type="primary" @click="voucherCardGetIt(2)">取出两张</el-button>
            </span>
        </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'
import saveSystemModule from '@/mixins/saveSystemModule'
// import TipDialog from '@/components/tipDialog'

export default {
    name: 'index',
    components: {
        manage: manage,
        backButton,
        // TipDialog
    },
    mixins: [saveSystemModule],
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.passwordForm.passwordAgain&&/^[0-9]*$/.test(this.passwordForm.passwordAgain)&&this.passwordForm.passwordAgain.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('密码长度小于6位!'));
            } else  if(value  !== this.passwordForm.passwordAgain){
                callback(new Error('两次输入密码不一致!'));
            }else{
                callback();
            }
        };
        return {
            viewPassword1: false,
            viewPassword2: false,
            voucherCardGet: false,
            voucherCardNumber: 0,
            
            // 方便操作的数据：调整弹出框高度
            fit: 'scale-down',
            controlGoodsDblClickFn: null,
            // cultureIn: [], // 传票栏
            // peopleSign: [],
            // moneyBox: [],
            peopleJudge: false,
            peopleDo: 1,
            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:563},
                {name:'银行卡',src:require('@/assets/img/goods/bankCard.png'),id:16,cardNub:'1865 3549 5675 5589'},
                {name:'定期存单',src:require('@/assets/img/seal/paid.png'),id:428},
                {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:428},
            //     {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:429},
            // ],
            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:'',
                password2:'',
                passwordAgain: ''
            },
            systemId:'',
            passwordRules:{
                password2:[
                    {  validator: validatePass2, trigger: 'blur' },
                ],
                passwordAgain:[
                    { validator: validatePass, 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: {
        // 业务一和其他业务的银行卡不一样
        needPasswordAgain() {
            if(this.id == '62,1' || this.id == '62,2' || this.id == '62,3' || this.id == '129' || this.id == '167' || this.id == '301') {
                return true
            }else {
                return false
            }
        },
        importanceArr() {
            const arr = [
                {name:'定期存单',src:require('@/assets/img/seal/paid.png'),id:428},
                {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:429},
            ]
            if(this.businessKey === '业务一') {
                // arr.unshift({name:'二类银行卡',src:require('@/assets/img/goods/bankCard.png'),id:16,cardNub:'1865 3549 5675 5589'})
                arr.unshift({name:'二类银行卡',src:require('@/assets/img/goods/bankCard.png'),id:563,cardNub:'1865 3549 5675 5589'})
                arr.unshift({name:'一类银行卡',src:require('@/assets/img/goods/bankCard.png'),id:16,cardNub:'1865 3549 5675 5589'})
                
                arr.pop()
            }else {
                arr.unshift({name:'银行卡',src:require('@/assets/img/goods/bankCard.png'),id:16,cardNub:'1865 3549 5675 5589'})
            }
            return arr
        },
        businessKey() {
            return this.$store.state.system.businessKey
        },
        full: function () {// 全屏
            return this.$store.state.system.fullScreen;
        },
        showPop:function(){/* 展示弹框 */
            const dataDia = this.$refs.dataDia
            // 每次显示弹框时重置方位
            if (dataDia) {
                dataDia.style.top = '68px'
                dataDia.style.left = '50%'
            }
                
            this.$refs.dataDia
            this.receptionList = []
            this.passwordForm.passwordAgain = ''
            this.passwordForm.password2 = ''
            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 if(this.popText == '返还资料') {
                return 'backPeople'
            }else {
                return ''
            }
        },
        ...mapGetters({
            goodsShelfTotalData: 'system/goods2',
            cultureIn: 'system/cultureIn', // 传票栏
            peopleSign: 'system/peopleSign',
            goodState: 'system/goodState',
            getSelectList: 'system/getSelectList',
            needBackMoney: 'system/needBackMoney'
        })
    },
    watch: {
        showImg(newVal) {
            if(!newVal) {
                this.imgSrc = ''
            }
            
        },
        '$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.setTipsOperate('物品栏中已有该物品')
                                            }
                                        }
                                        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.setTipsOperate('非可拖拽的交互！')
                                    }
                                }
                            })
                        };
                    })
                }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)
        },
        // 'passwordForm.password'(newVal) {
        //     // passwordForm:{
        //     //     password:'',
        //     //     passwordAgain: ''
        //     // },
            
        //     this.passwordForm.passwordAgain = newVal
        //     console.log('???xxxxxxxxxx')
        //     console.log(this.passwordForm.passwordAgain)
        // }
    },
    created() {
        if(!sessionStorage.getItem('firstLoad')) {
            const loading = this.$loading({
            lock: true,
            // text: 'Loading',
            text: '努力加载中，请稍等...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
            });
            setTimeout(() => {
            loading.close();
            sessionStorage.setItem('firstLoad', true)
            }, 1000);
        }
        

        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))
        })
        this.startPlay()
        // console.log(this.getSelectList.accountQualitySelectList)



        // 缓存物品栏和货架上的东西
        // if(!sessionStorage.getItem('systemData'))
        // 传票栏
        getOperation({
            parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,4'
        }).then((data)=>{
            if(data.status == 200 && data.data.judgmentRuleReqs) {
                const list = data.data.judgmentRuleReqs.map(item => item.answerId)
                if(list.length) {
                    this.outThingsGoods([...list])
                    this.pushThings({ idArr: [...list], name: 'cultureIn'})
                }
            }
        })
        // 重要空白凭证箱
        getOperation({
            parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,2'
        }).then((data)=>{
            if(data.status == 200 && data.data.judgmentRuleReqs) {
                const list = data.data.judgmentRuleReqs.map(item => item.answerId)
                if(list.length) {
                    // this.pushThings({ idArr: [...list], name: 'cultureIn'})
                    this.pushThingsGoods([...list])
                }
                
            }
        })

        // 普通凭证箱
        getOperation({
            parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,3'
        }).then((data)=>{
            if(data.status == 200 && data.data.judgmentRuleReqs) {
                const list = data.data.judgmentRuleReqs.map(item => item.answerId)
                if(list.length) {
                    this.pushThingsGoods([...list])
                }
                
            }
        })

        // 印章盒 暂时得等Obj对应
        getOperation({
            parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,8'
        }).then((data)=>{
            const stampJudge = {
                18: {add:[24, 21], delete: [14]},
                452:{ add: [432, 433] },
                458:{ add: [419, 418], delete: [426]},
                459:{ add: [478, 477], delete: [407]},
                460:{ add: [466,468,467], delete: [406]},
                463:{ add: [480, 488], delete: [413]},
                464:{ add: [482, 481], delete: [479]},
                444:{ add: [420, 421], delete: [425]},
                445:{ add: [422, 424], delete: [427]},
                446:{ add: [419, 418], delete: [426]},
                447:{ add: [269, 22], delete: [17]},
                455:{ add: [487, 441], delete: [409]},
                456:{ add: [473, 472], delete: [411]},
                457:{ add: [476, 474], delete: [412]}
            }

            if(data.status == 200 && data.data.judgmentRuleReqs) {
                const list = data.data.judgmentRuleReqs.map(item => item.answerId)
                if(list.length) {
                    for(let i=0; i<list.length; i++) {
                        this.outThingsGoods([...stampJudge[list[i]].delete])
                        this.pushThingsGoods([...stampJudge[list[i]].add])
                    }
                }
                
            }
        })

        // 钱箱
        getOperation({
            parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,1'
        }).then((data)=>{
            if(data.status == 200 && data.data.judgmentRuleReqs) {
                const list = data.data.judgmentRuleReqs.map(item => item.answerId)
                if(list.length) {
                    if(this.needBackMoney) {
                        this.pushThingsGoods([...list])
                        this.outThings2({ name: 'moneyBox', index: 0 })
                    }else {
                        this.outThingsGoods([...list])
                        this.pushThings({ idArr: [...list], name: 'moneyBox'})
                    }
                }
                
            }
        })

        // 返还资料
        getOperation({
            parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,556'
        }).then((data)=>{
            if(data.status == 200 && data.data.judgmentRuleReqs) {
                const list = data.data.judgmentRuleReqs.map(item => item.answerId)
                if(list.length) {
                    this.outThingsGoods([...list])
                    this.pushThings({ idArr: [...list], name: 'backPeople'})
                }
                
            }
        })

        
    },
    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.setTipsOperate('非可拖拽的交互！') 
                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) {

                            const id = that.goodsShelfTotalData[evt.oldIndex].id
                            that.outThingsGoods([ id ])
                            that.pushThings({ idArr: [  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.setTipsOperate('非可拖拽的交互！')
                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({
            startPlay: 'system/startPlay',
            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',
            setTipsOperate: 'system/setTipsOperate'
        }),
        voucherCardGetIt(number) {
            if(number === 2) {
                
            }
            this.voucherCardGet = false
        },
        changePeopleJudge() {
            this.peopleJudge = true;
        },
        peopleDoing(peopleDo) {
            this.peopleDo = peopleDo;
            this.peopleJudge = false;
            if(peopleDo === 1) {
                this.showData('客户签字',0)
            }else {
                this.showData('返还资料',0)
            }
        },
        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 =  '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,3'
            //     }
            //     if(type == '系统'){
            //         parentId =  '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,5'
            //     }
            // }else if(type == '身份证扫描仪' || type == '验钞机' || type == '资料' || type == '重要空白凭证箱' || type == '身份证扫描器'){
            //   // this.goodsShelfTotalData = this.auditGoodsShelf
            //     let parentId = ''
            //     if(type == '重要空白凭证箱'){
            //         parentId =  '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,2'
            //     }
            //     if(type == '资料'){
            //         parentId =  '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,11'
            //     }
            //     if(type == '验钞机'){
            //         parentId =  '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,9'
            //     }
            //     if(type == '身份证扫描仪'){
            //         parentId =  '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,7'
            //     }
            //     let param= {
            //         parentId: parentId
            //     }
            // }else if(type == '打印机' || type == '客户签字' ||  type == '印章盒'){
            //   // this.goodsShelfTotalData = this.printoutGoodsShelf
            //     let parentId = ''
            //     if(type == '打印机'){
            //         parentId =  '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,10'
            //     }else if(type == '客户签字'){
            //         parentId =  '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,12'
            //     }else if(type == '返还资料'){
            //         parentId =  '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,12'
            //     }else if(type == '印章盒'){
            //         parentId =  '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,8'
            //     }
            // }else if(type == '钱箱'){
            //     // this.goodsShelfTotalData = this.cashboxGoodsShelf;
            //     let param= {
            //         parentId:  '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',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})
            }
        },
        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) {  //  处理双击事件
                // 有些东西图片不放大
                if(this.controlGoodsDblClickFn) {
                    clearTimeout(this.controlGoodsDblClickFn)
                    this.controlGoodsDblClickFn = null
                }
                
                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
                }
            }else {
                this.controlGoodsDblClickFn = 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;
            const path = sessionStorage.getItem('computerPath')
            if(path) {
                this.$router.push(path)
            }else {
                this.$router.push('/counter/list/manage/consumerClient');
            }
            
            
        },
        popSure(){/* 弹框-确定 */
            // 拦截 由于下面太多没拦截的，所以在这拦截舒服
            if(this.popText.includes('刷卡')) {
                if(this.receptionList.length === 0) {
                    this.setTipsOperate('刷卡失败!请放入银行卡或存折!')
                    return
                }

                for (let i=0;i<this.receptionList.length;i++){
                    if(this.receptionList[i].id !== 16 && this.receptionList[i].id !== 563) {
                        this.setTipsOperate('刷卡失败!请放入银行卡或存折!')
                        return
                    }
                }
            }else if(this.popText.includes('密码器')) {
                // if(this.systemId == '62,1' || this.systemId == '62,2' || this.systemId == '62,3') {
                //     if(this.passwordForm.password2 !== this.passwordForm.passwordAgain) {
                //         this.setTipsOperate('两次输入密码不一致')
                //         return
                //     }
                // }
                if(this.passwordForm.passwordAgain.length !== 6) {
                    this.setTipsOperate('您输入的密码不足6位!')
                    return
                }else if(this.needPasswordAgain && this.passwordForm.password2 !== this.passwordForm.passwordAgain) {
                    this.setTipsOperate('两次输入密码不一致')
                    return
                }
            }else if(this.popText.includes('身份证扫描')) {
                if(this.receptionList.length === 0) {
                    this.setTipsOperate('刷卡失败!请放入身份证!')
                    return
                }
                for (let i=0;i<this.receptionList.length;i++){
                    if(this.receptionList[i].id !== 13 && this.receptionList[i].id !== 442) {
                        this.setTipsOperate('刷卡失败!请放入身份证!')
                        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("getIt"))
                    }
                    this.showManage()
                }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("getIt"))
                    }
                    this.showManage()
                }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("getIt"))
                    }
                    this.showManage()
                }else if (this.$store.state.system.id == '64' && this.popText === '刷卡器'){
                    
                    this.nbm = 64
                    if (this.receptionList.length >0){
                        sessionStorage.setItem('nomCurrentWithdrawalCard', JSON.stringify("getIt"))
                    }
                    this.showManage()
                }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)
                    }
                    this.showManage()
                }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("getIt"))
                    }
                    this.showManage()
                    // 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("getIt"))
                    }
                    this.showManage()
                    // 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)
                    }
                    this.showManage()
                }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("getIt"))
                    }
                    this.showManage()
                }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("getIt"))
                    }
                    this.showManage()
                }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("getIt"))
                            }
                            this.showManage()
                }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("getIt"))
                    }
                    this.showManage()
                }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("getIt"))
                        }
                    }else {
                        if (this.passwordForm.passwordAgain){
                                let accountPassword = '';
                                accountPassword = this.passwordForm.passwordAgain
                                sessionStorage.setItem(name, accountPassword)
                            }
                    }
                    this.showManage()
                    
                }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)
                    }
                    this.showManage()
                }else if (this.$store.state.system.id == '62,1' && this.popText === '刷卡器'){
                this.nbm = 62
                if (this.receptionList.length >0){
                    sessionStorage.setItem('accountVoucher', JSON.stringify("getIt"))
                }
                this.showManage()
                }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)
                }
                this.showManage()
                }else if (this.$store.state.system.id == '62,2' && this.popText === '刷卡器'){
                        this.nbm = 62
                        // this.goodsShelfTotalData = this.auditGoodsShelf
                        
                        if (this.receptionList.length >0){
                            if(this.receptionList[0].id == 563) {
                                sessionStorage.setItem('accountVoucherTwo', JSON.stringify("getIt"))
                            }
                        }
                        this.showManage()
                }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)
                        }
                        this.showManage()
                }else if (this.$store.state.system.id == '62,3' && this.popText === '刷卡器'){
                        this.nbm = 62
                        // this.goodsShelfTotalData = this.auditGoodsShelf
                        if (this.receptionList.length >0){
                            if(this.receptionList[0].id == 563) {
                                sessionStorage.setItem('accountVoucherThree', JSON.stringify("getIt"))
                            }
                        }
                        this.showManage()
                }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)
                        }
                        this.showManage()
                }


                if (this.popText === '刷卡器'){ //刷卡器
                    const formList = []
                    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": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +",287,6,"+this.receptionList[i].id,"type": ""})}
                    let params= {
                        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,6',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    addOperation(params).then((data)=>{
                        this.setTipsOperate('成功刷银行卡!')
                    }).catch((error)=>{
                    })
                }else if (this.popText === '身份证扫描仪'){ //身份证扫描仪
                    const formList = []
                    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": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +",287,7,"+this.receptionList[i].id,"type": ""})}
                    let params= {
                        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,7',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    addOperation(params).then((data)=>{
                        this.setTipsOperate('成功刷身份证!')
                    }).catch((error)=>{
                    })
                }else if (this.popText === '密码器') {
                    this.setTipsOperate('输入密码成功!')
                    
                }
                // this.showGoods = false
                this.changeShowGoods(false)
                
            }else {
                let formList = []
                // this.toggleGoods()
                // this.$message.success(`${this.popText}操作成功！`)
                
                if (this.nbm == 0){ // 客户签字  或者 返还资料

                    let projectId = sessionStorage.getItem('projectId')
                    let startTime = sessionStorage.getItem('startTime')
                    
                    // 如果是在签字，返还资料。
                    if(this.peopleDo === 1) {
                        if(this.goodState.length === 0) {
                            this.setTipsOperate('请放入签字物品!')
                            return
                        }

                        for (var i=0;i<this.goodState.length;i++){formList.push({"answerId":this.goodState[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +",287,555,"+this.goodState[i].id,"type": ""})}
                        const tmpGoods = this.goodState.map(item => item.id)
                        // this.outThings({name: this.myMap, idArr: [ ...tmpGoods ]})
                        // this.pushThingsGoods([...tmpGoods])
                        let params= {
                            parentId:  '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,555',
                            lcJudgmentRuleReq:formList,
                            projectId:+projectId,
                            startTime:startTime,
                        }
                        addOperation(params).then((data)=>{
                            this.setTipsOperate('签字成功!')
                        }).catch((error)=>{
                        })
                    }else {
                        if(this.goodState.length === 0) {
                            this.setTipsOperate('请放入返还资料!')
                            return
                        }
                        for (var i=0;i<this.goodState.length;i++){formList.push({"answerId":this.goodState[i].id, "emptyOne": "", "emptyTwo": "", "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +",287,556,"+this.goodState[i].id,"type": ""})}
                        let params= {
                            parentId:  '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,556',
                            lcJudgmentRuleReq:formList,
                            projectId:+projectId,
                            startTime:startTime,
                        }

                        addOperation(params).then((data)=>{
                            this.setTipsOperate('返还资料成功!')
                        }).catch((error)=>{
                        })
                    }
                }else if (this.nbm == 1){ //传票栏
                    if(this.goodState.length === 0) {
                        this.setTipsOperate('传票栏中未放入物品!')
                        return
                    }
                    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": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +",287,4,"+this.goodState[i].id,"type": ""})}
                    let params= {
                        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,4',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }

                    addOperation(params).then((data)=>{
                        this.setTipsOperate('成功入库')
                    }).catch((error)=>{
                    })
                }else if (this.nbm == 2){ //普通凭证箱
                    let clickList = this.commonChecked
                    this.pushThingsGoods([...clickList])
                    if(clickList.length===0) return this.setTipsOperate(`请选择物品后再确定！`)
                    let projectId = sessionStorage.getItem('projectId')
                    let startTime = sessionStorage.getItem('startTime')
                    const proofBox = JSON.parse(sessionStorage.getItem('proofBox'))
                    let formList = []
                    if(proofBox) {
                        formList.push(...proofBox)
                    }
                    for (var i=0;i<clickList.length;i++){
                        if(formList.findIndex(item => item.answerId === clickList[i]) === -1) {
                            formList.push({ "answerId":clickList[i], "emptyOne": "", "emptyTwo": "", "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +",287,3,"+clickList[i], "type": "" })
                        }
                    }
                    // const proofBox = sessionStorage.setItem('proofBox', JSON.stringify(formList))
                    let params= {
                        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,3',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    const tmp = [...clickList]
                    addOperation(params).then((data)=>{
                        const tmp2 = [];
                        this.commonArr.map(item => {
                            if(tmp.findIndex(item2 => item2 === item.id) !== -1) {
                                tmp2.push(item.name)
                            }
                        })
                        this.setTipsOperate('成功取出:' + tmp2.join(','))
                        sessionStorage.setItem('proofBox', JSON.stringify([...formList]))
                    }).catch((error)=>{
                    })
                    clickList = []
                }else if (this.nbm == 3){ //重要空白凭证箱
                    let clickList=this.importantChecked
                    this.pushThingsGoods([...clickList])
                    if(clickList.length===0) return this.setTipsOperate(`请选择物品后再确定！`)
                    let projectId = sessionStorage.getItem('projectId')
                    let startTime = sessionStorage.getItem('startTime')
                    let formList = []
                    const proofImportantBox = JSON.parse(sessionStorage.getItem('proofImportantBox'))
                    if(proofImportantBox) {
                        formList.push(...proofImportantBox)
                    }
                    for (var i=0;i<clickList.length;i++){
                        if(formList.findIndex(item => item.answerId === clickList[i]) === -1) {
                            formList.push({ "answerId":clickList[i], "emptyOne": "", "emptyTwo": "", "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +",287,2,"+clickList[i], "type": "" })
                        }
                    }
                    let params= {
                        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,2',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    const tmp = [...clickList]
                    addOperation(params).then((data)=>{
                        const tmp2 = []
                        // this.setTipsOperate('成功取货')
                        this.importanceArr.map(item => {
                            if(tmp.findIndex(item2 => item2 === item.id) !== -1) {
                                tmp2.push(item.name)
                            }
                        })
                        sessionStorage.setItem('proofImportantBox', JSON.stringify([...formList]))
                        this.setTipsOperate('成功取出:' + tmp2.join(','))
                        // importanceArr
                    }).catch((error)=>{
                    })
                    clickList = []
                }else if (this.nbm == 4){ //钱箱
                    let projectId = sessionStorage.getItem('projectId')
                    let startTime = sessionStorage.getItem('startTime')
                    let formList = [];
                    if(this.needBackMoney && this.goodState.length === 0) {
                        if(this.goodState.length === 0) {
                            let params= {
                                parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,1',
                                lcJudgmentRuleReq: [
                                    {
                                        "answerId":15,
                                        "emptyOne": "",
                                        "emptyTwo": "",
                                        "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +",287,1,"+15,
                                        "type": "" 
                                    }
                                ],
                                projectId:+projectId,
                                startTime:startTime,
                            }
                            addOperation(params).then((data)=>{
                                this.setTipsOperate('取钱成功!')
                            }).catch((error)=>{
                            })
                        }else {
                            // this.setTipsOperate('你的钱还在钱箱里！')
                        }
                        // 如果需要钱箱取钱并且满足了
                        
                    }else {
                        for (var i=0;i<this.goodState.length;i++){
                            if(this.goodState[i].id !== 15) {
                                this.setTipsOperate('请放入现金!')
                                return
                            }
                            formList.push(
                                {
                                    "answerId":this.goodState[i].id,
                                    "emptyOne": "",
                                    "emptyTwo": "",
                                    "operationIds": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +",287,1,"+this.goodState[i].id,
                                    "type": "" 
                                }
                            )
                        }
                        if(this.goodState.length > 0) {
                            let params= {
                                parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,1',
                                lcJudgmentRuleReq:formList,
                                projectId:+projectId,
                                startTime:startTime,
                            }
                            addOperation(params).then((data)=>{
                                this.setTipsOperate('存入成功!')
                            }).catch((error)=>{
                            })
                        }else {
                            // this.setTipsOperate('')
                        }
                    }
                }else if (this.nbm == 5){ //印章盒
                    if(this.goodState.length === 0) {
                        this.setTipsOperate('请放入证件进行盖章!')
                        return 
                    }
                    if(this.sealChecked.length === 0) {
                        this.setTipsOperate('请选择印章!')
                        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){ //验钞机
                    if(this.goodState.length === 0 || this.goodState[0].id !== 15) {
                        this.setTipsOperate('请放入现金!')
                        return
                    }
                    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": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +",287,9,"+this.goodState[i].id,"type": ""})}
                    let params= {
                        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,9',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    addOperation(params).then((data)=>{
                        this.setTipsOperate('验钞成功!')
                    }).catch((error)=>{
                    })

                    // that.outThingsGoods([that.goodsShelfTotalData[evt.oldIndex].id])
                }else if (this.nbm == 7){ //打印机
                    if(this.goodState.length === 0) {
                        this.setTipsOperate('请放入打印资料')
                        return
                    }
                    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": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +",287,10,"+this.goodState[i].id,"type": ""})}
                    let params= {
                        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,10',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    addOperation(params).then((data)=>{
                        this.setTipsOperate('打印成功!')
                    }).catch((error)=>{
                    })
                }else 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": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +",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.setTipsOperate('成功输入密码!')
                            }
                        }
                    }else{
                        this.setTipsOperate('两次输入密码不一致!')
                    }
                }else if (this.nbm == 9){//资料
                    if(this.goodState.length === 0) {
                        this.setTipsOperate('请放入资料!')
                        return
                    }
                    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": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +",287,11,"+this.goodState[i].id,"type": ""})}
                    let params= {
                        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,11',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    addOperation(params).then((data)=>{
                        this.setTipsOperate('成功审核资料!')
                    }).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": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +",287,6,"+this.receptionList[i].id,"type": ""})}
                    let params= {
                        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,6',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    addOperation(params).then((data)=>{
                        this.setTipsOperate('刷卡成功!')
                    }).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": "285," + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +",287,7,"+this.receptionList[i].id,"type": ""})}
                    let params= {
                        parentId: '285,' + this.$store.state.system.businessSelect[this.$store.state.system.businessKey].id   +  ',287,7',
                        lcJudgmentRuleReq:formList,
                        projectId:+projectId,
                        startTime:startTime,
                    }
                    addOperation(params).then((data)=>{
                        this.setTipsOperate('验证身份成功!')
                    }).catch((error)=>{
                    })
                }else{
                    // this.goodsShelfTotalData = this.auditGoodsShelf
                    
                }
                // 如果不是钱箱或传票栏或印章盒或传票栏或客户，刷卡后返回
                if(this.nbm !== 4 && this.nbm!== 1 && this.nbm!== 5 && this.nbm!== 1 && !(this.nbm === 0 && this.peopleDo !== 1)) {
                    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' + '?' + window.location.href.split('?')[1])
        },
        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
        },
        // inputListenCard(val, prop) {
        //     const tmpCheck = val.substr(val.length-1, 1);
        //     if(tmpCheck === ' ') {
        //         return;
        //     }
        //     if(val === '') {
        //         this[prop] = val;
        //         return;
        //     }
        //     const tmpGet = Number(val.replace(/\D+/, ''))
        //     if(tmpGet <= 2 && tmpGet>0) {
        //         this[prop] = tmpGet
        //     }else {
        //         this.setTipsOperate('最多只能取出两张')
        //         this[prop] = 2
        //     }
            
        // }
    }
};
</script>

<style lang="scss" scoped>
.password-wrap {
  position: relative;
  .password-input {
    font-family: 'password';
  }
  .view {
    position: absolute;
    top: 13px;
    right: 12px;
    cursor: pointer;
  }
}
.contentHeight {
    max-width: 300px;
    max-height: 60px;
}

.businessClass {
    width: 300px;
    height: 100px;
    background-color: skyblue;
    text-align: center;
    line-height: 100px;
    font-size: 23px;
}
@media screen and (min-width: 1200px) and (max-width: 1919px) {
    .computerContent{
        position: absolute;top: 10vh;width:200px;left: -10vw;z-index:100;
    }
    
}
@media screen and (min-width: 1920px) {
    .computerContent{
        position: absolute;top: -10px;width:200px;left: -100px;z-index:100;
    }
}

.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;
            z-index: 100;
        }
        .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;
            z-index: 60;
        }
        .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 {
            z-index: 100!important;
            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;
        }
        
        .card-machine {
            top: 48vh;
            left: 54vw;
            width: 6vw;
        }
        .idCard-scanner {
            top: 53vh;
            left: 58vw;
            width: 6vw;
        }
        .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: 1297px){
    .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;
        }
        .card-machine {
            top: 48vh;
            left: 54vw;
            width: 6vw;
        }
        .idCard-scanner {
            top: 53vh;
            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: 46vh;
            left: 39vw;
            width: 283px;
            position: absolute;
        }
        .employeeText {
            // 资料文字
            position: absolute;
            top: 56vh;
            left: 53vw;
            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;
            z-index: 200;

        }
        .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;
            z-index: 300;
        }
        .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: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 40px;
        // height: 150px;
        height: 130px;
        cursor: pointer;
        z-index: 998;
        background-color: rgb(87, 134, 252);
        border-radius: 5px;
        // background: url(../../../assets/img/sth-bg.png) 0 0/100% 100% no-repeat;
        background-size: 40px 130px;
        span {
            width: 16px;
            line-height: 18px;
            margin-bottom: 10px;
            color: #fff;
            font-size: 16px;
            text-align: center;
        }
        .icon {
            width: 28px;
            transition: all 0.5s;
        }
        &:hover {
            opacity: 0.9;
        }
        &.active {
            
            .icon {
                transform: rotate(180deg);
                
            }
        }
    }
    .goods-dia {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        position: fixed;
        bottom: 0;
        left: -100%;
        padding: 20px 300px   20px 300px;
        transition: all 0.5s;
        background-color: rgba(255, 255, 255, 0.95);
        min-height: 140px;
        .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%;
                overflow-x: hidden;
                text-overflow: ellipsis;
                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{
    max-width: 100%;
    margin-top: 20px;
}
.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;
    margin-top: 2vh;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 0 15px 15px;
    z-index: 2900;
    // border: 1px solid #e6e6e6;
    // border-color: black;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 0 8px rgba(0, 0, 0, .04);
    // max-height: 600px;
    //overflow: auto;
    .dia-header {
        position: relative;
        .data-title {
            height:50px;
            width: 250px;
            margin: 0 auto;
            line-height: 50px;
            text-align: center;
            color: #fff;
            font-size: 18px;
            background: url(../../../assets/img/dia-title.png) 0 0 / cover no-repeat;
            // background: url(../../../assets/img/dia-title.png);
            background-size: 250px 50px;
        }
        .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;
        border-top-left-radius:14px;
        border-top-right-radius:14px;
        .data-title2 {
            position: absolute;
            left: 15px;
            height: 50px;
            line-height: 50px;
            color:#fff;
        }
        .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: 18px;
        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;
        min-height: 35vh;
        overflow: auto;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        .box{
            border: 2px solid #e6e6e6;
            width: 45%;
            min-height: 40vh;
            border-radius: 10px;
            padding: 10px;

            height: 100%;
            // opacity: 0.5;
            background: #FCFCFC;
            border: 4px solid #DBDBDB;
            border-radius: 16px;
        }
        .left{
            display: flex;
            width: 50%;
            flex-wrap: wrap;
            // max-height: 35vh;
            // 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;
                    height: 70px;
                    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%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .else{
            width: 100%;
        }
        .img-wrap2{
            width: 95%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            img {
                width: 300px;
                height: 200px;
            }
            // .el-image {
            //     img {
            //         min-height: 500px;
            //     }
            // }
            // .fileSeal {
            //     min-height: 50%;
            // }
        }
    }
    .dia-footer {
        margin-top: 30px;
        text-align: center;
        button {
            width: 7vw;
        }
        // button {
        //     width: 100px;
        //     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;
        }
    }
    .dia-footer3 {
        height: 70px;
        line-height: 70px;
        display: flex;
        justify-content: center;
        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: -3%;
            left: 50%;
            min-height: 65vh;
            z-index: 9980;
            .seal{
                margin-top: -5vh;
                // max-height: 40vh;
                //overflow: auto;
                //display: flex;
                //justify-content: space-around;
                //flex-wrap: wrap;
                .left{
                    min-height: 35vh;
                    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;
                    min-height: 50vh;
                    border-radius: 10px;
                    padding: 10px;

                    // opacity: 0.5;
                    background: #FCFCFC;
                    border: 4px solid #DBDBDB;
                    border-radius: 16px;
                }
                .else{
                    width: 100%;
                }
            }
            .dia-footer {
                //position: absolute;
                //bottom: 1vh;
                //left: 50%;
                //transform: translateX(-50%);
            }
        }
    }

.systemconfig {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 900;
}    
.system {
    margin-top: -8vh;
    top: 12%;
    width: 1280px;
}
.fullScreenSystem {
    width: 100vw;
    height: 200vh;
    margin-top: 0;
    top: 0%;
    // left: 50%;
    // 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: 120px;
cursor: pointer;
background:url(../../../assets/img/lobby-btn-bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
line-height: 45px;
font-size: 20px;
text-align: center;
color: #fff;

&:hover{
    opacity: .9;
}
}

.imgIndex {
    z-index: 9999!important;
}
/deep/.z500 {
    z-index: 5000;
}
</style>