odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

唐润平:显示面板雏形全部完成并优化了第一个风机面板样式

Browse Source
This commit is contained in:
trp
2023-12-09 03:09:53 +08:00
parent e20b7c1002
commit 305a5f9824
5 changed files with 401 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
src/components/content/fanInfo/FanInfo.vue
View File

@@ -121,60 +121,110 @@ const option = {
series: [
{
type: "gauge",
progress: {
show: true,
width: 15,
lineStyle: {
color: "yellow",
},
},
axisLine: {
lineStyle: {
width: 5,
},
},
axisTick: {
show: false,
},
splitLine: {
length: 15,
lineStyle: {
width: 1,
color: "#099",
},
},
axisLabel: {
show: false,
distance: 25,
color: "#999",
fontSize: 20,
},
startAngle: -120,
endAngle: -420,
pointer: {
show: false,
},
anchor: {
show: false,
showAbove: true,
size: 0,
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 10,
borderColor: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#4BB10E", // 0% 处的颜色
},
{
offset: 0.25,
color: "#B1AD0E", // 100% 处的颜色
},
{
offset: 0.75,
color: "#B1880E", // 100% 处的颜色
},
{
offset: 1,
color: "#D77E01", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
color: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#4BB10E", // 0% 处的颜色
},
{
offset: 0.25,
color: "#B1AD0E", // 100% 处的颜色
},
{
offset: 0.75,
color: "#B1880E", // 100% 处的颜色
},
{
offset: 1,
color: "#D77E01", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
borderWidth: 10,
},
},
title: {
show: true,
max: 1000,
splitLine: {
show: false,
},
detail: {
valueAnimation: true,
fontSize: 40,
offsetCenter: [0, "0%"],
formatter: "{value}Hz",
color: "white",
axisTick: {
show: true,
splitNumber: 1,
length: 10,
},
axisLabel: {
show: false,
},
data: [
{
value: 10,
value: 50,
fontSize: 2100,
detail: {
valueAnimation: true,
offsetCenter: ["0%", "0%"],
fontSize: 40,
color: "white",
},
},
],
axisLine: {
lineStyle: {
width: 3,
color: [[1, "#155F7C"]],
},
},
detail: {
width: 100,
height: 14,
fontSize: 26,
color: "inherit",
formatter: "{value}",
},
},
],
};
@@ -182,60 +232,110 @@ const option2 = {
series: [
{
type: "gauge",
progress: {
show: true,
width: 15,
lineStyle: {
color: "yellow",
},
},
axisLine: {
lineStyle: {
width: 5,
},
},
axisTick: {
show: false,
},
splitLine: {
length: 15,
lineStyle: {
width: 1,
color: "#099",
},
},
axisLabel: {
show: false,
distance: 25,
color: "#999",
fontSize: 20,
},
startAngle: -120,
endAngle: -420,
pointer: {
show: false,
},
anchor: {
show: false,
showAbove: true,
size: 0,
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 10,
borderColor: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#4BB10E", // 0% 处的颜色
},
{
offset: 0.25,
color: "#B1AD0E", // 100% 处的颜色
},
{
offset: 0.75,
color: "#B1880E", // 100% 处的颜色
},
{
offset: 1,
color: "#D77E01", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
color: {
type: "linear",
x: 0,
y: 1,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#4BB10E", // 0% 处的颜色
},
{
offset: 0.25,
color: "#B1AD0E", // 100% 处的颜色
},
{
offset: 0.75,
color: "#B1880E", // 100% 处的颜色
},
{
offset: 1,
color: "#D77E01", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
borderWidth: 10,
},
},
title: {
show: true,
max: 1000,
splitLine: {
show: false,
},
detail: {
valueAnimation: true,
fontSize: 40,
offsetCenter: [0, "0%"],
formatter: "{value}Hz",
color: "white",
axisTick: {
show: true,
splitNumber: 1,
length: 10,
},
axisLabel: {
show: false,
},
data: [
{
value: 10,
value: 500,
fontSize: 2100,
detail: {
valueAnimation: true,
offsetCenter: ["0%", "0%"],
fontSize: 40,
color: "white",
},
},
],
axisLine: {
lineStyle: {
width: 3,
color: [[1, "#155F7C"]],
},
},
detail: {
width: 100,
height: 14,
fontSize: 26,
color: "inherit",
formatter: "{value}",
},
},
],
};
@@ -288,7 +388,9 @@ let isSAuto2 = ref("false");
height: 24px;
border: 2px solid #38cafb;
border-radius: 50%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
::v-deep .el-radio__label {
font-size: 28px;
@@ -332,6 +434,19 @@ let isSAuto2 = ref("false");
height: 100%;
width: 30%;
margin: 0px 0px 0px 10px;
position: relative;
}
.echart::after {
content: "Hz";
font-size: 24px;
font-family: MicrosoftYaHei, MicrosoftYaHei;
font-weight: bold;
color: #ffffff;
line-height: 31px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 60%);
}
.fan-name {
width: 39px;