From cefcb88c6cd0690052e503d5f1c943cb7f8a03cb Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期三, 30 十一月 2022 09:18:32 +0800
Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt
---
src/views/doublePrevent/dpIndex/index.vue | 117 +++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 79 insertions(+), 38 deletions(-)
diff --git a/src/views/doublePrevent/dpIndex/index.vue b/src/views/doublePrevent/dpIndex/index.vue
index 74820af..b8e5bf0 100644
--- a/src/views/doublePrevent/dpIndex/index.vue
+++ b/src/views/doublePrevent/dpIndex/index.vue
@@ -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,
@@ -379,6 +385,18 @@
$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;
@@ -401,7 +419,19 @@
}
}
- @media screen and (max-width: 1366px){
+ @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;
@@ -422,22 +452,44 @@
}
}
}
+
+ @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: 16px;
+ }
+ div{
+ font-size: 14px;
+ }
+ }
+ .levelItem{
+ font-size: 12px;
+
+ span{
+ margin-bottom: 10px;
+ font-size: 16px;
+ font-weight: bolder;
+ }
+ }
+ }
.home-container {
height: 100%;
box-sizing: border-box;
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;
@@ -445,6 +497,7 @@
display: flex;
flex-direction: column;
justify-content: space-between;
+ box-sizing: border-box;
.item-head{
display: flex;
@@ -465,10 +518,10 @@
}
}
}
- #riskFix{
+ .riskFix{
height: 300px;
}
- #riskLevel{
+ .riskLevel{
height: 300px
}
.deviceTable{
@@ -528,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