| | |
| | | </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> |
| | |
| | | interface stateType { |
| | | isScreenfull: boolean; |
| | | curChart: number | null; |
| | | month: number; |
| | | optionList: Array<any>; |
| | | lineColor: Array<string>; |
| | | accidentDesc: Array<any>; |
| | | trainDesc: Object; |
| | |
| | | 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: '特别重大事故', |
| | |
| | | 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%; |
| | |
| | | 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%; |