|
|
@@ -3,7 +3,10 @@
|
|
|
<div class="chart-item weather-item">
|
|
|
<chart-box name="气象预警">
|
|
|
<template #title-right>
|
|
|
- <div class="button" @click="gybg">溯源报告</div>
|
|
|
+ <div class="button-group">
|
|
|
+ <div class="button zb" @click="handlePlay">直播</div>
|
|
|
+ <div class="button" @click="gybg">溯源报告</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<div class="base-wrap">
|
|
|
<div class="base-item" v-for="(item, index) in baseData.labels" :key="index">
|
|
|
@@ -118,16 +121,26 @@
|
|
|
</div>
|
|
|
<ImageDialog></ImageDialog>
|
|
|
</div>
|
|
|
+ <popup class="popup-video" v-model:show="showVideo" :close-on-click-overlay="false">
|
|
|
+ <div class="video-cont">
|
|
|
+ <div class="close" @click="handleClose">
|
|
|
+ <el-icon size="28" color="#000"><Close /></el-icon>
|
|
|
+ </div>
|
|
|
+ <LivePlayer class="video" ref="player" :videoUrl="flvURL" live loop autoplay />
|
|
|
+ </div>
|
|
|
+ </popup>
|
|
|
</template>
|
|
|
-
|
|
|
<script setup>
|
|
|
import { ref, onMounted, onUnmounted } from "vue";
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
import chartBox from "@/components/chartBox.vue";
|
|
|
import tabs from "./tabs.vue";
|
|
|
+import LivePlayer from '@liveqing/liveplayer-v3'
|
|
|
import weatherChart from "./weatherChart.vue";
|
|
|
import barChart from "@/components/charts/barChart.vue";
|
|
|
import oneLineChart from "@/components/charts/oneLineChart.vue";
|
|
|
import eventBus from "@/api/eventBus";
|
|
|
+import { Popup } from 'vant';
|
|
|
import { useStore } from "vuex";
|
|
|
import { useRouter } from "vue-router";
|
|
|
import ImageDialog from "../../../components/ImageDialog";
|
|
|
@@ -276,6 +289,27 @@ const gybg = () => {
|
|
|
eventBus.emit("homePage:image", { filename: data.path, title: "溯源报告" });
|
|
|
});
|
|
|
};
|
|
|
+
|
|
|
+const showVideo = ref(false)
|
|
|
+const flvURL = ref("")
|
|
|
+const converterId = ref('')
|
|
|
+const handlePlay = () =>{
|
|
|
+ VE_API.home.startStreamConverters({farmId:sessionStorage.getItem("farmId")}).then(res =>{
|
|
|
+ if(res.code === 0){
|
|
|
+ showVideo.value = true
|
|
|
+ flvURL.value = res.data.url
|
|
|
+ converterId.value = res.data.converterId
|
|
|
+ }else{
|
|
|
+ ElMessage.warning('暂无直播')
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const handleClose = () =>{
|
|
|
+ showVideo.value = false
|
|
|
+ flvURL.value = ''
|
|
|
+ VE_API.home.closeStreamConverters({farmId:sessionStorage.getItem("farmId"),converterId:converterId.value})
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -295,6 +329,9 @@ const gybg = () => {
|
|
|
margin-bottom: 10px;
|
|
|
&.weather-item {
|
|
|
height: 260px;
|
|
|
+ .button-group{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
}
|
|
|
.box-flex {
|
|
|
width: 100%;
|
|
|
@@ -329,8 +366,13 @@ const gybg = () => {
|
|
|
.button {
|
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
border-radius: 4px;
|
|
|
- padding: 2px 10px;
|
|
|
+ padding: 2px 0;
|
|
|
+ width: 78px;
|
|
|
cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .zb{
|
|
|
+ margin-right: 8px;
|
|
|
}
|
|
|
&.chart-item:last-child {
|
|
|
margin: 0;
|
|
|
@@ -457,4 +499,23 @@ const gybg = () => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.popup-video{
|
|
|
+ width: 100%;
|
|
|
+ background: transparent;
|
|
|
+ .video-cont{
|
|
|
+ width: 70%;
|
|
|
+ margin: auto;
|
|
|
+ background: #fff;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 10px;
|
|
|
+ .close{
|
|
|
+ width: 100%;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .video{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
