农场物联网设备接口对接，代码优化

xiebin

2022-08-06 aa35bbede3a84122862526c43184ac26177e8679

农场物联网设备接口对接，代码优化

 src/api/equipment/equipment.js

New file
@@ -0,0 +1,47 @@
import request from '@/router/axios'

// 获取在线设备信息
export const getStationAndVideoCount = (params) => {
    return request({
        url: 'http://dev.jxpskj.com:8030/pyh-station/stationAndVideo/count',
        method: 'get',
        params: {
            ...params
        }
    })
}

// 获取监控/监测设备列表
export const getStationAndVideoList = (params) => {
    return request({
        url: 'http://dev.jxpskj.com:8030/pyh-station/stationAndVideo/queryStationAndVideoInfo',
        method: 'get',
        params: {
            ...params
        }
    })
}

// 根据地块获取监测监控设备
export const getStationAndVideoByLandId = (landId, type) => {
    return request({
        url: 'http://dev.jxpskj.com:8030/pyh-station/stationAndVideo/queryStationAndVideoByLandId',
        method: 'get',
        params: {
            land_id: landId,
            type: type
        }
    })
}
// 根据设备号获取监测设备数据
export const getStationDateByStcd = (stcd, startTime, endTime) => {
    return request({
        url: 'http://dev.jxpskj.com:8030/pyh-station/naturalFactors/findElementDataByTime',
        method: 'get',
        params: {
            stcd: stcd,
            startTime: startTime,
            endTime: endTime
        }
    })
}

 src/api/farm/farmingrecord.js

@@ -299,24 +299,4 @@
        }
    })
}
// 获取在线设备信息
export const getStationAndVideoCount = (params) => {
    return request({
        url: 'http://dev.jxpskj.com:8030/pyh-station/stationAndVideo/count',
        method: 'get',
        params: {
            ...params
        }
    })
}
// 获取监控/监测设备列表
export const getStationAndVideoList = (params) => {
    return request({
        url: 'http://dev.jxpskj.com:8030/pyh-station/stationAndVideo/queryStationAndVideoInfo',
        method: 'get',
        params: {
            ...params
        }
    })
}


 src/api/land/land.js

@@ -68,27 +68,3 @@
        }
    })
}

// 根据地块获取监测监控设备
export const getStationAndVideoByLandId = (landId, type) => {
    return request({
        url: 'http://dev.jxpskj.com:8030/pyh-station/stationAndVideo/queryStationAndVideoByLandId',
        method: 'get',
        params: {
            land_id: landId,
            type: type
        }
    })
}
// 根据设备号获取监测设备数据
export const getStationDateByStcd = (stcd, startTime, endTime) => {
    return request({
        url: 'http://dev.jxpskj.com:8030/pyh-station/naturalFactors/findElementDataByTime',
        method: 'get',
        params: {
            stcd: stcd,
            startTime: startTime,
            endTime: endTime
        }
    })
}

 src/views/equipment/index.vue

@@ -69,6 +69,7 @@
                            </ul>
                        </div>
                        <div class="nape-boxs">
                            <!-- 气象监测 -->
                            <div v-for="(item, index) in stationData.weatherList" :key="index">
                                <div class="top">
                                    <div class="l">
@@ -94,6 +95,7 @@
                                    >{{tmpTDiff(item.valueDataList[item.valueDataList.length-1].startTime)}}天前更新</div>
                                </div>
                            </div>
                            <!-- 土壤监测 -->
                            <div v-for="(item, index) in stationData.soliList" :key="index">
                                <div class="top">
                                    <div class="l">
@@ -119,6 +121,7 @@
                                    >{{tmpTDiff(item.valueDataList[item.valueDataList.length-1].startTime)}}天前更新</div>
                                </div>
                            </div>
                            <!-- 空气监测 -->
                            <div v-for="(item, index) in stationData.airList" :key="index">
                                <div class="top">
                                    <div class="l">
@@ -144,6 +147,7 @@
                                    >{{tmpTDiff(item.valueDataList[item.valueDataList.length-1].startTime)}}天前更新</div>
                                </div>
                            </div>
                            <!-- 水质监测 -->
                            <div v-for="(item, index) in stationData.waterList" :key="index">
                                <div class="top">
                                    <div class="l">
@@ -200,10 +204,12 @@
<script>

import {
    getLandList,
    getStationAndVideoByLandId,
    getStationDateByStcd
    getLandList
} from '@/api/land/land'
import {
 getStationAndVideoByLandId,
    getStationDateByStcd
} from '@/api/equipment/equipment'
import { nextTick } from 'vue'
import flvjs from 'flv.js'
import dateUtils from '@/utils/dateUtils' // 1.先引入
@@ -363,9 +369,9 @@
        },

        historyData (item) {
            var valueDataList = item.valueDataList
            var values = []
            var names = []
            const valueDataList = item.valueDataList
            const values = []
            const names = []
            valueDataList.forEach(item => {
                values.push(item.value)
                names.push(item.startTime.substring(5, 10) + ' ' + item.startTime.substring(11) + ':00')

 src/views/farm/index.vue

@@ -71,7 +71,7 @@
            </div>

            <div v-show="ncjscz == 'cz'" class="lists-box nscz">
                <div v-for="(item, index) in farmRecordList" :key="index">
                <div v-for="(item, index) in farmRecordList" :key="'item'+index">
                    <div class="t-border"></div>
                    <div class="t-item">
                        <div>{{item.typeName}}</div>
@@ -117,7 +117,7 @@
            </div>

            <div v-show="zydksb == 'zy'" class="lists-box dk">
                <div v-for="(item, index) in farmPlantList" :key="index">
                <div v-for="(item, index) in farmPlantList" :key="'farmPlantList'+index">
                    <div class="title">
                        <img :src="item.url" alt />
                        {{item.strainName}}
@@ -130,7 +130,7 @@
            </div>

            <div v-show="zydksb == 'dk'" class="lists-box dk">
                <div v-for="(item, index) in plotLists" :key="index" @click="setCenter(item)">
                <div v-for="(item, index) in plotLists" :key="'plotLists'+index" @click="setCenter(item)">
                    <div class="title">
                        <img :src="item.url" alt />
                        {{item.landName}}
@@ -143,24 +143,35 @@
            </div>

            <div v-show="zydksb =='sb'" class="lists-box sb">
                <div class="lists-item" @click="goToJkDetail">
                    <div class="title">
                        <img src="/img/icon/jk.png" alt />
                        监控监控监控监控监控监控
                    </div>
                    <div class="type off">在线</div>
                </div>
                <div
                    v-for="(item, index) in equipmentList"
                    :key="index"
                    class="lists-item"
                    @click="goToDetail"
                >
                <!-- 视频监控数据 -->
                <div v-for="(item, index) in equipmentList.vidList"
                     :key="'vidList'+index"
                     class="lists-item"
                     @click="goToJkDetail(item)">
                    <div class="title">
                        <img src="/img/icon/jk.png" alt />
                        {{item.name}}
                    </div>
                    <div class="type off">在线</div>
                    <div class="type on" v-if="item.onLine == 0">在线</div>
                    <div class="type off" v-else>离线</div>
                </div>
                <!-- 监测设备数据 -->
                <div
                    v-for="(item, index) in equipmentList.staList"
                    :key="'staList' + index"
                    class="lists-item"
                    @click="goToDetail(item)"
                >
                    <div class="title">
                        <img v-if="item.dictTypeNum == 1" src="/img/icon/qx.png" alt />
                        <img v-else-if="item.dictTypeNum == 2" src="/img/icon/qx.png" alt />
                        <img v-else-if="item.dictTypeNum == 3" src="/img/icon/sz.png" alt />
                        <img v-else-if="item.dictTypeNum == 4" src="/img/icon/tr.png" alt />
                        <img v-else src="/img/icon/qx.png" alt />
                        {{item.name}}
                    </div>
                    <div class="type on" v-if="item.onLine == 0">在线</div>
                    <div class="type off" v-else>离线</div>
                </div>
            </div>
        </div>
@@ -217,7 +228,7 @@
                        <div>操作</div>
                    </div>
                    <div class="t-body">
                        <div class="table-list" v-for="(item, index) in sourceList" :key="index">
                        <div class="table-list" v-for="(item, index) in sourceList" :key="'sourceList'+index">
                            <div class="sym-style">
                                <div class="l">
                                    <img src="/img/icon/sym.png" alt />
@@ -268,7 +279,7 @@
            </template>
            <template slot="public-box-content">
                <div v-show="plotDetailsNape == 'zypz'" class="box zypz-box">
                    <div v-for="(item, index) in plotDetailsPlantList" :key="index">
                    <div v-for="(item, index) in plotDetailsPlantList" :key="'plotDetailsPlantList'+index">
                        <img class="logo" :src="item.url" alt />
                        <div class="titles-box">
                            <div class="title">{{item.strainName}}</div>
@@ -279,7 +290,7 @@
                    </div>
                </div>
                <div v-show="plotDetailsNape == 'nscz'" class="box nscz-box">
                    <div v-for="(item, index) in plotDetailsRecordList" :key="index">
                    <div v-for="(item, index) in plotDetailsRecordList" :key="'plotDetailsRecordList'+index">
                        <div class="t-border"></div>
                        <div class="t-item">
                            <div class="type">{{item.typeName}}</div>
@@ -322,7 +333,7 @@
            :className="'public-equirment-station-details'"
        >
            <template slot="public-box-header">
                <div>谷米田庄1 号土壤墒情肥力监测</div>
                <div>{{staInfo.name}}</div>
                <img
                    @click="staionDetail = false"
                    src="../../../public/img/icon/close.png"
@@ -330,58 +341,120 @@
                />
            </template>
            <template slot="public-box-content">
                <div class="item">
                <!-- 气象监测 -->
                <div class="item" v-for="(item, staListIndex) in stationData.weatherList"
                     :key="'weatherList' + staListIndex">
                    <div class="itemTitle">
                        <img src="../../../public/img/icon/icon_3788.png" alt />
                        <div class="type">
                            <h1>太阳能板电压1111</h1>
                            <span>单位：V</span>
                            <h1>{{item.name}}</h1>
                            <span>单位：{{item.unit}}</span>
                        </div>
                        <div class="data">21.03</div>
                        <div class="data">{{item.valueDataList[item.valueDataList.length-1].value}}</div>
                        <img
                            src="../../../public/img/icon/up_menu.png"
                            class="openMenuIcon"
                            @click="showEchart(1)"
                            v-if="echartIsShow && jcIndex == 1"
                            @click="showEchart(staListIndex,null)"
                            v-if="echartIsShow && jcIndex == staListIndex"
                            alt
                        />
                        <img
                            src="../../../public/img/icon/down_menu.png"
                            class="openMenuIcon"
                            @click="showEchart(1)"
                            @click="showEchart(staListIndex,item)"
                            v-else
                            alt
                        />
                    </div>
                    <div class="echart" v-show="echartIsShow && jcIndex == 1">
                        <div id="EchartsBox1" class="EchartsBox_div"></div>
                    <div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
                        <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
                    </div>
                </div>
                <div class="item">
                <!-- 土壤监测 -->
                <div class="item" v-for="(item, staListIndex) in stationData.soliList"
                     :key="'soliList' + staListIndex">
                    <div class="itemTitle">
                        <img src="../../../public/img/icon/icon_3788.png" alt />
                        <div class="type">
                            <h1>太阳能板电压22222</h1>
                            <span>单位：V</span>
                            <h1>{{item.name}}</h1>
                            <span>单位：{{item.unit}}</span>
                        </div>
                        <div class="data">21.03</div>
                        <div class="data">{{item.valueDataList[item.valueDataList.length-1].value}}</div>
                        <img
                            src="../../../public/img/icon/up_menu.png"
                            class="openMenuIcon"
                            @click="showEchart(2)"
                            v-if="echartIsShow && jcIndex == 2"
                            alt
                                src="../../../public/img/icon/up_menu.png"
                                class="openMenuIcon"
                                @click="showEchart(staListIndex,null)"
                                v-if="echartIsShow && jcIndex == staListIndex"
                                alt
                        />
                        <img
                            src="../../../public/img/icon/down_menu.png"
                            class="openMenuIcon"
                            @click="showEchart(2)"
                            v-else
                            alt
                                src="../../../public/img/icon/down_menu.png"
                                class="openMenuIcon"
                                @click="showEchart(staListIndex,item)"
                                v-else
                                alt
                        />
                    </div>
                    <div class="echart" v-show="echartIsShow && jcIndex == 2">
                        <div id="EchartsBox2" class="EchartsBox_div"></div>
                    <div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
                        <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
                    </div>
                </div>
                <!-- 空气监测 -->
                <div class="item" v-for="(item, staListIndex) in stationData.airList"
                     :key="'airList' + staListIndex">
                    <div class="itemTitle">
                        <img src="../../../public/img/icon/icon_3788.png" alt />
                        <div class="type">
                            <h1>{{item.name}}</h1>
                            <span>单位：{{item.unit}}</span>
                        </div>
                        <div class="data">{{item.valueDataList[item.valueDataList.length-1].value}}</div>
                        <img
                                src="../../../public/img/icon/up_menu.png"
                                class="openMenuIcon"
                                @click="showEchart(staListIndex,null)"
                                v-if="echartIsShow && jcIndex == staListIndex"
                                alt
                        />
                        <img
                                src="../../../public/img/icon/down_menu.png"
                                class="openMenuIcon"
                                @click="showEchart(staListIndex,item)"
                                v-else
                                alt
                        />
                    </div>
                    <div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
                        <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
                    </div>
                </div>
                <!-- 水质监测 -->
                <div class="item" v-for="(item, staListIndex) in stationData.waterList"
                     :key="'waterList' + staListIndex">
                    <div class="itemTitle">
                        <img src="../../../public/img/icon/icon_3788.png" alt />
                        <div class="type">
                            <h1>{{item.name}}</h1>
                            <span>单位：{{item.unit}}</span>
                        </div>
                        <div class="data">{{item.valueDataList[item.valueDataList.length-1].value}}</div>
                        <img
                                src="../../../public/img/icon/up_menu.png"
                                class="openMenuIcon"
                                @click="showEchart(staListIndex,null)"
                                v-if="echartIsShow && jcIndex == staListIndex"
                                alt
                        />
                        <img
                                src="../../../public/img/icon/down_menu.png"
                                class="openMenuIcon"
                                @click="showEchart(staListIndex,item)"
                                v-else
                                alt
                        />
                    </div>
                    <div class="echart" v-show="echartIsShow && jcIndex == staListIndex">
                        <div :id="'EchartsBox'+staListIndex" class="EchartsBox_div"></div>
                    </div>
                </div>
            </template>
@@ -393,7 +466,7 @@
            :className="'public-equirment-vid-details'"
        >
            <template slot="public-box-header">
                <div>4号大鹏摄像头</div>
                <div>{{vidInfo.name}}</div>
                <img
                    @click="JkDetail = false"
                    src="../../../public/img/icon/close.png"
@@ -416,9 +489,10 @@
import {
    getLandList,
    getFarmingRecordList,
    getFarmPlantList,
    getStationAndVideoList
    getFarmPlantList
} from '@/api/farm/farmingrecord'
import dateUtils from '@/utils/dateUtils'
import { getStationAndVideoList, getStationDateByStcd } from '@/api/equipment/equipment'

export default {
    data () {
@@ -453,7 +527,11 @@
            // 监测设备echart展示
            echartIsShow: false,
            // 监测列表index
            jcIndex: 0
            jcIndex: 0,
            flvPlayer: null,
            vidInfo: {}, // 视频数据
            staInfo: {}, // 监测数据
            stationData: {} // 监测详细数据
        }
    },
    created () {
@@ -590,19 +668,22 @@
            var that = this
            getStationAndVideoList({ type: 'ALL', farmId: this.currentDetails.id }).then((res) => {
                if (JSON.stringify(res.data) != '{}' && res.data.data) {
                    that.equipmentList = res.data.data.staList
                    that.equipmentList = res.data.data
                }
            })
        },
        //跳转 监测 设备详情窗口
        goToDetail () {
        // 跳转 监测 设备详情窗口
        goToDetail (item) {
            this.staInfo = item
            this.getStationDateByStcd(item.stcd)
            this.staionDetail = true
        },
        //跳转 监控 设备详情窗口
        goToJkDetail () {
        // 跳转 监控 设备详情窗口
        goToJkDetail (item) {
            this.vidInfo = item
            this.JkDetail = true
            this.$nextTick(() => {
                this.playFlvVideo()
                this.playFlvVideo('wss://www.ainfo.top:700/rtp/34020000001110000105_34020000001310000002.flv')
            })
        },
        // echart
@@ -724,37 +805,105 @@

            option && myChart.setOption(option)
        },
        //点击展示监测设备echart图
        showEchart (index) {
        // 点击展示监测设备echart图
        showEchart (index, item) {
            if (this.jcIndex == index) {
                this.echartIsShow = !this.echartIsShow
            } else {
                this.jcIndex = index
                this.echartIsShow = true
            }


            console.log('index:', 'EchartsBox' + index)
            this.initLine('EchartsBox' + index, '单位', ['1', '2', '3', '4'], ['10.9', '11', '6.8', '100'])
            if (item) {
                const valueDataList = item.valueDataList
                const values = []
                const names = []
                valueDataList.forEach(item => {
                    values.push(item.value)
                    names.push(item.startTime.substring(5, 10) + ' ' + item.startTime.substring(11) + ':00')
                })
                this.initLine('EchartsBox' + index, '单位' + item.unit, names, values)
            }
        },
        // flv视频播放
        playFlvVideo () {
        playFlvVideo (url) {
            // 先销毁
            if (this.flvPlayer) {
                this.flvPlayer.pause()
                this.flvPlayer.unload()
                this.flvPlayer.detachMediaElement()
                this.flvPlayer.destroy()
                this.flvPlayer = null
            }
            if (flvjs.isSupported()) {
                var videoElement = document.getElementById('videoElement')
                var flvPlayer = flvjs.createPlayer({
                this.flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    isLive: true,
                    hasAudio: false,
                    stashInitialSize: 128,
                    url: 'wss://www.ainfo.top:700/rtp/34020000001110000105_34020000001310000002.flv'
                    url: url
                }, {
                    enableStashBuffer: false,
                    fixAudioTimestampGap: false
                })
                flvPlayer.attachMediaElement(videoElement)
                flvPlayer.load()
                flvPlayer.play()
                this.flvPlayer.attachMediaElement(videoElement)
                this.flvPlayer.load()
                this.flvPlayer.play()
            }
        },
        // 根据设备号获取监测数据
        getStationDateByStcd (stcd) {
            // 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
            })
        }
    }
}

 src/views/home/index.vue

@@ -522,6 +522,10 @@
<script>
// eslint-disable-next-line no-unused-vars
import {
    getStationAndVideoCount,
    getStationAndVideoList
} from '@/api/equipment/equipment'
import {
    getFarmingCount,
    getFarmingStatis,
    pagePalnt,
@@ -531,9 +535,7 @@
    selectMarketDistrict,
    getFarmList,
    getLandList,
    getFarmingRecordList,
    getStationAndVideoCount,
    getStationAndVideoList
    getFarmingRecordList
} from '@/api/farm/farmingrecord'
// eslint-disable-next-line no-unused-vars
import { selectXCount } from '@/api/land/land'