告警信息弹窗

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

@@ -37,6 +37,41 @@
          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>
 
@@ -51,13 +86,17 @@ export default {
         current: 1,
         size: 10
       },
-      tableData: []
+      tableData: [],
+      dialogShow: false,
+      warningData:[]
     }
   },
   methods: {
     handleRowClick(row, event, column) {
-      // 在这里处理行点击事件
-      console.log('行点击事件：', row, event, column);
+      this.dialogShow = true
+    },
+    handleDialogClose(row, event, column) {
+      this.dialogShow = false
     }
   },
   mounted() {
@@ -75,6 +114,28 @@ export default {
         "state": 1
       },
     ]
+    this.warningData=[
+      {
+        "info": "严重警告：联络线（高德线）严重超越正限",
+        "state": 2
+      },
+      {
+        "info": "严重警告：联络线（高德线）严重超越正限",
+        "state": 2
+      },
+      {
+        "info": "严重警告：联络线（高德线）严重超越正限",
+        "state": 2
+      },
+      {
+        "info": "严重警告：联络线（高德线）严重超越正限",
+        "state": 2
+      },
+      {
+        "info": "严重警告：联络线（高德线）严重超越正限",
+        "state": 2
+      },
+    ]
   }
 }
 </script>
@@ -211,5 +272,36 @@ export default {
   .el-table__row > td {
     border: none;
   }
+
+  .dialogInfoBg {
+    background: url(../../../assets/images/dialog/bg-warning.png) 100% no-repeat;
+    background-size: 100% 100%;
+    padding: 1%;
+    width: 30%;
+    height: 260px;
+    position: absolute;
+    top: 35%;
+    left: 34%;
+    z-index: 1000;
+  }
+
+  .rightTitleTextBg {
+    height: 28%;
+    background-size: 100% 100%;
+    background: url(../../../assets/images/dialog/t-line-warning.png) no-repeat center;
+  }
+
+  .rightMainTitle {
+    color: rgb(255, 255, 255);
+    font-size: 18px;
+    font-weight: 550;
+    /*font-style: italic;*/
+    text-shadow: 0 0 5px #fff, 0 1px 2px rgba(0, 0, 0, 1);
+    margin-left: 42%;
+    position: relative;
+    top: 0;
+    display: flex;
+    justify-content: space-between;
+  }
 }
 </style>