| | |
| | | <div class="item-head"> |
| | | <span>隐患整改情况</span> |
| | | </div> |
| | | <div id="riskFix"></div> |
| | | <div class="riskFix" :id="riskFixId"></div> |
| | | </div> |
| | | <div class="table-item"> |
| | | <div class="item-head"> |
| | |
| | | <div class="item-head"> |
| | | <span>隐患等级分布</span> |
| | | </div> |
| | | <div id="riskLevel"></div> |
| | | <div class="riskLevel" :id="riskLevelId"></div> |
| | | </div> |
| | | </div> |
| | | </el-scrollbar> |
| | |
| | | classGroupList: [], |
| | | inspectPointAllList: [] |
| | | }); |
| | | const riskFixId = ref("eChartFix" + Date.now() + Math.random()) |
| | | const riskLevelId = ref("eChartLe" + Date.now() + Math.random()) |
| | | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | |
| | | |
| | | // 隐患整改情况 |
| | | const initRiskFix =()=>{ |
| | | var dom = document.getElementById('riskFix'); |
| | | var myChart = echarts.init(dom, null, { |
| | | const dom = document.getElementById(riskFixId.value); |
| | | let myChart = echarts.init(dom, null, { |
| | | renderer: 'canvas', |
| | | useDirtyRect: false |
| | | }); |
| | | var app = {}; |
| | | let app = {}; |
| | | |
| | | var option; |
| | | let option; |
| | | |
| | | option = { |
| | | tooltip: { |
| | |
| | | }, |
| | | series: [ |
| | | { |
| | | name: 'Access From', |
| | | type: 'pie', |
| | | radius: ['35%', '60%'], |
| | | avoidLabelOverlap: false, |
| | |
| | | |
| | | // 隐患整改情况 |
| | | const initRiskLevel =()=>{ |
| | | var dom = document.getElementById('riskLevel'); |
| | | var myChart = echarts.init(dom, null, { |
| | | const dom = document.getElementById(riskLevelId.value); |
| | | let myChart = echarts.init(dom, null, { |
| | | renderer: 'canvas', |
| | | useDirtyRect: false |
| | | }); |
| | | var app = {}; |
| | | let app = {}; |
| | | |
| | | var option; |
| | | let option; |
| | | |
| | | option = { |
| | | tooltip: { |
| | | trigger: 'item' |
| | | trigger: 'item', |
| | | formatter: '已完成整改:75%' + '\n\r' + '整改中:19%' + '\n\r' + '暂未整改:6%' |
| | | }, |
| | | legend: { |
| | | bottom: '5%', |
| | |
| | | }, |
| | | series: [ |
| | | { |
| | | name: 'Access From', |
| | | type: 'pie', |
| | | radius: ['35%', '60%'], |
| | | avoidLabelOverlap: false, |
| | |
| | | } |
| | | |
| | | window.addEventListener('resize', myChart.resize); |
| | | setTimeout(()=>{ |
| | | myChart.resize |
| | | },500) |
| | | } |
| | | |
| | | const toRiskEve = ()=>{ |
| | |
| | | Refresh, |
| | | Plus, |
| | | router, |
| | | riskFixId, |
| | | riskLevelId, |
| | | toRiskEve, |
| | | toRiskStatus, |
| | | toRevice, |
| | |
| | | $homeNavLengh: 8; |
| | | |
| | | @media screen and (min-width: 1366px) { |
| | | .main-cont { |
| | | width: 100%; |
| | | height: 100%; |
| | | display: grid; |
| | | margin-bottom: 40px; |
| | | box-sizing: border-box; |
| | | grid-gap: 20px; |
| | | grid-template-columns: repeat(3, 1fr); |
| | | grid-template-rows: repeat(2, 1fr); |
| | | grid-auto-flow: row; |
| | | justify-content: center; |
| | | } |
| | | .item-head{ |
| | | height: 25px; |
| | | line-height: 25px; |
| | |
| | | } |
| | | |
| | | @media screen and (min-width: 1024px) and (max-width: 1366px){ |
| | | .main-cont { |
| | | width: 100%; |
| | | height: 100%; |
| | | display: grid; |
| | | margin-bottom: 40px; |
| | | box-sizing: border-box; |
| | | grid-gap: 15px; |
| | | grid-template-columns: repeat(3, 1fr); |
| | | grid-template-rows: repeat(2, 1fr); |
| | | grid-auto-flow: row; |
| | | justify-content: center; |
| | | } |
| | | .item-head{ |
| | | height: 20px; |
| | | line-height: 20px; |
| | |
| | | } |
| | | |
| | | @media screen and (max-width: 1024px) { |
| | | .main-cont { |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | margin-bottom: 40px; |
| | | box-sizing: border-box; |
| | | justify-content: center; |
| | | } |
| | | .item-head{ |
| | | height: 20px; |
| | | line-height: 20px; |
| | | span{ |
| | | font-size: 13px; |
| | | font-size: 16px; |
| | | } |
| | | div{ |
| | | font-size: 12px; |
| | | font-size: 14px; |
| | | } |
| | | } |
| | | .levelItem{ |
| | |
| | | overflow: hidden; |
| | | |
| | | .main-cont { |
| | | width: 100%; |
| | | height: 100%; |
| | | display: grid; |
| | | margin-bottom: 40px; |
| | | box-sizing: border-box; |
| | | grid-gap: 20px; |
| | | grid-template-columns: repeat(3, 1fr); |
| | | grid-template-rows: repeat(2, 1fr); |
| | | grid-auto-flow: row; |
| | | justify-content: center; |
| | | |
| | | .table-item{ |
| | | border-radius: 8px; |
| | | background: #fff; |
| | |
| | | } |
| | | } |
| | | } |
| | | #riskFix{ |
| | | .riskFix{ |
| | | height: 300px; |
| | | } |
| | | #riskLevel{ |
| | | .riskLevel{ |
| | | height: 300px |
| | | } |
| | | .deviceTable{ |
| | |
| | | .grid-content { |
| | | align-items: center; |
| | | min-height: 36px; |
| | | } |
| | | |
| | | .topInfo { |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | |
| | | & > div { |
| | | white-space: nowrap; |
| | | margin-right: 20px; |
| | | } |
| | | } |
| | | } |
| | | } |