<template>
|
<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="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>
|
<dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script lang="ts">
|
import screenfull from 'screenfull';
|
import {
|
toRefs,
|
reactive,
|
ref,
|
onMounted,
|
defineComponent,
|
defineAsyncComponent,
|
nextTick,
|
onUnmounted,
|
watchEffect
|
} from 'vue';
|
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>
|
reportData: []
|
creatTime: string | null
|
}
|
export default defineComponent({
|
name: 'msgDesc',
|
components: {
|
message: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/message.vue')),
|
},
|
props:{
|
content: Object || null
|
},
|
setup(props) {
|
const screenThemes = useScreenTheme()
|
const { screenTheme } = storeToRefs(screenThemes);
|
const state = reactive<stateType>({
|
descContent: {},
|
lineColor: ['#11FEEE'],
|
reportData: [],
|
creatTime: ''
|
})
|
|
const getTheme =()=>{
|
if(screenTheme.value.isDark){
|
window.document.getElementById('descCont').setAttribute( "class", 'dark-desc' );
|
state.lineColor = ['#11FEEE']
|
}else{
|
window.document.getElementById('descCont').setAttribute( "class", 'light-desc' );
|
state.lineColor = ['#333','#ccc']
|
}
|
}
|
|
watchEffect(() => {
|
// if(props.content){
|
// 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)
|
};
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.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: 122px;
|
background: url("../../../../../assets/warningScreen/pagebg-t.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: #11feee;
|
font-weight: bolder;
|
text-align: center;
|
letter-spacing: 5px;
|
}
|
}
|
|
.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%;
|
}
|
}
|
.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: 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(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-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%;
|
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;
|
}
|
}
|
.des-main{
|
width: 100%;
|
height: calc(96% - 2.2rem);
|
padding: 1rem;
|
overflow: auto;
|
color: #333;
|
|
&::-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>
|
