|
@@ -1,563 +0,0 @@
|
|
|
-<!-- 停用 -->
|
|
|
-<template>
|
|
|
- <view class="alarm">
|
|
|
- <view class="alarm_t">
|
|
|
- <view class="alarm_t_t">
|
|
|
- <img src="@/images/icon_003.png"/>
|
|
|
- <text>2022-01-01 14:00:23</text>
|
|
|
- <text>待处理</text>
|
|
|
- </view>
|
|
|
- <view class="alarm_t_b">化学品名称-未领用带离实验室房间,请尽快确认。</view>
|
|
|
- </view>
|
|
|
- <view class="alarm_c">
|
|
|
- <view class="alarm_c_li">
|
|
|
- <text>位置:</text>
|
|
|
- <text>实验室名称-楼栋楼层房间号</text>
|
|
|
- </view>
|
|
|
- <view class="alarm_c_li">
|
|
|
- <text>气瓶规格:</text>
|
|
|
- <text>10L</text>
|
|
|
- </view>
|
|
|
- <view class="alarm_c_li">
|
|
|
- <text>气体余量:</text>
|
|
|
- <text>10Mpa</text>
|
|
|
- </view>
|
|
|
- <view class="alarm_c_li">
|
|
|
- <text>当前使用人:</text>
|
|
|
- <text>成双-13666554455</text>
|
|
|
- </view>
|
|
|
- <view class="alarm_c_li">
|
|
|
- <text>气瓶所有人:</text>
|
|
|
- <text>李妮妮-13256564545</text>
|
|
|
- </view>
|
|
|
- <view class="alarm_c_img">
|
|
|
- <view>报警抓拍:</view>
|
|
|
- <view>
|
|
|
- <img src="@/images/icon_01.png"/>
|
|
|
- <img src="@/images/icon_01.png"/>
|
|
|
- <img src="@/images/icon_01.png"/>
|
|
|
- <img src="@/images/icon_01.png"/>
|
|
|
- <img src="@/images/icon_01.png"/>
|
|
|
- <img src="@/images/icon_01.png"/>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="alarm_b">
|
|
|
- <view class="alarm_b_l" @click="MonitorBtn()">查看监控</view>
|
|
|
- <view class="alarm_b_r" @click="voiceBtn()">语音广播</view>
|
|
|
- </view>
|
|
|
- <view class="shade-max-big-box" v-if="broadcastType">
|
|
|
- <view class="null-box" @click="voiceBtn()"></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">
|
|
|
-
|
|
|
- {{liveType?'松开发送':'按住说话'}}
|
|
|
- </view>
|
|
|
- <view class="broadcast_m_b" v-if="!liveType">按住说话,录入广播内容</view>
|
|
|
- <view class="broadcast_m_b" v-if="liveType">松开发送,向上滑动取消发送</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- import { config,} from '@/api/request/config.js'
|
|
|
- import {getDeviceList,textParseUrlIps} from '@/api/index.js'
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- form:{
|
|
|
-
|
|
|
- },
|
|
|
- broadcastType:false,
|
|
|
- //喇叭数据
|
|
|
- trumpetList:[],
|
|
|
- //广播相关
|
|
|
- liveType:false,
|
|
|
- sendLock: true, //发送锁,当为true时上锁,false时解锁发送
|
|
|
- recorderManager : wx.getRecorderManager(),
|
|
|
- //滑动记录
|
|
|
- startPoint:{},
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- this.getDeviceList()
|
|
|
- },
|
|
|
- onShow(){
|
|
|
-
|
|
|
- },
|
|
|
- methods:{
|
|
|
- MonitorBtn(){
|
|
|
- // uni.navigateTo({
|
|
|
- // url:'/pages/alarmInfo/alarmInfoMonitor'
|
|
|
- // })
|
|
|
- },
|
|
|
- voiceBtn(){
|
|
|
- this.broadcastType = !this.broadcastType
|
|
|
- },
|
|
|
- //获取喇叭
|
|
|
- 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)
|
|
|
- }
|
|
|
- },
|
|
|
- //点击选择喇叭
|
|
|
- trumpetClick(index){
|
|
|
- this.trumpetList[index].type = !this.trumpetList[index].type
|
|
|
- // let _this=this;
|
|
|
- // if(_this.trumpetList[index].type==true){
|
|
|
- // _this.trumpetList.forEach(function(item2) {
|
|
|
- // if(item2.deviceSn==_this.trumpetList[index].deviceSn){
|
|
|
- // item2.type=true
|
|
|
- // }else{
|
|
|
- // item2.type=false
|
|
|
- // }
|
|
|
- // })
|
|
|
- // }
|
|
|
- },
|
|
|
- //录制
|
|
|
- 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);
|
|
|
- })
|
|
|
- },
|
|
|
- //发送语音
|
|
|
- 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:"",
|
|
|
- urls:[]
|
|
|
- }
|
|
|
- };
|
|
|
- newList.push(obj);
|
|
|
- }
|
|
|
- }
|
|
|
- const {data} = await textParseUrlIps(newList,text)
|
|
|
- if(data.code == 200){
|
|
|
- uni.showToast({
|
|
|
- title: '发送成功',
|
|
|
- icon:"none",
|
|
|
- mask:true,
|
|
|
- duration: 2000
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="stylus" scoped>
|
|
|
- .alarm{
|
|
|
- height:100%;
|
|
|
- width:100%;
|
|
|
- display:flex;
|
|
|
- flex-direction:column;
|
|
|
- overflow-y:scroll;
|
|
|
- .alarm_t{
|
|
|
- padding: 0 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background: #fff;
|
|
|
- .alarm_t_t{
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- height: 80rpx;
|
|
|
- border-bottom: 1px solid #e0e0e0;
|
|
|
- >img{
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- margin-right: 22rpx;
|
|
|
- }
|
|
|
- >text:nth-of-type(1){
|
|
|
- width: 586rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- line-height: 28rpx;
|
|
|
- }
|
|
|
- >text:nth-of-type(2){
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #FF9C00;
|
|
|
- line-height: 28rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .alarm_t_b{
|
|
|
- font-size: 28rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #666666;
|
|
|
- line-height: 120rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .alarm_c{
|
|
|
- margin: 20rpx;
|
|
|
- padding:0 16rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 20rpx;
|
|
|
- .alarm_c_li{
|
|
|
- height: 80rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- border-bottom: 1px solid #e0e0e0;
|
|
|
- >text{
|
|
|
- font-size: 28rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- line-height: 80rpx;
|
|
|
- }
|
|
|
- >text:nth-of-type(1){}
|
|
|
- >text:nth-of-type(2){
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- }
|
|
|
- .alarm_c_img{
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- margin-top: 30rpx;
|
|
|
- >view:nth-of-type(1){
|
|
|
- width: 184rpx;
|
|
|
- display: inline-block;
|
|
|
- font-size: 28rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- line-height: 28rpx;
|
|
|
- }
|
|
|
- >view:nth-of-type(2){
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
- >img{
|
|
|
- width: 150rpx;
|
|
|
- height: 150rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 4rpx;
|
|
|
- margin-right: 14rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- .alarm_b{
|
|
|
- width: 650rpx;
|
|
|
- margin-left: 50rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 100rpx;
|
|
|
- text-align: center;
|
|
|
- position: fixed;
|
|
|
- bottom: 20rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- .alarm_b_l{
|
|
|
- width: 325rpx;
|
|
|
- height: 100rpx;
|
|
|
- background: linear-gradient(-45deg, #FA9901, #F28E26);
|
|
|
- border-radius: 50rpx 0px 0px 50rpx;
|
|
|
-
|
|
|
- }
|
|
|
- .alarm_b_r{
|
|
|
- width: 325rpx;
|
|
|
- height: 100rpx;
|
|
|
- background: linear-gradient(-35deg, #309CFF, #0183FA);
|
|
|
- border-radius: 0px 50rpx 50rpx 0px;
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- /deep/.input-value-border{
|
|
|
- display :none !important;
|
|
|
- }
|
|
|
-</style>
|