优化物联网总览页，增加历史数据查看

xiebin

2022-08-05 4ee429dd03b486e40fc8f76f4f5f0074de612a76

优化物联网总览页，增加历史数据查看

 src/api/land/land.js

@@ -75,8 +75,8 @@
        url: 'http://dev.jxpskj.com:8030/pyh-station/stationAndVideo/queryStationAndVideoByLandId',
        method: 'get',
        params: {
            'land_id': landId,
            'type': type,
            land_id: landId,
            type: type
        }
    })
}
@@ -86,9 +86,9 @@
        url: 'http://dev.jxpskj.com:8030/pyh-station/naturalFactors/findElementDataByTime',
        method: 'get',
        params: {
            'stcd': stcd,
            'startTime': startTime,
            'endTime': endTime,
            stcd: stcd,
            startTime: startTime,
            endTime: endTime
        }
    })
}
}

 src/views/equipment/index.vue

@@ -1,10 +1,4 @@
/*
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
 * @Last Modified by: Morpheus
 * @Last Modified time: 2022-07-14 18:00:40
* 驾驶舱
*/

<template>
    <div class="container">
        <div class="current-header">
@@ -92,12 +86,12 @@
                                <div class="bottom">
                                    <div class="l">
                                        <i class="el-icon-time"></i>
                                        <span class="old-btn" @click="historyData">历史数据</span>
                                        <span class="old-btn" @click="historyData(item)">历史数据</span>
                                    </div>

                                    <div
                                        class="r"
                                    >更新时间：{{item.valueDataList[item.valueDataList.length-1].startTime}}</div>
                                    >{{tmpTDiff(item.valueDataList[item.valueDataList.length-1].startTime)}}天前更新</div>
                                </div>
                            </div>
                            <div v-for="(item, index) in stationData.soliList" :key="index">
@@ -117,13 +111,13 @@
                                <div class="bottom">
                                    <div class="l">
                                        <i class="el-icon-time"></i>
                                        <span class="old-btn" @click="historyData">历史数据</span>
                                        <span class="old-btn" @click="historyData(item)">历史数据</span>
                                    </div>

                                    <div class="r">48天前更新</div>
                                    <div class="r">{{tmpTDiff(item.valueDataList[item.valueDataList.length-1].startTime)}}天前更新</div>
                                </div>
                            </div>
                            <div v-for="(item, index) in stationData.artList" :key="index">
                            <div v-for="(item, index) in stationData.airList" :key="index">
                                <div class="top">
                                    <div class="l">
                                        <img src="/img/icon/wd-icon.png" alt />
@@ -140,10 +134,10 @@
                                <div class="bottom">
                                    <div class="l">
                                        <i class="el-icon-time"></i>
                                        <span class="old-btn" @click="historyData">历史数据</span>
                                        <span class="old-btn" @click="historyData(item)">历史数据</span>
                                    </div>

                                    <div class="r">48天前更新</div>
                                    <div class="r">{{tmpTDiff(item.valueDataList[item.valueDataList.length-1].startTime)}}天前更新</div>
                                </div>
                            </div>
                            <div v-for="(item, index) in stationData.waterList" :key="index">
@@ -163,22 +157,22 @@
                                <div class="bottom">
                                    <div class="l">
                                        <i class="el-icon-time"></i>
                                        <span class="old-btn" @click="historyData">历史数据</span>
                                        <span class="old-btn" @click="historyData(item)">历史数据</span>
                                    </div>

                                    <div
                                        class="r"
                                    >更新时间：{{item.valueDataList[item.valueDataList.length-1].startTime}}</div>
                                    >{{tmpTDiff(item.valueDataList[item.valueDataList.length-1].startTime)}}天前更新</div>
                                </div>
                            </div>
                            <!-- <div class="hasNostaList">
                            <div class="hasNostaList" v-if="staList.length == 0 || !isNostaList">
                                <img
                                    src="../../../public/img/nodata.png"
                                    width="160%"
                                    height="200%"
                                    alt
                                />
                            </div>-->
                            </div>
                        </div>
                    </div>
                </div>~
@@ -208,30 +202,35 @@
} from '@/api/land/land'
import { nextTick } from 'vue'
import flvjs from 'flv.js'
import dateUtils from '@/utils/dateUtils' // 1.先引入

export default {
    data () {
        return {
            plotNameObj: {},
            plotName: "",
            plotName: '',
            plotList: [],
            currentDetails: {},
            echartsBosShow: false,
            vidList: [],
            staList: [],
            isChoose: '',
            stationData: { soilList: [] }
            stationData: { soilList: [] },
            listTmp: [],
            isNostaList: false// 是否有监测数据
        }
    },
    created () {
        this.getParams()
        this.getLandList()

    },
    mounted () {

    },
    methods: {
        tmpTDiff (start) {
            return dateUtils.tmpTDiff(start.substring(0, 10), new Date())
        },
        prev () {
            this.$router.go(-1)
        },
@@ -359,74 +358,124 @@
            option && myChart.setOption(option)
        },

        historyData () {
            this.initLine('EchartsBox', '单位：℃', ['03-14 16:00', '03-15 16:00', '03-16 16:00', '03-17 16:00', '03-18 16:00', '03-19 16:00'], [20, 24, 23, 25, 30, 18])
        historyData (item) {
            var valueDataList = item.valueDataList
            var values = []
            var names = []
            valueDataList.forEach(item => {
                values.push(item.value)
                names.push(item.startTime.substring(5,10) + ' ' + item.startTime.substring(11) + ':00')
            })
            this.initLine('EchartsBox', '单位' + item.unit, names, values)

            this.echartsBosShow = true
        },
        //地块change方法
        // 地块change方法
        landChangeValue (value) {
            this.getStationAndVideoByLandId(value, 'ALL')
        },
        //获取地块列表
        // 获取地块列表
        getLandList () {
            const farmId = this.currentDetails.id
            getLandList(this.$store.state.user.user.dept_id, farmId).then((res) => {
            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')
            })
        },
        //根据地块id查询监控和监测设备
        // 根据地块id查询监控和监测设备
        getStationAndVideoByLandId (id, type) {
            getStationAndVideoByLandId(id, type).then((res) => {
                this.vidList = res.data.data.vidList
                this.staList = res.data.data.staList
                if (this.staList.length > 0) {
                    this.$nextTick(() => {
                        this.getStationDateByStcd(this.staList[0].stcd)
                    })
                } else {
                    this.stationData = []
                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.$nextTick(() => {
                    this.playFlvVideo()
                })
            })

        },
        // 点击获取对应监测设备数据
        getStaList (index, id) {
            this.isChoose = index
            this.getStationDateByStcd(id)

        },
        // 根据设备号获取监测数据
        getStationDateByStcd (stcd) {
            const date = new Date()
            const year = date.getFullYear()
            const month = date.getMonth() + 1
            const strDate = date.getDate() - 1
            const timeCount = new Date().getTime() - 90 * 24 * 60 * 60 * 1000//3个月前的时间戳
            const date1 = new Date(timeCount)
            const year1 = date1.getFullYear()
            const month1 = date1.getMonth() + 1
            const strDate1 = date1.getDate() - 1
            const startTime = `${year1}-${month1}-${strDate1} 00:00:01`
            const endTime = `${year}-${month}-${strDate} 23:59:59`
            // const startTime = dateUtils.getSpecifyMonthDate(3)// 获取3个月前时间
            const startTime = dateUtils.getSpecifyDayDate(10)// 获取10天前时间
            const endTime = dateUtils.getDayLast()// 获取今天最后日期
            getStationDateByStcd(stcd, startTime, endTime).then((res) => {
                // 遍历气象大集合
                res.data.data.weatherList.forEach(function (item, index) {
                    // 把气象无效数据过滤掉
                    var list = item.valueDataList.filter(vaItem => {
                        return vaItem.value != '0.0'
                    })
                    // 如果没有找到就不做操作
                    if (list.length > 0) {
                        item.valueDataList = list
                    }
                })
                // 遍历水质
                res.data.data.waterList.forEach(function (item, index) {
                    // 把水质无效数据过滤掉
                    var list = item.valueDataList.filter(vaItem => {
                        return vaItem.value != '0.0'
                    })
                    // 如果没有找到就不做操作
                    if (list.length > 0) {
                        item.valueDataList = list
                    }
                })
                // 遍历土壤
                res.data.data.soilList.forEach(function (item, index) {
                    // 把水质无效数据过滤掉
                    var list = item.valueDataList.filter(vaItem => {
                        return vaItem.value != '0.0'
                    })
                    // 如果没有找到就不做操作
                    if (list.length > 0) {
                        item.valueDataList = list
                    }
                })
                // 遍历空气
                res.data.data.airList.forEach(function (item, index) {
                    // 把水质无效数据过滤掉
                    var list = item.valueDataList.filter(vaItem => {
                        return vaItem.value != '0.0'
                    })
                    // 如果没有找到就不做操作
                    if (list.length > 0) {
                        item.valueDataList = list
                    }
                })

                this.stationData = res.data.data
                if (this.stationData.soilList.length == 0 && this.stationData.weatherList.length == 0 &&
                        this.stationData.airList.length == 0 && this.stationData.waterList.length == 0) {
                    this.isNostaList = false
                } else {
                    this.isNostaList = true
                }
            })
        },
        // flv视频播放
        playFlvVideo () {

            if (flvjs.isSupported()) {

                var arr = this.vidList
                arr.forEach((item, index) => {

                    var videoElement = document.getElementById(`videoElement${index}`)

                    var flvPlayer = flvjs.createPlayer({
@@ -437,15 +486,13 @@
                        url: 'wss://www.ainfo.top:700/rtp/34020000001110000105_34020000001310000002.flv'
                    }, {
                        enableStashBuffer: false,
                        fixAudioTimestampGap: false,
                        fixAudioTimestampGap: false
                    })
                    flvPlayer.attachMediaElement(videoElement)
                    flvPlayer.load()
                    flvPlayer.play()
                })

            }

        }

    }