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-08-15 15:34:50 +08:00
parent 7e97118634
commit a47f8ae50f
9 changed files with 147 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
View File

@@ -1,18 +1,25 @@
<!-- eslint-disable vue/multi-word-component-names -->
<template>
<a-row type="flex" style="display: flex; position: relative">
<a-row type="flex" style="display: flex; position: relative; background: #f1f2f6">
<a-col :span="4">
<div style="padding: 0 20px; width: 100%; height: 100%">
<div style="width: 100%; height: 100%">
<tree ref="treeRef" />
</div>
</a-col>
<a-col :span="20">
<div style="width: 100%; height: 100%">
<div
style="
width: 98%;
height: 100%;
border-radius: 10px;
background: #ffffff;
margin-left: 1.5%;
">
<div class="ns-right-title">
<span><ns-icon name="title" size="11" style="margin-right: 3px" />历史数据</span>
<div class="button">
<ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
<ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
<ns-icon :name="iconName" size="15" style="margin-right: 10px" @click="change" />
</div>
</div>
<graph ref="graphRef" v-if="isGraph" />

12
hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
View File

@@ -33,7 +33,7 @@
placeholder="请选择点位"
:style="{
top: '50px',
left: `${divWidth + 40}px`,
left: `${divWidth + 55}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
@@ -44,7 +44,7 @@
placeholder="请选择频率"
:style="{
top: '50px',
left: `${divWidth * 2 + 50}px`,
left: `${divWidth * 2 + 65}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
@@ -58,7 +58,7 @@
@calendarChange="onCalendarChange"
:style="{
top: '50px',
left: `${divWidth * 3 + 60}px`,
left: `${divWidth * 3 + 75}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
@@ -68,7 +68,7 @@
type="primary"
:style="{
top: '50px',
left: `${divWidth * 4 + 70}px`,
left: `${divWidth * 4 + 85}px`,
zIndex: 9,
position: 'absolute',
}"
@@ -390,6 +390,10 @@
}
.parent-container {
// position: relative;
border-radius: 10px;
background: #ffffff;
padding-left: 10px;
padding-right: 10px;
height: 100%;
}

68
hx-ai-intelligent/src/view/monitor/energyMonitor/analysisGraph/index.vue
View File

@@ -1,9 +1,10 @@
<template>
<a-row type="flex" style="height: 90%">
<a-row type="flex" style="height: 100%">
<a-col :span="8" style="height: 100%">
<div
style="
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5); /* 灰色阴影 */
box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
border-radius: 10px;
width: 98%;
height: 96%;
margin: 2%;
@@ -32,7 +33,8 @@
style="
width: 98%;
height: 38%;
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
border-radius: 10px;
margin: 1%;
"></div>
<div
@@ -40,7 +42,8 @@
style="
width: 98%;
height: 57%;
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
border-radius: 10px;
margin: 1%;
"></div>
</a-col>
@@ -242,7 +245,9 @@
var seriesdata = [];
var dateX = [];
// var legendList: string | any[] = [];
let sum = 0;
for (let i = 0; i < data.value.length; i++) {
sum += data.value[i].value;
dateX.push(data.value[i].name);
seriesdata.push({
@@ -262,7 +267,7 @@
clockwise: '10',
// hoverAnimation: true,
// 圆环内径和外径
radius: ['70%', '90%'],
radius: ['60%', '80%'],
center: ['30%', '50%'], // 调整环形图的位置，百分比表示相对于容器的宽高
// 显示折线
labelLine: {
@@ -294,6 +299,29 @@
tooltip: {
trigger: 'item',
},
graphic: [
{
type: 'text',
left: '28%',
top: '33%',
style: {
text: '总计',
fill: '#000',
fontSize: 14,
},
},
{
type: 'text',
left: sum > 100 ? '24%' : '30%',
top: '50%',
style: {
text: sum,
fill: '#000',
fontSize: 30,
fontWeight: 700,
},
},
],
// 图例
legend: {
@@ -334,7 +362,9 @@
chartRight1.on('click', function (params) {
// 控制台输出数据的名称
console.log(params.name + ' 被点击了');
drawRight2(params);
if (params.name && params.name != '') {
drawRight2(params);
}
});
}
};
@@ -360,18 +390,18 @@
});
const option = {
// 图例
legend: {
data: [
{ name: '对比值', icon: 'rect' }, // 对比值使用矩形图标
{
name: '参考线',
icon: 'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z',
}, // 参考线使用自定义路径图标，只显示线条
],
orient: 'horizontal',
bottom: 10,
left: 60,
},
// legend: {
// data: [
// { name: '对比值', icon: 'rect' }, // 对比值使用矩形图标
// {
// name: '参考线',
// icon: 'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z',
// }, // 参考线使用自定义路径图标，只显示线条
// ],
// orient: 'horizontal',
// bottom: 10,
// left: 60,
// },
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -409,7 +439,7 @@
zoomLock: true,
startValue: 0, // 从头开始。
endValue: 5,
bottom: '0%',
bottom: 20,
height: 10,
showDetail: false,
},

21
hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div ref="graphGraphchart" style="width: 100%; height: 80%"></div>
<div ref="graphGraphchart" style="width: 100%; height: 100%"></div>
</template>
<script lang="ts">
@@ -77,6 +77,10 @@
legendList.push(data.value[i].name);
}
const option = {
grid: {
top: 40,
bottom: 50,
},
legend: {
data: legendList,
orient: 'horizontal',
@@ -107,6 +111,21 @@
type: 'value',
},
series: seriesList,
// 使用 ECharts 的 graphic 组件来展示无数据的提示
graphic:
data.value.length === 0
? {
type: 'text',
left: 'center',
top: 'middle',
style: {
text: '无数据',
fontSize: 20,
fontWeight: 'bold',
fill: '#999',
},
}
: null,
};
chartInstance = echarts.init(graphGraphchart.value);

38
hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
View File

@@ -1,13 +1,20 @@
<!-- eslint-disable vue/multi-word-component-names -->
<template>
<a-row type="flex" style="height: 92%; display: flex; position: relative">
<a-row type="flex" style="height: 100%; display: flex; position: relative; background: #f1f2f6">
<a-col :span="4">
<div style="padding: 0 20px; width: 100%; height: 100%">
<div style="width: 100%; height: 100%">
<tree ref="treeRef" />
</div>
</a-col>
<a-col :span="20">
<div style="width: 100%; height: 100%">
<div
style="
width: 98%;
height: 100%;
border-radius: 10px;
background: #ffffff;
margin-left: 1.5%;
">
<div style="height: 22%">
<div class="ns-right-title">
<a-tabs
@@ -16,6 +23,9 @@
@change="changeActive">
<a-tab-pane key="1" tab="图表" />
<a-tab-pane key="2" tab="分析" />
<!-- <template #renderTabBar="{ DefaultTabBar, ...props }">
<component :is="DefaultTabBar" v-bind="props" :style="{ opacity: 0.5 }" />
</template> -->
</a-tabs>
<div class="button">
<ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
@@ -27,11 +37,11 @@
>
</div>
<div v-if="activeKey == '1'" style="height: 82%; width: 100%">
<div v-if="activeKey == '1'" style="height: 72%; width: 100%">
<graph-graph ref="graphRef" v-if="isGraph" />
<environment-table ref="tableRef" v-else style="width: 100%" />
</div>
<div v-else style="height: 82%; width: 100%">
<div v-else style="height: 78%; width: 100%">
<analysis-graph ref="analysisGraphRef" v-if="isGraph" style="height: 100%; width: 100%" />
<analysis-table ref="analysisTableRef" v-else />
</div>
@@ -110,4 +120,22 @@
display: inline-block;
padding-right: 10px;
}
::v-deep .ant-tabs-tab {
font-weight: bold; /* 选中标签的加粗 */
// font-size: 16px;
// letter-spacing: 1.33px;
color: #666666 !important;
}
::v-deep .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
// background-color: #f0f0f0; /* 自定义选中背景色 */
// color: #1890ff; /* 自定义选中文字颜色 */
// border-radius: 5px; /* 选中标签的圆角 */
// font-weight: bold; /* 选中标签的加粗 */
color: #000000 !important;
}
::v-deep .ant-tabs-tab:hover {
color: #000000; /* 悬停时的文字颜色 */
}
</style>

14
hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
View File

@@ -55,7 +55,7 @@
placeholder="请选择能耗类型"
:style="{
top: '100px',
left: `${divWidth + 40}px`,
left: `${divWidth + 55}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
@@ -67,7 +67,7 @@
placeholder="请选择日期类型"
:style="{
top: '100px',
left: `${divWidth * 2 + 50}px`,
left: `${divWidth * 2 + 65}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
@@ -77,7 +77,7 @@
<a-range-picker
:style="{
top: '100px',
left: `${divWidth * 3 + 60}px`,
left: `${divWidth * 3 + 75}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
@@ -90,7 +90,7 @@
<a-date-picker
:style="{
top: '100px',
left: `${divWidth * 3 + 60}px`,
left: `${divWidth * 3 + 75}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
@@ -103,7 +103,7 @@
type="primary"
:style="{
top: '100px',
left: `${divWidth * 4 + 70}px`,
left: `${divWidth * 4 + 85}px`,
zIndex: 9,
position: 'absolute',
}"
@@ -601,6 +601,10 @@
}
.parent-container {
// position: relative;
border-radius: 10px;
background: #ffffff;
padding-left: 10px;
padding-right: 10px;
height: 100%;
}

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

@@ -9,7 +9,7 @@
height: 35%;
width: 100%;
padding: 2%;
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
border-radius: 10px;
background: #ffffff;
">
@@ -59,7 +59,7 @@
height: 62%;
margin-top: 4%;
padding: 2%;
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
border-radius: 10px;
background: #ffffff;
">
@@ -127,7 +127,7 @@
height: 100%;
margin-left: 20px;
padding: 1%;
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
border-radius: 10px;
background: #ffffff;
">

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

@@ -1,7 +1,9 @@
<template>
<div style="background: #f2f6fd; width: 100%; height: 100%">
<div style="width: 100%; height: 100%">
<div style="display: flex">
<a-tabs v-model:activeKey="activeKey" style="height: 5%; width: 100%; background: #ffffff">
<a-tabs
v-model:activeKey="activeKey"
style="height: 5%; width: 100%; margin-top: 0.5%; background: #ffffff">
<a-tab-pane key="1" tab="综合数据" />
<a-tab-pane key="2" tab="历史数据" />
<a-tab-pane key="3" tab="平均数据" />