| | |
| | | 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="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.waterArea }}</span>m³</div> |
| | | </div> |
| | | </div> |
| | | <div class="info-btn"> |
| | |
| | | width: 100px; |
| | | } |
| | | |
| | | .val span { |
| | | display: inline-block; |
| | | padding: 0 20px; |
| | | .val{ |
| | | display: flex; |
| | | align-items: center; |
| | | span { |
| | | display: inline-block; |
| | | width: 6rem; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .mask{ |
| | | position: absolute; |
| | | left: 0; |
| | | top: 0; |
| | | z-index: 100; |
| | | width: 100vw; |
| | | height: 100vh; |
| | | .mask-item{ |
| | | position: absolute; |
| | | left: 5%; |
| | | bottom: 10%; |
| | | height: 400px; |
| | | width: 300px; |
| | | background-color: rgba(0, 0, 0, 0.4); |
| | | } |
| | | } |
| | | } |