416 lines
11 KiB
Vue
416 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 过滤筛选: <el-input v-model="search" clearable size="small" style="width: 250px" placeholder="筛选数据"/> -->
|
||
<!-- <el-button @click="exportExcel" style="float:right;margin-bottom:10px" size="small" type="primary">导出Excel文件</el-button> -->
|
||
|
||
<el-table
|
||
stripe
|
||
:data="tables"
|
||
style="width: 100%; margin-bottom: 10px"
|
||
row-key="id"
|
||
id="rebateSetTable"
|
||
border
|
||
:height="tableheight + 'px'"
|
||
:header-cell-style="{
|
||
//background:'#5E95E8',
|
||
//color:'#FFFFFF',
|
||
height: '25px',
|
||
padding: '0px',
|
||
}"
|
||
header-cell-class-name="table_header"
|
||
:row-style="{ height: '25px' }"
|
||
:cell-style="{ padding: '0px' }"
|
||
:default-expand-all="false"
|
||
@sort-change="sortchange"
|
||
>
|
||
<el-table-column
|
||
prop="name"
|
||
:label="typedata"
|
||
sortable
|
||
width="120"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="cj"
|
||
label="线监测点数量(个)"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="zd"
|
||
label="超标监测点数量(个)"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="cs"
|
||
label="超标监测点占比(%)"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column align="center" label="频率偏差超标情况" width="120">
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="标点数(天/点)"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="占比（%）"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="平均超标天数（天/点）"
|
||
sortable
|
||
width="210"
|
||
></el-table-column>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
label="电压偏差超标情况"
|
||
sortable
|
||
width="170"
|
||
>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="标点数(天/点)"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="超标占比（%）"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="平均超标天数（天/点）"
|
||
sortable
|
||
width="210"
|
||
></el-table-column>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
label="谐波电压超标情况"
|
||
sortable
|
||
width="200"
|
||
>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="标点数(天/点)"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="超标占比（%）"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="平均超标天数（天/点）"
|
||
sortable
|
||
width="210"
|
||
></el-table-column>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
label="谐波电流超标情况"
|
||
sortable
|
||
width="150"
|
||
>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="标点数(天/点)"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="超标占比（%）"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="平均超标天数（天/点）"
|
||
sortable
|
||
width="210"
|
||
></el-table-column>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
label="三相电压不平衡度超标情况"
|
||
sortable
|
||
width="150"
|
||
>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="标点数(天/点)"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="超标占比（%）"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="平均超标天数（天/点）"
|
||
sortable
|
||
width="210"
|
||
></el-table-column>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="闪变超标情况" sortable width="180">
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="标点数(天/点)"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="超标占比（%）"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="平均超标天数（天/点）"
|
||
sortable
|
||
width="210"
|
||
></el-table-column>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
label="负序电流超标情况"
|
||
sortable
|
||
width="150"
|
||
>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="标点数(天/点)"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="超标占比（%）"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="平均超标天数（天/点）"
|
||
sortable
|
||
width="210"
|
||
></el-table-column>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
label="间谐波电压超标情况"
|
||
sortable
|
||
width="150"
|
||
>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="标点数(天/点)"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="超标占比（%）"
|
||
sortable
|
||
width="170"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="sort"
|
||
label="平均超标天数（天/点）"
|
||
sortable
|
||
width="210"
|
||
></el-table-column>
|
||
</el-table-column>
|
||
</el-table>
|
||
<pagination
|
||
:pageData="pageData"
|
||
@changePageNum="changePageNum"
|
||
@changePageSize="changePageSize"
|
||
></pagination>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { getheight } from "../../assets/commjs/common";
|
||
import pagination from "../components/pagination/index";
|
||
import FileSaver from "file-saver";
|
||
import XLSX from "xlsx";
|
||
import json2csv from "json2csv";
|
||
export default {
|
||
computed: {
|
||
// 实时监听表格
|
||
tables: function () {
|
||
const search = this.search;
|
||
if (search) {
|
||
return this.tableData.filter((dataNews) => {
|
||
return Object.keys(dataNews).some((key) => {
|
||
return String(dataNews[key]).toLowerCase().indexOf(search) > -1;
|
||
});
|
||
});
|
||
}
|
||
return this.tableData;
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
search: "",
|
||
typedata: "电网拓扑",
|
||
tableheight: undefined,
|
||
pageData: {
|
||
pageNum: 3,
|
||
pageSize: 15,
|
||
total: 100,
|
||
},
|
||
tableData: [],
|
||
};
|
||
},
|
||
watch: {
|
||
classvalue: function (a, b) {
|
||
if (a == 0) {
|
||
this.typedata = "电网拓扑";
|
||
} else if (a == 1) {
|
||
this.typedata = "终端厂家";
|
||
} else if (a == 2) {
|
||
this.typedata = "电压等级";
|
||
} else if (a == 3) {
|
||
this.typedata = "干扰源类型";
|
||
} else if (a == 4) {
|
||
this.typedata = "灿能上报";
|
||
}
|
||
},
|
||
},
|
||
props: {
|
||
type: Number,
|
||
classvalue: undefined,
|
||
},
|
||
components: {
|
||
pagination,
|
||
},
|
||
created() {},
|
||
mounted() {
|
||
//this.tableheight = (getheight()*2.02)
|
||
},
|
||
methods: {
|
||
// 判断是否IE浏览器
|
||
MyBrowserIsIE() {
|
||
let isIE = false;
|
||
if (
|
||
navigator.userAgent.indexOf("compatible") > -1 &&
|
||
navigator.userAgent.indexOf("MSIE") > -1
|
||
) {
|
||
// ie浏览器
|
||
isIE = true;
|
||
}
|
||
if (navigator.userAgent.indexOf("Trident") > -1) {
|
||
// edge 浏览器
|
||
isIE = true;
|
||
}
|
||
return isIE;
|
||
},
|
||
//创建a标签下载
|
||
createDownLoadClick(content, fileName) {
|
||
const link = document.createElement("a");
|
||
link.href = encodeURI(content);
|
||
link.download = fileName;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
},
|
||
exporeCSV(rows) {
|
||
try {
|
||
const result = json2csv.parse(rows, {
|
||
// fields: fields,
|
||
excelStrings: true,
|
||
});
|
||
if (this.MyBrowserIsIE()) {
|
||
// IE10以及Edge浏览器
|
||
var BOM = "\uFEFF";
|
||
// 文件转Blob格式
|
||
var csvData = new Blob([BOM + result], { type: "text/csv" });
|
||
navigator.msSaveBlob(csvData, `导出数据.csv`);
|
||
} else {
|
||
let csvContent = "data:text/csv;charset=utf-8,\uFEFF" + result;
|
||
// 非ie 浏览器
|
||
this.createDownLoadClick(csvContent, `导出数据.csv`);
|
||
}
|
||
} catch (err) {
|
||
alert(err);
|
||
}
|
||
},
|
||
exportExcel() {
|
||
/* generate workbook object from table */
|
||
let wb = XLSX.utils.table_to_book(
|
||
document.querySelector("#rebateSetTable")
|
||
);
|
||
/* get binary string as output */
|
||
let wbout = XLSX.write(wb, {
|
||
bookType: "xlsx",
|
||
bookSST: true,
|
||
type: "array",
|
||
});
|
||
try {
|
||
FileSaver.saveAs(
|
||
new Blob([wbout], { type: "application/octet-stream" }),
|
||
"数据表.xlsx"
|
||
);
|
||
} catch (e) {
|
||
if (typeof console !== "undefined"){}// console.log(e, wbout);
|
||
}
|
||
return wbout;
|
||
},
|
||
changePageNum(data) {
|
||
this.pageData.pageNum = data;
|
||
alert("父组件当前页" + this.pageData.pageNum);
|
||
},
|
||
changePageSize(data) {
|
||
this.pageData.pageSize = data;
|
||
alert("父组件当前条数" + this.pageData.pageSize);
|
||
},
|
||
sortchange() {},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
</style> |