From 20b0ce2db27b64a60de60aee05dedd448099e330 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期一, 08 七月 2024 10:12:16 +0800 Subject: [PATCH] xiugai --- src/views/riskWarningSys/warningBigScreen/indexs/index.vue | 107 +++++++++++++++++------------------------------------ 1 files changed, 34 insertions(+), 73 deletions(-) diff --git a/src/views/riskWarningSys/warningBigScreen/indexs/index.vue b/src/views/riskWarningSys/warningBigScreen/indexs/index.vue index 81cd90a..771ed21 100644 --- a/src/views/riskWarningSys/warningBigScreen/indexs/index.vue +++ b/src/views/riskWarningSys/warningBigScreen/indexs/index.vue @@ -7,40 +7,16 @@ </div> </dv-decoration-11> </div> - - <div class="tit"> - <div class="title">{{curChart===1?'事故等级分布':curChart===2?'应急演练次数':curChart===3?'隐患等级数量分布':curChart===4?'SPI数据分析':curChart===5?'教育培训分析':curChart===6?'隐患等级':curChart===7?'人员专业度分布':curChart===8?'预警消息报告':curChart===9?'特殊作业实时监控':'风险应急物资储备'}}</div> - </div> - <div class="chart-cont"> - <div class="chart"> - <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" 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> - <stock v-else class="main-chart" :size="2"></stock> - </div> - <div class="chart-right"> - <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" /> - <div class="charts-des"> - <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%;"/> - </div> - </div> + <acc-desc v-show="curChart===1"></acc-desc> + <train-desc v-show="curChart===2"></train-desc> + <risk-desc v-show="curChart===3"></risk-desc> + <spi-desc v-show="curChart===4"></spi-desc> + <edu-desc v-show="curChart===5"></edu-desc> + <dan-desc v-show="curChart===6"></dan-desc> + <pro-desc v-show="curChart===7"></pro-desc> + <msg-desc v-show="curChart===8" ref="msgRef"/> + <mon-desc v-show="curChart===9"></mon-desc> + <sto-desc v-show="curChart===10"></sto-desc> </div> </template> @@ -60,77 +36,59 @@ import { ElTable } from 'element-plus'; import { FormInstance, FormRules, ElMessage } from 'element-plus'; import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts'; - import { useRoute } from 'vue-router'; + import {useRoute, useRouter} from 'vue-router'; import {hiddenReportApi} from "/@/api/doublePreventSystem/report"; import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts'; import '/@/theme/bigScreen.css' import {useScreenTheme} from "/@/stores/screenTheme" import {storeToRefs} from "pinia"; + import msgDesc from '/@/views/riskWarningSys/warningBigScreen/indexs/components/msg.vue' // 定义接口来定义对象的类型 interface stateType { isScreenfull: boolean; curChart: number | null; - lineColor: Array<string>; - accRef: Object; - trainRef: Object; - riskRef: Object; - spiRef: Object; - eduRef: Object; - danRef: Object; - proRef: Object; - msgRef: Object; - monRef: Object; - stoRef: Object + lineColor: Array<string> } 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')), + msgDesc, 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 msgRef = ref() const screenThemes = useScreenTheme() const { screenTheme } = storeToRefs(screenThemes); const route = useRoute(); + const router = useRouter(); const state = reactive<stateType>({ isScreenfull: false, curChart: null, lineColor: ['#11FEEE'], - accRef: {}, - trainRef: {}, - riskRef: {}, - spiRef: {}, - eduRef: {}, - danRef: {}, - proRef: {}, - msgRef: {}, - monRef: {}, - stoRef: {} }); // 页面载入时执行方法 onMounted(() => { + console.log(msgRef.value,'val') if (route.query.num) { state.curChart = Number(route.query.num) + + if(route.query.num == '8'){ + if(route.query.rowIndex){ + msgRef.value.showDetails(route.query.rowIndex) + }else{ + msgRef.value.showDetails(0) + } + } } getTheme() }); @@ -143,23 +101,23 @@ const onScreenfullClick = () => { if (!screenfull.isEnabled) { ElMessage.warning('暂不不支持全屏'); - return false; + return false } screenfull.toggle(); screenfull.on('change', () => { if (screenfull.isFullscreen) { - state.isScreenfull = true; + state.isScreenfull = true } else { - state.isScreenfull = false; + state.isScreenfull = false } }); }; const getTheme =()=>{ if(screenTheme.value.isDark){ - window.document.getElementById('pageCont').setAttribute( "class", 'dark-page' ); + window.document.getElementById('pageCont').setAttribute( "class", 'dark-page' ) state.lineColor = ['#11FEEE'] }else{ - window.document.getElementById('pageCont').setAttribute( "class", 'light-page' ); + window.document.getElementById('pageCont').setAttribute( "class", 'light-page' ) state.lineColor = ['#333','#ccc'] } } @@ -168,12 +126,15 @@ }) // 返回上一页 const goBack = () => { - window.history.go(-1); + router.push({ + name: "warningScreen" + }); }; return { route, + msgRef, onScreenfullClick, goBack, ...toRefs(state) -- Gitblit v1.9.2