监控视频弹窗

guanqb

2022-08-06 2840a97889f8769e49ae2175cafb121cfb2ae511

 src/views/farm/index.vue

@@ -143,6 +143,13 @@
            </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"
@@ -305,14 +312,10 @@
            </template>
        </public-nape-box>

        <el-dialog
            title="溯源码"
            custom-class="dialog-fixed"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
        >
        <el-dialog title="溯源码" custom-class="dialog-fixed" :visible.sync="dialogVisible">
            <img style="width: 500px;" :src="currentUrl" alt />
        </el-dialog>

        <public-box
            v-show="staionDetail"
            :closeFlag="'staionDetail'"
@@ -331,75 +334,76 @@
                    <div class="itemTitle">
                        <img src="../../../public/img/icon/icon_3788.png" alt />
                        <div class="type">
                            <h1>太阳能板电压</h1>
                            <h1>太阳能板电压1111</h1>
                            <span>单位：V</span>
                        </div>
                        <div class="data">21.03</div>
                        <img
                            src="../../../public/img/icon/open_menu.png"
                            src="../../../public/img/icon/up_menu.png"
                            class="openMenuIcon"
                            @click="showEchart"
                            @click="showEchart(1)"
                            v-if="echartIsShow && jcIndex == 1"
                            alt
                        />
                        <img
                            src="../../../public/img/icon/down_menu.png"
                            class="openMenuIcon"
                            @click="showEchart(1)"
                            v-else
                            alt
                        />
                    </div>
                    <div class="echart">
                        <div id="EchartsBox"></div>
                    <div class="echart" v-show="echartIsShow && jcIndex == 1">
                        <div id="EchartsBox1" class="EchartsBox_div"></div>
                    </div>
                </div>
                <!-- <div class="item">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                        <span>单位：V</span>
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
                </div>
                <div class="item">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                        <span>单位：V</span>
                    <div class="itemTitle">
                        <img src="../../../public/img/icon/icon_3788.png" alt />
                        <div class="type">
                            <h1>太阳能板电压22222</h1>
                            <span>单位：V</span>
                        </div>
                        <div class="data">21.03</div>
                        <img
                            src="../../../public/img/icon/up_menu.png"
                            class="openMenuIcon"
                            @click="showEchart(2)"
                            v-if="echartIsShow && jcIndex == 2"
                            alt
                        />
                        <img
                            src="../../../public/img/icon/down_menu.png"
                            class="openMenuIcon"
                            @click="showEchart(2)"
                            v-else
                            alt
                        />
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
                    <div class="echart" v-show="echartIsShow && jcIndex == 2">
                        <div id="EchartsBox2" class="EchartsBox_div"></div>
                    </div>
                </div>
                <div class="item">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                        <span>单位：V</span>
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
            </template>
        </public-box>

        <public-box
            v-show="JkDetail"
            :closeFlag="'JkDetail'"
            :className="'public-equirment-vid-details'"
        >
            <template slot="public-box-header">
                <div>4号大鹏摄像头</div>
                <img
                    @click="JkDetail = false"
                    src="../../../public/img/icon/close.png"
                    class="close"
                />
            </template>
            <template slot="public-box-content">
                <div class="video">
                    <video id="videoElement" autoplay muted width="100%" height="100%"></video>
                </div>
                <div class="item">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                        <span>单位：V</span>
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
                </div>
                <div class="item">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                        <span>单位：V</span>
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
                </div>
                <div class="item">
                    <img src="../../../public/img/icon/icon_3788.png" alt />
                    <div class="type">
                        <h1>太阳能板电压</h1>
                        <span>单位：V</span>
                    </div>
                    <div class="data">21.03</div>
                    <img src="../../../public/img/icon/open_menu.png" class="openMenuIcon" alt />
                </div>-->
            </template>
        </public-box>
    </div>
@@ -408,6 +412,7 @@
<script>

import { getSourceList } from '@/api/farm/source'
import flvjs from 'flv.js'
import {
    getLandList,
    getFarmingRecordList,
@@ -442,7 +447,13 @@
            // 物联网设备
            equipmentList: {},
            // 监测设备详情
            staionDetail: false
            staionDetail: false,
            // 监控设备详情
            JkDetail: false,
            // 监测设备echart展示
            echartIsShow: false,
            // 监测列表index
            jcIndex: 0
        }
    },
    created () {
@@ -583,9 +594,16 @@
                }
            })
        },
        //跳转设备详情窗口
        //跳转 监测 设备详情窗口
        goToDetail () {
            this.staionDetail = true
        },
        //跳转 监控 设备详情窗口
        goToJkDetail () {
            this.JkDetail = true
            this.$nextTick(() => {
                this.playFlvVideo()
            })
        },
        // echart
        initLine (dom, yName, x, y) {
@@ -707,8 +725,36 @@
            option && myChart.setOption(option)
        },
        //点击展示监测设备echart图
        showEchart () {
            this.initLine('EchartsBox', '单位', ['1', '2', '3', '4'], ['10.9', '11', '6.8', '100'])
        showEchart (index) {
            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'])
        },
        // flv视频播放
        playFlvVideo () {
            if (flvjs.isSupported()) {
                var videoElement = document.getElementById('videoElement')
                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
                })
                flvPlayer.attachMediaElement(videoElement)
                flvPlayer.load()
                flvPlayer.play()
            }
        }
    }
}