From f59373dccb4afb37e63f4fe655061d067244860c Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期三, 16 十一月 2022 09:17:11 +0800 Subject: [PATCH] Default Changelist --- src/views/newHome/index.vue | 663 +++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 454 insertions(+), 209 deletions(-) diff --git a/src/views/newHome/index.vue b/src/views/newHome/index.vue index 9ceff18..f93269a 100644 --- a/src/views/newHome/index.vue +++ b/src/views/newHome/index.vue @@ -1,70 +1,63 @@ <template> <div class="login-container" :key="once"> - <div class="topPanel"> - - </div> - <div class="topPanelBg"> - - </div> + <div class="topPanel"></div> + <div class="topPanelBg"></div> <div class="topPanelCont"> <div class="topLogo"> <img src="../../assets/newMenu/toplogo.png" /> </div> <div class="userInfo"> - <div @click="onScreenfullClick" style="margin-right: 15px;cursor: pointer"> + <div @click="onScreenfullClick" style="margin-right: 15px; cursor: pointer"> <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i> </div> <div class="loginOut" @click="onLoginOut">退出登录</div> <span></span> <div class="avator"> <img src="../../assets/menu/admin.png" /> - <div>admin</div> + <div>{{userName}}</div> </div> </div> </div> - <div class="leftCont"> - - </div> + <div class="leftCont"></div> <div class="topCont"> <div class="topInfo"> - <div class="topTit"> - 新疆国泰新华<br/>安全风险预警监测系统 - </div> + <div class="topTit">新疆国泰新华<br />安全风险预警监测系统(试运行)</div> <div class="topTime"> <div class="time"> - {{time}} + {{ time }} </div> <span></span> <div class="today"> - <div>{{date}}</div> - <div><span>{{weekDay}}</span><span>{{dayTime}}</span></div> + <div>{{ date }}</div> + <div> + <span>{{ weekDay }}</span + ><span>{{ dayTime }}</span> + </div> </div> </div> </div> - <div class="line"> - - </div> + <div class="line"></div> </div> <div class="menuGrid"> <div class="gridCont"> <div class="grid-content grid-content-1 cont-bg-1" v-throttle @click="toRiskPlatform"> <div class="toplayer"> <div> - <img class="iconImg" src="../../assets/newMenu/icon1.png"/> - <div> - <div class="itemTit1">安全风险综合预警<br/>预报平台</div> - <div class="enTit1">Security risk comprehensive early warning and forecast platform</div> - </div> + <img class="iconImg" src="../../assets/newMenu/icon1.png" /> + <div> + <div class="itemTit1">智能安全风险综合预警<br />预报平台</div> + <div class="enTit1">Intelligent Security Risk Comprehensive Forewarning and Forecasting Platform</div> + </div> </div> </div> <img class="bgImg1" src="../../assets/newMenu/card-1.png" /> </div> - <div class="grid-content cont-bg-1" v-throttle @click="render('2')"> + <div class="grid-content cont-bg-1" v-throttle @click="toDoublePrevent"> <div class="toplayer"> <img class="iconImg" src="../../assets/newMenu/icon2.png" /> <div> - <div class="itemTit">双重预防系统</div> - <div class="enTit">Double prevention</div> + <div class="itemTit">智能安全双重预防系统</div> + <div class="enTit">Intelligent Security Dual Prevention System</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card-4.png" /> @@ -73,8 +66,8 @@ <div class="toplayer"> <img class="iconImg" src="../../assets/newMenu/icon3.png" /> <div> - <div class="itemTit">智能巡检系统</div> - <div class="enTit">Intelligent inspection system</div> + <div class="itemTit">智能安全巡检系统</div> + <div class="enTit">Intelligent Security Patrol System</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card-8.png" /> @@ -83,8 +76,8 @@ <div class="toplayer"> <img class="iconImg" src="../../assets/newMenu/icon4.png" /> <div> - <div class="itemTit">特殊作业系统</div> - <div class="enTit">special work</div> + <div class="itemTit">智能安全特殊作业系统</div> + <div class="enTit">Intelligent Security Special Operating System</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card-7.png" /> @@ -93,8 +86,8 @@ <div class="toplayer"> <img class="iconImg" src="../../assets/newMenu/icon5.png" /> <div> - <div class="itemTit">目标责任管理系统</div> - <div class="enTit">Target Responsibility Management</div> + <div class="itemTit">安全目标责任管理系统</div> + <div class="enTit">Security Target Responsibility Management System</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card-2.png" /> @@ -104,7 +97,7 @@ <img class="iconImg" src="../../assets/newMenu/icon6.png" /> <div> <div class="itemTit">安全知识图谱系统</div> - <div class="enTit">Security Knowledge Graph</div> + <div class="enTit">Security Knowledge Graph System</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card-3.png" /> @@ -114,7 +107,7 @@ <img class="iconImg" src="../../assets/newMenu/icon7.png" /> <div> <div class="itemTit">设备综合管控系统</div> - <div class="enTit">Comprehensive equipment control</div> + <div class="enTit">Equipment Integrated Management and Control System</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card-9.png" /> @@ -124,17 +117,17 @@ <img class="iconImg" src="../../assets/newMenu/icon8.png" /> <div> <div class="itemTit">应急管理系统</div> - <div class="enTit">Emergency management</div> + <div class="enTit">Emergency Management System</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card-5.png" /> </div> - <div class="grid-content cont-bg-2" v-throttle @click="render('11')"> + <div class="grid-content cont-bg-2" v-throttle @click="renderToNew('11')"> <div class="toplayer"> <img class="iconImg" src="../../assets/newMenu/icon9.png" /> <div> - <div class="itemTit">危险化学品全生命周期安全<br />管理系统</div> - <div class="enTit">Full life cycle of hazardous chemicals</div> + <div class="itemTit">智能安全危险化学品全生命周期管控系统</div> + <div class="enTit">Intelligent Security Hazardous Chemicals Life Cycle Safety Management System </div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card-10.png" /> @@ -143,8 +136,8 @@ <div class="toplayer"> <img class="iconImg" src="../../assets/newMenu/icon10.png" /> <div> - <div class="itemTit">事故管理系统</div> - <div class="enTit">Incident Management</div> + <div class="itemTit">安全事故管理系统</div> + <div class="enTit">Security Incident Management System</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card-6.png" /> @@ -154,7 +147,7 @@ <img class="iconImg" src="../../assets/newMenu/icon11.png" /> <div> <div class="itemTit">安全基础信息系统</div> - <div class="enTit">Basic data permissions</div> + <div class="enTit">Basic Security Information System</div> </div> </div> <img class="bgImg" src="../../assets/newMenu/card-11.png" /> @@ -162,9 +155,9 @@ </div> </div> <div class="bot-rights"> - <img src="../../assets/newMenu/pic_line1.png"> + <img src="../../assets/newMenu/pic_line1.png" /> <div>技术支持:苏州国科鸿宇智能科技有限公司</div> - <img src="../../assets/newMenu/pic_line2.png"> + <img src="../../assets/newMenu/pic_line2.png" /> </div> </div> </template> @@ -188,8 +181,8 @@ import { useLoginApi } from '/@/api/login'; import { useI18n } from 'vue-i18n'; import screenfull from 'screenfull'; -import router from '../../router' -import Cookies from 'js-cookie' +import router from '../../router'; +import Cookies from 'js-cookie'; // 定义接口来定义对象的类型 interface LoginState { @@ -199,10 +192,10 @@ projectId: string; once: number; isScreenfull: boolean; - time:string; - date:string; - weekDay:string; - dayTime:string + time: string; + date: string; + weekDay: string; + dayTime: string; } export default defineComponent({ @@ -226,7 +219,7 @@ hour: '2-digit', minute: '2-digit', second: '2-digit' - } + }; const state = reactive<LoginState>({ tabsActiveName: 'account', isScan: false, @@ -239,26 +232,40 @@ dayTime: '', isScreenfull: false }); + + const userName = computed(() =>{ + return userInfos.value.userName + }) // 获取布局配置信息 const getThemeConfig = computed(() => { return themeConfig.value; }); // 当前时间 - const getDateTime = ()=>{ - const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-') - state.time = curTime.slice(10,16) - 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 getDateTime = () => { + const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-'); + state.time = curTime.slice(10, 16); + 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 onLoginOut = () => { ElMessageBox({ @@ -319,11 +326,16 @@ }); }; // 去风险大屏 - const toRiskPlatform = ()=>{ - router.push({ - name: "bigDataScreen" - }); - } + const toRiskPlatform = () => { + // router.push({ + // name: "warningScreen" + // }); + window.open('http://39.104.85.193:8585/'); + }; + + const toDoublePrevent = () => { + window.open('http://121.239.169.27:6801'); + }; const throttle = (renderMenu: any, delay: number) => { let flag = true; let count = 0; @@ -370,6 +382,10 @@ return returnMenu.path; } }; + + const renderToNew = () => { + window.open('http://222.92.213.22:18001/smartlab/', '_blank'); + }; // //点击进入特殊作业 // const toSpecialWorkSys = () => { // router.push('/layoutPage'); @@ -377,19 +393,23 @@ // 页面加载时 onMounted(() => { state.once += 1; - NextLoading.done() - setInterval(()=>{ - getDateTime() - },1000) + NextLoading.done(); + getDateTime(); + setInterval(() => { + getDateTime(); + }, 1000); // loginBg(); // loginApp() }); return { render, + userName, logoMini, onLoginOut, getDateTime, + renderToNew, toRiskPlatform, + toDoublePrevent, onScreenfullClick, loginIconTwo, getThemeConfig, @@ -400,6 +420,319 @@ </script> <style scoped lang="scss"> + @keyframes showDown { + 100% { + position: absolute; + top: 60px; + } + } + @keyframes moveDown { + 100% { + position: absolute; + top: 0; + } + } + @keyframes moveRight { + 100% { + position: absolute; + left: 0; + } + } + @keyframes upDown { + 50% { + -webkit-transform: translateY(-8px); + -ms-transform: translateY(-8px); + -o-transform: translateY(-8px); + transform: translateY(-8px); + } + 100% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); + } + } +@media screen and (min-width: 1400px) { + .gridCont { + width: 100%; + height: 100%; + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(3, 1fr); + grid-auto-flow: row; + justify-content: center; + .toplayer { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + display: flex; + align-items: center; + padding: 0 20px; + z-index: 99; + + .itemTit { + font-size: 28px; + line-height: 34px; + margin-bottom: 2px; + height: 40%; + color: #072270; + } + .enTit { + font-size: 16px; + line-height: 20px; + color: #072270; + } + + .iconImg { + width: 88px; + height: 88px; + margin-right: 20px; + } + } + .bgImg { + position: absolute; + width: 30%; + height: auto; + right: -10px; + top: 15px; + } + } + + .grid-content-1 { + grid-row-start: 1; + grid-row-end: 3; + + .toplayer { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + display: flex; + align-items: center; + z-index: 99; + + & > div { + display: flex; + align-items: flex-start; + } + + .itemTit1 { + font-size: 34px; + line-height: 42px; + height: 40%; + letter-spacing: 1px; + color: #072270; + margin-bottom: 12px; + } + .enTit1 { + font-size: 20px; + line-height: 24px; + color: #072270; + } + } + .bgImg1 { + position: absolute; + width: 45%; + height: auto; + right: -20px; + top: 30%; + } + } + + .bot-rights { + font-size: 18px; + color: #333; + } +} + +@media screen and (min-width: 1200px) and (max-width: 1400px) { + .gridCont { + width: 100%; + height: 100%; + display: grid; + grid-gap: 15px; + grid-template-columns: repeat(3, 1fr); + grid-auto-flow: row; + justify-content: center; + + .toplayer { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + display: flex; + align-items: center; + padding: 0 20px; + z-index: 99; + + .itemTit { + font-size: 26px; + line-height: 30px; + height: 40%; + color: #072270; + margin-bottom: 2px; + } + .enTit { + font-size: 14px; + color: #072270; + } + + .iconImg { + width: 44px; + height: 44px; + margin-right: 10px; + } + } + .bgImg { + position: absolute; + width: 30%; + height: auto; + right: -10px; + top: 15px; + } + } + + .grid-content-1 { + grid-row-start: 1; + grid-row-end: 3; + + .toplayer { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + display: flex; + align-items: center; + z-index: 99; + + & > div { + display: flex; + align-items: flex-start; + } + + .itemTit1 { + font-size: 28px; + line-height: 36px; + height: 40%; + letter-spacing: 1px; + color: #072270; + margin-bottom: 12px; + } + .enTit1 { + font-size: 16px; + color: #072270; + } + } + .bgImg1 { + position: absolute; + width: 45%; + height: auto; + right: -20px; + top: 30%; + } + } + .bot-rights { + font-size: 15px; + color: #333; + } +} +@media screen and (max-width: 1200px) { + .gridCont { + width: 100%; + height: 100%; + display: grid; + grid-gap: 10px; + grid-template-columns: repeat(3, 1fr); + grid-auto-flow: row; + justify-content: center; + + .toplayer { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + display: flex; + align-items: center; + padding: 0 15px; + z-index: 99; + + .itemTit { + font-size: 18px; + line-height: 22px; + color: #072270; + } + .enTit { + font-size: 12px; + line-height: 14px; + color: #072270; + } + + .iconImg { + width: 32px; + height: 32px; + margin-right: 10px; + } + } + .bgImg { + position: absolute; + width: 45%; + height: auto; + right: -10px; + top: 15px; + } + } + + .grid-content-1 { + grid-row-start: 1; + grid-row-end: 3; + + .toplayer { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + display: flex; + align-items: center; + z-index: 99; + + & > div { + display: flex; + align-items: flex-start; + } + + .itemTit1 { + font-size: 24px; + line-height: 36px; + height: 40%; + letter-spacing: 1px; + color: #072270; + margin-bottom: 12px; + } + .enTit1 { + font-size: 14px; + color: #072270; + } + } + .bgImg1 { + position: absolute; + width: 45%; + height: auto; + right: -20px; + top: 30%; + } + } + .bot-rights { + font-size: 12px; + color: #333; + } +} .login-container { width: 100%; height: 100%; @@ -413,41 +746,35 @@ display: flex; justify-content: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); - animation: showDown 0.6s 1 ease forwards; - - @keyframes showDown { - 100% { - position: absolute; - top: 0; - } - } } - .topPanelBg{ + .topPanelBg { position: absolute; width: 100%; height: 60px; - top: 0; + top: -60px; left: 0; - background: rgba(255,255,255,.8); + background: rgba(255, 255, 255, 0.8); z-index: 9; + animation: moveDown 0.6s 1 ease forwards; } .topPanelCont { position: absolute; width: 100%; height: 60px; padding: 0 50px; - top: 0; + top: -60px; left: 0; display: flex; align-items: center; justify-content: space-between; z-index: 999; + animation: moveDown 0.6s 1 ease forwards; .topLogo { display: flex; align-items: center; - img{ + img { width: 146px; height: auto; } @@ -491,84 +818,86 @@ } } } - .leftCont{ + .leftCont { position: absolute; - left: 0; + left: -100px; top: 0; width: 240px; height: 100%; z-index: 99; background: url('../../assets/newMenu/leftbg.png') no-repeat center; - background-size: 100% auto; + background-size: 100% 100%; + animation: moveRight .8s 1 ease forwards; } - .topCont{ + .topCont { position: absolute; width: 100%; height: 200px; left: 0; - top: 60px; + top: 30px; padding: 0 40px 0 120px; z-index: 99999; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; - .topInfo{ + animation: showDown 0.6s 1 ease forwards; + + .topInfo { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; - .topTit{ + .topTit { font-size: 44px; - font-family: "PingFang SC"; font-weight: bolder; text-align: left; color: #fff; - text-shadow: 0 3px 8px rgba(0,0,0,.2); + text-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); } - .topTime{ + .topTime { padding: 15px 10px; box-sizing: border-box; - background: rgba(6,64,195,.8); + background: rgba(6, 64, 195, 0.8); border-radius: 8px; color: #fff; - font-family: "PingFang SC"; + font-family: 'PingFang SC'; font-weight: 600; font-size: 16px; display: flex; align-items: center; - .time{ + .time { font-size: 48px; } - &>span{ + & > span { width: 1px; height: 40px; margin: 0 15px; background: #fff; } - .today{ + .today { display: flex; flex-direction: column; align-items: flex-start; - span{ + span { font-size: 14px; } - span:first-of-type{ + span:first-of-type { margin-right: 10px; } } } } - .line{ + .line { width: 120px; height: 6px; - background: #00EEFF; + background: #00eeff; } } .menuGrid { @@ -579,113 +908,31 @@ top: 260px; left: 240px; .gridCont { - width: 100%; - height: 100%; - display: grid; - grid-gap: 20px; - grid-template-columns: repeat(3, 1fr); - grid-auto-flow: row; - justify-content: center; - .grid-content { border-radius: 16px; position: relative; overflow: hidden; cursor: pointer; transition: 0.3s; - border: none; - .toplayer{ - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - display: flex; - align-items: center; - padding: 0 20px; - z-index: 99; - } + border: 2px solid rgba(255,255,255,0); + &:hover { - background-image: radial-gradient(ellipse farthest-side at 50% 100%,#48A3FF 0%,#fff 120%); - box-shadow: 8px 8px 24px rgba(20,97,234,.2), -8px -8px 24px #fafafa; - } + border-radius: 16px; + background-image: radial-gradient(ellipse farthest-side at 50% 100%, #48a3ff 0%, #fff 120%); + box-shadow: -8px -8px 24px rgba(20, 97, 234, 0.2), 8px 8px 24px rgba(20, 97, 234, 0.2); + border: 2px solid #fff; - .itemTit { - font-size: 29px; - line-height: 36px; - height: 40%; - font-family: 'PingFang SC'; - font-weight: 600; - color: #072270; - margin-bottom: 2px; - } - .enTit{ - font-size: 18px; - color: #072270; - font-family: 'PingFang SC'; - font-weight: 600; - } - .enTit1{ - font-size: 22px; - color: #072270; - font-family: 'PingFang SC'; - font-weight: 600; - } - .itemTit1 { - font-size: 36px; - line-height: 48px; - height: 40%; - font-family: 'PingFang SC'; - font-weight: 600; - letter-spacing: 1px; - color: #072270; - margin-bottom: 18px; - } - .iconImg { - width: 88px; - height: 88px; - margin-right: 20px; - } - .bgImg1 { - position: absolute; - width: 45%; - height: auto; - right: -20px; - top: 30%; - } - .bgImg { - position: absolute; - width: 30%; - height: auto; - right: -10px; - top: 15px; - } - } - .cont-bg-1{ - background: #D9EAFF; - } - .cont-bg-2{ - background: #CDD6FF; - } - .grid-content-1{ - grid-row-start: 1; - grid-row-end: 3; - - .toplayer{ - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - display: flex; - align-items: center; - z-index: 99; - - &>div{ - display: flex; - align-items: flex-start; + .iconImg{ + animation: upDown 0.3s 1 ease-in-out forwards; + filter: drop-shadow(0 0 12px rgba(20, 97, 234, 0.4)); } } + } + .cont-bg-1 { + background: #d9eaff; + } + .cont-bg-2 { + background: #cdd6ff; } /*.grid-content-2{*/ @@ -697,7 +944,7 @@ /*}*/ } } - .bot-rights{ + .bot-rights { width: calc(100vw - 240px); height: 60px; position: absolute; @@ -708,13 +955,11 @@ align-items: center; justify-content: center; - img{ + img { width: 248px; height: 8px; } - div{ - font-size: 18px; - color: #333; + div { margin: 0 20px; } } -- Gitblit v1.9.2