添加背景

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

@@ -1,142 +1,153 @@
 <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:'rgba(255,255,255,1)'}"
-          :data="tableData"
-          :header-cell-style="{color:'#fff'}"
-          :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
-          style="background: none;margin-top: -1%;"
-          :show-header="false"
-          @row-click="handleRowClick"
-      >
-        <el-table-column align="center" label="信息" prop="info">
-          <template slot-scope="scope">
-            <div style="height: 25px">
-              <img src="../../../assets/images/warning1.png" style="position:absolute;top: 10px;" :width="20"
-                   :height="20"
-                   alt="" v-if="scope.row.state === 1">
-              <img src="../../../assets/images/warning.png" style="position:absolute;top: 10px;" :width="20"
-                   :height="20"
-                   alt="" v-if="scope.row.state === 2">
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ scope.row.info }}
+    <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:'rgba(255,255,255,1)'}"
+                    :data="tableData"
+                    :header-cell-style="{color:'#fff'}"
+                    :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
+                    :show-header="false"
+                    style="background: none;margin-top: -1%;"
+                    @row-click="handleRowClick"
+            >
+                <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"
+                                 :width="20"
+                                 alt=""
+                                 src="../../../assets/images/warning1.png" style="position:absolute;top: 10px;">
+                            <img v-if="scope.row.state === 2" :height="20"
+                                 :width="20"
+                                 alt=""
+                                 src="../../../assets/images/warning.png" style="position:absolute;top: 10px;">
+                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ scope.row.info }}
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <img :height="50" :width="50"
+             alt="" src="../../../assets/images/shape5.png"
+             style="position:absolute;margin-top: 1.5%;margin-left: -12%">
+        <img :height="25" :width="195"
+             alt="" src="../../../assets/images/shape6.png" style="position:absolute;margin-top: 3%;margin-left: -12%">
+        <div style="position:absolute;margin-top: 2%;margin-left: 5.8%;font-weight: bold">总发电量：<span
+                style="color: #40ffff">6000KW</span></div>
+        <img :height="50" :width="50"
+             alt="" src="../../../assets/images/shape5.png"
+             style="position:absolute;margin-top: 1.5%;margin-left: 3%">
+        <img :height="25" :width="195"
+             alt="" src="../../../assets/images/shape6.png" style="position:absolute;margin-top: 3%;margin-left: 3%">
+        <div style="position:absolute;margin-top: 2%;margin-left: 20.8%;font-weight: bold">总用电量：<span
+                style="color: gold">6000KW</span></div>
+        <!-- 告警弹框 -->
+        <div v-if="dialogShow" class="dialogInfoBg">
+            <!-- 弹框头 -->
+            <div class="rightTitleTextBg">
+                <div class="rightMainTitle">
+                    <span>告 警 信 息</span>
+                    <div @click="dialogShow = false"/>
+                </div>
+            </div>
+            <!-- 弹框主体 -->
+            <div style="height: 100px">
+                <el-table
+                        :cell-style="{border:0,color:'#fff'}"
+                        :data="warningData"
+                        :header-cell-style="{color:'#fff'}"
+                        :row-style="{backgroundColor:'transparent'}"
+                        :show-header="false"
+                        size="mini"
+                        style="background: none;margin-top: -1%;"
+                        @row-click="handleDialogClose"
+                >
+                    <el-table-column label="信息" prop="info">
+                        <template slot-scope="scope">
+                            <div style="height: 25px">
+                                <img :height="20" :width="20"
+                                     alt="" src="../../../assets/images/warning.png"
+                                     style="position:absolute;top: 8px">
+                                <img :height="25"
+                                     :width="535" alt=""
+                                     src="../../../assets/images/bg/bg-table-row-warning.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>
-          </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 class="dialogInfoBg" v-if="dialogShow">
-      <!-- 弹框头 -->
-      <div class="rightTitleTextBg">
-        <div class="rightMainTitle">
-          <span>告 警 信 息</span>
-          <div @click="dialogShow = false"/>
         </div>
-      </div>
-      <!-- 弹框主体 -->
-      <div style="height: 100px">
-        <el-table
-            :cell-style="{border:0,color:'#fff'}"
-            :data="warningData"
-            :header-cell-style="{color:'#fff'}"
-            :row-style="{backgroundColor:'transparent'}"
-            size="mini"
-            style="background: none;margin-top: -1%;"
-            :show-header="false"
-            @row-click="handleDialogClose"
-        >
-          <el-table-column label="信息" prop="info">
-            <template slot-scope="scope">
-              <div style="height: 25px">
-                <img src="../../../assets/images/warning.png" style="position:absolute;top: 8px" :width="20" :height="20"
-                     alt="">
-                <img src="../../../assets/images/bg/bg-table-row-warning.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>
     </div>
-  </div>
 </template>
 
 <script>
 
 export default {
-  data() {
-    return {
-      form: {
-        taskNumber: '',
-        date: '',
-        current: 1,
-        size: 10
-      },
-      tableData: [],
-      dialogShow: false,
-      warningData:[]
-    }
-  },
-  methods: {
-    handleRowClick(row, event, column) {
-      this.dialogShow = true
+    data() {
+        return {
+            form: {
+                taskNumber: '',
+                date: '',
+                current: 1,
+                size: 10
+            },
+            tableData: [],
+            dialogShow: false,
+            warningData: []
+        }
     },
-    handleDialogClose(row, event, column) {
-      this.dialogShow = false
+    methods: {
+        handleRowClick(row, event, column) {
+            this.dialogShow = true
+        },
+        handleDialogClose(row, event, column) {
+            this.dialogShow = false
+        }
+    },
+    mounted() {
+        this.tableData = [
+            {
+                "info": "轻微警告：联络线（高德线）接近正限",
+                "state": 1
+            },
+            {
+                "info": "严重警告：联络线（高德线）严重超越正限",
+                "state": 2
+            },
+            {
+                "info": "轻微警告：联络线（高德线）接近正限",
+                "state": 1
+            },
+        ]
+        this.warningData = [
+            {
+                "info": "严重警告：联络线（高德线）严重超越正限",
+                "state": 2
+            },
+            {
+                "info": "严重警告：联络线（高德线）严重超越正限",
+                "state": 2
+            },
+            {
+                "info": "严重警告：联络线（高德线）严重超越正限",
+                "state": 2
+            },
+            {
+                "info": "严重警告：联络线（高德线）严重超越正限",
+                "state": 2
+            },
+            {
+                "info": "严重警告：联络线（高德线）严重超越正限",
+                "state": 2
+            },
+        ]
     }
-  },
-  mounted() {
-    this.tableData = [
-      {
-        "info": "轻微警告：联络线（高德线）接近正限",
-        "state": 1
-      },
-      {
-        "info": "严重警告：联络线（高德线）严重超越正限",
-        "state": 2
-      },
-      {
-        "info": "轻微警告：联络线（高德线）接近正限",
-        "state": 1
-      },
-    ]
-    this.warningData=[
-      {
-        "info": "严重警告：联络线（高德线）严重超越正限",
-        "state": 2
-      },
-      {
-        "info": "严重警告：联络线（高德线）严重超越正限",
-        "state": 2
-      },
-      {
-        "info": "严重警告：联络线（高德线）严重超越正限",
-        "state": 2
-      },
-      {
-        "info": "严重警告：联络线（高德线）严重超越正限",
-        "state": 2
-      },
-      {
-        "info": "严重警告：联络线（高德线）严重超越正限",
-        "state": 2
-      },
-    ]
-  }
 }
 </script>
 
@@ -148,14 +159,14 @@ export default {
 }
 
 .table-wrapper {
-  //width: 1483px;
+  //width: 99px;
   //padding-left: 20px;
 
   .table-box {
     //min-height: 600px;
     margin-left: 6%;
     margin-top: 5%;
-    width: 550px;
+    width: 92%;
     background-size: cover;
   }
 
@@ -256,6 +267,10 @@ 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);
   }