等级评估 添加历史查询弹窗

src/components/coms/table/table-unpage.vue

@@ -0,0 +1,215 @@
+<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>
+  </table>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    /**
+             * {
+                    column: [{
+                        name: "风机名称",
+                        field: "name",
+                        type:'div',
+                        width:'', // 宽度
+                        is_num: false, // 是否为数字
+                        is_light: false, // 是否高亮
+                        template:function(){ }
+                        click:function(){} //点击事件
+                        sortable:fasle // 排序
+                        // 新增用于在表格中使用动态三方组件
+                        type:'el-tag', // * 新增 用于传入三方组件名称 实现三方组件引入  component :is 方式实现
+                        props:{}, // * 新增 用户传入三方组件的 props 与type同时使用
+                    },{
+                        name: "冷却风温度",
+                        field: "lqf",
+                        is_num: true,
+                        is_light: false
+                    }],
+                    data: [{
+                        name: "1E01",
+                        lqf: 15.78,
+                        is_light: false
+                    }],
+                    total:200
+                }
+             */
+    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,
+    };
+  },
+  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) {
+      if (col.click) col.click(event, data);
+    },
+    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">
+</style>

src/views/HealthControl/gradeHistory.vue

@@ -0,0 +1,279 @@
+<template>
+  <div>
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item" v-if="option.shows == 'd'">
+          <div class="lable">日期：</div>
+          <div class="search-input">
+            <el-date-picker
+              v-model="option.date"
+              type="date"
+              placeholder="选择日期"
+              popper-class="date-select"
+              value-format="YYYY-MM-DD"
+            ></el-date-picker>
+          </div>
+        </div>
+        <div class="query-item" v-if="option.shows == 'm'">
+          <div class="lable">年月：</div>
+          <div class="search-input">
+            <el-date-picker
+              v-model="option.date"
+              type="month"
+              placeholder="选择年月"
+              popper-class="date-select"
+              value-format="YYYY-MM"
+            ></el-date-picker>
+          </div>
+        </div>
+        <div class="query-item" v-if="option.shows == 'y'">
+          <div class="lable">年：</div>
+          <div class="search-input">
+            <el-date-picker
+              v-model="option.date"
+              type="year"
+              placeholder="选择年"
+              popper-class="date-select"
+              value-format="YYYY"
+            ></el-date-picker>
+          </div>
+        </div>
+        <div class="query-actions">
+          <button class="btn green" @click="getTable">查询</button>
+        </div>
+      </div>
+    </div>
+    <div class="table-box">
+      <Table
+        ref="curRef"
+        :data="hisData"
+        height="90vh"
+        v-loading="tableLoading"
+        element-loading-text="拼命加载中.."
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      ></Table>
+    </div>
+  </div>
+</template>
+<script>
+import Table from "@/components/coms/table/table-unpage.vue";
+export default {
+  name: "gradeHistory",
+  components: { Table },
+  props: {
+    gridDatas: {},
+    option: Object
+  },
+  data() {
+    return {
+      tableLoading: false,
+      hisData: {
+        column: [
+          {
+            name: "风机编号",
+            field: "windturbineid",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "日期",
+            field: "recorddate",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id",
+            template: function(data) {
+              return new Date(data).formatDate("yyyy-MM-dd");
+            }
+          },
+          {
+            name: "发电量(kWh)",
+            field: "dayfdl",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "理论发电量(kWh)",
+            field: "dayllfdl",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "平均风速(m/s)",
+            field: "dayfs",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "平均功率(kW)",
+            field: "daygl",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "故障损失电量(kWh)",
+            field: "daygzssdl",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "限电损失电量(kWh)",
+            field: "dayxdssdl",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "维护损失电量(kWh)",
+            field: "daywhssdl",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "性能损失电量(kWh)",
+            field: "dayxnssdl",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "利用小时数(h)",
+            field: "daylyxs",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "拟合优度(%)",
+            field: "daynhyd",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "设备可利用率(%)",
+            field: "daysbklyl",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "等效可用系数(%)",
+            field: "daydxkyxs",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "有效风时数(h)",
+            field: "dayyxfss",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "平均切入风速(m/s)",
+            field: "dayxfqr",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "静风频率(%)",
+            field: "dayjfpl",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          },
+          {
+            name: "功率一致性系数(%)",
+            field: "dayglyzxxs",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+            id: "id"
+          }
+        ],
+        data: [{ a: "aaa" }]
+      }
+    };
+  },
+  created() {
+    this.getTable();
+  },
+  beforeUpdate() {},
+  methods: {
+    getTable() {
+      let that = this;
+      let subUrl = "";
+      const data = {
+        wtId: this.option["windturbineid"]
+      };
+      if ("d" == this.option.shows) {
+        subUrl = "/benchmarking/gadayhistlist";
+        data["recorddate"] = this.option["date"];
+      }
+      if ("m" == this.option.shows) {
+        subUrl = "/benchmarking/gamonthhistlist";
+        const dateStr = this.option["date"].split("-");
+        if (dateStr.length > 1) {
+          data["year"] = dateStr[0];
+          data["month"] = dateStr[1];
+        }
+      }
+      if ("y" == this.option.shows) {
+        subUrl = "/benchmarking/gayearhistlist";
+        data["year"] = this.option["date"];
+      }
+      that.tableLoading = true;
+      that.API.requestData({
+        timeout: 60000,
+        method: "POST",
+        subUrl: subUrl,
+        data: data,
+        success(res) {
+          console.log(res);
+          that.tableLoading = false;
+          if (res.code === 200) {
+            var data = [];
+            res.data.forEach((item, index) => {
+              item["index"] = index;
+              data[index] = item;
+            });
+            that.hisData.data = data;
+          }
+        },
+        Error(res) {
+          console.log("tag", res);
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less">
+</style>

src/views/HealthControl/gradeassessment.vue

@@ -74,6 +74,7 @@
         ref="curRef"
         :data="tableData"
         :pageSize="20"
+        :pageable=false
         height="73vh"
         v-loading="tableLoading"
         element-loading-text="拼命加载中.."
@@ -83,14 +84,19 @@
     <el-dialog :title="dialogTitle" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal">
       <dayinfo :gridDatas="dialogData1" :chartDatas="dialogData2" />
     </el-dialog>
+    <el-dialog :title="'历史数据查询>>'+hisDialogTitle" v-model="hisDialogVisible" width="90%" top="10vh" custom-class="modal">
+      <gradeHistory :option="hisOption" ref="gradeHistory"/>
+    </el-dialog>
   </div>
 </template>
 <script>
-import ComTable from "@/components/coms/table/table.vue";
+import ComTable from "@/components/coms/table/table-unpage.vue";
 import Dayinfo from "./dayinfo.vue";
+import GradeHistory from "./gradeHistory.vue";
+
 export default {
   name: "gradeassessment",
-  components: { ComTable, Dayinfo },
+  components: { ComTable, Dayinfo, GradeHistory },
   data() {
     let that = this;
     return {
@@ -102,6 +108,8 @@ export default {
       ],
       dialogTitle: "日信息对比",
       dialogVisible: false,
+      hisDialogVisible: false,
+      hisDialogTitle:"",
       ChangZhan: [],
       value1: "XS_FDC",
       date: "",
@@ -111,6 +119,7 @@ export default {
       dataIds: new Set(),
       dialogData1: [],
       dialogData2: [],
+      hisOption:{},
       tableData: {
         column: [
           {
@@ -296,44 +305,55 @@ export default {
             sortable: true,
             id: "id",
             template: () => {
-              return "<a class='action'>详情</a>";
+              return "<a href='javascript:void(0);' value='xq'>详情</a>&nbsp;<a href='javascript:void(0);' value='ls'>历史</a>";
             },
             click: function(event, data) {
-              that.dialogVisible = true;
-              that.dialogData1 = [data];
-              const service1 = {
-                name: data.windturbineid,
-                value: [
-                  data["yearxfqr"],
-                  data["yearxnssdl"],
-                  data["yearnhyd"],
-                  data["yearglyzxxs"],
-                  data["yearlyxs"],
-                  data["yearsbklyl"],
-                  data["yeardxkyxs"],
-                  data["yearyxfss"],
-                  data["yearfs"],
-                  data["yearjfpl"]
-                ]
-              };
-              const chartData = [
-                {
-                  indicator: [
-                    "平均切入风速",
-                    "性能损失电量",
-                    "拟合优度",
-                    "功率一致性系数",
-                    "利用小时",
-                    "设备可利用率",
-                    "等效可利用系数",
-                    "有效风时数",
-                    "平均风速",
-                    "静风频率"
-                  ],
-                  data: [service1]
-                }
-              ];
-              that.dialogData2 = chartData;
+              if('xq' == event.target.getAttribute("value")){
+                that.dialogVisible = true;
+                that.dialogData1 = [data];
+                const service1 = {
+                  name: data.windturbineid,
+                  value: [
+                    data["yearxfqr"],
+                    data["yearxnssdl"],
+                    data["yearnhyd"],
+                    data["yearglyzxxs"],
+                    data["yearlyxs"],
+                    data["yearsbklyl"],
+                    data["yeardxkyxs"],
+                    data["yearyxfss"],
+                    data["yearfs"],
+                    data["yearjfpl"]
+                  ]
+                };
+                const chartData = [
+                  {
+                    indicator: [
+                      "平均切入风速",
+                      "性能损失电量",
+                      "拟合优度",
+                      "功率一致性系数",
+                      "利用小时",
+                      "设备可利用率",
+                      "等效可利用系数",
+                      "有效风时数",
+                      "平均风速",
+                      "静风频率"
+                    ],
+                    data: [service1]
+                  }
+                ];
+                that.dialogData2 = chartData;
+              }
+              if('ls' == event.target.getAttribute("value")){
+                that.hisOption["shows"] = that.shows;
+                that.hisOption["date"] = that.date;
+                that.hisOption["windturbineid"] = data.windturbineid;
+                console.log(that.$refs);
+                that.hisDialogTitle = data.windturbineid;
+                that.hisDialogVisible = true;
+                that.$refs.gradeHistory.getTable();
+              }
             }
           }
         ],