123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041 |
- <!--应急疏散大屏-->
- <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,startUrlJiNanDaXue,startUrl } from '@/api/executeThePlan.js'
- import mqtt from 'mqtt'
- 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();
- this.getDeviceList();
- },
- methods:{
- //获取实验室的疏散数据
- lineEvacuateTow(id,type){
- lineEvacuateTow(id,type).then(response => {
- this.initialization(response.data);
- });
- },
- getCameraByFloor(){
- getCameraByFloor({floorId:5}).then(response => {
- this.startUrl(response.data);
- });
- },
- //文字转语音播放
- 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:"",
- urls:[]
- }
- };
- newList.push(obj);
- num++
- }
- }
- if(num == 0){
- this.msgError("请选择要播放的喇叭")
- return
- }
- if(!this.textarea){
- this.msgError("请输入要播放的内容")
- return
- }
- textParseUrlIps(newList,this.textarea).then(response => {
- console.log('response',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;
- },
- //获取喇叭列表
- getDeviceList(){
- let obj ={
- 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(process.env.VUE_APP_BASE_MQTT_API, {
- username: process.env.VUE_APP_BASE_MQTT_USERNAME,
- password: process.env.VUE_APP_BASE_MQTT_PASSWORD
- });
- this.client.on("connect", e =>{
- console.log("连接成功");
- this.client.subscribe(this.mtopic, (err) => {
- if (!err) {
- console.log("订阅成功:" + this.mtopic);
- }
- });
- });
- this.client.on("message", (topic, message) => {
- if (message){
- let data = JSON.parse(message)
- if(topic == this.mtopic){
- console.log("应急疏散数据变更",data);
- //应急疏散数据变更
- 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();
- }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);
- }
- });
- },
- //获取实验室数据
- 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();
- console.log("结束",data)
- }
- });
- },
- //切换线路
- 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("192.168") != -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 startUrlJiNanDaXue(obj);
- if(data){
- self.videoPageList = [];
- for(let i=0;i<data.length;i++){
- let text = 'ws://lab.sxitdlc.com/jinandaxue/stream/';
- 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);
- // }
- console.log("i",i)
- }
- 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);
- // }
- console.log("i",i)
- }
- 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) {
- console.log('Unsubscribe error', error)
- }
- })
- this.client.end();
- this.client = {};
- },
- },
- beforeDestroy() {
- //清除定时器
- let self = this;
- self.offMQTT();
- console.log("beforeDestroy");
- },
- }
- </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>
|