修改监控中心前台样式

修改分组管理前台样式
This commit is contained in:
fks-yangshouda
2024-09-03 14:26:26 +08:00
parent 7eae05f6fb
commit a648d043ee
12 changed files with 126 additions and 93 deletions

View File

@@ -123,7 +123,7 @@
const date = params[0].name;
const values = params
.map((param: any) => {
const unit = data.value.find((d) => d.date === date)?.devicePositionUnit || '';
const unit = data.value[0]?.unit || '';
return `<tr>
<td>${param.marker}${param.seriesName}</td>
<td style="text-align: right;">${param.value} ${unit}</td>

View File

@@ -280,4 +280,10 @@
// ::v-deep .ant-table-container table > thead > tr:first-child th:last-child {
// display: none !important;
// }
:deep(
.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr > td.ant-table-cell-row-hover
) {
background: #f4f8ff !important;
}
</style>

View File

@@ -157,6 +157,8 @@
const treeData2 = ref<TreeSelectProps['treeData']>([]);
const changeDeviceType = (val: any, label: any) => {
options1.value = [];
selectedValue.value = '';
treeLoading.value = true;
http
.post(device.queryDevicePage, {
@@ -227,6 +229,8 @@
throw new Error('pageData is not provided');
}
const getDianWeiList = () => {
options1.value = [];
selectedValue.value = '';
let deviceIds: any[] = [];
if (checkedKeys.value && checkedKeys.value.length > 0) {
checkedKeys.value.forEach((element) => {

View File

@@ -320,4 +320,11 @@
});
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
:deep(
.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr > td.ant-table-cell-row-hover
) {
background: #f4f8ff !important;
}
</style>

View File

@@ -180,4 +180,11 @@
});
</script>
<style lang="less" scoped></style>
<style lang="less" scoped>
:deep(
.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr > td.ant-table-cell-row-hover
) {
background: #f4f8ff !important;
}
</style>

View File

@@ -19,7 +19,7 @@
<div class="ns-right-title">
<a-tabs
v-model:activeKey="activeKey"
style="height: 8%; width: 100%"
style="height: 8%; width: 100%; font-size: 14px; font-weight: 400"
@change="changeActive">
<a-tab-pane key="1" tab="图表" />
<a-tab-pane key="2" tab="分析" />
@@ -139,7 +139,7 @@
padding-right: 10px;
}
::v-deep .ant-tabs-tab {
font-weight: bold; /* 选中标签的加粗 */
font-weight: 400; /* 选中标签的加粗 */
// font-size: 16px;
// letter-spacing: 1.33px;
color: #666666 !important;
@@ -150,11 +150,18 @@
// border-radius: 5px; /* 选中标签的圆角 */
// font-weight: bold; /* 选中标签的加粗 */
color: #000000 !important;
color: #333333 !important;
}
::v-deep .ant-tabs-tab:hover {
color: #000000; /* 悬停时的文字颜色 */
color: #333333 !important; /* 悬停时的文字颜色 */
}
:deep(.ant-tabs-ink-bar) {
width: 31px !important;
height: 3px !important;
border-radius: 2px !important;
margin-left: -2%;
background: rgba(67, 136, 251, 1);
}
.title {

View File

@@ -277,4 +277,10 @@
border-radius: 1px;
background-color: #2778ff;
}
:deep(
.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr > td.ant-table-cell-row-hover
) {
background: #f4f8ff !important;
}
</style>

View File

@@ -426,4 +426,10 @@
border-radius: 1px;
background-color: #2778ff;
}
:deep(
.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr > td.ant-table-cell-row-hover
) {
background: #f4f8ff !important;
}
</style>

View File

@@ -11,6 +11,8 @@
background: #ffffff;
letter-spacing: 1.33px;
font-size: 14px;
font-weight: 400;
">
<a-tab-pane key="1" tab="综合数据" />
<a-tab-pane key="2" tab="历史数据" />
@@ -447,7 +449,7 @@
</script>
<style lang="less" scoped>
::v-deep .ant-tabs-tab {
font-weight: 700; /* 选中标签的加粗 */
font-weight: 400; /* 选中标签的加粗 */
color: #666666 !important;
}
::v-deep .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
@@ -456,10 +458,27 @@
// border-radius: 5px; /* 选中标签的圆角 */
// font-weight: bold; /* 选中标签的加粗 */
color: #000000 !important;
color: #333333 !important;
}
::v-deep .ant-tabs-tab:hover {
color: #000000; /* 悬停时的文字颜色 */
color: #333333; /* 悬停时的文字颜色 */
}
:deep(.ant-tabs-ink-bar) {
width: 31px !important;
height: 3px !important;
border-radius: 2px !important;
margin-left: 6%;
background: rgba(67, 136, 251, 1);
}
// //table 颜色
// :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
// font-size: 14px !important;
// font-weight: bolb !important;
// color: #333333 !important;
// }
// :deep(.ant-tabs-tab-btn) {
// font-size: 14px !important;
// color: #666666 !important;
// }
</style>