zhengsl/WholeProcessPlatform
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

页面样式调整

Browse Source
This commit is contained in:
王兴凯 2026-04-08 10:44:01 +08:00
parent addb2b671d
commit 5695480021
3 changed files with 58 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/RightDrawer/index.vue
View File

@ -71,7 +71,7 @@ const handleToggle = () => {
}
.ant-drawer {
margin: 3px 0px;
// margin: 3px 0px;
.ant-drawer-content {
overflow: visible;
}

130
frontend/src/components/engEnvironmentData/index.vue
View File

@ -1,97 +1,55 @@
<!-- engEnvironmentData/index.vue -->
<template>
<div class="eng-environment-data">
<div class="title">监测数据接入情况</div>
<div>
<!-- <div v-if="dataLoading">
<EmptyPanel :loading="dataLoading" :data="data" />
</div> -->
<div style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center">
<span style="font-size: 14px; line-height: 22px; font-weight: 400; color: #000; margin-bottom: 4px">
监测数据接入情况
</span>
<div class="data-list">
<div class="data-item" v-for="item in dataList" :key="item.label">
<div class="item-content">
<span class="color-bar" :style="{ backgroundColor: item.color }"></span>
<span class="label">{{ item.label }}</span>
<span class="value" style=" color: #2f6b98 ">{{ item.value }}</span>
</div>
</div>
<div style="display: flex; flex-direction: column">
<div
style="width: 190px; height: 36px; border: 1px solid #EDF2F8; padding: 4px; display: flex; justify-content: space-between; cursor: pointer"
>
<div>
<span style="border-right: 2px solid #00A14D; margin-right: 6px"></span>
<span>大中型已建在建电站</span>
</div>
<span style="padding-right: 3px; color: #2F6B98; cursor: pointer">{{ data.one ?? '-' }}</span>
</div>
<div
style="width: 190px; height: 36px; border: 1px solid #EDF2F8; padding: 4px; display: flex; justify-content: space-between; margin: 3px 0; cursor: pointer"
>
<div>
<span style="border-right: 2px solid #4978AD; margin-right: 6px"></span>
<span>已接入电站运行数据</span>
</div>
<span style="padding-right: 3px; color: #2F6B98; cursor: pointer">{{ data.two ?? '-' }}</span>
</div>
<div
style="width: 190px; height: 36px; border: 1px solid #EDF2F8; padding: 4px; display: flex; justify-content: space-between; cursor: pointer"
>
<div>
<span style="border-right: 2px solid #606060; margin-right: 6px"></span>
<span>已开展全过程监测工作</span>
</div>
<span style="padding-right: 3px; color: #2F6B98; cursor: pointer">{{ data.three ?? '-' }}</span>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
<script setup lang="ts">
import { ref, watch, computed } from 'vue';
// 定义组件名
defineOptions({
name: 'EngEnvironmentData'
});
// 数据列表
const dataList = ref([
{
label: '大中型已建在建电站',
value: '707',
color: '#00b894'
},
{
label: '已接入电站运行数据',
value: '452',
color: '#0984e3'
},
{
label: '已开展全过程监测工作',
value: '42',
color: '#6c5ce7'
}
]);
// 状态定义
const dataLoading = ref(false);
const data = ref<Record<string, number>>({ one: 0, two: 0, three: 0 });
// 页面加载时执行的逻辑
onMounted(() => {
});
</script>
<style lang="scss" scoped>
.eng-environment-data {
padding: 0px 5px;
background: #fff;
border-radius: 4px;
width: 100%;
.title {
font-size: 14px;
font-weight: 500;
color: #333;
text-align: center;
margin-bottom: 4px;
}
.data-list {
display: flex;
flex-direction: column;
justify-content: space-between;
align-content: space-between;
height: 85%;
.data-item {
border: 1px solid #edf2f8;
cursor: pointer;
.item-content {
display: flex;
align-items: center;
padding: 6px;
.color-bar {
width: 2px;
height: 19px;
margin-right: 6px;
border-radius: 2px;
display: block;
}
.label {
flex: 1;
line-height: 10px;
}
}
}
}
}
</style>

23
frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue
View File

@ -23,11 +23,11 @@ const columns: ColumnsType = [
dataIndex: 'name',
key: 'name',
fixed: 'left',
// width: 65,
width: 114,
align: 'left'
},
{
title: '装机容量 (万kW)',
title: '装机容量(万kW)',
key: 'capacity',
align: 'center',
children: [
@ -35,28 +35,28 @@ const columns: ColumnsType = [
title: '总计',
dataIndex: 'total',
key: 'total',
width: 73.6,
// // width: 76,
align: 'center'
},
{
title: '已建',
dataIndex: 'built',
key: 'built',
width: 73.6,
// width: 76,
align: 'center'
},
{
title: '在建',
dataIndex: 'building',
key: 'building',
width: 73.6,
// width: 76,
align: 'center'
},
{
title: '未建',
dataIndex: 'unbuilt',
key: 'unbuilt',
width: 73.6,
// width: 76,
align: 'center'
},
]
@ -204,9 +204,10 @@ onMounted(() => {
<style lang="scss" scoped>
.data-table-container {
padding: 0;
// padding: 0;
background: #fff;
padding: 16px 0px;
width: 100%;
}
.custom-table {
@ -221,7 +222,7 @@ border-top: 1px solid #d5e2ed;
color: #2f6b98;
// font-weight: 600;
// border: 1px solid #d5e2ed!important;
padding: 5px 8px;
padding: 4px 6px;
text-align: center;
&:first-child {
@ -246,7 +247,7 @@ border-top: 1px solid #d5e2ed;
>tr {
>td {
// border: 1px solid #d5e2ed;
padding: 5px 8px;
padding: 6px 6px;
text-align: center;
&:first-child {
@ -269,7 +270,7 @@ border-top: 1px solid #d5e2ed;
.footer-row {
display: flex;
align-items: center;
padding: 12px 8px;
padding: 12px 6px;
// border-top: 1px solid #d5e2ed;
background-color: #fafafa;
@ -309,7 +310,7 @@ border-top: 1px solid #d5e2ed;
border-inline-end: 1px solid #d5e2ed !important;
}
.ant-table-wrapper .ant-table-thead >tr>th{
border-bottom: 1px solid #d5e2ed !important;
border-bottom: 0px solid #d5e2ed !important;
}
}