列表页样式修改

src/views/xndc/modules/center-middle.vue

@@ -13,27 +13,19 @@
           size="mini"
           style="background: none"
       >
-        <el-table-column
-            align="center"
-            label="节点名称"
-            prop="stationName"
-        >
+        <el-table-column align="center" label="名称" prop="name"></el-table-column>
+        <el-table-column align="center" label="状态" prop="state">
+          <template slot-scope="scope">
+            <img src="../../../assets/images/r-green.png" height="16px">
+          </template>
         </el-table-column>
-        <el-table-column
-            align="center"
-            label="预测值"
-            prop="capacity"
-        >
-        </el-table-column>
-        <el-table-column
-            align="center"
-            label="预测时间"
-            prop="time">
-        </el-table-column>
-        <el-table-column
-            align="center"
-            label="数据接收时间"
-            prop="date">
+        <el-table-column align="center" label="有功" prop="ap"></el-table-column>
+        <el-table-column align="center" label="负限" prop="lower"></el-table-column>
+        <el-table-column align="center" label="正限" prop="upper"></el-table-column>
+        <el-table-column align="center" label="区间" prop="range">
+          <template slot-scope="scope">
+            <div style="color:#92fc53">正常</div>
+          </template>
         </el-table-column>
       </el-table>
     </div>
@@ -56,52 +48,61 @@ export default {
   },
   methods: {},
   mounted() {
-    this.tableData = [    {
-      "stationName": "国电龙源官村风电场",
-      "control": "是",
-      "capacity": "50",
-      "time": "00:00",
-      "status": "已下发",
-      "date": "2023-11-28"
-    },
+    this.tableData = [
+      {
+        "name": "高德线",
+        "state": "1",
+        "ap": "500",
+        "lower": "450",
+        "upper": "550",
+        "range": "1"
+      },
       {
-        "stationName": "国电龙源官村风电场",
-        "control": "是",
-        "capacity": "50",
-        "time": "00:10",
-        "status": "已下发",
-        "date": "2023-11-28"
+        "name": "高德线",
+        "state": "1",
+        "ap": "500",
+        "lower": "450",
+        "upper": "550",
+        "range": "1"
       },
       {
-        "stationName": "国电龙源官村风电场",
-        "control": "是",
-        "capacity": "50",
-        "time": "00:20",
-        "status": "已下发",
-        "date": "2023-11-28"
+        "name": "高德线",
+        "state": "1",
+        "ap": "500",
+        "lower": "450",
+        "upper": "550",
+        "range": "1"
       },
       {
-        "stationName": "国电龙源官村风电场",
-        "control": "是",
-        "capacity": "50",
-        "time": "00:30",
-        "status": "已下发",
-        "date": "2023-11-28"
+        "name": "高德线",
+        "state": "1",
+        "ap": "500",
+        "lower": "450",
+        "upper": "550",
+        "range": "1"
       },
       {
-        "stationName": "国电龙源官村风电场",
-        "control": "是",
-        "capacity": "50",
-        "time": "00:40",
-        "status": "已下发",
-        "date": "2023-11-28"
-      }]
+        "name": "高德线",
+        "state": "1",
+        "ap": "500",
+        "lower": "450",
+        "upper": "550",
+        "range": "1"
+      },
+    ]
   }
 }
 </script>
 
 <style lang="less" scoped>
 
+.circle {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #4ded68;
+}
+
 @font-face {
   font-family: AliMaMa;//自定义字体名称
   src: url("../../Articles/font/AlimamaDaoLiTi.ttf")

src/views/xndc/modules/center-top.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "center-top"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/xndc/modules/left-top.vue

@@ -11,7 +11,7 @@
           :header-cell-style="{color:'#fff'}"
           :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
           size="mini"
-          style="background: none;margin-top: -1%"
+          style="background: none;margin-top: -1%;"
           :show-header="false"
       >
         <el-table-column label="信息" prop="info">