alarmInfo.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554
  1. <!-- 停用 -->
  2. <template>
  3. <view class="alarm">
  4. <view class="alarm_t">
  5. <view class="alarm_t_t">
  6. <img src="@/images/icon_003.png">
  7. <text>2022-01-01 14:00:23</text>
  8. <text>待处理</text>
  9. </view>
  10. <view class="alarm_t_b">化学品名称-未领用带离实验室房间,请尽快确认。</view>
  11. </view>
  12. <view class="alarm_c">
  13. <view class="alarm_c_li">
  14. <text>位置:</text>
  15. <text>实验室名称-楼栋楼层房间号</text>
  16. </view>
  17. <view class="alarm_c_li">
  18. <text>气瓶规格:</text>
  19. <text>10L</text>
  20. </view>
  21. <view class="alarm_c_li">
  22. <text>气体余量:</text>
  23. <text>10Mpa</text>
  24. </view>
  25. <view class="alarm_c_li">
  26. <text>当前使用人:</text>
  27. <text>成双-13666554455</text>
  28. </view>
  29. <view class="alarm_c_li">
  30. <text>气瓶所有人:</text>
  31. <text>李妮妮-13256564545</text>
  32. </view>
  33. <view class="alarm_c_img">
  34. <view>报警抓拍:</view>
  35. <view>
  36. <img src="@/images/icon_01.png">
  37. <img src="@/images/icon_01.png">
  38. <img src="@/images/icon_01.png">
  39. <img src="@/images/icon_01.png">
  40. <img src="@/images/icon_01.png">
  41. <img src="@/images/icon_01.png">
  42. </view>
  43. </view>
  44. </view>
  45. <view class="alarm_b">
  46. <view class="alarm_b_l" @click="MonitorBtn()">查看监控</view>
  47. <view class="alarm_b_r" @click="voiceBtn()">语音广播</view>
  48. </view>
  49. <view class="shade-max-big-box" v-if="broadcastType">
  50. <view class="null-box" @click="voiceBtn()"></view>
  51. <!-- 语音广播-执行疏散 -->
  52. <view class="broadcast">
  53. <view class="broadcast_t">语音广播<label>选择喇叭位置</label></view>
  54. <!-- 按钮部分 -->
  55. <view class="trumpet-max-box">
  56. <view @click="trumpetClick(index)"
  57. class="trumpet-for-box" :class="item.type?'trumpet-color-a':'trumpet-color-b'"
  58. v-for="(item,index) in trumpetList" :key="index">
  59. <img src="@/images/icon_sskz_zc.png" v-if="!item.type">
  60. <img src="@/images/icon_sskz_xz.png" v-if="item.type">
  61. {{item.name}}
  62. </view>
  63. </view>
  64. <view class="broadcast_m">
  65. <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">
  66. {{liveType?'松开发送':'按住说话'}}
  67. </view>
  68. <view class="broadcast_m_b" v-if="!liveType">按住说话,录入广播内容</view>
  69. <view class="broadcast_m_b" v-if="liveType">松开发送,向上滑动取消发送</view>
  70. </view>
  71. </view>
  72. </view>
  73. </view>
  74. </template>
  75. <script>
  76. import { config,} from '@/api/request/config.js'
  77. import {getDeviceList,textParseUrlIps} from '@/api/index.js'
  78. export default {
  79. data() {
  80. return {
  81. form:{
  82. },
  83. broadcastType:false,
  84. //喇叭数据
  85. trumpetList:[],
  86. //广播相关
  87. liveType:false,
  88. sendLock: true, //发送锁,当为true时上锁,false时解锁发送
  89. recorderManager : wx.getRecorderManager(),
  90. //滑动记录
  91. startPoint:{},
  92. }
  93. },
  94. onLoad(option) {
  95. this.getDeviceList()
  96. },
  97. onShow(){
  98. },
  99. methods:{
  100. MonitorBtn(){
  101. // uni.navigateTo({
  102. // url:'/pages/alarmInfo/alarmInfoMonitor'
  103. // })
  104. },
  105. voiceBtn(){
  106. this.broadcastType = !this.broadcastType
  107. },
  108. //获取喇叭
  109. async getDeviceList(){
  110. let obj ={
  111. floorId:5,
  112. page:1,
  113. pageSize:100,
  114. };
  115. const {data} = await getDeviceList(obj)
  116. if(data.code == 200){
  117. for(let i=0;i<data.data.length;i++){
  118. data.data[i].type = false;
  119. }
  120. this.$set(this,'trumpetList',data.data)
  121. }
  122. },
  123. //点击选择喇叭
  124. trumpetClick(index){
  125. this.trumpetList[index].type = !this.trumpetList[index].type
  126. },
  127. //录制
  128. recordButton(e){
  129. console.log("按下")
  130. let self = this;
  131. let num = 0;
  132. for(let i=0;i<self.trumpetList.length;i++){
  133. if(self.trumpetList[i].type){
  134. num++
  135. }
  136. }
  137. if(num == 0){
  138. uni.showToast({
  139. title: '请选择喇叭',
  140. icon:"none",
  141. mask:true,
  142. duration: 2000
  143. });
  144. return
  145. }
  146. this.liveType=true;
  147. console.log('录制',e)
  148. this.startPoint = e.touches[0];//记录长按时开始点信息,后面用于计算上划取消时手指滑动的距离。
  149. const options = {
  150. duration: 10000,
  151. sampleRate: 16000,
  152. numberOfChannels: 1,
  153. encodeBitRate: 48000,
  154. format: 'mp3',
  155. frameSize: 50
  156. }
  157. this.recorderManager.start(options);//开始录音
  158. this.recorderManager.onStart(() => {
  159. console.log('recorder start')
  160. })
  161. this.recorderManager.onError((res) => {
  162. console.log(res);
  163. })
  164. wx.showToast({
  165. title: "正在录音,上划取消发送",
  166. icon: "none",
  167. duration: 60000//先定义个60秒,后面可以手动调用wx.hideToast()隐藏
  168. });
  169. this.sendLock = false;//长按时是不上锁的。
  170. },
  171. //取消
  172. cancelButton(e){
  173. console.log("移动")
  174. let self = this;
  175. let num = 0;
  176. for(let i=0;i<self.trumpetList.length;i++){
  177. if(self.trumpetList[i].type){
  178. num++
  179. }
  180. }
  181. if(num == 0){
  182. return
  183. }
  184. this.liveType=false;
  185. console.log('取消',e)
  186. let moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
  187. /* if (Math.abs(moveLenght) > 50) {
  188. wx.showToast({
  189. title: "松开手指,取消发送",
  190. icon: "none",
  191. duration: 60000
  192. });
  193. this.sendLock = true;//触发了上滑取消发送,上锁
  194. } else {
  195. wx.showToast({
  196. title: "正在录音,上划取消发送",
  197. icon: "none",
  198. duration: 60000
  199. });
  200. this.sendLock = false;//上划距离不足,依然可以发送,不上锁
  201. } */
  202. },
  203. //发送
  204. sendButton(e){
  205. console.log("松开")
  206. let self = this;
  207. let num = 0;
  208. for(let i=0;i<self.trumpetList.length;i++){
  209. if(self.trumpetList[i].type){
  210. num++
  211. }
  212. }
  213. if(num == 0){
  214. return
  215. }
  216. this.liveType=false;
  217. console.log('发送',e)
  218. wx.hideToast();//结束录音、隐藏Toast提示框
  219. this.recorderManager.stop();//结束录音
  220. this.recorderManager.onStop((res) => {
  221. if(!this.sendLock){
  222. console.log('1', this.recorderManager)
  223. this.uploadImg(res.tempFilePath);
  224. }
  225. console.log('停止录音', res.tempFilePath)
  226. console.log("sendLock",this.sendLock);
  227. })
  228. },
  229. //发送语音
  230. async textParseUrlIps(text){
  231. let self = this;
  232. let newList = [];
  233. for(let i=0;i<self.trumpetList.length;i++){
  234. if(self.trumpetList[i].type){
  235. let obj = {
  236. sn:self.trumpetList[i].deviceSn,
  237. port:self.trumpetList[i].port,
  238. deviceIp:self.trumpetList[i].deviceIp,
  239. type:"",
  240. name:"",
  241. speed:"",
  242. params:{
  243. tid:"",
  244. vol:"",
  245. urls:[]
  246. }
  247. };
  248. newList.push(obj);
  249. }
  250. }
  251. const {data} = await textParseUrlIps(newList,text)
  252. if(data.code == 200){
  253. uni.showToast({
  254. title: '发送成功',
  255. icon:"none",
  256. mask:true,
  257. duration: 2000
  258. });
  259. }
  260. },
  261. }
  262. }
  263. </script>
  264. <style lang="stylus" scoped>
  265. .alarm{
  266. height:100%;
  267. width:100%;
  268. display:flex;
  269. flex-direction:column;
  270. overflow-y:scroll;
  271. .alarm_t{
  272. padding: 0 20rpx;
  273. box-sizing: border-box;
  274. background: #fff;
  275. .alarm_t_t{
  276. display: flex;
  277. justify-content: flex-start;
  278. align-items: center;
  279. height: 80rpx;
  280. border-bottom: 1px solid #e0e0e0;
  281. >img{
  282. width: 30rpx;
  283. height: 30rpx;
  284. margin-right: 22rpx;
  285. }
  286. >text:nth-of-type(1){
  287. width: 586rpx;
  288. font-size: 28rpx;
  289. font-family: PingFang SC;
  290. font-weight: 500;
  291. color: #333333;
  292. line-height: 28rpx;
  293. }
  294. >text:nth-of-type(2){
  295. font-size: 24rpx;
  296. font-family: PingFang SC;
  297. font-weight: 500;
  298. color: #FF9C00;
  299. line-height: 28rpx;
  300. }
  301. }
  302. .alarm_t_b{
  303. font-size: 28rpx;
  304. font-family: PingFang SC;
  305. font-weight: 500;
  306. color: #666666;
  307. line-height: 120rpx;
  308. }
  309. }
  310. .alarm_c{
  311. margin: 20rpx;
  312. padding:0 16rpx;
  313. box-sizing: border-box;
  314. background: #FFFFFF;
  315. border-radius: 20rpx;
  316. .alarm_c_li{
  317. height: 80rpx;
  318. display: flex;
  319. justify-content: space-between;
  320. border-bottom: 1px solid #e0e0e0;
  321. >text{
  322. font-size: 28rpx;
  323. font-family: PingFang SC;
  324. font-weight: 500;
  325. color: #333333;
  326. line-height: 80rpx;
  327. }
  328. >text:nth-of-type(1){}
  329. >text:nth-of-type(2){
  330. color: #666666;
  331. }
  332. }
  333. .alarm_c_img{
  334. display: flex;
  335. justify-content: flex-start;
  336. margin-top: 30rpx;
  337. >view:nth-of-type(1){
  338. width: 184rpx;
  339. display: inline-block;
  340. font-size: 28rpx;
  341. font-family: PingFang SC;
  342. font-weight: 500;
  343. color: #333333;
  344. line-height: 28rpx;
  345. }
  346. >view:nth-of-type(2){
  347. flex: 1;
  348. display: flex;
  349. justify-content: flex-start;
  350. flex-wrap: wrap;
  351. >img{
  352. width: 150rpx;
  353. height: 150rpx;
  354. background: #FFFFFF;
  355. border-radius: 4rpx;
  356. margin-right: 14rpx;
  357. margin-bottom: 20rpx;
  358. }
  359. }
  360. }
  361. }
  362. .alarm_b{
  363. width: 650rpx;
  364. margin-left: 50rpx;
  365. font-size: 30rpx;
  366. font-family: PingFang SC;
  367. font-weight: 500;
  368. color: #FFFFFF;
  369. line-height: 100rpx;
  370. text-align: center;
  371. position: fixed;
  372. bottom: 20rpx;
  373. display: flex;
  374. justify-content: flex-start;
  375. .alarm_b_l{
  376. width: 325rpx;
  377. height: 100rpx;
  378. background: linear-gradient(-45deg, #FA9901, #F28E26);
  379. border-radius: 50rpx 0px 0px 50rpx;
  380. }
  381. .alarm_b_r{
  382. width: 325rpx;
  383. height: 100rpx;
  384. background: linear-gradient(-35deg, #309CFF, #0183FA);
  385. border-radius: 0px 50rpx 50rpx 0px;
  386. }
  387. }
  388. .shade-max-big-box{
  389. height:100%;
  390. width:100%;
  391. position fixed
  392. display flex;
  393. flex-direction column
  394. z-index:10;
  395. background :rgba(0,0,0,0.2);
  396. .null-box{
  397. flex:1;
  398. }
  399. /* 语音广播-执行疏散 */
  400. .broadcast{
  401. width: 100%;
  402. // height: 532rpx;
  403. background: #FFFFFF;
  404. border-top-left-radius :20rpx;
  405. border-top-right-radius :20rpx
  406. padding :22rpx 30rpx 30rpx;
  407. box-sizing :border-box;
  408. margin-top:20rpx;
  409. .broadcast_t{
  410. font-size: 30rpx;
  411. font-family: PingFang SC;
  412. font-weight: 500;
  413. color: #333333;
  414. line-height: 30rpx;
  415. >label{
  416. font-size: 24rpx;
  417. font-family: PingFang SC;
  418. font-weight: 500;
  419. color: #999999;
  420. line-height: 30rpx;
  421. margin-left :16rpx;
  422. }
  423. }
  424. .trumpet-max-box{
  425. display :flex;
  426. justify-content :flex-start;
  427. margin-top :22rpx;
  428. flex-wrap: wrap;
  429. .trumpet-for-box{
  430. display:inline-block;
  431. width:200rpx;
  432. height:60rpx;
  433. line-height:60rpx;
  434. font-size:24rpx;
  435. text-align center;
  436. cursor: pointer;
  437. overflow: hidden;
  438. border: 1rpx solid #E0E0E0;
  439. border-radius:10rpx;
  440. color: #E0E0E0;
  441. display :flex;
  442. justify-content :center;
  443. margin-right :20rpx;
  444. margin-bottom: 10rpx;
  445. >img{
  446. width:36rpx;
  447. height:34rpx;
  448. margin :12rpx 20rpx 0 25rpx;
  449. }
  450. }
  451. .trumpet-color-a{
  452. border:1px solid #0183FA;
  453. color:#0183FA;
  454. }
  455. .trumpet-color-b{
  456. border:1px solid #CCCCCC;
  457. color:#999;
  458. }
  459. }
  460. .broadcast_m{
  461. width :100%;
  462. .broadcast_m_t{
  463. width: 142rpx;
  464. height: 142rpx;
  465. margin :30rpx 0 0 258rpx;
  466. position :relative;
  467. font-size: 24rpx;
  468. font-family: PingFang SC;
  469. font-weight: 500;
  470. line-height: 170rpx;
  471. text-align center
  472. >img{
  473. width: 142rpx;
  474. height: 142rpx;
  475. position :absolute;
  476. }
  477. >label{
  478. width :100%;
  479. font-size: 24rpx;
  480. font-family: PingFang SC;
  481. font-weight: 500;
  482. color: #0183FA;
  483. line-height: 24rpx;
  484. display :inline-block;
  485. text-align :center;
  486. position :absolute;
  487. top:76rpx;
  488. }
  489. /* 按下 */
  490. .press_color{
  491. color: #FFFFFF;
  492. }
  493. /* 松开 */
  494. .slip_color{
  495. color: #0183FA;
  496. }
  497. }
  498. .broadcast_m_t_back_a{
  499. background:url(@/images/icon_sskz_skfs.png);
  500. background-size 100%
  501. color: #FFFFFF;
  502. }
  503. .broadcast_m_t_back_b{
  504. background:url(@/images/icon_sskz_azsh.png);
  505. background-size 100%
  506. color: #0183FA;
  507. }
  508. .broadcast_m_b{
  509. font-size: 24rpx;
  510. font-family: PingFang SC;
  511. font-weight: 500;
  512. color: #999999;
  513. line-height: 24rpx;
  514. text-align center;
  515. margin-top :14rpx;
  516. }
  517. }
  518. /* 疏散按钮 */
  519. .evacuation-button-box{
  520. width:650rpx;
  521. height:100rpx;
  522. background #0183FA
  523. color:#fff;
  524. text-align center;
  525. line-height:100rpx;
  526. font-size:28rpx;
  527. margin:88rpx auto 0;
  528. border-radius:20rpx;
  529. }
  530. }
  531. }
  532. }
  533. /deep/.input-value-border{
  534. display :none !important;
  535. }
  536. </style>