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/indexs/components/msg.vue | 422 ++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 325 insertions(+), 97 deletions(-)
diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/components/msg.vue b/src/views/riskWarningSys/warningBigScreen/indexs/components/msg.vue
index b955f19..9321430 100644
--- a/src/views/riskWarningSys/warningBigScreen/indexs/components/msg.vue
+++ b/src/views/riskWarningSys/warningBigScreen/indexs/components/msg.vue
@@ -1,24 +1,41 @@
<template>
- <div id="descCont" class="dark-desc">
- <div class="des-tit">
- <div>预警消息SPI报告-2022年8月</div>
- <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
+ <div>
+ <div class="tit">
+ <div class="title">预警消息报告</div>
+ </div>
+ <div class="chart-cont">
+ <div class="chart">
+ <message :size="2" @getData=showDetails></message>
</div>
- <div class="des-main">
- <div>
- <h4>2022年8月整体SPI指数317.65，处于安全范围以内。</h4>
- <p>8月份spi中教育培训比例不足和一般风险新增较多，对SPI总值影响较大，请注意调整相关因素环节的处理措施。</p>
+ <div class="chart-right">
+ <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
+ <div class="charts-des">
+ <div id="descCont" class="dark-desc">
+ <div class="des-tit">
+ <div>{{descContent.spiName}}</div>
+ <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
+ </div>
+ <div class="des-main">
+ <div>
+ <div style="margin-bottom: 10px">生成时间：{{creatTime}}1日 00:00:03</div>
+ <h4>{{descContent.reportTime}}新疆国泰新华化工有限公司安全风险指数基础数据情况如下</h4>
+ <p>1、本月共计上报事故{{descContent.accidentTotal}}起，其中一级事故{{descContent.accidentOne}}起，二级事故{{descContent.accidentTwo}}起，三级事故{{descContent.accidentThree}}起，四级事故{{descContent.accidentFour}}起。</p>
+ <p>2、智能巡检本月总任务数{{descContent.checkTotal}}个，其中{{descContent.checkOverdue }}个超期未巡检，超期未巡检率{{descContent.checkOverRate}}%，上报异常{{descContent.checkException}}个。</p>
+ <p>3、本月隐患上报数量{{descContent.hdTotal}}个，其中A级隐患{{descContent.hdA}}个，B级隐患{{descContent.hdB}}个，C级隐患{{descContent.hdC}}个，已经完成整改验收{{descContent.hdRf}}个，暂未完成整改{{descContent.hdRnf}}个。</p>
+ <p>4、截至{{descContent.lastTime}}系统人员用户共计{{descContent.userCount}}个，其中证书绑定（持证人员）{{descContent.userCertCount}}个，系统人员总体持证比{{(descContent.userCertCount / descContent.userCount * 100).toFixed(2)}}%。</p>
+ <p>5、最近一次教育培训上报情况为：课程数量{{descContent.courseNum}}，课件数量{{descContent.coursewareNum}}，试题数量{{descContent.questionsNum}}。考试参与率{{descContent.examJoinRate}}%，考试合格率{{descContent.examPassRate}}%，缺考总数{{descContent.missExam}}，待补课数{{descContent.repairNum}}，人均学时{{descContent.studyAverage}}，学时达标率{{descContent.studyQualifyRate}}%,培训人数{{descContent.trainPerson}}，培训参与率{{descContent.trainJoinRate}}%。</p>
+ <p>6、截至{{descContent.lastTime}}应急物资储备情况为：</p>
+ <div style="margin-top: 10px;margin-left: 20px" v-for="(item,index) in descContent.emergencySuppliesList">
+ ({{index+1}}) 编号：{{item.number}}，物资名称：{{item.name}}，负责部分：{{item.departmentName?item.departmentName: '暂无'}}，物资分类：{{item.classificationName}}，存放位置：{{item.place}}，存放数量：{{item.count}}
+ </div>
+ </div>
+ </div>
</div>
- <div>
- <h4>次月预警消息</h4>
- <p>未来一个月该地区气候干燥，降水量少，高温天气仍将持续，应注意防范消防风险，注意重点消防区域的消防设置设备的可用性检查</p>
</div>
- <div>
- <h4>本月SPI基础数据构成：</h4>
- <p>...</p>
- </div>
+ <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/>
</div>
</div>
+ </div>
</template>
<script lang="ts">
import screenfull from 'screenfull';
@@ -36,15 +53,21 @@
import '/@/theme/bigScreen.css'
import {useScreenTheme} from "/@/stores/screenTheme"
import {storeToRefs} from "pinia";
+ import {riskWarningApi} from "/@/api/riskWarning";
+ import {ElMessage} from "element-plus/es";
// 定义接口来定义对象的类型
interface stateType {
- descContent: Object;
- lineColor: Array<string>;
+ descContent: Object
+ lineColor: Array<string>
+ reportData: []
+ creatTime: string | null
}
export default defineComponent({
name: 'msgDesc',
- components: {},
+ components: {
+ message: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/message.vue')),
+ },
props:{
content: Object || null
},
@@ -52,11 +75,11 @@
const screenThemes = useScreenTheme()
const { screenTheme } = storeToRefs(screenThemes);
const state = reactive<stateType>({
- descContent: {
-
- },
+ descContent: {},
lineColor: ['#11FEEE'],
- });
+ reportData: [],
+ creatTime: ''
+ })
const getTheme =()=>{
if(screenTheme.value.isDark){
@@ -73,12 +96,58 @@
// state.descContent = props.content
// }
})
+ // const getData = (index)=>{
+ // state.descContent = data
+ // }
+
+ const showDetails = (index)=>{
+ riskWarningApi().getAllReport().then((res)=>{
+ if (res.data.code === '200') {
+ state.reportData = res.data.data
+ riskWarningApi().getReportDetails(state.reportData[index].id).then((re)=>{
+ if (re.data.code === '200') {
+ state.descContent = re.data.data
+ state.creatTime = getNextMonth(state.descContent.reportTime)
+ }else{
+ ElMessage({
+ type: 'warning',
+ message: re.data.msg
+ })
+ }
+ })
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ })
+ }
+ })
+ }
+
+ const getNextMonth=(dateString:string)=>{
+ // 提取年份和月份
+ const year = parseInt(dateString.slice(0, 4));
+ const month = parseInt(dateString.slice(5, 7));
+ // 计算下一个月的年份和月份
+ let nextYear = year;
+ let nextMonth = month + 1;
+ if (nextMonth === 13) {
+ nextYear++;
+ nextMonth = 1; // 如果下一个月是13月，则重置为1月
+ }
+ // 格式化下一个月的日期字符串
+ const formattedNextMonth = `${nextYear}年${nextMonth.toString().padStart(2, '0')}月`;
+ return formattedNextMonth;
+ }
// 页面载入时执行方法
onMounted(() => {
getTheme();
});
return {
+ // getData,
+ getNextMonth,
+ showDetails,
...toRefs(state)
};
}
@@ -86,98 +155,257 @@
</script>
<style scoped lang="scss">
- .dark-desc{
+.dark-page{
+ width: 100%;
+ height: 100%;
+ border:1px #5a5959 solid;
+ background: url('../../../../../assets/warningScreen/body-bg.jpg');
+ padding: 4%;
+ .btns{
+ position: fixed;
+ width: 8%;
+ height: 6%;
+ right: 5%;
+ top: 1.25rem;
+ font-size: 1.125rem;
+ color: rgb(17, 254, 238);
+ cursor: pointer;
+ }
+ .tit{
width: 100%;
- height: 100%;
+ height: 122px;
+ background: url("../../../../../assets/warningScreen/pagebg-t.png") no-repeat center;
+ background-size: 100% 100%;
- .des-tit{
+
+ .title{
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: 1rem;
- overflow: auto;
- color: #11FEEE;
-
- &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
- &::scrollbar { width: 0; height: 0; color: transparent; }
-
- &>div{
- margin-bottom: 1rem;
- &>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;
- }
- }
+ height: 122px;
+ line-height: 112px;
+ border-radius: 8px;
+ margin-bottom: 20px;
+ font-size: 2.8rem;
+ color: #11feee;
+ font-weight: bolder;
+ text-align: center;
+ letter-spacing: 5px;
}
}
- .light-desc{
- width: 100%;
- height: 100%;
- .des-tit{
- width: 100%;
- &>div{
- font-size: 1.5rem;
- height: 2.2rem;
- line-height: 2.2rem;
- text-align: center;
- font-weight: bolder;
- color: #333;
+ .chart-cont{
+ width: 100%;
+ padding: 20px;
+ height: calc(92vh - 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.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%;
}
}
- .des-main{
+ .chart-right{
+ width: calc((100% - 20px) * 0.37);
+ height: 100%;
+ .charts-des{
+ height: 90%;
+ padding: 4%;
+ background: url("../../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
+ background-size: 100% 100%;
+
+ .dark-desc{
+ width: 100%;
+ height: 100%;
+
+ .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: 1rem;
+ overflow: auto;
+ color: #11FEEE;
+
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>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: 20px;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ }
+}
+.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: calc(96% - 2.2rem);
- padding: 1rem;
- overflow: auto;
+ 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;
+ }
+ }
- &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
- &::scrollbar { width: 0; height: 0; color: transparent; }
+ .chart-cont{
+ width: 100%;
+ padding: 20px;
+ height: calc(92vh - 122px);
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
- &>div{
- margin-bottom: 1rem;
- &>h4{
- font-size: 1.25rem;
- display: flex;
- align-items: center;
+ .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%;
- span{
- margin-right: 10px;
+ .charts-des{
+ height: 90%;
+ padding: 4%;
+ background: url("../../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
+ background-size: 100% 100%;
+
+ .light-desc{
+ width: 100%;
+ height: 100%;
+
+ .des-tit{
+ width: 100%;
+ &>div{
+ font-size: 1.5rem;
+ height: 2.2rem;
+ line-height: 2.2rem;
+ text-align: center;
+ font-weight: bolder;
+ color: #333;
+ }
}
- &:first-of-type{
- margin-bottom: 10px;
- }
- }
+ .des-main{
+ width: 100%;
+ height: calc(96% - 2.2rem);
+ padding: 1rem;
+ overflow: auto;
+ color: #333;
- &>p{
- font-size: 1rem;
- margin-top: 10px;
+ &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
+ &::scrollbar { width: 0; height: 0; color: transparent; }
+
+ &>div{
+ margin-bottom: 1rem;
+ &>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: 20px;
+ }
+ }
+ }
}
}
}
+
}
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.2