Browse Source

1.进入系统直接大屏展示F11效果

2.温度监测系统-设备监测采用大屏展示
3.风柜监测系统-风机的启停控制、远程手动启停采用大按钮
4.生活热水流程图添加多两个供水泵(ps工作)
meizhou
selia-zx 3 weeks ago
parent
commit
f20e9edd11
  1. 29
      src/App.vue
  2. BIN
      src/assets/flowimg/supply-move.gif
  3. BIN
      src/assets/flowimg/supply-nomove.png
  4. 98
      src/permission.js
  5. 25
      src/store/modules/permission.js
  6. 53
      src/utils/fullscreen.js
  7. 4
      src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue
  8. 121
      src/views/aircAndWindc/awSysMonitor/components/damperMonitor.vue
  9. 102
      src/views/aircAndWindc/awSysMonitor/components/normalMonitor.vue
  10. 4
      src/views/boilerSys/boilerMonitor/boilerMonitorDetails.vue
  11. 4
      src/views/centerairC/sysMonitor/hostDetails.vue
  12. 4
      src/views/centerairC/sysMonitor/monitorCenter.vue
  13. 4
      src/views/centerairC/sysMonitor/performance.vue
  14. 62
      src/views/hotWater/waterMonitor/waterMonitorDetails.vue
  15. 24
      src/views/index.vue
  16. 1021
      src/views/temSys/temMonitor/index copy.vue
  17. 1017
      src/views/temSys/temMonitor/index.vue
  18. 1415
      src/views/temSys/temMonitor/temMonitorDeatils.vue

29
src/App.vue

@ -7,18 +7,37 @@
<script>
import ThemePicker from "@/components/ThemePicker";
import { exitFullscreen, isFullscreen } from "@/utils/fullscreen";
export default {
name: "App",
components: { ThemePicker },
metaInfo() {
return {
title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
titleTemplate: title => {
return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
}
}
title:
this.$store.state.settings.dynamicTitle &&
this.$store.state.settings.title,
titleTemplate: (title) => {
return title
? `${title} - ${process.env.VUE_APP_TITLE}`
: process.env.VUE_APP_TITLE;
},
};
},
mounted() {
// Esc 退
window.addEventListener("keydown", this.handleKeyDown);
},
beforeDestroy() {
window.removeEventListener("keydown", this.handleKeyDown);
},
methods: {
handleKeyDown(event) {
if (event.key === "Escape" && isFullscreen()) {
exitFullscreen();
}
},
},
};
</script>
<style scoped>

BIN
src/assets/flowimg/supply-move.gif

Binary file not shown.

Before

Width:  |  Height:  |  Size: 248 KiB

After

Width:  |  Height:  |  Size: 335 KiB

BIN
src/assets/flowimg/supply-nomove.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 135 KiB

After

Width:  |  Height:  |  Size: 187 KiB

98
src/permission.js

@ -1,63 +1,87 @@
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'
import { isPathMatch } from '@/utils/validate'
import { isRelogin } from '@/utils/request'
import router from "./router";
import store from "./store";
import { Message } from "element-ui";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { getToken } from "@/utils/auth";
import { isPathMatch } from "@/utils/validate";
import { isRelogin } from "@/utils/request";
import {
isFullscreenSupported,
requestFullscreen,
isFullscreen,
} from "@/utils/fullscreen";
NProgress.configure({ showSpinner: false });
NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/register']
const whiteList = ["/login", "/register"];
const isWhiteList = (path) => {
return whiteList.some(pattern => isPathMatch(pattern, path))
return whiteList.some((pattern) => isPathMatch(pattern, path));
};
let userManuallyExitedFullscreen = false;
// 监听全屏状态变化事件
document.addEventListener("fullscreenchange", () => {
if (!isFullscreen()) {
userManuallyExitedFullscreen = true;
}
});
router.beforeEach((to, from, next) => {
NProgress.start()
NProgress.start();
if (getToken()) {
to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
to.meta.title && store.dispatch("settings/setTitle", to.meta.title);
/* has token*/
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
if (to.path === "/login") {
next({ path: "/" });
NProgress.done();
} else if (isWhiteList(to.path)) {
next()
if (isFullscreenSupported() && !userManuallyExitedFullscreen) {
const element = document.documentElement;
requestFullscreen(element);
}
next();
} else {
if (store.getters.roles.length === 0) {
isRelogin.show = true
isRelogin.show = true;
// 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(() => {
isRelogin.show = false
store.dispatch('GenerateRoutes').then(accessRoutes => {
store
.dispatch("GetInfo")
.then(() => {
isRelogin.show = false;
store.dispatch("GenerateRoutes").then((accessRoutes) => {
// 根据roles权限生成可访问的路由表
router.addRoutes(accessRoutes) // 动态添加可访问路由表
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
})
}).catch(err => {
store.dispatch('LogOut').then(() => {
Message.error(err)
next({ path: '/' })
})
router.addRoutes(accessRoutes); // 动态添加可访问路由表
next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
});
})
.catch((err) => {
store.dispatch("LogOut").then(() => {
Message.error(err);
next({ path: "/" });
});
});
} else {
next()
if (isFullscreenSupported() && !userManuallyExitedFullscreen) {
const element = document.documentElement;
requestFullscreen(element);
}
next();
}
}
} else {
// 没有token
if (isWhiteList(to.path)) {
// 在免登录白名单,直接进入
next()
next();
} else {
next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页
NProgress.done()
next(`/login?redirect=${encodeURIComponent(to.fullPath)}`); // 否则全部重定向到登录页
NProgress.done();
}
}
})
});
router.afterEach(() => {
NProgress.done()
})
NProgress.done();
});

25
src/store/modules/permission.js

@ -193,6 +193,31 @@ const permission = {
} else {
// console.log("不满足条件");
}
// 温度监测
const result5 = sidebarRoutes.find((item) => item.name === "TemSys");
if (result5) {
// 定义要添加的多个路由对象数组
const additionalRoutes5 = [
{
path: "/temMonitorDeatils",
name: "temMonitorDeatils",
hidden: true,
component: () =>
import("@/views/temSys/temMonitor/temMonitorDeatils"),
meta: { title: "温度监测", icon: "screen" },
},
];
// 循环添加额外的路由对象到各路由数组
additionalRoutes5.forEach((route) => {
sidebarRoutes.push(route);
rewriteRoutes.push(route);
asyncRoutes.push(route);
});
} else {
// console.log("不满足条件");
}
commit("SET_ROUTES", rewriteRoutes);
commit("SET_SIDEBAR_ROUTERS", constantRoutes.concat(sidebarRoutes));
commit("SET_DEFAULT_ROUTES", sidebarRoutes);

53
src/utils/fullscreen.js

@ -0,0 +1,53 @@
// 检查浏览器是否支持全屏 API
function isFullscreenSupported() {
return (
document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled
);
}
// 进入全屏模式
function requestFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// 退出全屏模式
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
// 检查当前是否处于全屏状态
function isFullscreen() {
return (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
);
}
export {
isFullscreenSupported,
requestFullscreen,
exitFullscreen,
isFullscreen,
};

4
src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue

@ -261,7 +261,7 @@ export default {
},
//
goSys() {
this.exitFullscreen();
// this.exitFullscreen();
this.$router.push("/");
},
//
@ -293,7 +293,7 @@ export default {
});
},
goWarning() {
this.exitFullscreen();
// this.exitFullscreen();
this.$router.push("/alarm/alarmRecord");
},
// undefined

121
src/views/aircAndWindc/awSysMonitor/components/damperMonitor.vue

@ -204,7 +204,7 @@
</el-option>
</el-select>
</div>
<div
<!-- <div
class="context-li"
v-if="isObjectValid(remoteManualObj) && startStopValue === 0"
>
@ -237,7 +237,7 @@
:disabled="automaticObj.collectValue"
>
</el-switch>
</div>
</div> -->
<div
class="context-li"
v-if="isObjectValid(openingBackObj)"
@ -463,6 +463,28 @@
</el-form>
</div>
</div>
<!-- 远程启停 -->
<div
class="offClass"
@click="handleOneKeyButton(remoteManualObj,'远程手动停止')"
v-if="isObjectValid(remoteManualObj) && startStopValue === 0"
>
<div v-if="remoteManualObj.collectValue" class="off-bg on-animation">
ON
</div>
<div v-else class="off-bg">OFF</div>
</div>
<!-- 时间表启停 -->
<div
class="offClass"
@click="handleOneKeyButton(timeScheduleObj,'时间表停止')"
v-if="isObjectValid(timeScheduleObj) && startStopValue === 1"
>
<div v-if="timeScheduleObj.collectValue" class="off-bg on-animation">
ON
</div>
<div v-else class="off-bg">OFF</div>
</div>
</div>
</div>
<!-- 定时开关内容 -->
@ -1523,6 +1545,40 @@ export default {
this.$set(children, "_oldValue", children.collectValue);
}
},
//
handleOneKeyButton(item,val) {
console.log(
"this.automaticObj.collectValue",
this.automaticObj.collectValue
);
if (this.automaticObj.collectValue) {
//
this.$message({
message: "当前风机手自动状态为手动",
type: "warning",
});
return;
}
let param = "";
let paramText = "";
if (item.collectValue) {
// startControlObj.collectValuetrueON,OFF
param = 0;
paramText = "停止";
} else {
param = 1;
paramText = "开启";
}
this.$confirm(`确定把${val}设置为:${paramText}吗?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.hadleOperationConrol(item.id, param);
})
.catch(() => {});
},
},
};
</script>
@ -1729,7 +1785,7 @@ export default {
.fan-satatus1 {
position: absolute;
top: 4.3rem;
left: 5.9rem;
left: 6.4rem;
display: flex;
flex-direction: column;
align-items: flex-start;
@ -1795,7 +1851,7 @@ export default {
}
.fan-satatus3 {
position: absolute;
top: 0.7rem;
top: 1.1rem;
left: 6.4rem;
display: flex;
flex-direction: column;
@ -2006,6 +2062,59 @@ export default {
/* 箭头向右移动的距离 */
}
}
.offClass {
position: absolute;
width: 1.6rem;
height: 1.6rem;
background-image: url(../../../../assets/images/border2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
top: 5.5rem;
left: 6.7rem;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
.off-bg {
position: absolute;
left: 0.38rem;
top: 0.32rem;
width: 1rem;
height: 1rem;
background-image: url(../../../../assets/images/border3.png);
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
line-height: 1rem;
font-family: DIN;
font-size: 0.3rem;
color: #6cf02f;
font-weight: bold;
}
.on-animation {
animation: rotateZ 5s linear infinite;
transition: 0.6s; /* 设置过渡时间,控制翻转速度 */
transform-style: preserve-3d; /* 保持子元素的 3D 效果 */
}
/* 定义旋转动画 */
@keyframes rotateZ {
0% {
transform: rotateY(0deg); /* 初始状态,不旋转 */
}
50% {
transform: rotateY(180deg); /* 旋转到 180 度,呈现翻面效果 */
}
100% {
transform: rotateY(360deg); /* 旋转回 360 度,回到初始状态 */
}
}
}
/* 鼠标悬停时移除动画 */
.offClass:hover .on-animation {
animation: none;
}
}
.device-container {
display: flex;
@ -2110,7 +2219,7 @@ export default {
.windC {
transform: scale(0.8);
.fan-satatus3 {
top: 0.3rem !important;
top: 0.6rem !important;
}
}
}
@ -2127,7 +2236,7 @@ export default {
.windC {
transform: scale(0.86);
.fan-satatus3 {
top: 0.4rem !important;
top: 0.6rem !important;
}
}
.buildingDiv {

102
src/views/aircAndWindc/awSysMonitor/components/normalMonitor.vue

@ -140,6 +140,13 @@
<div class="goodStautus" v-else>正常</div>
</div>
</div>
<!--风机启停控制 -->
<div class="offClass" @click="handleOneKeyButton(startControlObj)">
<div v-if="startControlObj.collectValue" class="off-bg on-animation">
ON
</div>
<div v-else class="off-bg">OFF</div>
</div>
<div class="fan-satatus1">
<div class="context-li" v-if="isObjectValid(automaticObj)">
<div class="wind-text">风机手自动状态</div>
@ -156,7 +163,7 @@
<div class="noneStautus" v-if="automaticObj.collectValue">手动</div>
<div class="goodStautus" v-else>自动</div>
</div>
<div class="context-li" v-if="isObjectValid(startControlObj)">
<!-- <div class="context-li" v-if="isObjectValid(startControlObj)">
<div class="wind-text">风机启停控制</div>
<el-switch
style="display: block"
@ -169,7 +176,7 @@
:disabled="automaticObj.collectValue"
>
</el-switch>
</div>
</div> -->
</div>
<div class="fan-satatus2">
<div class="context-li" v-if="isObjectValid(waterSupplyObj)">
@ -338,10 +345,6 @@
</template>
<script>
import { runTime } from "@/api/centerairC/sysMonitor";
import { alarmRecordList } from "@/api/alarm/alarmRecord";
import { getDay } from "@/utils/datetime";
import { spaceTree } from "@/api/region";
import { windList, timeList, undateTime } from "@/api/aircAndWindc/index";
import { operationConrol } from "@/api/hotWater/waterControl";
export default {
@ -947,6 +950,40 @@ export default {
console.log("不请求后台");
});
},
//
handleOneKeyButton(startControlObj) {
console.log(
"this.automaticObj.collectValue",
this.automaticObj.collectValue
);
if (this.automaticObj.collectValue) {
//
this.$message({
message: "当前风机手自动状态为手动",
type: "warning",
});
return;
}
let param = "";
let paramText = "";
if (startControlObj.collectValue) {
// startControlObj.collectValuetrueON,OFF
param = 0;
paramText = "停止";
} else {
param = 1;
paramText = "开启";
}
this.$confirm(`确定把风机启停控制设置为:${paramText}吗?`, "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.hadleOperationConrol(startControlObj.id, param);
})
.catch(() => {});
},
},
};
</script>
@ -1108,6 +1145,59 @@ export default {
margin-bottom: 0.15rem;
}
}
.offClass {
position: absolute;
width: 1.6rem;
height: 1.6rem;
background-image: url(../../../../assets/images/border2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
top: 0rem;
left: 0rem;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
.off-bg {
position: absolute;
left: 0.38rem;
top: 0.32rem;
width: 1rem;
height: 1rem;
background-image: url(../../../../assets/images/border3.png);
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
line-height: 1rem;
font-family: DIN;
font-size: 0.3rem;
color: #6cf02f;
font-weight: bold;
}
.on-animation {
animation: rotateZ 5s linear infinite;
transition: 0.6s; /* 设置过渡时间,控制翻转速度 */
transform-style: preserve-3d; /* 保持子元素的 3D 效果 */
}
/* 定义旋转动画 */
@keyframes rotateZ {
0% {
transform: rotateY(0deg); /* 初始状态,不旋转 */
}
50% {
transform: rotateY(180deg); /* 旋转到 180 度,呈现翻面效果 */
}
100% {
transform: rotateY(360deg); /* 旋转回 360 度,回到初始状态 */
}
}
}
/* 鼠标悬停时移除动画 */
.offClass:hover .on-animation {
animation: none;
}
.fan-satatus1 {
position: absolute;
top: 4.5rem;

4
src/views/boilerSys/boilerMonitor/boilerMonitorDetails.vue

@ -506,7 +506,7 @@ export default {
},
//
goSys() {
this.exitFullscreen();
// this.exitFullscreen();
this.$router.push("/");
},
//
@ -538,7 +538,7 @@ export default {
});
},
goWarning() {
this.exitFullscreen();
// this.exitFullscreen();
this.$router.push("/alarm/alarmRecord");
},
},

4
src/views/centerairC/sysMonitor/hostDetails.vue

@ -399,7 +399,7 @@ export default {
},
//
goSys() {
this.exitFullscreen();
// this.exitFullscreen();
this.$router.push("/");
},
//
@ -692,7 +692,7 @@ export default {
});
},
goWarning() {
this.exitFullscreen();
// this.exitFullscreen();
this.$router.push("/alarm/alarmRecord");
},
// curValue

4
src/views/centerairC/sysMonitor/monitorCenter.vue

@ -1097,7 +1097,7 @@ export default {
clearInterval(this.nowTimer);
}
// 退
this.exitFullscreen();
// this.exitFullscreen();
},
methods: {
//
@ -1288,7 +1288,7 @@ export default {
})
.catch((error) => {
console.log("请求发生错误,更新设备状态", error);
this.ggetOneKeyButton();
this.getOneKeyButton();
});
})
.catch(() => {});

4
src/views/centerairC/sysMonitor/performance.vue

@ -492,7 +492,7 @@ export default {
},
//
goSys() {
this.exitFullscreen();
// this.exitFullscreen();
this.$router.push("/");
},
//
@ -528,7 +528,7 @@ export default {
});
},
goWarning() {
this.exitFullscreen();
// this.exitFullscreen();
this.$router.push("/alarm/alarmRecord");
},
},

62
src/views/hotWater/waterMonitor/waterMonitorDetails.vue

@ -177,6 +177,32 @@
src="../../../assets/flowimg/closepum.png"
alt=""
/>
<!-- 供水泵3定位 -->
<img
class="waterpum"
v-if="this.upWaterState2 === '1'"
src="../../../assets/flowimg/startpum.png"
alt=""
/>
<img
class="waterpum"
v-else
src="../../../assets/flowimg/closepum.png"
alt=""
/>
<!-- 供水泵4定位 -->
<img
class="waterpum"
v-if="this.upWaterState2 === '1'"
src="../../../assets/flowimg/startpum.png"
alt=""
/>
<img
class="waterpum"
v-else
src="../../../assets/flowimg/closepum.png"
alt=""
/>
<!-- 补水定位 -->
<img
class="buwaterpum2"
@ -443,6 +469,7 @@
class="maintable"
ref="maintable"
:data="tableData"
height="200"
highlight-current-row
@row-click="handlerow"
:cell-style="tableRowStyle"
@ -704,7 +731,7 @@ export default {
},
//
goSys() {
this.exitFullscreen();
// this.exitFullscreen();
this.$router.push("/");
},
//
@ -736,7 +763,7 @@ export default {
});
},
goWarning() {
this.exitFullscreen();
// this.exitFullscreen();
this.$router.push("/alarm/alarmRecord");
},
getImageSrc(item) {
@ -1134,6 +1161,9 @@ export default {
width: 256px;
padding: 15px 10px 10px 10px;
border: 1px solid #004b8c;
display: flex;
flex-direction: column;
justify-content: space-between;
.status {
display: flex;
flex-direction: row;
@ -1233,10 +1263,9 @@ export default {
display: flex;
flex-direction: column;
align-items: center;
.flowimg {
width: 12.27rem;
height: 4.6rem;
height: 5.6rem;
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
@ -1287,8 +1316,8 @@ export default {
.text5 {
position: absolute;
top: 4.2rem;
left: 2.1rem;
top: 4.4rem;
right: 0.2rem;
z-index: 1;
}
@ -1323,10 +1352,10 @@ export default {
.supply {
position: absolute;
top: 0rem;
top: 1.2rem;
left: 0rem;
width: 12.3rem;
height: 4.6rem;
height: 4.9rem;
z-index: 0;
}
@ -1870,10 +1899,10 @@ export default {
.changecontent {
background: #142c4e;
border-radius: 6px;
height: 350px;
padding: 35px 10px 10px 10px;
// height: 250px;
padding: 10px;
overflow: hidden;
margin-top: 40px;
margin-top: 100px;
.tablemaeta {
font-family: SourceHanSansCN-Medium;
@ -1949,9 +1978,9 @@ export default {
}
.changecontent {
border-radius: 0.06rem !important;
height: 3.5rem !important;
padding: 0.35rem 0.1rem 0.1rem 0.1rem !important;
margin-top: 0.4rem !important;
// height: 3rem !important;
padding: 0.1rem !important;
margin-top: 1rem !important;
.tablemaeta {
font-size: 0.18rem !important;
@ -2004,9 +2033,8 @@ export default {
.folw {
.changecontent {
border-radius: 0.06rem !important;
height: 300px !important;
padding: 0.35rem 0.1rem 0.1rem 0.1rem !important;
margin-top: 0.4rem !important;
padding: 0.1rem !important;
margin-top: 1rem !important;
}
}
}

24
src/views/index.vue

@ -247,6 +247,10 @@ export default {
this.getProject();
this.getHomeData();
this.getSubData();
// //
// setTimeout(() => {
// this.requestFullscreen();
// }, 100); // 100
// this.initChart();
// window.addEventListener("resize", this.screenAdapter);
// this.screenAdapter();
@ -257,6 +261,23 @@ export default {
// window.removeEventListener("resize", this.screenAdapter);
},
methods: {
//
requestFullscreen() {
const element = document.documentElement;
console.log("全屏了吗");
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
// Firefox
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
// Chrome, Safari and Opera
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
// IE/Edge
element.msRequestFullscreen();
}
},
//
getProject() {
this.imgUrl = imgUrl;
@ -743,5 +764,6 @@ export default {
}
}
// 2000px
@media (min-width: 2000px) {}
@media (min-width: 2000px) {
}
</style>

1021
src/views/temSys/temMonitor/index copy.vue

File diff suppressed because it is too large Load Diff

1017
src/views/temSys/temMonitor/index.vue

File diff suppressed because it is too large Load Diff

1415
src/views/temSys/temMonitor/temMonitorDeatils.vue

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save