| | |
| | | import {getFlowPointList} from '@/api/screen/index' |
| | | import {getFlowVideoData} from '@/api/screen/graphic/index.js' |
| | | import EZUIKit from 'ezuikit-js'; |
| | | import {useRoute} from "vue-router"; |
| | | import {useRoute, useRouter} from "vue-router"; |
| | | import FullScreenVideo from "./components/FullScreenVideo.vue"; |
| | | |
| | | const route = useRoute(); |
| | | const router = useRouter(); |
| | | |
| | | const menuList = ref([]) |
| | | const userType = ref(getUserType()) |
| | |
| | | |
| | | // 抓拍 |
| | | const handleSnap = (index) => { |
| | | ezKitList[index].capturePicture(`capture-${new Date().getTime()}`, 0.8); // 参数:回调函数,图片格式,质量(0-1) |
| | | ezKitList[index].capturePicture(`capture-${new Date().getTime()}`, 0.8); |
| | | } |
| | | |
| | | // 获取监控点菜单 |
| | |
| | | </el-icon> |
| | | 搜索 |
| | | </el-button> |
| | | <el-button style="margin-left: 0" v-if="userType === '1'"> |
| | | <el-button style="margin-left: 0" v-if="userType === '1'" @click="router.push('/monitorList')"> |
| | | <el-icon> |
| | | <Plus/> |
| | | </el-icon> |
| | |
| | | <div class="val"><span>{{ item.waterLevel }}</span>m</div> |
| | | </div> |
| | | <div class="info-item"> |
| | | <div class="name">流速:</div> |
| | | <div class="name">表面流速:</div> |
| | | <div class="val"><span>{{ item.flowVelocity }}</span>m/s</div> |
| | | </div> |
| | | <div class="info-item"> |
| | | <div class="name">瞬时流量:</div> |
| | | <div class="val"><span>{{ item.newFlow }}</span>m³/h</div> |
| | | </div> |
| | | <div class="info-item"> |
| | | <div class="name">累计流量:</div> |
| | | <div class="val"><span>{{ item.totalFlow }}</span>m³</div> |
| | | </div> |
| | | <div class="info-item"> |
| | | <div class="name">水面宽度:</div> |
| | | <div class="val"><span>{{ item.waterWidth }}</span>m</div> |
| | | </div> |
| | | <div class="info-item"> |
| | | <div class="name">平均流速:</div> |
| | | <div class="val"><span>{{ item.avgVelocity }}</span>m/s</div> |
| | | </div> |
| | | <div class="info-item"> |
| | | <div class="name">过水面积:</div> |
| | | <div class="val"><span>{{ item.waterArea }}</span>m³</div> |
| | | </div> |
| | | <div class="info-item"> |
| | | <div class="name">雷达流速:</div> |
| | | <div class="val"><span>{{ item.radarVelocity }}</span>m/s</div> |
| | | </div> |
| | | <div class="info-item"> |
| | | <div class="name">实时流量:</div> |
| | | <div class="val"><span>{{ item.newFlow }}</span>m³/h</div> |
| | | </div> |
| | | <div class="info-item"> |
| | | <div class="name">起点距:</div> |
| | | <div class="val"><span>{{ item.radarDistance }}</span>m</div> |
| | | </div> |
| | | </div> |
| | | <div class="info-btn"> |
| | | <div class="fullScreen" @click="handleFullScreen(index)"> |
| | | <div class="fullScreen" v-if="item.url" @click="handleFullScreen(index)"> |
| | | <img src="@/assets/images/flow/screenIconWhite.png" alt="" /> |
| | | 全屏 |
| | | </div> |
| | |
| | | .info-btn { |
| | | width: 15%; |
| | | padding: 1rem 0; |
| | | display: flex; |
| | | align-items: flex-end; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | position: relative; |
| | | :deep(.el-button) { |
| | | color: #fff; |
| | | background: rgba(94, 229, 92, 0.6); |
| | | border-radius: 4px 4px 4px 4px; |
| | | border: 1px solid rgba(94, 229, 92, 0.6); |
| | | position: absolute; |
| | | bottom: 1rem; |
| | | } |
| | | .fullScreen{ |
| | | width: 100%; |