设备

guanqb

2022-08-04 59e733a20713d60e1b27d94022df25d9f716ae7f

设备

 package-lock.json

@@ -5446,6 +5446,11 @@
                "is-symbol": "^1.0.2"
            }
        },
        "es6-promise": {
            "version": "4.2.8",
            "resolved": "https://registry.npmmirror.com/es6-promise/-/es6-promise-4.2.8.tgz",
            "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
        },
        "escalade": {
            "version": "3.1.1",
            "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.1.1.tgz",
@@ -6518,6 +6523,15 @@
            "requires": {
                "inherits": "^2.0.3",
                "readable-stream": "^2.3.6"
            }
        },
        "flv.js": {
            "version": "1.6.2",
            "resolved": "https://registry.npmmirror.com/flv.js/-/flv.js-1.6.2.tgz",
            "integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
            "requires": {
                "es6-promise": "^4.2.8",
                "webworkify-webpack": "^2.1.5"
            }
        },
        "follow-redirects": {
@@ -14610,6 +14624,11 @@
            "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
            "dev": true
        },
        "webworkify-webpack": {
            "version": "2.1.5",
            "resolved": "https://registry.npmmirror.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
            "integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw=="
        },
        "which": {
            "version": "1.3.1",
            "resolved": "https://registry.npmmirror.com/which/-/which-1.3.1.tgz",

 package.json

@@ -19,9 +19,12 @@
        "core-js": "^3.6.5",
        "echarts": "^5.2.1",
        "element-ui": "^2.15.6",
        "flv.js": "^1.6.2",
        "hls.js": "^1.1.5",
        "js-md5": "^0.7.3",
        "lodash": "^4.17.21",
        "moment": "^2.29.1",
        "nprogress": "^0.2.0",
        "three": "^0.140.0",
        "three-css2drender": "^1.0.0",
        "three-obj-mtl-loader": "^1.0.3",
@@ -32,9 +35,7 @@
        "vue-axios": "^3.3.7",
        "vue-jsonp": "^2.0.0",
        "vue-router": "^3.5.2",
        "vuex": "^3.6.2",
        "js-md5": "^0.7.3",
        "nprogress": "^0.2.0"
        "vuex": "^3.6.2"
    },
    "devDependencies": {
        "@amap/amap-jsapi-loader": "^1.0.1",

 src/api/land/land.js

@@ -48,12 +48,13 @@
    })
}

export const getLandList = (userid) => {
export const getLandList = (userid, farmId) => {
    return request({
        url: '/land/land/selectLandList',
        url: 'http://182.106.212.58:8013/api/land/land/getLandList',
        method: 'get',
        params: {
            userid
            userid,
            farmId
        }
    })
}
@@ -67,3 +68,27 @@
        }
    })
}

// 根据地块获取监测监控设备
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

@@ -14,7 +14,12 @@
                </span>
            </div>
            <div class="title">
                <el-select class="equipment-plot-select" v-model="plotName" placeholder="选择地块">
                <el-select
                    class="equipment-plot-select"
                    v-model="plotName"
                    placeholder="选择地块"
                    @change="landChangeValue($event)"
                >
                    <el-option
                        v-for="(item, index) in plotList"
                        :key="index"
@@ -33,14 +38,18 @@
                    </div>

                    <div class="body">
                        <div class="box">
                            <div class="nape-header">1号摄像头</div>
                            <div class="nape-body"></div>
                        </div>

                        <div class="box">
                            <div class="nape-header">2号摄像头</div>
                            <div class="nape-body"></div>
                        <div class="box" v-for="(item, index) in vidList" :key="index">
                            <div class="nape-header">{{item.name}}</div>
                            <div class="nape-body">
                                <video
                                    :id="'videoElement' + index"
                                    controls
                                    autoplay
                                    muted
                                    width="100%"
                                    height="100%"
                                ></video>
                            </div>
                        </div>
                    </div>
                </div>
@@ -53,27 +62,53 @@
                    <div class="body">
                        <div class="btn-grounp">
                            <ul>
                                <li class="on">1号棚2号监测点</li>
                                <li>1号棚2号监测点</li>
                                <li>1号棚2号监测点</li>
                                <li>1号棚2号监测点</li>
                                <li>1号棚2号监测点</li>
                                <li>1号棚2号监测点</li>
                                <li>1号棚2号监测点</li>
                                <li>1号棚2号监测点</li>
                                <li
                                    class="on"
                                    v-for="(item,index) in staList"
                                    :class="{activity:isChoose == index}"
                                    :key="index"
                                    @click="getStaList(index,item.stcd)"
                                >{{item.name}}</li>
                            </ul>
                        </div>
                        <div class="nape-boxs">
                            <div>
                            <div v-for="(item, index) in stationData.weatherList" :key="index">
                                <div class="top">
                                    <div class="l">
                                        <img src="/img/icon/wd-icon.png" alt />
                                        <span>20cm土壤温度</span>
                                        <span>{{item.name}}</span>
                                    </div>

                                    <div class="r">
                                        <span class="num">21.03</span>
                                        <span>℃</span>
                                        <span
                                            class="num"
                                        >{{item.valueDataList[item.valueDataList.length-1].value}}</span>
                                        <span>{{item.unit}}</span>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <div class="l">
                                        <i class="el-icon-time"></i>
                                        <span class="old-btn" @click="historyData">历史数据</span>
                                    </div>

                                    <div
                                        class="r"
                                    >更新时间：{{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">
                                        <img src="/img/icon/wd-icon.png" alt />
                                        <span>{{item.name}}</span>
                                    </div>

                                    <div class="r">
                                        <span
                                            class="num"
                                        >{{item.valueDataList[item.valueDataList.length-1].value}}</span>
                                        <span>{{item.unit}}</span>
                                    </div>
                                </div>
                                <div class="bottom">
@@ -83,6 +118,54 @@
                                    </div>

                                    <div class="r">48天前更新</div>
                                </div>
                            </div>
                            <div v-for="(item, index) in stationData.artList" :key="index">
                                <div class="top">
                                    <div class="l">
                                        <img src="/img/icon/wd-icon.png" alt />
                                        <span>{{item.name}}</span>
                                    </div>

                                    <div class="r">
                                        <span
                                            class="num"
                                        >{{item.valueDataList[item.valueDataList.length-1].value}}</span>
                                        <span>{{item.unit}}</span>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <div class="l">
                                        <i class="el-icon-time"></i>
                                        <span class="old-btn" @click="historyData">历史数据</span>
                                    </div>

                                    <div class="r">48天前更新</div>
                                </div>
                            </div>
                            <div v-for="(item, index) in stationData.waterList" :key="index">
                                <div class="top">
                                    <div class="l">
                                        <img src="/img/icon/wd-icon.png" alt />
                                        <span>{{item.name}}</span>
                                    </div>

                                    <div class="r">
                                        <span
                                            class="num"
                                        >{{item.valueDataList[item.valueDataList.length-1].value}}</span>
                                        <span>{{item.unit}}</span>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <div class="l">
                                        <i class="el-icon-time"></i>
                                        <span class="old-btn" @click="historyData">历史数据</span>
                                    </div>

                                    <div
                                        class="r"
                                    >更新时间：{{item.valueDataList[item.valueDataList.length-1].startTime}}</div>
                                </div>
                            </div>
                        </div>
@@ -108,8 +191,12 @@
<script>

import {
    getLandList
    getLandList,
    getStationAndVideoByLandId,
    getStationDateByStcd
} from '@/api/land/land'
import { nextTick } from 'vue'
import flvjs from 'flv.js'

export default {
    data () {
@@ -118,14 +205,20 @@
            plotName: "",
            plotList: [],
            currentDetails: {},
            echartsBosShow: false
            echartsBosShow: false,
            vidList: [],
            staList: [],
            isChoose: '',
            stationData: { soilList: [] }
        }
    },
    created () {
        this.getParams()
        this.getLandList()

    },
    mounted () {
        // this.getLandList()

    },
    methods: {
        prev () {
@@ -260,13 +353,96 @@

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

            console.log(flvjs, flvjs.isSupported(), this.vidList, 5555)
            if (flvjs.isSupported()) {

                var arr = this.vidList
                console.log('66666666666666666', arr)
                arr.forEach((item, index) => {

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

                    var flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        isLive: true,
                        hasAudio: false,
                        stashInitialSize: 128,
                        url: 'wss://www.ainfo.top:700/rtp/34020000001110000105_34020000001310000002.flv'
                    }, {
                        enableStashBuffer: false,
                        fixAudioTimestampGap: false,
                    })
                    console.log(flvPlayer, 44444444)
                    flvPlayer.attachMediaElement(videoElement)
                    flvPlayer.load()
                    flvPlayer.play()
                })

            }

        }
    }
}
@@ -416,7 +592,7 @@
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 180px;
                            min-width: 180px;
                            height: 32px;
                            font-size: 14px;
                            border-radius: 16px 16px 16px 16px;
@@ -426,8 +602,14 @@
                        }

                        li.on {
                            background: rgba(0, 131, 143, 1);
                            background-color: #091a2b;
                            color: rgba(104, 226, 251, 1);
                            text-align: center;
                            line-height: 32px;
                            padding: 0 15px;
                        }
                        li.activity {
                            background: rgba(0, 131, 143, 1);
                        }
                    }