Default Changelist

马宇豪

2023-03-22 22bf644b3fc85763be3ad0c5e348d2bee38e2444

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

@@ -1,41 +1,44 @@
<template>
  <div class="com-page">
    <div class="btns" @click="goBack()">
      返回首页
  <div id="pageCont" class="dark-page">
    <div class="btns">
      <dv-decoration-11 :color="lineColor" @click="goBack()">
        <div color-green font-600 bg="~ dark/0">
          返回
        </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 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">
        <div v-show="curChart===2" class="selector-2">距上次演练结束5天</div>
        <el-select v-show="curChart===3" class="selector-3" v-model="month" placeholder="Select" size="default">
          <el-option
                  v-for="item in optionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
          />
        </el-select>
        <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.5"></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>
        <stock v-else class="main-chart" :size="2"></stock>
      </div>
      <div class="chart-right">
        <dv-decoration-10 :color="['#11FEEE']" style="width:100%;height:5%;" />
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;" />
        <div class="charts-des">
          <div class="">

          </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="['#11FEEE']" style="width:100%;height:5%;" />
        <dv-decoration-10 :color="lineColor" style="width:100%;height:5%;"/>
      </div>
    </div>
  </div>
@@ -43,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';
@@ -51,80 +64,67 @@
  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";

  // 定义接口来定义对象的类型
  interface stateType {
    isScreenfull: boolean;
    curChart: number | null;
    month: number;
    optionList: Array<any>
    lineColor: Array<string>;
    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()
      const { screenTheme } = storeToRefs(screenThemes);
      const route = useRoute();
      const state = reactive<stateType>({
        isScreenfull: false,
        curChart: null,
        month: 0,
        optionList: [
          {
            label: '年度',
            value: 0
          },
          {
            label: '一月',
            value: 1
          },
          {
            label: '二月',
            value: 2
          },
          {
            label: '三月',
            value: 3
          },
          {
            label: '四月',
            value: 4
          },
          {
            label: '五月',
            value: 5
          },
          {
            label: '六月',
            value: 6
          },
          {
            label: '七月',
            value: 7
          },
          {
            label: '八月',
            value: 8
          },
          {
            label: '九月',
            value: 9
          },
          {
            label: '十月',
            value: 10
          }
        ]
        lineColor: ['#11FEEE'],
        accRef: {},
        trainRef: {},
        riskRef: {},
        spiRef: {},
        eduRef: {},
        danRef: {},
        proRef: {},
        msgRef: {},
        monRef: {},
        stoRef: {}
      });

      // 页面载入时执行方法
@@ -132,8 +132,12 @@
        if (route.query.num) {
          state.curChart = Number(route.query.num)
        }
        getTheme()
      });

      watchEffect(() => {

      })

      // 全屏
      const onScreenfullClick = () => {
@@ -150,7 +154,18 @@
          }
        });
      };
      const getTheme =()=>{
        if(screenTheme.value.isDark){
          window.document.getElementById('pageCont').setAttribute( "class", 'dark-page' );
          state.lineColor = ['#11FEEE']
        }else{
          window.document.getElementById('pageCont').setAttribute( "class", 'light-page' );
          state.lineColor = ['#333','#ccc']
        }
      }
      watchEffect(() => {

      })
      // 返回上一页
      const goBack = () => {
        window.history.go(-1);
@@ -168,7 +183,7 @@
</script>

<style scoped lang="scss">
  .com-page{
  .dark-page{
    width: 100%;
    height: 100%;
    border:1px #5a5959 solid;
@@ -176,13 +191,11 @@
    padding: 4%;
    .btns{
      position: fixed;
      width: 8%;
      height: 6%;
      right: 5%;
      top: 20px;
      top: 1.25rem;
      font-size: 1.125rem;
      padding: 10px 15px;
      box-sizing: border-box;
      border: 1px solid rgb(0, 208, 206);
      border-radius: 10px;
      color: rgb(17, 254, 238);
      cursor: pointer;
    }
@@ -230,24 +243,126 @@
          font-size: 1.25rem;
          color: #fff;
        }
        .selector-3{
        .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%;

          .des-tit{
            width: 100%;
            &>div{
              font-size: 1.5rem;
              height: 2.2rem;
              line-height: 2.2rem;
              text-align: center;
              font-weight: bolder;
              color: #11FEEE;
            }
          }
          .des-main{
            width: 100%;
            height: calc(96% - 2.2rem);
            padding: 0 2%;
            overflow: auto;
            color: #11FEEE;

            &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
            &::scrollbar { width: 0; height: 0; color: transparent; }

            &>div{
              margin-bottom: 2rem;
              &>h4{
                font-size: 1.25rem;
                display: flex;
                align-items: center;

                span{
                  margin-right: 10px;
                }
                &:first-of-type{
                  margin-bottom: 10px;
                }
              }

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

    }
  }
  .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(100% - 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%;

          ::v-deep(.el-input__wrapper){
            background: none !important;
            box-shadow: none;
            color: #11FEEE;

            input{
              color: #11FEEE;
            }
            .el-icon{
              color: #11FEEE;
            }
          }
          font-size: 1.25rem;
          color: #fff;
        }
        .main-chart{
          width: 100%;
@@ -259,8 +374,51 @@
        height: 100%;
        .charts-des{
          height: 90%;
          background: url("../../../../assets/warningScreen/pagebg-r.png") no-repeat center;
          padding: 4%;
          background: url("../../../../assets/warningScreen/pagebg-r-light.png") no-repeat center;
          background-size: 100% 100%;

          .des-tit{
            width: 100%;
            &>div{
              font-size: 1.5rem;
              height: 2.2rem;
              line-height: 2.2rem;
              text-align: center;
              font-weight: bolder;
              color: #333;
            }
          }
          .des-main{
            width: 100%;
            height: calc(96% - 2.2rem);
            padding: 0 2%;
            overflow: auto;
            color: #333;

            &::-webkit-scrollbar { width: 0; height: 0; color: transparent; }

            &>div{
              margin-bottom: 2rem;
              &>h4{
                font-size: 1.25rem;
                display: flex;
                align-items: center;

                span{
                  margin-right: 10px;
                }
                &:first-of-type{
                  margin-bottom: 10px;
                }
              }

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