hb_sis_zhfx/src/views/specific/ztzhl.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/ztzhlList",
          data:{
            year: year
          },
          success(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>