From e5e9b84b800f1623f85be45a3565689917898c78 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期五, 10 三月 2023 18:12:12 +0800 Subject: [PATCH] Default Changelist --- src/views/riskWarningSys/warningBigScreen/indexs/index.vue | 175 ++++++++++++++++++++++------------------------------------ 1 files changed, 66 insertions(+), 109 deletions(-) diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/index.vue b/src/views/riskWarningSys/warningBigScreen/indexs/index.vue index c037e1c..81cd90a 100644 --- a/src/views/riskWarningSys/warningBigScreen/indexs/index.vue +++ b/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%; -- Gitblit v1.9.2