hb_sis_zhfx/src/views/specific/whssl.vue

<template>
  <div class="ztfx">
    <div class="action-bar">
      <div class="query mg-b-16">
        <div class="query-items">
          <div class="query-item">
            <div class="lable">日期：</div>
            <div class="search-input">
              <el-date-picker
                v-model="monthValue"
                type="year"
                placeholder="选择年份"
                popper-class="date-select"
                :clearable="false"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="query-item">
            <div class="search-input select-btn">
              <button class="btn green" @click="onClickSearch">搜索</button>
            </div>
            <div class="search-input select-btn">
              <button class="btn green" @click="exportPDF">导出</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-row :gutter="20" class="table-panel pdfDom">
      <el-col :span="24">
        <!-- <panel :title="'月度'" :showLine="false"> -->
        <div class="table">
          <table style="width: 100%" border="0" cellspacing="0">
            <thead>
              <tr>
                <th rowspan="2" class="type1" style="width: 4vh"></th>
                <template v-for="m of monthData" :key="m">
                  <th style="width: 6vh" class="type1" rowspan="2">{{ m }}</th>
                </template>
              </tr>
            </thead>
          </table>
          <div style="">
            <table
              style="width: 100%; text-align: center"
              border="0"
              cellspacing="0"
            >
              <tbody>
                <tr>
                  <td style="width: 4vh"></td>
                  <template v-for="(x, i) of MhsLists" :key="i">
                    <td style="width: 3vh">本期</td>
                    <td style="width: 3vh">同期</td>
                  </template>
                </tr>
                <tr>
                  <td class="td-item" style="width: 4vh">麻黄山</td>
                  <template v-for="(item, index) of MhsLists" :key="index">
                    <td style="width: 3vh">
                      {{ item.current }}
                      <template v-if="item.compare === -1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="item.compare === 1">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width: 3vh">
                      {{ item.sameperiod }}
                    </td>
                  </template>
                </tr>
                <tr>
                  <td class="td-item" style="width: 4vh">牛首山</td>
                  <template v-for="(item, index) of NshList" :key="index">
                    <td style="width: 3vh">
                      {{ item.current }}
                      <template v-if="item.compare === -1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="item.compare === 1">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width: 3vh">
                      {{ item.sameperiod }}
                    </td>
                  </template>
                </tr>
                <tr>
                  <td class="td-item" style="width: 4vh">青山</td>
                  <template v-for="(item, index) of QshList" :key="index">
                    <td style="width: 3vh">
                      {{ item.current }}
                      <template v-if="item.compare === -1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="item.compare === 1">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width: 3vh">
                      {{ item.sameperiod }}
                    </td>
                  </template>
                </tr>
                <tr>
                  <td class="td-item" style="width: 4vh">石板泉</td>
                  <template v-for="(item, index) of SbaqList" :key="index">
                    <td style="width: 3vh">
                      {{ item.current }}
                      <template v-if="item.compare === -1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="item.compare === 1">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width: 3vh">
                      {{ item.sameperiod }}
                    </td>
                  </template>
                </tr>
                <tr>
                  <td class="td-item" style="width: 4vh">香山</td>
                  <template v-for="(item, index) of XshList" :key="index">
                    <td style="width: 3vh">
                      {{ item.current }}
                      <template v-if="item.compare === -1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="item.compare === 1">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width: 3vh">
                      {{ item.sameperiod }}
                    </td>
                  </template>
                </tr>
                <tr>
                  <td class="td-item" style="width: 4vh">公司</td>
                  <template v-for="(item, index) of GsList" :key="index">
                    <td style="width: 3vh">
                      {{ item.current }}
                      <template v-if="item.compare === -1">
                        <span class="svg-icon svg-icon-yellow">
                          <svg-icon svgid="svg-arrow-dpwn-1" />
                        </span>
                      </template>
                      <template v-if="item.compare === 1">
                        <span class="svg-icon svg-icon-green">
                          <svg-icon svgid="svg-arrow-up-1" />
                        </span>
                      </template>
                    </td>
                    <td style="width: 3vh">
                      {{ item.sameperiod }}
                    </td>
                  </template>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- </el-scrollbar> -->
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="table-panel">
      <el-col :span="24">
        <panel title="公司维护损失率分析" :showLine="false">
          <!-- <vertival-bar-line-chart
            :height="'360px'"
            :units="units"
            :bardata="bardata"
            :lineData="lineData"
          /> -->

          <MultipleLineChart
            :list="DayPower.value"
            :units="DayPower.units"
            height="40vh"
            :showLegend="true"
          />
          <!-- :units="units"
            :bardata="bardata"
            :lineData="lineData" -->
        </panel>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
// import VertivalBarLineChart from "../../components/chart/bar/list-bar-chart.vue";
import MultipleLineChart from "../../components/chart/bar/multiple-bar-chart.vue";
import Panel from "../../components/coms/panel/panel.vue";
import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import Get_PDF from "@tools/htmlToPdf";
export default {
  setup() {},
  components: {
    Panel,
    DualPieChart,
    SvgIcon,
    // VertivalBarLineChart,
    MultipleLineChart,
  },
  data() {
    return {
      monthData: [],
      MhsLists: [],
      NshList: [],
      QshList: [],
      SbaqList: [],
      XshList: [],
      GsList: [],
      units: [],
      nowCurrent: 1,
      months: new Date().getMonth() + 1,
      pickerOptions: {},
      bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
      lineData: [],
      timmer: null,
      monthValue: this.getmonthValue(),
      list: [],
      DayPower: {
        // 图表所用单位
        units: [""],
        value: [
          {
            title: "",
            yAxisIndex: 0, // 使用单位
            value: [],
          },
        ],
      },
    };
  },
  created() {
    let _this = this;
    // _this.$nextTick(() => {
    _this.getLists(false);
    //   _this.timmer = setInterval(() => {
    //     _this.getLists(false)
    //   }, _this.$store.state.websocketTimeSec);
    // });
  },
  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
  },
  mounted() {},
  methods: {
    exportPDF(name) {
      this.BASE.showMsg({
        type: "success",
        msg: "正在导出...请稍后...",
      });
      Get_PDF.downloadPDF(document.querySelector(".pdfDom"), "维护损失率");
    },
    getmonthValue() {
      let year = new Date().getFullYear().toString();
      return year;
    },
    onClickSearch() {
      this.getLists(false);
    },
    monthChange(data) {
      let year = data.getFullYear().toString();
      return year;
    },

    isNumber(val) {
      return typeof val === "number" && !isNaN(val);
    },
    getLists(showLoading) {
      let MhsLists = [];
      let NshList = [];
      let QshList = [];
      let SbaqList = [];
      let XshList = [];
      let GsList = [];
      let _this = this;
      let year = "";
      if (typeof this.monthValue === "string") {
        year = this.monthValue;
      } else {
        year = this.monthChange(this.monthValue);
      }
      const site = ["compare", "year", "month"];
      _this.API.requestData({
        showLoading,
        method: "GET",
        baseURL: "http://10.155.32.4:8034",
        subUrl: "/specific/whsslList",
        data: {
          year: year,
        },
        success(res) {
          console.log(res);
          _this.list = res.data.map((item) => {
            for (let key in item) {
              if (!site.includes(key)) {
                if (_this.isNumber(item[key])) {
                  item[key] = item[key].toFixed(2);
                } else if (!item[key]) {
                  item[key] = 0;
                  item[key] = item[key].toFixed(2);
                }
              }
            }
            if (item.wpid === "MHS_FDC") {
              MhsLists.push(item);
            } else if (item.wpid === "NSS_FDC") {
              NshList.push(item);
            } else if (item.wpid === "QS_FDC") {
              QshList.push(item);
            } else if (item.wpid === "NSS_FDC") {
              NshList.push(item);
            } else if (item.wpid === "SBQ_FDC") {
              SbaqList.push(item);
            } else if (item.wpid === "XS_FDC") {
              XshList.push(item);
            } else {
              GsList.push(item);
            }
          });

          _this.MhsLists = MhsLists.sort(_this.compare("month"));
          _this.NshList = NshList.sort(_this.compare("month"));
          _this.QshList = QshList.sort(_this.compare("month"));
          _this.SbaqList = SbaqList.sort(_this.compare("month"));
          _this.XshList = XshList.sort(_this.compare("month"));
          _this.GsList = GsList.sort(_this.compare("month"));

          let nowCureent = [];
          let sameCureent = [];
          let monthData = [];
          let monthsAll = [];
          _this.GsList.map((item) => {
            let objs = {};
            let obj = {};
            monthsAll.push(item.month);
            if (item.month > 10) {
              objs.text = item.month.toString();
              obj.text = item.month.toString();
            } else {
              item.text = "0" + item.month;
              objs.text = item.text;
              obj.text = item.text;
            }
            for (let key in item) {
              if (key === "current") {
                objs.value = item.current;
                nowCureent.push(objs);
              } else if (key === "sameperiod") {
                obj.value = item.sameperiod;
                sameCureent.push(obj);
              }
            }
          });
          _this.monthData = monthsAll;
          _this.DayPower = {
            // 图表所用单位
            units: [""],
            value: [
              {
                title: "本期",
                yAxisIndex: 0, // 使用单位
                value: nowCureent,
                // nowCureent
              },
              {
                title: "同期",
                yAxisIndex: 0, // 使用单位
                value: sameCureent,
                // sameCureent
              },
            ],
          };

          // _this.DayPower = {
          //   // 图表所用单位
          //   units: [""],
          //   value: [
          //     {
          //       title: "本期",
          //       yAxisIndex: 0, // 使用单位
          //       value: [],
          //     },
          //     {
          //       title: "同期",
          //       yAxisIndex: 0, // 使用单位
          //       value: [],
          //     },
          //   ],
          // },
          // _this.bardata.legend = ["本期", "同期"]
          // _this.lineData = [];
          // _this.bardata.area = monthData;
          // _this.bardata.data[0] = sameCureent;
          // _this.bardata.data[1] = nowCureent;
        },
      });
    },
    compare(property) {
      return (a, b) => {
        let val1 = a[property];
        let val2 = b[property];
        return val1 - val2;
      };
    },
  },
};
</script>

<style lang="less">
.ztfx {
  font-size: 12px;
  .select-btn {
    width: 92px;
  }
  .com-panel {
    border: 1px solid #6067697d;
  }
  .table-complex {
    margin-top: 10px;
    .table {
      border: 1px solid #6067697d;
      tbody {
        tr:nth-child(2n) td {
          background-color: fade(@gray, 20%);

          &.item {
            background-color: transparent;
          }
        }
      }

      th {
        background: fade(@gray, 40);
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        color: @gray-l;

        &.type1 {
          border-left: 0;
          border-right: 0;
        }
      }
      td {
        color: @gray-l;
        text-align: center;
        height: 26px;
        line-height: 26px;

        // &.item {
        //   width: 100px;
        // }
      }
      svg {
        height: 1.222vh;
      }
    }
  }
  .table-panel {
    margin-top: 10px;
    .panel-header {
      text-align: center;
    }
    .table {
      border: 1px solid #6067697d;
      tbody {
        tr:nth-child(2n) td {
          background-color: fade(@gray, 20%);

          &.item {
            background-color: transparent;
          }
        }
      }
      .td-item {
        width: 6vh;
      }
      th {
        background: fade(@gray, 40);
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
        color: @gray-l;

        &.type1 {
          border-left: 0;
          border-right: 0;
          height: 4vh;
        }
      }
      td {
        color: @gray-l;
        text-align: center;
        height: 46px;
        line-height: 46px;

        &.item {
          width: 100px;
        }
      }
      svg {
        height: 1.222vh;
      }
    }
  }
  .pie-chart-panel {
    margin-top: 10px;
    .line {
      border: none;
    }
  }
}
</style>