| | |
| | | </div> |
| | | <div class="chart-box"> |
| | | <span class="train-tip">距上次演练结束 5 天</span> |
| | | <training :size="1"></training> |
| | | <training class="train-chart" :size="1"></training> |
| | | </div> |
| | | </div> |
| | | <div class="left-bottom"> |
| | | <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13> |
| | | <div class="part-tit"> |
| | | <span>| 隐患等级数量分布</span> |
| | | <div> |
| | | <el-select class="selector" v-model="month" placeholder="Select" :teleported="false" size="default"> |
| | | <el-option |
| | | v-for="item in optionList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | <!-- <img @click="jumpPage(3)" src="../../../assets/warningScreen/small-full.png">--> |
| | | <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/> |
| | | </div> |
| | | |
| | | <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/> |
| | | </div> |
| | | <div class="chart-box"> |
| | | <risk :size="1" :month="month"></risk> |
| | | <risk :size="1" :theme="screenTheme.isDark"></risk> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="main-middle"> |
| | | <div class="mid-top"> |
| | | <dv-border-box-11 title="SPI数据分析" :backgroundColor="boxBg" :color="boxBigColor" class="box-bg"></dv-border-box-11> |
| | | <div class="part-tit" style="position: absolute;top: 12%;padding: 0 4%"> |
| | | <el-cascader |
| | | class="spiSe" |
| | | :teleported="false" |
| | | v-model="spiValue" |
| | | :options="spiOptions" |
| | | :props="props" |
| | | :show-all-levels="false" |
| | | @change="handleChange" |
| | | /> |
| | | <!-- <span>SPI数据分析</span>--> |
| | | <!-- <img @click="jumpPage(4)" src="../../../assets/warningScreen/small-full.png">--> |
| | | <div class="part-tit" style="position: absolute;top: 8%;padding: 0 4%"> |
| | | <div></div> |
| | | <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(4)"/> |
| | | </div> |
| | | <div class="chart-box"> |
| | | <spi :size="1"></spi> |
| | | <div class="chart-box" style="top: 60px;height: calc(100% - 70px)"> |
| | | <spi :size="1" :theme="screenTheme.isDark"></spi> |
| | | </div> |
| | | </div> |
| | | <div class="mid-bottom"> |
| | |
| | | boxBigColor: Array<string>; |
| | | isScreenfull: boolean; |
| | | currentTime: string; |
| | | month: number; |
| | | spiValue: number; |
| | | optionList: Array<any>; |
| | | spiOptions: Array<any> |
| | | } |
| | | export default defineComponent({ |
| | |
| | | boxBigColor: [], |
| | | isScreenfull: false, |
| | | currentTime: '', |
| | | month: 0, |
| | | spiValue: 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 |
| | | } |
| | | ], |
| | | spiOptions: [ |
| | | { |
| | | value: 0, |
| | |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | z-index: 9999; |
| | | div{ |
| | | width: 40%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: end; |
| | | } |
| | | |
| | | span{ |
| | | font-size: 1.25rem; |
| | | font-weight: bolder; |
| | | color: #11feee; |
| | | } |
| | | ::v-deep(.el-cascader){ |
| | | width: 25% !important; |
| | | } |
| | | ::v-deep(.el-popper){ |
| | | background-color: rgba(10,31,92,1); |
| | | border: 1px solid rgba(17,254,238,.4); |
| | | color: #11FEEE; |
| | | .el-cascader-node__label{ |
| | | color: #11FEEE; |
| | | } |
| | | .el-icon{ |
| | | color: #11FEEE; |
| | | } |
| | | .el-cascader-node{ |
| | | &:hover{ |
| | | background: #0049af; |
| | | } |
| | | } |
| | | } |
| | | ::v-deep(.el-popper__arrow){ |
| | | &::before{ |
| | | background-color: rgba(10,31,92,.6) !important; |
| | | border: 1px solid rgba(17,254,238,.4); |
| | | } |
| | | } |
| | | ::v-deep(.el-input__wrapper){ |
| | | width: 20%; |
| | | box-shadow: none; |
| | | border: 1px solid rgba(17,254,238,.2); |
| | | background: rgba(10,31,92,.6) !important; |
| | | height: 2.5rem; |
| | | color: #11FEEE; |
| | | |
| | | input{ |
| | | font-size: 1.25rem; |
| | | color: #11FEEE; |
| | | } |
| | | .el-icon{ |
| | | color: #11FEEE; |
| | | } |
| | | } |
| | | .selector{ |
| | | width: calc(100% - 1.25rem); |
| | | margin-right: 0.8rem; |
| | | |
| | | ::v-deep(.el-popper){ |
| | | background-color: rgba(10,31,92,1); |
| | | border: 1px solid rgba(17,254,238,.4); |
| | | color: #11FEEE; |
| | | .el-select-dropdown__item{ |
| | | color: #11FEEE; |
| | | } |
| | | .el-select-dropdown__item.hover{ |
| | | background: #0049af; |
| | | } |
| | | } |
| | | ::v-deep(.el-popper__arrow){ |
| | | &::before{ |
| | | background-color: rgba(10,31,92,.6) !important; |
| | | border: 1px solid rgba(17,254,238,.4); |
| | | } |
| | | } |
| | | ::v-deep(.el-input__wrapper){ |
| | | box-shadow: none; |
| | | border: 1px solid rgba(17,254,238,.2); |
| | | background: rgba(10,31,92,.6) !important; |
| | | height: 1.5rem; |
| | | color: #11FEEE; |
| | | |
| | | input{ |
| | | font-size: 0.8rem; |
| | | color: #11FEEE; |
| | | } |
| | | .el-icon{ |
| | | color: #11FEEE; |
| | | } |
| | | } |
| | | } |
| | | |
| | | img{ |
| | |
| | | } |
| | | } |
| | | .chart-box{ |
| | | position: absolute; |
| | | top: 40px; |
| | | bottom: 0; |
| | | left: 0; |
| | | right: 0; |
| | | width: 100%; |
| | | height: calc(100% - 20px); |
| | | margin-top: 20px; |
| | | height: calc(100% - 50px); |
| | | z-index: 99999; |
| | | .train-tip{ |
| | | display: block; |
| | | font-size: 0.8rem; |
| | | margin-top: 5%; |
| | | margin-left: 2%; |
| | | margin-top: 2%; |
| | | margin-left: 5%; |
| | | color: #fff; |
| | | } |
| | | accident{ |
| | | width: 100%; |
| | | height: 100%; |
| | | height: 1rem; |
| | | } |
| | | |
| | | training{ |
| | | .train-chart{ |
| | | width: 100%; |
| | | height: 100%; |
| | | height: calc(100% - 1rem); |
| | | } |
| | | } |
| | | } |
| | |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | z-index: 9999; |
| | | div{ |
| | | width: 40%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: end; |
| | | } |
| | | span{ |
| | | font-size: 1.25rem; |
| | | font-weight: bolder; |
| | | color: #000; |
| | | } |
| | | ::v-deep(.el-cascader){ |
| | | width: 25% !important; |
| | | } |
| | | ::v-deep(.el-popper){ |
| | | background-color: #fff; |
| | | border: 1px solid #ccc; |
| | | color: #000; |
| | | .el-cascader-node__label{ |
| | | color: #000; |
| | | } |
| | | .el-icon{ |
| | | color: #000; |
| | | } |
| | | .el-cascader-node{ |
| | | &:hover{ |
| | | background: #ccc; |
| | | } |
| | | } |
| | | } |
| | | ::v-deep(.el-popper__arrow){ |
| | | &::before{ |
| | | background-color: #fff !important; |
| | | border: 1px solid #ccc; |
| | | } |
| | | } |
| | | ::v-deep(.el-input__wrapper){ |
| | | width: 20%; |
| | | box-shadow: none; |
| | | border: 1px solid #ccc; |
| | | background: #fff !important; |
| | | height: 2.5rem; |
| | | color: #000; |
| | | |
| | | input{ |
| | | font-size: 1.25rem; |
| | | color: #000; |
| | | } |
| | | .el-icon{ |
| | | color: #000; |
| | | } |
| | | } |
| | | .selector{ |
| | | width: calc(100% - 1.25rem); |
| | | margin-right: 0.8rem; |
| | | |
| | | ::v-deep(.el-popper){ |
| | | background-color: rgba(255,255,255,1); |
| | | border: 1px solid #ccc; |
| | | color: #fff; |
| | | .el-select-dropdown__item{ |
| | | color: #000; |
| | | } |
| | | .el-select-dropdown__item.hover{ |
| | | background: #ccc; |
| | | } |
| | | } |
| | | ::v-deep(.el-popper__arrow){ |
| | | &::before{ |
| | | background-color: rgba(255,255,255,.6) !important; |
| | | border: 1px solid #ccc; |
| | | } |
| | | } |
| | | ::v-deep(.el-input__wrapper){ |
| | | box-shadow: none; |
| | | border: 1px solid #ccc; |
| | | background: #fff !important; |
| | | height: 1.5rem; |
| | | color: #fff; |
| | | |
| | | input{ |
| | | font-size: 0.8rem; |
| | | color: #000; |
| | | } |
| | | .el-icon{ |
| | | color: #000; |
| | | } |
| | | } |
| | | } |
| | | |
| | | img{ |
| | |
| | | } |
| | | } |
| | | .chart-box{ |
| | | position: absolute; |
| | | top: 40px; |
| | | bottom: 0; |
| | | left: 0; |
| | | right: 0; |
| | | width: 100%; |
| | | height: calc(100% - 20px); |
| | | margin-top: 20px; |
| | | height: calc(100% - 50px); |
| | | z-index: 99999; |
| | | .train-tip{ |
| | | display: block; |
| | | font-size: 0.8rem; |
| | | margin-top: 5%; |
| | | margin-left: 2%; |
| | | margin-top: 2%; |
| | | margin-left: 5%; |
| | | color: #333; |
| | | } |
| | | accident{ |
| | | width: 100%; |
| | | height: 100%; |
| | | height: 1rem; |
| | | } |
| | | |
| | | training{ |
| | | .train-chart{ |
| | | width: 100%; |
| | | height: 100%; |
| | | height: calc(100% - 1rem); |
| | | } |
| | | } |
| | | } |