FE-V2-PC/src/views/comprehensive/laboratoryManagement/building/buildingDetails.vue

<template>
  <div class="buildingDetails">
    <div class="buildingDetails-page">
      <div class="max-left-box">
        <div class="max-left-box-one" v-if="!mapSrc">
          <div class="max-button-big-position-box">
            <img src="@/assets/ZDimages/evacuation3_2/img_xgbj_syl.png">
            <el-upload
              class="up-img-button-box"
              style="height:40px;width:300px;"
              :action="uploadImgUrl"
              :show-file-list="false"
              accept="image/png"
              :on-success="(res, file)=>handleAvatarSuccess(res, file,1)"
              :headers="headers"
              :before-upload="beforeAvatarUpload">
              <p class="up-img-button">+  上传图片</p>
            </el-upload>
            <p class="up-img-text">请点击上传图片按钮上传实验室楼层布局参考图</p>
          </div>
        </div>
        <div class="max-left-button-box" v-show="mapSrc">
          <p class="null-p"></p>
          <el-upload
            class="up-img-p"
            :action="uploadImgUrl"
            :show-file-list="false"
            accept="image/png"
            :on-success="(res, file)=>handleAvatarSuccess(res, file,2)"
            :headers="headers"
            :before-upload="beforeAvatarUpload">
            <p style="margin:0;">更换图纸</p>
          </el-upload>
          <div class="opacity-button-box">
            <p @click="opacityClick(1)">-</p>
            <p>透明度：{{mapOpacityText}}%</p>
            <p @click="opacityClick(2)">+</p>
          </div>
        </div>
        <div class="max-left-map-big-box scrollbar-box" ref="maxBigBox" v-show="mapSrc">
          <div class="left-map-box" ref="maxBox" :style="'width:'+layerWidth+'px;height:'+layerHeight+'px;'">
            <!--循环房间数据-->
            <div :class="item.type == 2?'for-map-box-one':(item.type == 1?'for-map-box':(item.type == 3?'for-map-box-two':''))" v-for="(item,index) in mapList" :key="index"
                 ref="moveBox"
                 :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
              <div class="top-big-box">
                <p class="top-left-p"
                   @mousedown.stop="(MouseEvent)=>zoomDownXY(MouseEvent,index,4)"></p>
                <p class="top-center-p"
                   @mousedown.stop="(MouseEvent)=>zoomDownY(MouseEvent,index,1)"></p>
                <p class="top-right-p"
                   @mousedown.stop="(MouseEvent)=>zoomDownXY(MouseEvent,index,1)"></p>
              </div>
              <div class="center-big-box">
                <p class="center-left-p"
                   @mousedown.stop="(MouseEvent)=>zoomDownX(MouseEvent,index,4)"></p>
                <div class="center-move-box"
                     :style="'line-height:'+(item.w>item.h?item.h-4:item.w-4)+'px;'"
                     @contextmenu="(contextmenu)=>boxRightClick(contextmenu,item,index)"
                     @mousedown.stop="(MouseEvent)=>dragDown(MouseEvent,index)">
                  {{item.roomNum&&item.type == 1?item.roomNum:(!item.roomNum&&item.type == 1?'右键配置':'')}}
                </div>
                <!--这里要改找志蔚-->
                <p class="center-right-p"
                   @mousedown.stop="(MouseEvent)=>zoomDownX(MouseEvent,index,2)"></p>
              </div>
              <div class="bottom-big-box">
                <p class="bottom-left-p"
                   @mousedown.stop="(MouseEvent)=>zoomDownXY(MouseEvent,index,3)"></p>
                <p class="bottom-center-p"
                   @mousedown.stop="(MouseEvent)=>zoomDownY(MouseEvent,index,3)"></p>
                <p class="bottom-right-p"
                   @mousedown.stop="(MouseEvent)=>zoomDownXY(MouseEvent,index,2)"></p>
              </div>
              <p class="center-move-door-p" v-if="item.type == 1"
                 :class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
                 v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
                 @contextmenu.stop="(contextmenu)=>boxRightClick(contextmenu,minItem,index,minIndex)"
                 :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"
                 @mousedown.stop="(MouseEvent)=>doorDragDown(MouseEvent,index,minIndex)"
              ></p>
              <p class="center-move-door-p" v-if="item.type == 3"
                 :class="minItem.toward=='top'?'center-move-door-p-t-ss':(minItem.toward=='bottom'?'center-move-door-p-b-ss':(minItem.toward=='left'?'center-move-door-p-l-ss':(minItem.toward=='right'?'center-move-door-p-r-ss':'')))"
                 v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
                 @contextmenu.stop="(contextmenu)=>boxRightClick(contextmenu,minItem,index,minIndex)"
                 :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"
                 @mousedown.stop="(MouseEvent)=>doorDragDown(MouseEvent,index,minIndex)"
              ></p>
              <p class="center-move-light-p" v-if="minItem.type != 'light'&&!minItem.openType"
                 v-for="(minItem,minIndex) in item.lightList" :key="minIndex"
                 :class="minItem.type == 'lab'?'colorDoor':(minItem.type == 'traffic'?'colorTraffic':(minItem.type == 'connect'?'colorConnect':''))"
                 :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"
              ><span v-for="(optionsItem,optionsIndex) in dialogOptions" v-if="minItem.state == optionsItem.value">{{optionsItem.label}}</span>{{minItem.name}}</p>
              <p class="center-move-light-p" v-if="minItem.type == 'light'&&!minItem.openType"
                 v-for="(minItem,minIndex) in item.lightList" :key="minIndex"
                 @contextmenu.stop="(contextmenu)=>boxRightClick(contextmenu,minItem,index,minIndex)"
                 :class="minItem.state=='1'?'lightTop':(minItem.state=='2'?'lightBottom':(minItem.state=='3'?'lightLeft':(minItem.state=='4'?'lightRight':'lightNone')))"
                 :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"
                 @mousedown.stop="(MouseEvent)=>lightDragDown(MouseEvent,index,minIndex)"
              ></p>
            </div>
          </div>
          <img class="left-map-img" :src="mapSrc" :style="'opacity:'+mapOpacity+';width:'+layerWidth+'px;height:'+layerHeight+'px;'">
        </div>
      </div>
      <div class="max-right-box">
        <div class="right-title-box">
          <el-tooltip class="item" effect="dark" :content="buildName+'楼'+floorName+'层'" placement="top-start">
            <p class="right-title-p">{{buildName}}楼{{floorName}}层</p>
          </el-tooltip>
          <div @click="buttonShadeClick">
            <p class="el-icon-question"></p>
            <p>使用帮助</p>
          </div>
        </div>
        <div class="right-bottom-max-box scrollbar-box">
          <div class="right-for-max-box">
            <p class="right-for-title">结构</p>
            <div class="right-for-box" v-for="(item,index) in roomList" :key="index">
              <img
                draggable="true"
                @dragstart="(DragEvent)=>externalAddDragStart(DragEvent,item.type)"
                @dragend="(DragEvent)=>externalAddDragEnd(DragEvent,'2')"
                :src="item.url">
              <p>{{item.name}}</p>
            </div>
          </div>
          <div class="right-for-max-box">
            <p class="right-for-title">房间</p>
            <div class="right-for-box" v-for="(item,index) in accessoriesList" :key="index">
              <img
                draggable="true"
                @dragstart="(DragEvent)=>internalAddDragStart(DragEvent,item.type)"
                @dragend="(DragEvent)=>internalAddDragEnd(DragEvent,'2')"
                :src="item.url">
              <p>{{item.name}}</p>
            </div>
          </div>
          <div class="right-button-box">
            <p></p>
            <p @click="clickBack">返回</p>
            <p @click="setDataButton">保存</p>
            <p></p>
          </div>
        </div>
      </div>
    </div>
    <!--右键-->
    <div class="map-shade-max-big-box" v-if="mouseType != 0" @click="offMapShade">
      <div class="map-shade-big-box" :style="'top:'+mouseY+'px;left:'+mouseX+'px;'">
        <p class="shade-button-p" v-if="dialogOpenType == 1 || dialogOpenType == 6" @click="clickShadeButton(1)">编辑</p>
        <p class="shade-border-p" v-if="dialogOpenType == 1 || dialogOpenType == 6"></p>
        <p class="shade-button-p" @click="clickShadeButton(2)">删除</p>
      </div>
    </div>
    <!--房间/灯设置-->
    <el-dialog :title="dialogOpenType==1?'编辑房间':(dialogOpenType==6?'编辑指示灯':'')" :visible.sync="dialogOpen" v-if="dialogOpen" width="600px" append-to-body>
      <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="120px">
        <div v-if="dialogOpenType == 1">
          <el-form-item label="房间类型：" prop="roomType">
            <el-select v-model="dialogForm.roomType" placeholder="请选择房间类型" style="width:300px;">
              <el-option
                v-for="item in roomOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房间编号：" prop="roomNum">
            <el-input v-model="dialogForm.roomNum" placeholder="请输入房间编号" maxlength="20" style="width:300px;"/>
          </el-form-item>
          <el-form-item label="房间名称：" prop="roomName" v-if="dialogForm.roomType == '-99'">
            <el-input v-model="dialogForm.roomName" placeholder="请输入房间名称" maxlength="20" style="width:300px;"/>
          </el-form-item>
          <el-form-item label="房间选择：" prop="subId" v-if="dialogForm.roomType != '-99'">
            <el-select
              style="width:300px;"
              v-model="dialogForm.subId"
              filterable
              remote
              reserve-keyword
              @focus="selectFocus"
              @change="selectClick"
              placeholder="请选择房间"
              :remote-method="userSelectList"
              :loading="loading">
              <el-option
                v-for="item in subjectOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div v-if="dialogOpenType == 6">
          <el-form-item label="继电器类型：" prop="relayType">
            <el-radio-group v-model="dialogForm.relayType" style="margin-top:4px;">
              <el-radio :label="2">新版继电器</el-radio>
              <el-radio :label="1">老版继电器</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="继电器参数：" prop="configName" v-if="dialogForm.relayType == 2">
            <el-input v-model="dialogForm.configName" placeholder="请输入继电器参数" maxlength="20" style="width:300px;"/>
          </el-form-item>
          <el-form-item label="状态参数：" prop="configStatus" style="width:398px;" v-if="dialogForm.relayType == 2">
            <el-input v-model="dialogForm.configStatus" placeholder="请输入状态参数" maxlength="20" style="width:300px;"/>
          </el-form-item>
          <el-form-item label="继电器编号：" prop="relayCode" v-if="dialogForm.relayType == 1">
            <el-input v-model="dialogForm.relayCode" placeholder="请输入继电器参数" maxlength="20" style="width:300px;"/>
          </el-form-item>
          <el-form-item label="继电器路数：" prop="relayBit" style="width:398px;" v-if="dialogForm.relayType == 1" class="dialog-relay-bit-form-item-box">
            <el-input-number v-model="dialogForm.relayBit" :min="1" :max="12" placeholder="请输入状态参数" :controls="false" style="width:300px;"></el-input-number>
          </el-form-item>
          <el-form-item label="指示灯类型：" prop="state">
            <el-radio-group v-model="dialogForm.state" style="margin-top:4px;">
              <el-radio :label="item.value" v-for="item in dialogOptions">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <div style="display: flex">
          <p style="flex:1;"></p>
          <p style="cursor:pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;margin-right:17px;color:#999999;background:#E0E0E0;" @click="buttonSetButton(1)">取消</p>
          <p style="cursor:pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;color:#fff;background:#0045AF;" @click="buttonSetButton(2)">确定</p>
          <p style="flex:1;"></p>
        </div>
      </div>
    </el-dialog>
    <!--引导遮罩层-->
    <div class="shade-max-big-box" v-if="shadeBoxType != 0">
      <div v-if="shadeBoxType == 1" class="shade-max-box-1">
        <img class="shade-big-img" src="@/assets/ZDimages/evacuation3_2/img_znwl_jt.png">
        <p class="shade-big-1-text-1">更换图纸</p>
        <div class="shade-big-1-text-2">
          <p>-</p>
          <p>透明度：{{mapOpacityText}}%</p>
          <p>+</p>
        </div>
        <p class="shade-big-1-text-3">请先行上传图纸，根据图纸进行楼层布局的临摹，能够让绘制的图形更加精准</p>
        <p class="shade-big-1-text-4">上传图纸的可以修改透明度，如图纸会对绘制产生干扰，则能够将透明度降低方便绘制和临摹。</p>
        <p class="shade-big-1-text-5" @click="shadeClick(2)">下一步</p>
      </div>
      <div v-if="shadeBoxType == 2" class="shade-max-box-2">
        <img class="shade-big-img" src="@/assets/ZDimages/evacuation3_2/img_znwl_jt.png">
        <div class="shade-big-1-text-1">
          <img src="@/assets/ZDimages/evacuation3_2/img_xgbj_gd.png">
          <p>楼道</p>
        </div>
        <div class="shade-big-1-text-2">
          <img src="@/assets/ZDimages/evacuation3_2/img_xgbj_yjck.png">
          <p>应急出口</p>
        </div>
        <div class="shade-big-1-text-3">
          <img src="@/assets/ZDimages/evacuation3_2/img_xgbj_fj.png">
          <p>房间</p>
        </div>
        <p class="shade-big-1-text-4">楼道绘制方法为点击拖拽至绘制区域，鼠标左键选中楼道可以调整楼道的位置和尺寸。楼道支持与其他楼道衔接，衔接办法为选择矩形楼道中线上的点位与另外一个矩形过的中线进行结合即可。</p>
        <p class="shade-big-1-text-5">应急出口为固定尺寸，点击拖拽至绘制区域即可。</p>
        <p class="shade-big-1-text-6">房间可直接拖拽至绘制区域，鼠标左键选中房间可以调整楼道的位置和尺寸。</p>
        <p class="shade-big-1-text-7" @click="shadeClick(3)">下一步</p>
      </div>
      <div v-if="shadeBoxType == 3" class="shade-max-box-3">
        <img class="shade-big-img" src="@/assets/ZDimages/evacuation3_2/img_znwl_jtt.png">
        <p class="shade-big-1-text-1">房门为固定尺寸，点击拖拽至绘制区域的房间内即可。</p>
        <p class="shade-big-1-text-2">疏散灯需要拖拽至绘制区域的走道中，请您确认疏散灯位置尽可能与实际安装位置一致。</p>
        <p class="shade-big-1-text-3" @click="shadeClick(4)">下一步</p>
        <div class="shade-big-1-text-4">
          <img src="@/assets/ZDimages/evacuation3_2/img_xgbj_fj.png">
          <p>房间</p>
        </div>
        <div class="shade-big-1-text-5">
          <img src="@/assets/ZDimages/evacuation3_2/img_xgbj_fj.png">
          <p>房间</p>
        </div>
      </div>
      <div v-if="shadeBoxType == 4 || shadeBoxType == 5" class="shade-max-box-4">
        <div>
          <p>{{shadeBoxType == 4?'最后提示：':''}}</p>
          <p>左键选中组件可以调整大小和位置，右键选中组件可以删除组件或编辑组件属性，马上开始绘制布局吧。</p>
          <p @click="shadeClick(0)">开始绘制</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { Loading } from 'element-ui'
  import { getToken } from "@/utils/auth";
  import { checkDoorTo,checkLightDirection,checkRoom,calculateTrafficPoint,addDoorPoint,
    doorMoveJudge,lightMoveJudge,roomMove,roomAdd,lightAdd,addDoor,fourCornersZoom,
    fourEdgeZoom,setJsData,checkInstall} from "@/utils/evacuationLayout";
  import { subjectList,lineVertex} from "@/api/evacuation3_2/index";
  export default {
    name: "builDingDetails",
    props:{
      propsData:{},
    },
    data() {
      return {
        loading:false,
        loadingInstance:{},
        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        //背景图透明度
        mapOpacity:0.5,
        mapOpacityText:50,
        //背景图地址
        // mapSrc:'https://img0.baidu.com/it/u=3368678403,249914024&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
        mapSrc:'',
        /*********************布局设置参数*********************/
        //边界位置
        borderLeft:null,
        borderTop:null,
        //画布/楼层尺寸
        layerWidth:null,
        layerHeight:null,
        //房间尺寸限制
        minHeight:100,
        maxHeight:600,
        minWidth:100,
        maxWidth:800,
        //门尺寸数据
        doorHeight:34,
        doorWidth:34,
        //灯尺寸数据
        minLightNum:40,
        maxLightNum:40,
        //交通点检测时触手范围
        tentaclesLength:10,
        //房间数据
        newMapList:[],
        mapList: [],
        //当前坐标
        clientX: "",
        clientY: "",
        boxIndex: "",
        //房间边框/角方向状态  1.上/右上 2.右/右下 3.下/左下 4.左/左上
        moveType:null,
        //抓取类型 1.房间 2.楼道 3.应急出口 4.房门 6.疏散灯
        grab:null,
        //子类抓取下标
        minIndex:null,
        //***********************模拟数据列表*************************//
        // 可选房间列表 //1.房间 2.楼道 3.应急出口
        roomList:[
          {
            name:"楼道",
            type: '2',
            url:require('@/assets/ZDimages/evacuation3_2/img_xgbj_gd.png'),
          },
          {
            name:"应急出口",
            type: '3',
            url:require('@/assets/ZDimages/evacuation3_2/img_xgbj_yjck.png'),
          },
          {
            name:"房间",
            type: '1',
            url:require('@/assets/ZDimages/evacuation3_2/img_xgbj_fj.png'),
          },
        ],
        // 房间内配件列表 //4.房间 6.疏散灯
        accessoriesList:[
          {
            name:"房门",
            type: '4',
            url:require('@/assets/ZDimages/evacuation3_2/img_xgbj_fjm.png'),
          },
          {
            name:"疏散灯",
            type: '6',
            url:require('@/assets/ZDimages/evacuation3_2/icon_bjt_ssd.png'),
          },
        ],
        //************************弹层开关*******************************//
        shadeBoxType:0,
        //************************灯设置数据*******************************//
        dialogOpen:0,
        dialogOpenType:0,
        dialogIndex:null,
        dialogMinIndex:null,
        dialogForm:{},
        dialogOptions: [
          {
            value: '1',
            label: '上指示灯'
          }, {
            value: '2',
            label: '下指示灯'
          }, {
            value: '3',
            label: '左指示灯'
          }, {
            value: '4',
            label: '右指示灯'
          },
        ],
        //鼠标右键抓取坐标
        mouseX:null,
        mouseY:null,
        mouseType:0,
        //房间类型列表
        roomOptions:[],
        rules:{
          roomType:[
            {required: true, message: '请选择房间类型', trigger: 'blur'},
            { required: true, message: "请选择房间类型", validator: this.spaceJudgment, trigger: "blur" }
          ],
          roomNum:[
            {required: true, message: '请输入房间编号', trigger: 'blur'},
            { required: true, message: "请输入房间编号", validator: this.spaceJudgment, trigger: "blur" }
          ],
          roomName:[
            {required: true, message: '请输入房间名称', trigger: 'blur'},
            { required: true, message: "请输入房间名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          subId:[
            {required: true, message: '请选择房间', trigger: 'blur'},
            { required: true, message: "请选择房间", validator: this.spaceJudgment, trigger: "blur" }
          ],
          name1:[
            {required: true, message: '请选择继电器类型', trigger: 'blur'},
            { required: true, message: "请选择继电器类型", validator: this.spaceJudgment, trigger: "blur" }
          ],
          name2:[
            {required: true, message: '请输入继电器参数', trigger: 'blur'},
            { required: true, message: "请输入继电器参数", validator: this.spaceJudgment, trigger: "blur" }
          ],
          name3:[
            {required: true, message: '请输入状态参数', trigger: 'blur'},
            { required: true, message: "请输入状态参数", validator: this.spaceJudgment, trigger: "blur" }
          ],
          state:[
            {required: true, message: '请选择指示灯类型', trigger: 'blur'},
            { required: true, message: "请选择指示灯类型", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        //拖拽时显示的图片
        roomImg_1:null,
        roomImg_2:null,
        roomImg_3:null,
        doorImg:null,
        lightImg:null,
        //选择实验室 下拉列表
        roomSelectList:[],
        roomSelectValue:'',
        //懒加载实验室列表
        subjectOptions:[],
        buildName:'',
        floorName:'',
      }
    },
    created() {
    },
    mounted(){
      console.log(this.propsData)
      this.buildName=this.propsData.buildName
      this.floorName=this.propsData.floorName
      this.initialization();
      this.getDicts("layout_room_type").then(response => {
        this.roomOptions = response.data;
        this.roomOptions.push({dictLabel:'其他',dictValue:'-99'})
      });
      // this.$set(this,'mapList',[{"name":"q01","y":401,"x":1,"w":100,"h":100,"type":"1","direction":"1","doorList":[{"type":"door","toward":"right","w":25,"h":25,"x":73,"y":29.5}]},{"name":"z01","y":98,"x":801,"w":100,"h":100,"type":"3","direction":"1","doorList":[{"type":"door","toward":"left","w":25,"h":25,"x":2,"y":39.5}]},{"name":"l01","y":101,"x":101,"w":100,"h":498,"type":"2","direction":"1","lightList":[{"type":"light","state":"1","w":20,"h":20,"x":40,"y":10},{"type":"light","state":"2","w":20,"h":20,"x":40,"y":90},{"type":"light","state":"1","w":20,"h":20,"x":40,"y":295},{"type":"light","state":"2","w":20,"h":20,"x":40,"y":367},{"type":"light","state":"1","w":20,"h":20,"x":40,"y":400},{"type":"light","state":"2","w":20,"h":20,"x":40,"y":464}]},{"name":"l02","y":301,"x":201,"w":500,"h":100,"type":"2","direction":"1","lightList":[{"type":"light","state":"3","w":20,"h":20,"x":41,"y":40},{"type":"light","state":"4","w":20,"h":20,"x":121,"y":40},{"type":"light","state":"3","w":20,"h":20,"x":348,"y":40},{"type":"light","state":"4","w":20,"h":20,"x":448,"y":40},{"type":"light","state":"3","w":20,"h":20,"x":194,"y":40},{"type":"light","state":"4","w":20,"h":20,"x":277,"y":40}]},{"name":"l03","y":101,"x":701,"w":100,"h":498,"type":"2","direction":"1","lightList":[{"type":"light","state":"1","w":20,"h":20,"x":40,"y":12},{"type":"light","state":"2","w":20,"h":20,"x":40,"y":167},{"type":"light","state":"1","w":20,"h":20,"x":40,"y":321},{"type":"light","state":"2","w":20,"h":20,"x":40,"y":449}]},{"name":"l04","y":101,"x":401,"w":100,"h":200,"type":"2","direction":"1","lightList":[{"type":"light","state":"1","w":20,"h":20,"x":40,"y":46},{"type":"light","state":"2","w":20,"h":20,"x":40,"y":158}]},{"name":"l05","y":401,"x":401,"w":100,"h":198,"type":"2","direction":"1","lightList":[{"type":"light","state":"1","w":20,"h":20,"x":40,"y":23},{"type":"light","state":"2","w":20,"h":20,"x":40,"y":155}]},{"x":301,"y":201,"w":100,"h":100,"type":"1","direction":"1","doorList":[{"type":"door","toward":"right","w":25,"h":25,"x":73,"y":20.5}]},{"x":1,"y":501,"w":100,"h":100,"type":"3","direction":"1","doorList":[{"type":"door","toward":"right","w":25,"h":25,"x":73,"y":30.5}]},{"x":801,"y":498,"w":100,"h":100,"type":"3","direction":"1","doorList":[{"type":"door","toward":"left","w":25,"h":25,"x":2,"y":18.5}]},{"x":301,"y":101,"w":100,"h":100,"type":"1","direction":"1","doorList":[{"type":"door","toward":"top","w":25,"h":25,"x":35.5,"y":2}]},{"x":201,"y":201,"w":100,"h":100,"type":"1","direction":"1","doorList":[{"type":"door","toward":"left","w":25,"h":25,"x":2,"y":23.5}]},{"x":201,"y":101,"w":100,"h":100,"type":"1","direction":"1","doorList":[{"type":"door","toward":"left","w":25,"h":25,"x":2,"y":44.5}]},{"x":1,"y":301,"w":100,"h":100,"type":"1","direction":"1","doorList":[{"type":"door","toward":"right","w":25,"h":25,"x":73,"y":30.5}]},{"x":1,"y":201,"w":100,"h":100,"type":"1","direction":"1","doorList":[{"type":"door","toward":"right","w":25,"h":25,"x":73,"y":40.5}]},{"x":1,"y":101,"w":100,"h":100,"type":"1","direction":"1","doorList":[{"type":"door","toward":"right","w":25,"h":25,"x":73,"y":49.5}]},{"x":801,"y":398,"w":100,"h":100,"type":"1","direction":"1","doorList":[{"type":"door","toward":"left","w":25,"h":25,"x":2,"y":36.5}]},{"x":801,"y":298,"w":100,"h":100,"type":"1","direction":"1","doorList":[{"type":"door","toward":"left","w":25,"h":25,"x":2,"y":34.5}]},{"x":801,"y":198,"w":100,"h":100,"type":"1","direction":"1","doorList":[{"type":"door","toward":"left","w":25,"h":25,"x":2,"y":22.5}]},{"x":201,"y":401,"w":100,"h":100,"type":"1","direction":"1","doorList":[{"type":"door","toward":"left","w":25,"h":25,"x":2,"y":26.5}]},{"x":301,"y":401,"w":100,"h":100,"type":"1","direction":"1","doorList":[{"type":"door","toward":"right","w":25,"h":25,"x":73,"y":43.5}]},{"x":201,"y":501,"w":100,"h":100,"type":"1","direction":"1","doorList":[{"type":"door","toward":"left","w":25,"h":25,"x":2,"y":29.5}]},{"x":301,"y":501,"w":100,"h":100,"type":"1","direction":"1","doorList":[{"type":"door","toward":"right","w":25,"h":25,"x":73,"y":27.5}]},{"x":501,"y":201,"w":200,"h":100,"type":"1","direction":"1","doorList":[{"type":"door","toward":"right","w":25,"h":25,"x":173,"y":30.5}]},{"x":501,"y":101,"w":200,"h":100,"type":"1","direction":"1","doorList":[{"type":"door","toward":"top","w":25,"h":25,"x":136.5,"y":2}]},{"x":501,"y":401,"w":100,"h":198,"type":"1","direction":"1","doorList":[{"type":"door","toward":"bottom","w":25,"h":25,"x":35.5,"y":171}]},{"x":601,"y":401,"w":100,"h":198,"type":"1","direction":"1","doorList":[{"type":"door","toward":"bottom","w":25,"h":25,"x":33.5,"y":171}]},{"x":101,"y":1,"w":700,"h":100,"type":"2","direction":"1","lightList":[{"type":"light","state":"3","w":20,"h":20,"x":160,"y":40},{"type":"light","state":"4","w":20,"h":20,"x":274,"y":40},{"type":"light","state":"3","w":20,"h":20,"x":495,"y":40},{"type":"light","state":"4","w":20,"h":20,"x":580,"y":40}]},{"x":401,"y":599,"w":400,"h":100,"type":"2","direction":"1","lightList":[{"type":"light","state":"3","w":20,"h":20,"x":87,"y":40},{"type":"light","state":"4","w":20,"h":20,"x":171,"y":40},{"type":"light","state":"3","w":20,"h":20,"x":207,"y":40},{"type":"light","state":"4","w":20,"h":20,"x":272,"y":40}]},{"x":1,"y":1,"w":100,"h":100,"type":"3","direction":"1","doorList":[{"type":"door","toward":"right","w":25,"h":25,"x":73,"y":36.5}]}])
      // this.$set(this,'mapSrc','1');
    },
    methods:{
      //提交
      setDataButton(){
        let self = this;
        if(checkRoom(this.mapList)&&
          checkDoorTo(this.mapList)&&
          checkInstall(this.mapList)){
          let newMapList = JSON.parse(JSON.stringify(this.mapList))
          let obj = addDoorPoint(newMapList)
          console.log('obj',obj);
          //提交数据处理
          let roomList = [];
          let lightList = [];
          for(let i=0;i<obj.mapList.length;i++){
            if(obj.mapList[i].type == 1){
              let minObj = {
                roomType:obj.mapList[i].roomType,
                roomNum:obj.mapList[i].roomNum,
                pointName:obj.mapList[i].key,
              }
              if(obj.mapList[i].roomType != '-99'){
                minObj.subId = obj.mapList[i].subId
                minObj.subName = obj.mapList[i].subName
              }else{
                minObj.roomName = obj.mapList[i].roomName
              }
              roomList.push(minObj);
            }else if(obj.mapList[i].type == 2){
              for(let o=0;o<obj.mapList[i].lightList.length;o++){
                if( obj.mapList[i].lightList[o].type == 'light'){
                  let minObj = {
                    pointName:obj.mapList[i].lightList[o].key,
                    relayType:obj.mapList[i].lightList[o].relayType,
                    state:obj.mapList[i].lightList[o].state,
                  }
                  if(obj.mapList[i].lightList[o].relayType == 1){
                    minObj.relayCode = obj.mapList[i].lightList[o].relayCode
                    minObj.relayBit = obj.mapList[i].lightList[o].relayBit
                  }else if(obj.mapList[i].lightList[o].relayType == 2){
                    minObj.configName = obj.mapList[i].lightList[o].configName
                    minObj.configStatus = obj.mapList[i].lightList[o].configStatus
                  }
                  lightList.push(minObj);
                }
              }
            }
          }
          let newObj = {
            imgUrl: this.mapSrc,
            canvasWidth: this.layerWidth,
            canvasHeight: this.layerHeight,
            buildId: this.propsData.buildId,
            floorId: this.propsData.floorId,
            relationalData:obj.newList,//点数据
            buildFloorLayouts:roomList,//房间数据
            exitPointRelayList:lightList,//灯数据
            layoutData:JSON.stringify(this.mapList),//布局数据
            layoutJoinData:JSON.stringify(obj.evacuationList),//布局数据
          };
          console.log('newObj',newObj);
          lineVertex(newObj).then(response => {
            this.msgSuccess(response.msg);
            this.$parent.clickPage(3)
          });
        }
      },
      //返回
      clickBack(){
        this.$parent.clickPage(1)
      },
      //初始化
      initialization(){
        if(this.propsData.layoutData){
          this.$set(this,'mapSrc',this.propsData.imgUrl);
          this.$set(this,'layerWidth',this.propsData.canvasWidth);
          this.$set(this,'layerHeight',this.propsData.canvasHeight);
          this.$set(this,'maxWidth',this.propsData.canvasWidth);
          this.$set(this,'maxHeight',this.propsData.canvasHeight);
          this.$set(this,'mapList',JSON.parse(this.propsData.layoutData));
          this.$set(this,'shadeBoxType',5);
        }else{
          this.$set(this,'shadeBoxType',0);
        }
      },
      //懒加载实验室
      userSelectList(e){
        subjectList({name:e}).then(response => {
          this.subjectOptions = response.data;
        });
      },
      selectFocus(){
        console.log("123");
      },
      selectClick(e){
        let self = this;
        for(let i=0;i<self.subjectOptions.length;i++){
          if(e == self.subjectOptions[i].id){
            self.$set(self.dialogForm,'subName',self.subjectOptions[i].name);
          }
        }
      },
      /*********************************右键操作事件*********************************/
      //右键事件
      boxRightClick(event,item,index,minIndex){
        event.returnValue = false;
        if(item.type == 'light'){
          this.$set(this,'mouseX',event.clientX)
          this.$set(this,'mouseY',event.clientY )
          this.$set(this,'mouseType',6)
          this.$set(this,'dialogOpenType',6)
          this.$set(this,'dialogIndex',index)
          this.$set(this,'dialogMinIndex',minIndex)
          let obj = {
            relayType:item.relayType?item.relayType:2,
            state:item.state?item.state:"",
          }
          if(obj.relayType == 1){
            obj.relayCode = item.relayCode?item.relayCode:"";
            obj.relayBit = item.relayBit?item.relayBit:"";
          }else if(obj.relayType == 2){
            obj.configName = item.configName?item.configName:"";
            obj.configStatus = item.configStatus?item.configStatus:"";
          }
          this.$set(this,'dialogForm',JSON.parse(JSON.stringify(obj)));
          //等待写
        }else if(item.type == 'door'){
          this.$set(this,'mouseX',event.clientX )
          this.$set(this,'mouseY',event.clientY)
          this.$set(this,'mouseType',4)
          this.$set(this,'dialogOpenType',4)
          this.$set(this,'dialogIndex',index)
          this.$set(this,'dialogMinIndex',minIndex)
          this.$set(this,'dialogForm',JSON.parse(JSON.stringify(item)))
        }else if(item.type == '1'){
          this.$set(this,'mouseX',event.clientX )
          this.$set(this,'mouseY',event.clientY)
          this.$set(this,'mouseType',1)
          this.$set(this,'dialogOpenType',1)
          this.$set(this,'dialogIndex',index)
          let obj = {
            roomType:item.roomType?item.roomType:"",
            roomNum:item.roomNum?item.roomNum:"",
            roomName:item.roomName?item.roomName:"",
            subId:item.subId?item.subId:"",
            subName:item.subName?item.subName:"",
          }
          this.$set(this,'dialogForm',JSON.parse(JSON.stringify(obj)));
        }else if(item.type == '2'){
          this.$set(this,'mouseX',event.clientX )
          this.$set(this,'mouseY',event.clientY)
          this.$set(this,'mouseType',2)
          this.$set(this,'dialogOpenType',2)
          this.$set(this,'dialogIndex',index)
        }else if(item.type == '3'){
          this.$set(this,'mouseX',event.clientX )
          this.$set(this,'mouseY',event.clientY)
          this.$set(this,'mouseType',3)
          this.$set(this,'dialogOpenType',3)
          this.$set(this,'dialogIndex',index)
        }
      },
      //弹窗确定
      buttonSetButton(type){
        let self = this;
        if(type == 1){
          this.dialogOpen = false;
        }else if(type == 2){
          this.$refs["dialogForm"].validate(valid => {
            if (valid) {
              if(this.dialogOpenType == 1){
                for(let i=0;i<self.mapList.length;i++){
                  if(self.mapList[i].type == '1'){
                    if(self.mapList[i].subId == self.dialogForm.subId){
                      this.msgError(self.dialogForm.subName+'已被其他房间绑定')
                      return
                    }
                  }
                }
                this.$set(this.mapList[this.dialogIndex],'roomType',this.dialogForm.roomType);
                this.$set(this.mapList[this.dialogIndex],'roomNum',this.dialogForm.roomNum);
                this.$set(this.mapList[this.dialogIndex],'roomName',this.dialogForm.roomName);
                this.$set(this.mapList[this.dialogIndex],'subId',this.dialogForm.subId);
                this.$set(this.mapList[this.dialogIndex],'subName',this.dialogForm.subName);
                this.dialogOpen = false;
              }else if(this.dialogOpenType == 6){
                this.$set(this.mapList[this.dialogIndex].lightList[this.dialogMinIndex],'relayType',this.dialogForm.relayType);
                this.$set(this.mapList[this.dialogIndex].lightList[this.dialogMinIndex],'state',this.dialogForm.state);
                if(this.dialogForm.relayType == 1){
                  this.$set(this.mapList[this.dialogIndex].lightList[this.dialogMinIndex],'relayCode',this.dialogForm.relayCode);
                  this.$set(this.mapList[this.dialogIndex].lightList[this.dialogMinIndex],'relayBit',this.dialogForm.relayBit);
                }else if(this.dialogForm.relayType == 2){
                  this.$set(this.mapList[this.dialogIndex].lightList[this.dialogMinIndex],'configName',this.dialogForm.configName);
                  this.$set(this.mapList[this.dialogIndex].lightList[this.dialogMinIndex],'configStatus',this.dialogForm.configStatus);
                }
                this.dialogOpen = false;
              }
            }
          })
        }
      },
      //遮罩菜单选中事件
      clickShadeButton(type){
        if(type == 1){
          if(this.dialogForm.roomType != '-99'){
            this.$set(this,'subjectOptions',[{id:this.dialogForm.subId,name:this.dialogForm.subName}]);
          }
          this.$set(this,'dialogOpen',true)
        }else if (type == 2){
          if(this.dialogOpenType == 1 || this.dialogOpenType == 2 || this.dialogOpenType == 3){
            this.mapList.splice(this.dialogIndex,1)
          }else if(this.dialogOpenType == 4){
            this.mapList[this.dialogIndex].doorList.splice(this.dialogMinIndex,1)
          }else if(this.dialogOpenType == 6){
            this.mapList[this.dialogIndex].lightList.splice(this.dialogMinIndex,1)
          }
          this.$forceUpdate();
        }
      },
      //关闭下啦遮罩层
      offMapShade(){
        this.$set(this,'mouseType',0)
      },
      /*********************************房间内部移动事件*********************************/
      //门按下时绑定事件
      doorDragDown(e, index, minIndex){
        if (e.button === 0) {  //0鼠标左键 1中键 2右键
          this.$set(this, 'clientX', e.clientX);
          this.$set(this, 'clientY', e.clientY);
          this.$set(this, 'boxIndex', index);
          this.$set(this, 'minIndex', minIndex);
          this.$refs.maxBox.addEventListener('mousemove', this.doorDragMove, false)
          this.$refs.maxBox.addEventListener('mouseup', this.doorDragUp, false)
        }
      },
      //门弹起时绑定事件
      doorDragUp(e){
        if (e.button === 0) {  //0鼠标左键 1中键 2右键
          this.$refs.maxBox.removeEventListener('mousemove', this.doorDragMove, false)
          this.$refs.maxBox.removeEventListener('mouseup', this.doorDragUp, false)
        }
      },
      //门移动事件
      doorDragMove(event){
        let obj = doorMoveJudge(this.mapList,this.boxIndex,this.minIndex,event,this.$refs.maxBigBox.scrollLeft,this.$refs.maxBigBox.scrollTop);
        if(obj){
          let newObj = JSON.parse(JSON.stringify(this.mapList[this.boxIndex].doorList));
          newObj[this.minIndex] = { type:'door', toward:obj.toward, w:this.doorWidth, h:this.doorHeight, x:obj.x, y:obj.y, }
          this.$set(this.mapList[this.boxIndex],'doorList',newObj);
        }
        //到达边界删除事件
        if(event.clientX<=(this.borderLeft)||event.clientX>=(this.borderLeft+this.layerWidth-1)||event.clientY<=(this.borderTop)||event.clientY>=(this.borderTop+this.layerHeight-1)){
          this.$refs.maxBox.removeEventListener('mousemove', this.doorDragMove, false)
          this.$refs.maxBox.removeEventListener('mouseup', this.doorDragUp, false)
        }
      },
      //灯按下时绑定事件
      lightDragDown(e, index,minIndex){
        if (e.button === 0) {  //0鼠标左键 1中键 2右键
          this.$set(this, 'clientX', e.clientX);
          this.$set(this, 'clientY', e.clientY);
          this.$set(this, 'boxIndex', index);
          this.$set(this, 'minIndex', minIndex);
          this.$refs.maxBox.addEventListener('mousemove', this.lightDragMove, false)
          this.$refs.maxBox.addEventListener('mouseup', this.lightDragUp, false)
        }
      },
      //灯弹起时绑定事件
      lightDragUp(e){
        if (e.button === 0) {  //0鼠标左键 1中键 2右键
          this.$refs.maxBox.removeEventListener('mousemove', this.lightDragMove, false)
          this.$refs.maxBox.removeEventListener('mouseup', this.lightDragUp, false)
        }
      },
      //灯移动事件
      lightDragMove(event){
        let obj = lightMoveJudge(this.mapList,this.boxIndex,this.minIndex,event,this.$refs.maxBigBox.scrollLeft,this.$refs.maxBigBox.scrollTop);
        if(obj){
          this.$set(this.mapList[this.boxIndex].lightList[this.minIndex],'x',obj.x?obj.x:this.mapList[this.boxIndex].lightList[this.minIndex].x);
          this.$set(this.mapList[this.boxIndex].lightList[this.minIndex],'y',obj.y?obj.y:this.mapList[this.boxIndex].lightList[this.minIndex].y);
        }
        //到达边界删除事件
        if(event.clientX<=(this.borderLeft)||event.clientX>=(this.borderLeft+this.layerWidth-1)||event.clientY<=(this.borderTop)||event.clientY>=(this.borderTop+this.layerHeight-1)){
          this.$refs.maxBox.removeEventListener('mousemove', this.lightDragMove, false)
          this.$refs.maxBox.removeEventListener('mouseup', this.lightDragUp, false)
        }
      },
      /*********************************房间移动事件*********************************/
      //按下时绑定事件
      dragDown(e, index) {
        if (e.button === 0) {  //0鼠标左键 1中键 2右键
          this.$set(this, 'clientX', e.clientX);
          this.$set(this, 'clientY', e.clientY);
          this.$set(this, 'boxIndex', index);
          this.$refs.maxBox.addEventListener('mousemove', this.dragMove, false)
          this.$refs.maxBox.addEventListener('mouseup', this.dragUp, false)
        }
      },
      //弹起时删除事件
      dragUp(e) {
        if (e.button === 0) {  //0鼠标左键 1中键 2右键
          this.$refs.maxBox.removeEventListener('mousemove', this.dragMove, false)
          this.$refs.maxBox.removeEventListener('mouseup', this.dragUp, false)
        }
      },
      //移动事件
      dragMove(event) {
        if (event.button === 0) {  //0鼠标左键 1中键 2右键
          let obj = roomMove(this.mapList,this.boxIndex,this.clientX,this.clientY,event)
          if(obj.x){
            this.$set(this.mapList[this.boxIndex], 'x', obj.x)
          }
          if (obj.y){
            this.$set(this.mapList[this.boxIndex], 'y', obj.y)
          }
          if(event.clientX<=(this.borderLeft+10)||event.clientX>=(this.borderLeft+this.layerWidth-10)||event.clientY<=(this.borderTop+10)||event.clientY>=(this.borderTop+this.layerHeight-10)){
            this.$refs.maxBox.removeEventListener('mousemove', this.dragMove, false)
            this.$refs.maxBox.removeEventListener('mouseup', this.dragUp, false)
          }
          this.$set(this, 'clientX', event.clientX);
          this.$set(this, 'clientY', event.clientY);
        }
      },
      /*********************************尺寸调整事件X,Y*********************************/
      //四角-按下时绑定事件
      zoomDownXY(e, index, type){
        if (e.button === 0) {  //0鼠标左键 1中键 2右键
          this.$set(this, 'clientX', e.clientX);
          this.$set(this, 'clientY', e.clientY);
          this.$set(this, 'boxIndex', index);
          this.$set(this, 'moveType', type);
          this.$refs.maxBox.addEventListener('mousemove', this.zoomMoverXY, false)
          this.$refs.maxBox.addEventListener('mouseup', this.zoomUpXY, false)
        }
      },
      //四角-弹起时删除事件
      zoomUpXY(e){
        if (e.button === 0) {  //0鼠标左键 1中键 2右键
          this.$refs.maxBox.removeEventListener('mousemove', this.zoomMoverXY, false)
          this.$refs.maxBox.removeEventListener('mouseup', this.zoomMoverXY, false)
        }
      },
      //四角-拖拽事件
      zoomMoverXY(event){
        // moveType 1.上/右上 2.右/右下 3.下/左下 4.左/左上
        if(event.button === 0){
          let obj = fourCornersZoom(this.mapList,this.boxIndex,event,this.clientX,this.clientY,this.moveType);
          if(obj){
            this.$set(this.mapList[this.boxIndex],'x',obj.x?obj.x:this.mapList[this.boxIndex].x);
            this.$set(this.mapList[this.boxIndex],'y',obj.y?obj.y:this.mapList[this.boxIndex].y);
            this.$set(this.mapList[this.boxIndex],'w',obj.w?obj.w:this.mapList[this.boxIndex].w);
            this.$set(this.mapList[this.boxIndex],'h',obj.h?obj.h:this.mapList[this.boxIndex].h);
            if(this.mapList[this.boxIndex].type == '1' || this.mapList[this.boxIndex].type == '3'){
              this.$set(this.mapList[this.boxIndex],'doorList',obj.doorList?obj.doorList:this.mapList[this.boxIndex].doorList);
            }if(this.mapList[this.boxIndex].type == '2'){
              this.$set(this.mapList[this.boxIndex],'lightList',obj.lightList?obj.lightList:this.mapList[this.boxIndex].lightList);
            }
            //到达边界删除事件
            if(event.clientX<=(this.borderLeft)||event.clientX>=(this.borderLeft+this.layerWidth-1)||event.clientY<=(this.borderTop)||event.clientY>=(this.borderTop+this.layerHeight-1)){
              this.$refs.maxBox.removeEventListener('mousemove', this.zoomMoverXY, false)
              this.$refs.maxBox.removeEventListener('mouseup', this.zoomMoverXY, false)
            }
            this.$set(this, 'clientX', event.clientX);
            this.$set(this, 'clientY', event.clientY);
          }
        }
      },
      /*********************************尺寸调整事件X*********************************/
      //左右边框-按下时绑定事件
      zoomDownX(e, index, type){
        if (e.button === 0) {  //0鼠标左键 1中键 2右键
          this.$set(this, 'clientX', e.clientX);
          this.$set(this, 'clientY', e.clientY);
          this.$set(this, 'boxIndex', index);
          this.$set(this, 'moveType', type);
          this.$refs.maxBox.addEventListener('mousemove', this.zoomMoverX, false)
          this.$refs.maxBox.addEventListener('mouseup', this.zoomUpX, false)
        }
      },
      //左右边框-弹起时删除事件
      zoomUpX(e){
        if (e.button === 0) {  //0鼠标左键 1中键 2右键
          this.$refs.maxBox.removeEventListener('mousemove', this.zoomMoverX, false)
          this.$refs.maxBox.removeEventListener('mouseup', this.zoomMoverX, false)
        }
      },
      //左右边框-拖拽事件
      zoomMoverX(e){
        if (e.button === 0) {  //0鼠标左键 1中键 2右键
          let obj = fourEdgeZoom(this.mapList,this.boxIndex,e,this.clientX,this.clientY,this.moveType);
          if(obj){
            this.$set(this.mapList[this.boxIndex],'x',obj.x?obj.x:this.mapList[this.boxIndex].x);
            this.$set(this.mapList[this.boxIndex],'w',obj.w?obj.w:this.mapList[this.boxIndex].w);
            if(this.mapList[this.boxIndex].type == '1' || this.mapList[this.boxIndex].type == '3'){
              this.$set(this.mapList[this.boxIndex],'doorList',obj.doorList?obj.doorList:this.mapList[this.boxIndex].doorList);
            }if(this.mapList[this.boxIndex].type == '2'){
              this.$set(this.mapList[this.boxIndex],'lightList',obj.lightList?obj.lightList:this.mapList[this.boxIndex].lightList);
            }
            //到达边界删除事件
            if(e.clientX<=(this.borderLeft)||e.clientX>=(this.borderLeft+this.layerWidth-1)||e.clientY<=(this.borderTop)||e.clientY>=(this.borderTop+this.layerHeight-1)){
              this.$refs.maxBox.removeEventListener('mousemove', this.zoomMoverX, false)
              this.$refs.maxBox.removeEventListener('mouseup', this.zoomMoverX, false)
            }
            this.$set(this, 'clientX', e.clientX);
          }
        }
      },
      /*********************************尺寸调整事件Y*********************************/
      //上下边框-按下时绑定事件
      zoomDownY(e, index, type){
        if (e.button === 0) {  //0鼠标左键 1中键 2右键
          this.$set(this, 'clientX', e.clientX);
          this.$set(this, 'clientY', e.clientY);
          this.$set(this, 'boxIndex', index);
          this.$set(this, 'moveType', type);
          this.$refs.maxBox.addEventListener('mousemove', this.zoomMoverY, false)
          this.$refs.maxBox.addEventListener('mouseup', this.zoomUpY, false)
        }
      },
      //上下边框-弹起时删除事件
      zoomUpY(e){
        if (e.button === 0) {  //0鼠标左键 1中键 2右键
          this.$refs.maxBox.removeEventListener('mousemove', this.zoomMoverY, false)
          this.$refs.maxBox.removeEventListener('mouseup', this.zoomMoverY, false)
        }
      },
      //上下边框-拖拽事件
      zoomMoverY(e){
        if (e.button === 0) {  //0鼠标左键 1中键 2右键
          let obj = fourEdgeZoom(this.mapList,this.boxIndex,e,this.clientX,this.clientY,this.moveType);
          if(obj){
            this.$set(this.mapList[this.boxIndex],'y',obj.y?obj.y:this.mapList[this.boxIndex].y);
            this.$set(this.mapList[this.boxIndex],'h',obj.h?obj.h:this.mapList[this.boxIndex].h);
            if(this.mapList[this.boxIndex].type == '1' || this.mapList[this.boxIndex].type == '3'){
              this.$set(this.mapList[this.boxIndex],'doorList',obj.doorList?obj.doorList:this.mapList[this.boxIndex].doorList);
            }if(this.mapList[this.boxIndex].type == '2'){
              this.$set(this.mapList[this.boxIndex],'lightList',obj.lightList?obj.lightList:this.mapList[this.boxIndex].lightList);
            }
            //到达边界删除事件
            if(e.clientX<=(this.borderLeft)||e.clientX>=(this.borderLeft+this.layerWidth-1)||e.clientY<=(this.borderTop)||e.clientY>=(this.borderTop+this.layerHeight-1)){
              this.$refs.maxBox.removeEventListener('mousemove', this.zoomMoverY, false)
              this.$refs.maxBox.removeEventListener('mouseup', this.zoomMoverY, false)
            }
            this.$set(this, 'clientY', e.clientY);
          }
        }
      },
      /*********************************添加拖拽逻辑*********************************/
      externalAddDragStart(e,type){
        if(this.mapSrc){
          e.dataTransfer.setDragImage(type == 1?this.roomImg_1:(type == 2?this.roomImg_2:(type == 3?this.roomImg_3:'')), 48, 48);
          this.$set(this,'grab',type);
        }
      },
      //添加房间
      externalAddDragEnd(e){
        if(this.mapSrc){
          let obj = roomAdd(e,this.mapList,this.grab,this.$refs.maxBigBox.scrollLeft,this.$refs.maxBigBox.scrollTop);
          if(obj){
            this.mapList.push(obj);
          }
        }
      },
      internalAddDragStart(e,type){
        e.dataTransfer.setDragImage(type == 4?this.doorImg:(type == 6?this.lightImg:''),
          type == 4?17:(type == 6?20:''),
          type == 4?17:(type == 6?20:''));
        this.$set(this,'grab',type);
      },
      //添加门/灯
      internalAddDragEnd(event){
        if(this.grab == 4){
          let obj = addDoor(event,this.mapList,this.$refs.maxBigBox.scrollLeft,this.$refs.maxBigBox.scrollTop,this.grab);
          if (obj){
            //暂时限制只能添加一个
            if(this.mapList[obj.index].doorList[0]){
              this.msgError('一个房间只能添加一个门')
            }else{
              this.mapList[obj.index].doorList.push({
                type:obj.type,
                toward:obj.toward,
                w:obj.w,
                h:obj.h,
                x:obj.x,
                y:obj.y,
              });
            }
          }
        }else if(this.grab == 6){
          let obj = lightAdd(event,this.$refs.maxBigBox.scrollLeft,this.$refs.maxBigBox.scrollTop,this.mapList,this.grab);
          if (obj){
            this.mapList[obj.index].lightList.push({
              type:obj.type,
              state:obj.state,
              w:obj.w,
              h:obj.h,
              x:obj.x,
              y:obj.y,
            });
          }
        }
      },
      /*********************************画布坐标矫正相关******************************/
      //矫正边界坐标
      shadeClick(type){
        //初始化抓取图样
        this.roomImg_1 = new Image();
        this.roomImg_1.src = require('@/assets/ZDimages/evacuation3_2/romm_1.png');
        this.roomImg_2 = new Image();
        this.roomImg_2.src = require('@/assets/ZDimages/evacuation3_2/romm_2.png');
        this.roomImg_3 = new Image();
        this.roomImg_3.src = require('@/assets/ZDimages/evacuation3_2/romm_3.png');
        this.doorImg = new Image();
        this.doorImg.src = require('@/assets/ZDimages/evacuation3_2/icon_sysbjt_m.png');
        this.lightImg = new Image();
        this.lightImg.src = require('@/assets/ZDimages/evacuation3_2/icon_fxyj_wszys.png');
        this.$set(this,'borderLeft', Math.round(this.$refs.maxBigBox.getBoundingClientRect().left));
        this.$set(this,'borderTop', Math.round(this.$refs.maxBigBox.getBoundingClientRect().top));
        let data = {
          borderLeft : this.borderLeft,
          borderTop : this.borderTop,
          layerWidth : this.layerWidth,
          layerHeight : this.layerHeight,
          minHeight : this.minHeight,
          maxHeight : this.maxHeight,
          minWidth : this.minWidth,
          maxWidth : this.maxWidth,
          doorHeight : this.doorHeight,
          doorWidth : this.doorWidth,
          minLightNum : this.minLightNum,
          maxLightNum : this.maxLightNum,
          tentaclesLength : this.tentaclesLength,
        }
        setJsData(data);
        this.$set(this, 'shadeBoxType', type);
      },
      //透明度调整
      opacityClick(type){
        if(type == 1){
          if(this.mapOpacityText>10){
            this.$set(this,'mapOpacityText',this.mapOpacityText - 10);
            this.$set(this,'mapOpacity',this.mapOpacityText/100);
          }
        }else if (type == 2){
          if(this.mapOpacityText<100){
            this.$set(this,'mapOpacityText',this.mapOpacityText + 10);
            this.$set(this,'mapOpacity',this.mapOpacityText/100);
          }
        }
      },
      //上传
      handleAvatarSuccess(res, file, type) {
        console.log('上传图片')
        // console.log('res',res);
        // console.log('file',file);
        // console.log('type',type);
        if (type == 1){
          if(res){
            this.loadingInstance.close();
            if(res.data){
              if(res.data.url){
                this.$set(this,'mapSrc',res.data.url)
                this.$set(this, 'shadeBoxType', 1);
              }
            }
          }
        }else if(type == 2){
          if(res){
            this.loadingInstance.close();
            if(res.data){
              if(res.data.url){
                this.$set(this,'mapSrc',res.data.url)
                this.$set(this, 'shadeBoxType', 1);
              }
            }
          }
        }
      },
      beforeAvatarUpload(file) {
        console.log('校验图片')
        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
          this.asyncImgChecked(file).then(data => {
            if (data.code == 200) {
              // console.log('data',data);
              this.loadingInstance = Loading.service({ spinner:"", background: 'rgba(255, 255, 255, 0.1)' })
              return true;
            } else if(data.code == 201){
              this.$message.error('图片尺寸不能大于于1500 X 1000')
              return false;
            } else if(data.code == 202){
              this.$message.error('图片尺寸小于当前布局尺寸')
              return false;
            }
          })
        }else{
          this.$message.error('只能上传png/gif/jpg格式');
          return false;
        }
      },
      // 计算图片尺寸
      asyncImgChecked (file) {
        let self = this;
        return new Promise((resolve) => {
          let reader = new FileReader()
          reader.readAsDataURL(file) // 必须用file.raw
          reader.onload = e => { // 让页面中的img标签的src指向读取的路径
            let img = e.target.result;
            const image = new Image()
            image.src=img
            image.onload = _=>{
              let width = image.width
              let height= image.height

              let maxWidth = 0
              let maxHeight = 0
              let upImgType = false
              for(let i=0;i<self.mapList.length;i++){
                if ((self.mapList[i].x + self.mapList[i].w) > maxWidth) {
                  maxWidth = self.mapList[i].x + self.mapList[i].w
                }
                if ((self.mapList[i].y + self.mapList[i].h) > maxHeight) {
                  maxHeight = self.mapList[i].y + self.mapList[i].h
                }
              }
              if(maxWidth>width||maxHeight>height){
                upImgType = true;
              }

              if(width >1500 || height > 1000){
                //超出限制
                resolve({code:201})
              }else if(upImgType){
                //超出当前布局尺寸
                resolve({code:202})
              }else{
                self.$set(self,'layerWidth',width);
                self.$set(self,'layerHeight',height);
                self.$set(self,'maxWidth',width);
                self.$set(self,'maxHeight',height);
                resolve({code:200})
              }
            }
          }
        })
      },
      buttonShadeClick(){
        this.shadeBoxType = 1;
      },
    }
  }
</script>

<style scoped lang="scss">
  .buildingDetails{
    flex:1;
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    *{
      margin:0;
      font-weight:500;
    }
    .buildingDetails-page{
      flex:1;
      display: flex;
      overflow: hidden;
      .max-left-box{
        flex:1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .max-left-box-one{
          top:0;
          left:0;
          flex:1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          border:1px solid #e0e0e0;
          margin:22px 0 24px 28px;
          position: relative;
          .max-button-big-position-box{
            position: absolute;
            top:50%;
            left:50%;
            width:332px;
            height:370px;
            margin-left:-166px;
            margin-top:-185px;
            img{
              width:332px;
              height:248px;
              -webkit-user-drag:none
            }
            .up-img-button-box{
              height:40px;
              padding:0;
              margin:34px 16px 19px 16px;
              .up-img-button{
                width:300px;
                line-height:40px;
                color:#0183FA;
                text-align: center;
                border:1px dashed #0183FA;
                border-radius:6px;
              }
            }
            .up-img-text{
              line-height:24px;
              font-size:15px;
              color:#333;
              text-align: center;
            }
          }
        }
        .max-left-button-box{
          display: flex;
          .null-p{
            flex:1;
          }
          .up-img-p{
            width:120px;
            line-height:40px;
            text-align: center;
            font-size:16px;
            color:#333;
            border-radius:6px;
            border: 1px solid #E0E0E0;
            margin:22px 0 0 0;
          }
          .opacity-button-box{
            display: flex;
            border: 1px solid #E0E0E0;
            border-radius:6px;
            width:210px;
            margin:22px 20px 0 26px;
            p{
              font-size:16px;
              text-align: center;
              line-height:40px;
            }
            p:nth-child(1){
              width:40px;
              cursor: pointer;
            }
            p:nth-child(2){
              width:130px;
              border-left:1px solid #e0e0e0;
              border-right:1px solid #e0e0e0;
            }
            p:nth-child(3){
              width:40px;
              cursor: pointer;
            }
          }
        }
        .max-left-map-big-box{
          flex:1;
          margin:22px 0 24px 28px;
          border:1px solid #e0e0e0;
          position: relative;
          .left-map-box{
            z-index:10;
            color:#fff;
            border: 1px solid #dedede;
            position: relative;
            .for-map-box:hover{
              .top-big-box{
                background: #CEF2FD!important;
              }
              .center-left-p{
                background: #CEF2FD!important;
              }
              .center-right-p{
                background: #CEF2FD!important;
              }
              .bottom-big-box{
                background: #CEF2FD!important;
              }
            }
            .for-map-box {
              user-select: none;//解决偶发性拖拽时鼠标变成禁止符号导致拖拽回弹失效
              position: absolute;
              display: flex;
              flex-direction: column;
              background: #CEF2FD;
              .top-big-box{
                display: flex;
                height:2px;
                background: #fff;
                .top-left-p{
                  width:2px;
                  cursor: se-resize;
                }
                .top-center-p{
                  flex:1;
                  cursor: n-resize;
                }
                .top-right-p{
                  width:2px;
                  cursor: ne-resize;
                }
              }
              .center-big-box{
                overflow: hidden;
                flex:1;
                display: flex;
                .center-left-p{
                  width:2px;
                  background: #fff;
                  cursor: w-resize;
                }
                .center-move-box{
                  flex:1;
                  /*cursor: move;*/
                  cursor: pointer;
                  text-align: center;
                  color:#333;
                  overflow: hidden;
                }
                .center-right-p{
                  width:2px;
                  background: #fff;
                  cursor: w-resize;
                }
              }
              .bottom-big-box{
                display: flex;
                height:2px;
                background: #fff;
                .bottom-left-p{
                  width:2px;
                  cursor: ne-resize;
                }
                .bottom-center-p{
                  flex:1;
                  cursor: n-resize;
                }
                .bottom-right-p{
                  width:2px;
                  cursor: se-resize;
                }
              }
              .center-move-door-p{
                position: absolute;
              }
              .center-move-light-p{
                position: absolute;
                background: #00ff00;
                font-size:12px;
                font-weight:500;
              }
              .lightNone{
                background: url("../../../../assets/ZDimages/evacuation3_2/icon_fxyj_wszys.png");
                background-size: 100%;
              }
              .lightTop{
                background: url("../../../../assets/ZDimages/evacuation3_2/icon_sjt.png");
                background-size: 100%;
              }
              .lightBottom{
                background: url("../../../../assets/ZDimages/evacuation3_2/icon_xjt.png");
                background-size: 100%;
              }
              .lightLeft{
                background: url("../../../../assets/ZDimages/evacuation3_2/icon_zuo.png");
                background-size: 100%;
              }
              .lightRight{
                background: url("../../../../assets/ZDimages/evacuation3_2/icon_yuo.png");
                background-size: 100%;
              }
              .colorDoor{
                background: red!important;
              }
              .colorTraffic{
                background: #0183fa!important;
              }
              .colorConnect{
                background: #A11DDF!important;
              }
            }
            .for-map-box-one {
              user-select: none;//解决偶发性拖拽时鼠标变成禁止符号导致拖拽回弹失效
              position: absolute;
              display: flex;
              flex-direction: column;
              background: #CEFDD5;
              .top-big-box{
                display: flex;
                height:2px;
                /*background: #0183fa;*/
                .top-left-p{
                  width:2px;
                  cursor: se-resize;
                }
                .top-center-p{
                  flex:1;
                  cursor: n-resize;
                }
                .top-right-p{
                  width:2px;
                  cursor: ne-resize;
                }
              }
              .center-big-box{
                overflow: hidden;
                flex:1;
                display: flex;
                .center-left-p{
                  width:2px;
                  /*background: #0183fa;*/
                  cursor: w-resize;
                }
                .center-move-box{
                  flex:1;
                  /*cursor: move;*/
                  cursor: pointer;
                  text-align: center;
                  color:#333;
                  overflow: hidden;
                }
                .center-right-p{
                  width:2px;
                  /*background: #0183fa;*/
                  cursor: w-resize;
                }
              }
              .bottom-big-box{
                display: flex;
                height:2px;
                /*background: #0183fa;*/
                .bottom-left-p{
                  width:2px;
                  cursor: ne-resize;
                }
                .bottom-center-p{
                  flex:1;
                  cursor: n-resize;
                }
                .bottom-right-p{
                  width:2px;
                  cursor: se-resize;
                }
              }
              .center-move-door-p{
                position: absolute;
                background: #0183fa;
              }
              .center-move-light-p{
                position: absolute;
                background: #00ff00;
                font-size:12px;
                font-weight:500;
              }
              .lightNone{
                background: url("../../../../assets/ZDimages/evacuation3_2/icon_fxyj_wszys.png");
                background-size: 100%;
              }
              .lightTop{
                background: url("../../../../assets/ZDimages/evacuation3_2/icon_sjt.png");
                background-size: 100%;
              }
              .lightBottom{
                background: url("../../../../assets/ZDimages/evacuation3_2/icon_xjt.png");
                background-size: 100%;
              }
              .lightLeft{
                background: url("../../../../assets/ZDimages/evacuation3_2/icon_zuo.png");
                background-size: 100%;
              }
              .lightRight{
                background: url("../../../../assets/ZDimages/evacuation3_2/icon_yuo.png");
                background-size: 100%;
              }
              .colorDoor{
                background: red!important;
              }
              .colorTraffic{
                background: #0183fa!important;
              }
              .colorConnect{
                background: #A11DDF!important;
              }
            }
            .for-map-box-two {
              user-select: none;//解决偶发性拖拽时鼠标变成禁止符号导致拖拽回弹失效
              position: absolute;
              display: flex;
              flex-direction: column;
              background:url("../../../../assets/ZDimages/evacuation3_2/icon_yjtd.png") center center no-repeat #39AE36;
              background-size: 60px 60px;
              .top-big-box{
                display: flex;
                height:2px;
                /*background: #0183fa;*/
                background: #fff;
                .top-left-p{
                  width:2px;
                  cursor: se-resize;
                }
                .top-center-p{
                  flex:1;
                  cursor: n-resize;
                }
                .top-right-p{
                  width:2px;
                  cursor: ne-resize;
                }
              }
              .center-big-box{
                overflow: hidden;
                flex:1;
                display: flex;
                .center-left-p{
                  width:2px;
                  /*background: #0183fa;*/
                  background: #fff;
                  cursor: w-resize;
                }
                .center-move-box{
                  flex:1;
                  /*cursor: move;*/
                  cursor: pointer;
                  text-align: center;
                  color:#333;
                  overflow: hidden;
                }
                .center-right-p{
                  width:2px;
                  /*background: #0183fa;*/
                  background: #fff;
                  cursor: w-resize;
                }
              }
              .bottom-big-box{
                display: flex;
                height:2px;
                /*background: #0183fa;*/
                background: #fff;
                .bottom-left-p{
                  width:2px;
                  cursor: ne-resize;
                }
                .bottom-center-p{
                  flex:1;
                  cursor: n-resize;
                }
                .bottom-right-p{
                  width:2px;
                  cursor: se-resize;
                }
              }
              .center-move-door-p{
                position: absolute;
                background: #0183fa;
              }
              .center-move-light-p{
                position: absolute;
                background: #00ff00;
                font-size:12px;
                font-weight:500;
              }
              .lightNone{
                background: url("../../../../assets/ZDimages/evacuation3_2/icon_fxyj_wszys.png");
                background-size: 100%;
              }
              .lightTop{
                background: url("../../../../assets/ZDimages/evacuation3_2/icon_sjt.png");
                background-size: 100%;
              }
              .lightBottom{
                background: url("../../../../assets/ZDimages/evacuation3_2/icon_xjt.png");
                background-size: 100%;
              }
              .lightLeft{
                background: url("../../../../assets/ZDimages/evacuation3_2/icon_zuo.png");
                background-size: 100%;
              }
              .lightRight{
                background: url("../../../../assets/ZDimages/evacuation3_2/icon_yuo.png");
                background-size: 100%;
              }
              .colorDoor{
                background: red!important;
              }
              .colorTraffic{
                background: #0183fa!important;
              }
              .colorConnect{
                background: #A11DDF!important;
              }
              .for-map-box-two-img{
                position: absolute;
                top:50%;
                left:50%;
                margin-left:-30px;
                margin-top:-30px;
                width:60px;
                height:60px;

              }
            }
            .for-map-box-two:hover{
              .top-big-box{
                background: #39AE36!important;
              }
              .center-left-p{
                background: #39AE36!important;
              }
              .center-right-p{
                background: #39AE36!important;
              }
              .bottom-big-box{
                background: #39AE36!important;
              }
            }
            .center-move-door-p-t{
              background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png")!important;
              background-size: 100%!important;
              transform: rotate(180deg);
            }
            .center-move-door-p-b{
              background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png")!important;
              background-size: 100%!important;
            }
            .center-move-door-p-l{
              background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png")!important;
              background-size: 100%!important;
              transform: rotate(90deg);
            }
            .center-move-door-p-r{
              background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png")!important;
              background-size: 100%!important;
              transform: rotateZ(270deg);
            }
            .center-move-door-p-t-ss{
              background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png")!important;
              background-size: 100%!important;
              transform: rotate(180deg);
            }
            .center-move-door-p-b-ss{
              background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png")!important;
              background-size: 100%!important;
            }
            .center-move-door-p-l-ss{
              background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png")!important;
              background-size: 100%!important;
              transform: rotate(90deg);
            }
            .center-move-door-p-r-ss{
              background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png")!important;
              background-size: 100%!important;
              transform: rotateZ(270deg);
            }
          }
          .left-map-img{
            position: absolute;
            left:0;
            top:0;
            z-index:5;
            -webkit-user-drag: none;
          }
        }
      }
      .max-right-box{
        width:376px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .right-title-box{
          margin:0 28px;
          display: flex;
          line-height:70px;
          border-bottom:1px solid #D8D8D8;
          .right-title-p{
            flex:1;
            font-size:16px;
            color:#333;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
          div{
            cursor: pointer;
            display: flex;
            font-size:16px;
            color:#333;
            p:nth-child(1){
              color:rgb(234,149,24);
              line-height: 70px;
              margin-right:4px;
            }
            p:nth-child(2){
              font-size:16px;
              color:#333;
            }
          }
        }
        .right-bottom-max-box{
          .right-for-max-box{
            margin-left:28px;
            .right-for-title{
              line-height:60px;
              font-size:16px;
            }
            .right-for-box{
              display: inline-block;
              width:150px;
              height:160px;
              margin-right:20px;
              margin-bottom:20px;
              border:1px solid #e0e0e0;
              border-radius:6px;
              overflow: hidden;
              img{
                display: block;
                width:150px;
                height:120px;
                cursor: pointer;
              }
              p{
                line-height:40px;
                border-top:1px solid #e0e0e0;
                text-align: center;
                font-size:14px;
              }
            }
          }
          .right-button-box{
            display: flex;
            p:nth-child(1){
              flex:1;
            }
            p:nth-child(2){
              width:70px;
              line-height: 30px;
              font-size:12px;
              text-align: center;
              background: #E0E0E0;
              color: #999999;
              margin-right:17px;
              border-radius:6px;
              cursor: pointer;
            }
            p:nth-child(3){
              width:70px;
              line-height: 30px;
              font-size:12px;
              text-align: center;
              background: #0045AF;
              color: #fff;
              border-radius:6px;
              cursor: pointer;
            }
            p:nth-child(4){
              flex:1;
            }
          }
        }
      }
    }
    .map-shade-max-big-box{
      z-index:10000;
      position: fixed;
      top: 0;
      left: 0;
      height:100%;
      width:100%;
      .map-shade-big-box{
        width:80px;
        position: absolute;
        border-radius:8px;
        background: #fff;
        font-size:12px;
        font-weight:500;
        box-shadow: 0 4px 10px 0 rgba(0,0,0,0.302);
        overflow: hidden;
        .shade-button-p{
          height:30px;
          line-height:30px;
          text-align: center;
        }
        .shade-button-p:hover{
          color: #fff;
          background: #00a0e9;
          cursor: pointer;
        }
        .shade-border-p{
          height:1px;
          margin:0 10px;
          background:#E0E0E0;
        }
      }
    }
    .shade-max-big-box{
      z-index:10000;
      width:100%;
      height:100%;
      position: fixed;
      top:0;
      left:0;
      background: rgba(0,0,0,0.6);
      .shade-max-box-1{
        width:100%;
        height:100%;
        position: relative;
        .shade-big-img{
          width:126px;
          height:124px;
          position: absolute;
          top:120px;
          left:1010px;
        }
        .shade-big-1-text-1{
          position: absolute;
          top:177px;
          left:1144px;
          background:#fff;
          width:120px;
          line-height:40px;
          text-align: center;
          border:1px solid #e0e0e0;
          border-radius:6px;
          color:#333;
          font-size:16px;
        }
        .shade-big-1-text-2{
          display: flex;
          position: absolute;
          top:177px;
          left:1290px;
          background:#fff;
          width:210px;
          line-height:40px;
          text-align: center;
          border:1px solid #e0e0e0;
          border-radius:6px;
          color:#333;
          font-size:16px;
          p:nth-child(1){
            width:40px;
          }
          p:nth-child(2){
            flex:1;
            border-left:1px solid #e0e0e0;
            border-right:1px solid #e0e0e0;
          }
          p:nth-child(3){
            width:40px;
          }
        }
        .shade-big-1-text-3{
          position: absolute;
          top:230px;
          left:780px;
          color:#fff;
          width:298px;
        }
        .shade-big-1-text-4{
          position: absolute;
          top:300px;
          left:780px;
          color:#fff;
          width:298px;
        }
        .shade-big-1-text-5{
          position: absolute;
          top:395px;
          left:835px;
          background:#fff;
          width:182px;
          line-height:40px;
          text-align: center;
          border:1px solid #e0e0e0;
          border-radius:6px;
          color:#333;
          font-size:16px;
          cursor: pointer;
        }
      }
      .shade-max-box-2{
        width:100%;
        height:100%;
        position: relative;
        .shade-big-img{
          width:126px;
          height:124px;
          position: absolute;
          top:220px;
          right:370px;
        }
        .shade-big-1-text-1{
          background:#fff;
          position: absolute;
          top:286px;
          right:222px;
          width:150px;
          height:160px;
          border:1px solid #e0e0e0;
          border-radius:6px;
          overflow: hidden;
          img{
            display: block;
            width:150px;
            height:120px;
          }
          p{
            line-height:40px;
            border-top:1px solid #e0e0e0;
            text-align: center;
            font-size:14px;
          }
        }
        .shade-big-1-text-1{
          background:#fff;
          position: absolute;
          top:286px;
          right:222px;
          width:150px;
          height:160px;
          border:1px solid #e0e0e0;
          border-radius:6px;
          overflow: hidden;
          img{
            display: block;
            width:150px;
            height:120px;
          }
          p{
            line-height:40px;
            border-top:1px solid #e0e0e0;
            text-align: center;
            font-size:14px;
          }
        }
        .shade-big-1-text-2{
          background:#fff;
          position: absolute;
          top:286px;
          right:52px;
          width:150px;
          height:160px;
          border:1px solid #e0e0e0;
          border-radius:6px;
          overflow: hidden;
          img{
            display: block;
            width:150px;
            height:120px;
          }
          p{
            line-height:40px;
            border-top:1px solid #e0e0e0;
            text-align: center;
            font-size:14px;
          }
        }
        .shade-big-1-text-3{
          background:#fff;
          position: absolute;
          top:470px;
          right:222px;
          width:150px;
          height:160px;
          border:1px solid #e0e0e0;
          border-radius:6px;
          overflow: hidden;
          img{
            display: block;
            width:150px;
            height:120px;
          }
          p{
            line-height:40px;
            border-top:1px solid #e0e0e0;
            text-align: center;
            font-size:14px;
          }
        }
        .shade-big-1-text-4{
          position: absolute;
          top:330px;
          right:440px;
          color:#fff;
          width:298px;
        }
        .shade-big-1-text-5{
          position: absolute;
          top:460px;
          right:440px;
          color:#fff;
          width:298px;
        }
        .shade-big-1-text-6{
          position: absolute;
          top:530px;
          right:440px;
          color:#fff;
          width:298px;
        }
        .shade-big-1-text-7{
          position: absolute;
          top:610px;
          right:500px;
          background:#fff;
          width:182px;
          line-height:40px;
          text-align: center;
          border:1px solid #e0e0e0;
          border-radius:6px;
          color:#333;
          font-size:16px;
          cursor: pointer;
        }
      }
      .shade-max-box-3{
        .shade-big-img{
          width:126px;
          height:124px;
          position: absolute;
          top:670px;
          right:390px;
        }
        .shade-big-1-text-1{
          position: absolute;
          top:460px;
          right:420px;
          color:#fff;
          width:298px;
        }
        .shade-big-1-text-2{
          position: absolute;
          top:540px;
          right:420px;
          color:#fff;
          width:298px;
        }
        .shade-big-1-text-3{
          position: absolute;
          top:630px;
          right:480px;
          background:#fff;
          width:182px;
          line-height:40px;
          text-align: center;
          border:1px solid #e0e0e0;
          border-radius:6px;
          color:#333;
          font-size:16px;
          cursor: pointer;
        }
        .shade-big-1-text-4{
          background:#fff;
          position: absolute;
          top:286px;
          right:222px;
          width:150px;
          height:160px;
          border:1px solid #e0e0e0;
          border-radius:6px;
          overflow: hidden;
          img{
            display: block;
            width:150px;
            height:120px;
          }
          p{
            line-height:40px;
            border-top:1px solid #e0e0e0;
            text-align: center;
            font-size:14px;
          }
        }
        .shade-big-1-text-5{
          background:#fff;
          position: absolute;
          top:286px;
          right:222px;
          width:150px;
          height:160px;
          border:1px solid #e0e0e0;
          border-radius:6px;
          overflow: hidden;
          img{
            display: block;
            width:150px;
            height:120px;
          }
          p{
            line-height:40px;
            border-top:1px solid #e0e0e0;
            text-align: center;
            font-size:14px;
          }
        }
      }
      .shade-max-box-4{
        div{
          position: absolute;
          top:50%;
          left:50%;
          width:460px;
          height:200px;
          margin-top:-100px;
          margin-left:-230px;
          background: #fff;
          padding:18px 30px 0 30px;
          border-radius:6px;
          p:nth-child(1){
            font-size:16px;
            line-height:20px;
            margin-bottom:20px;
          }
          p:nth-child(2){
            font-size:16px;
            line-height:20px;
          }
          p:nth-child(3){
            font-size:16px;
            line-height:20px;
            color:#0183FA;
            margin-left:320px;
            margin-top:50px;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>

<style lang="scss">
  .dialog-relay-bit-form-item-box input{
    text-align: left !important;
  }
</style>