From a8ef7c1a4b2ab6acd91a0520e6258bd753d17f20 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期三, 16 八月 2023 15:58:20 +0800
Subject: [PATCH] 人员证书类型
---
src/views/riskWarningSys/warningBigScreen/indexs/index.vue | 272 +++++++++++++-----------------------------------------
1 files changed, 67 insertions(+), 205 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/index.vue b/src/views/riskWarningSys/warningBigScreen/indexs/index.vue
index 570d38d..81cd90a 100644
--- a/src/views/riskWarningSys/warningBigScreen/indexs/index.vue
+++ b/src/views/riskWarningSys/warningBigScreen/indexs/index.vue
@@ -9,25 +9,16 @@
</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"></spi>
+ <accident v-if="curChart===1" :size="2.5" ref="accRef"></accident>
+ <training v-else-if="curChart===2" :size="2.5" ref="trainRef"></training>
+ <risk v-else-if="curChart===3" :size="2.5" ref="riskRef"></risk>
+ <spi v-else-if="curChart===4" :size="2" ref="spiRef"></spi>
<educate v-else-if="curChart===5" :size="2.5"></educate>
- <danger v-else-if="curChart===6" :size="2.5"></danger>
+ <danger v-else-if="curChart===6" :size="2.5" ref="danRef"></danger>
<profession v-else-if="curChart===7" :size="2.5"></profession>
<message v-else-if="curChart===8" :size="2"></message>
<monitor v-else-if="curChart===9" :size="2.5"></monitor>
@@ -36,39 +27,18 @@
<div class="chart-right">
<dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
<div class="charts-des">
- <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>
+ <acc-desc v-if="curChart===1" :content="accRef"></acc-desc>
+ <train-desc v-else-if="curChart===2" :content="trainRef"></train-desc>
+ <risk-desc v-else-if="curChart===3" :content="riskRef"></risk-desc>
+ <spi-desc v-else-if="curChart===4" :content="spiRef"></spi-desc>
+ <edu-desc v-else-if="curChart===5" :content="eduRef"></edu-desc>
+ <dan-desc v-else-if="curChart===6" :content="danRef"></dan-desc>
+ <pro-desc v-else-if="curChart===7" :content="proRef"></pro-desc>
+ <msg-desc v-else-if="curChart===8" :content="msgRef"></msg-desc>
+ <mon-desc v-else-if="curChart===9" :content="monRef"></mon-desc>
+ <sto-desc v-else :content="stoRef"></sto-desc>
</div>
- <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
+ <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/>
</div>
</div>
</div>
@@ -76,7 +46,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,
+ watchEffect
+ } from 'vue';
import { ElTable } from 'element-plus';
import { FormInstance, FormRules, ElMessage } from 'element-plus';
import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
@@ -91,25 +71,41 @@
interface stateType {
isScreenfull: boolean;
curChart: number | null;
- month: number;
- optionList: Array<any>;
lineColor: Array<string>;
- accidentDesc: Array<any>;
- trainDesc: Object;
+ accRef: Object;
+ trainRef: Object;
+ riskRef: Object;
+ spiRef: Object;
+ eduRef: Object;
+ danRef: Object;
+ proRef: Object;
+ msgRef: Object;
+ monRef: Object;
+ stoRef: Object
}
export default defineComponent({
name: 'warningPage',
components: {
accident: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/accident.vue')),
+ accDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/acc.vue')),
training: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/training.vue')),
+ trainDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/train.vue')),
spi: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/SPI.vue')),
+ spiDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/spi.vue')),
risk: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/risk.vue')),
+ riskDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/risk.vue')),
educate: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/educate.vue')),
+ eduDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/edu.vue')),
danger: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/danger.vue')),
+ danDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/dan.vue')),
profession: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/profession.vue')),
+ proDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/pro.vue')),
message: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/message.vue')),
+ msgDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/msg.vue')),
monitor: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/monitor.vue')),
- stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue'))
+ monDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/mon.vue')),
+ stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue')),
+ stoDesc: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/indexs/components/sto.vue'))
},
setup() {
const screenThemes = useScreenTheme()
@@ -118,119 +114,17 @@
const state = reactive<stateType>({
isScreenfull: false,
curChart: null,
- month: 0,
lineColor: ['#11FEEE'],
- 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
- }
- ],
- accidentDesc:[
- {
- title: '特别重大事故',
- total: 10,
- desc: '死亡人数：0人； 重伤人数：2人； 轻伤人数：3人； 直接经济损失：180.61万元'
- },
- {
- title: '重大事故',
- total: 20,
- desc: '死亡人数：1人； 重伤人数：6人； 轻伤人数：0人； 直接经济损失：160.61万元'
- },
- {
- title: '较大事故',
- total: 100,
- desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：3人； 直接经济损失：190.61万元'
- },
- {
- title: '一般事故',
- total: 130,
- desc: '死亡人数：0人； 重伤人数：0人； 轻伤人数：0人； 直接经济损失：180.61万元'
- },
- {
- 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
- }
- ]
- }
+ accRef: {},
+ trainRef: {},
+ riskRef: {},
+ spiRef: {},
+ eduRef: {},
+ danRef: {},
+ proRef: {},
+ msgRef: {},
+ monRef: {},
+ stoRef: {}
});
// 页面载入时执行方法
@@ -241,6 +135,9 @@
getTheme()
});
+ watchEffect(() => {
+
+ })
// 全屏
const onScreenfullClick = () => {
@@ -266,6 +163,9 @@
state.lineColor = ['#333','#ccc']
}
}
+ watchEffect(() => {
+
+ })
// 返回上一页
const goBack = () => {
window.history.go(-1);
@@ -343,25 +243,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%;
@@ -372,9 +253,9 @@
height: 100%;
.charts-des{
height: 90%;
+ padding: 4%;
background: url("../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
background-size: 100% 100%;
- padding: 4%;
.des-tit{
width: 100%;
@@ -483,25 +364,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%;
@@ -512,9 +374,9 @@
height: 100%;
.charts-des{
height: 90%;
+ padding: 4%;
background: url("../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
background-size: 100% 100%;
- padding: 4%;
.des-tit{
width: 100%;
--
Gitblit v1.9.2