更改

src/views/rqdd/rqdddm.vue

@@ -133,7 +133,6 @@ export default {
   background: none;
 }
 
-
 .table-wrapper {
   width: 90%;
   height: 99%;
@@ -142,7 +141,7 @@ export default {
     //min-height: 600px;
     margin-left: 6%;
     margin-top: 8%;
-    width: 588px;
+    width: 100%;
     height: 99%;
     background-size: cover;
   }
@@ -200,6 +199,7 @@ export default {
 
   }
 
+
   /deep/ .el-icon-arrow-up:before {
     content: url(../../views/Articles/img/xiala2.png);
   }
@@ -242,7 +242,7 @@ export default {
     border: 0px;
   }
 
-  /deep/ .el-table__body {
+  /deep/ .el-table .el-table__body {
     -webkit-border-vertical-spacing: 13px; // 垂直间距
   }
 

src/views/rqdd/rqddgjxx.vue

@@ -9,18 +9,23 @@
                     :cell-style="{border:0,color:'rgba(255,255,255,1)'}"
                     :data="tableData"
                     :header-cell-style="{color:'#fff'}"
+                    :row-class-name="tableRowClassName"
                     :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
                     :show-header="false"
                     style="background: none;margin-top: -1%;"
             >
                 <el-table-column align="center" label="信息" prop="info">
                     <template slot-scope="scope">
-                        <div style="height: 25px">
-                            <img v-if="scope.row.state === 1" :height="20"
+                        <div v-if="scope.row.state === 1" style="height: 25px;opacity: 0.5">
+                            <img :height="20"
                                  :width="20"
                                  alt=""
-                                 src="../../assets/images/warning1.png" style="position:absolute;top: 10px;">
-                            <img v-if="scope.row.state === 2" :height="20"
+                                 src="../../assets/images/warning1.png"
+                                 style="position:absolute;top: 10px;opacity: 0.5">
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ scope.row.info }}
+                        </div>
+                        <div v-if="scope.row.state === 2" style="height: 25px;">
+                            <img :height="20"
                                  :width="20"
                                  alt=""
                                  src="../../assets/images/warning.png" style="position:absolute;top: 10px;">
@@ -51,7 +56,14 @@ export default {
         handleRowClick(row, event, column) {
             // 在这里处理行点击事件
             console.log('行点击事件：', row, event, column);
-        }
+        },
+        tableRowClassName({row}) {
+            if (row.state == "1") {
+                return "tablerow1";
+            } else {
+                return "tablerow2"
+            }
+        },
     },
     mounted() {
         this.tableData = [
@@ -86,6 +98,14 @@ export default {
   src: url("../Articles/font/AlimamaDaoLiTi.ttf")
 }
 
+/deep/ .el-table .tablerow1 {
+  background: url('./img/矩形866.4.png') no-repeat;
+}
+
+/deep/ .el-table .tablerow2 {
+  background: url('./img/矩形866.png') no-repeat;
+}
+
 .table-wrapper {
   //width: 1483px;
   //padding-left: 20px;
@@ -94,7 +114,7 @@ export default {
     //min-height: 600px;
     margin-left: 6%;
     margin-top: 9%;
-    width: 550px;
+    width: 525px;
     background-size: cover;
   }
 
@@ -187,9 +207,6 @@ export default {
     //height: 49px;
   }
 
-  /deep/ .el-table .el-table__row {
-    background: url("./img/矩形866.4.png") no-repeat;
-  }
 
   /deep/ .el-table__body {
     //-webkit-border-vertical-spacing: 5px; // 垂直间距

src/views/rqdd/rqddllx.vue

@@ -137,7 +137,7 @@ export default {
     //min-height: 600px;
     margin-left: 6%;
     margin-top: 8%;
-    width: 588px;
+    width: 89%;
     height: 99%;
     background-size: cover;
   }

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

@@ -1,96 +1,96 @@
 <template>
-  <div class="table-wrapper">
-    <div class="table-box">
-      <!--      <div class="title"-->
-      <!--           style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;height: 40px">-->
-      <!--        <span style="position: absolute;top:-3px;left: 70px">普通负荷</span>-->
-      <!--      </div>-->
-      <el-table
-          :cell-style="{border:0,color:'#fff'}"
-          :data="tableData"
-          :header-cell-style="{color:'#fff'}"
-          :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
-          size="mini"
-          style="background: none"
-      >
-        <el-table-column align="center" label="断面名称" prop="name" width="100px"></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="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 class="table-wrapper">
+        <div class="table-box">
+            <!--      <div class="title"-->
+            <!--           style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;height: 40px">-->
+            <!--        <span style="position: absolute;top:-3px;left: 70px">普通负荷</span>-->
+            <!--      </div>-->
+            <el-table
+                    :cell-style="{border:0,color:'#fff'}"
+                    :data="tableData"
+                    :header-cell-style="{color:'#fff'}"
+                    :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
+                    size="mini"
+                    style="background: none;"
+            >
+                <el-table-column align="center" label="断面名称" prop="name" width="100px"></el-table-column>
+                <el-table-column align="center" label="状态" prop="state">
+                    <template slot-scope="scope">
+                        <img height="16px" src="../../../assets/images/r-green.png">
+                    </template>
+                </el-table-column>
+                <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>
     </div>
-  </div>
 </template>
 
 <script>
 
 export default {
-  data() {
-    return {
-      form: {
-        taskNumber: '',
-        date: '',
-        current: 1,
-        size: 10
-      },
-      tableData: []
+    data() {
+        return {
+            form: {
+                taskNumber: '',
+                date: '',
+                current: 1,
+                size: 10
+            },
+            tableData: []
+        }
+    },
+    methods: {},
+    mounted() {
+        this.tableData = [
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+        ]
     }
-  },
-  methods: {},
-  mounted() {
-    this.tableData = [
-      {
-        "name": "汗海-庆云断面",
-        "state": "1",
-        "ap": "500",
-        "lower": "450",
-        "upper": "550",
-        "range": "1"
-      },
-      {
-        "name": "汗海-庆云断面",
-        "state": "1",
-        "ap": "500",
-        "lower": "450",
-        "upper": "550",
-        "range": "1"
-      },
-      {
-        "name": "汗海-庆云断面",
-        "state": "1",
-        "ap": "500",
-        "lower": "450",
-        "upper": "550",
-        "range": "1"
-      },
-      {
-        "name": "汗海-庆云断面",
-        "state": "1",
-        "ap": "500",
-        "lower": "450",
-        "upper": "550",
-        "range": "1"
-      },
-      {
-        "name": "汗海-庆云断面",
-        "state": "1",
-        "ap": "500",
-        "lower": "450",
-        "upper": "550",
-        "range": "1"
-      },
-    ]
-  }
 }
 </script>
 
@@ -116,7 +116,7 @@ export default {
     //min-height: 600px;
     margin-left: 6%;
     margin-top: 5%;
-    width: 550px;
+    width: 525px;
     background-size: cover;
   }
 

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

@@ -1,96 +1,96 @@
 <template>
-  <div class="table-wrapper">
-    <div class="table-box">
-<!--      <div class="title"-->
-<!--           style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;height: 40px">-->
-<!--        <span style="position: absolute;top:-3px;left: 70px">普通负荷</span>-->
-<!--      </div>-->
-      <el-table
-          :cell-style="{border:0,color:'#fff'}"
-          :data="tableData"
-          :header-cell-style="{color:'#fff'}"
-          :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
-          size="mini"
-          style="background: none"
-      >
-        <el-table-column align="center" label="名称" prop="name" width="100px"></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="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 class="table-wrapper">
+        <div class="table-box">
+            <!--      <div class="title"-->
+            <!--           style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;height: 40px">-->
+            <!--        <span style="position: absolute;top:-3px;left: 70px">普通负荷</span>-->
+            <!--      </div>-->
+            <el-table
+                    :cell-style="{border:0,color:'#fff'}"
+                    :data="tableData"
+                    :header-cell-style="{color:'#fff'}"
+                    :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
+                    size="mini"
+                    style="background: none;font-size: 15px"
+            >
+                <el-table-column align="center" label="名称" prop="name" width="100px"></el-table-column>
+                <el-table-column align="center" label="状态" prop="state">
+                    <template slot-scope="scope">
+                        <img height="16px" src="../../../assets/images/r-green.png">
+                    </template>
+                </el-table-column>
+                <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>
     </div>
-  </div>
 </template>
 
 <script>
 
 export default {
-  data() {
-    return {
-      form: {
-        taskNumber: '',
-        date: '',
-        current: 1,
-        size: 10
-      },
-      tableData: []
+    data() {
+        return {
+            form: {
+                taskNumber: '',
+                date: '',
+                current: 1,
+                size: 10
+            },
+            tableData: []
+        }
+    },
+    methods: {},
+    mounted() {
+        this.tableData = [
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+        ]
     }
-  },
-  methods: {},
-  mounted() {
-    this.tableData = [
-      {
-        "name": "高德线",
-        "state": "1",
-        "ap": "500",
-        "lower": "450",
-        "upper": "550",
-        "range": "1"
-      },
-      {
-        "name": "高德线",
-        "state": "1",
-        "ap": "500",
-        "lower": "450",
-        "upper": "550",
-        "range": "1"
-      },
-      {
-        "name": "高德线",
-        "state": "1",
-        "ap": "500",
-        "lower": "450",
-        "upper": "550",
-        "range": "1"
-      },
-      {
-        "name": "高德线",
-        "state": "1",
-        "ap": "500",
-        "lower": "450",
-        "upper": "550",
-        "range": "1"
-      },
-      {
-        "name": "高德线",
-        "state": "1",
-        "ap": "500",
-        "lower": "450",
-        "upper": "550",
-        "range": "1"
-      },
-    ]
-  }
 }
 </script>
 
@@ -116,7 +116,7 @@ export default {
     //min-height: 600px;
     margin-left: 6%;
     margin-top: 5%;
-    width: 550px;
+    width: 525px;
     background-size: cover;
   }
 

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

@@ -9,9 +9,10 @@
                     :cell-style="{border:0,color:'rgba(255,255,255,1)'}"
                     :data="tableData"
                     :header-cell-style="{color:'#fff'}"
+                    :row-class-name="tableRowClassName"
                     :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
                     :show-header="false"
-                    style="background: none;margin-top: -1%;"
+                    style="background: none;margin-top: -1%;font-size: 15px"
                     @row-click="handleRowClick"
             >
                 <el-table-column align="center" label="信息" prop="info">
@@ -24,7 +25,7 @@
                                  style="position:absolute;top: 10px;opacity: 0.5">
                             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ scope.row.info }}
                         </div>
-                        <div v-if="scope.row.state === 2" style="height: 25px">
+                        <div v-if="scope.row.state === 2" style="height: 25px;">
                             <img :height="20"
                                  :width="20"
                                  alt=""
@@ -67,7 +68,7 @@
                         :row-style="{backgroundColor:'transparent'}"
                         :show-header="false"
                         size="mini"
-                        style="background: none;margin-top: -1%;"
+                        style="background: none;margin-top: -1%;font-size: 15px"
                         @row-click="handleDialogClose"
                 >
                     <el-table-column label="信息" prop="info">
@@ -107,6 +108,13 @@ export default {
         }
     },
     methods: {
+        tableRowClassName({row}) {
+            if (row.state == "1") {
+                return "tablerow1";
+            } else {
+                return "tablerow2"
+            }
+        },
         handleRowClick(row, event, column) {
             this.dialogShow = true
         },
@@ -156,6 +164,13 @@ export default {
 </script>
 
 <style lang="less" scoped>
+/deep/ .el-table .tablerow1 {
+  background: url('../../rqdd/img/矩形866.4.png') no-repeat;
+}
+
+/deep/ .el-table .tablerow2 {
+  background: url('../../rqdd/img/矩形866.png') no-repeat;
+}
 
 @font-face {
   font-family: AliMaMa;//自定义字体名称
@@ -271,9 +286,6 @@ export default {
     text-align: left;
   }
 
-  /deep/ .el-table .el-table__row {
-    background: url("../../rqdd/img/矩形866.4.png") no-repeat;
-  }
 
   /deep/ .el-table, .el-table__expanded-cell {
     background-color: rgb(1, 40, 81);

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

@@ -1,73 +1,74 @@
 <template>
-  <div class="table-wrapper">
-    <div class="table-box">
-      <!--      <div class="title"-->
-      <!--           style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;height: 40px">-->
-      <!--        <span style="position: absolute;top:-3px;left: 70px">普通负荷</span>-->
-      <!--      </div>-->
-      <el-table
-          :cell-style="{border:0,color:'#fff'}"
-          :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">
-          <template slot-scope="scope">
-            <div style="height: 25px">
-              <img src="../../../assets/images/shape1.png" style="position:absolute;top: 8px" :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>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
+    <div class="table-wrapper">
+        <div class="table-box">
+            <!--      <div class="title"-->
+            <!--           style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;height: 40px">-->
+            <!--        <span style="position: absolute;top:-3px;left: 70px">普通负荷</span>-->
+            <!--      </div>-->
+            <el-table
+                    :cell-style="{border:0,color:'#fff'}"
+                    :data="tableData"
+                    :header-cell-style="{color:'#fff'}"
+                    :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
+                    :show-header="false"
+                    size="mini"
+                    style="background: none;margin-top: -1%; font-size: 15px"
+            >
+                <el-table-column label="信息" prop="info">
+                    <template slot-scope="scope">
+                        <div style="height: 25px">
+                            <img :height="20" :width="20" alt=""
+                                 src="../../../assets/images/shape1.png"
+                                 style="position:absolute;top: 8px">
+                            <img :height="25" :width="535"
+                                 alt=""
+                                 src="../../../assets/images/bg/bg-table-row.png" style="position:absolute;left: 35px">
+                            <span style="position:absolute;top:8px;left: 43px">{{ scope.row.info }}</span>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 
 export default {
-  data() {
-    return {
-      form: {
-        taskNumber: '',
-        date: '',
-        current: 1,
-        size: 10
-      },
-      tableData: []
+    data() {
+        return {
+            form: {
+                taskNumber: '',
+                date: '',
+                current: 1,
+                size: 10
+            },
+            tableData: []
+        }
+    },
+    methods: {},
+    mounted() {
+        this.tableData = [
+            {
+                "info": "0:00时刻，现货数据接口正常",
+            },
+            {
+                "info": "0:00时刻，D5000数据接口正常",
+            },
+            {
+                "info": "0:15时刻，储能AGC数据下发正常",
+            },
+            {
+                "info": "0:15时刻，火电AGC数据下发正常",
+            },
+            {
+                "info": "0:15时刻，储能AGC数据下发正常",
+            },
+            {
+                "info": "0:15时刻，火电AGC数据下发正常",
+            },
+        ]
     }
-  },
-  methods: {
-  },
-  mounted() {
-    this.tableData = [
-      {
-        "info": "0:00时刻，现货数据接口正常",
-      },
-      {
-        "info": "0:00时刻，D5000数据接口正常",
-      },
-      {
-        "info": "0:15时刻，储能AGC数据下发正常",
-      },
-      {
-        "info": "0:15时刻，火电AGC数据下发正常",
-      },
-      {
-        "info": "0:15时刻，储能AGC数据下发正常",
-      },
-      {
-        "info": "0:15时刻，火电AGC数据下发正常",
-      },
-    ]
-  }
 }
 </script>