hb_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 :style="{ height: height }">
        <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="10vh" 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() {
    return {
      hoverRow: -1,
      hoverCol: -1,
      sortCol: "",
      sortType: "",
      currentPage: 1,
      dialogShow: false,
      dialogTitle:"",
      dialogData:{},
    };
  },
  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, data) {
      this.dialogShow = true;
      this.dialogTitle="曲线偏差率排行";
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let pdate = this.$parent.date.split("-");
      if(pdate && pdate.length>1){
        year = pdate[0];
        month = pdate[1];
      }

      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl:"/leaderboard/curveMonthchatAjax",
        data: {
          wtId  : data.fj,
          month : month,
          type  :"zybz",
          year  : year
        },
        success (res) {
          if (res.code === 200) {
            const linedata1 = [];
            const linedata2 = [];
            
            res.data.datas.forEach((item, index) => {
              linedata1.push(item['value2']);
              linedata2.push(item['value3']);
            });
            
            that.dialogShow = true;
            that.dialogTitle="曲线偏差率排行";
            that.initChart(linedata1,linedata2);
          }
        }
      });
    },
    initChart(data1,data2){
      let myChart = echarts.init(document.getElementById('chartDiv'));
      let option = {
        "color": [
            "#05bb4c",
            "#4b55ae",
        ],
        tooltip: {
            trigger: 'axis'
        },
        "legend": {
            "show": true,
            "data": [
                "最优功率",
                "保证功率",
            ],
            "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": "最优功率",
                "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": "保证功率",
                "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 && myChart && 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">
.chart {
  width: 1000px;
  height: 500px;
}
</style>