c

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

@@ -4,7 +4,9 @@
 
 <script>
 import * as echarts from "echarts";
+import resize from "../../../../dashboard/mixins/resize";
 export default {
+  mixins: [resize],
   props: {
     chartOptions: {
       type: Object,

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

@@ -4,7 +4,9 @@
 
 <script>
 import * as echarts from "echarts";
+import resize from "../../../../dashboard/mixins/resize";
 export default {
+  mixins: [resize],
   props: {
     chartOptions: {
       type: Object,

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

@@ -241,36 +241,92 @@
       </div>
     </template>
     <el-row :gutter="10" v-show="currentType != '列表'" v-loading="loading">
-      <el-col :span="6">
-        <el-card header="" class="mb8">
+      <el-col :span="rowColNum[0]">
+        <el-card class="mb8 relative">
           <TargetBar height="350px" ref="targetBarRef"></TargetBar>
+          <el-tooltip class="item" effect="dark" content="放大" placement="top">
+            <i
+              v-show="rowColNum[0] == 6"
+              class="el-icon-zoom-in abs"
+              @click="handleEnlarge(0)"
+            ></i>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" content="缩小" placement="top">
+            <i
+              v-show="rowColNum[0] == 24"
+              class="el-icon-zoom-out abs2"
+              @click="handleNarrow(0)"
+            ></i>
+          </el-tooltip>
         </el-card>
       </el-col>
-      <el-col :span="6">
-        <el-card class="mb8">
+      <el-col :span="rowColNum[1]">
+        <el-card class="mb8 relative">
           <TargetLine
             height="350px"
             id="stopTimeMonth"
             ref="stopTargetLineRef"
           ></TargetLine>
+          <el-tooltip class="item" effect="dark" content="放大" placement="top">
+            <i
+              v-show="rowColNum[1] == 6"
+              class="el-icon-zoom-in abs"
+              @click="handleEnlarge(1)"
+            ></i>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" content="缩小" placement="top">
+            <i
+              v-show="rowColNum[1] == 24"
+              class="el-icon-zoom-out abs2"
+              @click="handleNarrow(1)"
+            ></i>
+          </el-tooltip>
         </el-card>
       </el-col>
-      <el-col :span="6">
-        <el-card class="mb8">
+      <el-col :span="rowColNum[2]">
+        <el-card class="mb8 relative">
           <TargetLine
             height="350px"
             id="planStopTimeMonth"
             ref="planStopTargetLineRef"
           ></TargetLine>
+          <el-tooltip class="item" effect="dark" content="放大" placement="top">
+            <i
+              v-show="rowColNum[2] == 6"
+              class="el-icon-zoom-in abs"
+              @click="handleEnlarge(2)"
+            ></i>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" content="缩小" placement="top">
+            <i
+              v-show="rowColNum[2] == 24"
+              class="el-icon-zoom-out abs2"
+              @click="handleNarrow(2)"
+            ></i>
+          </el-tooltip>
         </el-card>
       </el-col>
-      <el-col :span="6">
-        <el-card>
+      <el-col :span="rowColNum[3]">
+        <el-card class="mb8 relative">
           <TargetLine
             height="350px"
             id="errorStopTimeMonth"
             ref="errorStopTargetLineRef"
           ></TargetLine>
+          <el-tooltip class="item" effect="dark" content="放大" placement="top">
+            <i
+              v-show="rowColNum[3] == 6"
+              class="el-icon-zoom-in abs"
+              @click="handleEnlarge(3)"
+            ></i>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" content="缩小" placement="top">
+            <i
+              v-show="rowColNum[3] == 24"
+              class="el-icon-zoom-out abs2"
+              @click="handleNarrow(3)"
+            ></i>
+          </el-tooltip>
         </el-card>
       </el-col>
       <el-col :span="24">
@@ -328,12 +384,22 @@ export default {
         reportYear: `${new Date().getFullYear()}`,
       },
       currentType: "列表",
+      rowColNum: [6, 6, 6, 6],
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    handleEnlarge(i) {
+      this.rowColNum = this.rowColNum.map(() => 0);
+      this.rowColNum[i] = 24;
+      this.initChart();
+    },
+    handleNarrow(i) {
+      this.rowColNum = this.rowColNum.map(() => 6);
+      this.initChart();
+    },
     /** 查询列表 */
     getList() {
       this.loading = true;
@@ -343,25 +409,28 @@ export default {
         this.dataList = response.rows;
         this.loading = false;
         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.initChart();
           // this.$refs.zyPlanStopTargetLineRef.initEcharts(this.dataList);
           // this.$refs.zyStopTargetLineRef.initEcharts(this.dataList);
           // this.$refs.zyErrorStopTargetLineRef.initEcharts(this.dataList);
         }
       });
     },
+    initChart() {
+      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,
+        "中压用户故障停电月度总时长目标"
+      );
+    },
     handleImport() {
       this.$refs.importModelRef.openModel();
     },
@@ -412,4 +481,19 @@ export default {
 .mt15 {
   margin-top: 20px;
 }
+.relative {
+  position: relative;
+}
+.abs {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;
+}
+.abs2 {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;
+}
 </style>

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

@@ -0,0 +1,161 @@
+<template>
+  <!-- 目标展板 -->
+  <div class="app-container" style="overflow-y: scroll">
+    <el-form
+      ref="formRef"
+      size="small"
+      :model="form"
+      :rules="rules"
+      :inline="true"
+      hide-required-asterisk
+    >
+      <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-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="mini" plain type="primary"
+            >选取文件</el-button
+          >
+        </el-upload>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-upload2"
+          size="mini"
+          @click="submit"
+          :loading="loading"
+          >导入</el-button
+        >
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { importF } from "@/api/powerdistribution/power-outage-control";
+export default {
+  data() {
+    return {
+      form: {
+        reportYear: `${new Date().getFullYear()}`,
+      },
+      loading: false,
+      fileList: [],
+      rules: {
+        reportYear: [
+          { required: true, message: "请选择日期", trigger: "change" },
+        ],
+      },
+    };
+  },
+  created() {},
+  methods: {
+    submit() {
+      this.$refs.formRef.validate(async (v) => {
+        if (!v) return;
+        if (!this.fileList.length) {
+          this.$message.warning("请选择文件");
+          return;
+        }
+        this.$refs.upload.submit();
+      });
+    },
+    // 文件上传之前的操作
+    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("导入成功");
+          } else {
+            this.$message.error("导入失败" || res.msg);
+          }
+          this.$refs.upload.clearFiles();
+          this.fileList = [];
+        })
+        .catch((err) => {
+          console.log(err);
+          this.$refs.upload.clearFiles();
+          this.fileList = [];
+        });
+      this.loading = false;
+    },
+  },
+};
+</script>
+<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: 20px;
+}
+</style>

src/views/home/components/points-ranking/index.vue

@@ -100,6 +100,9 @@ export default {
   .el-table tr {
     background-color: transparent !important;
   }
+  .el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: rgba(11, 42, 96, 0.8) !important;
+  }
 }
 .flex-center {
   display: flex;