| | |
| | | <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>预警消息SPI报告-2022年8月</div> |
| | | <div>{{descContent.spiName}}</div> |
| | | <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" /> |
| | | </div> |
| | | <div class="des-main"> |
| | | <div> |
| | | <h4>2022年8月整体SPI指数317.65,处于安全范围以内。</h4> |
| | | <p>8月份spi中教育培训比例不足和一般风险新增较多,对SPI总值影响较大,请注意调整相关因素环节的处理措施。</p> |
| | | <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> |
| | | <h4>次月预警消息</h4> |
| | | <p>未来一个月该地区气候干燥,降水量少,高温天气仍将持续,应注意防范消防风险,注意重点消防区域的消防设置设备的可用性检查</p> |
| | | </div> |
| | | <div> |
| | | <h4>本月SPI基础数据构成:</h4> |
| | | <p>...</p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | 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 |
| | | }, |
| | |
| | | const screenThemes = useScreenTheme() |
| | | const { screenTheme } = storeToRefs(screenThemes); |
| | | const state = reactive<stateType>({ |
| | | descContent: { |
| | | |
| | | }, |
| | | descContent: {}, |
| | | lineColor: ['#11FEEE'], |
| | | }); |
| | | reportData: [], |
| | | creatTime: '' |
| | | }) |
| | | |
| | | const getTheme =()=>{ |
| | | if(screenTheme.value.isDark){ |
| | |
| | | // 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%; |
| | |
| | | |
| | | &>p{ |
| | | font-size: 1rem; |
| | | margin-top: 10px; |
| | | 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%; |
| | |
| | | |
| | | &>p{ |
| | | font-size: 1rem; |
| | | margin-top: 10px; |
| | | margin-top: 20px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | | </style> |