isoftstone/lc_frontend
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI优化

Browse Source
This commit is contained in:
chenlin
2026-01-08 17:42:47 +08:00
parent 7c07d7d269
commit 5066c80e8f
4 changed files with 173 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/Home/Index10.vue
View File

@@ -672,12 +672,14 @@ const riskChartOption = computed<EChartsOption>(() => {
// 隐患管理折线图配置
const hiddenDangerChartOption = computed<EChartsOption>(() => {
// 提取日期和对应的数据
const dates = hiddenDangerTrend.value.map(item => item.date)
const dates = hiddenDangerTrend.value.map(item => item.date).filter(date => date) // 过滤掉空日期
const generalData = hiddenDangerTrend.value.map(item => item.general ?? 0)
const majorData = hiddenDangerTrend.value.map(item => item.major ?? 0)
// 判断是否为空数据
const isEmpty = dates.length === 0 || (generalData.every(v => v === 0) && majorData.every(v => v === 0))
// 判断是否为空数据：只有当原始数据数组为空，或者所有数据值都为0时才认为为空
const totalGeneral = generalData.reduce((sum, v) => sum + v, 0)
const totalMajor = majorData.reduce((sum, v) => sum + v, 0)
const isEmpty = hiddenDangerTrend.value.length === 0 || (totalGeneral === 0 && totalMajor === 0)
// 计算Y轴最大值（向上取整到最近的10的倍数）
const maxValue = isEmpty ? 10 : Math.max(

8
src/views/Home/Index12.vue
View File

@@ -1184,12 +1184,14 @@ const riskChartOption = computed<EChartsOption>(() => {
// 隐患管理折线图配置
const hiddenDangerChartOption = computed<EChartsOption>(() => {
const dates = hiddenDangerTrend.value.map(item => item.date)
const dates = hiddenDangerTrend.value.map(item => item.date).filter(date => date) // 过滤掉空日期
const generalData = hiddenDangerTrend.value.map(item => item.general ?? 0)
const majorData = hiddenDangerTrend.value.map(item => item.major ?? 0)
// 判断是否为空数据
const isEmpty = dates.length === 0 || (generalData.every(v => v === 0) && majorData.every(v => v === 0))
// 判断是否为空数据：只有当原始数据数组为空，或者所有数据值都为0时才认为为空
const totalGeneral = generalData.reduce((sum, v) => sum + v, 0)
const totalMajor = majorData.reduce((sum, v) => sum + v, 0)
const isEmpty = hiddenDangerTrend.value.length === 0 || (totalGeneral === 0 && totalMajor === 0)
return {
tooltip: { trigger: 'axis' },

8
src/views/Home/Index13.vue
View File

@@ -1143,12 +1143,14 @@ const riskChartOption = computed<EChartsOption>(() => {
// 隐患管理折线图配置
const hiddenDangerChartOption = computed<EChartsOption>(() => {
const dates = hiddenDangerTrend.value.map(item => item.date)
const dates = hiddenDangerTrend.value.map(item => item.date).filter(date => date) // 过滤掉空日期
const generalData = hiddenDangerTrend.value.map(item => item.general ?? 0)
const majorData = hiddenDangerTrend.value.map(item => item.major ?? 0)
// 判断是否为空数据
const isEmpty = dates.length === 0 || (generalData.every(v => v === 0) && majorData.every(v => v === 0))
// 判断是否为空数据：只有当原始数据数组为空，或者所有数据值都为0时才认为为空
const totalGeneral = generalData.reduce((sum, v) => sum + v, 0)
const totalMajor = majorData.reduce((sum, v) => sum + v, 0)
const isEmpty = hiddenDangerTrend.value.length === 0 || (totalGeneral === 0 && totalMajor === 0)
return {
tooltip: { trigger: 'axis' },

167
src/views/screen/components/HiddenDangerPanel.vue
View File

@@ -45,23 +45,24 @@
<div class="progress-legend-column">
<div class="legend-item">
<span class="dot blue"></span>
<span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || "--" }}</span>
<span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || "--" }}</span>
</div>
<div class="legend-item">
<span class="dot green"></span>
<span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || "--" }}</span>
<span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || "--" }}</span>
</div>
<div class="legend-item">
<span class="dot yellow"></span>
<span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || "--" }}</span>
<span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || "--" }}</span>
</div>
</div>
</div>
</div>
<div class="safe-wrapper">
<span class="safe-title">
<img width="22" style="margin: 3px 5px 0 0" src="@/assets/images/ybp_icon.png" />
安全指数:<p title="安全指数 = (1-逾期隐患百分比) × 40% + 安全考核通过率 × 10% + 安全培训完成率 × 10%
<img class="safe-icon" src="@/assets/images/ybp_icon.png" />
<span class="safe-title-text">安全指数:</span>
<p class="safe-tooltip" title="安全指数 = (1-逾期隐患百分比) × 40% + 安全考核通过率 × 10% + 安全培训完成率 × 10%
+ 安全类工单完成率 × 20% + 工程类工单完成率 × 20%"></p>
</span>
<span class="pending-count">{{ hiddenDangerData?.safetyIndex || 0 }}</span>
@@ -350,6 +351,28 @@ onMounted(() => {
.center-container {
width: 60vh;
height: 60vh;
.center-content {
.echart-wrapper {
.lf-rt {
.progress-legend-column {
padding: 0 4px;
.legend-item {
.legend-text {
font-size: 0.68rem;
}
}
}
}
}
.safe-wrapper {
.safe-title {
font-size: 0.75rem;
}
}
}
}
}
@@ -375,6 +398,29 @@ onMounted(() => {
font-size: 0.65rem;
}
}
.echart-wrapper {
.lf-rt {
.progress-legend-column {
padding: 0 3px;
.legend-item {
.legend-text {
font-size: 0.65rem;
}
}
}
}
}
.safe-wrapper {
.safe-title {
.safe-icon {
width: 20px;
height: 20px;
}
}
}
}
}
}
@@ -423,16 +469,45 @@ onMounted(() => {
.echart-wrapper {
width: 90%;
.lf-rt .progress-legend .legend-item {
.lf-rt {
.progress-legend .legend-item {
font-size: 0.6rem;
}
.progress-legend-column {
padding: 0 2px;
.legend-item {
gap: 3px;
.legend-text {
font-size: 0.6rem;
}
}
}
}
}
.safe-wrapper {
width: 50%;
flex-direction: column;
gap: 0.5vh;
.safe-title {
font-size: 0.7rem;
margin-left: 0;
justify-content: center;
.safe-icon {
width: 18px;
height: 18px;
margin: 2px 3px 0 0;
}
.safe-tooltip {
width: 15px;
height: 15px;
}
}
.pending-count {
@@ -470,13 +545,43 @@ onMounted(() => {
.echart-wrapper {
width: 95%;
.lf-rt {
.progress-legend-column {
padding: 0 1px;
gap: 6px;
.legend-item {
gap: 2px;
.legend-text {
font-size: 0.55rem;
}
}
}
}
}
.safe-wrapper {
width: 60%;
flex-direction: column;
gap: 0.3vh;
.safe-title {
font-size: 0.65rem;
margin-left: 0;
justify-content: center;
.safe-icon {
width: 16px;
height: 16px;
margin: 2px 2px 0 0;
}
.safe-tooltip {
width: 14px;
height: 14px;
}
}
.pending-count {
@@ -486,8 +591,11 @@ onMounted(() => {
}
}
}
p{width:17px; height:17px; background-color:rgb(125, 125, 152); border-radius:50%; text-align:center; }
p:before{content:'?'; color:yellow; font-weight: bold;}
.safe-tooltip:before {
content: '?';
color: yellow;
font-weight: bold;
}
.center-container {
position: fixed;
top: 55%;
@@ -619,14 +727,19 @@ p:before{content:'?'; color:yellow; font-weight: bold;}
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
align-items: flex-start;
gap: 8px;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
.legend-item {
display: flex;
width: 60%;
width: 100%;
max-width: 100%;
align-items: center;
gap: 4px;
min-width: 0; // 允许 flex 子元素收缩
.legend-text {
overflow: hidden;
@@ -634,6 +747,7 @@ p:before{content:'?'; color:yellow; font-weight: bold;}
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0; // 关键：允许文本收缩
}
}
}
@@ -643,15 +757,47 @@ p:before{content:'?'; color:yellow; font-weight: bold;}
.safe-wrapper {
display: flex;
width: 40%;
min-width: 0; // 允许收缩
height: 20%;
margin-bottom: 5%;
align-items: center;
column-gap: 1vw;
flex-wrap: wrap; // 允许换行
justify-content: center;
.safe-title {
display: flex;
align-items: center;
margin-left: 1vw;
flex-wrap: wrap;
gap: 2px;
min-width: 0;
flex: 1;
max-width: 100%;
.safe-icon {
width: 22px;
height: 22px;
margin: 3px 5px 0 0;
flex-shrink: 0;
}
.safe-title-text {
white-space: nowrap;
flex-shrink: 0;
}
.safe-tooltip {
width: 17px;
height: 17px;
background-color: rgb(125, 125, 152);
border-radius: 50%;
text-align: center;
flex-shrink: 0;
margin: 0;
padding: 0;
display: inline-block;
}
}
.pending-count {
@@ -659,6 +805,7 @@ p:before{content:'?'; color:yellow; font-weight: bold;}
font-size: 1.6rem;
font-weight: 500;
color: yellow;
flex-shrink: 0;
}
}
}