xiugai

马宇豪

2024-07-08 20b0ce2db27b64a60de60aee05dedd448099e330

 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)