From 50d33c74675a9d9eee957a685d9e55b77974f6f9 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期五, 06 一月 2023 16:44:06 +0800
Subject: [PATCH] Merge branch 'master' of https://sinanoaq.cn:8888/r/gtqt
---
src/views/doublePrevent/dpIndex/index.vue | 292 ++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 202 insertions(+), 90 deletions(-)
diff --git a/src/views/doublePrevent/dpIndex/index.vue b/src/views/doublePrevent/dpIndex/index.vue
index c25b2c8..2f864e4 100644
--- a/src/views/doublePrevent/dpIndex/index.vue
+++ b/src/views/doublePrevent/dpIndex/index.vue
@@ -1,12 +1,13 @@
<template>
<div class="home-container">
+ <el-scrollbar height="100%">
<div class="main-cont">
<div class="table-item">
<div class="item-head">
<span>告警风险事件概括</span>
<div @click="toRiskEve">查看更多>></div>
</div>
- <el-table :data="eventData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
+ <el-table :data="eventData" style="width: 100%;height: 90%" :header-cell-style="{ background: '#fafafa' }">
<el-table-column prop="riskEventName" label="风险事件名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="riskUnitName" label="风险分析单元名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="createByUserName" label="创建人" show-overflow-tooltip></el-table-column>
@@ -18,7 +19,7 @@
<span>隐患状态详情</span>
<div @click="toRiskStatus">查看更多>></div>
</div>
- <el-table :data="riskStatusData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
+ <el-table :data="riskStatusData" style="width: 100%;height: 90%" :header-cell-style="{ background: '#fafafa' }">
<el-table-column type="index" label="序号" width="60" />
<!-- <el-table-column prop="reportTime" label="上报时间" show-overflow-tooltip width="170px"></el-table-column>-->
<el-table-column prop="dangerCode" label="隐患名称" show-overflow-tooltip></el-table-column>
@@ -29,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')}">
@@ -43,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">
@@ -83,9 +84,10 @@
<div class="item-head">
<span>隐患等级分布</span>
</div>
- <div id="riskLevel"></div>
+ <div class="riskLevel" :id="riskLevelId"></div>
</div>
</div>
+ </el-scrollbar>
</div>
</template>
@@ -144,6 +146,8 @@
classGroupList: [],
inspectPointAllList: []
});
+ const riskFixId = ref("eChartFix" + Date.now() + Math.random())
+ const riskLevelId = ref("eChartLe" + Date.now() + Math.random())
// 页面载入时执行方法
onMounted(() => {
@@ -198,26 +202,25 @@
// 隐患整改情况
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: {
trigger: 'item'
},
legend: {
- bottom: '10%',
+ bottom: '5%',
left: 'center'
},
series: [
{
- name: 'Access From',
type: 'pie',
radius: ['35%', '60%'],
avoidLabelOverlap: false,
@@ -227,8 +230,21 @@
borderWidth: 2
},
label: {
- show: false,
- position: 'center'
+ alignTo: 'labelLine',
+ formatter: '{name|{b}}\n{value|{c}}',
+ minMargin: 5,
+ edgeDistance: 5,
+ lineHeight: 15,
+ rich: {
+ name: {
+ fontSize: 14,
+ color: '#666'
+ }
+ }
+ },
+ labelLine: {
+ length: 15,
+ maxSurfaceAngle: 80
},
emphasis: {
label: {
@@ -237,9 +253,6 @@
fontWeight: 'bold'
}
},
- labelLine: {
- show: false
- },
data: [
{ value: 1048, name: '整改中' },
{ value: 735, name: '待验收' },
@@ -247,7 +260,7 @@
{ value: 484, name: '超期未整改' },
{ value: 300, name: '已验收' }
],
- center: ['50%','35%']
+ center: ['50%','40%']
}
]
};
@@ -261,26 +274,26 @@
// 隐患整改情况
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: '10%',
+ bottom: '5%',
left: 'center'
},
series: [
{
- name: 'Access From',
type: 'pie',
radius: ['35%', '60%'],
avoidLabelOverlap: false,
@@ -290,8 +303,21 @@
borderWidth: 2
},
label: {
- show: false,
- position: 'center'
+ alignTo: 'labelLine',
+ formatter: '{name|{b}}\n{value|{c}}',
+ minMargin: 5,
+ edgeDistance: 5,
+ lineHeight: 15,
+ rich: {
+ name: {
+ fontSize: 14,
+ color: '#666'
+ }
+ }
+ },
+ labelLine: {
+ length: 15,
+ maxSurfaceAngle: 80
},
emphasis: {
label: {
@@ -300,14 +326,11 @@
fontWeight: 'bold'
}
},
- labelLine: {
- show: false
- },
data: [
{ value: 1048, name: '一般隐患' },
{ value: 235, name: '重大隐患' }
],
- center: ['50%','35%']
+ center: ['50%','40%']
}
]
};
@@ -317,6 +340,9 @@
}
window.addEventListener('resize', myChart.resize);
+ setTimeout(()=>{
+ myChart.resize
+ },500)
}
const toRiskEve = ()=>{
@@ -344,6 +370,8 @@
Refresh,
Plus,
router,
+ riskFixId,
+ riskLevelId,
toRiskEve,
toRiskStatus,
toRevice,
@@ -355,34 +383,130 @@
<style scoped lang="scss">
$homeNavLengh: 8;
- .home-container {
- /*height: calc(100vh - 144px);*/
- height: 100%;
- padding: 20px;
- box-sizing: border-box;
- overflow: hidden;
+
+ @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;
+ span{
+ font-size: 20px;
+ }
+ div{
+ font-size: 16px;
+ }
+ }
+
+ .levelItem{
+ font-size: 16px;
+
+ span{
+ margin-bottom: 10px;
+ font-size: 24px;
+ font-weight: bolder;
+ }
+ }
+ }
+
+ @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;
+ span{
+ font-size: 16px;
+ }
+ div{
+ font-size: 14px;
+ }
+ }
+ .levelItem{
+ font-size: 14px;
+
+ span{
+ margin-bottom: 10px;
+ font-size: 20px;
+ font-weight: bolder;
+ }
+ }
+ }
+
+ @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 {
+
.table-item{
border-radius: 8px;
background: #fff;
- padding: 20px;
+ padding: 15px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ box-sizing: border-box;
.item-head{
display: flex;
align-items: center;
justify-content: space-between;
- height: 30px;
margin-bottom: 20px;
+ border-left: 4px solid #409eff;
+ padding-left: 10px;
span{
- font-size: 20px;
color: #333;
font-weight: bolder;
}
@@ -394,53 +518,53 @@
}
}
}
- #riskFix{
- height: calc(50vh - 80px);
+ .riskFix{
+ height: 300px;
}
- #riskLevel{
- height: calc(50vh - 80px);
+ .riskLevel{
+ height: 300px
}
.deviceTable{
- height: calc((50vh - 100px) / 3 * 2);
+ height: 200px;
}
- .deviceLevel{
- height: calc((50vh - 100px) / 3);
- display: grid;
- grid-gap: 10px;
- grid-template-columns: repeat(4, 1fr);
- align-items: center;
- justify-content: space-between;
-
- .levelItem{
- display: flex;
- margin-top: 20px;
- flex-direction: column;
+ .deviceLevel{
+ width: 100%;
+ height: 100px;
+ display: grid;
+ grid-gap: 10px;
+ grid-template-columns: repeat(4, 1fr);
align-items: center;
- padding: 15px;
- box-sizing: border-box;
- border-radius: 8px;
- color: #fff;
- font-size: 16px;
+ justify-content: space-between;
- span{
- margin-bottom: 10px;
- font-size: 24px;
- font-weight: bolder;
+ .levelItem{
+ display: flex;
+ height: 100%;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ padding: 15px;
+ box-sizing: border-box;
+ border-radius: 8px;
+ color: #fff;
+
+ span{
+ margin-bottom: 10px;
+ font-weight: bolder;
+ }
+ }
+ .red{
+ background: #F56C6C;
+ }
+ .orange{
+ background: #E6A23C;
+ }
+ .green{
+ background: #67C23A;
+ }
+ .blue{
+ background: #409EFF;
}
}
- .red{
- background: #F56C6C;
- }
- .orange{
- background: #E6A23C;
- }
- .green{
- background: #67C23A;
- }
- .blue{
- background: #409EFF;
- }
- }
}
.table-item2{
grid-column-start: 2;
@@ -457,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