chore: 调整

src/views/distributionnetwork/power-outage-control/completion-status/index.vue

@@ -5,8 +5,12 @@
       <el-tab-pane label="总目标">
         <OverallObjectiveTable></OverallObjectiveTable>
       </el-tab-pane>
-      <el-tab-pane label="故障停电目标">故障停电目标</el-tab-pane>
-      <el-tab-pane label="计划停电目标">计划停电目标</el-tab-pane>
+      <el-tab-pane label="故障停电目标">
+        <OverallObjectiveTable></OverallObjectiveTable>
+      </el-tab-pane>
+      <el-tab-pane label="计划停电目标">
+        <OverallObjectiveTable></OverallObjectiveTable>
+      </el-tab-pane>
     </el-tabs>
   </div>
 </template>

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

@@ -1,120 +1,96 @@
 <template>
   <!-- 目标展板 -->
   <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-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+      <el-form-item label="" prop="year">
+        <el-date-picker
+          v-model="queryParams.year"
+          type="year"
+          format="yyyy"
+          value-format="yyyy"
+          placeholder="选择年"
+          :clearable="false"
+          @change="getList"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <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"
@@ -123,20 +99,11 @@
             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>
+        <el-table-column
+          label="中压用户预安排停电月度总时长目标"
+          align="center"
+        >
           <el-table-column
             v-for="(ite, i) in 12"
             :key="i"
@@ -145,20 +112,8 @@
             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>
+        <el-table-column label="中压用户故障停电月度总时长目标" align="center">
           <el-table-column
             v-for="(ite, i) in 12"
             :key="i"
@@ -167,9 +122,72 @@
             prop="powerOutageDuringHouseholds"
           >
           </el-table-column>
-        </el-table>
-      </div>
-    </el-card>
+        </el-table-column>
+      </el-table>
+    </div>
+    <el-divider></el-divider>
+    <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-divider></el-divider>
+    <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-divider></el-divider>
+    <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>
   </div>
 </template>
 
@@ -185,6 +203,7 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
+        year: "",
       },
     };
   },
@@ -203,6 +222,17 @@ export default {
         this.loading = false;
       });
     },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams.pageNum = 1;
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
   },
 };
 </script>
@@ -222,6 +252,6 @@ export default {
   }
 }
 .mt15 {
-  margin-top: 15px;
+  margin-top: 20px;
 }
 </style>