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

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

        <!-- 系统录入 -->
        <el-tooltip placement="top" popper-class="sth-popper">
            <div slot="content">
                <img style="height: 178px;position:relative;top:-450px;right:20px" v-lazy="lazyImg[3]" alt="" />
            </div>
            <img @click="showManage" class="sth computer cp" v-lazy="lazyImg[4]" alt="" />
        </el-tooltip>

        <el-tooltip placement="top" popper-class="sth-popper" offset="50">
            <div slot="content">
                <img v-lazy="lazyImg[5]" alt="" />
            </div>
            <img class="sth summons cp" v-lazy="lazyImg[6]" alt="" @click="showData('传票箱',1)" />
        </el-tooltip>

        <el-tooltip placement="top-start" popper-class="sth-popper" offset="250">
            <div slot="content">
                <img v-lazy="lazyImg[7]" alt="" />
            </div>
            <img class="sth voucher-box cp" v-lazy="lazyImg[8]" alt="" @click="showData('普通凭证箱',2)" />
        </el-tooltip>

        <el-tooltip placement="top-start" popper-class="sth-popper" offset="250">
            <div slot="content">
                <img v-lazy="lazyImg[9]" alt="" />
            </div>
            <img class="sth important cp" v-lazy="lazyImg[10]" alt="" @click="showData('重要空白凭证箱',3)" />
        </el-tooltip>

        <el-tooltip placement="left-start" popper-class="sth-popper">
            <div slot="content">
                <img v-lazy="lazyImg[11]" alt="" />
            </div>
            <img class="sth money-box cp" v-lazy="lazyImg[12]" alt="" @click="showData('钱箱',4)" />
        </el-tooltip>

        <el-tooltip placement="top" popper-class="sth-popper" offset="-100">
            <div slot="content">
                <img v-lazy="lazyImg[13]" alt="" />
            </div>
            <img class="sth seal-box cp" v-lazy="lazyImg[14]" @click="showData('印章盒',5)" alt="" />
        </el-tooltip>

        <el-tooltip placement="top" popper-class="sth-popper" offset="-100">
            <div slot="content">
                <img v-lazy="lazyImg[15]" alt="" />
            </div>
            <img class="sth currency-detector cp" v-lazy="lazyImg[16]" @click="showData('验钞机',6)" alt="" />
        </el-tooltip>

        <el-tooltip placement="top" popper-class="sth-popper" offset="-400">
            <div slot="content">
                <img v-lazy="lazyImg[17]" alt="" />
            </div>
            <img class="sth printer cp" v-lazy="lazyImg[18]" alt="" @click="showData('打印机',7)" />
        </el-tooltip>

        <el-tooltip placement="top" popper-class="sth-popper" offset="50">
            <div slot="content">
                <img v-lazy="lazyImg[19]" alt="" />
            </div>
            <img class="sth cipher-machine cp" v-lazy="lazyImg[20]" @click="showData('密码器',8)" alt="" />
        </el-tooltip>

        <el-tooltip placement="top" popper-class="sth-popper" offset="50">
            <div slot="content">
                <div class="businessClass">展示业务列表</div>
            </div>
            <img class="sth employee" v-lazy="lazyImg[21]" @click="selectBusiness(true)" alt="" />
        </el-tooltip>

        

        <el-tooltip placement="top" popper-class="sth-popper" offset="-50">
            <div slot="content">
                <img v-lazy="lazyImg[22]" alt="" />
            </div>
            <p class="employeeText" @click="showData('资料',9)">资料</p>
        </el-tooltip>

        <el-tooltip placement="top" popper-class="sth-popper" offset="00">
            <div slot="content">
                <img v-lazy="lazyImg[23]" alt="" />
            </div>
            <img class="sth card-machine cp" v-lazy="lazyImg[24]" alt="" @click="showData('刷卡器',10)" />
        </el-tooltip>

        <el-tooltip placement="top" popper-class="sth-popper" offset="-100">
            <div slot="content">
                <img v-lazy="lazyImg[25]" alt="" />
            </div>
            <img class="sth idCard-scanner cp" v-lazy="lazyImg[26]" @click="showData('身份证扫描仪',11)" alt="" />
        </el-tooltip>

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

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

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

            <div v-else-if="popText==='重要空白凭证箱'" class="seal" style="width:1200px;">
                <div class="left else">
                    <div v-for="(item, index) in importanceArr" :key="index" :class="{ checked: importantChecked.includes(item.id),file:true, importanceArrClass: true }" @click="dblClickFn(item)">
                        <img :src="item.src" alt="" />
                        <p>{{item.name}}</p>
                    </div>
                </div>
            </div>

            <div v-else-if="popText==='普通凭证箱'" class="seal" style="width:1200px;">
                <div class="left else">
                    <div v-for="(item, index) in commonArr" :key="index" :class="{ checked: commonChecked.includes(item.id),file:true }" @click="dblClickFn(item)">
                        <img :src="item.src" alt="" />
                        <p>{{item.name}}</p>
                    </div>
                </div>
            </div>
            <!-- 暂时未确定是否公共使用一个弹框 -->
            <div v-else class="list" ref="popUp"><!-- 钱箱 / 传票栏 ... 一系列可存物品弹框 -->
                <div class="img-wrap" :class="{ checked: commonChecked.includes(item.id),'img-wrap':true }" @click='dislodgeItem(index)' v-for="(item, index) in receptionList" :key="index" v-if="receptionList.length" >
                    <img :src="item.src" class="file"  alt="" />
                    <p class="text">{{item.name}}</p>
                </div>
            </div>

            <div class="dia-footer">
                <button v-throttle @click="popSure" type="button">确定</button>
            </div>
        </div>

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

        <!-- 商业银行系统的全屏功能实现 -->
        <div :class="full ? 'fullScreenSystem' : 'system'" v-if="manageVisible">
            <router-view></router-view>
        </div>
        <el-dialog
            custom-class="data-dia"
            :visible.sync="showImg"
            width="45%"
            >
            <img :src="imgSrc" class="imgPop" alt="">
        </el-dialog>

        <!-- 业务选择 --弹框 -->
        <el-dialog :visible.sync="showBusiness" style="width: 100%" @close="closeData" :close-on-click-modal="false" :show-close="false" custom-class="data-dia">
            <div slot="title" class="dia-header2">
                <div class="data-title2">请选择系统</div>
                <div class="close"><img v-lazy="lazyImg[28]" alt="" @click="selectBusiness(false)" /></div>
            </div>
            <p class="tips2">python程序设计 | 请选择您要做的项目实验</p>
            <ul class="take-list2">
                <li v-for="(item, index) in businessArr" :class="{checked: takeCheck == index}" :key="index" @click="checkTake(index)">
                    <img v-lazy="item.img" alt="">
                    <p>{{ item.text}}</p>
                </li>
            </ul>
            <div class="dia-footer2">
                <div class='busyButtonBox'>
                    <el-button @click="selectBusiness(false)">取消</el-button>
                    <el-button type="primary" @click="selectBusiness(false)">确定</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

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

export default {
    name: 'index',
    components: {
        manage: manage,
        backButton
    },
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.passwordForm.password&&/^[0-9]*$/.test(this.passwordForm.password)&&this.passwordForm.password.length===6) {
                    // this.$refs.passwordForm.validateField('password');
                    callback();
                }else{
                    callback(new Error('请注意密码格式以及密码长度'))
                }
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value.length < 6) {
                callback(new Error('两次输入密码不一致!'));
            } else  if(value  !== this.passwordForm.password){
                callback(new Error('两次输入密码不一致!'));
            }else{
                callback();
            }
        };
        return {
            takeCheck: -1, // 选择业务逻辑
            businessArr: [ 
                {
                    img: require('@/assets/svg/cash.svg'),
                    text: '第一个'
                },
            ],            // 选择业务逻辑
            showBusiness: false,
            manageVisible: false, // 显示系统录入
            checkList: [],// 物品栏选中
            elseBoxCheck:[],/* 所有其他可从物品栏拖拽物品进入的弹框 */
          //身份证扫描仪//审核资料//验钞机//选择重要空白凭证
          auditGoodsShelf:[
              {name:'身份证', src:require('@/assets/img/goods/idcard.png'), id:13},
              {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},
              {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},
              {name:'身份证复印件', src:require('@/assets/img/idCard-copy-sm.png'), id:23},
          ],
          //打印资料 //客户签字 //印章盒
          printoutGoodsShelf:[
              {name:'身份证', src:require('@/assets/img/goods/idcard.png'), id:13},
              {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},
              {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},
                {name:'现金', src:require('@/assets/img/goods/cash-sm.png'), id:15},
                {name:'身份证复印件', src:require('@/assets/img/idCard-copy-sm.png'), id:23},
            ],
          // 总盒子里面的东西
          goodsShelfTotalData:[
              {name:'身份证', src:require('@/assets/img/goods/idcard.png'), id:13},
              {name:'开户申请书', src:require('@/assets/img/goods/khsqs.png'), id:14},
              {name:'现金', src:require('@/assets/img/goods/cash-sm.png'), id:15},
              {name:'身份证复印件', src:require('@/assets/img/idCard-copy-sm.png'), id:23},
          ],
            // goods:[/* 物品栏物品 */
            // ],
            popArr:[/* 弹窗展示的物品 */
                {name:'银行卡',src:require('@/assets/img/goods/bankCard.png'),id:16},
                {name:'定期存单',src:require('@/assets/img/seal/paid.png'),id:19},
                {name:'预留印签卡',src:require('@/assets/img/seal/paid.png'),id:'预留印签卡'},
                {name:'转账支票',src:require('@/assets/img/goods/xd-zzzp.png'),id:'转账支票'},
                {name:'银行承兑汇票',src:require('@/assets/img/seal/paid.png'),id:30},
                {name:'现金支票',src:require('@/assets/img/goods/xjzp.png'),id:'现金支票'},
                // {name:'存款凭条',src:require('@/assets/img/seal/paid.png'),id:'存款凭条'},
                {name:'取款凭条',src:require('@/assets/img/goods/qkpt.png'),id:'取款凭条'},
                {name:'转账凭条',src:require('@/assets/img/goods/zzpt.png'),id:'转账凭条'},
                {name:'业务收费凭证',src:require('@/assets/img/goods/ywsfpz.png'),id:'业务收费凭证'},
                {name:'利息清单',src:require('@/assets/img/goods/lxqd.png'),id:'利息清单'},
                {name:'普通空白凭证',src:require('@/assets/img/goods/ptkbpz.png'),id:'普通空白凭证'},
                {name:'身份证',src:require('@/assets/img/goods/idcard.png'),id:13},
                {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},
            ],
          receptionList:[

          ],
            sealArr:[/* 印章盒物品 */
                {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},
                {name:'定期存单',src:require('@/assets/img/seal/paid.png'),id:19},
                {name:'预留印签卡',src:require('@/assets/img/seal/paid.png'),id:'预留印签卡'},
                {name:'转账支票',src:require('@/assets/img/goods/xd-zzzp.png'),id:'转账支票'},
                {name:'银行承兑汇票',src:require('@/assets/img/seal/paid.png'),id:30},
                {name:'现金支票',src:require('@/assets/img/goods/xjzp.png'),id:'现金支票'},
            ],
            commonArr:[/* 普通凭证箱 */
                {name:'存款凭条',src:require('@/assets/img/seal/paid.png'),id:17},
                {name:'取款凭条',src:require('@/assets/img/goods/qkpt.png'),id:'取款凭条'},
                {name:'转账凭条',src:require('@/assets/img/goods/zzpt.png'),id:'转账凭条'},
                {name:'业务收费凭证',src:require('@/assets/img/goods/ywsfpz.png'),id:'业务收费凭证'},
                {name:'利息清单',src:require('@/assets/img/goods/lxqd.png'),id:'利息清单'},
                {name:'普通空白凭证',src:require('@/assets/img/goods/ptkbpz.png'),id:'普通空白凭证'},
            ],
            sealChecked:[],/* 印章盒选中 */
            importantChecked:[],// 重要凭证选中
            commonChecked:[],// 普通凭证选中
            passwordForm:{
                password:'',
                passwordAgain: ''
            },
            passwordRules:{
                password:[
                    {  validator: validatePass, trigger: 'blur' },
                ],
                passwordAgain:[
                    { validator: validatePass2, trigger: 'blur' },
                ]
            },
            clickNum: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')
            ]
        };
    },
    computed: {
        full: function () {// 全屏
            return this.$store.state.system.fullScreen;
        },
        showPop:function(){/* 展示弹框 */
            this.receptionList = []
            if(this.$store.state.system.popText == '刷卡器'){
                if (this.$store.state.system.id == '62,1'){
                    this.nbm = 62
                    let param= {
                        parentId: '285,287,5,26,57,62,75'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let accountVoucher = sessionStorage.getItem('accountVoucher')
                            this.receptionList = JSON.parse(accountVoucher);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (this.$store.state.system.id == '63'){
                    this.nbm = 63
                    let param= {
                        parentId: '285,287,5,26,57,63,78'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let nomBusinessDepositCard = sessionStorage.getItem('nomBusinessDepositCard')
                            this.receptionList = JSON.parse(nomBusinessDepositCard);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (this.$store.state.system.id == '64'){
                    this.nbm = 64
                    let param= {
                        parentId: '285,287,5,26,57,64,85'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let nomCurrentWithdrawalCard = sessionStorage.getItem('nomCurrentWithdrawalCard')
                            this.receptionList = JSON.parse(nomCurrentWithdrawalCard);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (this.$store.state.system.id == '65'){
                    this.nbm = 65
                    let param= {
                        parentId: '285,287,5,26,57,65,94'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let nomCurrentTransferCard = sessionStorage.getItem('nomCurrentTransferCard')
                            this.receptionList = JSON.parse(nomCurrentTransferCard);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (this.$store.state.system.id == '66'){
                    this.nbm = 66
                    let param= {
                        parentId: '285,287,5,26,57,66,103'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let nomCurrentSettleCard = sessionStorage.getItem('nomCurrentSettleCard')
                            this.receptionList = JSON.parse(nomCurrentSettleCard);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (this.$store.state.system.id == '67,1'){
                    this.nbm = 67
                    let param= {
                        parentId: '285,287,5,26,57,67,113'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let nomCurrentCancellCard1 = sessionStorage.getItem('nomCurrentCancellCard1')
                            this.receptionList = JSON.parse(nomCurrentCancellCard1);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (myConfig[this.$store.state.system.id]){
                    const { nbm, parentId, name } = myConfig[this.$store.state.system.id]
                    this.nbm = nbm
                    let param= {
                        parentId
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            let tmpName = sessionStorage.getItem(name)
                            if(tmpName) {
                                this.receptionList = JSON.parse(tmpName);
                            }else {
                                var list = data.data.judgmentRuleReqs
                                for(var j=0;j<list.length;j++){
                                    for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                        if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                            this.receptionList.push(this.goodsShelfTotalData[i])
                                        }
                                    }
                                }
                            }
                            
                        }else{
                            let tmpName = sessionStorage.getItem(name)
                            this.receptionList = JSON.parse(tmpName);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else{
                    let dataList = JSON.parse(sessionStorage.getItem('dataList'));
                    if (dataList){
                        this.receptionList = []
                        for(var j=0;j<dataList.length;j++){
                            for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                if(dataList[j].answerId == this.goodsShelfTotalData[i].id){
                                    this.receptionList.push(this.goodsShelfTotalData[i])
                                }
                            }
                        }
                    }
                }
            }
            if(this.$store.state.system.popText == '密码器'){
                if(this.$store.state.system.id == '62,1'){
                    
                }else if(this.$store.state.system.id == '64'){
                    let nomCurrentWithdrawalPassword = sessionStorage.getItem('nomCurrentWithdrawalPassword');
                    if(nomCurrentWithdrawalPassword){
                        this.passwordForm.password = nomCurrentWithdrawalPassword
                        this.passwordForm.passwordAgain = nomCurrentWithdrawalPassword
                    }
                }else if(this.$store.state.system.id == '65'){
                    let nomCurrentTransferPassword = sessionStorage.getItem('nomCurrentTransferPassword');
                    if(nomCurrentTransferPassword){
                        this.passwordForm.password = nomCurrentTransferPassword
                        this.passwordForm.passwordAgain = nomCurrentTransferPassword
                    }
                }else if(this.$store.state.system.id == '66'){
                    let nomCurrentSettlePassword = sessionStorage.getItem('nomCurrentSettlePassword');
                    if(nomCurrentSettlePassword){
                        this.passwordForm.password = nomCurrentSettlePassword
                        this.passwordForm.passwordAgain = nomCurrentSettlePassword
                    }
                }else if(myConfig[this.$store.state.system.id]){
                    const { name } = myConfig[this.$store.state.system.id]
                    let nomCurrentSettlePassword = sessionStorage.getItem(name);
                    if(nomCurrentSettlePassword){
                        this.passwordForm.password = nomCurrentSettlePassword
                        this.passwordForm.passwordAgain = nomCurrentSettlePassword
                    }
                }else{
                    let accountPasswordAll = sessionStorage.getItem('accountPasswordAll');
                    if(accountPasswordAll){
                        this.passwordForm.password = accountPasswordAll
                        this.passwordForm.passwordAgain = accountPasswordAll
                    }
                }
            }
            if(this.$store.state.system.popText == '身份证扫描仪' || this.$store.state.system.popText.includes('身份证扫描') || this.$store.state.system.popText.includes('银行')){
                if (this.$store.state.system.id == '33'){
                    this.nbm = 33
                    let param= {
                        parentId: '285,287,5,25,33,41'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let nomClientIdentity = sessionStorage.getItem('nomClientIdentity')
                            this.receptionList = JSON.parse(nomClientIdentity);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (this.$store.state.system.id == '34'){
                    this.nbm = 34
                    let param= {
                        parentId: '285,287,5,25,34,54'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let firmClientIdentity = sessionStorage.getItem('firmClientIdentity')
                            this.receptionList = JSON.parse(firmClientIdentity);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (this.$store.state.system.id == '67,2'){
                    this.nbm = 67
                    let param= {
                        parentId: '285,287,5,26,57,67,116'
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            var list = data.data.judgmentRuleReqs
                            for(var j=0;j<list.length;j++){
                                for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                    if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                        this.receptionList.push(this.goodsShelfTotalData[i])
                                    }
                                }
                            }
                        }else{
                            let nomCurrentCancellCard2 = sessionStorage.getItem('nomCurrentCancellCard2')

                            this.receptionList = JSON.parse(nomCurrentCancellCard2);
                            
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                }else if (myConfig[this.$store.state.system.id]){
                    const { nbm, parentId, name } = myConfig[this.$store.state.system.id]
                    this.nbm = nbm
                    let param= {
                        parentId
                    }
                    getOperation(param).then((data)=> {
                        if (data.data.status == 200) {
                            let tmpName = sessionStorage.getItem(name)
                            if(tmpName) {
                                this.receptionList = JSON.parse(tmpName);
                            }else {
                                var list = data.data.judgmentRuleReqs
                                for(var j=0;j<list.length;j++){
                                    for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                        if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                            this.receptionList.push(this.goodsShelfTotalData[i])
                                        }
                                    }
                                }
                            }
                            
                        }else{
                            let tmpName = sessionStorage.getItem(name)
                            this.receptionList = JSON.parse(tmpName);
                            if(this.receptionList == null){
                                this.receptionList = []
                            }
                        }
                    }).catch((error)=>{
                    })
                    // const { nbm, name } = myConfig[this.$store.state.system.id]
                    // this.nbm = nbm
                    // let tmpName = sessionStorage.getItem(name)
                    // this.receptionList = JSON.parse(tmpName);
                    
                    // if(this.receptionList == null){
                    //     this.receptionList = []
                    // }
                }else{
                    let dataList = JSON.parse(sessionStorage.getItem('dataList'));
                    if (dataList){
                        this.receptionList = []
                        for(var j=0;j<dataList.length;j++){
                            for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                if(dataList[j].answerId == this.goodsShelfTotalData[i].id){
                                    this.receptionList.push(this.goodsShelfTotalData[i])
                                }
                            }
                        }
                    }
                }
            }
            if(!this.showGoods) this.checkList = []
            return this.$store.state.system.showPop;
        },
        popText:function(){/* 文字 */
            return this.$store.state.system.popText;
        },
        id:function(){/* 文字 */
            return this.$store.state.system.id;
        },
        goods:function () {/* 物品栏的物品 */
            return this.$store.state.system.goods
        },
        showGoods:function() {
            return this.$store.state.system.showGoods
        },
        goodsOpen:function () {/* 物品栏的物品 */
            return this.$store.state.system.goodsOpen
        },
    },
    watch: {
        '$route.path': function (val) {
            // 控制弹框显隐
            let arr = val.split('/').slice(-2);
            if (arr.pop() === 'manage' || arr[0] === 'manage') {
                this.manageVisible = true;
            } else {
                this.manageVisible = false;
            }
        },
        manageVisible(newVal) {
            if(newVal === false) {
                this.changeShowGoods(false)
            }
        },
        showPop(newVal) {
            if(newVal) {
                if(this.popText === '重要空白凭证箱') {
                    this.$nextTick(() => {
                        const importanceArrClassArr = document.getElementsByClassName('importanceArrClass')
                        for(let i=0;i<this.importanceArr.length;i++) {
                            new Sortable(importanceArrClassArr[i], {
                                animation: 150,
                                group: {
                                    name:'shared',
                                    pull:'clone',// 是否可以被移出或克隆
                                    put:false// 禁止拖入
                                },
                                sort: false,// 禁止排序
                                onEnd: evt => { // 结束拖拽
                                    if(this.judgePosition(evt)){
                                        const getIt = evt.target.textContent
                                        for(var i=0;i<this.goods.length;i++){
                                            if (this.goods[i].name == getIt){
                                                return this.$message.warning('物品栏中已有该物品')
                                            }
                                        }
                                        for(let i=0;i<this.popArr.length; i++) {
                                            if(this.popArr[i].name === getIt) {
                                                this.$store.commit('system/changeGoods',{push:[this.popArr[i]]})
                                                return 
                                            }
                                        }
                                    }else{
                                        this.$message.warning('非可拖拽的交互！') 
                                    }
                                }
                            })
                        };
                    })
                }
            }
        }
    },
    created() {
        let arr = this.$route.path.split('/').slice(-2);
        if (arr.pop() === 'manage' || arr[0] === 'manage') {
            this.manageVisible = true;
        } else {
            this.manageVisible = false;
        }
    },
    mounted(){
        let that = this
        // 拖拽-物品栏
        new Sortable(this.$refs.goods, {
            animation: 150,
            group: {
                name:'shared',
                pull:'clone',// 是否可以被移出或克隆
                put:false// 禁止拖入
            },
            sort: false,// 禁止排序
            onEnd: function (/**Event*/evt) { // 结束拖拽
                // 判断拖拽的地址
                if(!that.$refs.popUp) return that.$message.warning('非可拖拽的交互！') 
                let targetDom = that.$refs.popUp.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.checkList.push(that.goodsShelfTotalData[evt.oldIndex].name)
                        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])
                                }
                            }
                        }
                    }
                }
            },
        });
        // (item, index) in importanceArr" :ref="'importanceArr'+index
        // 拖拽-弹框
        new Sortable(this.$refs.popUp, {
            animation: 150,
            group: {
                name:'shared',
                pull:'clone',// 是否可以被移出或克隆
                put:false
            },
            sort: false,// 禁止排序
            // 结束拖拽
            onEnd: function (/**Event*/evt) {
                if(!that.$refs.goods) return that.$message.warning('非可拖拽的交互！')
                let targetDom = that.$refs.goods.getBoundingClientRect()
                if(evt.originalEvent.pageX<targetDom.right&&evt.originalEvent.pageX>targetDom.left){
                    if(evt.originalEvent.pageY<targetDom.bottom&&evt.originalEvent.pageY>targetDom.top){
                        /* oldindex识别是拖拽了哪个文件 */
                        console.log(evt)
                        console.log(that.importanceArr)
                        console.log(that.goodsShelfTotalData)
                        console.log(that.importanceArr[evt.oldIndex].name,'执行拖拽2');
                        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])
                        }
                    }
                }
                // // 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({
            changeShowGoods: 'system/changeShowGoods',
            setGoodsOpen: 'system/setGoodsOpen',
            removeGoodsOpen: 'system/removeGoodsOpen',
            addGoodsOpen: 'system/addGoodsOpen',
        }),
        checkTake(index){
            this.takeCheck = index
        },
        selectBusiness(turn) {
            this.showBusiness = turn;
        },
        dislodgeItem(index){
            this.receptionList.splice(index,1);
        },
        toggleGoods() {
            this.changeShowGoods(!this.showGoods)
        },
        showData(type,nbm) {/* 展示弹窗-type为弹窗标题文字 */
          this.nbm = nbm
            if(type == '普通凭证箱' || type == '系统'){
                this.goodsShelfTotalData = this.systemInputGoodsShelf
                let parentId = ''
                if(type == '普通凭证箱'){
                    parentId = '285,287,3'
                }
                if(type == '系统'){
                    parentId = '285,287,5'
                }
            }else if(type == '身份证扫描仪' || type == '验钞机' || type == '资料' || type == '重要空白凭证箱' || type == '身份证扫描器'){
              this.goodsShelfTotalData = this.auditGoodsShelf
                let parentId = ''
                if(type == '重要空白凭证箱'){
                    parentId = '285,287,2'
                }
                if(type == '资料'){
                    parentId = '285,287,11'
                }
                if(type == '验钞机'){
                    parentId = '285,287,9'
                }
                if(type == '身份证扫描仪'){
                    parentId = '285,287,7'
                }
                let param= {
                    parentId: parentId
                }
            }else if(type == '打印机' || type == '客户签字' ||  type == '印章盒'){
              this.goodsShelfTotalData = this.printoutGoodsShelf
                let parentId = ''
                if(type == '打印机'){
                    parentId = '285,287,10'
                }
                if(type == '客户签字'){
                    parentId = '285,287,12'
                }
                if(type == '印章盒'){
                    parentId = '285,287,8'
                }
            }else if(type == '钱箱'){
                this.goodsShelfTotalData = this.cashboxGoodsShelf;
                let param= {
                    parentId: '285,287,1'
                }
                getOperation(param).then((data)=> {
                    if (data.data.status == 200) {
                        var list = data.data.judgmentRuleReqs
                        for(var j=0;j<list.length;j++){
                            for(var i=0;i<this.goodsShelfTotalData.length;i++){
                                if(list[j].answerId == this.goodsShelfTotalData[i].id){
                                    this.receptionList.push(this.goodsShelfTotalData[i])
                                }
                            }
                        }
                    }else{
                        this.receptionList = []
                    }
                }).catch((error)=>{
                })
            }
            this.changeShowGoods(true)
            if(type !== '系统') {
                this.$store.commit('system/changePop',{show:true,text:type})
            }
        },
        checkData(item) {/* 选中物品 */
            let _this = this
            _this.clickNum++;
            if (_this.clickNum === 2) {  
                _this.clickNum = 0;  
                //  处理双击事件... 
                _this.showImg = true
                _this.imgSrc = item.src
            } 
            setTimeout(function () {
                if (_this.clickNum === 1) {
                    _this.clickNum = 0; 
                    //  处理单击事件... 
                    console.log('单击事件');
                    _this.checkList.includes(item.id) ? _this.checkList.splice(_this.checkList.indexOf(item.id), 1) : _this.checkList.push(item.id);
                }
            }, 200) 
        },
        dblClickFn(item,val){/* 选中/预览  单/双击函数 */
          console.log(item)
            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{
                        arr.includes(item.id) ? arr.splice(arr.indexOf(item.id), 1) : arr.push(item.id);
                    }
                }
            }, 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() {// 关闭弹窗
          this.receptionList = [];
          this.changeShowGoods(false)
            this.$store.commit('system/changePop',{show:false,text:''})
        },
        closeData() {
            this.checkList = [];
        },
        showManage() {// 展示系统管理
            this.manageVisible = true;
            this.$router.push('/counter/list/manage/consumerClient');
        },
        popSure(){/* 弹框-确定 */
        /* 
            添加文件：处理选中的文件，commit到stor里，提示。
            印章：添加一个字段，判断已盖章的图表
            其他：直接展示已处理，或已完成，且添加处理过的文件到物品栏
        */
            let arr = []
            if(this.popText==='重要空白凭证箱'||this.popText==='普通凭证箱'){
                let goods,clickList
                this.popText==='重要空白凭证箱'?(goods=this.importanceArr,clickList=this.importantChecked):(goods=this.commonArr  ,clickList = this.commonChecked)
                if(clickList.length===0) return this.$message.warning(`请选择物品后再确定！`)
                // 把确定的数据传输进物品栏
                goods.map(e=>{
                    clickList.map(el=>{
                        if(el===e.id){
                            arr.push(e)
                        }
                    })
                })
                this.$store.commit('system/changeGoods',{push:arr})
                // 加东西
                this.auditGoodsShelf.push({name:'银行卡', src:require('@/assets/img/goods/bankCard.png'), id:16}) //
                this.closePop()
                // this.changeShowGoods(false)
                clickList = []
                this.importantChecked = []
            }else if(this.popText == '密码器'){
              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": "287,282,"+this.receptionList[i].id,"type": "3"})}
                  sessionStorage.setItem('ruleReqs', JSON.stringify(formList))
              }
              if(this.passwordForm.password && this.passwordForm.passwordAgain){
                if(this.passwordForm.password.length >=6 && this.passwordForm.passwordAgain.length >=6){
                    if(this.passwordForm.password == this.passwordForm.passwordAgain) {
                    this.$store.commit('system/changePop', {show: false, text: ''})
                    this.$message.success(`${this.popText}操作成功！`)
                    }
                }
            }else{
              this.$message.error('请输入密码和确认密码');
            }
            }else{
                if (this.receptionList.length >0){
                    let formList = []
                    this.toggleGoods()
                this.$message.success(`${this.popText}操作成功！`)
                this.$store.commit('system/changePop',{show:false,text:''}) // 关闭弹窗
                console.log('---关闭弹窗')
                    if (this.nbm == 0){ //用户
                    }else if (this.nbm == 1){ //传票箱
                        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": "287,4,"+this.receptionList[i].id,"type": ""})}
                        let params= {
                            parentId:'287,4',
                            lcJudgmentRuleReq:formList,
                            projectId:+projectId,
                            startTime:startTime,
                        }
                        addOperation(params).then((data)=>{
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                        }).catch((error)=>{
                        })
                    }else if (this.nbm == 2){ //普通凭证箱
                        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": "287,3,"+this.receptionList[i].id, "type": "" })}
                        let params= {
                            parentId:'287,3',
                            lcJudgmentRuleReq:formList,
                            projectId:+projectId,
                            startTime:startTime,
                        }
                        addOperation(params).then((data)=>{
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                        }).catch((error)=>{
                        })
                    }else if (this.nbm == 3){ //重要空白凭证箱
                        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": "287,2,"+this.receptionList[i].id, "type": "" })}
                        let params= {
                            parentId:'287,2',
                            lcJudgmentRuleReq:formList,
                            projectId:+projectId,
                            startTime:startTime,
                        }
                        addOperation(params).then((data)=>{
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                        }).catch((error)=>{
                        })
                    }else if (this.nbm == 4){ //钱箱
                        let projectId = sessionStorage.getItem('projectId')
                        let startTime = sessionStorage.getItem('startTime')
                        let formList = [];
                        for (var i=0;i<this.receptionList.length;i++){formList.push({
                            "answerId":this.receptionList[i].id,
                            "emptyOne": "",
                            "emptyTwo": "",
                            "operationIds": "287,1,"+this.receptionList[i].id,
                            "type": "" })}
                        let params= {
                            parentId:'287,1',
                            lcJudgmentRuleReq:formList,
                            projectId:+projectId,
                            startTime:startTime,
                        }
                        addOperation(params).then((data)=>{
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                        }).catch((error)=>{
                        })
                    }else if (this.nbm == 5){ //印章盒
                        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": "287,8,"+this.receptionList[i].id,"type": ""})}
                        let params= {
                            parentId:'287,8',
                            lcJudgmentRuleReq:formList,
                            projectId:+projectId,
                            startTime:startTime,
                        }
                        addOperation(params).then((data)=>{
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                        }).catch((error)=>{
                        })
                    }else if (this.nbm == 6){ //验钞机
                        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": "287,9,"+this.receptionList[i].id,"type": ""})}
                        let params= {
                            parentId:'287,9',
                            lcJudgmentRuleReq:formList,
                            projectId:+projectId,
                            startTime:startTime,
                        }
                        addOperation(params).then((data)=>{
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                        }).catch((error)=>{
                        })
                    }else if (this.nbm == 7){ //打印机
                        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": "287,10,"+this.receptionList[i].id,"type": ""})}
                        let params= {
                            parentId:'0,10',
                            lcJudgmentRuleReq:formList,
                            projectId:+projectId,
                            startTime:startTime,
                        }
                        addOperation(params).then((data)=>{
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                        }).catch((error)=>{
                        })
                    }else if (this.nbm == 9){//资料
                        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": "0,11,"+this.receptionList[i].id,"type": ""})}
                        let params= {
                            parentId:'0,11',
                            lcJudgmentRuleReq:formList,
                            projectId:+projectId,
                            startTime:startTime,
                        }
                        addOperation(params).then((data)=>{
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                        }).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": "0,6,"+this.receptionList[i].id,"type": ""})}
                        let params= {
                            parentId:'0,6',
                            lcJudgmentRuleReq:formList,
                            projectId:+projectId,
                            startTime:startTime,
                        }
                        addOperation(params).then((data)=>{
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                        }).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": "0,7,"+this.receptionList[i].id,"type": ""})}
                        let params= {
                            parentId:'0,7',
                            lcJudgmentRuleReq:formList,
                            projectId:+projectId,
                            startTime:startTime,
                        }
                        addOperation(params).then((data)=>{
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                        }).catch((error)=>{
                        })
                    }else{
                        this.goodsShelfTotalData = this.auditGoodsShelf
                        if (this.$store.state.system.id == '33'){
                            this.nbm = 33
                            // this.goodsShelfTotalData = this.auditGoodsShelf
                            if (this.receptionList.length >0){
                                sessionStorage.setItem('nomClientIdentity', JSON.stringify(this.receptionList))
                            }
                        }
                        if (this.$store.state.system.id == '34'){
                            this.nbm = 34
                            // this.goodsShelfTotalData = this.auditGoodsShelf
                            if (this.receptionList.length >0){
                                sessionStorage.setItem('firmClientIdentity', JSON.stringify(this.receptionList))
                            }
                        }
                        if (this.$store.state.system.id == '63'){
                            this.nbm = 63
                            // this.goodsShelfTotalData = this.auditGoodsShelf
                            if (this.receptionList.length >0){
                                sessionStorage.setItem('nomBusinessDepositCard', JSON.stringify(this.receptionList))
                            }
                        }
                        if (this.$store.state.system.id == '64'){
                        this.nbm = 64
                        // this.goodsShelfTotalData = this.auditGoodsShelf
                        if (this.receptionList.length >0){
                            sessionStorage.setItem('nomCurrentWithdrawalCard', JSON.stringify(this.receptionList))
                        }
                        if (this.passwordForm.passwordAgain){
                            let accountPassword = '';
                            accountPassword = this.passwordForm.passwordAgain
                            sessionStorage.setItem('nomCurrentWithdrawalPassword', accountPassword)
                        }
                    }else if (this.$store.state.system.id == '65'){
                        this.nbm = 65
                        // this.goodsShelfTotalData = this.auditGoodsShelf
                        if (this.receptionList.length >0){
                            sessionStorage.setItem('nomCurrentTransferCard', JSON.stringify(this.receptionList))
                        }
                        if (this.passwordForm.passwordAgain){
                            let accountPassword = '';
                            accountPassword = this.passwordForm.passwordAgain
                            sessionStorage.setItem('nomCurrentTransferPassword', accountPassword)
                        }
                    }else if (this.$store.state.system.id == '66'){
                        this.nbm = 66
                        // this.goodsShelfTotalData = this.auditGoodsShelf
                        if (this.receptionList.length >0){
                            sessionStorage.setItem('nomCurrentSettleCard', JSON.stringify(this.receptionList))
                        }
                        if (this.passwordForm.passwordAgain){
                            let accountPassword = '';
                            accountPassword = this.passwordForm.passwordAgain
                            sessionStorage.setItem('nomCurrentSettlePassword', accountPassword)
                        }
                    }else if (this.$store.state.system.id == '67,1'){
                        this.nbm = 67
                        // this.goodsShelfTotalData = this.auditGoodsShelf
                        if (this.receptionList.length >0){
                            sessionStorage.setItem('nomCurrentCancellCard1', JSON.stringify(this.receptionList))
                        }
                    }else if (this.$store.state.system.id == '67,2'){
                        this.nbm = 67
                        // this.goodsShelfTotalData = this.auditGoodsShelf
                        if (this.receptionList.length >0){
                            sessionStorage.setItem('nomCurrentCancellCard2', JSON.stringify(this.receptionList))
                        }
                        
                    }else if (myConfig[this.$store.state.system.id]){ // myConfig[this.$store.state.system.id]
                        
                        const { nbm, name, isPassword } = myConfig[this.$store.state.system.id]
                        this.nbm = nbm
                        if(!isPassword) {
                            // this.goodsShelfTotalData = this.auditGoodsShelf
                            if (this.receptionList.length >0){
                                sessionStorage.setItem(name, JSON.stringify(this.receptionList))
                            }
                        }else {
                            if (this.passwordForm.passwordAgain){
                                    let accountPassword = '';
                                    accountPassword = this.passwordForm.passwordAgain
                                    sessionStorage.setItem(name, accountPassword)
                                }
                        }
                        
                        
                    }else if (this.$store.state.system.id == '67,3'){
                        this.nbm = 67
                        if (this.passwordForm.passwordAgain){
                            let accountPassword = '';
                            accountPassword = this.passwordForm.passwordAgain
                            sessionStorage.setItem('nomCurrentCancellPassword', accountPassword)
                        }
                    }else if (this.$store.state.system.id == '62,1'){
                        this.nbm = 62
                        // this.goodsShelfTotalData = this.auditGoodsShelf
                        if (this.receptionList.length >0){
                            sessionStorage.setItem('accountVoucher', JSON.stringify(this.receptionList))
                        }
                        if (this.passwordForm.passwordAgain){
                            let accountPassword = '';
                            accountPassword = this.passwordForm.passwordAgain
                            sessionStorage.setItem('accountPassword', accountPassword)
                        }
                    }else if (this.$store.state.system.id == '62,2'){
                            this.nbm = 62
                            // this.goodsShelfTotalData = this.auditGoodsShelf
                            if (this.receptionList.length >0){
                                sessionStorage.setItem('accountVoucherTwo', JSON.stringify(this.receptionList))
                            }
                            if (this.passwordForm.passwordAgain){
                                let accountPasswordTwo = ''
                                accountPasswordTwo = this.passwordForm.passwordAgain
                                sessionStorage.setItem('accountPasswordTwo', accountPasswordTwo)
                            }
                    }else if (this.$store.state.system.id == '62,3'){
                            this.nbm = 62
                            // this.goodsShelfTotalData = this.auditGoodsShelf
                            if (this.receptionList.length >0){
                                sessionStorage.setItem('accountVoucherThree', JSON.stringify(this.receptionList))
                            }
                            if (this.passwordForm.passwordAgain){
                                let accountPasswordThree = ''
                                accountPasswordThree = this.passwordForm.passwordAgain
                                sessionStorage.setItem('accountPasswordThree', accountPasswordThree)
                            }
                    }
                    }
                }
            }
            // this.toggleGoods()
          
        
        },
        toPart(){
            this.$router.push('/index')
        },
        judgePosition(evt) {
            const targetDom = this.$refs.goods.getBoundingClientRect()
            return evt.originalEvent.pageX<targetDom.right&&evt.originalEvent.pageX>targetDom.left && evt.originalEvent.pageY<targetDom.bottom&&evt.originalEvent.pageY>targetDom.top
        },

    }
};
</script>

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

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

    

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

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


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

        @media screen and (min-width: 1920px) {
        .wrap {
            width: 100%;
            position: relative;
            height: calc(100vh - 68px);
            overflow: hidden;
            background:url("../../../assets/img/integrated-counter-bg.png");
        }
        .counter {
            top: 116px;
            left: 357px;
            width: 1555px;
        }
        .glass {
            top: -145px;
            left: 964px;
            width: 855px;
        }
        .employee {
            top: 371px;
            left: 920px;
            width: 388px;
        }
        .employeeText {
            position: absolute;
            top: 503px;
            left: 1229px;
            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: 406px;
            left: 445px;
            width: 197px;
        }
        .important {
            top: 372px;
            left: 582px;
            width: 175px;
        }
        .voucher-box {
            top: 216px;
            left: 718px;
            width: 160px;
        }
        .summons {
            top: 250px;
            left: 844px;
            width: 139px;
        }
        .computer {
            top: 120px;
            left: 955px;
            width: 219px;
        }
        .card-machine {
            top: 377px;
            left: 1147px;
            width: 110px;
        }
        .idCard-scanner {
            top: 443px;
            left: 1229px;
            width: 82px;
        }
        .seal-box {
            top: 486px;
            left: 1340px;
            width: 97px;
        }
        .currency-detector {
            top: 492px;
            left: 1421px;
            width: 151px;
        }
        .printer {
            top: 550px;
            left: 1531px;
            width: 205px;
        }
        .cipher-machine {
            top: 324px;
            left: 1298px;
            width: 100px;
        }
        .el-tooltip__popper.sth-popper {
            padding: 0;
            // background-color: transparent;
            background-color: #fff;
            img {
                height: 78px;
            }
            .popper__arrow {
                display: none;
            }
        }
    }
    @media screen and (min-width: 1400px) and (max-width: 1500px) and (min-height: 850px) and (max-height: 950px) {
    .wrap {
            width: 100%;
            position: relative;
            height: calc(100vh - 68px);
            overflow: hidden;
            background:url("../../../assets/img/integrated-counter-bg.png");
        }
        .counter {
            top: 30vh;
            left: 15vw;
            width: 80vw;
            position: absolute;
        }
        .glass {
            // 玻璃窗
            top: 16vh;
            left: 50vw;
            width: 38vw;
            position: absolute;
        }
        .employee {
            // 柜员
            // top: 57%;
            // left: 42%;
            // width: 23%;
            top: 50vh;
            left: 40vw;
            width: 23vw;
            position: absolute;
        }
        // 先放着
        .employeeText {
            // 资料文字
            position: absolute;
            top: 64vh;
            left: 58vw;
            color: #000;
            transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
            font-size: 18px;
            width: 100px;
            height: 100px;
            cursor: pointer
        }
        .man {
            // 人
            top: 10vh;
            left: 70vw;
            width: 23vw;
            height: 50vh;
        }
        .money-box {
            // 钱箱
            top: 57vh;
            left: 18vw;
            width: 8vw;
        }
        .important {
            // 重空箱
            top: 52vh;
            left: 26vw;
            width: 8vw;
        }
        .voucher-box {
            // 普通箱
            top: 38vh;
            left: 34vw;
            width: 8vw;
        }
        .summons {
            // 传票栏
            top: 40vh;
            left: 40vw;
            width: 8vw;
        }
        .computer {
            top: 30vh;
            left: 44vw;
            width: 10vw;
        }
        .card-machine {
            top: 47vh;
            left: 52vw;
            width: 6vw;
        }
        .idCard-scanner {
            top: 52vh;
            left: 54vw;
            width: 6vw;
        }
        .seal-box {
            top: 56vh;
            left: 62vw;
            width: 6vw;
        }
        .currency-detector {
            top: 62vh;
            left: 66vw;
            width: 8vw;
        }
        .printer {
            top: 70vh;
            left: 72vw;
            width: 8vw;
        }
        .cipher-machine {
            top: 50vh;
            left: 68vw;
            width: 6vw;
        }
    }
    @media screen and (min-width: 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: 16vh;
            left: 50vw;
            width: 38vw;
            position: absolute;
        }
        .employee {
            // 柜员
            // top: 57%;
            // left: 42%;
            // width: 23%;
            top: 54vh;
            left: 40vw;
            width: 23vw;
            position: absolute;
        }
        // 先放着
        .employeeText {
            // 资料文字
            position: absolute;
            top: 68vh;
            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: 60vh;
            left: 18vw;
            width: 8vw;
        }
        .important {
            // 重空箱
            top: 56vh;
            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: 47vh;
            left: 52vw;
            width: 6vw;
        }
        .idCard-scanner {
            top: 52vh;
            left: 54vw;
            width: 6vw;
        }
        .seal-box {
            top: 56vh;
            left: 60vw;
            width: 6vw;
        }
        .currency-detector {
            top: 62vh;
            left: 66vw;
            width: 8vw;
        }
        .printer {
            top: 70vh;
            left: 72vw;
            width: 8vw;
        }
        .cipher-machine {
            top: 50vh;
            left: 68vw;
            width: 6vw;
        }
    }
    @media screen and (min-width: 1250px) and (max-width: 1290px){
    .wrap {
            width: 100%;
            position: relative;
            height: calc(100vh - 68px);
            overflow: hidden;
            background:url("../../../assets/img/integrated-counter-bg.png");
        }
        .counter {
            top: 30vh;
            left: 15vw;
            width: 80vw;
            position: absolute;
        }
        .glass {
            // 玻璃窗
            top: 22vh;
            left: 50vw;
            width: 38vw;
            position: absolute;
        }
        .employee {
            // 柜员
            // top: 57%;
            // left: 42%;
            // width: 23%;
            top: 46vh;
            left: 40vw;
            width: 23vw;
            position: absolute;
        }
        // 先放着
        .employeeText {
            // 资料文字
            position: absolute;
            top: 57vh;
            left: 58vw;
            color: #000;
            transform: rotateZ(38deg) scale3d(1, 1, 1) skew(-19deg, -9deg);
            font-size: 18px;
            width: 100px;
            height: 100px;
            cursor: pointer
        }
        .man {
            // 人
            top: 10vh;
            left: 70vw;
            width: 23vw;
            height: 50vh;
        }
        .money-box {
            // 钱箱
            top: 52vh;
            left: 20vw;
            width: 8vw;
        }
        .important {
            // 重空箱
            top: 50vh;
            left: 26vw;
            width: 8vw;
        }
        .voucher-box {
            // 普通箱
            top: 40vh;
            left: 32vw;
            width: 8vw;
        }
        .summons {
            // 传票栏
            top: 40vh;
            left: 38vw;
            width: 8vw;
        }
        .computer {
            top: 30vh;
            left: 44vw;
            width: 10vw;
        }
        .card-machine {
            top: 47vh;
            left: 54vw;
            width: 6vw;
        }
        .idCard-scanner {
            top: 51vh;
            left: 58vw;
            width: 6vw;
        }
        .seal-box {
            top: 54vh;
            left: 64vw;
            width: 6vw;
        }
        .currency-detector {
            top: 56vh;
            left: 68vw;
            width: 8vw;
        }
        .printer {
            top: 62vh;
            left: 74vw;
            width: 8vw;
        }
        .cipher-machine {
            top: 48vh;
            left: 68vw;
            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: 30vh;
            left: 15vw;
            width: 80vw;
            position: absolute;
        }
        .glass {
            // 玻璃窗
            top: 4vh;
            left: 46vw;
            width: 43vw;
            position: absolute;
        }
        .employee {
            // 柜员
            // top: 57%;
            // left: 42%;
            // width: 23%;
            top: 62vh;
            left: 44vw;
            width: 18vw;
            position: absolute;
        }
        // 先放着
        .employeeText {
            // 资料文字
            position: absolute;
            top: 77vh;
            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: 16vh;
            left: 70vw;
            width: 18vw;
        }
        .money-box {
            // 钱箱
            top: 68vh;
            left: 20vw;
            width: 8vw;
        }
        .important {
            // 重空箱
            top: 64vh;
            left: 26vw;
            width: 8vw;
        }
        .voucher-box {
            // 普通箱
            top: 46vh;
            left: 32vw;
            width: 8vw;
        }
        .summons {
            // 传票栏
            top: 46vh;
            left: 38vw;
            width: 8vw;
        }
        .computer {
            top: 28vh;
            left: 42vw;
            width: 10vw;
        }
        .card-machine {
            top: 52vh;
            left: 50vw;
            width: 6vw;
        }
        .idCard-scanner {
            top: 60vh;
            left: 54vw;
            width: 6vw;
        }
        .seal-box {
            top: 63vh;
            left: 60vw;
            width: 6vw;
        }
        .currency-detector {
            top: 70vh;
            left: 69vw;
            width: 8vw;
        }
        .printer {
            top: 80vh;
            left: 76vw;
            width: 8vw;
        }
        .cipher-machine {
            top: 50vh;
            left: 64vw;
            width: 6vw;
        }
    }
    @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 {
            top: 30%;
            left: 8%;
            height: 63vh;
        }
        .glass {
            // 玻璃窗
            top: 15vh;
            left: 35vw;
            width: 35vw;
        }

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

        }
        .man {
            // 人
            top: 191px;
            left: 846px;
            width: 199px;
        }
        .money-box {
            // 钱箱
            top: 540px;
            left: 190px;
            width: 129px;
        }
        .important {
            // 重空箱
            top: 48vh;
            left: 18vw;
            width: 118px;
        }
        .voucher-box {
            // 普通箱
            top: 35vh;
            left: 24vw;
            width: 112px;
        }
        .summons {
            // 传票栏
            top: 35vh;
            left: 30vw;
            width: 112px;
        }
        .computer {
            top: 30vh;
            left: 35vw;
            width: 148px;
        }
        .card-machine {
            top: 50vh;
            left: 43vw;
            width: 66px;
        }
        .idCard-scanner {
            top: 53vh;
            left: 46vw;
            width: 46px;
        }
        .seal-box {
            top: 55vh;
            left: 49vw;
            width: 50px;
        }
        .currency-detector {
            top: 55vh;
            left: 51vw;
            width: 117px;
        }
        .printer {
            top: 60vh;
            left: 56vw;
            width: 149px;
        }
        .cipher-machine {
            top: 391px;
            left: 711px;
            width: 79px;
        }
    }
    
    // 配合公共样式---------------



    .goods {
        position: fixed;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 80px;
        height: 180px;
        cursor: pointer;
        z-index: 998;
        background: url(../../../assets/img/sth-bg.png) 0 0/100% 100% no-repeat;
        span {
            width: 30px;
            margin-bottom: 10px;
            color: #fff;
            font-size: 26px;
            text-align: center;
        }
        .icon {
            width: 30px;
            transition: all 0.5s;
        }
        &:hover {
            opacity: 0.9;
        }
        &.active {
            
            .icon {
                transform: rotate(180deg);
                
            }
        }
    }
    .goods-dia {
        display: flex;
        justify-content: center;
        width: 100%;
        white-space: nowrap;
        overflow-x: auto;
        position: fixed;
        bottom: 0;
        left: -100%;
        padding: 20px 300px   20px 300px;
        transition: all 0.5s;
        background-color: rgba(255, 255, 255, 0.7);
        .file {
            position: relative;
            min-width: 160px;
            height: 160px;
            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: 105px;
                margin: auto;
                position: absolute;
                top: .5vh;
                left: 50%;
                transform: translateX(-50%);
                // margin-top: 40px;
                margin-top: 5px;
            }
            p {
                position: absolute;
                bottom: 0;
                width: 100%;
                line-height: 54px;
                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: 15vh;
                width: 100%;
                .justify-center {
                    max-height: 13vh;
                }
                .file {
                    top: 0;
                    max-height: 13vh;
                    img {
                        max-height: 8vh;
                        margin: auto;
                        margin-top: 1vh;
                    }
                    p {
                        //top: 9vh;
                        line-height: 4vh;
                        font-size: 2vh;
                    }
                }
            }
    }

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

    // 业务选择中的
    .take-list2{
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        flex-wrap: wrap;
        height: 40vh;
        overflow: auto;
        li{
            display: inline-flex;
            align-items: center;
            width: 30%;
            height: 10vh;
            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: 30%;
                margin: 0;
                //height: 154px;
                //margin: 0 45px;
            }
            p{
                font-size: 14px;
                color: #000;
                text-align: center;
                padding: 0 20px;
            }
            &.checked{
                background: rgba(97,145,255,0.10) url(../../../assets/svg/checked.svg) 96% 7%/auto no-repeat;
                border-color: #6191FF;
            }
        }
    }
    .dia-header2 {
        position: relative;height: 50px;
        line-height: 50px;
        background-color: skyblue;

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

// 兼容小的data-dia
@media screen and (min-width: 1200px) and (max-width: 1919px) {
        .data-dia {
            top: 7%;
            left: 50%;
            min-height: 75vh;
            .seal{
                margin-top: -5vh;
                .left{
                    .file {
                        //height: 10vh;
                        img {
                            //height: 10vh;
                            //width: 5vw;
                            margin: 10px auto 0;
                            z-index: 9;
                        }
                        p {
                            line-height: 5vh;
                        }
                    }
                }
                .box{
                    //background-color: red;
                    border: 2px solid #e6e6e6;
                    height: 2vh;
                    width: 45%;
                    min-height: 300px;
                    border-radius: 10px;
                    padding: 10px;
                }
                .else{
                    width: 100%;
                }
            }
            .dia-footer {
                position: absolute;
                bottom: 1vh;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
.system {
    margin-top: -8vh;
    position: absolute;
    top: 12%;
    left: 50%;
    z-index: 9;
    transform: translate(-50%, 0);
    width: 1280px;
}
.fullScreenSystem {
    width: 100vw;
    margin-top: 0;
    position: absolute;
    top: 0%;
    left: 50%;
    z-index: 9;
    transform: translate(-50%, 0);
}
/deep/ .view .el-dialog__body {
    padding: 0 !important;
}
.sth{
    position: absolute;
    &.cp{
        cursor: pointer;
    }
}
.guide{
    top: 80px;
    left: 10px;
    width: 150px;
    cursor: pointer;
    background:url(../../../assets/img/lobby-btn-bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 50px;
    font-size: 24px;
    text-align: center;
    color: #fff;

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