fix:根据ui修改页面 echats图滑动条

This commit is contained in:
zhaohy
2024-08-20 15:56:19 +08:00
parent 400839e865
commit 257716253c
12 changed files with 179 additions and 32 deletions

View File

@@ -98,7 +98,7 @@
<span class="title-name" style="line-height: 32px">{{ `逻辑${index}:` }}</span>
<a-select
v-model:value="infoObject.alarmList[index - 1].logic"
style="width: 110px; margin-left: 12px"
style="width: 110px; margin-left: 16px"
placeholder="请选择逻辑"
:options="logicEnum" />
<span class="title-name" style="line-height: 32px; margin-left: 32px">{{
@@ -133,7 +133,7 @@
margin-left: 16px;
"
@click="deleteAlarmList(index - 1)">
<img style="width: 16px" src="../../../../../src/icon/del.png" />
<img style="width: 17px" src="../../../../../src/icon/del.png" />
</div>
</div>
<div

View File

@@ -144,7 +144,7 @@
margin-left: 16px;
"
@click="deleteAlarmList(index - 1)">
<img style="width: 16px" src="../../../../../src/icon/del.png" />
<img style="width: 17px" src="../../../../../src/icon/del.png" />
</div>
</div>
<div
@@ -549,7 +549,6 @@
line-height: 21px;
color: rgba(51, 51, 51, 1);
margin-bottom: 24px;
margin-left: 24px;
}
.blue-background.ant-switch-checked {
background-color: linear-gradient(

View File

@@ -214,11 +214,27 @@
{
type: 'slider',
// backgroundColor: 'yellow',
// fillerColor: 'yellow',
fillerColor: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: 'rgba(97, 134, 255, 1)',
},
{
offset: 1,
color: 'rgba(36, 186, 255, 1)',
},
],
false,
),
height: 12, // 设置slider的高度为15
start: 0,
end: 100,
right: 11,
right: 13,
left: 10,
bottom: 10,
handleIcon:
@@ -226,9 +242,41 @@
handleSize: '140%', // 放大按钮
// borderColor: 'none',
handleStyle: {
// color: 'red',
// shadowBlur: 6,
// shadowColor: 'yellow',
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: 'rgba(97, 134, 255, 1)',
},
{
offset: 1,
color: 'rgba(36, 186, 255, 1)',
},
],
false,
),
borderWidth: 4,
borderColor: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(255, 255, 255, 1)',
},
{
offset: 1,
color: 'rgba(204, 238, 255, 1)',
},
],
false,
),
shadowOffsetX: 0, // 阴影偏移x轴多少
shadowOffsetY: 0, // 阴影偏移y轴多少
},

View File

@@ -32,7 +32,7 @@
placeholder="请输入异常描述"
:disabled="showEdit"
style="width: 85%"
:autoSize="{ minRows: 4, maxRows: 4 }" />
:autoSize="{ minRows: 9, maxRows: 9 }" />
</a-form-item>
</a-form>
</div>
@@ -158,9 +158,10 @@
logList.value.forEach((item) => {
item.stateName = item.state.label;
item.color = colorMap[item.state.value];
item.bgColor = bgColorMap[item.state];
item.bgColor = bgColorMap[item.state.value];
item.src = 'state-' + item.state.value;
});
console.log(logList.value);
config.value.dataSource = logList.value;
}
});

View File

@@ -213,11 +213,27 @@
{
type: 'slider',
// backgroundColor: 'yellow',
// fillerColor: 'yellow',
fillerColor: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: 'rgba(97, 134, 255, 1)',
},
{
offset: 1,
color: 'rgba(36, 186, 255, 1)',
},
],
false,
),
height: 12, // 设置slider的高度为15
start: 0,
end: 100,
right: 10,
right: 13,
left: 10,
bottom: 10,
handleIcon:
@@ -225,9 +241,41 @@
handleSize: '140%', // 放大按钮
// borderColor: 'none',
handleStyle: {
// color: 'red',
// shadowBlur: 6,
// shadowColor: 'yellow',
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: 'rgba(97, 134, 255, 1)',
},
{
offset: 1,
color: 'rgba(36, 186, 255, 1)',
},
],
false,
),
borderWidth: 4,
borderColor: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(255, 255, 255, 1)',
},
{
offset: 1,
color: 'rgba(204, 238, 255, 1)',
},
],
false,
),
shadowOffsetX: 0, // 阴影偏移x轴多少
shadowOffsetY: 0, // 阴影偏移y轴多少
},

View File

@@ -159,7 +159,7 @@
logList.value.forEach((item) => {
item.stateName = item.state.label;
item.color = colorMap[item.state.value];
item.bgColor = bgColorMap[item.state];
item.bgColor = bgColorMap[item.state.value];
item.src = 'state-' + item.state.value;
});
config.value.dataSource = logList.value;

View File

@@ -201,19 +201,70 @@
{
type: 'slider',
// backgroundColor: 'yellow',
// fillerColor: 'yellow',
fillerColor: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: 'rgba(97, 134, 255, 1)',
},
{
offset: 1,
color: 'rgba(36, 186, 255, 1)',
},
],
false,
),
height: 12, // 设置slider的高度为15
start: 0,
end: 100,
right: 11,
right: 12,
left: 10,
bottom: 10,
bottom: 12,
handleIcon:
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 使用类似 axisPointer 的图标
handleSize: '140%', // 放大按钮
// borderColor: 'none',
handleStyle: {
// color: 'red',
color: new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: 'rgba(97, 134, 255, 1)',
},
{
offset: 1,
color: 'rgba(36, 186, 255, 1)',
},
],
false,
),
borderWidth: 4,
borderColor: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(255, 255, 255, 1)',
},
{
offset: 1,
color: 'rgba(204, 238, 255, 1)',
},
],
false,
),
boxShadow: ' 0px 3px 6px rgba(36, 62, 146, 0.3)',
// shadowBlur: 6,
// shadowColor: 'yellow',
shadowOffsetX: 0, // 阴影偏移x轴多少
@@ -261,9 +312,9 @@
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1,
0,
0,
0,
1,
1,
[
{