From 23f1bf22c42a904c05cee63e10c9fd8b60dfe8f5 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期二, 20 九月 2022 14:54:56 +0800
Subject: [PATCH] Default Changelist
---
src/views/riskWarningSys/warningBigScreen/indexs/index.vue | 365 ++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 283 insertions(+), 82 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/index.vue b/src/views/riskWarningSys/warningBigScreen/indexs/index.vue
index e0faf3b..c037e1c 100644
--- a/src/views/riskWarningSys/warningBigScreen/indexs/index.vue
+++ b/src/views/riskWarningSys/warningBigScreen/indexs/index.vue
@@ -1,26 +1,23 @@
<template>
- <div class="com-page">
- <div class="btns" @click="goBack()">
- 返回首页
+ <div id="pageCont" class="dark-page">
+ <div class="btns">
+ <dv-decoration-11 :color="lineColor" @click="goBack()">
+ <div color-green font-600 bg="~ dark/0">
+ 返回
+ </div>
+ </dv-decoration-11>
</div>
+
<div class="tit">
- <div class="title">{{curChart===1?'事故等级分布':curChart===2?'应急演练次数':curChart===3?'年度隐患等级数量分布':curChart===4?'SPI数据分析':curChart===5?'教育培训分析':curChart===6?'隐患等级':curChart===7?'人员专业度分布':curChart===8?'预警消息报告':curChart===9?'特殊作业实时监控':'风险应急物资储备'}}</div>
+ <div class="title">{{curChart===1?'事故等级分布':curChart===2?'应急演练次数':curChart===3?'隐患等级数量分布':curChart===4?'SPI数据分析':curChart===5?'教育培训分析':curChart===6?'隐患等级':curChart===7?'人员专业度分布':curChart===8?'预警消息报告':curChart===9?'特殊作业实时监控':'风险应急物资储备'}}</div>
</div>
<div class="chart-cont">
<div class="chart">
<div v-show="curChart===2" class="selector-2">距上次演练结束5天</div>
- <el-select v-show="curChart===3" class="selector-3" v-model="month" placeholder="Select" size="default">
- <el-option
- v-for="item in optionList"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
<accident v-if="curChart===1" :size="2.5"></accident>
<training v-else-if="curChart===2" :size="2.5"></training>
<risk v-else-if="curChart===3" :month="month" :size="2.5"></risk>
- <spi v-else-if="curChart===4" :size="2.5"></spi>
+ <spi v-else-if="curChart===4" :size="2"></spi>
<educate v-else-if="curChart===5" :size="2.5"></educate>
<danger v-else-if="curChart===6" :size="2.5"></danger>
<profession v-else-if="curChart===7" :size="2.5"></profession>
@@ -29,13 +26,41 @@
<stock v-else class="main-chart" :size="2"></stock>
</div>
<div class="chart-right">
- <dv-decoration-10 :color="['#11FEEE']" style="width:100%;height:5%;" />
+ <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
<div class="charts-des">
- <div class="">
-
+ <div class="des-tit">
+ <div v-if="curChart===1">2022年度事故等级分布与影响一览</div>
+ <div v-else-if="curChart===2">应急演练概况</div>
+ <div v-else-if="curChart===3">隐患影响等级分布详情</div>
+ <div v-else-if="curChart===4">2022年度事企业SPI趋势</div>
+ <div v-else-if="curChart===5">教育培训情况汇总</div>
+ <div v-else-if="curChart===6">隐患等级分布与隐患整改率</div>
+ <div v-else-if="curChart===7">人员持证上岗情况</div>
+ <div v-else-if="curChart===8">预警消息SPI报告-2022年8月</div>
+ <div v-else-if="curChart===9">监控列表</div>
+ <div v-else>当前应急物资储备情况（总）</div>
+ <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
+ </div>
+ <div v-if="curChart===2" class="des-main">
+ <div>
+ <h4>距上次【<span>{{trainDesc.title}}</span>】应急演练结束<span>{{trainDesc.total}}</span>天</h4>
+ <h4>
+ 应急演练分月情况汇总：
+ </h4>
+ <p v-for="(item,index) in trainDesc.list" :key="index">{{item.month}}应急演练次数：{{item.num}}次</p>
+ </div>
+ </div>
+ <div v-else class="des-main">
+ <div v-for="(item,index) in accidentDesc" :key="index">
+ <h4><span>{{item.title}}</span>共计：<span>{{item.total}}</span>起</h4>
+ <h4>
+ 事故影响
+ </h4>
+ <p>{{item.desc}}</p>
+ </div>
</div>
</div>
- <dv-decoration-10 :color="['#11FEEE']" style="width:100%;height:5%;" />
+ <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
</div>
</div>
</div>
@@ -51,13 +76,16 @@
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";
// 定义接口来定义对象的类型
interface stateType {
isScreenfull: boolean;
curChart: number | null;
- month: number;
- optionList: Array<any>
+ lineColor: Array<string>;
+ accidentDesc: Array<any>;
+ trainDesc: Object;
}
export default defineComponent({
name: 'warningPage',
@@ -74,57 +102,78 @@
stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue'))
},
setup() {
+ const screenThemes = useScreenTheme()
+ const { screenTheme } = storeToRefs(screenThemes);
const route = useRoute();
const state = reactive<stateType>({
isScreenfull: false,
curChart: null,
- month: 0,
- optionList: [
+ lineColor: ['#11FEEE'],
+ accidentDesc:[
{
- label: '年度',
- value: 0
+ title: '特别重大事故',
+ total: 10,
+ desc: '死亡人数：0人； 重伤人数：2人； 轻伤人数：3人； 直接经济损失：180.61万元'
},
{
- label: '一月',
- value: 1
+ title: '重大事故',
+ total: 20,
+ desc: '死亡人数：1人； 重伤人数：6人； 轻伤人数：0人； 直接经济损失：160.61万元'
},
{
- label: '二月',
- value: 2
+ title: '较大事故',
+ total: 100,
+ desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：3人； 直接经济损失：190.61万元'
},
{
- label: '三月',
- value: 3
+ title: '一般事故',
+ total: 130,
+ desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：0人； 直接经济损失：180.61万元'
},
{
- label: '四月',
- value: 4
- },
- {
- label: '五月',
- value: 5
- },
- {
- label: '六月',
- value: 6
- },
- {
- label: '七月',
- value: 7
- },
- {
- label: '八月',
- value: 8
- },
- {
- label: '九月',
- value: 9
- },
- {
- label: '十月',
- value: 10
+ title: '未遂事故',
+ total: 150,
+ desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：0人； 直接经济损失：9万元'
}
- ]
+ ],
+ trainDesc:{
+ title: '公司级',
+ total: 5,
+ list: [
+ {
+ month: '一月份',
+ num: 23
+ },
+ {
+ month: '二月份',
+ num: 76
+ },
+ {
+ month: '三月份',
+ num: 152
+ },
+ {
+ month: '四月份',
+ num: 200
+ },
+ {
+ month: '五月份',
+ num: 49
+ },
+ {
+ month: '六月份',
+ num: 83
+ },
+ {
+ month: '七月份',
+ num: 102
+ },
+ {
+ month: '八月份',
+ num: 99
+ }
+ ]
+ }
});
// 页面载入时执行方法
@@ -132,6 +181,7 @@
if (route.query.num) {
state.curChart = Number(route.query.num)
}
+ getTheme()
});
@@ -150,7 +200,15 @@
}
});
};
-
+ const getTheme =()=>{
+ if(screenTheme.value.isDark){
+ window.document.getElementById('pageCont').setAttribute( "class", 'dark-page' );
+ state.lineColor = ['#11FEEE']
+ }else{
+ window.document.getElementById('pageCont').setAttribute( "class", 'light-page' );
+ state.lineColor = ['#333','#ccc']
+ }
+ }
// 返回上一页
const goBack = () => {
window.history.go(-1);
@@ -168,7 +226,7 @@
</script>
<style scoped lang="scss">
- .com-page{
+ .dark-page{
width: 100%;
height: 100%;
border:1px #5a5959 solid;
@@ -176,13 +234,11 @@
padding: 4%;
.btns{
position: fixed;
+ width: 8%;
+ height: 6%;
right: 5%;
- top: 20px;
+ top: 1.25rem;
font-size: 1.125rem;
- padding: 10px 15px;
- box-sizing: border-box;
- border: 1px solid rgb(0, 208, 206);
- border-radius: 10px;
color: rgb(17, 254, 238);
cursor: pointer;
}
@@ -230,25 +286,6 @@
font-size: 1.25rem;
color: #fff;
}
- .selector-3{
- position: absolute;
- top: 5%;
- right: 10%;
- width: 20%;
-
- ::v-deep(.el-input__wrapper){
- background: none !important;
- box-shadow: none;
- color: #11FEEE;
-
- input{
- color: #11FEEE;
- }
- .el-icon{
- color: #11FEEE;
- }
- }
- }
.main-chart{
width: 100%;
height: 100%;
@@ -261,6 +298,170 @@
height: 90%;
background: url("../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
background-size: 100% 100%;
+ padding: 4%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #11FEEE;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 0 2%;
+ overflow: auto;
+ color: #11FEEE;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 2rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
+ }
+ }
+
+ }
+ }
+ .light-page{
+ width: 100%;
+ height: 100%;
+ border:1px #5a5959 solid;
+ background: #F0F0F0;
+ padding: 4%;
+ .btns{
+ position: fixed;
+ width: 8%;
+ height: 6%;
+ right: 5%;
+ top: 1.25rem;
+ font-size: 1.125rem;
+ color: #333;
+ cursor: pointer;
+ }
+ .tit{
+ width: 100%;
+ height: 122px;
+ background: url("../../../../assets/warningScreen/pagebg-t-light.png") no-repeat center;
+ background-size: 100% 100%;
+
+
+ .title{
+ width: 100%;
+ height: 122px;
+ line-height: 112px;
+ border-radius: 8px;
+ margin-bottom: 20px;
+ font-size: 2.8rem;
+ color: #333;
+ font-weight: bolder;
+ text-align: center;
+ letter-spacing: 5px;
+ }
+ }
+
+ .chart-cont{
+ width: 100%;
+ padding: 20px;
+ height: calc(100% - 122px);
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+
+ .chart{
+ width: calc((100% - 20px) * 0.63);
+ height: 100%;
+ padding: 3%;
+ background: url("../../../../assets/warningScreen/pagebg-l-light.png") no-repeat center;
+ background-size: 100% 100%;
+ position: relative;
+ .selector-2{
+ position: absolute;
+ top: 5%;
+ right: 10%;
+ width: 20%;
+ font-size: 1.25rem;
+ color: #fff;
+ }
+ .main-chart{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ .chart-right{
+ width: calc((100% - 20px) * 0.37);
+ height: 100%;
+ .charts-des{
+ height: 90%;
+ background: url("../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
+ background-size: 100% 100%;
+ padding: 4%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #333;
+ }
+ }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 0 2%;
+ overflow: auto;
+ color: #333;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 2rem;
+ &>h4{
+ font-size: 1.25rem;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-right: 10px;
+ }
+ &:first-of-type{
+ margin-bottom: 10px;
+ }
+ }
+
+ &>p{
+ font-size: 1rem;
+ margin-top: 10px;
+ }
+ }
+ }
}
}
--
Gitblit v1.9.2