flx：提交乌丹项目 临边防护页面 大屏的消息提示集中处理
This commit is contained in:
parent
cc7fc0d7b8
commit
1dc40fbb53
@ -17,14 +17,14 @@ NODE_ENV = 'development'
|
||||
# 演示平台
|
||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:9809'
|
||||
# 百色七参数线上地址
|
||||
# VITE_API_URL = 'http://101.43.164.214:11111'
|
||||
VITE_API_URL = 'http://101.43.164.214:11111'
|
||||
# 七参数标准版(测试平台)
|
||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:15551'
|
||||
# 七参数标准版(测试平台)
|
||||
# VITE_API_URL = 'http://182.90.224.237:15551'
|
||||
# agjt
|
||||
# VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
|
||||
VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
|
||||
# VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
|
||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:19812'
|
||||
# 苏立信/重庆市南岸区
|
||||
# VITE_API_URL = 'http://101.43.164.214:11111'
|
||||
|
||||
@ -76,8 +76,18 @@ class RequestHttp {
|
||||
const globalStore = GlobalStore();
|
||||
tryHideFullScreenLoading();
|
||||
// 请求超时 && 网络错误单独判断，没有 response
|
||||
if (error.message.indexOf("timeout") !== -1) ElMessage.error("请求超时！请您稍后重试");
|
||||
if (error.message.indexOf("Network Error") !== -1) ElMessage.error("网络错误！请您稍后重试");
|
||||
if (error.message.indexOf("timeout") !== -1)
|
||||
ElMessage({
|
||||
message: "请求超时！请您稍后重试",
|
||||
grouping: true,
|
||||
type: "error"
|
||||
});
|
||||
if (error.message.indexOf("Network Error") !== -1)
|
||||
ElMessage({
|
||||
message: "网络错误！请您稍后重试",
|
||||
grouping: true,
|
||||
type: "error"
|
||||
});
|
||||
if (error.message.indexOf("Request failed with status code 401") !== -1) {
|
||||
// ElMessage.error("登录已过期，请重新登录");
|
||||
globalStore.resetStore();
|
||||
@ -86,7 +96,12 @@ class RequestHttp {
|
||||
// 根据响应的错误状态码，做不同的处理
|
||||
// if (response) checkStatus(response.status);
|
||||
// 根据响应的错误状态码，抛出异常错误信息
|
||||
if (response) ElMessage.error((response.data as AxiosError).message);
|
||||
if (response)
|
||||
ElMessage({
|
||||
message: (response.data as AxiosError).message,
|
||||
grouping: true,
|
||||
type: "error"
|
||||
});
|
||||
// 服务器结果都没有返回(可能服务器错误可能客户端断网)，断网处理:可以跳转到断网页面
|
||||
if (!window.navigator.onLine) router.replace("/500");
|
||||
return Promise.reject(error);
|
||||
|
||||
@ -13,7 +13,9 @@ export const getCountFaultLevel = (params: {}) => {
|
||||
};
|
||||
// 安全隐患统计
|
||||
export const getProjectInspectRecordCount = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/hiddenDangerInspectRecord/getProjectInspectRecordCount`, params, { headers: { noLoading: true } });
|
||||
return http.post(BASEURL + `/xmgl/hiddenDangerInspectRecord/getProjectInspectRecordCount`, params, {
|
||||
headers: { noLoading: true }
|
||||
});
|
||||
};
|
||||
// 责任单位统计
|
||||
export const getCountResponsibleUnit = (params: {}) => {
|
||||
@ -21,7 +23,9 @@ export const getCountResponsibleUnit = (params: {}) => {
|
||||
};
|
||||
// 责任区域分析
|
||||
export const getCountHiddenDangerInspectRegion = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/hiddenDangerInspectRecord/countHiddenDangerInspectRegion`, params, { headers: { noLoading: true } });
|
||||
return http.post(BASEURL + `/xmgl/hiddenDangerInspectRecord/countHiddenDangerInspectRegion`, params, {
|
||||
headers: { noLoading: true }
|
||||
});
|
||||
};
|
||||
|
||||
// -------------- 烟感监测 --------------
|
||||
@ -68,7 +72,6 @@ export const getEdgeAlarmTypeEnum = (params: {}) => {
|
||||
return http.get(BASEURL + `/xmgl/frontierProtectionDevAlarm/getFrontierProtectionAlarmTypeEnum`, params);
|
||||
};
|
||||
|
||||
|
||||
// -------------- 基坑监测 --------------
|
||||
export const selectDeepExcavationList = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/deepExcavationEngineering/selectDeepExcavationList`, params);
|
||||
@ -82,8 +85,6 @@ export const selectDeepPointList = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/deepExcavationPlaneFigureCoordinate/list`, params);
|
||||
};
|
||||
|
||||
|
||||
|
||||
// {
|
||||
// "measurePointNumber": "测点编号",
|
||||
// "relaId": "65",
|
||||
@ -109,3 +110,21 @@ export const getSensorListByMeasurePointNumber = (params: {}) => {
|
||||
export const selectDeepExcavationCurrentDataList = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/deepExcavationCurrentData/selectDeepExcavationCurrentDataList`, params);
|
||||
};
|
||||
|
||||
// -------------- 临边防护报警 --------------
|
||||
// 分页查询临边防护-报警数据
|
||||
export const getFrontierProtectionPage = (params: {}) => {
|
||||
return http.get(BASEURL + `/xmgl/frontierProtectionNoNetData/page`, params);
|
||||
};
|
||||
// 分页查询临边防护-设备实时
|
||||
export const getNoNetDevPage = (params: {}) => {
|
||||
return http.get(BASEURL + `/xmgl/frontierProtectionNoNetDev/page`, params);
|
||||
};
|
||||
// 设备列表数量
|
||||
export const getCountFrontier = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/frontierProtectionNoNetDev/countFrontierProtectionNoNetDev`, params);
|
||||
};
|
||||
// 报警趋势
|
||||
export const getTrendData = (params: {}) => {
|
||||
return http.post(BASEURL + `/xmgl/frontierProtectionNoNetData/getTrendData`, params);
|
||||
};
|
||||
|
||||
BIN
src/assets/images/newedgeprotection-bg.png
Normal file
BIN
src/assets/images/newedgeprotection-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
@ -23,12 +23,12 @@ export const BAIDU_MAP_KEY: string = "";
|
||||
export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL;
|
||||
|
||||
// 项目环境标识配置 部署时需更改对应的项目
|
||||
// export const COMPANY: string = ""; //标准版
|
||||
export const COMPANY: string = ""; //标准版
|
||||
// export const COMPANY: string = "zhzrf"; //中海·臻如府
|
||||
// export const COMPANY: string = "zsbf"; //中水北方
|
||||
// export const COMPANY: string = "as"; //鞍山项目
|
||||
// export const COMPANY: string = "agjt"; //鞍钢集团
|
||||
export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏
|
||||
// export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏
|
||||
// export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
|
||||
// export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏
|
||||
// export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览
|
||||
|
||||
@ -99,6 +99,10 @@ export const commonMenu: Array<any> = [
|
||||
{
|
||||
menuName: "安全教育",
|
||||
companyPath: "/safeEducation"
|
||||
},
|
||||
{
|
||||
menuName: "临边防护",
|
||||
companyPath: "/newEdgeProtection"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -347,7 +351,7 @@ export const AHSAMenu: Array<any> = [
|
||||
{
|
||||
menuName: "工程概况",
|
||||
companyPath: "/projectOverview"
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -369,7 +373,7 @@ export const AHSAMenu: Array<any> = [
|
||||
{
|
||||
menuName: "卸料平台",
|
||||
companyPath: "/unloadPlatform"
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -470,7 +474,7 @@ export const HFQCMenu: Array<any> = [
|
||||
{
|
||||
menuName: "AI智能预警",
|
||||
companyPath: "/aIEarlyWarning"
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -480,7 +484,7 @@ export const HFQCMenu: Array<any> = [
|
||||
{
|
||||
menuName: "",
|
||||
companyPath: "/smartSafeHat"
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -496,9 +500,9 @@ export const HFQCMenu: Array<any> = [
|
||||
companyPath: "/wallScaffold"
|
||||
},
|
||||
{
|
||||
menuName: "临边防护报警",
|
||||
menuName: "临边防护",
|
||||
companyPath: "/edgeProtection2"
|
||||
},
|
||||
}
|
||||
// {
|
||||
// menuName: "智能烟感监测",
|
||||
// companyPath: "/smokeSensor"
|
||||
@ -512,7 +516,7 @@ export const HFQCMenu: Array<any> = [
|
||||
{
|
||||
menuName: "",
|
||||
companyPath: "/highFormwork"
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
]; //合肥启程项目
|
||||
@ -720,7 +724,7 @@ export const ASMenu: Array<any> = [
|
||||
export const AGJTMenu: Array<any> = [
|
||||
{
|
||||
moduleName: "工程概况",
|
||||
modulePath: "/projectOverview",
|
||||
modulePath: "/projectOverview"
|
||||
// menuList: [
|
||||
// {
|
||||
// menuName: "工程概况",
|
||||
@ -730,7 +734,7 @@ export const AGJTMenu: Array<any> = [
|
||||
},
|
||||
{
|
||||
moduleName: "劳务管理",
|
||||
modulePath: "/laborManagement",
|
||||
modulePath: "/laborManagement"
|
||||
// menuList: [
|
||||
// {
|
||||
// menuName: "劳务管理",
|
||||
@ -740,7 +744,7 @@ export const AGJTMenu: Array<any> = [
|
||||
},
|
||||
{
|
||||
moduleName: "车辆管理",
|
||||
modulePath: "/vehicleManagement",
|
||||
modulePath: "/vehicleManagement"
|
||||
// menuList: [
|
||||
// {
|
||||
// menuName: "车辆管理",
|
||||
@ -750,7 +754,7 @@ export const AGJTMenu: Array<any> = [
|
||||
},
|
||||
{
|
||||
moduleName: "视频监控",
|
||||
modulePath: "/videoManagement",
|
||||
modulePath: "/videoManagement"
|
||||
// menuList: [
|
||||
// {
|
||||
// menuName: "视频监控",
|
||||
@ -760,7 +764,7 @@ export const AGJTMenu: Array<any> = [
|
||||
},
|
||||
{
|
||||
moduleName: "AI预警",
|
||||
modulePath: "/aIEarlyWarning",
|
||||
modulePath: "/aIEarlyWarning"
|
||||
// menuList: [
|
||||
// {
|
||||
// menuName: "AI预警",
|
||||
@ -770,7 +774,7 @@ export const AGJTMenu: Array<any> = [
|
||||
},
|
||||
{
|
||||
moduleName: "安全管理",
|
||||
modulePath: "/securityManagement",
|
||||
modulePath: "/securityManagement"
|
||||
// menuList: [
|
||||
// {
|
||||
// menuName: "安全管理",
|
||||
@ -780,7 +784,7 @@ export const AGJTMenu: Array<any> = [
|
||||
},
|
||||
{
|
||||
moduleName: "质量管理",
|
||||
modulePath: "/qualityManagement",
|
||||
modulePath: "/qualityManagement"
|
||||
// menuList: [
|
||||
// {
|
||||
// menuName: "质量管理",
|
||||
@ -862,7 +866,7 @@ export const SLXMenu: Array<any> = [
|
||||
{
|
||||
menuName: "劳务管理",
|
||||
companyPath: "/laborManagement"
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -1068,7 +1072,7 @@ export const ZSBFMenu: Array<any> = [
|
||||
{
|
||||
menuName: "劳务管理",
|
||||
companyPath: "/laborManagement"
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -1236,7 +1240,7 @@ export const ZHZRFMenu: Array<any> = [
|
||||
{
|
||||
menuName: "",
|
||||
companyPath: "/laborManagement"
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -1246,7 +1250,7 @@ export const ZHZRFMenu: Array<any> = [
|
||||
{
|
||||
menuName: "",
|
||||
companyPath: "/videoManagement"
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -1256,7 +1260,7 @@ export const ZHZRFMenu: Array<any> = [
|
||||
{
|
||||
menuName: "",
|
||||
companyPath: "/vehicleManagement"
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -1281,12 +1285,12 @@ export const ZHZRFMenu: Array<any> = [
|
||||
},
|
||||
{
|
||||
menuName: "基坑监测",
|
||||
companyPath: "/foundationPitMonitor",
|
||||
companyPath: "/foundationPitMonitor"
|
||||
},
|
||||
{
|
||||
menuName: "配电箱监测",
|
||||
companyPath: "/distributionMonitoring"
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -1296,7 +1300,7 @@ export const ZHZRFMenu: Array<any> = [
|
||||
{
|
||||
menuName: "",
|
||||
companyPath: "/securityManagement"
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -1306,7 +1310,7 @@ export const ZHZRFMenu: Array<any> = [
|
||||
{
|
||||
menuName: "",
|
||||
companyPath: "/qualityManagement"
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -1316,10 +1320,9 @@ export const ZHZRFMenu: Array<any> = [
|
||||
{
|
||||
menuName: "",
|
||||
companyPath: "/aIEarlyWarning"
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
}
|
||||
]; //中海·臻如府
|
||||
|
||||
export const ZKAXMenu: Array<any> = [
|
||||
@ -1352,7 +1355,7 @@ export const CQNAMenu: Array<any> = [
|
||||
},
|
||||
{
|
||||
moduleName: "绿色施工",
|
||||
modulePath: "/headNoise",
|
||||
modulePath: "/headNoise"
|
||||
},
|
||||
{
|
||||
moduleName: "劳务管理",
|
||||
@ -1433,4 +1436,4 @@ export const ZKJCMenu: Array<any> = [
|
||||
}
|
||||
]
|
||||
}
|
||||
]; //中科佳成大屏
|
||||
]; //中科佳成大屏
|
||||
|
||||
@ -24,9 +24,9 @@ export const staticRouter: RouteRecordRaw[] = [
|
||||
{
|
||||
path: "/large",
|
||||
name: "大屏",
|
||||
// component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
|
||||
component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版
|
||||
// component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏
|
||||
component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏
|
||||
// component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏
|
||||
// component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏
|
||||
// component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
|
||||
// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
|
||||
@ -138,6 +138,11 @@ export const staticRouter: RouteRecordRaw[] = [
|
||||
name: "临边防护",
|
||||
component: () => import("@/views/sevenLargeScreen/safetyManagement/edgeProtection/index_wdzs.vue")
|
||||
},
|
||||
{
|
||||
path: "/newEdgeProtection",
|
||||
name: "临边防护",
|
||||
component: () => import("@/views/sevenLargeScreen/safetyManagement/newEdgeProtection/index.vue")
|
||||
},
|
||||
{
|
||||
path: "/toxicGasMonitor",
|
||||
name: "有毒气体监测",
|
||||
|
||||
23
src/styles/reset.css
Normal file
23
src/styles/reset.css
Normal file
@ -0,0 +1,23 @@
|
||||
@charset "UTF-8";
|
||||
/* Reset style sheet */
|
||||
/* 因为使用富文本编辑器才注释掉，如果你项目没有使用富文本编辑器，可以取消注释 */
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: siyuan;
|
||||
}
|
||||
|
||||
html .el-message__badge,
|
||||
body .el-message__badge,
|
||||
#app .el-message__badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 解决 h1 标签在 webkit 内核浏览器中文字大小失效问题 */
|
||||
:-webkit-any(article, aside, nav, section) h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
1
src/styles/reset.min.css
vendored
Normal file
1
src/styles/reset.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
html,body,#app{width:100%;height:100%;padding:0;margin:0;font-family:siyuan}html .el-message__badge,body .el-message__badge,#app .el-message__badge{display:none}:-webkit-any(article,aside,nav,section) h1{font-size:2em}
|
||||
@ -1,6 +1,8 @@
|
||||
/* Reset style sheet */
|
||||
|
||||
|
||||
/* 因为使用富文本编辑器才注释掉，如果你项目没有使用富文本编辑器，可以取消注释 */
|
||||
|
||||
// html,
|
||||
// body,
|
||||
// div,
|
||||
@ -89,7 +91,6 @@
|
||||
// vertical-align: baseline;
|
||||
// border: 0;
|
||||
// }
|
||||
|
||||
// /* HTML5 display-role reset for older browsers */
|
||||
// article,
|
||||
// aside,
|
||||
@ -130,20 +131,25 @@
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: siyuan;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: siyuan;
|
||||
.el-message__badge {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 解决 h1 标签在 webkit 内核浏览器中文字大小失效问题 */
|
||||
|
||||
:-webkit-any(article, aside, nav, section) h1 {
|
||||
font-size: 2em;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
// input:-webkit-autofill {
|
||||
// box-shadow: inset 0 0 0 2000px pink !important;
|
||||
|
||||
// background-color: transparent;
|
||||
// transition: background-color 50000s ease-in-out 0s;
|
||||
// }
|
||||
// }
|
||||
@ -1,22 +1,22 @@
|
||||
<template>
|
||||
<ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100" :isFlat="false" @scaleChange="scaleChange">
|
||||
<!-- <div class="container"> -->
|
||||
<div class="largeScreen" ref="dataScreenRef" style="width: 100%;height: 100%;">
|
||||
<div class="header">
|
||||
<!-- <div class="hearderIcon"><img src="@/assets/images/jxjLogo.png" alt="" /></div> -->
|
||||
<span class="projectTitle">
|
||||
<!-- 新建宁波项目要打开 -->
|
||||
<p v-if="COMPANY === 'xjnb'">智慧工地项目监管平台</p>
|
||||
<p v-else>数字化项目监管平台</p>
|
||||
<!-- <p>江坑110kv变电站智慧工地</p> -->
|
||||
</span>
|
||||
<!-- <div class="container"> -->
|
||||
<div class="largeScreen" ref="dataScreenRef" style="width: 100%; height: 100%">
|
||||
<div class="header">
|
||||
<!-- <div class="hearderIcon"><img src="@/assets/images/jxjLogo.png" alt="" /></div> -->
|
||||
<span class="projectTitle">
|
||||
<!-- 新建宁波项目要打开 -->
|
||||
<p v-if="COMPANY === 'xjnb'">智慧工地项目监管平台</p>
|
||||
<p v-else>数字化项目监管平台</p>
|
||||
<!-- <p>江坑110kv变电站智慧工地</p> -->
|
||||
</span>
|
||||
|
||||
<span class="projectSmallTitle">
|
||||
<p>{{ projectTimeInfo.name || "" }}</p>
|
||||
</span>
|
||||
<div class="rightIcon" @click.stop>
|
||||
<div class="time">{{ nowTime }}</div>
|
||||
<!-- <div class="Icon">
|
||||
<span class="projectSmallTitle">
|
||||
<p>{{ projectTimeInfo.name || "" }}</p>
|
||||
</span>
|
||||
<div class="rightIcon" @click.stop>
|
||||
<div class="time">{{ nowTime }}</div>
|
||||
<!-- <div class="Icon">
|
||||
<img src="@/assets/images/dustNoise/jobIcon.png" alt="" />
|
||||
</div>
|
||||
<div class="Icon">
|
||||
@ -28,67 +28,78 @@
|
||||
<div class="Icon">
|
||||
<img src="@/assets/images/dustNoise/dpIcon.png" alt="" />
|
||||
</div> -->
|
||||
<div class="Icon">
|
||||
<img src="@/assets/images/dustNoise/tbsjIcon.png" alt="" />
|
||||
</div>
|
||||
<div class="Icon" @click="showUserBox = !showUserBox">
|
||||
<img src="@/assets/images/dustNoise/ryIcon.png" alt="" />
|
||||
</div>
|
||||
<div class="Icon">
|
||||
<img src="@/assets/images/dustNoise/tbsjIcon.png" alt="" />
|
||||
</div>
|
||||
<div class="Icon" @click="showUserBox = !showUserBox">
|
||||
<img src="@/assets/images/dustNoise/ryIcon.png" alt="" />
|
||||
</div>
|
||||
|
||||
<!-- <el-dropdown trigger="click">
|
||||
<!-- <el-dropdown trigger="click">
|
||||
|
||||
<template #dropdown>
|
||||
<div class="userDialog" @click="loginOut">退出登录</div>
|
||||
</template>
|
||||
</el-dropdown> -->
|
||||
</div>
|
||||
<div class="userBox" v-show="showUserBox">
|
||||
<div class="userItem">
|
||||
<div class="sanJiao"></div>
|
||||
<div class="userIcon">
|
||||
<div class="icon"><img src="@/assets/images/dustNoise/userIcon.png" /></div>
|
||||
<div class="userName">{{ adminName }}</div>
|
||||
</div>
|
||||
<div class="loginOut" @click="jumpBgd">
|
||||
<div class="loginOutIcon"><img src="@/assets/images/dustNoise/jumpIcon.png" /></div>
|
||||
<div class="userName">项目后台</div>
|
||||
</div>
|
||||
<div class="loginOut" @click="loginOut">
|
||||
<div class="loginOutIcon"><img src="@/assets/images/dustNoise/loginOut.png" /></div>
|
||||
<div class="userName">退出登录</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuList">
|
||||
<div v-for="(item, index) in menuList" :key="index" class="menStyle">
|
||||
<div class="subMenu" :index="item.modulePath" :class="{ active: activeTab === item.modulePath }">
|
||||
<span @click="navigateTo(item, 1)">{{ item.moduleName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subMenuList" v-if="itemList != null && itemList.length >= 1">
|
||||
<el-scrollbar class="scrollItem">
|
||||
<div class="subMenuItem">
|
||||
<div class="subItem" :style="COMPANY === 'hfqc' ? 'width:120px' : ''" v-for="(data, i) in itemList" :key="i" :index="data.companyPath" @click="navigateTo(data, 2)">
|
||||
<span style="white-space: nowrap" :class="{ active2: activeTab2 === data.companyPath }">{{ data.menuName }}</span>
|
||||
<div class="userBox" v-show="showUserBox">
|
||||
<div class="userItem">
|
||||
<div class="sanJiao"></div>
|
||||
<div class="userIcon">
|
||||
<div class="icon"><img src="@/assets/images/dustNoise/userIcon.png" /></div>
|
||||
<div class="userName">{{ adminName }}</div>
|
||||
</div>
|
||||
<div class="loginOut" @click="jumpBgd">
|
||||
<div class="loginOutIcon">
|
||||
<img src="@/assets/images/dustNoise/jumpIcon.png" />
|
||||
</div>
|
||||
<div class="userName">项目后台</div>
|
||||
</div>
|
||||
<div class="loginOut" @click="loginOut">
|
||||
<div class="loginOutIcon">
|
||||
<img src="@/assets/images/dustNoise/loginOut.png" />
|
||||
</div>
|
||||
<div class="userName">退出登录</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menuList">
|
||||
<div v-for="(item, index) in menuList" :key="index" class="menStyle">
|
||||
<div class="subMenu" :index="item.modulePath" :class="{ active: activeTab === item.modulePath }">
|
||||
<span @click="navigateTo(item, 1)">{{ item.moduleName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subMenuList" v-if="itemList != null && itemList.length >= 1">
|
||||
<el-scrollbar class="scrollItem">
|
||||
<div class="subMenuItem">
|
||||
<div
|
||||
class="subItem"
|
||||
:style="COMPANY === 'hfqc' ? 'width:120px' : ''"
|
||||
v-for="(data, i) in itemList"
|
||||
:key="i"
|
||||
:index="data.companyPath"
|
||||
@click="navigateTo(data, 2)"
|
||||
>
|
||||
<span style="white-space: nowrap" :class="{ active2: activeTab2 === data.companyPath }">{{ data.menuName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentDate" v-if="itemList != null && itemList.length >= 1">
|
||||
<span
|
||||
>自{{ projectTimeInfo.contractPeriodStartTime }}起开始计算，至今日{{ nowDate }}为<span class="numColor">{{
|
||||
projectPassDay
|
||||
}}</span
|
||||
>个日历天</span
|
||||
>
|
||||
</div>
|
||||
<div class="dataBoardContent">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentDate" v-if="itemList != null && itemList.length >= 1">
|
||||
<span
|
||||
>自{{ projectTimeInfo.contractPeriodStartTime }}起开始计算，至今日{{ nowDate }}为<span class="numColor">{{
|
||||
projectPassDay
|
||||
}}</span
|
||||
>个日历天</span
|
||||
>
|
||||
</div>
|
||||
<div class="dataBoardContent">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
</ScaleBox>
|
||||
</template>
|
||||
|
||||
@ -97,7 +108,20 @@ import ScaleBox from "vue3-scale-box";
|
||||
import { ref, reactive, onMounted, onBeforeUnmount, computed } from "vue";
|
||||
import { getTaskTimeDetail } from "@/api/modules/schedulePlan";
|
||||
import { jumpLargeUserInfoApi } from "@/api/modules/login";
|
||||
import { JSYCMenu, XJNBMenu, AHSAMenu, HFQCMenu,ASMenu,AGJTMenu,SLXMenu,ZSBFMenu,ZHZRFMenu, ZKAXMenu, CQNAMenu, ZKJCMenu } from "@/config/staticMenu";
|
||||
import {
|
||||
JSYCMenu,
|
||||
XJNBMenu,
|
||||
AHSAMenu,
|
||||
HFQCMenu,
|
||||
ASMenu,
|
||||
AGJTMenu,
|
||||
SLXMenu,
|
||||
ZSBFMenu,
|
||||
ZHZRFMenu,
|
||||
ZKAXMenu,
|
||||
CQNAMenu,
|
||||
ZKJCMenu
|
||||
} from "@/config/staticMenu";
|
||||
import { COMPANY } from "@/config/config";
|
||||
|
||||
import { useRouter } from "vue-router";
|
||||
@ -114,31 +138,31 @@ const projectTimeInfo = ref({} as any);
|
||||
const contentWidth = ref(0);
|
||||
const contentHeight = ref(0);
|
||||
const calculateAspectRatio = () => {
|
||||
const container = document.querySelector('.largeScreen');
|
||||
const container = document.querySelector(".largeScreen");
|
||||
// const containerWidth = document.body.offsetWidth;
|
||||
const containerWidth = document.documentElement.offsetWidth;
|
||||
// const containerWidth: number = (<HTMLElement>container).offsetWidth;
|
||||
// const containerHeight = document.body.offsetHeight;
|
||||
const containerHeight = document.documentElement.offsetHeight;
|
||||
// const containerHeight: number = (<HTMLElement>container).offsetHeight;
|
||||
console.log(containerWidth, containerHeight)
|
||||
const aspectRatio = 16 / 9; // 16:9 比例
|
||||
const containerAspectRatio = containerWidth / containerHeight;
|
||||
if (containerAspectRatio > aspectRatio) {
|
||||
// 以高度为基准，按比例计算宽度
|
||||
contentHeight.value = containerHeight;
|
||||
contentWidth.value = Math.floor(containerHeight * aspectRatio);
|
||||
} else {
|
||||
// 以宽度为基准，按比例计算高度
|
||||
contentWidth.value = containerWidth;
|
||||
contentHeight.value = Math.floor(containerWidth / aspectRatio);
|
||||
}
|
||||
console.log('contentWidth',contentWidth.value)
|
||||
console.log('contentHeight',contentHeight.value)
|
||||
// const containerWidth: number = (<HTMLElement>container).offsetWidth;
|
||||
// const containerHeight = document.body.offsetHeight;
|
||||
const containerHeight = document.documentElement.offsetHeight;
|
||||
// const containerHeight: number = (<HTMLElement>container).offsetHeight;
|
||||
console.log(containerWidth, containerHeight);
|
||||
const aspectRatio = 16 / 9; // 16:9 比例
|
||||
const containerAspectRatio = containerWidth / containerHeight;
|
||||
if (containerAspectRatio > aspectRatio) {
|
||||
// 以高度为基准，按比例计算宽度
|
||||
contentHeight.value = containerHeight;
|
||||
contentWidth.value = Math.floor(containerHeight * aspectRatio);
|
||||
} else {
|
||||
// 以宽度为基准，按比例计算高度
|
||||
contentWidth.value = containerWidth;
|
||||
contentHeight.value = Math.floor(containerWidth / aspectRatio);
|
||||
}
|
||||
console.log("contentWidth", contentWidth.value);
|
||||
console.log("contentHeight", contentHeight.value);
|
||||
};
|
||||
const scaleChange = (data:any) => {
|
||||
const scaleChange = (data: any) => {
|
||||
store.globalScale = data;
|
||||
}
|
||||
};
|
||||
const getProjectInfo = async () => {
|
||||
getNowDate();
|
||||
const res: any = await getTaskTimeDetail({ projectSn: store.sn });
|
||||
@ -303,6 +327,10 @@ let menuList = ref([
|
||||
{
|
||||
menuName: "安全教育",
|
||||
companyPath: "/safeEducation"
|
||||
},
|
||||
{
|
||||
menuName: "临边防护",
|
||||
companyPath: "/newEdgeProtection"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -423,9 +451,9 @@ const activeTab = ref(0);
|
||||
const activeTab2 = ref(0);
|
||||
const router = useRouter();
|
||||
const getAspectRatioStyle = computed(() => ({
|
||||
width: `${contentWidth.value}px`,
|
||||
height: `${contentHeight.value}px`
|
||||
}))
|
||||
width: `${contentWidth.value}px`,
|
||||
height: `${contentHeight.value}px`
|
||||
}));
|
||||
//获取动态tab
|
||||
const getAllModelMenu = () => {
|
||||
let half = store.projectDateAuth.moduleList;
|
||||
@ -447,17 +475,18 @@ const navigateTo = (path, type) => {
|
||||
router.push(path.modulePath);
|
||||
} else {
|
||||
activeTab2.value = path.companyPath;
|
||||
router.push(path.companyPath);
|
||||
router.push({
|
||||
path: path.companyPath
|
||||
});
|
||||
}
|
||||
};
|
||||
onMounted(async () => {
|
||||
|
||||
if (window.location.href.indexOf("token") != -1) {
|
||||
console.log("免登录跳转进来了吗----", window.location.href.indexOf("token"));
|
||||
const newToken = window.location.href.split("token=")[1].split("&")[0];
|
||||
const data: any = await jumpLargeUserInfoApi({ token: newToken });
|
||||
console.log("跳转请求的数据----", data.result);
|
||||
if(data.result.sn){
|
||||
if (data.result.sn) {
|
||||
store.setSN(data.result.sn);
|
||||
}
|
||||
store.setToken(data.result.token);
|
||||
@ -519,20 +548,20 @@ onMounted(async () => {
|
||||
document.addEventListener("click", bodyCloseMenus);
|
||||
const subMenus = document.querySelectorAll(".menStyle");
|
||||
const dataBoardContent = document.querySelector(".dataBoardContent");
|
||||
if (subMenus.length >= 5 && COMPANY !== 'hfqc') {
|
||||
if (subMenus.length >= 5 && COMPANY !== "hfqc") {
|
||||
subMenus[4].style.marginLeft = "30%";
|
||||
}
|
||||
if (COMPANY === 'hfqc'){
|
||||
if (COMPANY === "hfqc") {
|
||||
subMenus[3].style.marginLeft = "44%";
|
||||
}
|
||||
if (COMPANY === 'zhzrf'){
|
||||
if (COMPANY === "zhzrf") {
|
||||
// subMenus[4].style.marginLeft = "34%";
|
||||
}
|
||||
if(COMPANY === 'agjt'){
|
||||
dataBoardContent.style.height = '85%'
|
||||
dataBoardContent.style.margin = '30px auto 16px auto'
|
||||
if (COMPANY === "agjt") {
|
||||
dataBoardContent.style.height = "85%";
|
||||
dataBoardContent.style.margin = "30px auto 16px auto";
|
||||
}
|
||||
if (COMPANY === 'zkjc'){
|
||||
if (COMPANY === "zkjc") {
|
||||
subMenus[1].style.marginLeft = "5%";
|
||||
subMenus[1].style.marginRight = "auto";
|
||||
subMenus[2].style.marginRight = "5%";
|
||||
@ -540,16 +569,15 @@ onMounted(async () => {
|
||||
}
|
||||
await getProjectInfo();
|
||||
|
||||
|
||||
calculateAspectRatio();
|
||||
window.addEventListener('resize', calculateAspectRatio);
|
||||
window.addEventListener("resize", calculateAspectRatio);
|
||||
});
|
||||
|
||||
let timer = ref(null as any);
|
||||
onBeforeUnmount(() => {
|
||||
clearInterval(timer);
|
||||
document.removeEventListener("click", bodyCloseMenus);
|
||||
window.removeEventListener('resize', calculateAspectRatio);
|
||||
window.removeEventListener("resize", calculateAspectRatio);
|
||||
});
|
||||
|
||||
function bodyCloseMenus() {
|
||||
@ -583,15 +611,15 @@ function loginOut() {
|
||||
}
|
||||
//跳转后台
|
||||
function jumpBgd() {
|
||||
const envList = ["agjt","zkax","zkjc","hfqc"]; // 环境标识
|
||||
const envList = ["agjt", "zkax", "zkjc", "hfqc"]; // 环境标识
|
||||
// 标准版——跳转演示平台项目后台
|
||||
if (COMPANY == "") {
|
||||
window.location.replace("http://jxj.zhgdyun.com:100/#/login?token=" + store.token);
|
||||
}else if(COMPANY === "as"){
|
||||
} else if (COMPANY === "as") {
|
||||
window.location.replace("http://182.90.224.237:15551/#/login?token=" + store.token);
|
||||
}else if(envList.includes(COMPANY)){
|
||||
} else if (envList.includes(COMPANY)) {
|
||||
window.location.replace(BASEURL + "/#/login?token=" + store.token);
|
||||
}else {
|
||||
} else {
|
||||
// 新项目通用(百色服务器)
|
||||
window.location.replace("http://101.43.164.214:11111/#/login?token=" + store.token);
|
||||
// window.location.replace("http://192.168.34.138:8080/#/login?token=" + store.token);
|
||||
@ -608,21 +636,24 @@ function jumpBgd() {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.largeScreen {
|
||||
background: url("@/assets/images/bigImg.gif") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
background: url("@/assets/images/headerImg.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
// .projectTitle {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
@ -638,6 +669,7 @@ function jumpBgd() {
|
||||
color: #fff;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
}
|
||||
|
||||
.projectSmallTitle {
|
||||
position: absolute;
|
||||
top: 6%;
|
||||
@ -649,6 +681,7 @@ function jumpBgd() {
|
||||
color: #fff;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
}
|
||||
|
||||
.rightIcon {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
@ -658,11 +691,13 @@ function jumpBgd() {
|
||||
top: 1%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.time {
|
||||
font-size: 13px;
|
||||
font-family: sadigitalNumber;
|
||||
margin: 0.5% 33% 0 6%;
|
||||
}
|
||||
|
||||
.Icon {
|
||||
margin-right: 2%;
|
||||
cursor: pointer;
|
||||
@ -671,6 +706,7 @@ function jumpBgd() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menuList {
|
||||
display: flex;
|
||||
height: 6%;
|
||||
@ -678,6 +714,7 @@ function jumpBgd() {
|
||||
line-height: 55px;
|
||||
margin: -4% auto 0 2%;
|
||||
font-family: pmzd;
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
margin-top: 1%;
|
||||
@ -711,33 +748,40 @@ function jumpBgd() {
|
||||
font-family: none;
|
||||
background: url("@/assets/images/subTabImg.gif") no-repeat;
|
||||
background-size: 100% 35%;
|
||||
|
||||
.scrollItem {
|
||||
width: 73%;
|
||||
height: max-content;
|
||||
margin-top: -2%;
|
||||
margin-left: 2%;
|
||||
|
||||
.subMenuItem {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.subItem {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subItem:not(:last-child) {
|
||||
margin-right: 0.3%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// :nth-child(1) {
|
||||
// margin-left: 2%;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.contentDate {
|
||||
color: #fff;
|
||||
float: right;
|
||||
margin-right: 2%;
|
||||
font-size: 14px;
|
||||
|
||||
.numColor {
|
||||
color: #82fbea;
|
||||
font-family: sadigitalNumber;
|
||||
@ -755,6 +799,7 @@ function jumpBgd() {
|
||||
// opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
@ -763,11 +808,13 @@ function jumpBgd() {
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.active2 {
|
||||
color: #fff;
|
||||
font-family: none;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.userDialog {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -792,17 +839,23 @@ function jumpBgd() {
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 0px solid #405e97;
|
||||
z-index: 9;
|
||||
|
||||
.sanJiao {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
right: 0%;
|
||||
top: -10%;
|
||||
border-left: 6px solid transparent; /* 左边框透明 */
|
||||
border-right: 6px solid transparent; /* 右边框透明 */
|
||||
border-bottom: 6px solid #405e97; /* 底部边框颜色 */
|
||||
transform: rotate(0deg); /* 旋转45度 */
|
||||
border-left: 6px solid transparent;
|
||||
/* 左边框透明 */
|
||||
border-right: 6px solid transparent;
|
||||
/* 右边框透明 */
|
||||
border-bottom: 6px solid #405e97;
|
||||
/* 底部边框颜色 */
|
||||
transform: rotate(0deg);
|
||||
/* 旋转45度 */
|
||||
}
|
||||
|
||||
.userIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -810,14 +863,17 @@ function jumpBgd() {
|
||||
height: 38px;
|
||||
border-bottom: 1px solid #405e97;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
img {
|
||||
width: 100&;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.userName {
|
||||
width: 40px;
|
||||
font-size: 12px;
|
||||
@ -837,14 +893,17 @@ function jumpBgd() {
|
||||
padding-left: 5px;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
|
||||
.loginOutIcon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
img {
|
||||
width: 100&;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.userName {
|
||||
width: 50px;
|
||||
font-size: 12px;
|
||||
@ -854,15 +913,18 @@ function jumpBgd() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loginOut:hover {
|
||||
background-color: #2758c0;
|
||||
}
|
||||
|
||||
.hearderIcon {
|
||||
left: 1%;
|
||||
top: 1%;
|
||||
height: 3%;
|
||||
width: 8%;
|
||||
position: absolute;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -264,7 +264,7 @@ let heFeiMenuList = ref([
|
||||
companyPath: "/wallScaffold"
|
||||
},
|
||||
{
|
||||
menuName: "临边防护报警",
|
||||
menuName: "临边防护",
|
||||
companyPath: "/edgeProtection"
|
||||
},
|
||||
{
|
||||
|
||||
@ -0,0 +1,596 @@
|
||||
<template>
|
||||
<div class="distributionBox">
|
||||
<div class="content-top">
|
||||
<div class="content-left">
|
||||
<Card title="设备列表">
|
||||
<div class="warn-box">
|
||||
<div class="warn-icon">
|
||||
<img src="@/assets/images/edgeProtection/warn1.png" alt="" />
|
||||
</div>
|
||||
<div class="warn-detail">
|
||||
<div class="warn-text">设备总数</div>
|
||||
<div class="content-left_item1">
|
||||
<div class="numberCard" v-for="(item, i) in alarmTypeOptions.total.toString()" :key="i">
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="warn-box">
|
||||
<div class="warn-icon">
|
||||
<img src="@/assets/images/edgeProtection/warn2.png" alt="" />
|
||||
</div>
|
||||
<div class="warn-detail">
|
||||
<div class="warn-text">设备状态</div>
|
||||
<div class="content-left_item2">
|
||||
<div class="warn-tailt color-81">在线</div>
|
||||
<div class="numberCard" v-for="(item, i) in alarmTypeOptions.onlineNum.toString()" :key="i">
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-left_item3">
|
||||
<div class="warn-tailt color-f0">离线</div>
|
||||
<div class="numberCard" v-for="(item, i) in alarmTypeOptions.offLineNum.toString()" :key="i">
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<Card title="报警趋势(次)">
|
||||
<div id="edgeWeekTrend" ref="edgeWeekTrend" style="width: 100%; height: 100%"></div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-bottom">
|
||||
<Card title="报警列表">
|
||||
<div class="select-right">
|
||||
<el-select v-model="selectDay" style="width: 10%; margin-top: 10px; margin-right: 1%" @change="selectChange">
|
||||
<el-option v-for="(item, index) in devList" :key="index" :label="item.devName" :value="item.devSn" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="list-content">
|
||||
<div class="tab-list">
|
||||
<div>安装位置</div>
|
||||
<div>设备名称</div>
|
||||
<div>设备编号</div>
|
||||
<div>设备状态</div>
|
||||
<div>状态/警情内容</div>
|
||||
<div>报警时间</div>
|
||||
</div>
|
||||
|
||||
<el-scrollbar class="list-box" ref="refScrollbar">
|
||||
<div id="scrollBox" v-for="item in list" class="listStyle" :key="item.id">
|
||||
<div>{{ item.location }}</div>
|
||||
<div>{{ item.devName }}</div>
|
||||
<div>{{ item.devSn }}</div>
|
||||
<div>{{ item.deviceStatus == 1 ? "报警" : "其他" }}</div>
|
||||
<div>{{ item.detailStatus }}</div>
|
||||
<div>{{ item.alarmTime }}</div>
|
||||
</div>
|
||||
<div class="not-data" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { getFrontierProtectionPage, getCountFrontier, getNoNetDevPage, getTrendData } from "@/api/modules/securityManagement";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
// // 防翻越 1-正常；2-报警；3-失效
|
||||
// const antiCrossOptions = ref([
|
||||
// { label: "正常", value: 1 },
|
||||
// { label: "报警", value: 2 },
|
||||
// { label: "失效", value: 3 }
|
||||
// ]) as any;
|
||||
// 报警类型
|
||||
const alarmTypeOptions = ref({
|
||||
offLineNum: 0,
|
||||
onlineNum: 1,
|
||||
total: 1
|
||||
});
|
||||
|
||||
let rangeTime = ref([] as any);
|
||||
|
||||
// 报警数量
|
||||
const getEdgeAlarmType = async () => {
|
||||
const res: any = await getCountFrontier({ projectSn: store.sn });
|
||||
alarmTypeOptions.value = res.result;
|
||||
console.log("临边防护-报警类型", res);
|
||||
};
|
||||
const trendDataList = ref([] as any);
|
||||
|
||||
const getTrendDataList = async () => {
|
||||
const res: any = await getTrendData({ projectSn: store.sn, type: 1, devSn: selectDay.value });
|
||||
trendDataList.value = res.result;
|
||||
drawBar();
|
||||
console.log("临边防护-报警趋势", res);
|
||||
};
|
||||
|
||||
function drawBar() {
|
||||
console.log("---------------------edgeWeekTrend--------");
|
||||
const echartsTest = echarts.init(document.getElementById("edgeWeekTrend"));
|
||||
// const maxCount: any = specialList.value.sort((a: any, b: any) => b.totalNum - a.totalNum);
|
||||
let option = {
|
||||
// backgroundColor: '#071c3a',
|
||||
title: {
|
||||
// text: '日用气量分析',
|
||||
textStyle: {
|
||||
align: "center",
|
||||
color: "#fff",
|
||||
fontSize: 20
|
||||
},
|
||||
top: "2%",
|
||||
left: "center"
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(255, 255, 255,1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(0, 255, 233,0)"
|
||||
}
|
||||
],
|
||||
global: false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
left: "10%",
|
||||
right: "10%",
|
||||
bottom: "8%"
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
splitArea: {
|
||||
// show: true,
|
||||
color: "#f00",
|
||||
lineStyle: {
|
||||
color: "#f00"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
interval: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
// boundaryGap: false,
|
||||
data: trendDataList.value.map((item: any) => item.x)
|
||||
}
|
||||
],
|
||||
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
// name: unit.value,
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
nameLocation: "start"
|
||||
},
|
||||
min: 0,
|
||||
// max: 140,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#14346C"
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
margin: 20,
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "line",
|
||||
// smooth: true, //是否平滑
|
||||
showAllSymbol: true,
|
||||
// symbol: `image://${symbolIcon}`,
|
||||
symbol: "emptyCircle",
|
||||
smooth: 0.3,
|
||||
// symbolSize: 30,
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#4992FF",
|
||||
borderColor: "#4992FF",
|
||||
borderWidth: 5,
|
||||
shadowColor: "rgba(0, 0, 0, .6)",
|
||||
shadowBlur: 0,
|
||||
lineStyle: {
|
||||
width: 0.1,
|
||||
normal: {
|
||||
color: "#fff",
|
||||
shadowBlur: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(73, 146, 255,0.3)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(73, 146, 255, 0.1)"
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: "rgba(74, 192, 243, 1)",
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
data: trendDataList.value.map((item: any) => item.y)
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option, true);
|
||||
window.addEventListener("resize", () => {
|
||||
console.log(echartsTest);
|
||||
echartsTest.resize();
|
||||
});
|
||||
}
|
||||
|
||||
// 当前对应的种类
|
||||
let selectDay = ref("");
|
||||
let devList = ref([] as any[]);
|
||||
|
||||
function selectChange(e: any) {
|
||||
console.log("选择", e);
|
||||
selectDay.value = e;
|
||||
list.value = [];
|
||||
moreScroll.value = true;
|
||||
pageNo.value = 1;
|
||||
getEdgeRealtimeList();
|
||||
getTrendDataList();
|
||||
}
|
||||
|
||||
const getDevOption = async () => {
|
||||
const res: any = await getNoNetDevPage({ projectSn: store.sn, pageSize: 100, pageNo: 1 });
|
||||
console.log("设备列表", res);
|
||||
if (res.result.records.length > 0) {
|
||||
devList.value = res.result.records;
|
||||
selectDay.value = res.result.records[0].devSn;
|
||||
getEdgeRealtimeList();
|
||||
getTrendDataList();
|
||||
}
|
||||
};
|
||||
|
||||
let list = ref([] as any[]);
|
||||
const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
|
||||
const ScrollbarTop = ref(0);
|
||||
|
||||
let moreScroll = ref(true as any);
|
||||
|
||||
let pageNo = ref(1 as any);
|
||||
let pageSize = ref(30 as any);
|
||||
|
||||
// 获取临边防护报警数据
|
||||
const getEdgeRealtimeList = async () => {
|
||||
if (rangeTime.value == null) {
|
||||
rangeTime.value = ["", ""];
|
||||
}
|
||||
const res: any = await getFrontierProtectionPage({
|
||||
projectSn: store.sn,
|
||||
pageNo: 1,
|
||||
pageSize: pageSize.value,
|
||||
alarmTime_begin: rangeTime.value[0],
|
||||
alarmTime_end: rangeTime.value[1],
|
||||
devSn: selectDay.value
|
||||
});
|
||||
console.log("获取临边防护报警数据", res);
|
||||
list.value = res.result.records;
|
||||
if (res.result.pages == pageNo.value) {
|
||||
moreScroll.value = false;
|
||||
} else {
|
||||
pageNo.value = pageNo.value + 1;
|
||||
}
|
||||
// console.log("当前页数", pageNo.value);
|
||||
};
|
||||
|
||||
// 下拉加载
|
||||
const getMoreEdgeRealtimeList = async () => {
|
||||
if (rangeTime.value == null) {
|
||||
rangeTime.value = ["", ""];
|
||||
}
|
||||
const res: any = await getFrontierProtectionPage({
|
||||
projectSn: store.sn,
|
||||
pageNo: pageNo.value,
|
||||
pageSize: pageSize.value,
|
||||
alarmTime_begin: rangeTime.value[0],
|
||||
alarmTime_end: rangeTime.value[1]
|
||||
});
|
||||
// console.log("下拉加载临边防护报警数据", res);
|
||||
list.value = list.value.concat(res.result.records);
|
||||
if (res.result.pages == pageNo.value) {
|
||||
moreScroll.value = false;
|
||||
} else {
|
||||
pageNo.value = pageNo.value + 1;
|
||||
}
|
||||
// console.log("当前列表", list.value);
|
||||
// console.log("当前页数", pageNo.value);
|
||||
};
|
||||
onMounted(() => {
|
||||
// console.log("滚动容器", refScrollbar.value);
|
||||
refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
|
||||
// console.log("滚动容器", e);
|
||||
const scrollTop = e.target.scrollTop;
|
||||
const scrollHeight = e.target.scrollHeight;
|
||||
const clientHeight = e.target.clientHeight;
|
||||
// console.log("滚动容器", scrollTop, scrollHeight, clientHeight);
|
||||
// 向上加载更多
|
||||
if (scrollTop >= scrollHeight - clientHeight) {
|
||||
// console.log("加载更多");
|
||||
if (moreScroll.value) {
|
||||
getMoreEdgeRealtimeList();
|
||||
}
|
||||
}
|
||||
ScrollbarTop.value = scrollTop;
|
||||
});
|
||||
getDevOption();
|
||||
getEdgeAlarmType();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.distributionBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-image: url(@/assets/images/newedgeprotection-bg.png);
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
.content-top {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.content-left {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 27%;
|
||||
|
||||
.warn-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
.warn-icon {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.warn-detail {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.warn-text {
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
padding-top: 1%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
left: -20%;
|
||||
top: 12%;
|
||||
font-size: 20px;
|
||||
font-family: OPPOSans-Regular, OPPOSans;
|
||||
color: #ccc;
|
||||
background: url("@/assets/images/edgeProtection/textBg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.warn-tailt {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.color-81 {
|
||||
color: #81f279;
|
||||
}
|
||||
.color-f0 {
|
||||
color: #f04a4a;
|
||||
}
|
||||
.content-left_item1 {
|
||||
position: absolute;
|
||||
left: 20%;
|
||||
top: 44%;
|
||||
}
|
||||
.content-left_item2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
top: 40%;
|
||||
}
|
||||
.content-left_item3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
top: 65%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-right {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 72%;
|
||||
}
|
||||
}
|
||||
.content-bottom {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
.select-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
height: 14%;
|
||||
z-index: 9;
|
||||
}
|
||||
.list-content {
|
||||
height: 86%;
|
||||
width: 100%;
|
||||
// margin-top: 3%;
|
||||
// background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
.tab-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// position: absolute;
|
||||
left: 75.5%;
|
||||
top: 75%;
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
// justify-content: space-around;
|
||||
div {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
width: 17%;
|
||||
}
|
||||
}
|
||||
.list-box {
|
||||
height: 87%;
|
||||
position: relative;
|
||||
.list-style:nth-child(even) {
|
||||
background: rgba(39, 88, 192, 0.06);
|
||||
}
|
||||
.listStyle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
height: 8%;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
div {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
width: 17%;
|
||||
}
|
||||
}
|
||||
.listStyle:hover {
|
||||
background: #091f3f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep() {
|
||||
.h-card .content {
|
||||
margin-top: 0;
|
||||
}
|
||||
.h-card .title .titltText {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.not-data {
|
||||
top: 25%;
|
||||
width: 22%;
|
||||
left: 40%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -6% 37%;
|
||||
}
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
background: #112d59;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-select .el-input .el-select__caret) {
|
||||
color: #fff;
|
||||
}
|
||||
.numberCard {
|
||||
font-size: 30px;
|
||||
padding: 0 8px;
|
||||
margin-left: 3px;
|
||||
font-weight: bold;
|
||||
color: #47bcec;
|
||||
background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user