Default Changelist

马宇豪

2023-03-10 e5e9b84b800f1623f85be45a3565689917898c78

 src/views/riskWarningSys/warningBigScreen/indexs/index.vue

@@ -13,13 +13,12 @@
    </div>
    <div class="chart-cont">
      <div class="chart">
        <div v-show="curChart===2" class="selector-2">距上次演练结束5天</div>
        <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>
@@ -28,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>
@@ -68,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';
@@ -84,22 +72,40 @@
    isScreenfull: boolean;
    curChart: number | null;
    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()
@@ -109,71 +115,16 @@
        isScreenfull: false,
        curChart: null,
        lineColor: ['#11FEEE'],
        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: {}
      });

      // 页面载入时执行方法
@@ -184,6 +135,9 @@
        getTheme()
      });

      watchEffect(() => {

      })

      // 全屏
      const onScreenfullClick = () => {
@@ -209,6 +163,9 @@
          state.lineColor = ['#333','#ccc']
        }
      }
      watchEffect(() => {

      })
      // 返回上一页
      const goBack = () => {
        window.history.go(-1);
@@ -296,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%;
@@ -417,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%;