From 3b9b33c2b5ab555696e1012ed1e35446c8052786 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期一, 14 八月 2023 14:13:09 +0800
Subject: [PATCH] 更新大屏
---
src/assets/loginPage/panel-bg.png | 0
shim.d.ts | 1
src/assets/warningScreen/body-bg.png | 0
src/assets/warningScreen/data-2.png | 0
src/views/bigScreen/components/screen.vue | 1049 +++++++++++++++++++++++++++++++++++++++++++++++++
src/assets/warningScreen/scroll-bg.png | 0
src/assets/warningScreen/chart-bg.png | 0
src/assets/warningScreen/chart-bg4.png | 0
vite.config.ts | 22
src/views/loginPage/loginPage.vue | 34 +
src/router/route.ts | 16
src/assets/warningScreen/data-1.png | 0
src/assets/loginPage/rollingBall.gif | 0
src/views/loginPage/component/accountLogin.vue | 21
src/assets/warningScreen/data-6.png | 0
src/views/bigScreen/fullScreen/index.vue | 46 ++
src/layout/navBars/breadcrumb/user.vue | 27 -
src/assets/warningScreen/data-4.png | 0
src/assets/warningScreen/chart-bg3.png | 0
src/assets/loginPage/panel-bg2.png | 0
src/assets/warningScreen/data-5.png | 0
/dev/null | 0
src/assets/warningScreen/data-3.png | 0
src/assets/menu/company.png | 0
src/assets/loginPage/starFalls.gif | 0
src/assets/warningScreen/chart-bg2.png | 0
src/views/bigScreen/index.vue | 35 +
package.json | 5
src/assets/warningScreen/data.gif | 0
src/App.vue | 1
30 files changed, 1,200 insertions(+), 57 deletions(-)
diff --git a/package.json b/package.json
index 8b2ab23..90518f1 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,9 @@
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
},
"dependencies": {
+ "@amap/amap-jsapi-loader": "^1.0.1",
"@element-plus/icons-vue": "^2.0.6",
- "@kjgl77/datav-vue3": "^1.2.1",
+ "@kjgl77/datav-vue3": "^1.6.1",
"@wangeditor/editor": "^5.1.14",
"axios": "^0.27.2",
"countup.js": "^2.2.0",
@@ -50,9 +51,11 @@
"@typescript-eslint/parser": "^5.27.0",
"@vitejs/plugin-vue": "^2.3.3",
"@vue/compiler-sfc": "^3.2.36",
+ "amfe-flexible": "^2.2.1",
"dotenv": "^16.0.1",
"eslint": "^8.17.0",
"eslint-plugin-vue": "^9.1.0",
+ "postcss-pxtorem": "^6.0.0",
"prettier": "^2.6.2",
"sass": "^1.52.2",
"sass-loader": "^13.0.0",
diff --git a/shim.d.ts b/shim.d.ts
index 3e9bfd0..4de2a4a 100644
--- a/shim.d.ts
+++ b/shim.d.ts
@@ -11,3 +11,4 @@
interface Window {
nextLoading: boolean;
}
+declare module 'postcss-pxtorem'
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 8d21990..af8afc1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -89,6 +89,7 @@
// if(!Session.get('token')) return
// initBackEndControlRoutes()
});
+
// 页面销毁时，关闭监听布局配置/i18n监听
onUnmounted(() => {
proxy.mittBus.off('openSetingsDrawer', () => {});
diff --git a/src/assets/companyLogo.png b/src/assets/companyLogo.png
deleted file mode 100644
index 0f9f2d1..0000000
--- a/src/assets/companyLogo.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/loginPage/panel-bg.png b/src/assets/loginPage/panel-bg.png
index bb1518f..423b2c4 100644
--- a/src/assets/loginPage/panel-bg.png
+++ b/src/assets/loginPage/panel-bg.png
Binary files differ
diff --git a/src/assets/loginPage/panel-bg2.png b/src/assets/loginPage/panel-bg2.png
new file mode 100644
index 0000000..354548a
--- /dev/null
+++ b/src/assets/loginPage/panel-bg2.png
Binary files differ
diff --git a/src/assets/loginPage/rollingBall.gif b/src/assets/loginPage/rollingBall.gif
new file mode 100644
index 0000000..855711d
--- /dev/null
+++ b/src/assets/loginPage/rollingBall.gif
Binary files differ
diff --git a/src/assets/loginPage/starFalls.gif b/src/assets/loginPage/starFalls.gif
new file mode 100644
index 0000000..4dbddff
--- /dev/null
+++ b/src/assets/loginPage/starFalls.gif
Binary files differ
diff --git a/src/assets/menu/bg_home.jpg b/src/assets/menu/bg_home.jpg
deleted file mode 100644
index c8b3afd..0000000
--- a/src/assets/menu/bg_home.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/bg_home1.jpg b/src/assets/menu/bg_home1.jpg
deleted file mode 100644
index b4389fb..0000000
--- a/src/assets/menu/bg_home1.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/card1.png b/src/assets/menu/card1.png
deleted file mode 100644
index d70d653..0000000
--- a/src/assets/menu/card1.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/card10.png b/src/assets/menu/card10.png
deleted file mode 100644
index cb8129f..0000000
--- a/src/assets/menu/card10.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/card11.png b/src/assets/menu/card11.png
deleted file mode 100644
index 2155f53..0000000
--- a/src/assets/menu/card11.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/card2.png b/src/assets/menu/card2.png
deleted file mode 100644
index 9415cb6..0000000
--- a/src/assets/menu/card2.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/card3.png b/src/assets/menu/card3.png
deleted file mode 100644
index b22eae4..0000000
--- a/src/assets/menu/card3.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/card4.png b/src/assets/menu/card4.png
deleted file mode 100644
index d29a9f4..0000000
--- a/src/assets/menu/card4.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/card5.png b/src/assets/menu/card5.png
deleted file mode 100644
index ee12eb6..0000000
--- a/src/assets/menu/card5.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/card6.png b/src/assets/menu/card6.png
deleted file mode 100644
index cc7d602..0000000
--- a/src/assets/menu/card6.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/card7.png b/src/assets/menu/card7.png
deleted file mode 100644
index d5bf656..0000000
--- a/src/assets/menu/card7.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/card8.png b/src/assets/menu/card8.png
deleted file mode 100644
index a839c27..0000000
--- a/src/assets/menu/card8.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/card9.png b/src/assets/menu/card9.png
deleted file mode 100644
index 7481ef0..0000000
--- a/src/assets/menu/card9.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/company.png b/src/assets/menu/company.png
index b8f34a2..21a92f4 100644
--- a/src/assets/menu/company.png
+++ b/src/assets/menu/company.png
Binary files differ
diff --git a/src/assets/menu/companyLogo.png b/src/assets/menu/companyLogo.png
deleted file mode 100644
index 46b0568..0000000
--- a/src/assets/menu/companyLogo.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/icon1.png b/src/assets/menu/icon1.png
deleted file mode 100644
index bef5341..0000000
--- a/src/assets/menu/icon1.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/icon10.png b/src/assets/menu/icon10.png
deleted file mode 100644
index 0f1d961..0000000
--- a/src/assets/menu/icon10.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/icon11.png b/src/assets/menu/icon11.png
deleted file mode 100644
index 392b926..0000000
--- a/src/assets/menu/icon11.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/icon2.png b/src/assets/menu/icon2.png
deleted file mode 100644
index 5ca9d63..0000000
--- a/src/assets/menu/icon2.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/icon3.png b/src/assets/menu/icon3.png
deleted file mode 100644
index c512b58..0000000
--- a/src/assets/menu/icon3.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/icon4.png b/src/assets/menu/icon4.png
deleted file mode 100644
index 1088209..0000000
--- a/src/assets/menu/icon4.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/icon5.png b/src/assets/menu/icon5.png
deleted file mode 100644
index 28200e7..0000000
--- a/src/assets/menu/icon5.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/icon6.png b/src/assets/menu/icon6.png
deleted file mode 100644
index c58c489..0000000
--- a/src/assets/menu/icon6.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/icon7.png b/src/assets/menu/icon7.png
deleted file mode 100644
index 838cb9a..0000000
--- a/src/assets/menu/icon7.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/icon8.png b/src/assets/menu/icon8.png
deleted file mode 100644
index 0e7d42f..0000000
--- a/src/assets/menu/icon8.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/menu/icon9.png b/src/assets/menu/icon9.png
deleted file mode 100644
index ce58f60..0000000
--- a/src/assets/menu/icon9.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/card-1.png b/src/assets/newMenu/card-1.png
deleted file mode 100644
index eb8fa9b..0000000
--- a/src/assets/newMenu/card-1.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/card-10.png b/src/assets/newMenu/card-10.png
deleted file mode 100644
index e80c260..0000000
--- a/src/assets/newMenu/card-10.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/card-11.png b/src/assets/newMenu/card-11.png
deleted file mode 100644
index 7ae2a5e..0000000
--- a/src/assets/newMenu/card-11.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/card-2.png b/src/assets/newMenu/card-2.png
deleted file mode 100644
index 7261d75..0000000
--- a/src/assets/newMenu/card-2.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/card-3.png b/src/assets/newMenu/card-3.png
deleted file mode 100644
index 6ea4da0..0000000
--- a/src/assets/newMenu/card-3.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/card-4.png b/src/assets/newMenu/card-4.png
deleted file mode 100644
index bf5f61b..0000000
--- a/src/assets/newMenu/card-4.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/card-5.png b/src/assets/newMenu/card-5.png
deleted file mode 100644
index adde896..0000000
--- a/src/assets/newMenu/card-5.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/card-6.png b/src/assets/newMenu/card-6.png
deleted file mode 100644
index 83a90cc..0000000
--- a/src/assets/newMenu/card-6.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/card-7.png b/src/assets/newMenu/card-7.png
deleted file mode 100644
index 676e989..0000000
--- a/src/assets/newMenu/card-7.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/card-8.png b/src/assets/newMenu/card-8.png
deleted file mode 100644
index 95e0528..0000000
--- a/src/assets/newMenu/card-8.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/card-9.png b/src/assets/newMenu/card-9.png
deleted file mode 100644
index c8024f0..0000000
--- a/src/assets/newMenu/card-9.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/icon1.png b/src/assets/newMenu/icon1.png
deleted file mode 100644
index 99f305d..0000000
--- a/src/assets/newMenu/icon1.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/icon10.png b/src/assets/newMenu/icon10.png
deleted file mode 100644
index f7ae382..0000000
--- a/src/assets/newMenu/icon10.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/icon11.png b/src/assets/newMenu/icon11.png
deleted file mode 100644
index a19d8da..0000000
--- a/src/assets/newMenu/icon11.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/icon2.png b/src/assets/newMenu/icon2.png
deleted file mode 100644
index 1b2dae3..0000000
--- a/src/assets/newMenu/icon2.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/icon3.png b/src/assets/newMenu/icon3.png
deleted file mode 100644
index 9097055..0000000
--- a/src/assets/newMenu/icon3.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/icon4.png b/src/assets/newMenu/icon4.png
deleted file mode 100644
index 23ad0da..0000000
--- a/src/assets/newMenu/icon4.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/icon5.png b/src/assets/newMenu/icon5.png
deleted file mode 100644
index 71c54e5..0000000
--- a/src/assets/newMenu/icon5.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/icon6.png b/src/assets/newMenu/icon6.png
deleted file mode 100644
index cbad202..0000000
--- a/src/assets/newMenu/icon6.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/icon7.png b/src/assets/newMenu/icon7.png
deleted file mode 100644
index 34e62ed..0000000
--- a/src/assets/newMenu/icon7.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/icon8.png b/src/assets/newMenu/icon8.png
deleted file mode 100644
index 9c8d052..0000000
--- a/src/assets/newMenu/icon8.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/icon9.png b/src/assets/newMenu/icon9.png
deleted file mode 100644
index cb1199e..0000000
--- a/src/assets/newMenu/icon9.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/leftbg.jpg b/src/assets/newMenu/leftbg.jpg
deleted file mode 100644
index cdfc4f8..0000000
--- a/src/assets/newMenu/leftbg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/leftbg.png b/src/assets/newMenu/leftbg.png
deleted file mode 100644
index 61eab20..0000000
--- a/src/assets/newMenu/leftbg.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/pic_line1.png b/src/assets/newMenu/pic_line1.png
deleted file mode 100644
index 4212982..0000000
--- a/src/assets/newMenu/pic_line1.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/pic_line2.png b/src/assets/newMenu/pic_line2.png
deleted file mode 100644
index b6a65a5..0000000
--- a/src/assets/newMenu/pic_line2.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/topbg.jpg b/src/assets/newMenu/topbg.jpg
deleted file mode 100644
index 3d2dd9c..0000000
--- a/src/assets/newMenu/topbg.jpg
+++ /dev/null
Binary files differ
diff --git a/src/assets/newMenu/toplogo.png b/src/assets/newMenu/toplogo.png
deleted file mode 100644
index 8f50c3d..0000000
--- a/src/assets/newMenu/toplogo.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/warningScreen/body-bg.png b/src/assets/warningScreen/body-bg.png
new file mode 100644
index 0000000..fa6662b
--- /dev/null
+++ b/src/assets/warningScreen/body-bg.png
Binary files differ
diff --git a/src/assets/warningScreen/chart-bg.png b/src/assets/warningScreen/chart-bg.png
new file mode 100644
index 0000000..402e26d
--- /dev/null
+++ b/src/assets/warningScreen/chart-bg.png
Binary files differ
diff --git a/src/assets/warningScreen/chart-bg2.png b/src/assets/warningScreen/chart-bg2.png
new file mode 100644
index 0000000..1e075c7
--- /dev/null
+++ b/src/assets/warningScreen/chart-bg2.png
Binary files differ
diff --git a/src/assets/warningScreen/chart-bg3.png b/src/assets/warningScreen/chart-bg3.png
new file mode 100644
index 0000000..1e688b8
--- /dev/null
+++ b/src/assets/warningScreen/chart-bg3.png
Binary files differ
diff --git a/src/assets/warningScreen/chart-bg4.png b/src/assets/warningScreen/chart-bg4.png
new file mode 100644
index 0000000..20e122d
--- /dev/null
+++ b/src/assets/warningScreen/chart-bg4.png
Binary files differ
diff --git a/src/assets/warningScreen/data-1.png b/src/assets/warningScreen/data-1.png
new file mode 100644
index 0000000..9c278fb
--- /dev/null
+++ b/src/assets/warningScreen/data-1.png
Binary files differ
diff --git a/src/assets/warningScreen/data-2.png b/src/assets/warningScreen/data-2.png
new file mode 100644
index 0000000..62228e4
--- /dev/null
+++ b/src/assets/warningScreen/data-2.png
Binary files differ
diff --git a/src/assets/warningScreen/data-3.png b/src/assets/warningScreen/data-3.png
new file mode 100644
index 0000000..4512d7f
--- /dev/null
+++ b/src/assets/warningScreen/data-3.png
Binary files differ
diff --git a/src/assets/warningScreen/data-4.png b/src/assets/warningScreen/data-4.png
new file mode 100644
index 0000000..cd36d80
--- /dev/null
+++ b/src/assets/warningScreen/data-4.png
Binary files differ
diff --git a/src/assets/warningScreen/data-5.png b/src/assets/warningScreen/data-5.png
new file mode 100644
index 0000000..7615ce8
--- /dev/null
+++ b/src/assets/warningScreen/data-5.png
Binary files differ
diff --git a/src/assets/warningScreen/data-6.png b/src/assets/warningScreen/data-6.png
new file mode 100644
index 0000000..3cf6148
--- /dev/null
+++ b/src/assets/warningScreen/data-6.png
Binary files differ
diff --git a/src/assets/warningScreen/data.gif b/src/assets/warningScreen/data.gif
new file mode 100644
index 0000000..7c0cc58
--- /dev/null
+++ b/src/assets/warningScreen/data.gif
Binary files differ
diff --git a/src/assets/warningScreen/logo_dark.png b/src/assets/warningScreen/logo_dark.png
deleted file mode 100644
index 96a4d41..0000000
--- a/src/assets/warningScreen/logo_dark.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/warningScreen/scroll-bg.png b/src/assets/warningScreen/scroll-bg.png
new file mode 100644
index 0000000..ee1507b
--- /dev/null
+++ b/src/assets/warningScreen/scroll-bg.png
Binary files differ
diff --git a/src/layout/navBars/breadcrumb/user.vue b/src/layout/navBars/breadcrumb/user.vue
index 9f7f963..485e95f 100644
--- a/src/layout/navBars/breadcrumb/user.vue
+++ b/src/layout/navBars/breadcrumb/user.vue
@@ -1,9 +1,7 @@
<template>
<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
<div class="logo">
-<!-- <img @click="toHome" src="../../../assets/menu/company.png" />-->
<img src="../../../assets/menu/company.png" />
-<!-- <span>{{ systemName }}</span>-->
</div>
<div style="display: flex; align-items: center; padding-right: 5px">
<!-- <div @click="backToMenu()" class="backBtn">返回首页</div>-->
@@ -120,8 +118,7 @@
const state = reactive({
isScreenfull: false,
disabledI18n: 'zh-cn',
- disabledSize: 'large',
- systemName: ''
+ disabledSize: 'large'
});
// 设置分割样式
const layoutUserFlexNum = computed(() => {
@@ -251,23 +248,6 @@
break;
}
};
-
- const getSysName = async () => {
- if (window.nextLoading === undefined) NextLoading.start();
- if (!Cookies.get('token')) return false;
- const res = await menuApi.getMenuAdmin(Cookies.get('projectId') === null ? '' : Cookies.get('projectId'));
- if (res.data.code === '200') {
- state.systemName = res.data.data[1].project.projectName;
- } else {
- console.log('有问题');
- }
- };
- // const backToMenu = () => {
- // router.push({ path: 'newMenu' }).then(()=>{
- // routeList.routesList.value = []
- // console.log(routeList);
- // });
- // };
const toHome = () => {
router.push({ path: 'newMenu' });
};
@@ -277,7 +257,6 @@
initI18n();
initComponentSize();
}
- getSysName();
});
return {
userInfos,
@@ -379,8 +358,8 @@
justify-content: space-between;
.logo {
- height: 75%;
- padding: 5px 10px;
+ width: 531px;
+ height: 60px;
display: flex;
align-items: center;
overflow: hidden;
diff --git a/src/router/route.ts b/src/router/route.ts
index af6515f..c9d3e74 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -70,5 +70,21 @@
meta: {
title: '登录'
}
+ },
+ {
+ path: '/fullScreen',
+ name: 'fullScreen',
+ component: () => import('/@/views/bigScreen/fullScreen/index.vue'),
+ meta: {
+ title: '全屏'
+ }
+ },
+ {
+ path: '/bigScreen',
+ name: 'bigScreen',
+ component: () => import('/@/views/bigScreen/index.vue'),
+ meta: {
+ title: '全屏'
+ }
}
];
diff --git a/src/views/bigScreen/components/screen.vue b/src/views/bigScreen/components/screen.vue
new file mode 100644
index 0000000..71c340e
--- /dev/null
+++ b/src/views/bigScreen/components/screen.vue
@@ -0,0 +1,1049 @@
+<template>
+ <div class="charts-container">
+ <div class="header-content">
+ <div class="title-left">
+<!-- <img src="../../../assets/warningScreen/logo_dark.png" alt="" />-->
+ <div class="datetime">
+ <div class="timel">{{time}}</div>
+ <div class="timer">
+ <div>{{date}}</div>
+ <div>{{weekDay}}</div>
+ </div>
+ </div>
+ </div>
+ <div class="title"><span>广域特殊气体泄漏在线监测预警系统</span></div>
+ <div class="title-right">
+ <div class="btns">
+ <div class="fullBtn" v-if="!isFull" @click="toFull()">
+ <el-icon><FullScreen /></el-icon>
+ <div>全屏</div>
+ </div>
+ <div class="backBtn" @click="back()" v-else>
+ <el-icon><SwitchButton /></el-icon>
+ <div>退出</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="main-content">
+ <div id="bigMap"></div>
+ <div class="main-left">
+ <div class="left-top withFilter">
+ <div class="chart-head">
+ <div class="chart-tit">预警汇总</div>
+ <el-radio-group v-model="chart1Search">
+ <el-radio :label="1" size="small" border>当日</el-radio>
+ <el-radio :label="2" size="small" border>近7天</el-radio>
+ <el-radio :label="3" size="small" border>近30天</el-radio>
+ <el-radio :label="4" size="small" border>当年</el-radio>
+ </el-radio-group>
+ </div>
+ <div class="chart-cont">
+ <div class="orange">
+ <div><span>30</span><span>橙色预警</span></div>
+ </div>
+ <div class="red">
+ <div><span>10</span><span>红色预警</span></div>
+ </div>
+ </div>
+ </div>
+ <div class="left-mid withFilter">
+ <div class="chart-head">
+ <div class="chart-tit">预警信息</div>
+ <el-date-picker
+ v-model="chart2Search"
+ size="small"
+ :teleported="false"
+ type="daterange"
+ unlink-panels
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss"
+ />
+ </div>
+ <div class="chart-cont">
+ <dv-scroll-board :config="config" class="scroll-table" @mouseover="mouseoverHandler" @click="clickHandler" />
+ </div>
+ </div>
+ <div class="left-bottom withFilter">
+ <div class="chart-head">
+ <div class="chart-tit">设备状态</div>
+ <div class="sys-status">
+ <Cpu style="width: 1.2em; height: 1.2em; color: #fff" />
+ <div>系统状态:<span>正常</span></div>
+ </div>
+ </div>
+ <div class="chart-cont">
+ <div class="online">
+ <dv-decoration-9 :color="['#22aaff','rgba(34,170,255,.6)']">
+ <div color-green font-600 class="isOnline" bg="~ dark/0">
+ 0
+ </div>
+ </dv-decoration-9>
+ <div>在线</div>
+ </div>
+ <div class="online">
+ <dv-decoration-9 :color="['#ee594a','rgba(238,89,74,.6)']">
+ <div color-red font-600 class="isOnline red-font" bg="~ dark/0">
+ 1
+ </div>
+ </dv-decoration-9>
+ <div style="color:#ee594a;">离线</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="main-middle">
+ <div class="mid-bottom">
+ <div class="chart-head">
+ <div class="chart-tit">气象信息</div>
+ </div>
+ <div class="chart-cont bigData">
+ <div class="bigPic">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ <dv-scroll-board :config="bigConfig" class="scroll-table" @mouseover="mouseoverHandler" @click="clickHandler" />
+ </div>
+ </div>
+ </div>
+ <div class="main-right">
+ <div class="right-top withFilterLong">
+ <div class="chart-head">
+ <div class="chart-tit long-tit">气体浓度监测</div>
+ <el-select v-model="gasSearch" :teleported="false" class="m-2" placeholder="Select" size="small">
+ <el-option
+ v-for="item in gasOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </div>
+ <div class="chart-cont">
+ <div class="echart" :id="gasN"></div>
+ </div>
+ </div>
+ <div class="right-mid withFilterLong">
+ <div class="chart-head">
+ <div class="chart-tit long-tit">气体通量监测</div>
+ <div class="searchGroup">
+ <el-select v-model="searchParams.gasSearch" :teleported="false" class="m-2" placeholder="Select" size="small">
+ <el-option
+ v-for="item in gasOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ <el-select v-model="searchParams.areaSearch" :teleported="false" class="m-2" placeholder="Select" size="small">
+ <el-option
+ v-for="item in areaOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+ </div>
+ </div>
+ <div class="chart-cont">
+ <div class="echart" :id="gasT"></div>
+ </div>
+ </div>
+ <div class="right-bottom withoutFilter">
+ <div class="chart-head">
+ <div class="chart-tit long-tit">实时数据量</div>
+ </div>
+ <div class="chart-cont">
+ <div class="online">
+ <div class="totalNum"><span>1048</span>条</div>
+ <div class="dataPic"></div>
+ <div class="totalNum">浓度条数</div>
+ </div>
+ <div class="online">
+ <div class="totalNum"><span>566</span>条</div>
+ <div class="dataPic"></div>
+ <div class="totalNum">通量条数</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script lang="ts">
+import {toRefs, reactive, onMounted, ref, defineComponent, onUnmounted} from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { useRouter} from "vue-router";
+import * as echarts from "echarts";
+import "amfe-flexible";
+import AMapLoader from '@amap/amap-jsapi-loader'
+import { shallowRef } from '@vue/reactivity'
+// 定义接口来定义对象的类型
+interface TableDataState {
+ time: string
+ date: string
+ weekDay: string
+ dayTime:string
+ isFull: boolean
+ chart1Search: number | null
+ chart2Search: Array<string>
+ gasSearch: number | null
+ gasOptions: Array<gasType>
+ searchParams: Object
+ areaOptions: Array<gasType>
+}
+
+interface gasType {
+ label: string
+ value: number | null
+}
+
+export default defineComponent({
+ name: 'bigScreen',
+ components: { },
+ props:{
+ isFull: Boolean
+ },
+ setup(props,context) {
+ const state = reactive<TableDataState>({
+ time: '',
+ date: '',
+ weekDay: '',
+ dayTime: '',
+ isFull: props.isFull,
+ chart1Search: 1,
+ chart2Search: [],
+ gasSearch: 1,
+ gasOptions: [
+ {
+ label: '气体一',
+ value: 1
+ },
+ {
+ label: '气体二',
+ value: 2
+ },
+ {
+ label: '气体三',
+ value: 3
+ }
+ ],
+ searchParams:{
+ gasSearch: 1,
+ areaSearch: 1
+ },
+ areaOptions: [
+ {
+ label: '区域一',
+ value: 1
+ },
+ {
+ label: '区域二',
+ value: 2
+ },
+ {
+ label: '区域三',
+ value: 3
+ }
+ ]
+ });
+ const router = useRouter();
+ const gasN = ref("eChartgasN" + Date.now() + Math.random())
+ const gasT = ref("eChartgasT" + Date.now() + Math.random())
+ const timeForm = {
+ hour12: false,
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ };
+
+ // 页面加载时
+ onMounted(() => {
+ const baseSize = 38;
+ function setRem() {
+ const scale = document.documentElement.clientWidth / 1920;/* 当前页面宽度缩放比例，可根据自己需要修改 */
+ document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
+ }
+
+ setRem();
+
+ window.onresize = () => {
+ setRem();/* 改变窗口大小时重新设置 rem */
+ }
+ getDateTime();
+ setInterval(() => {
+ getDateTime();
+ }, 1000);
+ initgasN()
+ initgasT()
+ initMap()
+ });
+
+ const config = reactive({
+ header: ['预警级别','气体名称', '气体浓度', '时间'],
+ data: [
+ ['红色预警', '甲烷', '19', '2023-08-10'],
+ ['<span style="color:red;">红色预警</span>', '甲烷', '19', '2023-08-10'],
+ ['红色预警', '甲烷', '19', '2023-08-10'],
+ ['红色预警', '甲烷', '19', '2023-08-10'],
+ ['红色预警', '甲烷', '19', '2023-08-10'],
+ ['红色预警', '甲烷', '19', '2023-08-10']
+ ],
+ index: true,
+ columnWidth: [38],
+ align: ['center','center','center','center','center'],
+ headerBGC: '',
+ oddRowBGC: '',
+ evenRowBGC: ''
+ })
+
+ const bigConfig = reactive({
+ header: ['时间','温度', '湿度', '风速', '风向', '气压'],
+ data: [
+ ['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20'],['2023-08-10 13:29:25','56', '105', '40', '32', '20']
+ ],
+ align: ['center','center','center','center','center','center'],
+ headerBGC: '',
+ oddRowBGC: '',
+ evenRowBGC: '',
+ rowNum: 3
+ })
+
+ const mouseoverHandler = (e: any) => {
+ console.log(e)
+ }
+
+ const clickHandler = (e: any) => {
+ console.log(e)
+ }
+
+ type EChartsOption = echarts.EChartsOption
+ const initgasN =()=>{
+ let dom = document.getElementById(gasN.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ xAxis: {
+ type: 'category',
+ data: ['10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30'],
+ axisLabel: {
+ color: '#fff'
+ }
+ },
+ yAxis: {
+ axisLine:{
+ show: true
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel:{
+ color: '#ccc'
+ }
+ },
+ grid: {
+ top: '5%',
+ bottom: '10%',
+ right: '0%'
+ },
+ series: [
+ {
+ data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
+ type: 'line',
+ // label:{
+ // show: true,
+ // color: '#fff',
+ // textBorderColor: 'transparent'
+ // },
+ lineStyle:{
+ color: '#54d5ff'
+ },
+ itemStyle:{
+ color: '#54d5ff',
+ },
+ areaStyle:{
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: '#2af' // 0% 处的颜色
+ }, {
+ offset: 1, color: 'rgba(255,255,255,.1)' // 100% 处的颜色
+ }],
+ global: false // 缺省为 false
+ }
+ }
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ const initgasT =()=>{
+ let dom = document.getElementById(gasT.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ grid: {
+ left: '0%',
+ right: '0%',
+ bottom: '1%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: ['10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30', '10:36:30'],
+ axisLabel: {
+ color: '#fff'
+ }
+ },
+ yAxis: {
+ type: 'value',
+ boundaryGap: [0, 0.01],
+ splitLine: {
+ show: false
+ },
+ axisLabel:{
+ color: '#ccc'
+ }
+ },
+ series: [
+ {
+ name: '2011',
+ type: 'bar',
+ data: [18, 23, 29, 10, 13, 6],
+ label:{
+ show: true,
+ color: '#fff',
+ textBorderColor: 'transparent'
+ }
+ },
+ {
+ name: '2012',
+ type: 'bar',
+ data: [19, 23, 31, 12, 13, 6],
+ label:{
+ show: true,
+ color: '#fff',
+ textBorderColor: 'transparent'
+ }
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+
+ const map = shallowRef(null)
+ const initMap=()=> {
+ let m = map.value
+ window._AMapSecurityConfig = {
+ securityJsCode: "456045075984862a9806587f0d7fee3c",
+ };
+ AMapLoader.load({
+ key: '5dbeedfa28e0d7fffb59684446569773', // 申请好的Web端开发者Key，首次调用 load 时必填
+ version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+ plugins: [] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+ })
+ .then(AMap => {
+ if (AMap && typeof AMap.Map === 'function') {
+ m = new AMap.Map('bigMap', {
+ viewMode: '2D',
+ mapStyle: 'amap://styles/normal',
+ zoom: 18,
+ center: [85.057805, 45.62550],
+ // layers:[
+ // new AMap.TileLayer.RoadNet({}),
+ // new AMap.TileLayer.Satellite()
+ // ],
+ zooms:[2,20],
+ })
+
+ AMap.plugin(["AMap.DistrictSearch","AMap.ToolBar","AMap.ControlBar"],()=> {
+ var district = new AMap.DistrictSearch({
+ extensions: "all",
+ subdistrict: 0,
+ level: "district",
+ });
+ district.search("克拉玛依市", function (status, result) {
+ // // 外多边形坐标数组和内多边形坐标数组
+ var outer = [
+ new AMap.LngLat(-360, 90, true),
+ new AMap.LngLat(-360, -90, true),
+ new AMap.LngLat(360, -90, true),
+ new AMap.LngLat(360, 90, true),
+ ]; // 使得遮盖填充反向
+ var holes = result.districtList[0].boundaries; // 得到该区域的边界坐标集合
+
+ var pathArray = [outer];
+ pathArray.push.apply(pathArray, holes);
+ var polygon = new AMap.Polygon({
+ pathL: pathArray,
+ //线条颜色，使用16进制颜色代码赋值。默认值为#006600
+ strokeColor: "#11feee",
+ strokeWeight: 3,
+ fillColor: "#051342",
+ fillOpacity: 1,
+ strokeStyle: "solid",
+ strokeDasharray: [2, 2],
+ });
+ polygon.setPath(pathArray)
+ m.add(polygon);
+ })
+ m.addControl(new AMap.ToolBar({
+ position: {
+ top: '20px',
+ left: 'calc(25% + 5px)'
+ }
+ }))
+ m.addControl(new AMap.ControlBar({
+ position: {
+ top: '20px',
+ right: 'calc(25% + 5px)'
+ }
+ }))
+ })
+
+ } else {
+ console.error('AMap 或 AMap.Map 不可用');
+ }
+ })
+ .catch(e => {
+ console.log('加载高德地图时出错：', e)
+ })
+ }
+ // 当前时间
+ const getDateTime = () => {
+ const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
+ state.time = curTime.slice(10, 19);
+ state.date = curTime.slice(0, 10);
+ let week = ['日', '一', '二', '三', '四', '五', '六'];
+ let day = new Date().getDay();
+ state.weekDay = '星期' + week[day];
+ let curHour = Number(curTime.slice(10, 13));
+ if (curHour >= 5 && curHour <= 10) {
+ state.dayTime = '上午';
+ }
+ if (curHour > 10 && curHour <= 12) {
+ state.dayTime = '中午';
+ }
+ if (curHour > 12 && curHour <= 18) {
+ state.dayTime = '下午';
+ }
+ if (curHour > 18 && curHour <= 22) {
+ state.dayTime = '晚上';
+ }
+ if (curHour > 22) {
+ state.dayTime = '午夜';
+ }
+ }
+ const toFull= ()=>{
+ router.push({
+ path:"/fullScreen"
+ })
+ context.emit('clickFull')
+ }
+ const back=()=>{
+ window.history.go(-1);
+ context.emit('clickFull')
+ }
+
+ onUnmounted(()=>{
+ map.value && map.value.destroy();
+ })
+
+ return {
+ timeForm,
+ config,
+ bigConfig,
+ gasN,
+ gasT,
+ map,
+ mouseoverHandler,
+ clickHandler,
+ toFull,
+ back,
+ ...toRefs(state)
+ };
+ }
+});
+</script>
+<style lang="scss" scoped>
+.charts-container{
+ width: 100%;
+ height: 100%;
+ background: url("../../../assets/warningScreen/body-bg.png") no-repeat center;
+ background-size: 100% 100%;
+}
+.header-content {
+ width: 100%;
+ height: 10%;
+ padding: 0 20px;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-around;
+ z-index: 9;
+
+ .title-left {
+ width: 27%;
+ height: 50%;
+ display: flex;
+ align-items: center;
+ .datetime{
+ display: flex;
+ align-items: center;
+ color: #11feee;
+
+ .timel{
+ font-size: 30px;
+ margin-right: 10px;
+ }
+ .timer{
+ font-size: 12px;
+ }
+ }
+ }
+ .title {
+ width: 46%;
+ height: 100%;
+ font-size: 28px;
+ font-weight: bolder;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ letter-spacing: 10px;
+ color: #11feee;
+ }
+
+ .title-right {
+ width: 27%;
+ height: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: right;
+ font-size: 14px;
+
+ .btns{
+ display: flex;
+ align-items: center;
+ top: 3%;
+ right: 10%;
+
+ .backBtn,.fullBtn{
+ display: flex;
+ color: #11feee;
+ align-items: center;
+ cursor: pointer;
+
+ &>div{
+ margin-left: 6px;
+ }
+ }
+ }
+ }
+}
+.main-content{
+ width: 100%;
+ height: 90%;
+ padding: 10px;
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ position: relative;
+
+ &>div{
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: flex-start;
+ &>div{
+ padding: 0 4px;
+ box-sizing: border-box;
+ .chart-head{
+ width: 100%;
+ height: 40px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .chart-tit{
+ width: 34%;
+ padding-left: 15px;
+ letter-spacing: 4px;
+ font-size: 16px;
+ font-weight: bolder;
+ line-height: 34px;
+ color: #11feee;
+ }
+ .long-tit{
+ width: 40%;
+ }
+ .el-select{
+ width: 60%;
+ height: 20px;
+ }
+ ::v-deep(.el-popper){
+ background-color: rgba(10,31,92,1);
+ border: 1px solid rgba(17,254,238,.4);
+ color: #11FEEE;
+
+ .el-icon{
+ color: #11FEEE;
+ }
+ .el-select-dropdown__item{
+ color: #11FEEE;
+ }
+ .el-select-dropdown__item.hover{
+ background: #0049af;
+ }
+ }
+ ::v-deep(.el-popper__arrow){
+ &::before{
+ background-color: rgba(10,31,92,.6) !important;
+ border: 1px solid rgba(17,254,238,.4);
+ }
+ }
+
+ .sys-status{
+ width: 66%;
+ height: 70%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 12px;
+ div{
+ color: #fff;
+ margin-left: 2px;
+ span{
+ color: #11feee;
+ margin-left: 10px;
+ font-size: 14px;
+ }
+ }
+ }
+
+ .el-radio-group{
+ height: 90%;
+ width: 66%;
+ flex-flow: row nowrap;
+ display: flex;
+ align-items: center;
+ justify-content: right;
+ .el-radio{
+ width: calc((100% - 6px)/4);
+ margin-right: 0;
+ margin-left: 2px;
+ margin-bottom: 0;
+ text-align: center;
+ border-color: #ccc;
+ &.el-radio--small{
+ height: 20px;
+ }
+ :deep(.el-radio__inner){
+ display: none;
+ }
+ :deep(.el-radio__label){
+ width: 100%;
+ padding-left: 0;
+ font-size: 10px;
+ color: #ccc;
+ }
+ }
+ .el-radio.is-bordered.is-checked{
+ border-color: #11FEEE;
+ background: #005dd6;
+ box-shadow: 0 3px 8px rgba(0,0,0,.2);
+
+ :deep(.el-radio__label){
+ color: #fff;
+ }
+ }
+ }
+ :deep(.el-date-editor){
+ width: 66%;
+ height: 20px;
+ .el-range-separator{
+ color: #fff;
+ }
+ }
+
+ :deep(.el-input__wrapper){
+ box-shadow: none;
+ border: 1px solid #11FEEE;
+ background: #005dd6;
+ color: #fff;
+
+ input{
+ font-size: 10px;
+ color: #fff;
+ }
+ .el-icon{
+ display: none;
+ color: #fff;
+ }
+ }
+
+ .searchGroup{
+ width: 60%;
+ height: 20px;
+ display: flex;
+ align-items: center;
+ }
+ }
+ .chart-cont{
+ height: calc(100% - 40px);
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ padding: 0 15px;
+
+ .orange,.red{
+ width: 140px;
+ height: 140px;
+ border-radius: 50%;
+ border: 2px solid #ffb74b;
+ padding: 8px;
+ div{
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background: #ffb74b;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ font-size: 14px;
+ span:first-of-type{
+ font-size: 28px;
+ font-weight: bolder;
+ margin-bottom: 4px;
+ }
+ }
+ }
+ .red{
+ border: 2px solid #ee594a;
+ div{
+ background: #ee594a;
+ }
+ }
+ :deep(.dv-scroll-board){
+ width: 100%;
+ height: 90%;
+ .header{
+ font-size: 12px;
+ color: #11feee;
+ }
+ .rows{
+ .row-item{
+ border-bottom: 1px dashed rgba(255,255,255,.2);
+ font-size: 12px;
+ }
+ }
+ }
+ .online{
+ width: 50%;
+ padding: 0 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ .dv-decoration-9{
+ width: 120px;
+ height: 120px;
+ .isOnline{
+ font-size: 36px;
+ font-family: "PingFang SC";
+ font-weight: 600;
+ color: #2af;
+ text-shadow: 0 1px 3px #2af;
+ }
+ .red-font{
+ color: red;
+ text-shadow: 0 1px 3px red;
+ }
+ }
+ &>div{
+ color: #2af;
+ margin-top: 10px;
+ }
+ .totalNum{
+ color: #ccc;
+ span{
+ font-size: 18px;
+ color: #11feee;
+ margin-right: 10px;
+ }
+ }
+ .dataPic{
+ width: 100%;
+ height: 100px;
+ background: url("../../../assets/warningScreen/data.gif") no-repeat center;
+ background-size: 100% 100%;
+ }
+ }
+ .echart{
+ width: 100%;
+ height: 80%;
+ }
+ }
+
+ .bigData{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 5px 10px;
+ .bigPic{
+ width: 100%;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ div{
+ width: 50px;
+ height: 50px;
+ background: url("../../../assets/warningScreen/data-1.png") no-repeat center;
+ background-size: 90% 90%;
+ }
+ div:nth-of-type(2){
+ background: url("../../../assets/warningScreen/data-2.png") no-repeat center;
+ background-size: 90% 90%;
+ }
+ div:nth-of-type(3){
+ background: url("../../../assets/warningScreen/data-3.png") no-repeat center;
+ background-size: 90% 90%;
+ }
+ div:nth-of-type(4){
+ background: url("../../../assets/warningScreen/data-4.png") no-repeat center;
+ background-size: 90% 90%;
+ }
+ div:nth-of-type(5){
+ background: url("../../../assets/warningScreen/data-5.png") no-repeat center;
+ background-size: 90% 90%;
+ }
+ div:nth-of-type(6){
+ background: url("../../../assets/warningScreen/data-6.png") no-repeat center;
+ background-size: 90% 90%;
+ }
+ }
+
+ :deep(.dv-scroll-board){
+ width: 100%;
+ height: calc(100% - 60px);
+ .header{
+ color: #11feee;
+ }
+ .rows{
+ background: url("../../../assets/warningScreen/scroll-bg.png") no-repeat center;
+ background-size: 100% 100%;
+ padding: 6px 0 0;
+ .row-item{
+ border-bottom: none;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ #bigMap{
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+
+ :deep(.amap-logo){
+ display: none!important;
+ visibility: hidden!important;
+ }
+
+ :deep(.amap-copyright) {
+ display: none!important;
+ visibility: hidden!important;
+ }
+ }
+
+ .main-left{
+ z-index: 9;
+ width: calc(25% - 5px);
+ &>div{
+ width: 100%;
+ height: calc((100%/3) - (20px/3));
+ }
+ .withFilter{
+ background: url("../../../assets/warningScreen/chart-bg2.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ .withoutFilter{
+ background: url("../../../assets/warningScreen/chart-bg.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ }
+ .main-middle{
+ width: calc(50% - 10px);
+ height: calc((100%/3) - (20px/3));
+ z-index: 9;
+
+ .mid-bottom{
+ width: 100%;
+ height: 100%;
+ background: url("../../../assets/warningScreen/chart-bg4.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ }
+ .main-right{
+ width: calc(25% - 5px);
+ z-index: 9;
+ &>div{
+ width: 100%;
+ height: calc((100%/3) - (20px/3));
+ }
+ .withFilter{
+ background: url("../../../assets/warningScreen/chart-bg2.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ .withFilterLong{
+ background: url("../../../assets/warningScreen/chart-bg3.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ .withoutFilter{
+ background: url("../../../assets/warningScreen/chart-bg.png") no-repeat center;
+ background-size: 100% 100%;
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/bigScreen/fullScreen/index.vue b/src/views/bigScreen/fullScreen/index.vue
new file mode 100644
index 0000000..44c799d
--- /dev/null
+++ b/src/views/bigScreen/fullScreen/index.vue
@@ -0,0 +1,46 @@
+<template>
+ <div class="screen-container">
+ <screen :isFull="isScreenfull" @clickFull="clickFullscreen"></screen>
+ </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import screen from '../components/screen.vue'
+import screenfull from 'screenfull'
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+// 定义接口来定义对象的类型
+interface TableDataState {
+ isScreenfull: boolean
+}
+
+export default defineComponent({
+ name: 'fullScreen',
+ components: {screen},
+ setup() {
+ const state = reactive<TableDataState>({
+ isScreenfull: true,
+ });
+
+ // 页面加载时
+ onMounted(() => {
+
+ });
+
+ const clickFullscreen =() => {
+
+ }
+
+ return {
+ clickFullscreen,
+ ...toRefs(state)
+ };
+ }
+});
+</script>
+<style lang="scss" scoped>
+.screen-container{
+ height: 100vh;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/bigScreen/index.vue b/src/views/bigScreen/index.vue
index f7775c5..375be53 100644
--- a/src/views/bigScreen/index.vue
+++ b/src/views/bigScreen/index.vue
@@ -1,39 +1,50 @@
<template>
- <div class="system-role-container">
- 6666666
+ <div class="screen-container">
+ <screen :isFull="isScreenfull" @clickFull="clickFullscreen"></screen>
</div>
</template>
<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import screen from './components/screen.vue'
+import screenfull from 'screenfull'
+import { ElMessage, ElMessageBox } from 'element-plus';
// 定义接口来定义对象的类型
-interface TableData {
-
-}
interface TableDataState {
-
+ isScreenfull: boolean
}
export default defineComponent({
name: 'bigScreen',
- components: { },
+ components: { screen },
setup() {
- const roleDialogRef = ref();
const state = reactive<TableDataState>({
-
+ isScreenfull: false,
});
// 页面加载时
onMounted(() => {
});
- return {
- ...toRefs(state)
+
+ const clickFullscreen =() => {
+ if(!screenfull.isEnabled){
+ ElMessage.error('浏览器不支持')
+ return false
+ }
+ screenfull.toggle();
+ }
+
+ return {
+ clickFullscreen,
+ ...toRefs(state)
};
}
});
</script>
<style lang="scss" scoped>
-
+.screen-container{
+ height: calc(100vh - 144px);
+}
</style>
\ No newline at end of file
diff --git a/src/views/loginPage/component/accountLogin.vue b/src/views/loginPage/component/accountLogin.vue
index d6c456d..1e074ad 100644
--- a/src/views/loginPage/component/accountLogin.vue
+++ b/src/views/loginPage/component/accountLogin.vue
@@ -1,14 +1,14 @@
<template>
<el-form size="large" class="login-content-form">
<el-form-item class="login-animation1">
- <el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.name" clearable autocomplete="off" size="large">
+ <el-input type="text" placeholder="请输入用户名" v-model="ruleForm.name" clearable autocomplete="off" size="large">
<template #prefix>
<el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_user.png" style="width: 24px; height: 24px" /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item class="login-animation2">
- <el-input :type="isShowPassword ? 'text' : 'password'" :placeholder="$t('message.account.accountPlaceholder2')" v-model="ruleForm.pwd" autocomplete="off" size="large" @keyup.enter.native="onSignIn">
+ <el-input :type="isShowPassword ? 'text' : 'password'" placeholder="请输入密码" v-model="ruleForm.pwd" autocomplete="off" size="large" @keyup.enter.native="onSignIn">
<template #prefix>
<el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_password.png" style="width: 24px; height: 24px" /></el-icon>
</template>
@@ -84,7 +84,7 @@
import { useLoginApi } from '/@/api/login';
import { useUserInfo } from '/@/stores/userInfo';
import type { FormInstance, FormRules } from 'element-plus'
-
+import "amfe-flexible";
import {verifyPhone,verifyIdCard} from "/@/utils/toolsValidate"
import { Base64 } from 'js-base64'
import {useMenuApi} from "/@/api/systemManage/menu";
@@ -122,6 +122,17 @@
// 页面载入时执行方法
onMounted(() => {
hasUserCodeOrPassword()
+ const baseSize = 38;
+ /* 设置 rem 函数 */
+ function setRem() {
+ const scale = document.documentElement.clientWidth / 1920; /* 当前页面宽度缩放比例，可根据自己需要修改 */
+ document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
+ }
+ setRem();/* 初始化 rem */
+
+ window.onresize = () => {
+ setRem();/* 改变窗口大小时重新设置 rem */
+ }
// getAllDepartment();
});
@@ -190,7 +201,6 @@
state.loading.signIn = true;
// 存储 token 到浏览器缓存
let res = await useLoginApi().signIn(state.ruleForm);
- console.log(res)
if (res.data.code === 100) {
await userInfo.setUserInfos(res.data.data);
Cookies.set('token', res.data.data.tk);
@@ -388,7 +398,6 @@
border: 1px solid #11FEEE;
letter-spacing: 4px;
font-weight: 300;
- margin-top: 15px;
background-image: linear-gradient(to bottom,#0081C2,#003892,#0081C2);
transition: 0.3s;
box-shadow: 0 8px 30px rgba(88,101,241,.4);
@@ -397,6 +406,7 @@
border: 2px solid #11FEEE;
color: #11FEEE;
font-weight: bolder;
+ background-color: transparent;
background-image: linear-gradient(to bottom,#003892,#003892,#003892);
}
&:active {
@@ -404,6 +414,7 @@
border: 2px solid #11FEEE;
color: #11FEEE;
font-weight: bolder;
+ background-color: transparent;
background-image: linear-gradient(to bottom,#003892,#003892,#003892);
}
}
diff --git a/src/views/loginPage/loginPage.vue b/src/views/loginPage/loginPage.vue
index 7ad9d7c..a41bf07 100644
--- a/src/views/loginPage/loginPage.vue
+++ b/src/views/loginPage/loginPage.vue
@@ -1,5 +1,8 @@
<template>
<div class="login-container">
+ <div class="starBg">
+
+ </div>
<div class="loginContent">
<div class="welcc">广域特殊气体泄露在线监测预警系统</div>
<div class="loginPanel">
@@ -23,7 +26,7 @@
import loginIconTwo from '/@/assets/login-icon-two.svg';
import { NextLoading } from '/@/utils/loading';
import AccountLogin from '/@/views/loginPage/component/accountLogin.vue';
-
+import "amfe-flexible";
// 定义接口来定义对象的类型
interface LoginState {
isScan: boolean;
@@ -45,6 +48,17 @@
// 页面加载时
onMounted(() => {
NextLoading.done();
+ const baseSize = 38;
+ /* 设置 rem 函数 */
+ function setRem() {
+ const scale = document.documentElement.clientWidth / 1920; /* 当前页面宽度缩放比例，可根据自己需要修改 */
+ document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
+ }
+ setRem();/* 初始化 rem */
+
+ window.onresize = () => {
+ setRem();/* 改变窗口大小时重新设置 rem */
+ }
});
return {
logoMini,
@@ -77,7 +91,19 @@
background: url('../../assets/loginPage/login-bg.jpg') no-repeat center;
background-size: 100% 100%;
/*background-image: radial-gradient(at center, #0075c3, #000b61);*/
-
+ .starBg{
+ width: 1030px;
+ height: 1135px;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ top: 50px;
+ z-index: -1;
+ background: url("../../assets/loginPage/starFalls.gif") no-repeat center;
+ background-size: 100% 100%;
+ opacity: 0.1;
+ -webkit-opacity: 0.1;
+ }
.rights {
font-size: 12px;
color: #fff;
@@ -91,7 +117,7 @@
}
}
.loginContent {
- width: 32vw;
+ width: 40%;
display: flex;
flex-direction: column;
align-items: center;
@@ -109,7 +135,7 @@
}
.loginPanel {
width: 100%;
- padding: 4vh;
+ padding: 60px 180px 80px;
box-sizing: border-box;
display: flex;
flex-direction: column;
diff --git a/vite.config.ts b/vite.config.ts
index b761ba2..94ad22d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,7 @@
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import { defineConfig, loadEnv, ConfigEnv } from 'vite';
-
+import postCssPxToRem from "postcss-pxtorem"
const pathResolve = (dir: string): any => {
return resolve(__dirname, '.', dir);
};
@@ -57,18 +57,18 @@
css: {
postcss: {
plugins: [
- {
- postcssPlugin: 'internal:charset-removal',
- AtRule: {
- charset: (atRule) => {
- if (atRule.name === 'charset') {
- atRule.remove();
- }
+ postCssPxToRem({
+ rootValue: 37.5, // 1rem的大小（控制1rem的大小 点位：px）
+ propList: ["*"], // 需要转换的属性，这里选择全部都进行转换
+ exclude: (e:any) => { // 不包含
+ if (/src(\\|\/)views(\\|\/)bigScreen(\\|\/)components(\\|\/)screen/.test(e)||/src(\\|\/)views(\\|\/)loginPage(\\|\/)loginPage/.test(e)||/src(\\|\/)views(\\|\/)loginPage(\\|\/)component(\\|\/)accountLogin/.test(e)) { // 指定生效页面（正则）
+ return false;
}
+ return true;
}
- }
- ]
- }
+ }),
+ ],
+ },
},
define: {
__VUE_I18N_LEGACY_API__: JSON.stringify(false),
--
Gitblit v1.9.2