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 | 708 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 408 insertions(+), 300 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/index.vue b/src/views/riskWarningSys/warningBigScreen/index.vue
index 164931e..ffcb8aa 100644
--- a/src/views/riskWarningSys/warningBigScreen/index.vue
+++ b/src/views/riskWarningSys/warningBigScreen/index.vue
@@ -1,5 +1,25 @@
<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="" />
@@ -10,10 +30,10 @@
<!-- <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="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>
@@ -44,57 +64,44 @@
<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>
+ <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">
- <span class="train-tip">距上次演练结束 5 天</span>
- <training :size="1"></training>
+ <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>
- <div>
- <el-select class="selector" v-model="month" placeholder="Select" :teleported="false" size="default">
- <el-option
- v-for="item in optionList"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
-<!-- <img @click="jumpPage(3)" src="../../../assets/warningScreen/small-full.png">-->
- <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/>
- </div>
-
+ <span>| 隐患趋势</span>
+ <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/>
</div>
<div class="chart-box">
- <risk :size="1" :month="month"></risk>
+ <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: 12%;padding: 0 4%">
- <el-cascader
- class="spiSe"
- :teleported="false"
- v-model="spiValue"
- :options="spiOptions"
- :props="props"
- :show-all-levels="false"
- @change="handleChange"
- />
-<!-- <span>SPI数据分析</span>-->
-<!-- <img @click="jumpPage(4)" src="../../../assets/warningScreen/small-full.png">-->
+ <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">
- <spi :size="1"></spi>
+ <div class="chart-box" style="top: 60px;height: calc(100% - 70px)">
+ <spi :size="1" :theme="screenTheme.isDark"></spi>
</div>
</div>
<div class="mid-bottom">
@@ -153,7 +160,7 @@
<Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(9)"/>
</div>
<div class="chart-box">
- <monitor></monitor>
+ <monitor :size="1" ref="monRef" :theme="screenTheme.isDark"></monitor>
</div>
</div>
<div class="right-bottom">
@@ -173,7 +180,17 @@
<script lang="ts">
import screenfull from 'screenfull';
- import { toRefs, reactive, ref, onMounted, defineComponent, defineAsyncComponent, nextTick, onUnmounted } 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';
@@ -183,6 +200,9 @@
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 {
@@ -191,10 +211,13 @@
boxBigColor: Array<string>;
isScreenfull: boolean;
currentTime: string;
- month: number;
- spiValue: number;
- optionList: Array<any>;
- spiOptions: Array<any>
+ depValue: number;
+ dialogShow: string;
+ dialogHide: string;
+ depProps: object;
+ departList: Array<any>;
+ lastTrain: number | null;
+ timer: any|null
}
export default defineComponent({
name: 'warningScreen',
@@ -220,112 +243,57 @@
}
const state = reactive<stateType>({
boxBg: 'rgba(8, 109, 209, 0.2)',
+ depValue: 1,
boxColor: [],
boxBigColor: [],
+ lastTrain: null,
isScreenfull: false,
currentTime: '',
- month: 0,
- spiValue: 0,
- optionList: [
- {
- label: '年度',
- value: 0
- },
- {
- label: '一月',
- value: 1
- },
- {
- label: '二月',
- value: 2
- },
- {
- label: '三月',
- value: 3
- },
- {
- label: '四月',
- value: 4
- },
- {
- label: '五月',
- value: 5
- },
- {
- label: '六月',
- value: 6
- },
- {
- label: '七月',
- value: 7
- },
- {
- label: '八月',
- value: 8
- },
- {
- label: '九月',
- value: 9
- },
- {
- label: '十月',
- value: 10
- }
- ],
- spiOptions: [
- {
- value: 0,
- label: '公司级别SPI'
- },
- {
- value: 1,
- label: 'A事业部SPI',
- children: [
- {
- value: 11,
- label: 'A车间SPI'
- },
- {
- value: 12,
- label: 'B车间SPI'
- },
- {
- value: 13,
- label: 'C车间SPI'
- }
- ]
- },
- {
- value: 2,
- label: 'B事业部SPI',
- children: [
- {
- value: 21,
- label: 'D车间SPI'
- },
- {
- value: 22,
- label: 'E车间SPI'
- },
- {
- value: 23,
- label: 'F车间SPI'
- }
- ]
- }
- ]
+ dialogShow: 'hide',
+ dialogHide: 'hide',
+ depProps: {
+ expandTrigger: 'hover',
+ checkStrictly: true,
+ value: 'depId',
+ label: 'depName',
+ emitPath: false
+ },
+ departList: [],
+ timer: null
});
-
+ const monRef = ref()
// 页面载入时执行方法
onMounted(() => {
- getTime()
+ NextLoading.done();
+ state.depValue = screenTheme.value.depId
+ getTime();
+ getAllDepartment();
+ state.timer = setInterval(()=>{
+ getTime()
+ },1000)
getTheme()
});
const getTime =()=>{
- setInterval(() => {
- state.currentTime = new Date().toLocaleString();
- }, 1000);
+ 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 = () =>{
@@ -339,8 +307,8 @@
}else{
document.getElementById('container').setAttribute( "class", 'light' )
state.boxBg = '#fff'
- state.boxColor = ['#ccc','#333']
- state.boxBigColor = ['#666','#fff']
+ state.boxColor = ['#fff','#ccc']
+ state.boxBigColor = ['#999','#fff']
}
}
@@ -353,8 +321,8 @@
}else{
window.document.getElementById('container').setAttribute( "class", 'light' );
state.boxBg = '#fff'
- state.boxColor = ['#ccc','#333']
- state.boxBigColor = ['#666','#fff']
+ state.boxColor = ['#fff','#ccc']
+ state.boxBigColor = ['#999','#fff']
}
}
@@ -374,6 +342,18 @@
});
};
+ 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',
@@ -385,9 +365,15 @@
// 返回上一页
const goBack = () => {
- window.history.go(-1);
+ // window.history.go(-1);
+ router.push({
+ path: 'newMenu'
+ });
};
+ onBeforeUnmount(() =>{
+ clearInterval(state.timer)
+ })
// 隐患状态列表
// const getDeviceRecord = async () => {
// const data = { pageSize: state.pageSize, pageIndex: state.pageIndex};
@@ -406,8 +392,12 @@
router,
props,
screenTheme,
+ monRef,
+ openDialog,
+ closeInfo,
changeTheme,
onScreenfullClick,
+ depChange,
jumpPage,
goBack,
...toRefs(state)
@@ -418,6 +408,17 @@
<style scoped lang="scss">
$homeNavLengh: 8;
+ .hide{
+ display: none;
+ }
+ #container{
+ width: 100%;
+ height: 100%;
+ }
+ .showup{
+ display: block;
+ }
+
.dark {
width: 100%;
height: 100%;
@@ -428,9 +429,100 @@
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: 72px;
+ height: 7.8%;
padding: 0 20px;
font-size: 1.25rem;
display: flex;
@@ -444,15 +536,15 @@
align-items: center;
justify-content: center;
img {
- height: 35px;
- width: 128px;
+ width: 10rem;
+ height: auto;
}
}
.title {
width: 46%;
font-size: 2rem;
font-weight: bolder;
- line-height: 72px;
+ line-height: 7.8%;
text-align: center;
letter-spacing: 2px;
}
@@ -468,6 +560,7 @@
.datetime {
color: #11FEEE;
+ font-size: 0.9rem;
}
.btns{
display: flex;
@@ -484,7 +577,8 @@
height: 1rem;
}
div{
- margin-left: 6px;
+ margin-left: 0.4rem;
+ font-size: 0.9rem;
}
}
.themeBtn{
@@ -505,7 +599,7 @@
}
.main-content{
width: 100%;
- height: calc(100vh - 72px);
+ height: calc(100vh - 7.8%);
padding: 0.4rem 1.5rem 2rem;
display: flex;
align-items: center;
@@ -553,71 +647,27 @@
justify-content: space-between;
align-items: center;
z-index: 9999;
- div{
- width: 40%;
- display: flex;
- align-items: center;
- justify-content: end;
- }
- span{
- font-size: 1.25rem;
- font-weight: bolder;
- color: #11feee;
- }
- ::v-deep(.el-cascader){
+
+ .spiChart{
width: 25% !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;
+ ::v-deep(.el-cascader){
+ width: 100% !important;
}
- .el-icon{
- color: #11FEEE;
- }
- }
- .selector{
- width: calc(100% - 1.25rem);
- margin-right: 0.8rem;
-
::v-deep(.el-popper){
background-color: rgba(10,31,92,1);
border: 1px solid rgba(17,254,238,.4);
color: #11FEEE;
- .el-select-dropdown__item{
+ .el-cascader-node__label{
color: #11FEEE;
}
- .el-select-dropdown__item.hover{
- background: #0049af;
+ .el-icon{
+ color: #11FEEE;
+ }
+ .el-cascader-node{
+ &:hover{
+ background: #0049af;
+ }
}
}
::v-deep(.el-popper__arrow){
@@ -627,20 +677,27 @@
}
}
::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: 1.5rem;
+ height: 2.5rem;
color: #11FEEE;
input{
- font-size: 0.8rem;
+ font-size: 1.25rem;
color: #11FEEE;
}
.el-icon{
color: #11FEEE;
}
}
+ }
+
+ span{
+ font-size: 1.25rem;
+ font-weight: bolder;
+ color: #11feee;
}
img{
@@ -650,24 +707,21 @@
}
}
.chart-box{
+ position: absolute;
+ top: 40px;
+ bottom: 0;
+ left: 0;
+ right: 0;
width: 100%;
- height: calc(100% - 20px);
- margin-top: 20px;
+ height: calc(100% - 50px);
+ z-index: 10000;
.train-tip{
display: block;
font-size: 0.8rem;
- margin-top: 5%;
- margin-left: 2%;
+ margin-top: 2%;
+ margin-left: 5%;
color: #fff;
- }
- accident{
- width: 100%;
- height: 100%;
- }
-
- training{
- width: 100%;
- height: 100%;
+ height: 1rem;
}
}
}
@@ -726,9 +780,101 @@
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: 72px;
+ height: 7.8%;
padding: 0 20px;
font-size: 1.25rem;
display: flex;
@@ -742,15 +888,15 @@
align-items: center;
justify-content: center;
img {
- height: 35px;
- width: 128px;
+ width: 10rem;
+ height: auto;
}
}
.title {
width: 46%;
font-size: 2rem;
font-weight: bolder;
- line-height: 72px;
+ line-height: 7.8%;
text-align: center;
letter-spacing: 2px;
}
@@ -766,6 +912,7 @@
.datetime {
color: #000;
+ font-size: 0.9rem;
}
.btns{
display: flex;
@@ -782,7 +929,8 @@
height: 1rem;
}
div{
- margin-left: 6px;
+ margin-left: 0.4rem;
+ font-size: 0.9rem;
}
}
.themeBtn{
@@ -803,7 +951,7 @@
}
.main-content{
width: 100%;
- height: calc(100vh - 72px);
+ height: calc(100vh - 7.8%);
padding: 0.4rem 1.5rem 2rem;
display: flex;
align-items: center;
@@ -851,94 +999,57 @@
justify-content: space-between;
align-items: center;
z-index: 9999;
- div{
- width: 40%;
- display: flex;
- align-items: center;
- justify-content: end;
- }
- span{
- font-size: 1.25rem;
- font-weight: bolder;
- color: #000;
- }
- ::v-deep(.el-cascader){
+
+ .spiChart{
width: 25% !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;
+ ::v-deep(.el-cascader){
+ width: 100% !important;
}
- .el-icon{
- color: #000;
- }
- }
- .selector{
- width: calc(100% - 1.25rem);
- margin-right: 0.8rem;
-
::v-deep(.el-popper){
- background-color: rgba(255,255,255,1);
+ background-color: #fff;
border: 1px solid #ccc;
- color: #fff;
- .el-select-dropdown__item{
+ color: #000;
+ .el-cascader-node__label{
color: #000;
}
- .el-select-dropdown__item.hover{
- background: #ccc;
+ .el-icon{
+ color: #000;
+ }
+ .el-cascader-node{
+ &:hover{
+ background: #ccc;
+ }
}
}
::v-deep(.el-popper__arrow){
&::before{
- background-color: rgba(255,255,255,.6) !important;
+ 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: 1.5rem;
- color: #fff;
+ height: 2.5rem;
+ color: #000;
input{
- font-size: 0.8rem;
+ font-size: 1.25rem;
color: #000;
}
.el-icon{
color: #000;
}
}
+ }
+
+ span{
+ font-size: 1.25rem;
+ font-weight: bolder;
+ color: #000;
}
img{
@@ -948,24 +1059,21 @@
}
}
.chart-box{
+ position: absolute;
+ top: 40px;
+ bottom: 0;
+ left: 0;
+ right: 0;
width: 100%;
- height: calc(100% - 20px);
- margin-top: 20px;
+ height: calc(100% - 50px);
+ z-index: 10000;
.train-tip{
display: block;
font-size: 0.8rem;
- margin-top: 5%;
- margin-left: 2%;
+ margin-top: 2%;
+ margin-left: 5%;
color: #333;
- }
- accident{
- width: 100%;
- height: 100%;
- }
-
- training{
- width: 100%;
- height: 100%;
+ height: 1rem;
}
}
}
--
Gitblit v1.9.2