基地设备总览取消选择地块，增加显示基地所有设备，优化点击事件

xiebin

2022-08-24 12ef397af7532693c8c9ca64911994c8fad628b1

基地设备总览取消选择地块，增加显示基地所有设备，优化点击事件

 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
                        // })
                    }
                })
            }
        }