xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

优化监控中心前台样式

Browse Source
This commit is contained in:
fks-yangshouda
2024-09-02 15:49:37 +08:00
parent 3aca13f9bb
commit 88a8837876
9 changed files with 301 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
View File

@@ -15,7 +15,7 @@
">
<div style="display: flex">
<ns-icon name="zongheshuju" size="30" style="margin-right: 3px" />
<span>设备状态</span>
<span style="font-weight: bold">设备状态</span>
</div>
<div style="width: 100%; height: 100%; padding-left: 10%; padding-right: 10%">
@@ -73,7 +73,7 @@
">
<div style="display: flex">
<ns-icon name="zongheshuju" size="30" style="margin-right: 3px" />
<div style="height: 10%">平均值</div>
<div style="height: 10%; font-weight: bold">平均值</div>
</div>
<div style="display: flex; flex-wrap: wrap; width: 100%; height: 92%">
@@ -144,7 +144,7 @@
">
<div style="width: 100%; display: flex; align-items: center">
<ns-icon name="zongheshuju" size="30" style="margin-right: 3px; margin-top: 8px" />
<div style="width: 20%">环境指数分析</div>
<div style="width: 20%; font-weight: bold">环境指数分析</div>
<div style="width: 80%; float: right; padding-right: 40px">
<a-select
v-model:value="typeValue"
@@ -812,24 +812,110 @@
lineHeight: 20,
},
},
// dataZoom: [
// {
// show: true,
// type: 'slider',
// zoomLock: true,
// startValue: 0, // 从头开始。
// endValue: 23,
// bottom: 20,
// height: 10,
// showDetail: false,
// },
// {
// show: true,
// type: 'inside',
// xAxisIndex: 0,
// zoomOnMouseWheel: false, // 滚轮是否触发缩放
// moveOnMouseMove: true, // 鼠标滚轮触发滚动
// moveOnMouseWheel: true,
// },
// ],
//滑块样式
dataZoom: [
{
show: true,
type: 'slider',
zoomLock: true,
// backgroundColor: '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,
startValue: 0, // 从头开始。
endValue: 23,
bottom: 20,
height: 10,
showDetail: false,
},
{
show: true,
type: 'inside',
xAxisIndex: 0,
zoomOnMouseWheel: false, // 滚轮是否触发缩放
moveOnMouseMove: true, // 鼠标滚轮触发滚动
moveOnMouseWheel: true,
right: 60,
left: 60,
bottom: 10,
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: 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轴多少
},
// 显示的label的格式化器
// 20050101 变为 2005\n0101
// labelFormatter: function (index, value) {
// const year = value.slice(0, 4);
// const date = value.slice(4);
// return year + '\n' + date;
// },
// textStyle: {
// fontStyle: 'italic', // 设置字体倾斜
// },
// showDataShadow: false, // 隐藏数据阴影
},
],
visualMap: {

32
hx-ai-intelligent/src/view/monitor/environmentMonitor/averageData/index.vue
View File

@@ -1,7 +1,7 @@
<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
<!-- <a-spin :spinning="loading"> -->
<div style="background: #ffffff; height: 95%; position: relative">
<div style="background: #ffffff; height: 95%; position: relative; overflow-y: auto">
<a-spin :spinning="loading">
<a-table
:columns="tableColumns"
@@ -13,9 +13,10 @@
<div
style="display: flex; align-items: center; justify-content: space-between; width: 100%">
<div style="display: flex; align-items: center; width: 85%">
<div style="width: 10%"
><ns-icon name="title" size="11" style="margin-right: 3px" />数据报表</div
>
<div style="width: 10%">
<!-- <ns-icon name="title" size="11" style="margin-right: 3px" /> -->
<span class="title">数据报表</span>
</div>
<a-select
v-model:value="frequencyValue"
@@ -175,6 +176,8 @@
startDate.value = year + '-' + month + '-' + day;
endDate.value = year + '-' + month + '-' + day;
}
tableColumns.value = [];
tableColumns.value.push(...tableColumnsA);
http
.post(environmentMonitor.getDeviceAveragesByRate, {
orgId: orgId.value,
@@ -253,4 +256,25 @@
/* ::v-deep .ant-table-title + .ant-table-container table > thead > tr:first-child th:last-child {
display: none !important;
} */
.title {
text-align: left;
height: 32px;
line-height: 32px;
font-weight: bold;
user-select: text;
position: relative;
padding-left: 9px;
}
.title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 13px;
width: 3px;
border-radius: 1px;
background-color: #2778ff;
}
</style>

28
hx-ai-intelligent/src/view/monitor/environmentMonitor/historyData/index.vue
View File

@@ -19,9 +19,10 @@
border-top: 0 !important;
">
<div style="display: flex; align-items: center; width: 85%">
<div style="width: 10%"
><ns-icon name="title" size="11" style="margin-right: 3px" />数据报表</div
>
<div style="width: 10%">
<!-- <ns-icon name="title" size="11" style="margin-right: 3px" /> -->
<span class="title">数据报表</span>
</div>
<a-select
v-model:value="typeValue"
placeholder="请选择环境参数"
@@ -324,7 +325,6 @@
});
}
x.value = 360 + headerList.length * 60;
debugger;
let columnA: any[] = [...tableColumnsA];
columnA.push(...tableColumnsB);
tableColumns.value = columnA;
@@ -406,4 +406,24 @@
/* ::v-deep .ant-table-title + .ant-table-container table > thead > tr:first-child th:last-child {
display: none !important;
} */
.title {
text-align: left;
height: 32px;
line-height: 32px;
font-weight: bold;
user-select: text;
position: relative;
padding-left: 9px;
}
.title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 13px;
width: 3px;
border-radius: 1px;
background-color: #2778ff;
}
</style>