xiugai

马宇豪

2024-07-08 20b0ce2db27b64a60de60aee05dedd448099e330

 src/views/riskWarningSys/warningBigScreen/indexs/components/msg.vue

@@ -1,21 +1,38 @@
<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>
@@ -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,6 +155,80 @@
</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%;
@@ -128,11 +271,91 @@

        &>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%;
@@ -175,9 +398,14 @@

        &>p{
          font-size: 1rem;
          margin-top: 10px;
                margin-top: 20px;
        }
      }
    }
  }
      }
    }

  }
}
</style>