chote: 目标展板调整

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

@@ -0,0 +1,174 @@
+<template>
+  <el-dialog
+    :title="'导入'"
+    :visible.sync="dialog"
+    width="500px"
+    append-to-body
+    @close="cancelForm"
+  >
+    <div class="demo-drawer__content" style="padding: 0 20px">
+      <el-form
+        ref="formRef"
+        :model="form"
+        label-position="left"
+        label-width="50px"
+        :rules="rules"
+        hide-required-asterisk
+      >
+        <el-row :gutter="10">
+          <el-col :span="24">
+            <el-form-item label="日期" prop="reportYear">
+              <el-date-picker
+                v-model="form.reportYear"
+                type="year"
+                format="yyyy"
+                value-format="yyyy"
+                placeholder="选择年"
+                :clearable="false"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="文件">
+              <el-upload
+                class="upload-demo"
+                ref="upload"
+                accept=".xls,.xlsx"
+                :limit="1"
+                :multiple="false"
+                action="#"
+                :on-preview="handlePreview"
+                :on-remove="handleRemove"
+                :file-list="fileList"
+                :on-change="handleChange"
+                :before-upload="beforeUpload"
+                :http-request="uploadHttpRequest"
+                :auto-upload="false"
+              >
+                <el-button slot="trigger" size="small" plain type="primary"
+                  >选取文件</el-button
+                >
+              </el-upload>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="cancelForm">取 消 </el-button>
+      <el-button type="primary" @click="handleClose" :loading="loading">{{
+        loading ? "提交中 ..." : "确 定"
+      }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { importF } from "@/api/powerdistribution/power-outage-control";
+export default {
+  data() {
+    return {
+      form: {
+        reportYear: `${new Date().getFullYear()}`,
+      },
+      loading: false,
+      dialog: false,
+      fileList: [],
+      rules: {
+        reportYear: [
+          { required: true, message: "请选择日期", trigger: "change" },
+        ],
+      },
+    };
+  },
+  methods: {
+    openModel() {
+      this.dialog = true;
+    },
+    // 文件上传之前的操作
+    beforeUpload(file) {
+      // 文件类型
+      const isType = file.type === "application/vnd.ms-excel";
+      const isTypeComputer =
+        file.type ===
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+      const fileType = isType || isTypeComputer;
+      if (!fileType) {
+        console.log("上传文件只能是xls/xlsx格式！");
+      }
+
+      // 文件大小限制为20M
+      const fileLimit = file.size / 1024 / 1024 < 20;
+      if (!fileLimit) {
+        console.log("上传文件大小不超过20M！");
+      }
+      // 返回判断条件,false停止上传
+      return fileType && fileLimit;
+    },
+    handleChange(file, fileList) {
+      this.fileList = fileList;
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+      this.fileList = [];
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    // 自定义上传方法，param是默认参数，可以取得file文件信息，具体信息如下图
+    uploadHttpRequest(param) {
+      this.loading = true;
+      let data = new FormData();
+      data.append("file", param.file);
+      data.append("reportYear", this.form.reportYear);
+      importF(data)
+        .then((res) => {
+          if (res.code == 200) {
+            this.$message.success("导入成功");
+            this.dialog = false;
+            this.$emit("refresh");
+          } else {
+            this.$message.error("导入失败" || res.msg);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+          this.$refs.upload.clearFiles();
+          this.fileList = [];
+        });
+      this.loading = false;
+    },
+    handleClose(done) {
+      if (this.loading) {
+        return;
+      }
+      this.$refs.formRef.validate(async (v) => {
+        if (!v) return;
+        if (!this.fileList.length) {
+          this.$message.warning("请选择文件");
+          return;
+        }
+        this.$refs.upload.submit();
+      });
+    },
+    cancelForm() {
+      this.form = {
+        reportYear: `${new Date().getFullYear()}`,
+      };
+      this.fileList = [];
+      this.loading = false;
+      this.dialog = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+  .el-drawer.ttb,
+  .el-drawer.btt {
+    height: 90% !important;
+  }
+}
+</style>

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

@@ -73,6 +73,7 @@ export default {
       var option = {
         legend: {
           type: "scroll",
+          top: "10%",
         },
         grid: {
           left: "1%",

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

@@ -66,6 +66,8 @@ export default {
         },
         legend: {
           data: legend,
+          type: "scroll",
+          top: "10%",
         },
         grid: {
           left: "1%",

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

@@ -42,24 +42,14 @@
           @click="handleExport"
           >导出模版</el-button
         >
-        <el-upload
-          class="upload-demo"
-          style="display: inline; margin-left: 10px"
-          :data="flelist"
-          :action="url"
-          :headers="headers"
-          :on-success="handleImportSuccess"
-          :before-upload="handleBeforeUpload"
-          :show-file-list="false"
-          :auto-upload="true"
+        <el-button type="primary" size="mini" @click="handleImport"
+          >导入</el-button
         >
-          <el-button type="primary" size="mini">导入</el-button>
-        </el-upload>
       </el-col>
       <el-radio-group
         style="margin-left: 8px"
         size="mini"
-        v-model="hasList"
+        v-model="currentType"
         @change="getList"
       >
         <el-radio-button label="列表"></el-radio-button>
@@ -70,7 +60,7 @@
         @queryTable="getList"
       ></right-toolbar>
     </el-row>
-    <template v-if="hasList == '列表'">
+    <template v-if="currentType == '列表'">
       <div class="table">
         <el-table ref="renewalTable" v-loading="loading" :data="dataList">
           <el-table-column
@@ -78,6 +68,7 @@
             align="center"
             prop="companyName"
             width="150"
+            :show-overflow-tooltip="true"
             fixed
           >
           </el-table-column>
@@ -145,7 +136,7 @@
               :key="i"
               :label="`${ite}月`"
               align="center"
-              :prop="`stopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
+              :prop="`stopTimeMonth${i + 1 < 10 ? '0' + (i + 1) : i + 1}`"
             >
             </el-table-column>
           </el-table-column>
@@ -158,7 +149,7 @@
               :key="i"
               :label="`${ite}月`"
               align="center"
-              :prop="`planStopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
+              :prop="`planStopTimeMonth${i + 1 < 10 ? '0' + (i + 1) : i + 1}`"
             >
             </el-table-column>
           </el-table-column>
@@ -171,13 +162,13 @@
               :key="i"
               :label="`${ite}月`"
               align="center"
-              :prop="`errorStopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
+              :prop="`errorStopTimeMonth${i + 1 < 10 ? '0' + (i + 1) : i + 1}`"
             >
             </el-table-column>
           </el-table-column>
         </el-table>
       </div>
-      <!-- <el-divider></el-divider>
+      <el-divider></el-divider>
       <div class="table">
         <el-table ref="renewalTable" v-loading="loading" :data="dataList">
           <el-table-column
@@ -185,6 +176,7 @@
             align="center"
             prop="companyName"
             width="150"
+            :show-overflow-tooltip="true"
             fixed
           >
           </el-table-column>
@@ -193,7 +185,7 @@
             :key="i"
             :label="`${ite}月`"
             align="center"
-            :prop="`stopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
+            :prop="`stopTimeMonth${i + 1 < 10 ? '0' + (i + 1) : i + 1}`"
           >
           </el-table-column>
         </el-table>
@@ -206,6 +198,7 @@
             align="center"
             prop="companyName"
             width="150"
+            :show-overflow-tooltip="true"
             fixed
           >
           </el-table-column>
@@ -214,7 +207,7 @@
             :key="i"
             :label="`${ite}月`"
             align="center"
-            :prop="`planStopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
+            :prop="`planStopTimeMonth${i + 1 < 10 ? '0' + (i + 1) : i + 1}`"
           >
           </el-table-column>
         </el-table>
@@ -227,6 +220,7 @@
             align="center"
             prop="companyName"
             width="150"
+            :show-overflow-tooltip="true"
             fixed
           >
           </el-table-column>
@@ -235,45 +229,45 @@
             :key="i"
             :label="`${ite}月`"
             align="center"
-            :prop="`errorStopTimeMonth${i < 10 ? '0' + (i + 1) : i + 1}`"
+            :prop="`errorStopTimeMonth${i + 1 < 10 ? '0' + (i + 1) : i + 1}`"
           >
           </el-table-column>
         </el-table>
-      </div> -->
+      </div>
     </template>
-    <el-row :gutter="10" v-show="hasList != '列表'" v-loading="loading">
-      <el-col :span="24">
+    <el-row :gutter="10" v-show="currentType != '列表'" v-loading="loading">
+      <el-col :span="6">
         <el-card header="" class="mb8">
           <TargetBar height="250px" ref="targetBarRef"></TargetBar>
         </el-card>
       </el-col>
-      <!-- <el-col :span="6">
-        <el-card header="中压用户停电月度总时长目标" class="mb8">
+      <el-col :span="6">
+        <el-card class="mb8">
           <TargetLine
             height="250px"
-            id="zyStopTimeMonth"
-            ref="zyStopTargetLineRef"
+            id="stopTimeMonth"
+            ref="stopTargetLineRef"
           ></TargetLine>
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card header="中压用户预安排停电月度总时长目标" class="mb8">
+        <el-card class="mb8">
           <TargetLine
             height="250px"
-            id="zyPlanStopTimeMonth"
-            ref="zyPlanStopTimeMonthRef"
+            id="planStopTimeMonth"
+            ref="planStopTargetLineRef"
           ></TargetLine>
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card header="中压用户故障停电月度总时长目标" class="mb8">
+        <el-card>
           <TargetLine
             height="250px"
-            id="zyErrorStopTimeMonth"
-            ref="zyErrorStopTimeMonthRef"
+            id="errorStopTimeMonth"
+            ref="errorStopTargetLineRef"
           ></TargetLine>
         </el-card>
-      </el-col> -->
+      </el-col>
       <el-col :span="24">
         <el-card class="mb8">
           <TargetLine
@@ -302,20 +296,20 @@
         </el-card>
       </el-col>
     </el-row>
+    <ImportModel ref="importModelRef" @refresh="getList"></ImportModel>
   </div>
 </template>
 
 <script>
 import {
   list,
-  importF,
   downloadTemplate,
 } from "@/api/powerdistribution/power-outage-control";
 import TargetLine from "./components/TargetLine.vue";
 import TargetBar from "./components/TargetBar.vue";
-import { getToken } from "@/utils/auth";
+import ImportModel from "./components/ImportModel.vue";
 export default {
-  components: { TargetLine, TargetBar },
+  components: { TargetLine, TargetBar, ImportModel },
   data() {
     return {
       dataList: [],
@@ -323,17 +317,12 @@ export default {
       // 遮罩层
       loading: true,
       total: 0,
-      flelist: null,
-      url: "",
-      headers: {
-        Authorization: "Bearer " + getToken(),
-      },
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         reportYear: `${new Date().getFullYear()}`,
       },
-      hasList: "列表",
+      currentType: "列表",
     };
   },
   created() {
@@ -348,40 +337,28 @@ export default {
       }).then((response) => {
         this.dataList = response.rows;
         this.loading = false;
-        this.$refs.targetBarRef.initEcharts(response.rows, "xxx");
-        this.$refs.stopTargetLineRef.initEcharts(response.rows, "月度占比");
-        this.$refs.planStopTargetLineRef.initEcharts(
-          response.rows,
-          "月度预安排占比"
-        );
-        this.$refs.errorStopTargetLineRef.initEcharts(
-          response.rows,
-          "月度故障占比"
-        );
-        this.$refs.errorStopTargetLineRef.initEcharts(
-          response.rows,
-          "月度故障占比"
-        );
-        this.$refs.zyPlanStopTargetLineRef.initEcharts(response.rows);
-        this.$refs.zyStopTargetLineRef.initEcharts(response.rows);
-        this.$refs.zyErrorStopTargetLineRef.initEcharts(response.rows);
+        if (this.currentType == "图表") {
+          this.$refs.targetBarRef.initEcharts(this.dataList, "xxx");
+          this.$refs.stopTargetLineRef.initEcharts(
+            this.dataList,
+            "中压用户停电月度总时长目标"
+          );
+          this.$refs.planStopTargetLineRef.initEcharts(
+            this.dataList,
+            "中压用户预安排停电月度总时长目标"
+          );
+          this.$refs.errorStopTargetLineRef.initEcharts(
+            this.dataList,
+            "中压用户故障停电月度总时长目标"
+          );
+          // this.$refs.zyPlanStopTargetLineRef.initEcharts(this.dataList);
+          // this.$refs.zyStopTargetLineRef.initEcharts(this.dataList);
+          // this.$refs.zyErrorStopTargetLineRef.initEcharts(this.dataList);
+        }
       });
     },
-    //导入
-    handleImportSuccess(res) {
-      console.log(res, "res");
-    },
-    //导入前
-    async handleBeforeUpload(val) {
-      let data = new FormData();
-      data.append("file", val);
-      data.append("reportYear", this.queryParams.reportYear);
-      let res = await importF(data);
-      if (res.code == 200) {
-        this.$message.success("导入成功");
-      } else {
-        this.$message.error("导入失败" || res.msg);
-      }
+    handleImport() {
+      this.$refs.importModelRef.openModel();
     },
     async handleExport() {
       const res = await downloadTemplate();