页面样式调整

frontend/src/components/RightDrawer/index.vue

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

frontend/src/components/engEnvironmentData/index.vue

@@ -1,97 +1,55 @@
-<!-- engEnvironmentData/index.vue -->
 <template>
-    <div class="eng-environment-data">
+  <div>
-        <div class="title">监测数据接入情况</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 style="display: flex; flex-direction: column">
-            <div class="data-item" v-for="item in dataList" :key="item.label">
+        <div
-                <div class="item-content">
+          style="width: 190px; height: 36px; border: 1px solid #EDF2F8; padding: 4px; display: flex; justify-content: space-between; cursor: pointer"
-                    <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>
+            <span style="border-right: 2px solid #00A14D; margin-right: 6px"></span>
-            </div>
+            <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>
+<script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, watch, computed } from 'vue';
 
-// 定义组件名
-defineOptions({
-    name: 'EngEnvironmentData'
-});
 
-// 数据列表
+// 状态定义
-const dataList = ref([
+const dataLoading = ref(false);
-    {
+const data = ref<Record<string, number>>({ one: 0, two: 0, three: 0 });
-        label: '大中型已建在建电站',
-        value: '707',
-        color: '#00b894'
-    },
-    {
-        label: '已接入电站运行数据',
-        value: '452',
-        color: '#0984e3'
-    },
-    {
-        label: '已开展全过程监测工作',
-        value: '42',
-        color: '#6c5ce7'
-    }
-]);
 
-// 页面加载时执行的逻辑
-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>

frontend/src/modules/shuidianhuangjingjieruMod/DataTable.vue

@@ -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;
 }
    
 }