From 6acd20f3f37e988488b681a1a394b37a32f3ffe6 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期一, 07 四月 2025 16:17:41 +0800
Subject: [PATCH] feat:添加大屏页面
---
src/assets/images_lc/info-bg.png | 0
src/assets/images/screen/btnbg-active.png | 0
src/components/VideoPlayer/VideoPlayer.vue | 137 +++++
src/assets/images/screen/head.png | 0
src/assets/images/screen/content_bg.png | 0
src/utils/tool.js | 15
src/assets/images_lc/warnRecord.png | 0
src/assets/images_lc/switch.png | 0
src/api/screen/home/index.js | 0
src/assets/images/screen/userImg.png | 0
src/assets/images_lc/map.png | 0
src/assets/images_lc/title_font.png | 0
src/api/facility/video.js | 36 +
index.html | 2
src/views/screen/pumpInfo/index.vue | 222 ++++++++
src/assets/images_lc/realTimeMonitoring.png | 0
src/assets/images/screen/loginOut.png | 0
src/assets/images_lc/point-message.png | 0
src/assets/images/screen/btnbg.png | 0
src/router/index.js | 24
src/views/screen/home/index.vue | 739 ++++++++++++++++++++++++-----
.env.development | 4
/dev/null | 13
src/assets/images/screen/homeIcon.png | 0
src/views/login.vue | 2
src/screen/index.vue | 269 ++++++++-
package.json | 8
src/assets/images_lc/a-point.png | 0
.env.production | 2
29 files changed, 1,260 insertions(+), 213 deletions(-)
diff --git a/.env.development b/.env.development
index c742c27..57c3001 100644
--- a/.env.development
+++ b/.env.development
@@ -8,8 +8,8 @@
# 图片地址
VITE_APP_IMG_BASEURL='http://192.168.0.200:8036/upload'
-# 金川接口
+# 南京接口
# VITE_APP_PUBLIC_REQUEST_API = 'http://113.250.189.120:8030'
# VITE_APP_PUBLIC_REQUEST_API = 'http://113.250.189.120:8036'
#后端本地
- VITE_APP_PUBLIC_REQUEST_API = 'http://192.168.0.200:8036'
+ VITE_APP_PUBLIC_REQUEST_API = 'http://192.168.0.200:8036'
diff --git a/.env.production b/.env.production
index 51e2488..97124c1 100644
--- a/.env.production
+++ b/.env.production
@@ -8,7 +8,7 @@
# 图片地址
VITE_APP_IMG_BASEURL = 'http://113.250.189.120:8036/upload'
-# 金川管理系统/开发环境
+# 南京管理系统/开发环境
VITE_APP_PUBLIC_REQUEST_API = 'http://113.250.189.120:8036'
# 是否在打包时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip
diff --git a/index.html b/index.html
index 8fb942e..7e01918 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/favicon.ico">
- <title>金川水电站生态流量监测系统</title>
+ <title>南京康尼地铁泵站监测服务系统</title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<style>
diff --git a/package.json b/package.json
index ef6f721..01f0b8a 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
{
- "name": "jc-hydropower-station-web",
- "version": "3.8.7",
- "description": "金川水电站生态流量监测系统",
- "author": "金川项目",
+ "name": "nanjing-station-web",
+ "version": "1.0.0",
+ "description": "南京康尼地铁泵站监测服务系统",
+ "author": "",
"license": "MIT",
"type": "module",
"scripts": {
diff --git a/src/api/facility/video.js b/src/api/facility/video.js
new file mode 100644
index 0000000..790906a
--- /dev/null
+++ b/src/api/facility/video.js
@@ -0,0 +1,36 @@
+import { publicRequest } from '@/utils/request'
+
+// 根据小区id获取监控点
+export const getVideoList = (params) => {
+ return publicRequest({
+ url: '/monitorVideoStreaming/getAllByPoint',
+ method: 'get',
+ params
+ })
+}
+
+// 开始视频点播
+export const getVideoMedia = (deviceId, channelId) => {
+ return publicRequest({
+ url: `/monitorVideoStreaming/play/${deviceId}/${channelId}`,
+ method: 'get',
+ })
+}
+
+
+// 视频停止点播
+export const stopVideoMedia = (deviceId, channelId) => {
+ return publicRequest({
+ url: `/monitorVideoStreaming/stop/${deviceId}/${channelId}`,
+ method: 'get',
+ })
+}
+
+
+// 继续点播
+export const renewVideoMedia = (deviceId, channelId) => {
+ return publicRequest({
+ url: `/monitorVideoStreaming/updateEndTime/${deviceId}/${channelId}`,
+ method: 'get',
+ })
+}
\ No newline at end of file
diff --git a/src/api/screen/home/index.js b/src/api/screen/home/index.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/api/screen/home/index.js
diff --git a/src/assets/images/screen/btnbg-active.png b/src/assets/images/screen/btnbg-active.png
new file mode 100644
index 0000000..7221d38
--- /dev/null
+++ b/src/assets/images/screen/btnbg-active.png
Binary files differ
diff --git a/src/assets/images/screen/btnbg.png b/src/assets/images/screen/btnbg.png
new file mode 100644
index 0000000..0f38a44
--- /dev/null
+++ b/src/assets/images/screen/btnbg.png
Binary files differ
diff --git a/src/assets/images/screen/content_bg.png b/src/assets/images/screen/content_bg.png
new file mode 100644
index 0000000..96b7f87
--- /dev/null
+++ b/src/assets/images/screen/content_bg.png
Binary files differ
diff --git a/src/assets/images/screen/head.png b/src/assets/images/screen/head.png
new file mode 100644
index 0000000..abfacaf
--- /dev/null
+++ b/src/assets/images/screen/head.png
Binary files differ
diff --git a/src/assets/images/screen/homeIcon.png b/src/assets/images/screen/homeIcon.png
new file mode 100644
index 0000000..4402448
--- /dev/null
+++ b/src/assets/images/screen/homeIcon.png
Binary files differ
diff --git a/src/assets/images/screen/loginOut.png b/src/assets/images/screen/loginOut.png
new file mode 100644
index 0000000..582f66e
--- /dev/null
+++ b/src/assets/images/screen/loginOut.png
Binary files differ
diff --git a/src/assets/images/screen/userImg.png b/src/assets/images/screen/userImg.png
new file mode 100644
index 0000000..3e8ed9c
--- /dev/null
+++ b/src/assets/images/screen/userImg.png
Binary files differ
diff --git a/src/assets/images_lc/a-point.png b/src/assets/images_lc/a-point.png
new file mode 100644
index 0000000..a3c5e6d
--- /dev/null
+++ b/src/assets/images_lc/a-point.png
Binary files differ
diff --git a/src/assets/images_lc/info-bg.png b/src/assets/images_lc/info-bg.png
new file mode 100644
index 0000000..042190c
--- /dev/null
+++ b/src/assets/images_lc/info-bg.png
Binary files differ
diff --git a/src/assets/images_lc/map.png b/src/assets/images_lc/map.png
new file mode 100644
index 0000000..8dfe74f
--- /dev/null
+++ b/src/assets/images_lc/map.png
Binary files differ
diff --git a/src/assets/images_lc/point-message.png b/src/assets/images_lc/point-message.png
new file mode 100644
index 0000000..baa6890
--- /dev/null
+++ b/src/assets/images_lc/point-message.png
Binary files differ
diff --git a/src/assets/images_lc/realTimeMonitoring.png b/src/assets/images_lc/realTimeMonitoring.png
new file mode 100644
index 0000000..c4846db
--- /dev/null
+++ b/src/assets/images_lc/realTimeMonitoring.png
Binary files differ
diff --git a/src/assets/images_lc/switch.png b/src/assets/images_lc/switch.png
new file mode 100644
index 0000000..6f7d6a1
--- /dev/null
+++ b/src/assets/images_lc/switch.png
Binary files differ
diff --git a/src/assets/images_lc/title_font.png b/src/assets/images_lc/title_font.png
new file mode 100644
index 0000000..68848c1
--- /dev/null
+++ b/src/assets/images_lc/title_font.png
Binary files differ
diff --git a/src/assets/images_lc/warnRecord.png b/src/assets/images_lc/warnRecord.png
new file mode 100644
index 0000000..941874e
--- /dev/null
+++ b/src/assets/images_lc/warnRecord.png
Binary files differ
diff --git a/src/components/VideoPlayer/VideoPlayer.vue b/src/components/VideoPlayer/VideoPlayer.vue
new file mode 100644
index 0000000..1808b87
--- /dev/null
+++ b/src/components/VideoPlayer/VideoPlayer.vue
@@ -0,0 +1,137 @@
+<template>
+ <div class="videoBox" @mouseenter="handleEnter" @mouseleave="handleLeave">
+ <div class="video" ref="videoRef" style="width: 100%; height: 100%"></div>
+ <div class="playerBtn">
+ <el-icon class="icon" v-if="showPlay" @click="handlePlayer"><VideoPlay /></el-icon>
+ <el-icon class="icon" v-if="showPause" @click="hanlePause"><VideoPause /></el-icon>
+ <el-icon class="icon is-loading" v-if="showLoading"><Loading /></el-icon>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import {onMounted, onUnmounted, ref} from 'vue';
+import { getVideoMedia, stopVideoMedia, renewVideoMedia } from '@/api/facility/video';
+import { debounce } from '@/utils/tool';
+
+const props = defineProps({
+ item: {
+ type: Object,
+ default: {}
+ }
+});
+
+const videoRef = ref(null);
+const videojsb = ref();
+const showPlay = ref(true);
+const showPause = ref(false);
+const showLoading = ref(false);
+let timer = null;
+
+//通知设备上传媒体流,做节流，防止过度点击
+const handlePlayer = debounce(function() {
+ showPlay.value = false;
+ showLoading.value = true;
+ // 获取播放地址
+ getVideoMedia(props.item.deviceId, props.item.channelId).then(res => {
+ videojsb.value.play(res.data.url);
+ }).catch(() => {
+ showPlay.value = true;
+ }).finally(() => {
+ showLoading.value = false;
+ })
+ // 挂定时任务，2分钟获取一次直播流数据，防止客户关闭页面，如果2分钟未获取，后端断开链接
+ if(timer) clearInterval(timer)
+ timer = setInterval(() => {
+ // 调用续时点播
+ renewVideoMedia(props.item.deviceId, props.item.channelId)
+ }, 120000)
+}, 2000, true)
+
+const hanlePause = () => {
+ showPause.value = false;
+ showPlay.value = true;
+ clearInterval(timer)
+ stopVideoMedia(props.item.deviceId, props.item.channelId).then(() => {
+ console.log('关闭成功')
+ })
+}
+
+const handleEnter = () => {
+ if(!showPlay.value && !showLoading.value) {
+ showPause.value = true;
+ }
+}
+
+const handleLeave = () => {
+ showPause.value = false;
+}
+
+const init = () => {
+ videojsb.value = new window.Jessibuca(
+ Object.assign({
+ container: videoRef.value,
+ isResize: true,
+ isFullResize: true,
+ text: '',
+ videoBuffer: 2,
+ loadingText: '加载中...',
+ useMSE: true,
+ useWCS: true,
+ autoWasm: true,
+ // debug: true,
+ supportDblclickFullscreen: false,
+ operateBtns: {
+ fullscreen: true,
+ play: false,
+ audio: true,
+ recorder: false,
+ },
+ controlAutoHide: true,
+ forceNoOffscreen: true,
+ isNotMute: false,
+ heartTimeoutReplay:false,
+ })
+ );
+};
+
+onMounted(() => {
+ init();
+});
+
+onUnmounted(() => {
+ if(videojsb.value) {
+ videojsb.value.destroy();
+ }
+ if(timer) clearInterval(timer)
+})
+</script>
+
+<style scoped lang="scss">
+.videoBox {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ .video {
+ width: 100%;
+ height: 100%;
+ background-color: #000;
+ }
+ .playerBtn {
+ width: 4rem;
+ height: 4rem;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 100;
+ .icon {
+ color: #fff;
+ font-size: 3rem;
+ }
+ }
+ :deep(.jessibuca-controls) {
+ background-color: transparent;
+ }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 7a108b4..789f331 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -34,7 +34,7 @@
{
path: '/',
hidden: true,
- redirect: '/user'
+ redirect: '/screen'
},
{
path: '/login',
@@ -65,25 +65,9 @@
component: () => import('@/views/screen/home/index.vue')
},
{
- path: 'ecology',
- component: () => import('@/views/screen/ecology/index.vue')
- },
- {
- path: 'graphic',
- component: () => import('@/views/screen/graphic/index.vue')
- },
- {
- path: 'shebei',
- component: () => import('@/views/screen/shebei/index.vue')
- },
- {
- path: 'warning',
- component: () => import('@/views/screen/warning/index.vue')
- },
- {
- path: 'report',
- component: () => import('@/views/screen/report/index.vue')
- },
+ path: 'pumpInfo',
+ component: () => import('@/views/screen/pumpInfo/index.vue')
+ }
]
},
]
diff --git a/src/screen/index.vue b/src/screen/index.vue
index d22b064..7651e4b 100644
--- a/src/screen/index.vue
+++ b/src/screen/index.vue
@@ -1,91 +1,268 @@
<template>
<div class="main">
<div class="header">
- <div class="top">大屏 </div>
+ <div class="top">
+ <div class="title">南京康尼地铁泵站监测服务系统</div>
+ <div class="time">
+ <span>{{ nowTime.date }}</span>
+ <span>{{ nowTime.time }}</span>
+ </div>
+ <div class="user-image">
+ <div class="home">
+ <router-link to="/screen/home"><img src="@/assets/images/screen/homeIcon.png" alt="" /></router-link>
+ </div>
+ <div class="loginOut">
+ <el-dropdown trigger="click">
+ <div class="user">
+ <img class="userImg" src="../assets/images/screen/userImg.png" alt="">
+ <img class="downIcon" src="../assets/images/screen/loginOut.png" alt="">
+ </div>
+ <template #dropdown>
+ <el-dropdown-menu>
+ <el-dropdown-item>
+ <span @click="toUserDetail" >个人中心</span>
+ </el-dropdown-item>
+ <el-dropdown-item divided>
+ <span @click="loginOut">退出登录</span>
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ </div>
+ </div>
+ </div>
<div class="nav">
- <div v-for="(item,index) in btnList" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div>
+ <div class="nav-content">
+ <div class="nav-content-l">
+ <div v-for="(item,index) in btnList.slice(0,4)" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div>
+ </div>
+ <div class="nav-content-r">
+ <div v-for="(item,index) in btnList.slice(4,8)" :key="index" @click="navTo(item)" class="plain" :class="item.url === route.path ? 'active' : ''">{{ item.name }}</div>
+ </div>
+ </div>
</div>
</div>
- <div class="content">
- <router-view></router-view>
- </div>
+ <div class="content"><router-view></router-view></div>
</div>
</template>
<script setup>
import{ useRouter,useRoute } from 'vue-router'
-import useUserStore from '@/store/modules/user.js'
-import {onMounted} from "vue";
+import {ElMessageBox} from "element-plus";
+import { removeToken } from '@/utils/auth'
-const userStore = useUserStore()
const router = useRouter()
const route = ref(useRoute())
-const btnList = ref([
- {name:'首页总览',url:'/screen/home'},
- {name:'生态流量',url:'/screen/ecology'},
- {name:'图像监测', url:'/screen/graphic'},
- {name:'设备管理',url:'/screen/shebei'},
- {name:'报警管理',url:'/screen/warning'},
- {name:'报表管理',url:'/screen/report'},
-])
+const loginOut = () =>{
+ ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ type: 'warning'
+ }).then((e) => {
+ removeToken()
+ window.location.reload();
+
+ }).catch(() => { });
+}
+
+const toUserDetail = () =>{
+ router.push('/userCenter')
+}
+
+const btnList = ref([])
const navTo = (item) =>{
router.push(item.url)
}
-onMounted(() => {
- if(userStore.userType == 1) {
- btnList.value.push({name:'系统管理',url:'/user'})
- }
-})
+//获取当前时间
+const nowTime = ref({})
+const now = new Date()
+const getTime = (now) => {
+ // 获取年月日时分秒
+ const year = now.getFullYear();
+ const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
+ const day = String(now.getDate()).padStart(2, '0');
+ const hours = String(now.getHours()).padStart(2, '0');
+ const minutes = String(now.getMinutes()).padStart(2, '0');
+ const seconds = String(now.getSeconds()).padStart(2, '0');
+ // 获取星期
+ const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
+ const weekday = weekdays[now.getDay()];
+
+ // 拼接成指定格式的字符串
+ return nowTime.value = {
+ date:`${year}.${month}.${day} ${weekday}`,
+ time:`${hours}:${minutes}:${seconds}`,
+ }
+}
+getTime(now)
+onMounted(()=>{
+ setInterval(()=>{
+ nowTime.value = getTime(new Date())
+ },1000)
+})
</script>
<style lang="scss" scoped>
.main{
+ background:rgba(8,28,65,1);
+ background-size: 100% 100%;
width: 100%;
height: 100%;
.header{
width: 100%;
- height: 14%;
- background-color: rgb(82, 120, 128);
- position: relative;
+ height: 10%;
.top{
- height: 60%;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 48px;
- font-weight: 700;
- color: #fff;
position: relative;
- z-index: 100;
+ width: 100%;
+ height: 6.5rem;
+ background-image: url("../assets/images/screen/head.png");
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ .title{
+ width: 57rem;
+ height: 2rem;
+ position: absolute;
+ left:calc(50% - 28.5rem);
+ text-align: center;
+ font-size: 1.6rem;
+ font-weight: 800;
+ color: #F9FBFF;
+ line-height: 70px;
+ text-shadow:0 0 3px rgba(255,255,255,0.7);
+ }
+ .time{
+ position: absolute;
+ width: 13rem;
+ top: 0.5rem;
+ left: 2rem;
+ display: flex;
+ justify-content: space-between;
+ line-height: 1.6rem;
+ span{
+ font-weight: 400;
+ color: #83D9F3;
+ }
+ span:last-child{
+ text-shadow:0 0 2px rgba(255,255,255,0.6);
+ }
+ }
+ .select{
+ width: 8rem;
+ height: 2rem;
+ position: absolute;
+ top: 0.1rem;
+ right: 8rem;
+ .select-item {
+ :deep(.el-select__wrapper) {
+ background: rgba(6, 47, 97, 0.8) !important;
+ border: solid #14528f 0.125rem;
+ height: 2rem;
+ }
+ :deep(.el-select__placeholder) {
+ color: #07a4ff;
+ font-size: 0.75rem;
+ }
+ }
+ }
+ .user-image{
+ position: absolute;
+ width: 6rem;
+ height: 2rem;
+ top: 0.5rem;
+ right: 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .home{
+ img{
+ width: 1.3rem;
+ height: 1.3rem;
+ }
+ }
+ .loginOut{
+ .user{
+ display: flex;
+ align-items: center;
+ .userImg{
+ width: 1.3rem;
+ height: 1.3rem;
+ margin-right: 0.5rem;
+ }
+ .downIcon{
+ margin-top: 0.1rem;
+ width: 0.8rem;
+ height: 0.6rem;
+ }
+ }
+ }
+ }
+ .left-icon{
+ position: absolute;
+ top: 50%;
+ img{
+ width: 28rem;
+ height: 1.87rem;
+ }
+ }
+ .right-icon{
+ position: absolute;
+ top: 50%;
+ right: 0;
+ img{
+ width: 28rem;
+ height: 1.87rem;
+ transform: scaleX(-1);
+ }
+ }
}
.nav{
- display: flex;
- height: 40%;
position: relative;
z-index: 100;
- .plain{
- flex-grow: 1;
- height: 100%;
+ margin-top: -4.5rem;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ .nav-content{
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-weight: 400;
+ font-size: 1.1rem;
+ color: #FFFFFF;
+ line-height: 3rem;
+ &-l{
+ width: 35%;
display: flex;
- align-items: center;
- justify-content: center;
- border: 1px solid #fff;
- background-color: rgba(23, 108, 229, 0.3);
- color: #fff;
- font-size: 22px;
- cursor: pointer;
+ }
+ &-r{
+ width: 35%;
+ display: flex;
+ }
+ .plain{
+ width: 10rem;
+ height: 3.5rem;
+ line-height: 3.5rem;
+ background-image: url("../assets/images/screen/btnbg.png");
+ background-size: 100% 100%;
+ text-align: center;
}
.active{
- background-color: #91BDDB;
+ background-image: url("../assets/images/screen/btnbg-active.png");
}
}
}
.content{
width: 100%;
- height: 86%;
+ height: 90%;
+ background: url("@/assets/images/screen/content_bg.png") no-repeat;
+ background-size: 100% 100%;
+ padding: 0 1.5rem 1.5rem;
}
}
</style>
\ No newline at end of file
diff --git a/src/utils/tool.js b/src/utils/tool.js
new file mode 100644
index 0000000..ffc9bc7
--- /dev/null
+++ b/src/utils/tool.js
@@ -0,0 +1,15 @@
+//防抖(立即执行)
+export function debounce(func, wait, immediate) {
+ let timeout;
+ return function(...args) {
+ const context = this;
+ const later = () => {
+ timeout = null;
+ if (!immediate) func.apply(context, args);
+ };
+ const callNow = immediate && !timeout;
+ clearTimeout(timeout);
+ timeout = setTimeout(later, wait);
+ if (callNow) func.apply(context, args);
+ };
+}
\ No newline at end of file
diff --git a/src/views/login.vue b/src/views/login.vue
index aaea793..c8bc658 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -4,7 +4,7 @@
<div class="contain">
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"
@keydown.enter="handleLogin">
- <h3 class="title">金川水电站生态流量监测系统</h3>
+ <h3 class="title">南京康尼地铁泵站监测服务系统</h3>
<el-form-item label="账号" prop="userName">
<el-input
style="height: 45px;"
diff --git a/src/views/screen/ecology/index.vue b/src/views/screen/ecology/index.vue
deleted file mode 100644
index 3939c28..0000000
--- a/src/views/screen/ecology/index.vue
+++ /dev/null
@@ -1,301 +0,0 @@
-<script setup>
-import {onMounted, reactive} from 'vue'
-import * as echarts from 'echarts/core';
-import { GridComponent, ToolboxComponent, TooltipComponent, TitleComponent } from 'echarts/components';
-import { LineChart, BarChart } from 'echarts/charts';
-import { UniversalTransition } from 'echarts/features';
-import { CanvasRenderer } from 'echarts/renderers';
-
-echarts.use([GridComponent, LineChart, BarChart, CanvasRenderer, UniversalTransition, ToolboxComponent, TooltipComponent, TitleComponent]);
-
-const state = reactive({
- zhakouVal: 1,
- dianzhanVal: 1
-})
-const zkssChartRef = ref(); //扎口瞬时图表
-const zkljChartRef = ref(); //扎口累计图表
-const dzssChartRef = ref(); //电站瞬时图表
-const dzljChartRef = ref(); //电站累计图表
-let zkssCharts = null;
-let zkljCharts = null;
-let dzssCharts = null;
-let dzljCharts = null;
-
-const selectOption = ref([
- { label: '本年', value: 1 },
- { label: '本季', value: 2 },
- { label: '本月', value: 3 },
- { label: '本周', value: 4 },
- { label: '本日', value: 5 },
-])
-
-// 获取折线图配置
-const getLineOption = (data, startColor, endColor) => {
- let xdata = [];
- let sdata = [];
- data.forEach(item => {
- xdata.push(item.name)
- sdata.push(item.value)
- })
- return {
- title: {
- text: '瞬时流量分析',
- textStyle: {
- color: '#fff'
- },
- padding: [0, 0, 0, 30]
- },
- tooltip: {
- trigger: 'axis',
- },
- grid: {
- left: 60,
- right: 60,
- bottom: 40
- },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: xdata,
- axisLabel: {
- color: '#fff',
- }
- },
- yAxis: {
- type: 'value',
- name: 'm³/s',
- nameTextStyle: {
- color: '#fff',
- },
- axisLabel: {
- color: '#fff',
- }
- },
- series: [
- {
- data: sdata,
- type: 'line',
- areaStyle: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: startColor // 0% 处的颜色
- }, {
- offset: 1, color: endColor // 100% 处的颜色
- }],
- global: false // 缺省为 false
- }
- }
- }
- ]
- }
-}
-// 获取柱状图配置
-const getBarOption = (data, color) => {
- let xdata = [];
- let sdata = [];
- data.forEach(item => {
- xdata.push(item.name)
- sdata.push(item.value)
- })
- return {
- title: {
- text: '瞬时流量分析',
- textStyle: {
- color: '#fff'
- },
- padding: [0, 0, 0, 30]
- },
- tooltip: {
- trigger: 'axis',
- },
- grid: {
- left: 60,
- right: 60,
- bottom: 40
- },
- xAxis: {
- type: 'category',
- data: xdata,
- axisLabel: {
- color: '#fff',
- }
- },
- yAxis: {
- type: 'value',
- name: '10⁸m³',
- nameTextStyle: {
- color: '#fff',
- },
- axisLabel: {
- color: '#fff',
- }
- },
- series: [
- {
- data: sdata,
- type: 'bar',
- itemStyle: {
- color: color
- }
- }
- ]
- }
-}
-
-// 新扎口图表
-const initZkLine = () => {
- if(zkssChartRef.value) {
- zkssCharts = echarts.init(zkssChartRef.value);
- let data = [
- { name: '一月', value: 36 },
- { name: '二月', value: 66 },
- { name: '三月', value: 122 },
- { name: '四月', value: 78 },
- { name: '五月', value: 63 },
- ]
- const option = getLineOption(data, 'rgba(94,229,92,1)', 'rgba(94,229,92,0.2)')
- zkssCharts.setOption(option)
- }
-}
-const initZkBar = () => {
- if(zkljChartRef.value) {
- zkljCharts = echarts.init(zkljChartRef.value);
- let data = [
- { name: '一月', value: 36 },
- { name: '二月', value: 66 },
- { name: '三月', value: 122 },
- { name: '四月', value: 78 },
- { name: '五月', value: 63 },
- ]
- const option = getBarOption(data, 'rgba(94,229,92,1)')
- zkljCharts.setOption(option)
- }
-}
-
-// 电站图表
-const initDzLine = () => {
- if(dzssChartRef.value) {
- dzssCharts = echarts.init(dzssChartRef.value);
- let data = [
- { name: '一月', value: 36 },
- { name: '二月', value: 66 },
- { name: '三月', value: 122 },
- { name: '四月', value: 78 },
- { name: '五月', value: 63 },
- ]
- const option = getLineOption(data, 'rgba(23,108,229,1)', 'rgba(23,108,229,0.2)')
- dzssCharts.setOption(option)
- }
-}
-const initDzBar = () => {
- if(dzljChartRef.value) {
- dzljCharts = echarts.init(dzljChartRef.value);
- let data = [
- { name: '一月', value: 36 },
- { name: '二月', value: 66 },
- { name: '三月', value: 122 },
- { name: '四月', value: 78 },
- { name: '五月', value: 63 },
- ]
- const option = getBarOption(data, 'rgba(23,108,229,1)')
- dzljCharts.setOption(option)
- }
-}
-
-const initCharts = () => {
- initZkLine()
- initZkBar()
- initDzLine()
- initDzBar()
-}
-
-onMounted(() => {
- initCharts()
-})
-</script>
-
-<template>
- <div class="ecology">
- <div class="ecology-l item">
- <div class="item-t">
- <div class="title">新扎口流量监测点</div>
- <el-select
- v-model="state.zhakouVal"
- class="m-2"
- placeholder="Select"
- size="large"
- style="width: 250px"
- >
- <el-option
- v-for="item in selectOption"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </div>
- <div class="item-chart-ss" ref="zkssChartRef"></div>
- <div class="item-chart-lj" ref="zkljChartRef"></div>
- </div>
- <div class="ecology-r item">
- <div class="item-t">
- <div class="title">水电站流量监测点</div>
- <el-select
- v-model="state.dianzhanVal"
- class="m-2"
- placeholder="Select"
- size="large"
- style="width: 250px"
- >
- <el-option
- v-for="item in selectOption"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </div>
- <div class="item-chart-ss" ref="dzssChartRef"></div>
- <div class="item-chart-lj" ref="dzljChartRef"></div>
- </div>
- </div>
-</template>
-
-<style scoped lang="scss">
-.ecology{
- height: 100%;
- background: linear-gradient( 180deg, #91BDDB 0%, rgba(145,189,219,0.5) 100%);
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 30px;
- .item{
- width: 48%;
- height: 95%;
- background: rgba(23,108,229,0.3);
- border: 1px solid #176CE5;
- .item-t{
- height: 10%;
- padding: 0 30px;
- display: flex;
- align-items: center;
- .title{
- font-size: 36px;
- color: #fff;
- margin-right: 30px;
- }
- }
- .item-chart-ss{
- height: 45%;
- }
- .item-chart-lj{
- height: 45%
- }
- }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/screen/graphic/index.vue b/src/views/screen/graphic/index.vue
deleted file mode 100644
index 6893c19..0000000
--- a/src/views/screen/graphic/index.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
- <div>
- 图像监测
- </div>
-</template>
-
-<style scoped lang="scss">
-
-</style>
\ No newline at end of file
diff --git a/src/views/screen/home/index.vue b/src/views/screen/home/index.vue
index 5d8d975..8e19648 100644
--- a/src/views/screen/home/index.vue
+++ b/src/views/screen/home/index.vue
@@ -1,146 +1,635 @@
<template>
- <div class="home">
- <div class="home-bg"></div>
- <div class="home-c">
- <div class="point">
- <div class="point-address"></div>
- <div class="point-message">
- <div class="video-box">
- <el-icon><VideoPlay /></el-icon>
- </div>
- <div class="info-box">
- <div class="info-t">水电站流量监测点</div>
- <div class="info-sw">水位：<span>500</span>m</div>
- <div class="info-ls">流速：<span>15</span>m/s</div>
- <div class="info-ssls">瞬时流速：<span>150</span>m/s</div>
- <div class="info-ljll">
- 累计流量：
- <el-select
- v-model="selectll"
- class="m-2"
- placeholder="Select"
- size="small"
- style="width: 240px"
- >
- <el-option
- v-for="(item, idx) in liuliangOptions"
- :key="idx"
- :label="item.label"
- :value="idx"
- />
- </el-select>
- <span>{{ liuliangOptions[selectll].value }}</span>m/s
+ <div class="container">
+ <div class="left">
+ <div class="liuliang">
+ <div class="liuliang-title">流量统计</div>
+ <div class="liuliang-c">流量</div>
+ </div>
+ <div class="gongdian">
+ <div class="gongdian-title">流量统计</div>
+ <div class="gongdian-c">流量</div>
+ </div>
+ </div>
+ <div class="center" >
+ <!-- 地图窗口 -->
+ <div class="map">
+ <div class="point-box" v-if="tucengVal === 0">
+ <div class="apoint" v-for="(item, index) in pointList" :key="index"
+ :style="`left: ${item?.left}%; top: ${item?.top}%`" @click="clickMsgFun(index)">
+ <img src="../../../assets/images_lc/a-point.png" alt="" />
+ <div class="message" v-show="showMsg === index">
+ <div class="message-item">
+ <span class="name">泵房名称:</span>
+ <span class="val">{{item.name}}</span>
+ </div>
+ <div class="message-item">
+ <span class="name">水浸状态:</span>
+ <span class="val-status">{{item.shuijin}}</span>
+ </div>
+ <div class="message-item">
+ <span class="name">运行时长:</span>
+ <span class="val-status">{{item.longtime}}</span>
+ </div>
+ <div class="message-item">
+ <span class="name">瞬时流量:</span>
+ <span class="val-status">{{item.ssll}}</span>
+ </div>
+ <div class="message-item">
+ <span class="name">累计流量:</span>
+ <span class="val-status">{{item.ljll}}</span>
+ </div>
+ <div class="message-item">
+ <span class="name">流速:</span>
+ <span class="val-status">{{item.ls}}</span>
+ </div>
+ <div class="message-item">
+ <span class="name">启泵次数:</span>
+ <span class="val-status">{{item.qdnumber}}</span>
+ </div>
+ <div class="message-item">
+ <span class="name">1号水池水位:</span>
+ <span class="val-status">{{item.oneWater}}</span>
+ </div>
+ <div class="message-item">
+ <span class="name">2号水池水位:</span>
+ <span class="val-status">{{item.twoWater}}</span>
+ </div>
+ <div class="message-item">
+ <span class="name">其他详细信息:</span>
+ <router-link class="val" to="/screen/pumpInfo">点击跳转</router-link>
+ </div>
</div>
</div>
+ </div>
+ </div>
+ </div>
+ <div class="right">
+ <!-- 实时监控 -->
+ <div class="jiankong">
+ <div class="jiankong-t">实时监控</div>
+ <div class="jiankong-c">
+ <div class="switch">
+ <div class="switch-l">泵房监控</div>
+ <div class="switch-r">
+ <div class="more" :class="{active: selectType==='two'}" @click="changeType('two')">多屏模式 </div>
+ <div class="single" :class="{active: selectType==='single'}" @click="changeType('single')">单屏模式</div>
+ </div>
+ </div>
+ <div class="video-box">
+ <div class="two" v-if="selectType==='two'">
+ <div class="list" v-for="(item, index) in showList" :key="index">
+ <div class="item" v-if="item?.deviceId">
+ <VideoPlayer :item="item" />
+ </div>
+ <div v-else class="item"></div>
+ </div>
+ </div>
+ <div class="single" v-else>
+ <div class="item" v-if="showList[0]?.deviceId">
+ <VideoPlayer :item="showList[0]" />
+ </div>
+ <div v-else class="item"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 报警记录 -->
+ <div class="warnRecord">
+ <div class="warnRecord-title">报警记录</div>
+ <div class="warnRecord-info">
+ <div class="into-t">报警信息</div>
+ <div class="info-list">
+ <div class="item" v-for="(item, index) in warnList" :key="index">
+ <el-tooltip
+ effect="dark"
+ :content="item.pointName"
+ placement="top"
+ >
+ {{item.pointName}}
+ </el-tooltip>
+ <el-tooltip
+ effect="dark"
+ :content="item.facilityName"
+ placement="top"
+ >
+ {{item.facilityName}}
+ </el-tooltip>
+ <el-tooltip
+ effect="dark"
+ :content="item.description"
+ placement="top"
+ >
+ {{item.description}}
+ </el-tooltip>
+ </div>
+ </div>
+ </div>
+ <div class="warnRecord-datashow">
+ <div ref="warningRef" class="warning" />
</div>
</div>
</div>
</div>
</template>
-
-<script setup>
-
-import {ref} from "vue";
-
-const selectll = ref(0)
-
-const liuliangOptions = [
- { label: '总计流量', value: 500 },
- { label: '日累计流量', value: 1000 },
- { label: '周累计流量', value: 10000 },
- { label: '月累计流量', value: 300000 },
- { label: '年累计流量', value: 3600000 },
-]
-
-</script>
+<script setup lang="ts">
+import { use } from "echarts/core";
+import * as echarts from 'echarts/core';
+import {GridComponent, TooltipComponent, LegendComponent} from "echarts/components";
+import { LineChart, PieChart } from "echarts/charts";
+import { UniversalTransition, LabelLayout } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
+import {onMounted, reactive, ref} from "vue";
+import VideoPlayer from "@/components/VideoPlayer/VideoPlayer.vue";
-<style scoped lang="scss">
-.home{
- height: 100%;
- .home-bg{
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background: url("@/assets/images/map-bg.png") no-repeat;
- background-size: 100% 100%;
- z-index: 11;
+use([
+ GridComponent,
+ LineChart,
+ CanvasRenderer,
+ UniversalTransition,
+ TooltipComponent,
+ LegendComponent,
+ PieChart,
+ CanvasRenderer,
+ LabelLayout,
+]);
+
+const openStatus = reactive({
+ bengfang: false,
+ shuixiang: false,
+ jieguan: false
+})
+
+const mapSize = ref(90); // 初始化地图大小为100
+const gonghaoRef = ref();
+const liuliangRef = ref();
+const warningRef = ref();
+let gonghaoCharts = null;
+let liuliangCharts = null;
+let warningCharts = null;
+
+const tucengVal = ref(0);
+const selectType = ref('single')
+const videoList = ref([])
+const showList = ref([])
+const warnList = ref([])
+const showMsg = ref()
+const pointList = ref([
+ { name: '碧桂园', shuijin: '正常', longtime: '1280天13小时59分', ssll: '+10㎡/s', ljll: '㎡', ls: '10m/s', qdnumber: '10次', oneWater: '2.26m', twoWater: '4.26m', left: 40, top: 22 },
+ { name: '龙湖公馆', shuijin: '正常', longtime: '1280天13小时59分', ssll: '+10㎡/s', ljll: '㎡', ls: '10m/s', qdnumber: '10次', oneWater: '2.26m', twoWater: '4.26m', left: 52, top: 35 },
+])
+const tongjiTable = reactive({
+ selectName: '',
+ tongjiList: [],
+ namelist: []
+})
+
+const clickMsgFun = (index: number) => {
+ showMsg.value = showMsg.value === index ? null : index;
+}
+
+// 获取定位随机值
+const getRandom = (min, max) => {
+ return Math.floor(Math.random() * (max - min) + min);
+}
+
+const setOpenStatus = (type: string) => {
+ switch (type) {
+ case "bengfang":
+ openStatus.bengfang = openStatus.bengfang ? false : true;
+ break;
+ case "shuixiang":
+ openStatus.shuixiang = openStatus.shuixiang ? false : true;
+ break;
+ case "jieguan":
+ openStatus.jieguan = openStatus.jieguan ? false : true;
+ break
}
- .home-c{
- width: 100%;
- height: 100%;
- position: relative;
- z-index: 20;
- .point{
- position: absolute;
- left: 58%;
- top: 30%;
- .point-address{
- width: 35px;
- height: 40px;
- background: url("@/assets/images/point.png") no-repeat;
- background-size: 100% 100%;
- }
- .point-message{
- width: 600px;
- height: 200px;
- background: url("@/assets/images/messageInfo-box.png") no-repeat;
- background-size: 100% 100%;
- position: absolute;
- left: -600px;
- top: -100px;
- padding: 30px 50px 30px 30px;
- color: #fff;
- display: flex;
- align-items: center;
- gap: 20px;
- .video-box{
- flex-shrink: 0;
- width: 200px;
- height: 138px;
- line-height: 138px;
- text-align: center;
- font-size: 38px;
- background: #cccb40;
+}
+
+// 图表实例
+const setGonghaoCharts = (xData, sData) => {
+ if(gonghaoRef.value) {
+ gonghaoCharts = echarts.init(gonghaoRef.value);
+ const option = {
+ grid: {
+ top: 30,
+ bottom: 40,
+ left: 40
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: xData,
+ axisLabel: {
+ color: '#fff',
+ fontSize: '0.5rem',
+ rotate: 30,
+ },
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ color: '#fff',
+ fontSize: '0.5rem',
}
- .info-box{
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- .info-t{
- font-size: 20px;
- }
- .info-ljll{
- display: flex;
- align-items: center;
- :deep(.el-select){
- width: 100px !important;
- .el-select__wrapper{
- color: #fff;
- background: transparent;
- .el-select__selected-item{
- color: #fff;
- }
- .el-select__suffix .el-icon{
- color: #fff;
- }
- &:hover{
- box-shadow: none;
- }
- }
+ },
+ tooltip: {
+ show: true
+ },
+ series: [
+ {
+ data: sData,
+ type: 'line',
+ areaStyle: {}
+ }
+ ]
+ };
+ gonghaoCharts.setOption(option);
+ }
+}
+const setLiuliangCharts = (xData, sData) => {
+ if(liuliangRef.value) {
+ liuliangCharts = echarts.init(liuliangRef.value);
+ const option = {
+ grid: {
+ top: 30,
+ bottom: 40,
+ left: 40
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: xData,
+ axisLabel: {
+ color: '#fff',
+ fontSize: '0.5rem',
+ rotate: 30,
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ color: '#fff',
+ fontSize: '0.5rem',
+ }
+ },
+ tooltip: {
+ show: true
+ },
+ series: [
+ {
+ data: sData,
+ type: 'line',
+ areaStyle: {}
+ }
+ ]
+ };
+ liuliangCharts.setOption(option);
+ }
+}
+const setWarningCharts = (data) => {
+ if(warningRef.value) {
+ warningCharts = echarts.init(warningRef.value);
+ const option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: '50%',
+ data: data,
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
- span{
- display: inline-block;
- padding: 0 10px;
+ }
+ ]
+ }
+ warningCharts.setOption(option);
+ }
+}
+
+// 获取功耗数据
+const getGonghaoData = () => {
+ getHomeGonghao().then(res => {
+ let xdata = [];
+ let sdata = [];
+ let newArr = res.data.length > 5 ? res.data.slice(0,5) : res.data
+ newArr.forEach((item) => {
+ xdata.push(item.pointName)
+ sdata.push(item.value)
+ })
+ setGonghaoCharts(xdata, sdata)
+ })
+}
+// 获取流量统计
+const getLiuliangData = () => {
+ getHomeLiuliang().then(res => {
+ let xdata = [];
+ let sdata = [];
+ let newArr = res.data.length > 5 ? res.data.slice(0,5) : res.data
+ newArr.forEach((item) => {
+ xdata.push(item.pointName)
+ sdata.push(item.value)
+ })
+ setLiuliangCharts(xdata, sdata)
+ })
+}
+
+// 切换播放模式
+const changeType = (type) => {
+ selectType.value = type
+ showList.value = []
+ if(type === 'two') {
+ showList.value = videoList.value.slice(0, 2).concat(Array(4 - videoList.value.length).fill(null))
+ } else {
+ showList.value = videoList.value.slice(0, 1)
+ }
+}
+
+// 获取报警数据
+const getWarning = () => {
+ getHomeWarning().then(res => {
+ warnList.value = res.data.alarmHistoryVOList
+ let data = [
+ { value: res.data.facilityCount, name: '设备启动异常' },
+ { value: res.data.waterEnterCount, name: '进水压力异常' },
+ { value: res.data.waterOutCount, name: '出口压力异常' },
+ ]
+ setWarningCharts(data)
+ })
+}
+
+// 获取统计数据
+const getTongjiData = () => {
+ getHomeTongji().then(res => {
+ tongjiTable.tongjiList = res.data.statementValueList;
+ tongjiTable.namelist = res.data.statementNameList;
+ })
+}
+
+const clearName = () => {
+ tongjiTable.selectName = ''
+}
+
+onMounted(() => {
+ // getGonghaoData()
+ // getLiuliangData()
+ // getWarning()
+ // getTongjiData()
+})
+</script>
+
+<style lang="scss" scoped>
+
+// 地图动态变化样式 不能单独抽离到scss文件中
+.container {
+ background-image: url("@/assets/images_lc/map.png");
+ // 动态获取图片大小
+ background-size: v-bind('mapSize + "%"');
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+ transition: background-size 0.3s ease;
+}
+.homeSelectName{
+ .el-radio-group{
+ flex-direction: column;
+ align-items: flex-start;
+ .el-radio{
+ font-size: 1rem;
+ }
+ }
+ .clear{
+ margin: 5px 30px 10px 20px;
+ text-align: right;
+ color: #3aa8ef;
+ font-size: 0.8rem;
+ cursor: pointer;
+ }
+}
+
+.container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: space-between;
+ color: white;
+ overflow: hidden;
+
+ .left {
+ width: 20%;
+ flex-shrink: 0;
+ flex-grow: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ .liuliang{
+ height: 45%;
+ background: url("@/assets/images_lc/realTimeMonitoring.png") no-repeat;
+ background-size: 100% 100%;
+ &-title {
+ background-image: url('@/assets/images_lc/title_font.png');
+ padding-left: 16%;
+ font-size: 1.2rem;
+ }
+ }
+ .gongdian{
+ height: 55%;
+ background: url("@/assets/images_lc/warnRecord.png") no-repeat;
+ background-size: 100% 100%;
+ &-title {
+ background-image: url('@/assets/images_lc/title_font.png');
+ padding-left: 16%;
+ font-size: 1.2rem;
+ }
+ }
+ }
+
+ .center {
+ width: 58%;
+ display: flex;
+ flex-direction: column;
+ .map {
+ height: 100%;
+ .point-box{
+ width: 100%;
+ height: 100%;
+ position: relative;
+ .apoint{
+ position: absolute;
+ img{
+ width: 1.5rem;
+ height: 3rem
+ }
+ .message{
+ width: 12rem;
+ height: 16rem;
+ background: url("@/assets/images_lc/point-message.png") no-repeat;
+ background-size: 100% 100%;
+ padding: 0 0.2rem;
+ position: absolute;
+ right: -12rem;
+ top: 0;
+ z-index: 100;
+ .message-item{
+ font-size: 0.7rem;
+ padding: 0.3rem 0 0.3rem 0.9rem;
+ .name{
+ margin-right: 0.3rem;
+ }
+ .val-status{
+ color: #22E195;
+ }
+ }
}
}
}
}
}
+
+ .right {
+ width: 20%;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ .jiankong {
+ height: 40%;
+ background-image: url('@/assets/images_lc/realTimeMonitoring.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ &-t {
+ background-image: url('@/assets/images_lc/title_font.png');
+ padding-left: 16%;
+ font-size: 1.2rem;
+ }
+
+ &-c {
+ height: 90%;
+ .switch {
+ height: 15%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 1.5rem;
+
+ .switch-l {
+ font-weight: 700;
+ }
+ .switch-r{
+ display: flex;
+ gap: 1rem;
+ }
+ .more {
+ width: 6rem;
+ height: 1.5rem;
+ line-height: 1.5rem;
+ text-align: center;
+ background-image: url('@/assets/images_lc/switch.png');
+ background-size: 100% 100%;
+ color: #cfcfcf;
+ font-size: 0.9rem;
+ }
+
+ .single {
+ width: 6rem;
+ height: 1.5rem;
+ line-height: 1.5rem;
+ text-align: center;
+ background-image: url('@/assets/images_lc/switch.png');
+ background-size: 100% 100%;
+ color: #cfcfcf;
+ font-size: 0.9rem;
+ }
+ .active{
+ color: #fff;
+ }
+ }
+ .video-box{
+ height: 85%;
+ padding: 0 1rem;
+ .two{
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ .list{
+ width: 49%;
+ height: 100%;
+ .item{
+ height: 100%;
+ background-color: #000;
+ }
+ }
+ }
+ .single{
+ width: 100%;
+ height: 100%;
+ .item{
+ height: 95%;
+ width: 100%;
+ background-color: #000;
+ }
+ }
+ }
+ }
+ }
+
+ .warnRecord {
+ height: 60%;
+ background-image: url('@/assets/images_lc/warnRecord.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ display: flex;
+ flex-direction: column;
+ .warnRecord-title {
+ background-image: url('@/assets/images_lc/title_font.png');
+ padding-left: 16%;
+ font-size: 1.3rem;
+ }
+ .warnRecord-info {
+ width: 90%;
+ height: 50%;
+ margin: auto;
+ overflow-y: scroll;
+ &::-webkit-scrollbar{
+ display: none;
+ }
+ .into-t{
+ height: 15%;
+ font-size: 1.2rem;
+ padding-top: 0.3rem;
+ }
+ .info-list{
+ height: 85%;
+ .item{
+ padding: 0.5rem 0;
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.8rem;
+ :deep(.el-only-child__content){
+ width: 30%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+ }
+ }
+ .warnRecord-datashow {
+ height: 50%;
+ .warning {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+ }
}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/screen/pumpInfo/index.vue b/src/views/screen/pumpInfo/index.vue
new file mode 100644
index 0000000..ac6d161
--- /dev/null
+++ b/src/views/screen/pumpInfo/index.vue
@@ -0,0 +1,222 @@
+<script setup>
+
+const list = [
+ {
+ name: '康妮一号泵房',
+ data: {
+ longtime: '1280天13小时59分',
+ shuijin: '正常',
+ ssll: '+10m³/h',
+ ljll: '1021m³',
+ ls: '10m/s',
+ qdnumber: '10次',
+ dianya: '15v',
+ dianliu: '15A',
+ power: '100w',
+ dianneng: '500kw·h',
+ onewater: '226m',
+ twowater: '426m',
+ adianya: '380v',
+ adianliu: '0.15A',
+ bdianya: '380v',
+ bdianliu: '0.15A',
+ cdianya: '380v',
+ cdianliu: '0.15A',
+ onepumpNumber: 10,
+ onepumpStatus: 1,
+ twopumpNumber: 10,
+ twopumpStatus: 0,
+ threepumpNumber: 10,
+ threepumpStatus: 0,
+ fourpumpNumber: 10,
+ fourpumpStatus: 0,
+ }
+ },
+ {
+ name: '康妮一号泵房',
+ data: {
+ longtime: '1280天13小时59分',
+ shuijin: '正常',
+ ssll: '+10m³/h',
+ ljll: '1021m³',
+ ls: '10m/s',
+ qdnumber: '10次',
+ dianya: '15v',
+ dianliu: '15A',
+ power: '100w',
+ dianneng: '500kw·h',
+ onewater: '226m',
+ twowater: '426m',
+ adianya: '380v',
+ adianliu: '0.15A',
+ bdianya: '380v',
+ bdianliu: '0.15A',
+ cdianya: '380v',
+ cdianliu: '0.15A',
+ onepumpNumber: 10,
+ onepumpStatus: 1,
+ twopumpNumber: 10,
+ twopumpStatus: 0,
+ threepumpNumber: 10,
+ threepumpStatus: 0,
+ fourpumpNumber: 10,
+ fourpumpStatus: 0,
+ }
+ }
+]
+
+</script>
+
+<template>
+ <div class="info">
+ <div class="item" v-for="(item, index) in list" :key="index">
+ <div class="item-t">{{ item.name }}</div>
+ <div class="item-c">
+ <div class="list">
+ <div class="lc">
+ <span class="name">运行时长</span>
+ <span class="val">{{item.data.longtime}}</span>
+ </div>
+ <div class="lc">
+ <span class="name">水浸</span>
+ <span class="val">{{item.data.shuijin}}</span>
+ </div>
+ <div class="lc">
+ <span class="name">瞬时流量</span>
+ <span class="val">{{item.data.ssll}}</span>
+ </div>
+ <div class="lc">
+ <span class="name">累计流量</span>
+ <span class="val">{{item.data.ljll}}</span>
+ </div>
+ <div class="lc">
+ <span class="name">流 速</span>
+ <span class="val">{{item.data.ls}}</span>
+ </div>
+ <div class="lc">
+ <span class="name">启泵次数</span>
+ <span class="val">{{item.data.qdnumber}}</span>
+ </div>
+ <div class="lc">
+ <span class="name">水泵电压</span>
+ <span class="val">{{item.data.dianya}}</span>
+ </div>
+ <div class="lc">
+ <span class="name">水泵电流</span>
+ <span class="val">{{item.data.dianliu}}</span>
+ </div>
+ <div class="lc">
+ <span class="name">水泵功率</span>
+ <span class="val">{{item.data.power}}</span>
+ </div>
+ <div class="lc">
+ <span class="name">总 电 能</span>
+ <span class="val">{{item.data.dianneng}}</span>
+ </div>
+ <div class="lc">
+ <span class="name">1号泵组</span>
+ <span class="status">{{ !!item.data.onepumpStatus ? '开' : '关' }}</span>
+ <span class="val">{{item.data.onepumpNumber}}次</span>
+ </div>
+ <div class="lc">
+ <span class="name">1号泵组</span>
+ <span class="status">{{ !!item.data.twopumpStatus ? '开' : '关' }}</span>
+ <span class="val">{{item.data.twopumpNumber}}次</span>
+ </div>
+ <div class="lc">
+ <span class="name">1号泵组</span>
+ <span class="status">{{ !!item.data.threepumpStatus ? '开' : '关' }}</span>
+ <span class="val">{{item.data.threepumpNumber}}次</span>
+ </div>
+ <div class="lc">
+ <span class="name">1号泵组</span>
+ <span class="status">{{ !!item.data.fourpumpStatus ? '开' : '关' }}</span>
+ <span class="val">{{item.data.fourpumpNumber}}次</span>
+ </div>
+ <div class="lc">
+ <span class="name">1号水池液位</span>
+ <span class="val">{{item.data.onewater}}</span>
+ </div>
+ <div class="lc">
+ <span class="name">2号水池液位</span>
+ <span class="val">{{item.data.twowater}}</span>
+ </div>
+ <div class="lc">
+ <span class="name">市电供电A相电压</span>
+ <span class="val">{{item.data.adianya}}</span>
+ </div>
+ <div class="lc">
+ <span class="name">市电供电A相电流</span>
+ <span class="val">{{item.data.adianliu}}</span>
+ </div>
+ <div class="lc">
+ <span class="name">市电供电B相电压</span>
+ <span class="val">{{item.data.bdianya}}</span>
+ </div>
+ <div class="lc">
+ <span class="name">市电供电B相电流</span>
+ <span class="val">{{item.data.bdianliu}}</span>
+ </div>
+ <div class="lc">
+ <span class="name">市电供电C相电压</span>
+ <span class="val">{{item.data.cdianya}}</span>
+ </div>
+ <div class="lc">
+ <span class="name">市电供电C相电流</span>
+ <span class="val">{{item.data.cdianliu}}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style scoped lang="scss">
+.info{
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 5rem;
+ .item{
+ width: 48%;
+ height: 98%;
+ background: url("@/assets/images_lc/info-bg.png") no-repeat;
+ background-size: 100% 100%;
+ &-t{
+ color: #fff;
+ background: url('@/assets/images_lc/title_font.png') no-repeat;
+ padding-left: 8%;
+ font-size: 1.2rem;
+ }
+ &-c{
+ height: calc(100% - 2rem);
+ padding: 1rem;
+ .list{
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ .lc{
+ width: 50%;
+ padding: 0.75rem 0;
+ color: #fff;
+ font-size: 1.3rem;
+ .name{
+ display: inline-block;
+ width: 12rem;
+ }
+ .status{
+ display: inline-block;
+ width: 6rem;
+ color: #1ab394;
+ }
+ .val{
+ color: #1ab394;
+ }
+ }
+ }
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/screen/report/index.vue b/src/views/screen/report/index.vue
deleted file mode 100644
index 678bffa..0000000
--- a/src/views/screen/report/index.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
- <div>
- 报表管理
- </div>
-</template>
-
-<style scoped lang="scss">
-
-</style>
\ No newline at end of file
diff --git a/src/views/screen/shebei/index.vue b/src/views/screen/shebei/index.vue
deleted file mode 100644
index 2ccc251..0000000
--- a/src/views/screen/shebei/index.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
- <div>
- 设备管理
- </div>
-</template>
-
-<style scoped lang="scss">
-
-</style>
\ No newline at end of file
diff --git a/src/views/screen/warning/index.vue b/src/views/screen/warning/index.vue
deleted file mode 100644
index e80b3ed..0000000
--- a/src/views/screen/warning/index.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
- <div>
- 预警管理
- </div>
-</template>
-
-<style scoped lang="scss">
-
-</style>
\ No newline at end of file
--
Gitblit v1.9.3