From 20b0ce2db27b64a60de60aee05dedd448099e330 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Mon, 08 Jul 2024 10:12:16 +0800
Subject: [PATCH] xiugai
---
src/views/riskWarningSys/warningBigScreen/index.vue | 1074 ++++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 910 insertions(+), 164 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/index.vue b/src/views/riskWarningSys/warningBigScreen/index.vue
index 14a11d4..ffcb8aa 100644
--- a/src/views/riskWarningSys/warningBigScreen/index.vue
+++ b/src/views/riskWarningSys/warningBigScreen/index.vue
@@ -1,22 +1,48 @@
<template>
- <div class="container">
+ <div id="container" class="dark">
+ <div class="warn-dialog" :class="dialogShow">
+ <div>预警消息</div>
+ <p>企业8月份总体安全生产预警指数SPI风险值高于预警阈值，可能存在未处理隐患，请注意查阅相关风险因素，采取风险防控措施。</p>
+ <span @click="dialogShow = 'hide'">关闭</span>
+ </div>
+ <div class="info-panel" :class="dialogHide" @click="openDialog">
+ <div class="info-tit">
+ <div>
+ <el-icon><Bell /></el-icon>
+ <div style="margin-left: 10px">消息预警</div>
+ </div>
+ <div @click.stop="dialogHide = 'hide'">X</div>
+ </div>
+ <div class="info-desc">
+ 企业8月份总体安全生产预警指数SPI风险值高于预警阈值。
+ </div>
+ <div class="info-num">
+ 1
+ </div>
+ </div>
<div class="header-content">
<div class="logo">
- <img src="../../../assets/warningScreen/logo_dark.png" alt="" />
+ <img v-if="screenTheme.isDark" src="../../../assets/warningScreen/logo_dark.png" alt="" />
+ <img v-else="!screenTheme.isDark" src="../../../assets/warningScreen/logo_light.png" alt="" />
</div>
<div class="title">风险预警预报平台</div>
<div class="title-right">
<!-- <img src="themeStyle.skinIcon" class="qiehuan" @click="changeTheme" />-->
<span class="datetime">{{currentTime}}</span>
<div class="btns">
- <div class="fullbtn" @click="onScreenfullClick">
+<!-- <div class="themeBtn" @click="changeTheme()">-->
+<!-- <img v-if="screenTheme.isDark" src="../../../assets/warningScreen/skin.png"/>-->
+<!-- <img v-else src="../../../assets/warningScreen/skin-light.png"/>-->
+<!-- </div>-->
+ <div class="fullBtn" @click="onScreenfullClick">
<div class="toFull">
<i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
</div>
<div>全屏</div>
</div>
<div class="backBtn" @click="goBack()">
- <img src="../../../assets/loginPage/back-icon.png"/>
+<!-- <img src="../../../assets/loginPage/back-icon.png"/>-->
+ <el-icon><SwitchButton /></el-icon>
<div>退出</div>
</div>
</div>
@@ -25,40 +51,127 @@
<div class="main-content">
<div class="main-left">
<div class="left-top">
-
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
+ <div class="part-tit">
+ <span>| 事故等级分布</span>
+<!-- <img @click="jumpPage(1)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(1)"/>
+ </div>
+ <div class="chart-box">
+ <accident :size="1" :theme="screenTheme.isDark"></accident>
+ </div>
</div>
<div class="left-mid">
-
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
+ <div class="part-tit">
+ <span>| 智能巡检超期未巡检任务</span>
+<!-- <img @click="jumpPage(2)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(2)"/>
+ </div>
+ <div class="chart-box">
+ <training :size="1" :theme="screenTheme.isDark"></training>
+ </div>
</div>
<div class="left-bottom">
-
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
+ <div class="part-tit">
+ <span>| 隐患趋势</span>
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/>
+ </div>
+ <div class="chart-box">
+ <risk :size="1" :theme="screenTheme.isDark" :dep="departList"></risk>
+ </div>
</div>
</div>
<div class="main-middle">
<div class="mid-top">
-
+ <dv-border-box-11 title="SPI数据分析" :backgroundColor="boxBg" :color="boxBigColor" class="box-bg"></dv-border-box-11>
+ <div class="part-tit" style="position: absolute;top: 10%;padding: 0 4%;align-items: flex-start;z-index: 10001">
+ <div class="spiChart">
+<!-- <el-cascader-->
+<!-- class="spiSe"-->
+<!-- :teleported="false"-->
+<!-- v-model="depValue"-->
+<!-- :options="departList"-->
+<!-- :props="depProps"-->
+<!-- :show-all-levels="false"-->
+<!-- @change="depChange"-->
+<!-- />-->
+ </div>
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(4)"/>
+ </div>
+ <div class="chart-box" style="top: 60px;height: calc(100% - 70px)">
+ <spi :size="1" :theme="screenTheme.isDark"></spi>
+ </div>
</div>
<div class="mid-bottom">
<div class="mid-bot-l">
-
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
+ <div class="part-tit">
+ <span>| 教育培训分析</span>
+<!-- <img @click="jumpPage(5)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(5)"/>
+ </div>
+ <div class="chart-box">
+ <educate :size="1"></educate>
+ </div>
</div>
<div class="mid-bot-m">
-
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
+ <div class="part-tit">
+ <span>| 隐患等级</span>
+<!-- <img @click="jumpPage(6)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(6)"/>
+ </div>
+ <div class="chart-box">
+ <danger :size="1" :theme="screenTheme.isDark"></danger>
+ </div>
</div>
<div class="mid-bot-r">
-
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
+ <div class="part-tit">
+ <span>| 人员专业度分布</span>
+<!-- <img @click="jumpPage(7)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(7)"/>
+ </div>
+ <div class="chart-box">
+ <profession :size="1"></profession>
+ </div>
</div>
</div>
</div>
<div class="main-right">
<div class="right-top">
-
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
+ <div class="part-tit">
+ <span>| 预警消息报告</span>
+<!-- <img @click="jumpPage(8)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(8)"/>
+ </div>
+ <div class="chart-box">
+ <message :size="1" :theme="screenTheme.isDark"></message>
+ </div>
</div>
<div class="right-mid">
-
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
+ <div class="part-tit">
+ <span>| 特殊作业实时监控</span>
+<!-- <img @click="jumpPage(9)" src="../../../assets/warningScreen/small-full.png">-->
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(9)"/>
+ </div>
+ <div class="chart-box">
+ <monitor :size="1" ref="monRef" :theme="screenTheme.isDark"></monitor>
+ </div>
</div>
<div class="right-bottom">
-
+ <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
+ <div class="part-tit">
+ <span>| 风险应急物资储备</span>
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(10)"/>
+ </div>
+ <div class="chart-box">
+ <stock :size="1"></stock>
+ </div>
</div>
</div>
</div>
@@ -67,41 +180,151 @@
<script lang="ts">
import screenfull from 'screenfull';
- import { toRefs, reactive, ref, onMounted } from 'vue';
+ import {
+ toRefs,
+ reactive,
+ ref,
+ onMounted,
+ defineComponent,
+ defineAsyncComponent,
+ nextTick,
+ onUnmounted,
+ onBeforeUnmount
+ } from 'vue';
import { ElTable } from 'element-plus';
import { FormInstance, FormRules, ElMessage } from 'element-plus';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
import { useRouter } from 'vue-router';
import {hiddenReportApi} from "/@/api/doublePreventSystem/report";
import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
- import * as echarts from 'echarts/core';
- import {TooltipComponent, TooltipComponentOption, LegendComponent, LegendComponentOption} from 'echarts/components';
- import {PieChart, PieSeriesOption} from 'echarts/charts';
- import {LabelLayout} from 'echarts/features';
- import {CanvasRenderer} from 'echarts/renderers';
- echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout]);
+ import '/@/theme/bigScreen.css'
+ import {useScreenTheme} from "/@/stores/screenTheme"
+ import {storeToRefs} from "pinia";
+ import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
+ import {NextLoading} from "/@/utils/loading";
+ import {videoApi} from "/@/api/systemManage/video";
+
// 定义接口来定义对象的类型
interface stateType {
+ boxBg: string;
+ boxColor: Array<string>;
+ boxBigColor: Array<string>;
isScreenfull: boolean;
- currentTime: string
+ currentTime: string;
+ depValue: number;
+ dialogShow: string;
+ dialogHide: string;
+ depProps: object;
+ departList: Array<any>;
+ lastTrain: number | null;
+ timer: any|null
}
- export default {
+ export default defineComponent({
name: 'warningScreen',
- components: {},
+ components: {
+ accident: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/accident.vue')),
+ training: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/training.vue')),
+ spi: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/SPI.vue')),
+ risk: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/risk.vue')),
+ educate: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/educate.vue')),
+ danger: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/danger.vue')),
+ profession: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/profession.vue')),
+ message: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/message.vue')),
+ monitor: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/monitor.vue')),
+ stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue'))
+ },
setup() {
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
const router = useRouter();
+ const props = {
+ expandTrigger: 'hover',
+ checkStrictly: true
+ }
const state = reactive<stateType>({
+ boxBg: 'rgba(8, 109, 209, 0.2)',
+ depValue: 1,
+ boxColor: [],
+ boxBigColor: [],
+ lastTrain: null,
isScreenfull: false,
- currentTime: ''
+ currentTime: '',
+ dialogShow: 'hide',
+ dialogHide: 'hide',
+ depProps: {
+ expandTrigger: 'hover',
+ checkStrictly: true,
+ value: 'depId',
+ label: 'depName',
+ emitPath: false
+ },
+ departList: [],
+ timer: null
});
-
+ const monRef = ref()
// 页面载入时执行方法
onMounted(() => {
- setInterval(() => {
- state.currentTime = new Date().toLocaleString();
- console.log(state.currentTime)
- }, 1000);
+ NextLoading.done();
+ state.depValue = screenTheme.value.depId
+ getTime();
+ getAllDepartment();
+ state.timer = setInterval(()=>{
+ getTime()
+ },1000)
+ getTheme()
});
+
+ const getTime =()=>{
+ state.currentTime = new Date().toLocaleString();
+ }
+
+ // 获取部门列表
+ const getAllDepartment = async () => {
+ let res = await teamManageApi().getAllDepartment();
+ if (res.data.code === '200') {
+ state.departList = JSON.parse(JSON.stringify(res.data.data))
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ }
+
+ const depChange = (value)=>{
+ state.depValue = value
+ screenThemes.setDepId(value)
+ }
+
+ const changeTheme = () =>{
+ screenTheme.value.isDark = !screenTheme.value.isDark
+ screenThemes.setScreenTheme(screenTheme.value.isDark)
+ if(screenTheme.value.isDark){
+ document.getElementById('container').setAttribute( "class", 'dark' )
+ state.boxBg = 'rgba(8, 109, 209, 0.2)'
+ state.boxColor = []
+ state.boxBigColor = []
+ }else{
+ document.getElementById('container').setAttribute( "class", 'light' )
+ state.boxBg = '#fff'
+ state.boxColor = ['#fff','#ccc']
+ state.boxBigColor = ['#999','#fff']
+ }
+ }
+
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ window.document.getElementById('container').setAttribute( "class", 'dark' );
+ state.boxBg = 'rgba(8, 109, 209, 0.2)'
+ state.boxColor = []
+ state.boxBigColor = []
+ }else{
+ window.document.getElementById('container').setAttribute( "class", 'light' );
+ state.boxBg = '#fff'
+ state.boxColor = ['#fff','#ccc']
+ state.boxBigColor = ['#999','#fff']
+ }
+ }
// 全屏
const onScreenfullClick = () => {
@@ -119,11 +342,38 @@
});
};
- // 返回上一页
- const goBack = () => {
- window.history.go(-1);
+ const openDialog = () => {
+ if(state.dialogShow == 'hide'){
+ state.dialogShow = 'showup'
+ }else{
+ state.dialogShow = 'hide'
+ }
+ }
+
+ const closeInfo = ()=>{
+ state.dialogHide = 'hide'
};
+ const jumpPage = (num) =>{
+ router.push({
+ path: 'screenPage',
+ query: {
+ num: num
+ }
+ });
+ }
+
+ // 返回上一页
+ const goBack = () => {
+ // window.history.go(-1);
+ router.push({
+ path: 'newMenu'
+ });
+ };
+
+ onBeforeUnmount(() =>{
+ clearInterval(state.timer)
+ })
// 隐患状态列表
// const getDeviceRecord = async () => {
// const data = { pageSize: state.pageSize, pageIndex: state.pageIndex};
@@ -138,104 +388,38 @@
// }
// };
- // 隐患整改情况
- // const initRiskFix =()=>{
- // var dom = document.getElementById('riskFix');
- // var myChart = echarts.init(dom, null, {
- // renderer: 'canvas',
- // useDirtyRect: false
- // });
- // var app = {};
- //
- // var option;
- //
- // option = {
- // tooltip: {
- // trigger: 'item'
- // },
- // legend: {
- // bottom: '5%',
- // left: 'center'
- // },
- // series: [
- // {
- // name: 'Access From',
- // type: 'pie',
- // radius: ['35%', '60%'],
- // avoidLabelOverlap: false,
- // itemStyle: {
- // borderRadius: 6,
- // borderColor: '#fff',
- // borderWidth: 2
- // },
- // label: {
- // alignTo: 'labelLine',
- // formatter: '{name|{b}}\n{value|{c}}',
- // minMargin: 5,
- // edgeDistance: 5,
- // lineHeight: 15,
- // rich: {
- // name: {
- // fontSize: 14,
- // color: '#666'
- // }
- // }
- // },
- // labelLine: {
- // length: 15,
- // maxSurfaceAngle: 80
- // },
- // emphasis: {
- // label: {
- // show: true,
- // fontSize: '40',
- // fontWeight: 'bold'
- // }
- // },
- // data: [
- // { value: 1048, name: '整改中' },
- // { value: 735, name: '待验收' },
- // { value: 580, name: '延期整改' },
- // { value: 484, name: '超期未整改' },
- // { value: 300, name: '已验收' }
- // ],
- // center: ['50%','40%']
- // }
- // ]
- // };
- //
- // if (option && typeof option === 'object') {
- // myChart.setOption(option);
- // }
- //
- // window.addEventListener('resize', myChart.resize);
- // }
-
return {
router,
+ props,
+ screenTheme,
+ monRef,
+ openDialog,
+ closeInfo,
+ changeTheme,
onScreenfullClick,
+ depChange,
+ jumpPage,
goBack,
...toRefs(state)
};
}
- };
+ });
</script>
<style scoped lang="scss">
$homeNavLengh: 8;
-
- @media screen and (min-width: 1366px) {
-
+ .hide{
+ display: none;
+ }
+ #container{
+ width: 100%;
+ height: 100%;
+ }
+ .showup{
+ display: block;
}
- @media screen and (min-width: 1024px) and (max-width: 1366px){
-
- }
-
- @media screen and (max-width: 1024px) {
-
- }
- .container {
+ .dark {
width: 100%;
height: 100%;
display: flex;
@@ -245,11 +429,102 @@
background-size: 100% 100%;
color: #11FEEE;
+ .warn-dialog{
+ position: absolute;
+ z-index: 999999;
+ top: 25%;
+ left: 50%;
+ width: 50%;
+ height: 50%;
+ transform: translateX(-50%);
+ border-radius: 8px;
+ transition: .3s;
+ box-shadow: 0 15px 30px rgba(0,0,0,.2);
+ border: 1px solid rgba(17,254,238,.4);
+ padding: 1.5rem;
+ background: rgba(0,16,32,.8);
+
+ div{
+ font-size: 1.5rem;
+ text-align: center;
+ }
+
+ p{
+ margin-top: 20px;
+ font-size: 1.125rem;
+ line-height: 28px;
+ text-align: left
+ }
+
+ span{
+ position: inherit;
+ right: 20px;
+ top: 20px;
+ font-size: 1rem;
+ cursor: pointer;
+ }
+ }
+
+ .info-panel{
+ position: absolute;
+ width: 20%;
+ right: 50px;
+ bottom: 50px;
+ z-index: 9999999;
+ font-size: 1rem;
+ padding: 0 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ box-shadow: 0 15px 30px rgba(0,0,0,.2);
+ border: 1px solid rgba(17,254,238,.4);
+ background: rgba(0,16,32,.8);
+
+ .info-tit{
+ display: flex;
+ align-items: center;
+ padding: 10px;
+ border-bottom: 1px solid rgba(17,254,238,.4);
+ justify-content: space-between;
+
+ &>div{
+ display: flex;
+ align-items: center;
+
+ img{
+ width: 18px;
+ height: 18px;
+ margin-right: 10px;
+ }
+ }
+ }
+
+ .info-desc{
+ padding: 15px 10px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ .info-num{
+ position: inherit;
+ width: 24px;
+ height: 24px;
+ line-height: 24px;
+ text-align: center;
+ left: -12px;
+ top: -12px;
+ color: #fff;
+ z-index: 999999999;
+ border-radius: 50%;
+ border: 1px solid #ff0000;
+ background: #ff0000;
+ }
+ }
+
.header-content {
width: 100%;
- height: 80px;
+ height: 7.8%;
padding: 0 20px;
- font-size: 20px;
+ font-size: 1.25rem;
display: flex;
align-items: center;
justify-content: space-around;
@@ -261,15 +536,15 @@
align-items: center;
justify-content: center;
img {
- height: 35px;
- width: 128px;
+ width: 10rem;
+ height: auto;
}
}
.title {
width: 46%;
- font-size: 26px;
+ font-size: 2rem;
font-weight: bolder;
- line-height: 80px;
+ line-height: 7.8%;
text-align: center;
letter-spacing: 2px;
}
@@ -280,11 +555,12 @@
display: flex;
align-items: center;
justify-content: space-around;
- font-size: 15px;
+ font-size: 1rem;
padding-left: 30px;
.datetime {
color: #11FEEE;
+ font-size: 0.9rem;
}
.btns{
display: flex;
@@ -293,104 +569,574 @@
&>div{
display: flex;
align-items: center;
- align-items: center;
- font-size: 15px;
+ font-size: 1rem;
margin-right: 20px;
img{
- width: 16px;
- height: auto;
+ width: 1rem;
+ height: 1rem;
}
div{
- margin-left: 6px;
+ margin-left: 0.4rem;
+ font-size: 0.9rem;
}
+ }
+ .themeBtn{
+ img{
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+ cursor: pointer;
+ }
+ .fullBtn{
+ cursor: pointer;
+ }
+ .backBtn{
+ cursor: pointer;
}
}
}
}
.main-content{
width: 100%;
- height: 100%;
- padding: 20px;
+ height: calc(100vh - 7.8%);
+ padding: 0.4rem 1.5rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
- .main-left{
- width: calc(25% - 10px);
+ &>div{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
+ &>div{
+ padding: 20px 15px 10px;
+ box-sizing: border-box;
+ position: relative;
+ .box-bg{
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ color: #11feee;
+ font-weight: bolder;
+ }
- .left-top{
- width: 100%;
- height: calc((100%/3) - (40px/3));
+ .dv-border-box-11{
+ ::v-deep(.dv-border-svg-container){
+ .dv-border-box-11-title{
+ font-size: 1.5rem;
+ fill: #11feee !important;
+ }
+ }
+ }
+ .part-tit{
+ position: absolute;
+ top: 20px;
+ left: 0;
+ height: 20px;
+ width: 100%;
+ padding: 0 15px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ z-index: 9999;
+
+ .spiChart{
+ width: 25% !important;
+
+ ::v-deep(.el-cascader){
+ width: 100% !important;
+ }
+ ::v-deep(.el-popper){
+ background-color: rgba(10,31,92,1);
+ border: 1px solid rgba(17,254,238,.4);
+ color: #11FEEE;
+ .el-cascader-node__label{
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ .el-cascader-node{
+ &: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);
+ }
+ }
+ ::v-deep(.el-input__wrapper){
+ width: 20%;
+ box-shadow: none;
+ border: 1px solid rgba(17,254,238,.2);
+ background: rgba(10,31,92,.6) !important;
+ height: 2.5rem;
+ color: #11FEEE;
+
+ input{
+ font-size: 1.25rem;
+ color: #11FEEE;
+ }
+ .el-icon{
+ color: #11FEEE;
+ }
+ }
+ }
+
+ span{
+ font-size: 1.25rem;
+ font-weight: bolder;
+ color: #11feee;
+ }
+
+ img{
+ width: 1.2rem;
+ height: 1.2rem;
+ cursor: pointer;
+ }
+ }
+ .chart-box{
+ position: absolute;
+ top: 40px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: calc(100% - 50px);
+ z-index: 10000;
+ .train-tip{
+ display: block;
+ font-size: 0.8rem;
+ margin-top: 2%;
+ margin-left: 5%;
+ color: #fff;
+ height: 1rem;
+ }
+ }
}
- .left-mid{
+ }
+
+ .main-left{
+ width: calc(25% - 5px);
+ &>div{
width: 100%;
- height: calc((100%/3) - (40px/3));
- }
- .left-bottom{
- width: 100%;
- height: calc((100%/3) - (40px/3));
+ height: calc((100%/3) - (20px/3));
}
}
.main-middle{
- width: calc(50% - 20px);
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: flex-start;
+ width: calc(50% - 10px);
.mid-top{
width: 100%;
- height: calc((200%/3) - (80px/3) + 20px);
+ height: calc((200% - 40px)/3 + 10px);
}
.mid-bottom{
display: flex;
width: 100%;
- height: calc(100% - (200%/3) + (80px/3) - 40px);
+ height: calc((100%/3) - (20px/3));
justify-content: space-between;
+ padding: 0;
+ background: none;
+ border-radius: 0;
&>div {
position: relative;
- width: calc((100% - 40px)/3);
+ width: calc((100% - 20px)/3);
border-radius: 8px;
overflow: hidden;
-
- .chart-tit {
- position: absolute;
- left: 20px;
- top: 20px;
- font-weight: 700;
- z-index: 3;
- }
+ padding: 10px 15px;
+ box-sizing: border-box;
}
}
}
.main-right{
- width: calc(25% - 10px);
+ width: calc(25% - 5px);
+ &>div{
+ width: 100%;
+ height: calc((100%/3) - (20px/3));
+ }
+ }
+ }
+ }
+ .light {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background: url('../../../assets/warningScreen/riskprocast-light.jpg') no-repeat center;
+ background-size: 100% 100%;
+ color: #000;
+
+ .warn-dialog{
+ position: absolute;
+ z-index: 999999;
+ top: 25%;
+ left: 50%;
+ width: 50%;
+ height: 50%;
+ transform: translateX(-50%);
+ border-radius: 8px;
+ transition: .3s;
+ box-shadow: 0 15px 30px rgba(0,0,0,.2);
+ border: 1px solid #ccc;
+ padding: 1.5rem;
+ background: #fff;
+
+ div{
+ font-size: 1.5rem;
+ text-align: center;
+ }
+
+ p{
+ margin-top: 20px;
+ font-size: 1.125rem;
+ line-height: 28px;
+ text-align: left
+ }
+
+ span{
+ position: inherit;
+ right: 20px;
+ top: 20px;
+ font-size: 1rem;
+ cursor: pointer;
+ }
+ }
+
+ .info-panel{
+ position: absolute;
+ width: 20%;
+ right: 50px;
+ bottom: 50px;
+ z-index: 9999999;
+ font-size: 1rem;
+ color: #333;
+ padding: 0 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ box-shadow: 0 15px 30px rgba(0,0,0,.2);
+ border: 1px solid #ccc;
+ background: #fff;
+
+ .info-tit{
+ display: flex;
+ align-items: center;
+ padding: 10px;
+ border-bottom: 1px solid #ccc;
+ justify-content: space-between;
+
+ &>div{
+ display: flex;
+ align-items: center;
+
+ img{
+ width: 18px;
+ height: 18px;
+ margin-right: 10px;
+ }
+ }
+ }
+
+ .info-desc{
+ padding: 15px 10px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+ .info-num{
+ position: inherit;
+ width: 24px;
+ height: 24px;
+ line-height: 24px;
+ text-align: center;
+ left: -12px;
+ top: -12px;
+ color: #fff;
+ z-index: 999999999;
+ border-radius: 50%;
+ border: 1px solid #ff0000;
+ background: #ff0000;
+ }
+ }
+
+ .header-content {
+ width: 100%;
+ height: 7.8%;
+ padding: 0 20px;
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ z-index: 9;
+
+ .logo {
+ width: 27%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ img {
+ width: 10rem;
+ height: auto;
+ }
+ }
+ .title {
+ width: 46%;
+ font-size: 2rem;
+ font-weight: bolder;
+ line-height: 7.8%;
+ text-align: center;
+ letter-spacing: 2px;
+ }
+
+ .title-right {
+ width: 27%;
+ height: 90px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ font-size: 1rem;
+ padding-left: 30px;
+
+ .datetime {
+ color: #000;
+ font-size: 0.9rem;
+ }
+ .btns{
+ display: flex;
+ align-items: center;
+
+ &>div{
+ display: flex;
+ align-items: center;
+ font-size: 1rem;
+ margin-right: 20px;
+
+ img{
+ width: 1rem;
+ height: 1rem;
+ }
+ div{
+ margin-left: 0.4rem;
+ font-size: 0.9rem;
+ }
+ }
+ .themeBtn{
+ img{
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+ cursor: pointer;
+ }
+ .fullBtn{
+ cursor: pointer;
+ }
+ .backBtn{
+ cursor: pointer;
+ }
+ }
+ }
+ }
+ .main-content{
+ width: 100%;
+ height: calc(100vh - 7.8%);
+ padding: 0.4rem 1.5rem 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ &>div{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
+ &>div{
+ padding: 20px 15px 10px;
+ box-sizing: border-box;
+ position: relative;
+ .box-bg{
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ color: #000;
+ font-weight: bolder;
+ }
+
+ .dv-border-box-11{
+ :deep(.dv-border-svg-container){
+ .dv-border-box-11-title{
+ font-size: 1.5rem;
+ fill: #000 !important;
+ }
+ }
+ }
+ .part-tit{
+ position: absolute;
+ top: 20px;
+ left: 0;
+ height: 20px;
+ width: 100%;
+ padding: 0 15px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ z-index: 9999;
+
+ .spiChart{
+ width: 25% !important;
+
+ ::v-deep(.el-cascader){
+ width: 100% !important;
+ }
+ ::v-deep(.el-popper){
+ background-color: #fff;
+ border: 1px solid #ccc;
+ color: #000;
+ .el-cascader-node__label{
+ color: #000;
+ }
+ .el-icon{
+ color: #000;
+ }
+ .el-cascader-node{
+ &:hover{
+ background: #ccc;
+ }
+ }
+ }
+ ::v-deep(.el-popper__arrow){
+ &::before{
+ background-color: #fff !important;
+ border: 1px solid #ccc;
+ }
+ }
+ ::v-deep(.el-input__wrapper){
+ width: 20%;
+ box-shadow: none;
+ border: 1px solid #ccc;
+ background: #fff !important;
+ height: 2.5rem;
+ color: #000;
+
+ input{
+ font-size: 1.25rem;
+ color: #000;
+ }
+ .el-icon{
+ color: #000;
+ }
+ }
+ }
+
+ span{
+ font-size: 1.25rem;
+ font-weight: bolder;
+ color: #000;
+ }
+
+ img{
+ width: 1.20rem;
+ height: 1.20rem;
+ cursor: pointer;
+ }
+ }
+ .chart-box{
+ position: absolute;
+ top: 40px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: calc(100% - 50px);
+ z-index: 10000;
+ .train-tip{
+ display: block;
+ font-size: 0.8rem;
+ margin-top: 2%;
+ margin-left: 5%;
+ color: #333;
+ height: 1rem;
+ }
+ }
+ }
+ }
+
+ .main-left{
+ width: calc(25% - 5px);
+
+ .left-top{
+ width: 100%;
+ height: calc((100%/3) - (20px/3));
+
+ }
+ .left-mid{
+ width: 100%;
+ height: calc((100%/3) - (20px/3));
+ }
+ .left-bottom{
+ width: 100%;
+ height: calc((100%/3) - (20px/3));
+ }
+ }
+ .main-middle{
+ width: calc(50% - 10px);
+
+ .mid-top{
+ width: 100%;
+ height: calc((200% - 40px)/3 + 10px);
+ }
+
+ .mid-bottom{
+ display: flex;
+ width: 100%;
+ height: calc((100%/3) - (20px/3));
+ justify-content: space-between;
+ padding: 0;
+ background: none;
+ border-radius: 0;
+
+ &>div {
+ position: relative;
+ width: calc((100% - 20px)/3);
+ border-radius: 8px;
+ overflow: hidden;
+ padding: 10px 15px;
+ box-sizing: border-box;
+ }
+ }
+ }
+ .main-right{
+ width: calc(25% - 5px);
.right-top{
width: 100%;
- height: calc((100%/3) - (40px/3));
+ height: calc((100%/3) - (20px/3));
}
.right-mid{
width: 100%;
- height: calc((100%/3) - (40px/3));
+ height: calc((100%/3) - (20px/3));
}
.right-bottom{
width: 100%;
- height: calc((100%/3) - (40px/3));
+ height: calc((100%/3) - (20px/3));
}
}
}
--
Gitblit v1.9.2