<template>
|
<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 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="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"/>-->
|
<el-icon><SwitchButton /></el-icon>
|
<div>退出</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<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></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>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import screenfull from 'screenfull';
|
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 '/@/theme/bigScreen.css'
|
import {useScreenTheme} from "/@/stores/screenTheme"
|
import {storeToRefs} from "pinia";
|
import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
|
|
// 定义接口来定义对象的类型
|
interface stateType {
|
boxBg: string;
|
boxColor: Array<string>;
|
boxBigColor: Array<string>;
|
isScreenfull: boolean;
|
currentTime: string;
|
depValue: number;
|
dialogShow: string;
|
dialogHide: string;
|
depProps: object;
|
departList: Array<any>;
|
lastTrain: number | null;
|
timer: any|null
|
}
|
export default defineComponent({
|
name: 'warningScreen',
|
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: '',
|
dialogShow: 'hide',
|
dialogHide: 'showup',
|
depProps: {
|
expandTrigger: 'hover',
|
checkStrictly: true,
|
value: 'depId',
|
label: 'depName',
|
emitPath: false
|
},
|
departList: [],
|
timer: null
|
});
|
// 页面载入时执行方法
|
onMounted(() => {
|
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 = () => {
|
if (!screenfull.isEnabled) {
|
ElMessage.warning('暂不不支持全屏');
|
return false;
|
}
|
screenfull.toggle();
|
screenfull.on('change', () => {
|
if (screenfull.isFullscreen) {
|
state.isScreenfull = true;
|
} else {
|
state.isScreenfull = false;
|
}
|
});
|
};
|
|
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);
|
};
|
|
onBeforeUnmount(() =>{
|
clearInterval(state.timer)
|
})
|
// 隐患状态列表
|
// const getDeviceRecord = async () => {
|
// const data = { pageSize: state.pageSize, pageIndex: state.pageIndex};
|
// let res = await productionDeviceApi().getProductionDeviceList(data)
|
// if (res.data.code === '200'){
|
// state.deviceData = res.data.data
|
// } else {
|
// ElMessage({
|
// type: 'warning',
|
// message: res.data.msg
|
// });
|
// }
|
// };
|
|
return {
|
router,
|
props,
|
screenTheme,
|
openDialog,
|
closeInfo,
|
changeTheme,
|
onScreenfullClick,
|
depChange,
|
jumpPage,
|
goBack,
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
$homeNavLengh: 8;
|
.hide{
|
display: none;
|
}
|
|
.showup{
|
display: block;
|
}
|
.dark {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
background: url('../../../assets/warningScreen/riskprocast.jpg') no-repeat center;
|
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: 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: #11FEEE;
|
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: #11feee;
|
font-weight: bolder;
|
}
|
|
.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;
|
}
|
}
|
}
|
}
|
|
.main-left{
|
width: calc(25% - 5px);
|
&>div{
|
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);
|
&>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) - (20px/3));
|
}
|
.right-mid{
|
width: 100%;
|
height: calc((100%/3) - (20px/3));
|
}
|
.right-bottom{
|
width: 100%;
|
height: calc((100%/3) - (20px/3));
|
}
|
}
|
}
|
}
|
.el-input {
|
width: 100% !important;
|
}
|
.el-date-editor::v-deep {
|
width: 100%;
|
}
|
.el-select {
|
width: 100%;
|
}
|
</style>
|
