| | |
| | | fontSize: fontSize(12) |
| | | } |
| | | }, |
| | | tooltip: { |
| | | trigger: 'axis' |
| | | }, |
| | | grid: { |
| | | left: '4%', |
| | | right: '4%', |
| | |
| | | name: 'SPI预警指数值', |
| | | data: [450, 632, 501, 434, 390, 530, 520,750, 632, 401, 634, 590], |
| | | type: 'line', |
| | | triggerLineEvent: true, |
| | | label:{ |
| | | show: true, |
| | | color: '#fff', |
| | |
| | | legend: { |
| | | top: '0', |
| | | left: 'center', |
| | | itemWidth: fontSize(10), |
| | | itemHeight: fontSize(8), |
| | | textStyle:{ |
| | | color: '#fff', |
| | | fontSize: fontSize(11) |
| | |
| | | { value: 484, name: '一般事故' }, |
| | | { value: 300, name: '未遂事故' } |
| | | ], |
| | | center: ['50%','65%'] |
| | | center: ['50%','60%'] |
| | | } |
| | | ] |
| | | }; |
| | |
| | | legend: { |
| | | top: '0', |
| | | left: 'center', |
| | | itemWidth: fontSize(10), |
| | | itemHeight: fontSize(8), |
| | | textStyle:{ |
| | | color: '#fff', |
| | | fontSize: fontSize(11) |
| | |
| | | { value: 484, name: '一般事故' }, |
| | | { value: 300, name: '未遂事故' } |
| | | ], |
| | | center: ['50%','65%'] |
| | | center: ['50%','60%'] |
| | | } |
| | | ] |
| | | }; |
| | |
| | | }, |
| | | color: ['#FAC858','#EE6666'], |
| | | legend: { |
| | | top: '0', |
| | | top: '8%', |
| | | left: 'center', |
| | | itemWidth: fontSize(10), |
| | | itemHeight: fontSize(8), |
| | | textStyle:{ |
| | | color: '#fff', |
| | | fontSize: fontSize(11) |
| | |
| | | }, |
| | | color: ['#FAC858','#EE6666'], |
| | | legend: { |
| | | top: '10%', |
| | | top: '8%', |
| | | left: 'center', |
| | | itemWidth: fontSize(10), |
| | | itemHeight: fontSize(8), |
| | | textStyle:{ |
| | | color: '#fff', |
| | | fontSize: fontSize(11) |
| | |
| | | { value: 35, name: '一般隐患' }, |
| | | { value: 1048, name: '重大隐患' } |
| | | ], |
| | | center: ['50%','60%'] |
| | | center: ['50%','55%'] |
| | | } |
| | | ] |
| | | }; |
| | |
| | | .charts-cont{ |
| | | width: 100%; |
| | | height: 100%; |
| | | padding: 5% 2% 0; |
| | | padding: 2% 2% 0; |
| | | position: relative; |
| | | |
| | | .choose{ |
| | |
| | | interface stateType { |
| | | } |
| | | export default defineComponent({ |
| | | name: 'risk', |
| | | name: 'educate', |
| | | components: {}, |
| | | props:{ |
| | | size: Number |
| | |
| | | option = { |
| | | color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'], |
| | | legend: { |
| | | top: '5%', |
| | | top: '8%', |
| | | left: 'center', |
| | | itemWidth: fontSize(10), |
| | | itemHeight: fontSize(8), |
| | | textStyle:{ |
| | | color: '#fff', |
| | | fontSize: fontSize(11) |
| | |
| | | radar: [ |
| | | { |
| | | indicator: [ |
| | | { text: '设计培训次数' }, |
| | | { text: '培训时间(小时)' }, |
| | | { text: '完成比例(%)' } |
| | | { name: '设计培训次数' }, |
| | | { name: '培训时间(小时)' }, |
| | | { name: '完成比例(%)' } |
| | | ], |
| | | center: ['50%', '60%'], |
| | | radius: fontSize(60), |
| | | radius: fontSize(65), |
| | | startAngle: 90, |
| | | splitNumber: 4, |
| | | shape: 'circle', |
| | |
| | | legend: { |
| | | top: '1%', |
| | | left: 'center', |
| | | itemWidth: fontSize(10), |
| | | itemHeight: fontSize(8), |
| | | textStyle:{ |
| | | color: '#fff', |
| | | fontSize: fontSize(12) |
| | |
| | | legend: { |
| | | top: '1%', |
| | | left: 'center', |
| | | itemWidth: fontSize(10), |
| | | itemHeight: fontSize(8), |
| | | textStyle:{ |
| | | color: '#fff', |
| | | fontSize: fontSize(12) |
| | |
| | | <div class="part-tit"> |
| | | <span>| 隐患等级数量分布</span> |
| | | <div> |
| | | <el-select class="selector" v-model="month" placeholder="Select" size="default"> |
| | | <el-select class="selector" v-model="month" placeholder="Select" :teleported="false" size="default"> |
| | | <el-option |
| | | v-for="item in optionList" |
| | | :key="item.value" |
| | |
| | | <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" |
| | |
| | | |
| | | <style scoped lang="scss"> |
| | | $homeNavLengh: 8; |
| | | ::v-deep(.el-select-dropdown) { |
| | | background-color: transparent !important; |
| | | } |
| | | ::v-deep(.el-select-dropdown__item){ |
| | | background-color: transparent !important; |
| | | } |
| | | |
| | | .container { |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | ::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; |
| | |
| | | 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); |