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

@@ -6,27 +6,33 @@
       <!--        <span style="position: absolute;top:-3px;left: 70px">普通负荷</span>-->
       <!--      </div>-->
       <el-table
-          :cell-style="{border:0,color:'#fff'}"
+          :cell-style="{border:0,color:'rgba(255,255,255,1)'}"
           :data="tableData"
           :header-cell-style="{color:'#fff'}"
           :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
-          size="mini"
           style="background: none;margin-top: -1%;"
           :show-header="false"
       >
-        <el-table-column label="信息" prop="info">
+        <el-table-column align="center" label="信息" prop="info">
           <template slot-scope="scope">
             <div style="height: 25px">
-              <img src="../../../assets/images/shape1.png" style="position:absolute;top: 8px" :width="20" :height="20"
+              <img src="../../../assets/images/warning.png" style="position:absolute;top: 10px;" :width="20"
+                   :height="20"
                    alt="">
-              <img src="../../../assets/images/bg/bg-table-row.png" style="position:absolute;left: 35px" :width="535"
-                   :height="25" alt="">
-              <span style="position:absolute;top:8px;left: 43px">{{ scope.row.info }}</span>
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ scope.row.info }}
             </div>
           </template>
         </el-table-column>
       </el-table>
     </div>
+    <img src="../../../assets/images/shape5.png" style="position:absolute;margin-top: 1.5%;margin-left: -12%" :width="50" :height="50"
+         alt="">
+    <img src="../../../assets/images/shape6.png" style="position:absolute;margin-top: 3%;margin-left: -12%" :width="195" :height="25" alt="">
+    <div style="position:absolute;margin-top: 2%;margin-left: 5.8%;font-weight: bold">总发电量：<span style="color: #40ffff">6000KW</span></div>
+    <img src="../../../assets/images/shape5.png" style="position:absolute;margin-top: 1.5%;margin-left: 3%" :width="50" :height="50"
+         alt="">
+    <img src="../../../assets/images/shape6.png" style="position:absolute;margin-top: 3%;margin-left: 3%" :width="195" :height="25" alt="">
+    <div style="position:absolute;margin-top: 2%;margin-left: 20.8%;font-weight: bold">总用电量：<span style="color: gold">6000KW</span></div>
   </div>
 </template>
 
@@ -49,22 +55,16 @@ export default {
   mounted() {
     this.tableData = [
       {
-        "info": "0:00时刻，现货数据接口正常",
+        "info": "轻微警告：联络线（高德线）接近正限",
+        "state": 1
       },
       {
-        "info": "0:00时刻，D5000数据接口正常",
+        "info": "严重警告：联络线（高德线）严重超越正限",
+        "state": 2
       },
       {
-        "info": "0:15时刻，储能AGC数据下发正常",
-      },
-      {
-        "info": "0:15时刻，火电AGC数据下发正常",
-      },
-      {
-        "info": "0:15时刻，储能AGC数据下发正常",
-      },
-      {
-        "info": "0:15时刻，火电AGC数据下发正常",
+        "info": "轻微警告：联络线（高德线）接近正限",
+        "state": 1
       },
     ]
   }