FE-V2-PC/src/views/emergencyEvacuationBig.vue

<!--应急疏散大屏-->
<template>
  <div class="emergencyEvacuationBig scrollbar-box">
    <div class="top-max-title-box">
      <p>{{title}}<span>{{minTitle}}</span></p>
      <!--<p class="inquire-button-one" @click="clickClosure">{{evacuationType?'执行疏散':'结束疏散'}}</p>-->
      <p></p>
      <p></p>
      <p class="reset-button-one" v-if="buttonType" @click="goAllBig"><i class="el-icon-full-screen" style="margin-right:10px;"></i>全屏</p>
      <p class="reset-button-one" v-if="!buttonType" @click="clickBack"><i class="el-icon-full-screen" style="margin-right:10px;"></i>退出全屏</p>
      <p class="reset-button-one" style="margin-left:20px;" v-if="buttonType" @click="backButton">返回</p>
    </div>
    <div class="video-max-box">
      <div class="video-for-box" v-for="(item,index) in videoList" :key="index">
        <div class="video-for-title-box">
          <div class="video-for-title">{{item.name}}</div>
          <div class="video-for-button" @click="videoFullScreen(index)">
            <img src="@/assets/newImages/icon_monitor_enlarge.png">
          </div>
        </div>
        <video class="video-box" :id="item.divId" ref="videoRef" autoplay controls  muted width="610px" height="429px"></video>
      </div>
    </div>
    <pagination
      layout="total, prev, pager, next, jumper"
      style="margin:0 40px 50px;"
      v-show="videoMaxNum>0"
      :page-sizes="[4]"
      :total="videoMaxNum"
      :page.sync="videoPage"
      :limit.sync="videoPageSize"
      @pagination="videoPageNumButton"
    />
    <div class="map-max-box">
      <div class="map-left-box">
        <!--<div class="max-title-box">-->
          <!--<p>{{minTitle}}</p>-->
          <!--<p>疏散路径：</p>-->
          <!--<el-select v-model="value" placeholder="请选择" @change="lineEvacuate">-->
            <!--<el-option-->
              <!--v-for="item in routeList"-->
              <!--:key="item.id"-->
              <!--:label="item.name"-->
              <!--:value="item.id">-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</div>-->
        <div class="map-big-box">
          <div class="map-min-box">
            <div class="map-min-for-box" :class="item.subjectId == subId?'map-min-for-box-color':''"
                 v-for="(item,index) in fjList" :key="index">
              {{item.room}}
            </div>
            <img class="map-min-img" src="@/assets/ZDimages/icon_sjt.gif" v-show="lightList[0].type">
            <img class="map-min-img" src="@/assets/ZDimages/icon_yjt.gif" v-show="lightList[1].type">
            <img class="map-min-img" src="@/assets/ZDimages/icon_zjt.gif" v-show="lightList[2].type">
            <img class="map-min-img" src="@/assets/ZDimages/icon_yjt.gif" v-show="lightList[3].type">
            <img class="map-min-img" src="@/assets/ZDimages/icon_zjt.gif" v-show="lightList[4].type">
            <img class="map-min-img" src="@/assets/ZDimages/icon_yjt.gif" v-show="lightList[5].type">
          </div>
        </div>
      </div>
      <div class="map-right-box">
        <div class="bottom-max-box">
          <div class="select-button-box">
            <p class="select-button-title">疏散路径：</p>
            <div class="select-button-min-box">
              <el-select v-model="value" placeholder="请选择" @change="lineEvacuate" style="flex:1;">
                <el-option
                  v-for="item in routeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
              <p class="inquire-button-one" @click="clickClosure">{{evacuationType?'执行疏散':'结束疏散'}}</p>
            </div>
          </div>
          <div class="select-button-box">
            <p class="select-button-title">疏散喇叭：</p>
            <div class="top-for-max-box">
              <div class="top-for-min-box" @click="trumpetClick(item)"
                   :class="item.type?'for-color-a':'for-color-b'"
                   v-for="(item,index) in trumpetList" :key="index">
                {{item.name}}
                <img v-if="item.type" src="@/assets/ZDimages/icon_30.png">
              </div>
            </div>
          </div>
          <div class="scrollbar-list scrollbar-box">
            <div class="for-scrollbar-box" v-for="(item,index) in informationList" :key="index">
              <p>{{item.date}}</p>
              <p>{{item.text}}</p>
            </div>
            <p v-if="!informationList[0]" style="line-height:40px;text-align: center;color:#999;font-size:14px;">暂无喇叭数据</p>
          </div>
          <div class="bottom-input-text-box">
            <el-input
              type="textarea"
              :rows="4"
              resize='none'
              maxLength="100"
              placeholder="请输入播报内容"
              v-model="textarea">
            </el-input>
          </div>
          <p class="bottom-button-p" @click="textParseUrlIps">发送</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { lablayout, lineEvacuateTow } from "@/api/laboratory/emergencyEvacuation";
  import { getListStatus } from '@/api/bigData/index.js'
  import flvjs from 'flv.js'
  import { evacuate, closure, lineEvacuate, IntelligentGuidance,getRedis,getDeviceList,textParseUrlIps,getCameraByFloor,startUrl } from '@/api/executeThePlan.js'
  import mqtt from 'mqtt'
  import { subjectInfo } from "@/api/laboratory/subject";
  export default {
    name: 'emergencyEvacuationBig',
    props:{
      routerType:{},
    },
    data() {
      return {
        mtopic:"lab/exit/line",
        client:{},
        buttonType:false,
        subId:"",
        type:"",
        value:"0",
        title:"",
        minTitle:"环境学院-祈福楼 环境与气象研究所",
        //疏散方向数据
        routeList:[
          {
            id:"1",
            name:"向左疏散",
          },
          {
            id:"2",
            name:"向右疏散",
          },
          {
            id:"0",
            name:"两侧疏散",
          },
        ],
        //监控列表
        videoNewList:[],
        videoList:[],
        //房间列表
        fjList:[],
        //灯列表
        lightList:[
          {
            id:"5",
            type:false,
          },
          {
            id:"2",
            type:false,
          },
          {
            id:"3",
            type:false,
          },
          {
            id:"4",
            type:false,
          },
          {
            id:"1",
            type:false,
          },
          {
            id:"6",
            type:false,
          },
        ],
        //喇叭列表
        trumpetList:[],
        //消息列表
        informationList:[],
        textarea:"",
        evacuationType:false,
        //视频数据
        videoMaxNum:0,
        videoPage:1,
        videoPageSize:4,
        videoPageList:[],
      }
    },
    created(){
      this.getRedis();
      //判断入口是否全屏路由地址
      if(this.routerType){
        //应急疏散页面进入
        this.buttonType = true;
      }else {
        //预案报警进入
        this.buttonType = false;
      }
      this.lablayout();
    },
    mounted(){
      this.subscriptionMQTT();
    },
    methods:{
      //获取实验室的疏散数据
      lineEvacuateTow(id,type){
        lineEvacuateTow(id,type).then(response => {
          this.initialization(response.data);
        });
      },
      getCameraByFloor(){
        getCameraByFloor({floorId:5}).then(response => {
          let videoList = response.data;
          subjectInfo(this.subId,0).then(res => {
            if (res.data.labHardwareVOList){
              for(let i=0;i<res.data.labHardwareVOList.length;i++){
                if(res.data.labHardwareVOList[i].hardwareTypeEnum.enumName == 'VIDEO_MONITOR'){
                  videoList.unshift(res.data.labHardwareVOList[i].hardwareNUM);
                }
              }
            }
            videoList = [...new Set(videoList)]
            if (videoList[0]){
              this.startUrl(videoList);
            }
          })
        });
      },
      //文字转语音播放
      textParseUrlIps(){
        let self = this;
        let num = 0;
        let newList = [];
        for(let i=0;i<self.trumpetList.length;i++){
          if(self.trumpetList[i].type){
            let obj = {
              sn:self.trumpetList[i].deviceSn,
              port:self.trumpetList[i].port,
              deviceIp:self.trumpetList[i].deviceIp,
              type:"",
              name:"",
              speed:"",
              params:{
                tid:"",
                vol:self.trumpetList[i].deviceVol,
                urls:[]
              }
            };
            newList.push(obj);
            num++
          }
        }
        if(num == 0){
          this.msgError("请选择要播放的喇叭")
          return
        }
        if(!this.textarea){
          this.msgError("请输入要播放的内容")
          return
        }
        textParseUrlIps(newList,this.textarea).then(response => {
          this.textarea = "";
          let newObj = {
            date:response.data.date,
            text:response.data.text,
          };
          this.informationList.push(newObj);
          this.msgSuccess("操作成功")
        });
      },
      //喇叭选中
      trumpetClick(item){

        item.type = !item.type;
        if(item.type==true){
          this.trumpetList.forEach(function(item2) {
            if(item2.deviceSn==item.deviceSn){
              item2.type=true
            }else{
              item2.type=false
            }
          })
        }
      },
      //获取喇叭列表
      getDeviceList(){
        let obj ={
          subId:this.subId,
          floorId:5,
          page:1,
          pageSize:100,
        };
        getDeviceList(obj).then(response => {
          for(let i=0;i<response.data.length;i++){
            response.data[i].type = false;
          }
          this.$set(this,'trumpetList',response.data)
        });
      },
      //MQTT订阅
      subscriptionMQTT(){
        let self = this;
        this.client = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password: localStorage.getItem('mqttPassword')
        });
        this.client.on("connect", e =>{
          this.client.subscribe(this.mtopic, (err) => {
            if (!err) {
            }
          });
        });
        this.client.on("message", (topic, message) => {
          if (message){
            let data = JSON.parse(message)
            if(topic == this.mtopic){
              //应急疏散数据变更
              if(data.data.EXIT_LINE_MESSAGE){
                this.evacuate();
                self.evacuationType = false;
              }else{
                if(self.evacuationType){
                  self.msgSuccess("应急疏散已结束");
                }
                self.evacuationType = true;
                // self.$router.push({
                //   path: "/emergencyManagement/evacuation/performEvacuation"
                // })
                // this.$parent.backPage();
              }
            }
          }
        });
      },
      //获取当前疏散状态
      getRedis(){
        let self = this;
        getRedis().then( data => {
          if(data.data){
            this.subId = data.data.subId;
            this.title = data.data.subName;
            this.evacuationType = false;
            this.evacuate();
            this.getDeviceList();
          }else{
            if(localStorage.getItem('evacuationSubId')){
              this.subId = localStorage.getItem('evacuationSubId');
              this.title = localStorage.getItem('evacuationTitel');
              localStorage.removeItem('evacuationSubId')
              localStorage.removeItem('evacuationTitel')
            }else{
              this.subId = this.$route.query.subId;
              this.title = this.$route.query.text;
            }
            this.evacuationType = true;
            this.lineEvacuateTow(this.subId,0);
            this.getDeviceList();
          }
        });
      },
      //获取实验室数据
      lablayout(){
        let self = this;
        let id = 137;
        lablayout(id).then(response => {
          for(let i=0;i<response.data.length;i++){
            if(response.data[i].id == 5){
              self.fjList = response.data[i].list;
            }
          }
        });
      },
      //执行预案
      evacuate(){
        let self = this;
        evacuate(this.subId).then( data => {
          if(data.code == 200){
            if(data.data){
              this.initialization(data.data);
            }
          }
        });
      },
      //结束预案
      clickClosure(){
        let self = this;
        if (this.evacuationType){
          this.$confirm('是否确认执行疏散?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            self.lineEvacuate(0);
          }).then(() => {
          }).catch(() => {});
        } else {
          this.$confirm('是否确认结束疏散?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            self.closure();
          }).then(() => {
          }).catch(() => {});
        }
      },
      closure(){
        let self = this;
        closure(this.subId).then( data => {
          if(data.code == 200){
            this.evacuationType = true;
            self.msgSuccess("操作成功")
            // self.$router.push({
            //   path: "/emergencyManagement/evacuation/performEvacuation"
            // })
            // this.$parent.backPage();
          }
        });
      },
      //切换线路
      lineEvacuate(e){
        let self = this;
        lineEvacuate(this.subId,e).then( data => {
          if(data.code == 200){
            self.msgSuccess("操作成功")
            if(data.data){
              this.initialization(data.data);
              this.evacuationType = false;
            }
          }
        });
      },
      //灯初始化
      initialization(list){
        let self = this;
        let newList = [
          {
            id:"5",
            type:false,
          },
          {
            id:"2",
            type:false,
          },
          {
            id:"3",
            type:false,
          },
          {
            id:"4",
            type:false,
          },
          {
            id:"1",
            type:false,
          },
          {
            id:"6",
            type:false,
          },
        ];
        for(let i=0;i<list.length;i++){
          for(let o=0;o<newList.length;o++){
            if(list[i].lightId == newList[o].id){
              newList[o].type = true;
            }
          }
        }
        this.lightList = newList;
        this.getCameraByFloor();
      },
      goAllBig(){
        this.$router.push({
          path: "/emergencyEvacuationBig",
          query: {
            subId: this.subId,
            text:this.title,
            type:"2",
          }
        })
      },
      //返回方法
      clickBack(){
        let self = this;
        self.$router.push({
          path: "/emergencyManagement/evacuation/performEvacuation",
          query: {
            subId: self.subId,
            text:self.title,
          }
        })
      },
      //返回按钮
      backButton(){
        let self = this;
        for(let i=0;i<self.videoNewList.length;i++){
          self.videoNewList[i].flvPlayer.pause();
          self.videoNewList[i].flvPlayer.unload();
          self.videoNewList[i].flvPlayer.detachMediaElement();
          self.videoNewList[i].flvPlayer.destroy();
          self.videoNewList[i].flvPlayer = null
        }
        this.$set(this,'videoNewList',[]);
        this.$parent.goPage(1);
      },
      //视屏全屏方法
      videoFullScreen(index){
        this.$refs.videoRef[index].webkitRequestFullScreen();
      },
      //获取摄像头地址
      async startUrl(rows){
        let self = this;
        let list = "";
        for(let i=0;i<rows.length;i++){
          list = list + rows[i]+","
        }
        let obj = {
          page:"1",
          count:"100",
          deviceIds:list,
        };
        let urlText = window.location.href;
        if(urlText.indexOf(localStorage.getItem('ipIdentify')) != -1){
          const { data } = await startUrl(obj);
          if(data){
            self.videoPageList = [];
            for(let i=0;i<data.length;i++){
              let obj = {
                divId:'divId'+i,
                hasAudio:false,
                height:false,
                videoError:"",
                videoUrl:data[i].result.body.data.ws_flv,
              }
              self.videoPageList.push(obj)
            }
            this.videoMaxNum = this.videoPageList.length
            this.videoPageNumButton({page:1,limit:4});
          }
        } else {
          const { data } = await startUrl(obj);
          if(data){
            self.videoPageList = [];
            for(let i=0;i<data.length;i++){
              let text = localStorage.getItem('cameraUrl');
              let url = data[i].result.body.data.ws_flv;
              url = url.split("rtp/");
              let newUrl = text+'rtp/'+url[1];
              let obj = {
                divId:'divId'+i,
                hasAudio:false,
                height:false,
                videoError:"",
                videoUrl:newUrl,
              }
              self.videoPageList.push(obj)
            }
            this.videoMaxNum = this.videoPageList.length
            this.videoPageNumButton({page:1,limit:4});
          }
        }
      },
      //视频翻页处理
      videoPageNumButton(val){
        this.loading = true;
        let self = this;
        //清除已有播放流
        if(self.videoNewList[0]){
          for(let i=0;i<self.videoNewList.length;i++){
            self.videoNewList[i].flvPlayer.pause();
            self.videoNewList[i].flvPlayer.unload();
            self.videoNewList[i].flvPlayer.detachMediaElement();
            self.videoNewList[i].flvPlayer.destroy();
            self.videoNewList[i].flvPlayer = null;
          }
          self.videoNewList = [];
        }
        //计算新数据
        let num = 0;
        let numMax = val.page * val.limit;
        if(val.page!=0){
          num = ( val.page - 1 ) * val.limit
        }
        if(numMax>self.videoPageList.length){
          numMax = self.videoPageList.length;
        }
        let list = [];
        for(let i=num;i<numMax;i++){
          list.push(self.videoPageList[i]);
        }
        this.$set(this,'videoList',list);
        setTimeout(function(){
          self.videoPlay();
        },500);
      },
      videoPlay(){
        let self = this;
        this.loading = false;
        for(let i=0;i<self.videoList.length;i++){
          let obj = {
            player :{},
            flvPlayer:{}
          };
          obj.player = document.getElementById(self.videoList[i].divId);
          obj.flvPlayer = flvjs.createPlayer(
            {
              // isLive: true, //=> 是否为直播流
              // hasAudio: false, //=> 是否开启声音
              type: 'flv', //媒体类型 flv 或 mp4
              url: self.videoList[i].videoUrl //视频流地址
            },
            {
              enableStashBuffer: true,//启用 IO 存储缓冲区。 如果您需要实时流播放（最小延迟），请设置为 false，但如果存在网络抖动，则可能会停止。
              stashInitialSize: 128,//IO 存储缓冲区初始大小。 默认值为 384KB。 指示合适的大小可以改善视频加载/搜索时间。
              isLive: true,//是否是直播
              lazyLoadRecoverDuration: 30,//指示以秒为单位的lazyLoad 恢复时间边界。
              autoCleanupSourceBuffer: true,//进行自动清理
              autoCleanupMaxBackwardDuration: 3 * 60,//3 * 60 当向后缓冲持续时间超过这个值（以秒为单位）时，对 SourceBuffer 进行自动清理
              autoCleanupMinBackwardDuration: 2 * 60,//2 * 60 指示在执行自动清理时为后向缓冲区保留的持续时间（以秒为单位）。
            }
          );
          self.videoNewList.push(obj);
          // }
        }

        for(let i=0;i<self.videoNewList.length;i++){
          self.videoNewList[i].flvPlayer.attachMediaElement(self.videoNewList[i].player);
          self.videoNewList[i].flvPlayer.load(); //加载
          self.videoNewList[i].flvPlayer.play(); //加载
        }
      },
      videoFunction(){
        let self = this;
        // self.videoList = [];
        for(let i=0;i<self.checkedSubject.videoData.length;i++){
          let obj = {
            player :{},
            flvPlayer:{}
          };
          obj.player = document.getElementById(self.checkedSubject.videoData[i].divId);
          // if (flvjs.isSupported()) {
          obj.flvPlayer = flvjs.createPlayer(
            {
              // isLive: true, //=> 是否为直播流
              // hasAudio: false, //=> 是否开启声音
              type: self.checkedSubject.videoData[i].videoType, //媒体类型 flv 或 mp4
              url: self.checkedSubject.videoData[i].url //视频流地址
            },
            {
              enableStashBuffer: true,//启用 IO 存储缓冲区。 如果您需要实时流播放（最小延迟），请设置为 false，但如果存在网络抖动，则可能会停止。
              stashInitialSize: 128,//IO 存储缓冲区初始大小。 默认值为 384KB。 指示合适的大小可以改善视频加载/搜索时间。
              isLive: true,//是否是直播
              lazyLoadRecoverDuration: 30,//指示以秒为单位的lazyLoad 恢复时间边界。
              autoCleanupSourceBuffer: true,//进行自动清理
              autoCleanupMaxBackwardDuration: 3 * 60,//3 * 60 当向后缓冲持续时间超过这个值（以秒为单位）时，对 SourceBuffer 进行自动清理
              autoCleanupMinBackwardDuration: 2 * 60,//2 * 60 指示在执行自动清理时为后向缓冲区保留的持续时间（以秒为单位）。
            }
          );
          self.videoList.push(obj);
          // }
        }

        for(let i=0;i<self.videoList.length;i++){
          self.videoList[i].flvPlayer.attachMediaElement(self.videoList[i].player);
          self.videoList[i].flvPlayer.load(); //加载
          self.videoList[i].flvPlayer.play(); //加载
        }
      },
      //取消订阅关闭MQTT连接
      offMQTT(){
        this.client.unsubscribe(this.mtopic, error => {
          if (error) {
          }
        })
        this.client.end();
        this.client = {};
      },
    },
    beforeDestroy() {
      //清除定时器
      let self = this;
      self.offMQTT();
    },
  }
</script>

<style scoped lang="scss">
  .emergencyEvacuationBig{
    height:100%;
    width:100%;
    display: flex !important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    overflow-y:scroll;
    p{
      margin:0;
    }
    .top-max-title-box{
      display: flex;
      padding:0 30px;
      p{
        margin:27px 0;
      }
      p:nth-child(1){
        font-size:18px;
        font-weight:700;
        color:#0045AF;
        line-height:40px;
        span{
          color:#999;
          font-size:14px;
          margin-left:20px;
        }
      }
      p:nth-child(2){
        margin-left:70px;
        width:120px;
      }
      p:nth-child(3){
        flex:1;
      }
      p:nth-child(4){
        width:120px;
      }
    }
    .video-max-box{
      .video-for-box{
        display: inline-block;
        width:348px;
        /*height:260px;*/
        height:196px;
        position: relative;
        margin:0 0 30px 30px;
        .video-for-title-box{
          position: absolute;
          top:0;
          left:0;
          width:348px;
          height:40px;
          background: rgba(0,0,0,0.2);
          display: flex;
          z-index:10;
          .video-for-title{
            flex:1;
            color:#fff;
            font-size:14px;
            line-height:40px;
            display: block;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            padding:0 17px;
          }
          .video-for-button{
            width:40px;
            height:40px;
            cursor: pointer;
            img{
              height:20px;
              width:20px;
              margin:10px;
            }
          }
        }
        .video-box{
          /*height:260px;*/
          height:196px;
          width:348px;
        }
      }
    }
    .pagination-container{
      margin:0;
    }
    .map-max-box{
      flex:1;
      margin-left:18px;
      display: flex;
      .map-left-box{
        width:1143px;
        .max-title-box{
          display: flex;
          margin:0 0 25px;
          p:nth-child(1){
            line-height:40px;
            font-size:18px;
            font-weight:700;
            color:#094CB2;
          }
          p:nth-child(2){
            flex:1;
            line-height:40px;
            text-align: right;
            font-size:16px;
          }
        }
        .map-big-box{
          width:1143px;
          height:610px;
          border:1px solid #E0E0E0;
          margin-bottom:20px;
          overflow: hidden;
          .map-min-box{
            height:505px;
            width:1133px;
            margin:50px auto;
            background: url("../assets/ZDimages/icon_bj_syspmtcy_jinan.png");
            position: relative;
            .map-min-for-box{
              overflow: hidden;
              display: inline-block;
              line-height:150px;
              text-align: center;
            }
            .map-min-for-box-color{
              background: rgba(0,189,255,0.3);
            }
            .map-min-for-box:nth-child(1){
              margin:4px 143px 0 0;
              width:162px;
              height:162px;
            }
            .map-min-for-box:nth-child(2){
              margin:4px 0 0 0;
              width:101px;
              height:162px;
            }
            .map-min-for-box:nth-child(3){
              margin:4px 0 0 0;
              width:101px;
              height:162px;
            }
            .map-min-for-box:nth-child(4){
              margin:4px 0 0 0;
              width:100px;
              height:162px;
            }
            .map-min-for-box:nth-child(5){
              margin:4px 0 0 0;
              width:100px;
              height:162px;
            }
            .map-min-for-box:nth-child(6){
              margin:4px 0 0 0;
              width:100px;
              height:162px;
            }
            .map-min-for-box:nth-child(7){
              margin:4px 0 0 0;
              width:100px;
              height:162px;
            }
            .map-min-for-box:nth-child(8){
              margin:4px 60px 0 0;
              width:100px;
              height:162px;
            }
            .map-min-for-box:nth-child(9){
              margin: 90px 0 0 0;
              width: 92px;
              height: 240px;
              line-height:230px;
            }
            .map-min-for-box:nth-child(10){
              margin: 90px 0 0 0;
              width: 107px;
              height: 240px;
              line-height:230px;
            }
            .map-min-for-box:nth-child(11){
              margin: 90px 0 0 0;
              width: 107px;
              height: 240px;
              line-height:230px;
            }
            .map-min-for-box:nth-child(12){
              margin: 90px 0 0 0;
              width: 100px;
              height: 240px;
              line-height:230px;
            }
            .map-min-for-box:nth-child(13){
              margin: 90px 0 0 0;
              width: 100px;
              height: 240px;
              line-height:230px;
            }
            .map-min-for-box:nth-child(14){
              margin: 90px 0 0 0;
              width: 100px;
              height: 240px;
              line-height:230px;
            }
            .map-min-for-box:nth-child(15){
              margin: 90px 0 0 0;
              width: 100px;
              height: 240px;
              line-height:230px;
            }
            .map-min-for-box:nth-child(16){
              margin: 90px 0 0 0;
              width: 100px;
              height: 240px;
              line-height:230px;
            }
            .map-min-for-box:nth-child(17){
              margin: 90px 0 0 0;
              width: 100px;
              height: 240px;
              line-height:230px;
            }
            .map-min-for-box:nth-child(18){
              margin: 90px 60px 0 0;
              width: 100px;
              height: 240px;
              line-height:230px;
            }
            .map-min-img{
              position: absolute;
              width:40px;
              height:28px;
            }
            .map-min-img:nth-child(19){
              top: 128px;
              left: 175px;
            }
            .map-min-img:nth-child(20){
              top: 194px;
              left: 231px;
            }
            .map-min-img:nth-child(21){
              top: 194px;
              left: 540px;
            }
            .map-min-img:nth-child(22){
              top: 194px;
              left: 630px;
            }
            .map-min-img:nth-child(23){
              top: 194px;
              left: 940px;
            }
            .map-min-img:nth-child(24){
              top: 194px;
              left: 1030px;
            }
          }
        }
      }
      .map-right-box{
        flex:1;
        display: flex;
        flex-direction: column;
        height:610px;
        overflow: hidden;
        margin:0 10px 20px;
        .top-for-max-box{
          margin-left:15px;
          .top-for-min-box{
            width:110px;
            height:40px;
            line-height:40px;
            font-size:14px;
            padding:0 10px;
            display: inline-block;
            margin:0 13px 18px 0;
            border-radius:4px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            img{
              width:25px;
              height:25px;
              position: absolute;
              right:0;
              bottom:0;
            }
          }
          .for-color-a{
            border:1px solid #0183FA;
            color:#0183FA;
          }
          .for-color-b{
            border:1px solid #CCCCCC;
            color:#CCCCCC;
          }
        }
        .bottom-max-box{
          flex:1;
          display: flex;
          flex-direction: column;
          border:1px solid #E0E0E0;
          overflow: hidden;
          .select-button-box{
            font-weight:500;
            .select-button-title{
              font-size:14px;
              margin-left:15px;
              line-height:40px;
              color:#333;
            }
            .select-button-min-box{
              display: flex;
              margin-left:15px;
              .inquire-button-one{
                margin:0 20px;
                width:100px;
                font-size:14px;
                line-height:40px;
                height:40px;
              }
            }
          }
          .scrollbar-list{
            flex:1;
            .for-scrollbar-box{
              font-size:14px;
              margin:0 15px;
              p:nth-child(1){
                line-height:40px;
                text-align: center;
                color:#999;
                font-weight:500;
              }
              p:nth-child(2){
                color:#666;
                line-height:18px;
                font-weight:500;
              }
            }
          }
          .bottom-input-text-box{
            height:96px;
            margin:20px 20px 0;
          }
          .bottom-button-p{
            background:#0183FA;
            color:#fff;
            font-size:16px;
            text-align: center;
            line-height:40px;
            border-radius:10px;
            margin:20px 40px;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>