From 9d0fab1637b815722fc1ba6caf4d5c19f6680f92 Mon Sep 17 00:00:00 2001
From: batman <978517621@qq.com>
Date: 星期二, 14 三月 2023 12:19:06 +0800
Subject: [PATCH] 修改页面样式
---
src/views/intellectInspect/inspectIndex/index.vue | 64 ++++++++++-----
src/views/specialWorkSystem/specialIndex/index.vue | 66 +++++++++++-----
src/views/intellectInspect/intelligentLine/index.vue | 15 ++-
src/views/facilityManagement/facilityIndex/index.vue | 76 +++++++++++++-----
4 files changed, 151 insertions(+), 70 deletions(-)
diff --git a/src/views/facilityManagement/facilityIndex/index.vue b/src/views/facilityManagement/facilityIndex/index.vue
index 5f08276..598286f 100644
--- a/src/views/facilityManagement/facilityIndex/index.vue
+++ b/src/views/facilityManagement/facilityIndex/index.vue
@@ -365,28 +365,37 @@
},
series: [
{
- name: 'Access From',
+ name: '当前时间设备状态',
type: 'pie',
radius: '50%',
+ center: ['50%','35%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 1,
borderColor: '#fff',
- borderWidth: 2
+ borderWidth: 1
},
label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: 40,
- fontWeight: 'bold'
- }
+ show: true,
+ position: 'outside',
+ overflow: 'truncate',
+ borderWidth: 0,
+ color: state.themeColor
},
labelLine: {
- show: true
+ show: true, // 显示指示线
+ lineStyle: {
+ color: '#ccc',
+ width: 1,
+ type: 'solid'
+ }
+ },
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ },
},
data: [
{ value: 1048, name: '在用' },
@@ -416,7 +425,17 @@
}
},
yAxis: {
- type: 'value'
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#fafafa',
+ width: 1,
+ type: 'dashed'
+ }
+ },
+ axisLabel:{
+ color: '#ccc'
+ }
},
grid: {
top: '8%',
@@ -425,7 +444,10 @@
series: [
{
data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
- type: 'line'
+ type: 'line',
+ label:{
+ show: true
+ }
}
]
}
@@ -464,9 +486,10 @@
},
series: [
{
- name: 'Access From',
+ name: '按期巡检率',
type: 'pie',
radius: ['40%', '70%'],
+ center: ['50%','48%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 1,
@@ -529,9 +552,10 @@
},
series: [
{
- name: 'Access From',
+ name: '按期保养率',
type: 'pie',
radius: ['40%', '70%'],
+ center: ['50%','48%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 1,
@@ -594,9 +618,10 @@
},
series: [
{
- name: 'Access From',
+ name: '隐患销号率',
type: 'pie',
radius: ['40%', '70%'],
+ center: ['50%','48%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 1,
@@ -1063,13 +1088,18 @@
.full{
position:fixed;
- background: #fff;
- border-radius: 17px;
+ background: rgba(0,0,0,.2);
+ border: 1px solid rgba(54, 252, 252, .6);
+ border-radius: 17px 1px 1px 17px;
box-shadow: 3px 3px 12px rgba(0,0,0,.2);
- height: 34px;
- line-height: 34px;
- top: 0;
- right: 20px;
+ height: 32px;
+ line-height: 30px;
+ top: 10px;
+ right: 2px;
+ display: flex;
+ justify-content: center;
+ backdrop-filter: blur(2px);
+ z-index: 99999;
}
.topChart{
.chart-item{
diff --git a/src/views/intellectInspect/inspectIndex/index.vue b/src/views/intellectInspect/inspectIndex/index.vue
index 19a20c4..be79359 100644
--- a/src/views/intellectInspect/inspectIndex/index.vue
+++ b/src/views/intellectInspect/inspectIndex/index.vue
@@ -428,8 +428,7 @@
padding:[1,1,1,0],
textStyle: {
// 设置默认的文字颜色
- color: state.themeColor,
- fontSize: 12
+ color: state.themeColor
},
},
grid: {
@@ -453,7 +452,17 @@
}
},
yAxis: {
- type: 'value'
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#fafafa',
+ width: 1,
+ type: 'dashed'
+ }
+ },
+ axisLabel:{
+ color: '#ccc'
+ }
},
series: [
{
@@ -519,7 +528,7 @@
textStyle: {
// 设置默认的文字颜色
color: state.themeColor,
- fontSize: 12
+ // fontSize: 12
},
itemStyle: {
borderWidth: 0 // 设置图例边框宽度为0
@@ -534,21 +543,29 @@
itemStyle: {
borderRadius: 1,
borderColor: '#fff',
- borderWidth: 2
+ borderWidth: 1
},
label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: 40,
- fontWeight: 'bold'
- }
+ show: true,
+ position: 'outside',
+ overflow: 'truncate',
+ borderWidth: 0,
+ color: state.themeColor
},
labelLine: {
- show: true
+ show: true, // 显示指示线
+ lineStyle: {
+ color: '#ccc',
+ width: 1,
+ type: 'solid'
+ }
+ },
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ },
},
data: [
{ value: 1048, name: '区域1' },
@@ -938,13 +955,18 @@
.full{
position:fixed;
- background: #fff;
- border-radius: 17px;
+ background: rgba(0,0,0,.2);
+ border: 1px solid rgba(54, 252, 252, .6);
+ border-radius: 17px 1px 1px 17px;
box-shadow: 3px 3px 12px rgba(0,0,0,.2);
- height: 34px;
- line-height: 34px;
- top: 0;
- right: 20px;
+ height: 32px;
+ line-height: 30px;
+ top: 10px;
+ right: 2px;
+ display: flex;
+ justify-content: center;
+ backdrop-filter: blur(2px);
+ z-index: 99999;
}
.topChart{
.chart-item{
diff --git a/src/views/intellectInspect/intelligentLine/index.vue b/src/views/intellectInspect/intelligentLine/index.vue
index 4948afa..db88ff5 100644
--- a/src/views/intellectInspect/intelligentLine/index.vue
+++ b/src/views/intellectInspect/intelligentLine/index.vue
@@ -423,16 +423,17 @@
div {
margin-bottom: 5px;
+ display: flex;
+ align-items: flex-start;
&:last-of-type {
margin-bottom: 0;
}
span {
- display: inline-block;
- white-space: nowrap;
width: 50%;
font-size: 13px;
color: #fff;
text-align: left;
+ word-break: break-all;
&:first-of-type {
text-align: right;
@@ -633,16 +634,17 @@
div {
width: 100%;
margin-bottom: 5px;
+ display: flex;
+ align-items: flex-start;
&:last-of-type {
margin-bottom: 0;
}
span {
- display: inline-block;
- white-space: nowrap;
width: 50%;
font-size: 13px;
color: #fff;
text-align: left;
+ word-break: break-all;
&:first-of-type {
text-align: right;
@@ -842,16 +844,17 @@
div {
width: 100%;
margin-bottom: 2px;
+ display: flex;
+ align-items: flex-start;
&:last-of-type {
margin-bottom: 0;
}
span {
width: 50%;
- display: inline-block;
- white-space: nowrap;
font-size: 12px;
color: #fff;
text-align: left;
+ word-break: break-all;
&:first-of-type {
text-align: right;
diff --git a/src/views/specialWorkSystem/specialIndex/index.vue b/src/views/specialWorkSystem/specialIndex/index.vue
index 0bd442d..81d7ae6 100644
--- a/src/views/specialWorkSystem/specialIndex/index.vue
+++ b/src/views/specialWorkSystem/specialIndex/index.vue
@@ -623,7 +623,7 @@
textStyle: {
// 设置默认的文字颜色
color: state.themeColor,
- fontSize: 12
+ // fontSize: 12
},
itemStyle: {
borderWidth: 0 // 设置图例边框宽度为0
@@ -638,21 +638,29 @@
itemStyle: {
borderRadius: 1,
borderColor: '#fff',
- borderWidth: 2
+ borderWidth: 1
},
label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: 40,
- fontWeight: 'bold'
- }
+ show: true,
+ position: 'outside',
+ overflow: 'truncate',
+ borderWidth: 0,
+ color: state.themeColor
},
labelLine: {
- show: true
+ show: true, // 显示指示线
+ lineStyle: {
+ color: '#ccc',
+ width: 1,
+ type: 'solid'
+ }
+ },
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ },
},
data: [
{ value: 1048, name: '动火作业' },
@@ -735,7 +743,17 @@
}
},
yAxis: {
- type: 'value'
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#fafafa',
+ width: 1,
+ type: 'dashed'
+ }
+ },
+ axisLabel:{
+ color: '#ccc'
+ }
},
grid: {
top: '8%',
@@ -744,7 +762,10 @@
series: [
{
data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
- type: 'line'
+ type: 'line',
+ label:{
+ show: true
+ }
}
]
}
@@ -1417,13 +1438,18 @@
.full{
position:fixed;
- background: #fff;
- border-radius: 17px;
+ background: rgba(0,0,0,.2);
+ border: 1px solid rgba(54, 252, 252, .6);
+ border-radius: 17px 1px 1px 17px;
box-shadow: 3px 3px 12px rgba(0,0,0,.2);
- height: 34px;
- line-height: 34px;
- top: 0;
- right: 20px;
+ height: 32px;
+ line-height: 30px;
+ top: 10px;
+ right: 2px;
+ display: flex;
+ justify-content: center;
+ backdrop-filter: blur(2px);
+ z-index: 99999;
}
.topChart{
.chart-item{
--
Gitblit v1.9.2