lct

Your Name

2022-10-14 596a6831ceb5417e2f4fb71f9e2dd1d2e2bcb6f8

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

@@ -9,19 +9,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>
@@ -49,7 +41,16 @@
            <div v-else>当前应急物资储备情况（总）</div>
            <dv-decoration8 :color="lineColor" :reverse="true" style="width:100%;" />
          </div>
          <div class="des-main">
          <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>
@@ -82,10 +83,9 @@
  interface stateType {
    isScreenfull: boolean;
    curChart: number | null;
    month: number;
    optionList: Array<any>;
    lineColor: Array<string>;
    accidentDesc: Array<any>;
    trainDesc: Object;
  }
  export default defineComponent({
    name: 'warningPage',
@@ -108,54 +108,7 @@
      const state = reactive<stateType>({
        isScreenfull: false,
        curChart: null,
        month: 0,
        lineColor: ['#11FEEE'],
        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
          }
        ],
        accidentDesc:[
          {
            title: '特别重大事故',
@@ -182,7 +135,45 @@
            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
            }
          ]
        }
      });

      // 页面载入时执行方法
@@ -295,25 +286,6 @@
          font-size: 1.25rem;
          color: #fff;
        }
        .selector-3{
          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;
            }
          }
        }
        .main-chart{
          width: 100%;
          height: 100%;
@@ -347,6 +319,7 @@
            color: #11FEEE;

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

            &>div{
              margin-bottom: 2rem;
@@ -433,25 +406,6 @@
          width: 20%;
          font-size: 1.25rem;
          color: #fff;
        }
        .selector-3{
          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;
            }
          }
        }
        .main-chart{
          width: 100%;