123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455 |
- <!-- 应急疏散 -->
- <template>
- <view id="emergencyEvacuationBig">
- <view class="setUpEvacuation" v-if="pageType == 1">
- <view class="evacuation-max-box">
- <view class="picker-max-box">
- <view class="picker-title-box">
- <view></view>
- <view>所属学院</view>
- </view>
- <view class="picker-min-box" style="background:#f5f5f5;">
- <view>{{collegeArray[deptIndex].name}}</view>
- <img src="@/images/icon_06.png">
- </view>
- </view>
- <view class="picker-max-box">
- <view class="picker-title-box">
- <view></view>
- <view>楼层楼栋</view>
- </view>
- <view class="picker-min-box" style="background:#f5f5f5;">
- <view>{{deptArray[deptIndex].name}}</view>
- <img src="@/images/icon_06.png">
- </view>
- </view>
- <view class="picker-max-box">
- <view class="picker-title-box">
- <view></view>
- <view>实验室</view>
- </view>
- <picker @change="fjListChange"
- :range-key="'subjectName'" :value="id" :range="fjListArray">
- <view class="picker-min-box">
- <view>{{fjListIndex?fjListArray[fjListIndex].subjectName:'请选择实验室'}}</view>
- <img src="@/images/icon_06.png">
- </view>
- </picker>
- </view>
- <!-- <view class="picker-max-box">
- <view class="picker-title-box">
- <view>*</view>
- <view>疏散路径:</view>
- </view>
- <picker @change="buttonChangeTwo"
- :range-key="'name'" :value="id" :range="buttonArray">
- <view class="picker-min-box">
- <view>{{buttonArrayIndex?buttonArray[buttonArrayIndex].name:'请选择疏散路径'}}</view>
- <img src="@/images/icon_06.png">
- </view>
- </picker>
- </view> -->
- </view>
- <view class="setUpEvacuation-bottom-button" @click="confirmBtn">确认</view>
- </view>
- <view class="implementEvacuation" v-if="pageType == 2">
- <view class="evacuation-max-box">
- <!-- 头部 -->
- <view class="evacuation-title-box">
- <view class="evacuation-title-name-box">{{subName}}</view>
- <view class="site"><img src="@/images/icon_14.png">安全学院 环境与气象研究所</view>
- </view>
- <!-- 视频监控-选择疏散路径 -->
- <view class="monito">
- <view class="monito_li">
- 视频监控
- <view class="monito_li_r monito_li_r_text" @click="goVideo()">查看监控<img src="@/images/icon_04.png"></view>
- </view>
- <view class="monito_li" style="border:0;">
- 选择疏散路径
- <view class="monito_li_r">
- <picker @change="buttonChange"
- :range-key="'name'" :value="id" :range="buttonArray">
- <view class="evacuation-title-button-box">
- <view :class="buttonArrayIndex?'colorB':'colorA'">{{buttonArrayIndex?buttonArray[buttonArrayIndex].name:'修改疏散路径'}}</view>
- <img src="@/images/icon_06.png">
- </view>
- </picker>
- </view>
- </view>
- </view>
- <!-- 滚动部分 -->
- <!-- <view class="evacuation-scroll-box">
- <view :class="videoIndex == index?'scroll-box-color':''"
- @click="scrollBoxClick(index)"
- v-for="(item,index) in videoList" :key="index">{{item.name}}</view>
- </view> -->
- <!-- 视频部分 -->
- <!-- <view class="evacuation-video-box">
- <video
- :class="index == videoIndex?'video-a':'video-b'"
- v-for="(item,index) in videoList" :key="index"
- :id="urlList.id" :src="item.url"
- poster="http://lab.sxitdlc.com:9300/statics/logo/logo.png"
- :custom-cache='false' :autoplay="true" :controls="true"
- :enable-danmu="false" :muted="true" :show-fullscreen-btn="true"
- :show-center-play-btn="false" :show-play-btn="false"
- @error="videoErrorCallback" >
- </video>
- </view> -->
- <!-- 地图部分 -->
- <view class="roadmap">
- <view class="roadmap_t">
- <view class="monito_li_r_l">选择疏散路径</view>
- <view class="monito_li_r">
- <picker @change="buttonChange"
- :range-key="'name'" :value="id" :range="buttonArray">
- <view class="evacuation-title-button-box">
- <view :class="buttonArrayIndex?'colorB':'colorA'">{{buttonArrayIndex?buttonArray[buttonArrayIndex].name:'修改疏散路径'}}</view>
- <img src="@/images/icon_06.png">
- </view>
- </picker>
- </view>
- </view>
- <view class="evacuation-map-box">
- <view class="evacuation-map-big-box">
- <view class="evacuation-map-min-for-box" :class="subId == item.subjectId?'evacuation-map-min-for-box-color':''"
- v-for="(item,index) in fjList" :key="index">{{item.room}}</view>
- <img class="map-min-img" src="@/images/Version2.3/icon_sjt.gif" v-show="lightList[0].type">
- <img class="map-min-img" src="@/images/Version2.3/icon_yjt.gif" v-show="lightList[1].type">
- <img class="map-min-img" src="@/images/Version2.3/icon_zjt.gif" v-show="lightList[2].type">
- <img class="map-min-img" src="@/images/Version2.3/icon_yjt.gif" v-show="lightList[3].type">
- <img class="map-min-img" src="@/images/Version2.3/icon_zjt.gif" v-show="lightList[4].type">
- <img class="map-min-img" src="@/images/Version2.3/icon_yjt.gif" v-show="lightList[5].type">
- </view>
- </view>
- </view>
- <!-- 视频部分 -->
- <view class="video-max-box" v-if="urlList[0]">
- <video
- v-for="(item,index) in urlList" :key="index" :id="urlList.id" :src="item.url"
- :poster="videoCover"
- :custom-cache='false' :autoplay="true" :controls="true"
- :enable-danmu="false" :muted="true" :show-fullscreen-btn="true"
- :show-center-play-btn="false" :show-play-btn="false"
- @error="videoErrorCallback" >
- </video>
- </view>
- <view class="bottom-button-box">
- <view @click="shadeTypeClick()">语音广播</view>
- <view @click="lineEvacuate" v-if="isEvacuate">执行疏散</view>
- <view @click="closireButton" v-if="!isEvacuate">结束疏散</view>
- </view>
- </view>
- <view class="shade-max-big-box" v-if="broadcastType">
- <view class="null-box" @click="shadeTypeClick()"></view>
- <!-- 语音广播-执行疏散 -->
- <view class="broadcast">
- <view class="broadcast_t">语音广播<label>选择喇叭位置</label></view>
- <!-- 按钮部分 -->
- <view class="trumpet-max-box">
- <view @click="trumpetClick(index)"
- class="trumpet-for-box" :class="item.type?'trumpet-color-a':'trumpet-color-b'"
- v-for="(item,index) in trumpetList" :key="index">
- <img src="@/images/icon_sskz_zc.png" v-if="!item.type">
- <img src="@/images/icon_sskz_xz.png" v-if="item.type">
- {{item.name}}
- </view>
- </view>
- <view class="broadcast_m">
- <view class="broadcast_m_t" :class="liveType?'broadcast_m_t_back_a':'broadcast_m_t_back_b'" @longpress.stop="recordButton" @touchmove.stop="cancelButton" @touchend.stop="sendButton">
- <!-- <img src="@/images/icon_sskz_azsh.png" v-if="!liveType">
- <img src="@/images/icon_sskz_skfs.png" v-if="liveType"> -->
- <!-- <label class="slip_color" v-if="!liveType">按住说话</label>
- <label class="press_color" v-if="liveType">松开发送</label> -->
- {{liveType?'松开发送':'按住说话'}}
- </view>
- <view class="broadcast_m_b" v-if="!liveType">按住说话,录入广播内容</view>
- <view class="broadcast_m_b" v-if="liveType">松开发送,向上滑动取消发送</view>
- </view>
- </view>
- </view>
- <!-- <view class="live-button" :class="liveType?'live-color-a':'live-color-b'"
- @longpress.stop="recordButton" @touchmove.stop="cancelButton" @touchend.stop="sendButton">开始广播</view> -->
- </view>
- </view>
- </template>
- <script>
- import { config } from '@/api/request/config.js'
- import { lablayout,evacuate,closure,lineEvacuate,getRedis,getDeviceList,textParseUrlIps,getCameraByFloor,jinanGetStartList,nanhuGetStartList,lineEvacuateTow,laboratoryInfo} from '@/api/index.js'
- export default {
- data() {
- return {
- videoCover:uni.getStorageSync('videoCover'),
- //页面状态
- pageType:"",
- //学院
- collegeArray:[{name:"环境学院-祈福楼",id:"113"}],
- //楼栋
- deptArray:[{name:"环境与气象研究所",id:"137"}],
- deptIndex:0,
- //实验室
- fjListArray:[],
- fjListIndex:"",
- //疏散方向
- buttonArray:[
- {name:"向左疏散",id:"1"},
- {name:"向右疏散",id:"2"},
- {name:"两侧疏散",id:"0"},
- ],
- buttonArrayIndex:"2",
- //视频数据
- urlList:[],
- //布局数据
- 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,
- },
- ],
- //接收参数
- subId:"",
- subName:"",
- title:"",
- type:"",
- //喇叭数据
- trumpetList:[],
- //广播相关
- liveType:false,
- sendLock: true, //发送锁,当为true时上锁,false时解锁发送
- recorderManager : wx.getRecorderManager(),
- isEvacuate:true,//疏散按钮控制,当为true时候执行疏散
- //滑动记录
- startPoint:{},
- //摄像头信息
- deptId:'',
- itemData:{
- hardwareNUM:'',
- name:'',
- },
- broadcastType:false,
- videoHardwareNUM:[],//实验室和楼道摄像头编码
- }
- },
- onLoad(option) {
- let self = this;
- //判断入口(执行疏散)
- if(option.item){
- let item = JSON.parse(decodeURIComponent(option.item));
- this.subId = item.subId;
- this.title = item.title;
- this.type = item.type;
- this.evacuateTwo();
- }else{
- //判断入口(首页按钮)
- this.getRedis();
- }
- },
- onShow(){
- this.getAppExitLine();
- this.lablayout();
- getApp().watch(this.getMqttLineData,'lineData');
- },
- methods: {
- getAppExitLine(){
- let list = [{type:"lab/exit/line"}];
- getApp().appMqttOn(1,list);
- },
- shadeTypeClick(){
- this.broadcastType = !this.broadcastType
- },
- async evacuateTwo(){
- const {data} = await lineEvacuateTow(this.subId,0)
- if(data.code == 200){
- if(data.data){
- this.pageType = 2;
- uni.showToast({
- title: '执行成功',
- icon:"none",
- mask:true,
- duration: 2000
- });
- this.initialization(data.data);
- }
- }
- },
- //跳转摄像头列表
- goVideo(){
- this.itemData.id=this.subId;
- uni.navigateTo({
- url:'/pages_manage/workbench/laboratory/monitor?item='+encodeURIComponent(JSON.stringify(this.itemData))+'&deptId='+this.deptId
- })
- },
- //获取实验室摄像头
- async laboratoryInfo(){
-
- let _this = this;
- const {data} = await laboratoryInfo(_this.itemData.subjectId);
- if(data.code == 200){
- let list = data.data[0];
- list.labHardwareVOList.forEach(function(item){
- if(item.hardwareTypeEnum.enumName=='VIDEO_MONITOR'){
- console.log(item.hardwareNUM)
- _this.videoHardwareNUM.push(item.hardwareNUM)
- }
- })
-
- this.getCameraByFloor();
-
- }
- },
- //获取楼层摄像头列表
- async getCameraByFloor(){
- let _this=this;
- const {data} = await getCameraByFloor({floorId:5})
- if(data.code == 200){
- if(data.data[0]){
- let list=_this.videoHardwareNUM.concat(data.data)
- let qc=[]
- for(var i = 0; i < list.length-1; i++){
- for(var j = i+1; j < list.length; j++){
- if(list[i]===list[j]){
- list.splice(j,1);
- j--;
- }
- }
- }
- console.log(list)
-
-
- this.nanhuGetStartList(list);
- }
- }
- },
- async nanhuGetStartList(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,
- // deviceIds:'440102004920000000011111,2C440102004920000000011112',
- };
- const {data} = await jinanGetStartList(obj)
- if(data.code == 200){
- let list = [];
- for(let i=0;i<data.data.length;i++){
- let text = 'https://lab.sxitdlc.com/jinandaxue/stream/';
- let url = data.data[i].result.body.data.hls;
- url = url.split("rtp/");
- let newUrl = text+'rtp/'+url[1];
- let obj = {
- name:"楼道监控"+(i+1),
- id:data.data[i].result.body.data.deviceID,
- url:newUrl,
- }
- list.push(obj)
- }
- this.urlList = list;
- }
- },
- //点击选择喇叭
- trumpetClick(index){
- this.trumpetList[index].type = !this.trumpetList[index].type
- },
- //录制
- recordButton(e){
- console.log("按下")
- let self = this;
- let num = 0;
- for(let i=0;i<self.trumpetList.length;i++){
- if(self.trumpetList[i].type){
- num++
- }
- }
- if(num == 0){
- uni.showToast({
- title: '请选择喇叭',
- icon:"none",
- mask:true,
- duration: 2000
- });
- return
- }
- this.liveType=true;
- console.log('录制',e)
- this.startPoint = e.touches[0];//记录长按时开始点信息,后面用于计算上划取消时手指滑动的距离。
- const options = {
- duration: 10000,
- sampleRate: 16000,
- numberOfChannels: 1,
- encodeBitRate: 48000,
- format: 'mp3',
- frameSize: 50
- }
- this.recorderManager.start(options);//开始录音
- this.recorderManager.onStart(() => {
- console.log('recorder start')
- })
- this.recorderManager.onError((res) => {
- console.log(res);
- })
- wx.showToast({
- title: "正在录音,上划取消发送",
- icon: "none",
- duration: 60000//先定义个60秒,后面可以手动调用wx.hideToast()隐藏
- });
- this.sendLock = false;//长按时是不上锁的。
- },
- //取消
- cancelButton(e){
- console.log("移动")
- let self = this;
- let num = 0;
- for(let i=0;i<self.trumpetList.length;i++){
- if(self.trumpetList[i].type){
- num++
- }
- }
- if(num == 0){
- return
- }
- this.liveType=false;
- console.log('取消',e)
- let moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
- if (Math.abs(moveLenght) > 50) {
- wx.showToast({
- title: "松开手指,取消发送",
- icon: "none",
- duration: 60000
- });
- this.sendLock = true;//触发了上滑取消发送,上锁
- } else {
- wx.showToast({
- title: "正在录音,上划取消发送",
- icon: "none",
- duration: 60000
- });
- this.sendLock = false;//上划距离不足,依然可以发送,不上锁
- }
- },
- //发送
- sendButton(e){
- console.log("松开")
- let self = this;
- let num = 0;
- for(let i=0;i<self.trumpetList.length;i++){
- if(self.trumpetList[i].type){
- num++
- }
- }
- if(num == 0){
- return
- }
- this.liveType=false;
- console.log('发送',e)
- wx.hideToast();//结束录音、隐藏Toast提示框
- this.recorderManager.stop();//结束录音
- this.recorderManager.onStop((res) => {
- if(!this.sendLock){
- console.log('1', this.recorderManager)
- this.uploadImg(res.tempFilePath);
- }
- console.log('停止录音', res.tempFilePath)
- console.log("sendLock",this.sendLock);
- })
- },
- //上传MP3
- async uploadImg(tempFilePaths){
- var self = this;
- uni.uploadFile({
- url: config.base_url+'/file/upload', //仅为示例,非真实的接口地址
- header:{'Authorization':uni.getStorageSync('token')},
- filePath: tempFilePaths,
- name: 'file',
- formData: {
- 'user': 'test'
- },
- success: (uploadFileRes) => {
- let res = JSON.parse(uploadFileRes.data);
- if(res.code == 200){
- console.log("上传成功",res)
- // self.textParseUrlIps(res.data.url);
- self.textParseUrlIps(config.base_url+ '/' +res.data.url);
- // self.newData.imgList.push(res.data.url);
- }else{
- uni.showToast({
- title: res.msg,
- icon:"none",
- mask:true,
- duration: 2000
- });
- }
- },
- fail: err => {
- uni.hideLoading()
- },
- complete: () => {
- }
- });
- },
- //发送语音
- async textParseUrlIps(text){
- let self = this;
- 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);
- }
- }
- const {data} = await textParseUrlIps(newList,text)
- if(data.code == 200){
- uni.showToast({
- title: '发送成功',
- icon:"none",
- mask:true,
- duration: 2000
- });
- }
- },
- //监听应急疏散数据变更
- getMqttLineData(val){
- console.log('收到疏散MQTT')
- let self = this;
- if(val.EXIT_LINE_MESSAGE){
- console.log('数据改变')
- this.evacuate();
- }else{
- console.log('应急疏散已结束')
- uni.showToast({
- title: '应急疏散已结束',
- icon:"none",
- mask:true,
- duration: 2000
- });
- setTimeout(function(){
- uni.navigateBack();
- },2000);
- }
- },
- //获取当前疏散数据
- async getRedis(){
- let self = this;
- const {data} = await getRedis()
- if(data.code == 200){
- if(data.data){
- this.isEvacuate=false;
- this.deptId = data.data.deptId;
- this.subId = data.data.subId;
- this.subName = data.data.subName;
- this.evacuate();
- }else{
- this.pageType = 1;
- this.isEvacuate=true;
- }
- }
- },
- //实验室选择
- fjListChange(e){
- this.fjListIndex = e.detail.value;
- this.$set(this,'subName',this.fjListArray[this.fjListIndex].subjectName);
- this.$set(this,'subId',this.fjListArray[e.detail.value].subjectId);
- this.$set(this,'deptId',this.fjListArray[e.detail.value].deptId);
- this.itemData.name=this.fjListArray[e.detail.value].subjectName
- this.itemData.floorId=this.fjListArray[e.detail.value].floorId
- this.itemData.id=this.fjListArray[e.detail.value].id
- this.itemData.subjectId=this.fjListArray[e.detail.value].subjectId
- console.log(this.fjListArray[e.detail.value])
- },
- //疏散路线选择
- buttonChangeTwo(e){
- this.buttonArrayIndex = e.detail.value;
- },
- //执行疏散
- async evacuate(){
- console.log("执行疏散")
- const {data} = await evacuate(this.subId)
- if(data.code == 200){
- if(data.data){
- this.initialization(data.data);
- }
- }
- },
- //结束疏散
- closireButton(){
- let self = this;
- uni.showModal({
- content: '确认结束疏散吗?',
- cancelColor:"#999",
- confirmColor:"#0183FA",
- success: function (res) {
- if (res.confirm) {
- self.closure();
- this.isEvacuate=true;
- console.log('用户点击确定');
- } else if (res.cancel) {
- console.log('用户点击取消');
- }
- }
- });
- },
- async closure(){
- const {data} = await closure(this.subId)
- if(data.code == 200){
- uni.showToast({
- title: '操作成功',
- icon:"none",
- mask:true,
- duration: 2000
- });
- setTimeout(function(){
- uni.navigateBack();
- },2000);
- }
- },
- buttonChange(e){
- this.buttonArrayIndex = e.detail.value;
- this.lineEvacuate();
- },
- /* 确认 */
- confirmBtn(){
- if(!this.subId){
- uni.showToast({
- title: '请选择实验室',
- icon:"none",
- mask:true,
- duration: 2000
- });
- return
- }
- this.lineEvacuateTow();
- this.laboratoryInfo();
- },
- /* 2.5获取疏散线路 */
- async lineEvacuateTow(){
- if(!this.buttonArrayIndex){
- uni.showToast({
- title: '请选择疏散路线',
- icon:"none",
- mask:true,
- duration: 2000
- });
- return
- }
- const {data} = await lineEvacuateTow(this.subId,this.buttonArray[this.buttonArrayIndex].id)
- if(data.code == 200){
- if(data.data){
- this.pageType = 2;
- uni.showToast({
- title: '执行成功',
- icon:"none",
- mask:true,
- duration: 2000
- });
- this.initialization(data.data);
- }
- }
- },
- //执行疏散
- async lineEvacuate(){
- if(!this.subId){
- uni.showToast({
- title: '请选择实验室',
- icon:"none",
- mask:true,
- duration: 2000
- });
- return
- }
- if(!this.buttonArrayIndex){
- uni.showToast({
- title: '请选择疏散路线',
- icon:"none",
- mask:true,
- duration: 2000
- });
- return
- }
- const {data} = await lineEvacuate(this.subId,this.buttonArray[this.buttonArrayIndex].id)
- if(data.code == 200){
- if(data.data){
- console.log('执行疏散')
- this.isEvacuate=false;
- uni.showToast({
- title: '执行成功',
- icon:"none",
- mask:true,
- duration: 2000
- });
- this.initialization(data.data);
- }
- }
- },
- //灯初始化
- initialization(list){
- console.log('灯数据',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;
- console.log('灯数据改变',this.lightList);
- this.pageType = 2;
- this.$forceUpdate();
- this.getDeviceList();
- },
- async getDeviceList(){
- let obj ={
- floorId:5,
- page:1,
- pageSize:100,
- };
- const {data} = await getDeviceList(obj)
- if(data.code == 200){
- for(let i=0;i<data.data.length;i++){
- data.data[i].type = false;
- }
- this.$set(this,'trumpetList',data.data)
- }
- },
- //摄像头切换
- scrollBoxClick(index){
- this.videoIndex = index;
- },
- //获取实验室布局
- async lablayout(){
- let self = this;
- const {data} = await lablayout(137)
- if(data.code == 200){
- for(let i=0;i<data.data.length;i++){
- if(data.data[i].id == 5){
- self.fjList = data.data[i].list;
- let newList = [];
- for(let o=0;o<data.data[i].list.length;o++){
- if(data.data[i].list[o].subjectId != -1){
- newList.push(data.data[i].list[o]);
- }
- }
- this.$set(this,'fjListArray',newList);
- }
- }
- }
- },
- },
- beforeDestroy(){
- //断开mqtt连接
- getApp().offMQTT();
- //删除应急疏散监听
- getApp().deleteLineData();
- }
- }
- </script>
- <style lang="stylus" scoped>
- #emergencyEvacuationBig{
- height:100%;
- width:100%;
- display:flex;
- flex-direction:column;
- overflow-y:scroll;
- .setUpEvacuation{
- flex:1;
- display:flex;
- flex-direction:column;
- overflow-y:scroll;
- .evacuation-max-box{
- width:710rpx;
- margin:20rpx 20rpx;
- background #fff
- border-radius:20rpx;
- padding:20rpx 0;
- .picker-max-box{
- .picker-title-box{
- padding:0 20rpx;
- display flex
- view{
- line-height:80rpx;
- font-size:28rpx;
- }
- view:nth-child(1){
- color:red;
- }
- view:nth-child(2){
- }
- view:nth-child(3){
- color:#999;
- }
- }
- .picker-min-box{
- display flex;
- height:80rpx;
- width:667rpx;
- border:1rpx solid #a2a2a2;
- border-radius:10rpx;
- margin:0 20rpx;
- view{
- flex:1;
- line-height:80rpx;
- padding:0 20rpx;
- color:#999;
- font-size:28rpx;
- }
- img{
- width:24rpx;
- height:12rpx;
- margin:35rpx 23rpx;
- }
- }
- }
- }
- }
- .implementEvacuation{
- flex:1;
- display:flex;
- flex-direction:column;
- overflow-y:scroll;
- .evacuation-max-box{
- width:710rpx;
- margin:20rpx 20rpx;
- /* background #fff */
- border-radius:20rpx;
- padding:20rpx 0 30rpx;
- .evacuation-title-box{
- height:150rpx;
- //border-bottom:1rpx solid #dedede;
- background: #FFFFFF;
- border-radius: 20rpx;
- padding-left:22rpx;
- padding-top:34rpx;
- box-sizing :border-box;
- .evacuation-title-name-box{
- font-size: 30rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #333333;
- line-height: 30rpx;
- }
- .site{
- font-size: 28rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #999999;
- line-height: 30rpx;
- margin-top:32rpx;
- display :flex;
- justify-content :flex-start;
- align-items center;
- >img{
- width: 28rpx;
- height: 30rpx;
- margin-right:18rpx;
- }
- }
- }
- /* 视频监控-选择疏散路线 */
- .monito{
- width: 710rpx;
- height: 161rpx;
- background: #FFFFFF;
- border-radius: 20rpx;
- padding :0 14rpx;
- box-sizing border-box;
- margin-top :20rpx;
- .monito_li{
- width: 680rpx;
- height: 80rpx;
- font-size: 30rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #333333;
- line-height: 80rpx;
- border-bottom: 1rpx solid #E0E0E0;
- display :flex;
- justify-content :space-between;
- .monito_li_r_text{
- font-size:28rpx!important;
- padding-right:37rpx;
- }
- .monito_li_r{
- width :380rpx;
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #0183FA;
- line-height: 80rpx;
- display :flex;
- justify-content :flex-end;
- align-items center;
- >img{
- width: 9rpx;
- height: 22rpx;
- margin-left :20rpx;
- }
- .evacuation-title-button-box{
- display flex
- overflow hidden
- view{
- line-height:61rpx;
- font-size:28rpx;
- }
- .colorA{
- color: #0183FA;
- }
- .colorB{
- color:#0183FA;
- }
- img{
- margin:28rpx 20rpx 0;
- width:24rpx;
- height:9rpx;
- }
- }
- }
- }
- }
- .evacuation-scroll-box{
- height:95rpx;
- overflow-x scroll
- overflow-y hidden
- white-space:nowrap;
- margin:0 20rpx;
- view{
- line-height:95rpx;
- font-size:28rpx;
- display inline-block
- margin-right:45rpx;
- }
- .scroll-box-color{
- color:#0183FA;
- }
- }
- .evacuation-video-box{
- width:668rpx;
- height:341rpx;
- margin:0 auto;
- position relative
- video{
- position absolute
- top:0;
- left:0;
- width:668rpx;
- height:341rpx;
- margin:0 auto;
- }
- .video-a{
- z-index:100;
- }
- .video-b{
- z-index:0;
- }
- }
- /* 路线图 */
- .roadmap{
- width: 710rpx;
- height: 464rpx;
- background: #FFFFFF;
- border-radius: 20rpx;
- padding :20rpx 20rpx 0;
- box-sizing :border-box;
- margin-top :20rpx;
- .roadmap_t{
- font-size: 30rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #333333;
- line-height: 30rpx;
- display:flex;
- .monito_li_r_l{
- flex:1;
- line-height:61rpx;
- font-size:28rpx;
- }
- .monito_li_r{
- width :380rpx;
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #0183FA;
- line-height: 80rpx;
- display :flex;
- justify-content :flex-end;
- align-items center;
- >img{
- width: 9rpx;
- height: 22rpx;
- margin-left :20rpx;
- }
- .evacuation-title-button-box{
- display flex
- overflow hidden
- view{
- line-height:61rpx;
- font-size:28rpx;
- }
- .colorA{
- color: #0183FA;
- }
- .colorB{
- color:#0183FA;
- }
- img{
- margin:28rpx 20rpx 0;
- width:24rpx;
- height:9rpx;
- }
- }
- }
- }
- .evacuation-map-box{
- width:668rpx;
- height:348rpx;
- margin:0 auto;
- overflow:hidden;
- border:1rpx solid #E0E0E0;
- margin-top:20rpx;
- .evacuation-map-big-box{
- height:285rpx;
- width:641rpx;
- background:url(../images/Version2.3/icon_bj_syspmtcy_jinan.png);
- background-size 100%
- margin:28rpx 13rpx ;
- position relative
- .evacuation-map-min-for-box{
- overflow: hidden;
- display: inline-block;
- line-height:70rpx;
- text-align: center;
- font-size:14rpx;
- }
- .evacuation-map-min-for-box-color{
- background: rgba(0,189,255,0.3);
- }
- .evacuation-map-min-for-box:nth-child(1){
- margin:4rpx 82rpx 0 0;
- width:91rpx;
- height:91rpx;
- }
- .evacuation-map-min-for-box:nth-child(2){
- margin:4rpx 0 0 0;
- width:57rpx;
- height:91rpx;
- }
- .evacuation-map-min-for-box:nth-child(3){
- margin:4rpx 0 0 0;
- width:57rpx;
- height:91rpx;
- }
- .evacuation-map-min-for-box:nth-child(4){
- margin:4rpx 0 0 0;
- width:57rpx;
- height:91rpx;
- }
- .evacuation-map-min-for-box:nth-child(5){
- margin:4rpx 0 0 0;
- width:58rpx;
- height:91rpx;
- }
- .evacuation-map-min-for-box:nth-child(6){
- margin:4rpx 0 0 0;
- width:57rpx;
- height:91rpx;
- }
- .evacuation-map-min-for-box:nth-child(7){
- margin:4rpx 0 0 0;
- width:57rpx;
- height:91rpx;
- }
- .evacuation-map-min-for-box:nth-child(8){
- margin:4rpx 40rpx 0 0;
- width:57rpx;
- height:91rpx;
- }
- .evacuation-map-min-for-box:nth-child(9){
- margin:47rpx 0 0 0;
- width:51rpx;
- height:136rpx;
- line-height:140rpx;
- }
- .evacuation-map-min-for-box:nth-child(10){
- margin:47rpx 0 0 0;
- width:60rpx;
- height:136rpx;
- line-height:140rpx;
- }
- .evacuation-map-min-for-box:nth-child(11){
- margin:47rpx 0 0 0;
- width:62rpx;
- height:136rpx;
- line-height:140rpx;
- }
- .evacuation-map-min-for-box:nth-child(12){
- margin:47rpx 0 0 0;
- width:58rpx;
- height:136rpx;
- line-height:140rpx;
- }
- .evacuation-map-min-for-box:nth-child(13){
- margin:47rpx 0 0 0;
- width:57rpx;
- height:136rpx;
- line-height:140rpx;
- }
- .evacuation-map-min-for-box:nth-child(14){
- margin:47rpx 0 0 0;
- width:57rpx;
- height:136rpx;
- line-height:140rpx;
- }
- .evacuation-map-min-for-box:nth-child(15){
- margin:47rpx 0 0 0;
- width:57rpx;
- height:136rpx;
- line-height:140rpx;
- }
- .evacuation-map-min-for-box:nth-child(16){
- margin:47rpx 0 0 0;
- width:57rpx;
- height:136rpx;
- line-height:140rpx;
- }
- .evacuation-map-min-for-box:nth-child(17){
- margin:47rpx 0 0 0;
- width:57rpx;
- height:136rpx;
- line-height:140rpx;
- }
- .evacuation-map-min-for-box:nth-child(18){
- margin:47rpx 0 0 0;
- width:57rpx;
- height:136rpx;
- line-height:140rpx;
- }
- .map-min-img{
- position: absolute;
- width:34rpx;
- height:22rpx;
- }
- .map-min-img:nth-child(19){
- top: 64rpx;
- left: 94rpx;
- }
- .map-min-img:nth-child(20){
- top: 109rpx;
- left: 134rpx;
- }
- .map-min-img:nth-child(21){
- top: 109rpx;
- left:290rpx;
- }
- .map-min-img:nth-child(22){
- top: 109rpx;
- left:350rpx;
- }
- .map-min-img:nth-child(23){
- top: 109rpx;
- left:520rpx;
- }
- .map-min-img:nth-child(24){
- top: 109rpx;
- left:580rpx;
- }
- }
- }
- }
- .video-max-box{
- width: 710rpx;
- height: 780rpx;
- overflow-y scroll;
- background: #FFFFFF;
- border-radius: 20rpx;
- padding :22rpx 30rpx 30rpx;
- box-sizing :border-box;
- margin-top :20rpx;
- margin-bottom:120rpx;
- video{
- width:645rpx;
- height:355rpx;
- }
- }
- .bottom-button-box{
- position absolute;
- bottom:20rpx;
- display flex;
- width:670rpx;
- margin:20rpx;
- view{
- width:335rpx;
- height:100rpx;
- line-height:100rpx;
- text-align center;
- color:#fff;
- font-size:28rpx;
- }
- view:nth-child(1){
- border-top-left-radius :50rpx;
- border-bottom-left-radius :50rpx;
- background:#FF9C00;
- }
- view:nth-child(2){
- border-top-right-radius :50rpx;
- border-bottom-right-radius :50rpx;
- background:#0183FA;
- }
- }
- }
- .live-button{
- width:650rpx;
- height:100rpx;
- line-height:100rpx;
- text-align center;
- font-size:28rpx;
- margin:50rpx auto 0;
- border-radius:20rpx;
- }
- .live-color-a{
- color:#fff;
- background:#FF8686;
- }
- .live-color-b{
- color:#fff;
- background:#25C95B;
- }
- .shade-max-big-box{
- height:100%;
- width:100%;
- position fixed
- display flex;
- flex-direction column
- z-index:10;
- background :rgba(0,0,0,0.2);
- .null-box{
- flex:1;
- }
- /* 语音广播-执行疏散 */
- .broadcast{
- width: 100%;
- // height: 532rpx;
- background: #FFFFFF;
- border-top-left-radius :20rpx;
- border-top-right-radius :20rpx
- padding :22rpx 30rpx 30rpx;
- box-sizing :border-box;
- margin-top:20rpx;
- .broadcast_t{
- font-size: 30rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #333333;
- line-height: 30rpx;
- >label{
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #999999;
- line-height: 30rpx;
- margin-left :16rpx;
- }
- }
- .trumpet-max-box{
- display :flex;
- justify-content :flex-start;
- margin-top :22rpx;
- flex-wrap: wrap;
- .trumpet-for-box{
- display:inline-block;
- width:200rpx;
- height:60rpx;
- line-height:60rpx;
- font-size:24rpx;
- text-align center;
- cursor: pointer;
- overflow: hidden;
- border: 1rpx solid #E0E0E0;
- border-radius:10rpx;
- color: #E0E0E0;
- display :flex;
- justify-content :center;
- margin-right :20rpx;
- margin-bottom: 10rpx;
- >img{
- width:36rpx;
- height:34rpx;
- margin :12rpx 20rpx 0 25rpx;
- }
- }
- .trumpet-color-a{
- border:1px solid #0183FA;
- color:#0183FA;
- }
- .trumpet-color-b{
- border:1px solid #CCCCCC;
- color:#999;
- }
- }
- .broadcast_m{
- width :100%;
- .broadcast_m_t{
- width: 142rpx;
- height: 142rpx;
- margin :30rpx 0 0 258rpx;
- position :relative;
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- line-height: 170rpx;
- text-align center
- >img{
- width: 142rpx;
- height: 142rpx;
- position :absolute;
- }
- >label{
- width :100%;
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #0183FA;
- line-height: 24rpx;
- display :inline-block;
- text-align :center;
- position :absolute;
- top:76rpx;
- }
- /* 按下 */
- .press_color{
- color: #FFFFFF;
- }
- /* 松开 */
- .slip_color{
- color: #0183FA;
- }
- }
- .broadcast_m_t_back_a{
- background:url(@/images/icon_sskz_skfs.png);
- background-size 100%
- color: #FFFFFF;
- }
- .broadcast_m_t_back_b{
- background:url(@/images/icon_sskz_azsh.png);
- background-size 100%
- color: #0183FA;
- }
- .broadcast_m_b{
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #999999;
- line-height: 24rpx;
- text-align center;
- margin-top :14rpx;
- }
- }
- /* 疏散按钮 */
- .evacuation-button-box{
- width:650rpx;
- height:100rpx;
- background #0183FA
- color:#fff;
- text-align center;
- line-height:100rpx;
- font-size:28rpx;
- margin:88rpx auto 0;
- border-radius:20rpx;
- }
- }
- }
- }
- .setUpEvacuation-bottom-button{
- width:650rpx;
- height:100rpx;
- background #0183FA
- color:#fff;
- text-align center;
- line-height:100rpx;
- font-size:28rpx;
- margin:50rpx auto;
- border-radius:20rpx;
- }
- }
- </style>
|