feat: 目标展板页面初始化

src/views/distributionnetwork/power-outage-control/target-display-board/index.vue

@@ -1,14 +1,227 @@
 <template>
   <!-- 目标展板 -->
-  <div class="app-container">目标展板</div>
+  <div class="app-container" style="overflow-y: scroll">
+    <el-card header="">
+      <div class="table">
+        <el-table ref="renewalTable" v-loading="loading" :data="dataList">
+          <el-table-column
+            label="单位"
+            align="center"
+            prop="city"
+            width="150"
+            fixed
+          >
+          </el-table-column>
+          <el-table-column
+            label="中压用户平均停电时长目标（小时）"
+            align="center"
+            prop=""
+            :show-overflow-tooltip="true"
+            width="100"
+            fixed
+          />
+          <el-table-column
+            label="等效总用户数"
+            align="center"
+            prop=""
+            :show-overflow-tooltip="true"
+            width="80"
+            fixed
+          />
+          <el-table-column
+            label="中压用户停电总时长目标（小时）"
+            align="center"
+            prop=""
+            width="100"
+            fixed
+          />
+          <el-table-column label="近三年占比" align="center" prop="" fixed />
+          <el-table-column
+            label="中压用户预安排停电总时长目标（小时）"
+            align="center"
+            prop=""
+            width="100"
+            fixed
+          />
+          <el-table-column
+            label="中压用户预安排停电平均时长目标（小时）"
+            align="center"
+            prop=""
+            width="100"
+            fixed
+          />
+          <el-table-column
+            label="中压用户故障停电总时长目标（小时）"
+            align="center"
+            width="100"
+            prop=""
+            fixed
+          />
+          <el-table-column
+            label="中压用户故障停电平均时长目标（小时）"
+            align="center"
+            prop=""
+            width="100"
+            fixed
+          >
+          </el-table-column>
+          <el-table-column label="中压用户停电月度总时长目标" align="center">
+            <el-table-column
+              v-for="(ite, i) in 12"
+              :key="i"
+              :label="`${ite}月`"
+              align="center"
+              prop="powerOutageDuringHouseholds"
+            >
+            </el-table-column>
+          </el-table-column>
+          <el-table-column
+            label="中压用户预安排停电月度总时长目标"
+            align="center"
+          >
+            <el-table-column
+              v-for="(ite, i) in 12"
+              :key="i"
+              :label="`${ite}月`"
+              align="center"
+              prop="powerOutageDuringHouseholds"
+            >
+            </el-table-column>
+          </el-table-column>
+          <el-table-column
+            label="中压用户故障停电月度总时长目标"
+            align="center"
+          >
+            <el-table-column
+              v-for="(ite, i) in 12"
+              :key="i"
+              :label="`${ite}月`"
+              align="center"
+              prop="powerOutageDuringHouseholds"
+            >
+            </el-table-column>
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-card>
+    <el-card header="" class="mt15">
+      <div class="table">
+        <el-table ref="renewalTable" v-loading="loading" :data="dataList">
+          <el-table-column
+            label="月度占比"
+            align="center"
+            prop="city"
+            width="150"
+            fixed
+          >
+          </el-table-column>
+          <el-table-column
+            v-for="(ite, i) in 12"
+            :key="i"
+            :label="`${ite}月`"
+            align="center"
+            prop="powerOutageDuringHouseholds"
+          >
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-card>
+    <el-card header="" class="mt15">
+      <div class="table mt15">
+        <el-table ref="renewalTable" v-loading="loading" :data="dataList">
+          <el-table-column
+            label="月度预安排占比"
+            align="center"
+            prop="city"
+            width="150"
+            fixed
+          >
+          </el-table-column>
+          <el-table-column
+            v-for="(ite, i) in 12"
+            :key="i"
+            :label="`${ite}月`"
+            align="center"
+            prop="powerOutageDuringHouseholds"
+          >
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-card>
+    <el-card header="" class="mt15">
+      <div class="table">
+        <el-table ref="renewalTable" v-loading="loading" :data="dataList">
+          <el-table-column
+            label="月度故障占比"
+            align="center"
+            prop="city"
+            width="150"
+            fixed
+          >
+          </el-table-column>
+          <el-table-column
+            v-for="(ite, i) in 12"
+            :key="i"
+            :label="`${ite}月`"
+            align="center"
+            prop="powerOutageDuringHouseholds"
+          >
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-card>
+  </div>
 </template>
 
 <script>
+import { listMaintenanceStatistics } from "@/api/powerdistribution/maintenance";
 export default {
   data() {
-    return {};
+    return {
+      dataList: [],
+      // 遮罩层
+      loading: true,
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.loading = true;
+      listMaintenanceStatistics({
+        ...this.queryParams,
+      }).then((response) => {
+        this.dataList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
   },
 };
 </script>
-
-<style></style>
+<style lang="scss" scoped>
+.table {
+  // height: calc(100% - 150px);
+}
+::v-deep {
+  .el-table {
+    height: 100%;
+    width: 100%;
+    .el-table__body-wrapper {
+      width: 100% !important;
+      height: calc(100% - 50px) !important; // 表格高度减去表头的高度
+      overflow-y: scroll;
+    }
+  }
+}
+.mt15 {
+  margin-top: 15px;
+}
+</style>