From d0bec404f2c22ca04e8592f1a2ba0b39eab0be2f Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期一, 22 五月 2023 09:37:03 +0800 Subject: [PATCH] Default Changelist --- src/views/doublePrevent/dpIndex/index.vue | 61 +++++++++++++----------------- 1 files changed, 26 insertions(+), 35 deletions(-) diff --git a/src/views/doublePrevent/dpIndex/index.vue b/src/views/doublePrevent/dpIndex/index.vue index 89dd7b5..2f864e4 100644 --- a/src/views/doublePrevent/dpIndex/index.vue +++ b/src/views/doublePrevent/dpIndex/index.vue @@ -30,7 +30,7 @@ </div> </template> </el-table-column> - <el-table-column prop="reportTime" label="上报时间" show-overflow-tooltip></el-table-column> + <el-table-column prop="reportTime" label="上报时间" show-overflow-tooltip align="center"></el-table-column> <el-table-column prop="dangerStatus" label="隐患状态" show-overflow-tooltip> <template #default="scope"> <div :style="{color: scope.row.dangerStatus==0 || scope.row.dangerStatus==1 ?'#67C23A':(scope.row.dangerStatus==2 || scope.row.dangerStatus==3?'#F56C6C':'#409EFF')}"> @@ -44,7 +44,7 @@ <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"> @@ -84,7 +84,7 @@ <div class="item-head"> <span>隐患等级分布</span> </div> - <div id="riskLevel"></div> + <div class="riskLevel" :id="riskLevelId"></div> </div> </div> </el-scrollbar> @@ -146,6 +146,8 @@ classGroupList: [], inspectPointAllList: [] }); + const riskFixId = ref("eChartFix" + Date.now() + Math.random()) + const riskLevelId = ref("eChartLe" + Date.now() + Math.random()) // 页面载入时执行方法 onMounted(() => { @@ -200,14 +202,14 @@ // 隐患整改情况 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: { @@ -219,7 +221,6 @@ }, series: [ { - name: 'Access From', type: 'pie', radius: ['35%', '60%'], avoidLabelOverlap: false, @@ -273,18 +274,19 @@ // 隐患整改情况 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%', @@ -292,7 +294,6 @@ }, series: [ { - name: 'Access From', type: 'pie', radius: ['35%', '60%'], avoidLabelOverlap: false, @@ -339,6 +340,9 @@ } window.addEventListener('resize', myChart.resize); + setTimeout(()=>{ + myChart.resize + },500) } const toRiskEve = ()=>{ @@ -366,6 +370,8 @@ Refresh, Plus, router, + riskFixId, + riskLevelId, toRiskEve, toRiskStatus, toRevice, @@ -451,23 +457,20 @@ .main-cont { width: 100%; height: 100%; - display: grid; + display: flex; + flex-direction: column; margin-bottom: 40px; box-sizing: border-box; - grid-gap: 10px; - 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; span{ - font-size: 13px; + font-size: 16px; } div{ - font-size: 12px; + font-size: 14px; } } .levelItem{ @@ -515,10 +518,10 @@ } } } - #riskFix{ + .riskFix{ height: 300px; } - #riskLevel{ + .riskLevel{ height: 300px } .deviceTable{ @@ -578,18 +581,6 @@ .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; - } } } } -- Gitblit v1.9.2