pc端放大缩小拖动选座功能

<style>
  .main {
    display: flex;
    width: 80%;
    justify-content: space-between;
  }

  .back_box {
    background: #fff;
    border: 1px solid #eee;
    height: 100%;
    position: fixed;
    overflow: hidden;
  }

  .drag_box {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    user-select: none;
    /* 不可选中,为了拖拽时不让文字高亮 */
  }

  .site-item {}

  input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #999;
  }

  input::-moz-input-placeholder {
    /* Mozilla Firefox */
    color: #999;
  }

  input::-ms-input-placeholder {
    /* Internet Explorer */
    color: #999;
  }

  .save:hover {
    background: #2ac1ff !important;
  }

  .right {
    text-align: -webkit-right;
  }

  .region {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3px;
  }

  .lebal {
    width: 100px;
    text-align: right;
  }

  .regionInput {
    border: 1px solid #999;
  }

  .regionInput:focus {
    border: 1px solid skyblue;
  }

  .menu {
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #eee;

    position: absolute;
    display: none;

  }
  .menu2 {
    background-color: #fff;
    border: 1px solid #eee;
    position: absolute;
    display: none;

  }


  .menu p {
    text-align: center;
    color: #666;
  }

  .menu p:hover {
    color: skyblue;
  }

  .kong {
    opacity: 0;
    pointer-events: none;
  }

  .seatcolorList {
    display: flex;
    flex-wrap: wrap;

  }

  .seatcolor {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .right_button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 20px;
  }

  .ttt:hover {
    background: rgb(34, 192, 255);
    color: #fff !important;
  }

  .submitPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 420px;
    /* 将div的左上角移动到页面中央 */
    transform: translate(-50%, -50%);
    background: #fff;
    z-index: 999;
  }
  .submitPopup1 {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 420px;
    /* 将div的左上角移动到页面中央 */
    transform: translate(-50%, -50%);
    background: #fff;
    z-index: 2;
  }

  .submitPopup2 {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 555px;
    /* 将div的左上角移动到页面中央 */
    transform: translate(-50%, -50%);
    background: #fff;
    z-index: 2;
  }
  .submitPopup3 {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 450px;
    /* 将div的左上角移动到页面中央 */
    transform: translate(-50%, -50%);
    background: #fff;
    z-index: 2;
  }
  .submitPopup4 {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 450px;
    /* 将div的左上角移动到页面中央 */
    transform: translate(-50%, -50%);
    background: #fff;
    z-index: 2;
  }
  .submitPopup5 {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 450px;
    /* 将div的左上角移动到页面中央 */
    transform: translate(-50%, -50%);
    background: #fff;
    z-index: 2;
  }
  .submitPopup6 {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 450px;
    /* 将div的左上角移动到页面中央 */
    transform: translate(-50%, -50%);
    background: #fff;
    z-index: 2;
  }
  .submit {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .masks {
    opacity: 0.4;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 888;
  }
  .masks1 {
    opacity: 1;
    background: #fff;
    position: fixed;
    left: 264px;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .masks2 {
    opacity: 0.4;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .masks3 {
    opacity: 0.4;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .masks4 {
    opacity: 0.4;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .masks5 {
    opacity: 0.4;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .masks6 {
    opacity: 0.4;
    background: #000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .mask {
    position: absolute;
    background: red;
    opacity: 0.4;
    z-index: 100;
  }
  .fgx{
    margin: 0;
    border: 0;
    border-top: 0px solid #E0DFDF;
    border-bottom: 0px solid #FEFEFE;
  }
  .layui-layer-shade{
    top: 80px !important;
    left: 264px !important;
  }
  .boxed{
    height: 100% !important;
  }
  #content-container{
    height: 100%;
  }
  #page-content{
    height: 100%;
  }
  .row{
    height: 100%;
  }
  .col-xs-12{
    height: 100%;
  }
  .page-content{
    height: 100%;
  }
  #business_ownership {
        width: 208px;
    }
    .but:hover{
      background: #4eaeea;
      color: #fff;
    }
    .sstt p{
      font-size: 15px;
      line-height: 26px;
      font-weight: 800;
    }
    .search_input_div {
        width: 95%;
        display: flex;
        flex-direction: row;
        align-items: center;
        border: 1px solid #DDDDDD;
    }
    .search_input {
        border: unset !important;
        height: 100% !important;
        flex: 1;
        min-width: 60px;
        color: #666666 !important;
        font-size: 12px !important;
    }

    .search_input:focus {
        background-color: white !important;
    }

    .search_input::-webkit-input-placeholder {
        margin-left: 14px;
        color: #999999;
    }

    .search_input_icon {
        width: 38px;
        height: 38px;
        padding: 11px;
        cursor: pointer;
    }
</style>
<div class="page-content home">
  <!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
  <div class="modal hide">
    <div class="modal-header">
      <button data-dismiss="modal" class="close" type="button"></button>
      <h3>Widget Settings</h3>
    </div>
    <div class="modal-body"> Widget settings form goes here </div>
  </div>
  <div class="clearfix"></div>
  <div class="aaa" style="display: flex;height: 100%;background: #fff;justify-content: space-between;">
    <div class="main">
      <div class="title" style="
          width: 1250px;
          text-align: center;
          font-size: 24px;
          font-weight: 800;
          line-height: 80px;
          position: relative;
        ">
        {{ biaoti }}
      </div>
      <div class="mask" v-show="positionList.is_show_mask" :style="
              'width:' +
              mask_width +
              'left:' +
              mask_left +
              'height:' +
              mask_height +
              'top:' +
              mask_top
            "></div>
      <div class="back_box" ref="back_box" style="width:70%; top: 80px; left: 250px">
        <div class="drag_box" draggable="false" @mousedown="mousedown($event)"
          @click.right="drag_box_clickRight($event)" id="seatpic"
          :style="'transform:translate('+x+'px,'+y+'px);width:'+kuandu+'px;height:'+gaodu+'px; left:-'+kuandu2+'px; top:-'+gaodu2+'px'">
          
          <div class="aaaaa" @wheel.prevent="wheelFn"
            :style='"transform: scale("+multiples+" ) rotate("+deg+"deg); width: 100%;"'>

            <div class="site2" v-for="(i,ite) in list.length" :key="i" style="display: flex;">
              <div class="site-item" :style="'padding: 2px;margin-left:'+item.z*34+'px;margin-top:'+item.x*34+'px'" v-for="(index, item) in list[i]" :key="index">
                <!-- rgb(78, 174, 234) -->
                <div 
                  :title="`${item.n}`"
                  :class="item.id == '' ? `kong aaa` : `aaa`"
                  :style="item.rc != '' ? `background-image:url('assets/img/ima/beixuan.png');background-size:100%;width: 30px;height: 30px; padding: 0 5px;` : `background:${seatColor[item.p] || 'rgb(0 144 217)'};width: 30px; height: 30px; padding: 0 5px;`" 
                  @click="left(index,i)" @contextmenu.prevent="clickRight(index,i, $event)" @mouseover="mouseover(index,i,$event)" @mouseout="mouseout(index,i)">
                </div>
              </div>
            </div>

            
          </div>
        </div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="right" style="padding-right: 5px; margin-top: 20px; margin-left: 20px;width: 230px;background: #fff;z-index: 1;">
      <h3 style="text-align: left;font-size: 18px;font-weight: 800;color: #333;">{{conditionBusinessOwnership}}</h3>
      
      <div style="text-align: left;">
        <dropbox id="business_ownership" class="condition_ima_select"
            @change="onBusinessOwnershipChange" :array-data="listBusinessOwnership"
            :checked-index="conditionBusinessOwnershipIndex" text-name="name" :check-max-num="1" placeholder="选择场次">
        </dropbox>
        <div class="but" @click="switchVenues" style="width: 208px;border: 1px solid #eee;border-radius: 5px;font-size: 16px;text-align: center;margin: 20px 0;line-height: 38px;cursor: pointer;">切换</div>
      </div>
      <div class="seatcolorList">
        <!-- 搜索 -->
      <div class="search_input_div">
        <input type="text" class="search_input" placeholder="输入身份证查询座位信息" v-model="inputSearchKey"
            @keyup="searchEnter" />
        <img class="search_input_icon" src="assets/img/ima/icon_search.png" @click="search" />
      </div>
        <div class="seatcolor" style="width: 180px;margin: 15px 0;">
          <span style="width: 125px;font-size: 14px;padding-right: 5px;">首席贵宾座席区:</span><span
            :style="`width:30px;height:14px;background: ${seatColor[-1]};`"></span>
        </div>
        <div class="seatcolor" style="width: 180px;margin: 15px 0;">
          <span style="width: 125px;font-size: 14px;padding-right: 5px;">年度经理人座席区:</span><span
            :style="`width:30px;height:14px;background: ${seatColor[-2]};`"></span>
        </div>
        <div class="seatcolor" style="width: 180px;margin: 15px 0;">
          <span style="width: 125px;font-size: 14px;padding-right: 5px;">大会贵宾座席区:</span><span
            :style="`width:30px;height:14px;background: ${seatColor[-3]};`"></span>
        </div>
        <div class="seatcolor" style="width: 180px;margin: 15px 0;">
          <span style="width: 125px;font-size: 14px;padding-right: 5px;">大会嘉宾座席区:</span><span
            :style="`width:30px;height:14px;background: ${seatColor[-4]};`"></span>
        </div>
        <div class="seatcolor" style="width: 180px;margin: 15px 0;">
          <span style="width: 125px;font-size: 14px;padding-right: 5px;">至尊大使座席区:</span><span
            :style="`width:30px;height:14px;background: ${seatColor[1]};`"></span>
        </div>
        <div class="seatcolor" style="width: 180px;margin: 15px 0;">
          <span style="width: 125px;font-size: 14px;padding-right: 5px;">IMA白金奖座席区:</span><span
            :style="`width:30px;height:14px;background: ${seatColor[2]};`"></span>
        </div>
        <div class="seatcolor" style="width: 180px;margin: 15px 0;">
          <span style="width: 125px;font-size: 14px;padding-right: 5px;">IMA金奖座席区:</span><span
            :style="`width:30px;height:14px;background: ${seatColor[3]};`"></span>
        </div>
        <div class="seatcolor" style="width: 180px;margin: 15px 0;">
          <span style="width: 125px;font-size: 14px;padding-right: 5px;">IMA银奖座席区:</span><span
            :style="`width:30px;height:14px;background: ${seatColor[4]};`"></span>
        </div>
        <div class="seatcolor" style="width: 180px;margin: 15px 0;">
          <span style="width: 125px;font-size: 14px;padding-right: 5px;">IMA名家奖座席区:</span><span
            :style="`width:30px;height:14px;background: ${seatColor[5]};`"></span>
        </div>
        <!-- 提示信息 --> 
        <div class="seatcolor" style="width: 180px;margin: 15px 0;">
          <span style="width: 125px;font-size: 14px;padding-right: 5px;color: red;">多奖项座位:</span><span
            style="width:30px;height:14px;background: rgb(0 144 217);"></span>
        </div>
      </div>
      <!-- 提示信息 -->
      
      <div style="font-size: 12px;color: red;text-align: left;margin-top: 20px;margin-left: 10px;">
        按住Ctrl+鼠标左击移动框选操作
      </div>
    </div>

    <!-- 鼠标右键菜单 -->
    <div class="menu" style="border-radius: 3px; padding: 5px 0">
      <!-- <p @click="modify" style="padding: 3px 5px; margin: 5px 8px; font-size: 16px">
        修改
      </p> -->
      <p @click="deleteval" style="padding: 3px 5px; margin: 5px 8px; font-size: 16px">
        删除
      </p>
      <p @click="awards" style="padding: 3px 5px; margin: 5px 8px; font-size: 16px">
        奖项
      </p>
      <p @click="cancellation" style="padding: 3px 5px; margin: 5px 8px; font-size: 16px">
        取消
      </p>
    </div>
    <!-- 鼠标移入菜单 -->
    <div class="menu2" style="border-radius: 3px; padding: 5px 0">
      <div v-if="seatInformation !== undefined" style="padding: 3px 5px; margin: 5px 8px; font-size: 14px">
        <div>姓名：&nbsp;{{seatInformation.userName}}</div>
        <div style="padding: 3px 0;">奖项：&nbsp;{{seatInformation.prizeName}}</div>
        <div style="padding: 3px 0;">抬头：&nbsp;{{seatInformation.displayHead}}</div>     
        <div>身份证号：&nbsp;{{seatInformation.idCard}}</div>
      </div>
    </div>
    <!-- 新增修改弹框 -->
    <div class="submitPopup" v-show="submitPopup"
      style="border: 1px solid #eee; border-radius: 5px; padding: 30px 40px;padding-bottom: 0;">
      <div style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        ">
        <h3 v-if="seatInformation == undefined" style="font-size: 18px; color: #333;font-weight: 800;">填写申请人信息</h3>
        <h3 v-else style="font-size: 18px; color: #333;font-weight: 800;">修改申请人信息</h3>
        <div @click="quxiao" style="font-size: 18px; font-weight: 400; cursor: pointer">
          X
        </div>
      </div>
      <div style="font-size: 18px; color: #666; font-weight: 800; margin-top: 5px">
       {{n}}
      </div>
      <!-- 修改 -->
      <div v-if="seatInformation !==undefined" class="sstt" style="line-height: 20px;padding-top: 18px;">
        <p>姓名：{{seatInformation.userName}}</p>
        <p>抬头：{{seatInformation.displayHead}}</p>
        <p>奖项：{{seatInformation.prizeName}}</p>
        <p>年限：{{seatInformation.years}}</p>
      </div>
      <div class="frominfo" style="margin: 30px 0">
        <div style="margin: 15px 0;display: flex;align-items: center;">
          <label for="aaa" style="font-size: 14px;width: 80px;">身份证号：</label>
          <input type="text" name="aaa" v-model="idCard" style="
              border: 1px solid #eee;
              border-radius: 3px;
              width: 230px;
              height: 30px;
              font-size: 16px;
              padding: 0px 10px;
            " />
        </div>
      </div>
      <div class="submit">
        <div @click="quxiao" class="quxiao" style="
            margin: 20px;
            text-align: center;
            cursor: pointer;
            background: rgb(201, 201, 201);
            border-radius: 3px;
            padding: 8px 16px;
            color: #fff;
            font-size: 16px;
          ">
          取 消
        </div>
        <div @click="queren" class="queren" style="
            margin: 20px;
            text-align: center;
            cursor: pointer;
            background: #00a2ff;
            border-radius: 3px;
            padding: 8px 16px;
            color: #fff;
            font-size: 16px;
          ">
          确 定
        </div>
      </div>
    </div>
    
    <!-- 请选择场次 -->
    <div class="submitPopup1" v-show="submitPopup1"
      style="border: 1px solid #eee; border-radius: 5px; padding: 30px 40px;padding-bottom: 0;">
      <div style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        ">
        <h3 style="font-size: 18px; color: #333;font-weight: 800;">请选择场次</h3>
        
      </div>
      <div class="frominfo" style="margin: 30px 0">
        <div style="margin: 15px 0;display: flex;align-items: center;" >
          <label style="font-size: 16px;width: 110px;padding-left: 10px;">&nbsp;&nbsp;&nbsp;选择场次：</label>
          <!-- <input type="text" name="phone" style="
              border: 1px solid #eee;
              border-radius: 3px;
              width: 230px;
              height: 30px;
              font-size: 16px;
              padding: 0px 10px;
            " /> -->
          <dropbox id="business_ownership" class="condition_ima_select"
              @change="onBusinessOwnershipChange" :array-data="listBusinessOwnership"
              :checked-index="conditionBusinessOwnershipIndex" text-name="name" :check-max-num="1" placeholder="选择场次">
          </dropbox>
        </div>
      </div>
      <div class="submit">
        <div @click="queren1" class="queren" style="
            margin: 20px;
            text-align: center;
            cursor: pointer;
            background: #00a2ff;
            border-radius: 3px;
            padding: 8px 16px;
            color: #fff;
            font-size: 16px;
          ">
          确 定
        </div>
      </div>
    </div>

    <!-- 多选导入表格 -->
    <div class="submitPopup2" v-show="submitPopup2"
      style="border: 1px solid #eee; border-radius: 5px; padding: 30px 40px;padding-bottom: 0;">
      <div style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        ">
        <h3 style="font-size: 18px; color: #333;font-weight: 800;">请上传名家信息表</h3>
        <div @click="quxiao2" style="font-size: 18px; font-weight: 400; cursor: pointer">
          X
        </div>
      </div>
      <div style="height: 300px;overflow-y: scroll;">
        <div v-if="xuanzhong.length != 0" style="font-size: 14px;font-weight: 800;color: #000;">已被占座({{xuanzhong.length}})</div>
        <div style="display: flex;flex-wrap: wrap;">
          <div style="margin-right: 10px;margin-bottom: 10px;font-size: 16px;width: 80px;color: #999;" v-for="(i, it) in xuanzhong" :key="i">{{it.n}}</div>
        </div>
        <div style="font-size: 14px;font-weight: 800;color: #000;">可选座位({{add_list.length}})</div>
        <div style="display: flex;flex-wrap: wrap;">
          <div style="margin-right: 10px;margin-bottom: 10px;font-size: 16px;width: 80px;color: #333;" v-for="(index, item) in add_list" :key="index">{{item.n}}</div>
        </div>
      </div>
      
      <input id="upload_excel" type="file" accept=".xlsx" style="display: none;" @change="onExcelChange" />
      <div class="submit">
        <div @click="queren2" class="queren" style="
            margin: 20px;
            text-align: center;
            cursor: pointer;
            background: #00a2ff;
            border-radius: 3px;
            padding: 8px 16px;
            color: #fff;
            font-size: 16px;
          ">
          导入表格
        </div>
      </div>
    </div>
    <!-- 删除确认框 -->
    <div class="submitPopup3" v-show="submitPopup3"
      style="border: 1px solid #eee; border-radius: 5px; padding: 30px 40px;padding-bottom: 0;">
      <div style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        ">
        <h3 style="font-size: 18px; color: #333;font-weight: 800;">座位信息</h3>
        <div @click="quxiao3" style="font-size: 18px; font-weight: 400; cursor: pointer">
          X
        </div>
      </div>
      <div style="font-size: 18px; color: #666; font-weight: 800; margin-top: 5px">{{n}}</div>
      <!-- 修改 -->
      <div v-if="seatInformation !==''" class="sstt" style="line-height: 20px;padding-top: 18px;">
        <p>姓名：{{seatInformation.userName}}</p>
        <p>抬头：{{seatInformation.displayHead}}</p>
        <p>奖项：{{seatInformation.prizeName}}</p>
        <p>年限：{{seatInformation.years}}</p>
      </div>
      <div class="submit">
        <div @click="queren3" class="queren" style="
            margin: 20px;
            text-align: center;
            cursor: pointer;
            background: #00a2ff;
            border-radius: 3px;
            padding: 8px 16px;
            color: #fff;
            font-size: 16px;
          ">
          确认删除
        </div>
      </div>
    </div>
    <!-- 表格上传错误提示 -->
    <div class="submitPopup4" v-show="submitPopup4"
      style="border: 1px solid #eee; border-radius: 5px; padding: 30px 40px;padding-bottom: 0;">
      <div style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        ">
        <h3 style="font-size: 18px; color: #333;font-weight: 800;">错误提示</h3>
        <div @click="quxiao4" style="font-size: 18px; font-weight: 400; cursor: pointer">
          X
        </div>
      </div>
      <div v-for="(index,item) in errorList" :key="index">表格{{item.content}}</div>
      <div class="submit">
        <div @click="quxiao4" class="queren" style="
            margin: 20px;
            text-align: center;
            cursor: pointer;
            background: #00a2ff;
            border-radius: 3px;
            padding: 8px 16px;
            color: #fff;
            font-size: 16px;
          ">
          确 认
        </div>
      </div>
    </div>
    <!-- 修改奖项 -->
    <div class="submitPopup5" v-show="submitPopup5"
      style="border: 1px solid #eee; border-radius: 5px; padding: 30px 40px;padding-bottom: 0;">
      <div style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        ">
        <h3 style="font-size: 18px; color: #333;font-weight: 800;">修改奖项</h3>
        <div @click="quxiao5" style="font-size: 18px; font-weight: 400; cursor: pointer">
          X
        </div>
      </div>
      <!-- <div v-for="(index,item) in errorList" :key="index">表格{{item.content}}</div> -->
      <div style="display: flex;flex-wrap: wrap;">
          <div v-for="(index,item) in seatColorquan" :key="index" style="display: flex;align-items: center;width: 110px;">
            <input type="checkbox" :id="item.name" :value="item.id" v-model="item.c">
            <label :for="item.name" style="margin: 0;padding: 10px;">{{ item.name }}</label>
          </div>
    
      </div>
      <div class="submit">
        <div @click="queren5" class="queren" style="
            margin: 20px;
            text-align: center;
            cursor: pointer;
            background: #00a2ff;
            border-radius: 3px;
            padding: 8px 16px;
            color: #fff;
            font-size: 16px;
          ">
          确 认
        </div>
      </div>
    </div>

    <!-- 搜索结果名家座位信息 -->
    <div class="submitPopup6" v-show="submitPopup6"
      style="border: 1px solid #eee; border-radius: 5px; padding: 30px 40px;padding-bottom: 0;">
      <div style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        ">
        <h3 style="font-size: 18px; color: #333;font-weight: 800;">名家座位信息</h3>
        <div @click="quxiao6" style="font-size: 18px; font-weight: 400; cursor: pointer">
          X
        </div>
      </div>
      <div>
          <div  v-for="(index,item) in seatinfo" :key="index">
            <p style="text-align: 26px;font-size: 14px;font-weight: 800;">{{item.title}}--{{item.name}}--<span :style="item.No ==undefined?'color:red':''">{{item.No ==undefined?'未选座':item.No}}</span></p>
          </div>
      </div>
      <div class="submit">
        <div @click="queren6" class="queren" style="
            margin: 20px;
            text-align: center;
            cursor: pointer;
            background: #00a2ff;
            border-radius: 3px;
            padding: 8px 16px;
            color: #fff;
            font-size: 16px;
          ">
          确 认
        </div>
      </div>
    </div>
  </div>
  <div class="masks" v-show="submitPopup"></div>
  <div class="masks1" v-show="submitPopup1"></div>
  <div class="masks2" v-show="submitPopup2"></div>
  <div class="masks3" v-show="submitPopup3"></div>
  <div class="masks4" v-show="submitPopup4"></div>
  <div class="masks5" v-show="submitPopup5"></div>
  <div class="masks6" v-show="submitPopup6"></div>
</div>

js

var Vue = require('vue');
const vueUI = require('../../../modules/vueUI');
module.exports = Vue.extend({
    route: {
        activate: function (transition) {
            transition.next()
        }
    },
    template: __inline('./seatSelection.html'),
    // el: function() {
    //     return "#table-top";
    // },
    components: {
        'link': require('/src/components/businessawidget/link/link.js'),
        'dropbox': require('/src/components/ima/widget/dropbox/dropbox.js'),
    },
    data: function () {
        return {
            multiples: 0.2,
            odiv: null,
            deg: 0,
            list: [],
            value: "",
            rows: [],
            columns: [],
            timer: null,
            title: "座位信息",
            seatColor: {},
            seatColorquan:[],
            selectedList: [],
            biaoti: "",
            x: 0,
            y: 0,
            startx: "",
            starty: "",
            endx: 0,
            endy: 0,
            index: "",
            firstTime: 0,
            lastTime: 0,
            key: false,//判断是移动还是点击
            submitPopup: false,
            submitPopup1: true,
            submitPopup2: false,
            submitPopup3: false,
            submitPopup4: false,
            submitPopup5: false,
            submitPopup6: false,
            selectedState: [],
            positionList: {
                is_show_mask: false,
                box_screen_left: 0,
                box_screen_top: 0,
                start_x: 0,
                start_y: 0,
                end_x: 0,
                end_y: 0,
            },
            layerIndex:undefined,
            listBusinessOwnership: [],//场次
            conditionBusinessOwnership: undefined,
            conditionBusinessOwnershipIndex: -1,
            sessionList:[],
            kuandu:undefined,
            gaodu:undefined,
            kuandu2:undefined,
            gaodu2:undefined,
            idCard:'',
            n:'',
            add_list:[],//批量选中的座位
            xuanzhong:[],
            seatInformation:undefined,//座位信息
            errorList:[],//表格错误信息
            inputSearchKey:'',//搜素
            seatinfo:[],
            firstP:'',
            i:'',
            json1:null,
        }
    },
    computed: {
        mask_width() {
            // console.log('mask_width', `${Math.abs(this.positionList.end_x - this.positionList.start_x)}px;`)
            return `${Math.abs(this.positionList.end_x - this.positionList.start_x)}px;`;
        },
        mask_height() {
            return `${Math.abs(this.positionList.end_y - this.positionList.start_y)}px;`;
        },
        mask_left() {
            // console.log('mask_left', `${Math.min(this.positionList.start_x, this.positionList.end_x) - this.positionList.box_screen_left}px;`)
            return `${Math.min(this.positionList.start_x, this.positionList.end_x) - (this.positionList.box_screen_left+264)}px;`;
        },
        mask_top() {
            return `${Math.min(this.positionList.start_y, this.positionList.end_y) - (this.positionList.box_screen_top+80)}px;`;
        }
    },
    watch: {
        src(newValue, oldValue) {
            // console.log('132123')
            this.multiples = 0.2;
            if (this.odiv !== null) {
                this.odiv.style.left = "0px";
                this.odiv.style.top = "0px";
            }
        },
    }, 
    ready: function () {
        // this.powers()
        // this.getzuowei();
        // console.log('this.$forceUpdate();9999999999999999999999999999999999999999999999999999999999999999999999999999',Vue.set)
        let json1 = window.sessionStorage.getItem('json1')
        this.json1 = JSON.parse(json1)
        var kuandu = window.sessionStorage.getItem('kuandu')
        var gaodu = window.sessionStorage.getItem('gaodu')
        var kuandu2 = window.sessionStorage.getItem('kuandu2')
        var gaodu2 = window.sessionStorage.getItem('gaodu2')
        
        console.log('1324657984651323121212133313311',this.json1)
        if(this.json1 !==null && kuandu !==null && gaodu !==null && kuandu2 !==null && gaodu2 !==null){
            this.kuandu = kuandu
            this.gaodu = gaodu
            this.kuandu2 = kuandu2
            this.gaodu2 = gaodu2
            this.conditionBusinessOwnershipIndex = window.sessionStorage.getItem('conditionBusinessOwnershipIndex')
            this.conditionBusinessOwnership = window.sessionStorage.getItem('conditionBusinessOwnership')
            
            // console.log('this.kuandu2',this.kuandu2)
            this.layerIndex = layer.load(1, {
                shade: [1,'#fff'] //0.1透明度的白色背景
            });
            this.submitPopup1 = false;
            setTimeout(() => {
                this.getzuowei();
            }, 150);
        }
        this.getSessionList()
        // console.log(this.$route)
        // console.log(this.$route.matched)
    },
    methods: {
        queren6(){
            this.submitPopup6 = false
            console.log('aass')
        },
        quxiao6(){
            this.submitPopup6 = false
        },
        // 搜素
        search() {
            // console.log(this.inputSearchKey)
            this.inputSearchKey=this.inputSearchKey.trim()
            console.log('aaaaa',this.inputSearchKey)
            vueUI.ajaxCall({
                url: vueUI.conf.host + "/seat/querySeatByIdCard",
                datatype: "json",
                type: "post",
                data: {idCard:this.inputSearchKey},
                contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                // contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                success: (rsp) => {
                    if(JSON.parse(rsp) !== null){
                        console.log('rsp',JSON.parse(rsp))
                        this.seatinfo = JSON.parse(rsp).list
                        this.submitPopup6 = true
                    }else{
                        vueUI.alert('未查询到名家')
                    }
                    
                    
                    
                }, error: (rsp) => {
                    if (rsp.status != 0) {
                        var err = JSON.parse(rsp.responseText);
                        if (err.meta.code == 999) {
                            vueUI.alert(err.meta.message)
                        }
                    }
                }
            });
        },
        // 权限修改
        quxiao5(){
            this.submitPopup5 = false
        },
        queren5(){
            this.submitPopup5 = false
            let seatColorquans = ''
            console.log('asadasdas',this.seatColorquan)
            
            this.seatColorquan.forEach(item =>{
                if(item.c == true){
                    if(item.id == this.firstP){
                        seatColorquans = item.id+','+seatColorquans
                    }else{
                        seatColorquans += (item.id+',')
                    }
                    
                }
            })
            seatColorquans = seatColorquans.substring(0, seatColorquans.lastIndexOf(','))
            console.log('ids',seatColorquans)
            let json = {
                id:this.list[this.i][this.index].id,
                prizeId:seatColorquans,
                meetingId:this.sessionList[this.conditionBusinessOwnershipIndex].meetingId,
            }
            console.log('json',json)
            vueUI.ajaxCall({
                url: vueUI.conf.host + "/seat/setPrize",
                datatype: "json",
                type: "post",
                data: json,
                contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                // contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                success: (rsp) => {
                    console.log('rsp',rsp)
                    let res = JSON.parse(rsp)
                    if(res.ok == 11111){
                        vueUI.alert('修改成功')
                        console.log('ppppp',seatColorquans)
                        Vue.set(this.list[this.i][this.index],'p',seatColorquans)
                    }else if(res.failed == 22222){
                        vueUI.alert('操作失败')
                    }
                }, error: (rsp) => {
                    if (rsp.status != 0) {
                        var err = JSON.parse(rsp.responseText);
                        if (err.meta.code == 999) {
                            vueUI.alert(err.meta.message)
                        }
                    }
                }
            });
        },
        // 搜素回车
        searchEnter(e) {
            // console.log("key")
            // console.log(e)
            if (e.keyCode == 13) {
                this.search();
            }
        },
        awards(){
            this.seatColorquan = [
                {name:'首席贵宾',c:false,id:'-1'},
                {name:'年度经理人',c:false,id:'-2'},
                {name:'大会贵宾',c:false,id:'-3'},
                {name:'大会嘉宾',c:false,id:'-4'},
                {name:'至尊大使',c:false,id:'1'},
                {name:'IMA白金奖',c:false,id:'2'},
                {name:'IMA金奖',c:false,id:'3'},
                {name:'IMA银奖',c:false,id:'4'},
                {name:'IMA名家奖',c:false,id:'5'},
                // {name:'IMA金奖座席区',c:false},
            ]
            console.log('this.list[this.i][this.index]',this.list[this.i][this.index].p['0'])
            this.firstP = this.list[this.i][this.index].p['0']
            // 判断右击菜单是否存在
            const menu = document.querySelector(".menu");
            menu.style.display = "none"
            this.submitPopup5 = true
            console.log('this.list[this.i][this.index].p',this.list[this.i][this.index].p)
            let setcolor =  []
            setcolor = this.list[this.i][this.index].p.split(',')
            console.log('setcolor',setcolor)
            this.seatColorquan.forEach(item =>{
                console.log('item',item)
                var indexOf4 = (setcolor || []).findIndex((item2) => item2 === item.id);
                if(indexOf4 !==-1){
                    Vue.set(item,'c',true)
                }
            })
            
        },
        // 获取场次
        getSessionList() {
            let json = { aaa:'aaa' }
            json = JSON.stringify(json)
            vueUI.ajaxCall({
                url: vueUI.conf.host + "/seat/queryMeetingList",
                datatype: "json",
                type: "post",
                data: json,
                contentType: 'application/json;charset=utf-8',
                // contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                success: (rsp) => {
                    // console.log('rsp',rsp)
                    var meta = rsp.meta
                    if (meta.code == 0) {
                        let data = rsp.data;
                        // console.log('aaa',data.list)
                        let list = data.list
                        // console.log('data',data)
                        // this.kuandu = content.rows*34
                        list.forEach(item => {
                            // console.log('item.content',JSON.parse(item.content))
                            let content = JSON.parse(item.content)
                            this.listBusinessOwnership.push(content.subTitle+' '+content.title+' '+item.name)
                            this.sessionList.push({ value:content.subTitle+' '+content.title+' '+item.name,cateId:item.cateId,meetingId:item.meetingId,rows:content.rows,cols:content.cols,kuandu:content.cols*34,gaodu:content.rows*34})
                        })
                        // this.listHandler = data.handler;
                        // this.listBusinessOwnership = data.businessOwnership;
                    } else {
                        vueUI.alert(meta.message)
                    }

                }, error: (rsp) => {
                    if (rsp.status != 0) {
                        var err = JSON.parse(rsp.responseText);
                        if (err.meta.code == 999) {
                            vueUI.alert(err.meta.message)
                        }
                    }
                }
            });
        },
        quxiao() {
            this.submitPopup = false;
            this.seatInformation = undefined
        },
        queren() {     
            let json = { id:this.list[this.i][this.index].id,idCard:this.idCard,meetingId:this.sessionList[this.conditionBusinessOwnershipIndex].meetingId }
            // console.log('qwer',json)
            vueUI.ajaxCall({
                url: vueUI.conf.host + '/seat//save',
                datatype: "json",
                type: "post",
                data: json,
                contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                success: (rsp) => {
                    // console.log('aaaaaa',rsp)
                    let res = JSON.parse(rsp)
                    if(res.ok == 11111){
                        this.submitPopup = false;
                        if (this.list[this.i][this.index].rc == '') {
                            Vue.set(this.list[this.i][this.index],'rc',this.list[this.i][this.index].id)
                        } else {
                            Vue.set(this.list[this.i][this.index],'rc','')
                        }
                    }else if(res.msg != undefined){
                        vueUI.alert(res.msg)
                    }else if(res.failed == 22222){
                        vueUI.alert('操作失败')
                    }else if(res.failed == 33333){
                        vueUI.alert(res.msg)
                    }
                }
            });
            
        },
        queren1() {
            this.kuandu = this.sessionList[this.conditionBusinessOwnershipIndex].kuandu
            this.gaodu = this.sessionList[this.conditionBusinessOwnershipIndex].gaodu
            this.kuandu2 = this.kuandu/2-700
            this.gaodu2 = this.gaodu/2-400
            // console.log('this.kuandu2',this.kuandu2)
            this.layerIndex = layer.load(1, {
                shade: [1,'#fff'] //0.1透明度的白色背景
            });
            this.submitPopup1 = false;
            setTimeout(() => {
                this.getzuowei();
            }, 150);
            
        },
        cancellation() {
            const menu = document.querySelector(".menu");
            menu.style.display = "none";
        },
        left(index,i) {
            if(this.list[i][index].rc != ''){
                return
            }
            this.index = index
            this.i = i
            this.n = this.list[this.i][this.index].n
            // 判断右击菜单是否存在
            const menu = document.querySelector(".menu");
            if(menu.style.display == "block"){
                menu.style.display = "none"
                return
            }
            if (this.key) {
                console.log('this',Vue)
                this.submitPopup = true;
                this.key = false;
            } else {
                return;
            }
        },
        drag_box_clickRight(e) {
            //阻止浏览器默认事件
            e.preventDefault();
        },
        clickRight(index,i, e) {
            // console.log('abc')
            const menu = document.querySelector(".menu");
            const inputtxt = document.querySelector(".aaa");
            //阻止浏览器默认事件
            e.preventDefault();
            //获取右键基于浏览器可视屏幕坐标
            const mouseX = e.clientX-264;
            const mouseY = e.clientY-80;
            // console.log(mouseX, mouseY);

            //改变菜单位置
            menu.style.top = mouseY + "px";
            menu.style.left = mouseX + "px";
            menu.style.display = "block";
            // console.log("aaaaa", index);
            this.index = index;
            this.i = i
        },
        modify() {
            this.n = this.list[this.i][this.index].n
            if(this.list[this.i][this.index].rc != ''){
                vueUI.ajaxCall({
                    url: vueUI.conf.host + "/seat/get/" + this.list[this.i][this.index].id + "/" + this.sessionList[this.conditionBusinessOwnershipIndex].meetingId,
                    type: "get",
                    success: (rsp) => {
                        console.log('获取座位信息',rsp)
                        this.seatInformation = rsp.data
                        this.submitPopup = true;
                        const menu = document.querySelector(".menu");
                        menu.style.display = "none";
                    }
                });
            }else{
                const menu = document.querySelector(".menu");
                menu.style.display = "none";
                vueUI.alert('该座位暂无人选座')
            }
            
        },
        deleteval() {
            
            if(this.list[this.i][this.index].rc != ''){
                vueUI.ajaxCall({
                    url: vueUI.conf.host + "/seat/get/" + this.list[this.i][this.index].id + "/" + this.sessionList[this.conditionBusinessOwnershipIndex].meetingId,
                    type: "get",
                    success: (rsp) => {
                        // console.log('获取座位信息',rsp)
                        this.seatInformation = rsp.data
                        console.log("this.list[this.i][this.index].rc", this.list[this.i][this.index].rc);
                            const menu = document.querySelector(".menu");
                            menu.style.display = "none";
                            this.submitPopup3 = true
                    }
                });
            }else{
                const menu = document.querySelector(".menu");
                menu.style.display = "none";
                vueUI.alert('该座位暂无人选座')
            }
            
            
        },
        queren3(){
            //删除座位
            vueUI.ajaxCall({
                url: vueUI.conf.host + "/seat/deleteSelection/" + this.list[this.i][this.index].id + "/" + this.sessionList[this.conditionBusinessOwnershipIndex].meetingId,
                type: "delete",
                success: (rsp) => {
                    if(rsp.meta.code == 0){
                        // console.log('删除',rsp)
                        this.list[this.i][this.index].rc = "";
                        this.submitPopup3 = false
                    }else{
                        vueUI.alert('删除失败')
                        this.submitPopup3 = false
                    }
                    
                    
                }
            });
            
            
        },
        quxiao3(){
            this.submitPopup3 = false
            this.seatInformation = undefined
        },
        //防抖
        mouseover(index,i,e) {
            // console.log('移入了')
            if (this.timer !== null) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                // this.timer = null
                console.log('this.list[i][index].rc',this.list[i][index].rc)
                if(this.list[i][index].rc != ''){
                    //获取座位信息
                    vueUI.ajaxCall({
                        url: vueUI.conf.host + "/seat/get/" + this.list[i][index].id + "/" + this.sessionList[this.conditionBusinessOwnershipIndex].meetingId,
                        type: "get",
                        success: (rsp) => {
                            // console.log('eeeeeeeeeeeeeeee',rsp)
                            // console.log('eeeeeeeeeeeeeeee',e)
                            const menu2 = document.querySelector(".menu2");
                            const mouseX = e.clientX-250;
                            const mouseY = e.clientY-210;
                            menu2.style.top = mouseY + "px";
                            menu2.style.left = mouseX + "px";
                            console.log('获取座位信息',rsp.data)
                            this.seatInformation = rsp.data
                            console.log('this.seatInformation.userName',this.seatInformation.userName)
                            if(rsp.data.userName !== undefined){
                                menu2.style.display = "block";
                            }
                            
                        }
                    });
                }
            }, 600);
            
        },
        mouseout(index,i) {
            // console.log('移出了')
            this.seatInformation = undefined
            const menu2 = document.querySelector(".menu2");
            menu2.style.display ="none"
            
        },
        // 获取座位图
        getzuowei() {
            if(this.json1 !== null){
                var json = this.json1
            }else{
                var json = { cateId:this.sessionList[this.conditionBusinessOwnershipIndex].cateId,meetingId:this.sessionList[this.conditionBusinessOwnershipIndex].meetingId }
            }
            
            console.log('json',json)
            json = JSON.stringify(json)
            vueUI.ajaxCall({
                url: vueUI.conf.host + "/seat/queryList",
                datatype: "json",
                type: "post",
                data: json,
                contentType: 'application/json;charset=utf-8',
                // contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                success: (rsp) => {
                    // console.log('rsp',rsp)
                    var meta = rsp.meta
                    if (meta.code == 0) {
                        // console.log('rsp.data.list',rsp.data.list)
                        this.seatColor = rsp.data.seatColor;
                        console.log('座位颜色',this.seatColor)
                        // this.s = this.sessionList[this.conditionBusinessOwnershipIndex].rows
                        // this.t = this.sessionList[this.conditionBusinessOwnershipIndex].cols
                        let lll = rsp.data.list
                        lll.sort((a,b)=>a.id-b.id)
                        console.log('111111111111111111')
                        // for(let i=0;i<lll.length;i++){
                        //     if(i==0){
                        //         lll[i].z = lll[i].c-1
                        //     }else if(lll[i].c>lll[i-1].c){
                        //         lll[i].z = lll[i].c-lll[i-1].c-1
                        //     }else if(lll[i].c<lll[i-1].c){
                        //         lll[i].z = lll[i].c-1
                        //     }
                        //     if((lll[i].r-lll[(i-1)<0?0:(i-1)].r)>1){
                        //         lll[i].x = 2
                        //     }else if((lll[i].r-lll[(i-1)<0?0:(i-1)].r)==0){
                        //         lll[i].x = 0
                        //     }else{
                        //         lll[i].x = 0
                        //     }
                        // }
                        // 转换后的二维数组
                        var arrayTwo = Object.values(lll.reduce((res, item) => {
                            res[item.r] ? res[item.r].push(item) : res[item.r] = [item];
                            return res;
                        }, {}));
                        console.log('22222222222222222222')
                        for(let i=0;i<arrayTwo.length;i++){
                            for(let x=0;x<arrayTwo[i].length;x++){
                                // console.log('qwewqeqwewe', arrayTwo[i][x])
                                if(x==0){
                                    arrayTwo[i][x].z = arrayTwo[i][x].c-1
                                }else if(arrayTwo[i][x].c>arrayTwo[i][x-1].c){
                                    arrayTwo[i][x].z = arrayTwo[i][x].c-arrayTwo[i][x-1].c-1
                                }
                                if(i==0){
                                    arrayTwo[i][x].x = 0
                                }else if(arrayTwo[i][0].r-arrayTwo[i-1][0].r>1){
                                    arrayTwo[i][x].x = 2
                                }
                            }
                        }
                        console.log('33333333333333')
                        this.list = arrayTwo
                        // this.list.length = 10
                        console.log('s',this.list)
                        // for (let x = 0; x < s; x++) {
                        //     for (let y = 0; y < t; y++) {
                        //         let rsps = rsp.data.list.filter((item2) => {
                        //             return item2.r == x + 1 && item2.c == y + 1; // 找到id一样的item
                        //         });
                        //         if (rsps.length == 0) {
                        //             this.list.push({ X: x + 1, Y: y + 1, id: "" });
                        //         } else {
                        //             this.list.push(...rsps);
                        //         }
                        //         // console.log('020202020202',this.list)
                        //         // console.log('55555555555',rsps)
                        //     }
                        // }
                        // this.selectedList.forEach((itema) => {
                        //     let ids = this.list.findIndex((value, keys, arr) => {
                        //       return value.id == itema;
                        //     });
                        //     console.log('idsssssss',ids)
                        //     // this.list[ids].ids = 100;
                        //   });
                        // // console.log('55555555555', this.list)
                        console.log('444444444444444444444')
                        layer.close(this.layerIndex);
                        console.log('555555555555555555')
                    } else {
                        vueUI.alert(meta.message)
                    }

                }, error: (rsp) => {
                    if (rsp.status != 0) {
                        var err = JSON.parse(rsp.responseText);
                        if (err.meta.code == 999) {
                            vueUI.alert(err.meta.message)
                        }
                    }
                }
            });
            
        },
        showPosition() {
            // this.$nextTick(() => {
            //   let aaa = document.getElementsByClassName("kong");
            //   for (let i = 0; i < aaa.length - 1; i++) {
            //     aaa[i].style.opacity = "1";
            //   }
            // });
        },
        blurRegion(e) {
            // console.log("11111111");
        },
        focusRegion() { },
        dblclick(e) {
            // console.log('aaaaaaaaaaaaa',e)
        },
        save() {
            // this.$nextTick(() => {
            //   let kkk = document.getElementsByClassName("kong");
            //   console.log("9999999", this.list);
            //   for (let i = 0; i < kkk.length - 1; i++) {
            //     kkk[i].style.opacity = "0";
            //   }
            // });
        },
        wheelFn(e) {
            if (e.deltaY > 0) {
                // 鼠标向下滚动，图片缩小
                this.toSmallChange(0.1);
            } else {
                // 鼠标向上滚动，图片放大
                this.toBIgChange(0.1);
            }
            return false;
        },
        toBIgChange(power) {
            if (this.multiples >= 3) {
                return;
            }
            this.multiples += power;
        },
        toRotateChange() {
            this.deg += 90;
        },
        // 缩小
        toSmallChange(power) {
            if (this.multiples <= 0.2) {
                return;
            }
            this.multiples -= power;
        },
        // 页面初始化
        // initBodySize() {
        //   this.initWidth = this.$refs.back_box.clientWidth; // 拿到父元素宽
        //   // this.initHeight = this.initWidth * (1080 / 1920);
        //   this.initHeight = this.initWidth * ((1080 * 0.88) / (1920 - 1080 * 0.02)); // 根据宽计算高实现自适应
        // },
        //用mousedown/mousemove/mouseup事件实现鼠标拖拽图片移动效果
        mousedown(e) {
            if (e.ctrlKey) {
                console.log("按下了 Ctrl 键", e);
                this.positionList.is_show_mask = true;
                this.positionList.start_x = e.clientX;
                this.positionList.start_y = e.clientY;
                this.positionList.end_x = e.clientX;
                this.positionList.end_y = e.clientY;
                document.body.addEventListener("mousemove", this.handleMouseMove); //监听鼠标移动事件
                document.body.addEventListener("mouseup", this.handleMouseUp); //监听鼠标抬起事件
            } else {
                this.firstTime = new Date().getTime();
                // 绑定mousemove
                console.log("没按下了 Ctrl 键", e);
                this.startx = e.pageX;
                this.starty = e.pageY;
                document.addEventListener("mousemove", this.mousemove);
                document
                    .getElementById("seatpic")
                    .addEventListener("mouseup", this.mouseup);
            }
        },
        handleMouseMove(event) {
            this.positionList.end_x = event.clientX;
            this.positionList.end_y = event.clientY;
        },

        handleMouseUp() {
            document.body.removeEventListener("mousemove", this.handleMouseMove);
            document.body.removeEventListener("mouseup", this.handleMouseUp);
            this.positionList.is_show_mask = false;
            // 弹出上传按钮
            this.handleDomSelect();
            this.resSetXY();
            this.submitPopup2 = true
        },
        queren2(){
            $("#upload_excel").val("")
            $("#upload_excel").click();
        },
        quxiao2(){
            this.submitPopup2 = false
            this.add_list = []
            this.xuanzhong = []
            this.seatInformation = undefined
        },
        onExcelChange(e){
            console.log('aaa',e)
            this.importExcel(e)
        },
        importExcel(e) {
            let ids = ''
            this.add_list.forEach(item =>{
                ids += (item.id+',')
            })
            
            ids = ids.substring(0, ids.lastIndexOf(','))
            console.log('ids',ids)
            console.log('this.sessionList[this.conditionBusinessOwnershipIndex].meetingId',this.sessionList[this.conditionBusinessOwnershipIndex].meetingId)
            var formData = new FormData();
            formData.append('file', e.currentTarget.files[0]);
            formData.append('ids', ids);
            formData.append('meetingId', this.sessionList[this.conditionBusinessOwnershipIndex].meetingId);
            let that = this
            vueUI.ajaxCall({
                type: 'post',
                url: vueUI.conf.host + '/seat/import',
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
                
                success: function (rsp) {
                    console.log('______________________',rsp)
                    that.submitPopup2 = false

                    that.errorList =JSON.parse(rsp).errorList
                    if(that.errorList.length==0){
                        // vueUI.alert('导入成功')
                        let json = { cateId:that.sessionList[that.conditionBusinessOwnershipIndex].cateId,meetingId:that.sessionList[that.conditionBusinessOwnershipIndex].meetingId }
                        console.log('123',json)
                        that.kuandu = that.sessionList[that.conditionBusinessOwnershipIndex].kuandu
                        that.gaodu = that.sessionList[that.conditionBusinessOwnershipIndex].gaodu
                        that.kuandu2 = that.kuandu/2-700
                        that.gaodu2 = that.gaodu/2-400
                        // console.log('22222222222222')
                        // 本地储存
                        
                        window.sessionStorage.setItem('conditionBusinessOwnership', that.conditionBusinessOwnership)
                        window.sessionStorage.setItem('conditionBusinessOwnershipIndex', that.conditionBusinessOwnershipIndex)
                        window.sessionStorage.setItem('kuandu', that.kuandu)
                        window.sessionStorage.setItem('gaodu', that.gaodu)
                        window.sessionStorage.setItem('kuandu2', that.kuandu2)
                        window.sessionStorage.setItem('gaodu2', that.gaodu2)
                        window.sessionStorage.setItem('json1', JSON.stringify(json))
                        routers.route.go({
                            path: "/temp",
                            query: {
                                url: `/ima/seatSelection`
                            }
                        });
                    }else{
                        that.submitPopup4 = true
                    }
                    
                    console.log('that.submitPopup4',that.errorList)
                    ids = ''
                }, error: (rsp) => {
                    if (rsp.status != 0) {
                        var err = JSON.parse(rsp.responseText);
                        if (err.meta.code == 999) {
                            vueUI.alert(err.meta.message)
                        }
                    }
                }
            });
        },
        quxiao4(){
            this.submitPopup4 = false
            let json = { cateId:this.sessionList[this.conditionBusinessOwnershipIndex].cateId,meetingId:this.sessionList[this.conditionBusinessOwnershipIndex].meetingId }
            console.log('123',json)
            this.kuandu = this.sessionList[this.conditionBusinessOwnershipIndex].kuandu
            this.gaodu = this.sessionList[this.conditionBusinessOwnershipIndex].gaodu
            this.kuandu2 = this.kuandu/2-700
            this.gaodu2 = this.gaodu/2-400
            // console.log('22222222222222')
            // 本地储存
            
            window.sessionStorage.setItem('conditionBusinessOwnership', this.conditionBusinessOwnership)
            window.sessionStorage.setItem('conditionBusinessOwnershipIndex', this.conditionBusinessOwnershipIndex)
            window.sessionStorage.setItem('kuandu', this.kuandu)
            window.sessionStorage.setItem('gaodu', this.gaodu)
            window.sessionStorage.setItem('kuandu2', this.kuandu2)
            window.sessionStorage.setItem('gaodu2', this.gaodu2)
            window.sessionStorage.setItem('json1', JSON.stringify(json))
            console.log('9999999999999999999999999999999')
            routers.route.go({
                path: "/temp",
                query: {
                    url: `/ima/seatSelection`
                }
            });
            console.log('888888888888888888888888888')
        },
        handleDomSelect() {
            const dom_mask = window.document.querySelector(".mask");
            //getClientRects()每一个盒子的边界矩形的矩形集合
            const rect_select = dom_mask.getClientRects()[0];
            // 多维数组转一维数组
            let arr1 = this.list.reduce((pre, cur) => {
              return pre.concat(cur)
            }, [])
            console.log('多维数组concat -- 二维', arr1)
            console.log('原二维', this.list)
            // console.log(arr1);//[ 1, 2, 3, 4, 5 ]
            // console.log(rect_select);
            document.querySelectorAll(".site-item").forEach((node, index) => {
                const rects = node.getClientRects()[0];
                // console.log('this.collide(rects, rect_select)',this.collide(rects, rect_select))
                if (this.collide(rects, rect_select) === true) {
                    // console.log('this.selectedState.includes(this.list[index].id))',this.list[index])
                    // this.list[index].ids = 100
                    if (arr1[index].rc !== '') {
                        // this.list[index].ids = ""
                        // this.add_list = []
                        this.xuanzhong.push(arr1[index])
                        vueUI.alert('包含已被选中的座位')
                    } else {
                        // Vue.set(this.list[index],'rc',this.list[index].id)
                        this.add_list.push(arr1[index])
                        
                        
                        // console.log('add_list2',add_list)
                    }
                    // if (this.selectedState.includes(this.list[index].id)) {
                    //     del_list.push(this.list[index].id);
                    // } else {
                    //     add_list.push(this.list[index].id);
                    // }
                    // this.x = this.x - 0.01;
                }
            });
            // console.log('add_list',this.add_list)
            // this.add_list = []
            // this.selectedState = this.selectedState.concat(add_list).filter((item) => !del_list.includes(item));
        },
        //比较checkbox盒子边界和遮罩层边界最大最小值
        collide(rect1, rect2) {
            const maxX = Math.max(rect1.x + rect1.width, rect2.x + rect2.width);
            const maxY = Math.max(rect1.y + rect1.height, rect2.y + rect2.height);
            const minX = Math.min(rect1.x, rect2.x);
            const minY = Math.min(rect1.y, rect2.y);
            return maxX - minX <= rect1.width + rect2.width && maxY - minY <= rect1.height + rect2.height;
        },

        //清除
        resSetXY() {
            this.positionList.start_x = 0;
            this.positionList.start_y = 0;
            this.positionList.end_x = 0;
            this.positionList.end_y = 0;
        },
        mousemove(e) {
            this.x = e.pageX - this.startx + this.endx;
            this.y = e.pageY - this.starty + this.endy;
        },
        mouseup() {
            this.lastTime = new Date().getTime();
            if (this.lastTime - this.firstTime < 150) {
                this.key = true;
            }
            // 解除绑定mousemove
            document.removeEventListener("mousemove", this.mousemove, false);
            this.endx = this.x;
            this.endy = this.y;
        },
        // 拖拽开始事件
        dragstart(e) {
            // console.log(e);
            this.startclientX = e.clientX; // 记录拖拽元素初始位置
            this.startclientY = e.clientY;
        },
        // 拖拽完成事件
        dragend(e) {
            // console.log(e);
            let x = e.clientX - this.startclientX; // 计算偏移量
            let y = e.clientY - this.startclientY;
            this.elLeft += x; // 实现拖拽元素随偏移量移动
            this.elTop += y;
        },
        // 选择场次
        onBusinessOwnershipChange(obj, index) {
            this.conditionBusinessOwnership = obj;
            // console.log('=++++++++', obj)
            this.conditionBusinessOwnershipIndex = index;
            // console.log('------------', index)
            
        },
        removeConditionBusinessOwnership() {
            this.conditionBusinessOwnership = undefined;
            this.conditionBusinessOwnershipIndex = -1;
        },
        switchVenues(){
            console.log('00000000000')
            // this.$forceUpdate();
            // Vue.set(this.list, []);
            // console.log('this.$forceUpdate();',Vue.forceUpdate)
            let json = { cateId:this.sessionList[this.conditionBusinessOwnershipIndex].cateId,meetingId:this.sessionList[this.conditionBusinessOwnershipIndex].meetingId }
            console.log('123',json)
            // this.list = []
            // this.seatColor = 0
            // console.log('111111111111')
            this.kuandu = this.sessionList[this.conditionBusinessOwnershipIndex].kuandu
            this.gaodu = this.sessionList[this.conditionBusinessOwnershipIndex].gaodu
            this.kuandu2 = this.kuandu/2-700
            this.gaodu2 = this.gaodu/2-400
            // console.log('22222222222222')
            // 本地储存
            
            window.sessionStorage.setItem('conditionBusinessOwnership', this.conditionBusinessOwnership)
            window.sessionStorage.setItem('conditionBusinessOwnershipIndex', this.conditionBusinessOwnershipIndex)
            window.sessionStorage.setItem('kuandu', this.kuandu)
            window.sessionStorage.setItem('gaodu', this.gaodu)
            window.sessionStorage.setItem('kuandu2', this.kuandu2)
            window.sessionStorage.setItem('gaodu2', this.gaodu2)
            window.sessionStorage.setItem('json1', JSON.stringify(json))
            routers.route.go({
                path: "/temp",
                query: {
                    url: `/ima/seatSelection`
                }
            });
            // this.layerIndex = layer.load(1, {
            //     shade: [1,'#fff'] //0.1透明度的白色背景
            // });
            // console.log('3333333333333')
            // // console.log('444444444444',this.list)
            // setTimeout(() => {
            //     console.log('55555555555')
            //     this.getzuowei();
            // }, 1000);
        },
    }
});

window.isNullStr = function (str) {
    if (validate.isEmpty(str)) {
        return '';
    } else {
        return str;
    }
}