From 12ef397af7532693c8c9ca64911994c8fad628b1 Mon Sep 17 00:00:00 2001
From: xiebin <123456>
Date: Wed, 24 Aug 2022 11:47:14 +0800
Subject: [PATCH] 基地设备总览取消选择地块，增加显示基地所有设备，优化点击事件
---
src/views/equipment/index.vue | 212 ++++++++++++++++++++++++++++++++--------------------
1 files changed, 129 insertions(+), 83 deletions(-)
diff --git a/src/views/equipment/index.vue b/src/views/equipment/index.vue
index c1b8e23..3d7cedf 100644
--- a/src/views/equipment/index.vue
+++ b/src/views/equipment/index.vue
@@ -8,20 +8,21 @@
</span>
</div>
<div class="title">
- <el-select
- class="equipment-plot-select"
- v-model="plotName"
- placeholder="选择地块"
- @change="landChangeValue($event)"
- >
- <el-option
- v-for="(item, index) in plotList"
- :key="index"
- :label="item.landName"
- :value="item.id"
- ></el-option>
- </el-select>
-<!--
+ {{currentDetails.farmName}}
+<!-- <el-select-->
+<!-- class="equipment-plot-select"-->
+<!-- v-model="plotName"-->
+<!-- placeholder="选择地块"-->
+<!-- @change="landChangeValue($event)"-->
+<!-- >-->
+<!-- <el-option-->
+<!-- v-for="(item, index) in plotList"-->
+<!-- :key="index"-->
+<!-- :label="item.landName"-->
+<!-- :value="item.id"-->
+<!-- ></el-option>-->
+<!-- </el-select>-->
+<!--
<el-select
class="equipment-plot-select"
v-model="farmName"
@@ -217,14 +218,14 @@
<script>
+// import {
+// getLandList
+// } from '@/api/land/land'
+// import {
+// getFarmList
+// } from '@/api/farm/farmingrecord'
import {
- getLandList
-} from '@/api/land/land'
-import {
- getFarmList
-} from '@/api/farm/farmingrecord'
-import {
- getStationAndVideoByLandId,
+ getStationAndVideoByLandId, getStationAndVideoList,
getStationDateByStcd
} from '@/api/equipment/equipment'
import flvjs from 'flv.js'
@@ -234,12 +235,13 @@
export default {
data () {
return {
+ flvPlayer: null,
plotNameObj: {},
plotName: '',
plotList: [],
- farmNameObj:{},
- farmName:"",
- farmList:[],
+ farmNameObj: {},
+ farmName: '',
+ farmList: [],
currentDetails: {},
echartsBosShow: false,
vidList: [],
@@ -252,7 +254,9 @@
},
created () {
this.getParams()
- this.getLandList()
+ this.getStationAndVideoList()
+ // 获取地块列表，目前抛弃方法，换成显示基地名称
+ // this.getLandList()
// this.getFarmList()
},
mounted () {
@@ -402,17 +406,45 @@
this.echartsBosShow = true
},
// 地块change方法
- landChangeValue (value) {
- this.getStationAndVideoByLandId(value, 'ALL')
- },
+ // landChangeValue (value) {
+ // this.getStationAndVideoByLandId(value, 'ALL')
+ // },
+
// 获取地块列表
- getLandList () {
- const farmId = this.currentDetails.id
- getLandList(farmId).then((res) => {
- this.plotList = res.data.data
- this.plotNameObj = this.plotList[0]
- this.plotName = this.plotNameObj.id
- this.getStationAndVideoByLandId(this.plotNameObj.id, 'ALL')
+ // getLandList () {
+ // const farmId = this.currentDetails.id
+ // getLandList(farmId).then((res) => {
+ // this.plotList = res.data.data
+ // this.plotNameObj = this.plotList[0]
+ // this.plotName = this.plotNameObj.id
+ // this.getStationAndVideoByLandId(this.plotNameObj.id, 'ALL')
+ // })
+ // },
+
+ // 获取基地所有监控设备和监测设备
+ getStationAndVideoList () {
+ const params = {
+ type: 'ALL',
+ farmId: this.currentDetails.id
+ }
+ getStationAndVideoList(params).then((res) => {
+ if (res.data.code == 200) {
+ this.isChoose = 0
+ this.vidList = res.data.data.vidList
+ this.staList = res.data.data.staList
+ if (this.staList != null && this.staList.length > 0) {
+ this.$nextTick(() => {
+ this.getStationDateByStcd(this.staList[0].stcd)
+ })
+ } else {
+ this.stationData = []
+ }
+ if (this.vidList != null) {
+ this.$nextTick(() => {
+ this.playFlvVideo(this.vidList)
+ })
+ }
+ }
})
},
// farmChangeValue(value){
@@ -442,37 +474,38 @@
// },
// 根据地块id查询监控和监测设备
- getStationAndVideoByLandId (id, type) {
- getStationAndVideoByLandId(id, type).then((res) => {
- if (res.data.code == 200) {
- this.isChoose = 0
- this.vidList = res.data.data.vidList
- this.staList = res.data.data.staList
- if (this.staList != null && this.staList.length > 0) {
- this.$nextTick(() => {
- this.getStationDateByStcd(this.staList[0].stcd)
- })
- } else {
- this.stationData = []
- }
- if (this.vidList != null) {
- console.log('111112222', this.vidList[0].wssFlv)
- this.$nextTick(() => {
- this.playFlvVideo(this.vidList)
- console.log('555666777', this.vidList)//true
- })
- }
- }
- })
- },
+ // getStationAndVideoByLandId (id, type) {
+ // getStationAndVideoByLandId(id, type).then((res) => {
+ // if (res.data.code == 200) {
+ // this.isChoose = 0
+ // this.vidList = res.data.data.vidList
+ // this.staList = res.data.data.staList
+ // if (this.staList != null && this.staList.length > 0) {
+ // this.$nextTick(() => {
+ // this.getStationDateByStcd(this.staList[0].stcd)
+ // })
+ // } else {
+ // this.stationData = []
+ // }
+ // if (this.vidList != null) {
+ // this.$nextTick(() => {
+ // this.playFlvVideo(this.vidList)
+ // })
+ // }
+ // }
+ // })
+ // },
+
// 点击获取对应监测设备数据
getStaList (index, id) {
this.isChoose = index
- let loadingInstance = Loading.service({ fullscreen: false, target: '.nape-boxs', text: '正在加载数据...', background: '#091a2b' })
- this.getStationDateByStcd(id)
+ this.stationData = [] // 清空数据
+ const loadingInstance = Loading.service({ fullscreen: false, target: '.nape-boxs', text: '正在加载数据...', background: '#091a2b' })
+
this.$nextTick(() => {
setTimeout(() => {
loadingInstance.close()
+ this.getStationDateByStcd(id)
}, 2000)
})
},
@@ -538,32 +571,45 @@
},
// flv视频播放
playFlvVideo (arr) {
- console.log('778899', arr)//true
- console.log('77889900wssFlv', arr[0].wssFlv)//true
- console.log('77889900flv', arr[0].flv)//true
- console.log('77889900webRtc', arr[0].webRtc)//true
+ // 先销毁
+ if (this.flvPlayer) {
+ this.flvPlayer.pause()
+ this.flvPlayer.unload()
+ this.flvPlayer.detachMediaElement()
+ this.flvPlayer.destroy()
+ this.flvPlayer = null
+ }
if (flvjs.isSupported()) {
- var arr = this.vidList
+ // var arr = this.vidList
arr.forEach((item, index) => {
- var videoElement = document.getElementById(`videoElement${index}`)
- console.log('335588', arr[index].wssFlv)//true
- var flvPlayer = flvjs.createPlayer({
- type: 'flv',
- isLive: true,
- hasAudio: false,
- stashInitialSize: 128,
- url: arr[index].wssFlv
- // url: arr[index].wssFlv
- // url: 'https://www.ainfo.top:700/rtp/34020000001110000301_34020000001320000001.flv'
+ console.log(item.wssFlv,11112233)
+ if (item.wssFlv) {
+ var videoElement = document.getElementById(`videoElement${index}`)
+ this.flvPlayer = flvjs.createPlayer({
+ type: 'flv',
+ isLive: true,
+ hasAudio: false,
+ stashInitialSize: 128,
+ url: arr[index].wssFlv
+ // url: arr[index].wssFlv
+ // url: 'https://www.ainfo.top:700/rtp/34020000001110000301_34020000001320000001.flv'
-
- }, {
- enableStashBuffer: false,
- fixAudioTimestampGap: false
- })
- flvPlayer.attachMediaElement(videoElement)
- flvPlayer.load()
- flvPlayer.play()
+ }, {
+ enableStashBuffer: false,
+ fixAudioTimestampGap: false
+ })
+ this.flvPlayer.attachMediaElement(videoElement)
+ this.flvPlayer.load()
+ this.flvPlayer.play()
+ // 【flvjs播放器事件侦听】 关闭flv没有效果
+ // this.flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
+ // this.flvPlayer.pause()
+ // this.flvPlayer.unload()
+ // this.flvPlayer.detachMediaElement()
+ // this.flvPlayer.destroy()
+ // this.flvPlayer = null
+ // })
+ }
})
}
}
--
Gitblit v1.9.3