jn_sis_zhfx/src/components/coms/table/table-qc.vue

<template>
  <table class="com-table">
    <thead>
      <tr>
        <th
          v-for="(col, index) of data.column"
          :key="index"
          :class="{ light: col.is_light }"
          :style="{ width: col.width }"
          @click="onSort(col)"
        >
          {{ col.name }}
        </th>
      </tr>
    </thead>
    <!-- <el-scrollbar> -->
    <tbody>
      <tr v-for="(row, index) of tableData" :key="index">
        <td
          v-for="(col, i) of data.column"
          :key="i"
          :style="{ width: col.width }"
          :class="{
            light: hoverRow == row || hoverCol == col,
            num: col.is_num,
            'always-light': col.is_light || row.is_light,
          }"
          @mouseenter="hover(row, col)"
          @mouseleave="leave()"
        >
          <component
            :is="col.type ? col.type : 'div'"
            v-bind="col.props"
            v-html="template(col, row[col.field])"
            @click="onClick(col, row)"
          ></component>
        </td>
      </tr>
    </tbody>
    <!-- </el-scrollbar> -->
    <el-pagination
      class="mg-t-8"
      v-if="pageable"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="data.total"
    ></el-pagination>
    <el-dialog
      :title="dialogTitle"
      v-model="dialogShow"
      width="70%"
      top="40px"
      custom-class="modal"
      :close-on-click-modal="true"
    >
      <div class="chart" id="chartDiv" height="500px"></div>
    </el-dialog>
  </table>
</template>

<script>
import * as echarts from "echarts";
export default {
  // 名称
  name: "ComTable",
  // 使用组件
  components: {},
  // 传入参数
  props: {
    data: Object,
    // hover 样式
    showHover: {
      type: Boolean,
      default: true,
    },
    // 列高亮
    showColHover: {
      type: Boolean,
      default: false,
    },
    canScroll: {
      type: Boolean,
      default: true,
    },
    pageSize: {
      type: Number,
      default: 0,
    },
    height: {
      type: String,
      default: "",
    },
  },
  // 自定义事件
  emits: {
    // 分页事件
    onPagging: null,
  },
  // 数据
  data() {
    let that = this;
    return {
      hoverRow: -1,
      hoverCol: -1,
      sortCol: "",
      sortType: "",
      currentPage: 1,
      dialogShow: false,
      dialogTitle: "",
      dialogData: {},
      myChart: null,
    };
  },
  computed: {
    tableData() {
      let that = this;
      if (this.sortCol == "") {
        return this.data.data;
      } else {
        let data = this.data.data;

        data.sort((a, b) => {
          let rev = 1;
          if (that.sortType == "ASC") rev = 1;
          else if (that.sortType == "DESC") rev = -1;

          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
          return 0;
        });
        return data;
      }
    },
    pageable() {
      return this.pageSize != 0;
    },
    pages() {
      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
      else return 0;
    },
    startRow() {
      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
      else return 0;
    },
    endRow() {
      if (this.pageable) return this.currentPage * this.pageSize;
      else return this.data.data.length;
    },
  },
  // 函数
  methods: {
    clearCheckBox(time) {
      this.$nextTick(() => {
        setTimeout(() => {
          const domArray = document.querySelectorAll(".curCheckBox");
          for (let i = 0; i < domArray.length; i++) {
            domArray[i].checked = false;
          }
        }, time || 300);
      });
    },
    onClick(col, row) {
      const curIndex = row.curIndex;
      this.clearChart();
      let subUrl = "";
      let data = {};
      let method = "GET";
      if ("deviationRate2" == col.field) {
        data.type = "sjbz";
      } else if ("deviationRate1" == col.field) {
        data.type = "sjzy";
      } else if ("deviationRate3" == col.field) {
        data.type = "zybz";
      } else if ("monthDeviationRate" == col.field) {
        data.type = "hb";
      } else if ("yearDeviationRate" == col.field) {
        data.type = "tb";
      } else if ("standardDeviationRate" == col.field) {
        data.type = "bg";
      } else {
        return 0;
      }

      if (curIndex) {
        if (data.type.length < 2) {
          subUrl = "/leaderboard/getCurvechatAjax";
        } else {
          subUrl = "/leaderboard/curvechatAjaxhb";
        }
      } else {
        if (data.type.length < 2) {
          subUrl = "/leaderboard/curveMonthchatAjax";
        } else {
          subUrl = "/leaderboard/curveMonthchatAjaxtb";
        }
      }

      this.dialogShow = true;
      this.dialogTitle = "曲线偏差率排行";

      if (curIndex) {
        data.recorddate = row.recordDate;
      } else {
        data.year = row.year;
        data.month = row.month;
      }

      data["wtId"] = row.windturbineId;

      let that = this;
      that.API.requestData({
        baseURL: process.env.VUE_APP_NEW_WISDOM,
        method,
        subUrl,
        data,
        success(res) {
          if (res.code === 200) {
            const linedata1 = [];
            const linedata2 = [];
            const names = [res.data.name1, res.data.name2];
            res.data.datas.forEach((item, index) => {
              linedata1.push(item["value2"]);
              linedata2.push(item["value3"]);
            });

            that.dialogShow = true;
            that.dialogTitle = "曲线偏差率排行";
            that.initChart(linedata1, linedata2, names);
          }
        },
      });
    },
    clearChart() {
      const chartDom = document.getElementById("chartDiv");
      chartDom && chartDom.removeAttribute("_echarts_instance_");
    },
    initChart(data1, data2, names) {
      let that = this;
      let myChart = echarts.init(document.getElementById("chartDiv"));
      let option = {
        color: ["#05bb4c", "#4b55ae"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          show: true,
          data: names,
          right: 56,
          icon: "circle",
          itemWidth: 6,
          inactiveColor: "#606769",
          textStyle: {
            color: "#B3BDC0",
            fontSize: 12,
          },
        },
        grid: {
          top: 32,
          left: 40,
          right: 40,
          bottom: 24,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              fontSize: 9.35925925925926,
              textStyle: {
                color: "#606769",
              },
            },
            axisLine: {
              show: false,
            },
            data: [
              "0",
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
              "13",
              "14",
              "15",
              "16",
              "17",
              "18",
              "19",
              "20",
              "21",
              "22",
              "23",
              "24",
              "25",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "(W)",
            axisLabel: {
              formatter: "{value}",
              fontSize: 9.35925925925926,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#606769",
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: names[0],
            type: "line",
            smooth: true,
            showSymbol: false,
            zlevel: 0,
            lineStyle: {
              normal: {
                color: "#05bb4c",
                width: 1,
              },
              emphasis: {
                color: "#05bb4c",
              },
            },
            areaStyle: {
              normal: {
                color: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(5,187,76,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(5,187,76,0.1)",
                    },
                  ],
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                },
                shadowColor: "rgba(5,187,76,0.1)",
                shadowBlur: 10,
              },
              emphasis: {
                color: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(5,187,76,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(5,187,76,0.1)",
                    },
                  ],
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                },
                shadowColor: "rgba(5,187,76,0.1)",
                shadowBlur: 10,
              },
            },

            yAxisIndex: 0,
            data: data1,
          },
          {
            name: names[1],
            type: "line",
            smooth: true,
            showSymbol: false,
            zlevel: 2,
            lineStyle: {
              normal: {
                color: "#606769",
                width: 1,
              },
              emphasis: {
                color: "#fa8c16",
              },
            },
            areaStyle: {
              normal: {
                color: "transparent",
                shadowColor: "rgba(250,140,22,0.1)",
                shadowBlur: 10,
              },
              emphasis: {
                color: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(250,140,22,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(250,140,22,0.1)",
                    },
                  ],
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                },
                shadowColor: "rgba(250,140,22,0.1)",
                shadowBlur: 10,
              },
            },

            yAxisIndex: 0,
            data: data2,
          },
        ],
      };
      myChart.clear();
      myChart.setOption(option);
      this.resize = function () {
        myChart.resize();
      };
      window.addEventListener("resize", this.resize);
      myChart.resize();
    },
    onSort(col) {
      if (col.sortable == true) {
        this.sortCol = col.field;
        switch (this.sortType) {
          case "":
            this.sortType = "DESC";
            break;
          case "DESC":
            this.sortType = "ASC";
            break;
          case "ASC":
            this.sortType = "";
            break;
        }
      }
    },
    template(col, data) {
      if (!col.template) return data;
      else return col.template(data);
    },
    hover(row, col) {
      if (this.showHover) {
        this.hoverRow = row;
        if (this.showColHover) this.hoverCol = col;
      }
    },
    leave() {
      this.hoverRow = -1;
      this.hoverCol = -1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.$emit("onPagging", {
        pageIndex: this.currentPage,
        pageSize: this.pageSize,
        start: this.startRow,
        end: this.endRow,
      });
    },
  },
  // 生命周期钩子
  // 创建前
  beforeCreate() {},
  // 创建后
  created() {},
  // 渲染前
  beforeMount() {},
  // 渲染后
  mounted() {},
  beforeUpdate() {},
  updated() {},
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 500px;
}
::v-deep.com-table {
  height: calc(100% - 51px);
  thead {
    height: 24px;
  }
  tbody {
    height: calc(100% - 24px);
    overflow-y: auto;
  }
}
</style>