|
|
@@ -0,0 +1,553 @@
|
|
|
+<!-- 停用 -->
|
|
|
+<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
|
|
|
+ },
|
|
|
+ //录制
|
|
|
+ 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>
|
dedsudiyu