1169 lines
33 KiB
Vue
1169 lines
33 KiB
Vue
<template>
|
|
<div>
|
|
<el-row v-show="bg">
|
|
<el-col :span="12">
|
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
<el-form-item label="指标:">
|
|
<el-select
|
|
v-model="value"
|
|
multiple
|
|
collapse-tags
|
|
placeholder="请选择"
|
|
style="width: 100%"
|
|
>
|
|
<el-option-group
|
|
v-for="group in options"
|
|
:key="group.label"
|
|
:label="group.label"
|
|
>
|
|
<el-option
|
|
v-for="item in group.options"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-option-group>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="筛选:">
|
|
<el-input
|
|
v-model="search"
|
|
placeholder="输入关键字搜索"
|
|
style="width: 89%"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item v-if="xb" label="谐波:">
|
|
<el-select
|
|
v-model="harmonic"
|
|
multiple
|
|
collapse-tags
|
|
placeholder="请选择谐波"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="item in harmonicoptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item v-if="jxb" label="间谐波:">
|
|
<el-select
|
|
v-model="inharmonic"
|
|
multiple
|
|
collapse-tags
|
|
placeholder="请选择谐波"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="item in inharmonicoptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-col>
|
|
<el-col v-if="bg" :span="10" :offset="6" style="margin-top: -43px">
|
|
<timeindex
|
|
:id="id"
|
|
@querfromdata="querfromdata"
|
|
:interval="interval"
|
|
:treenode="treenode"
|
|
:dataTree="dataTree"
|
|
></timeindex>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row v-show="bg">
|
|
<el-col :span="24">
|
|
<!-- 过滤筛选: <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%"
|
|
row-key="id"
|
|
id="rebateSetTable"
|
|
border
|
|
v-loading="loading"
|
|
height="calc(100vh - 125px)"
|
|
:header-cell-style="{
|
|
height: '25px',
|
|
padding: '0px',
|
|
}"
|
|
header-cell-class-name="table_header"
|
|
:row-style="{ height: '25px' }"
|
|
:cell-style="{ padding: '0px' }"
|
|
:default-expand-all="false"
|
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
>
|
|
<el-table-column
|
|
align="center"
|
|
prop="subName"
|
|
label="站点"
|
|
sortable
|
|
width="200"
|
|
></el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
prop="lineName"
|
|
label="监测点名称"
|
|
:show-overflow-tooltip="true"
|
|
sortable
|
|
width="200"
|
|
></el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
prop="targetName"
|
|
label="指标类型"
|
|
sortable
|
|
width="250"
|
|
></el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
prop="phaseType"
|
|
label="相别"
|
|
sortable
|
|
></el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
prop="scale"
|
|
label="电压等级"
|
|
sortable
|
|
width="150"
|
|
></el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
prop="timeId"
|
|
label="时间"
|
|
sortable
|
|
width="180"
|
|
></el-table-column>
|
|
<el-table-column
|
|
align="center"
|
|
prop="unit"
|
|
label="单位"
|
|
sortable
|
|
></el-table-column>
|
|
<el-table-column align="center" prop="maxData" label="最大值">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
v-if="scope.row.statisticalType == 3"
|
|
@click="maxvalue(scope.row)"
|
|
style="color: red"
|
|
type="text"
|
|
size="small"
|
|
>{{ scope.row.maxData }}</el-button
|
|
>
|
|
<el-button
|
|
v-if="
|
|
scope.row.statisticalType !== 3 &&
|
|
scope.row.cp95Data !== 3.14159
|
|
"
|
|
@click="maxvalue(scope.row)"
|
|
type="text"
|
|
size="small"
|
|
>{{ scope.row.maxData }}</el-button
|
|
>
|
|
<el-button
|
|
v-if="
|
|
scope.row.statisticalType !== 3 &&
|
|
scope.row.maxData == 3.14159
|
|
"
|
|
type="text"
|
|
size="small"
|
|
>--</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="minData" label="最小值">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
v-if="scope.row.statisticalType == 2"
|
|
@click="minvalue(scope.row)"
|
|
style="color: red"
|
|
type="text"
|
|
size="small"
|
|
>{{ scope.row.minData }}</el-button
|
|
>
|
|
<el-button
|
|
v-if="
|
|
scope.row.statisticalType !== 2 &&
|
|
scope.row.cp95Data !== 3.14159
|
|
"
|
|
@click="minvalue(scope.row)"
|
|
type="text"
|
|
size="small"
|
|
>{{ scope.row.minData }}</el-button
|
|
>
|
|
<el-button
|
|
v-if="
|
|
scope.row.statisticalType !== 2 &&
|
|
scope.row.minData == 3.14159
|
|
"
|
|
type="text"
|
|
size="small"
|
|
>--</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="avgData" label="平均值">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
v-if="scope.row.statisticalType == 1"
|
|
@click="avgvalue(scope.row)"
|
|
style="color: red"
|
|
type="text"
|
|
size="small"
|
|
>{{ scope.row.avgData }}</el-button
|
|
>
|
|
<el-button
|
|
v-if="
|
|
scope.row.statisticalType !== 1 &&
|
|
scope.row.cp95Data !== 3.14159
|
|
"
|
|
@click="avgvalue(scope.row)"
|
|
type="text"
|
|
size="small"
|
|
>{{ scope.row.avgData }}</el-button
|
|
>
|
|
<el-button
|
|
v-if="
|
|
scope.row.statisticalType !== 1 &&
|
|
scope.row.avgvalue == 3.14159
|
|
"
|
|
type="text"
|
|
size="small"
|
|
>--</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="cp95Data" label="CP95值">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
v-if="scope.row.statisticalType == 4"
|
|
@click="cp95value(scope.row)"
|
|
style="color: red"
|
|
type="text"
|
|
size="small"
|
|
>{{ scope.row.cp95Data }}</el-button
|
|
>
|
|
<el-button
|
|
v-if="
|
|
scope.row.statisticalType !== 4 &&
|
|
scope.row.cp95Data !== 3.14159
|
|
"
|
|
@click="cp95value(scope.row)"
|
|
type="text"
|
|
size="small"
|
|
>{{ scope.row.cp95Data }}</el-button
|
|
>
|
|
<el-button
|
|
v-if="
|
|
scope.row.statisticalType !== 4 &&
|
|
scope.row.cp95Data == 3.14159
|
|
"
|
|
type="text"
|
|
size="small"
|
|
>--</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column align="center" prop="cp95Value" label="国限值" fixed="right">
|
|
<template slot-scope="scope">
|
|
<el-button v-if="scope.row.statisticalType==4" @click="cp95value(scope.row)" style="color:red;" type="text" size="small">{{scope.row.cp95Value}}</el-button>
|
|
<el-button v-if="scope.row.statisticalType !==4" @click="cp95value(scope.row)" type="text" size="small">{{scope.row.cp95Value}}</el-button>
|
|
</template>
|
|
</el-table-column> -->
|
|
</el-table>
|
|
<!-- <pagination :pageData="pageData" @changePageNum="changePageNum" @changePageSize="changePageSize"></pagination> -->
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row v-show="tu">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-close"
|
|
size="small"
|
|
style="float: right"
|
|
@click="backgg"
|
|
>返回</el-button
|
|
>
|
|
<el-col :span="24">
|
|
<div
|
|
ref="llk"
|
|
id="qshfx"
|
|
:style="'width:100%;height:calc(100vh - 100px);zoom:' + device"
|
|
></div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getheight } from "../../assets/commjs/common";
|
|
import { A, B, C, AB, BC, CA } from "../../assets/commjs/color";
|
|
import timeindex from "../components/TimePicker/timeindex2";
|
|
import pagination from "../components/pagination/index";
|
|
import api from "@/api/harmonic/onlineData";
|
|
import FileSaver from "file-saver";
|
|
import echarts from "echarts";
|
|
import XLSX from "xlsx";
|
|
import json2csv from "json2csv";
|
|
|
|
export default {
|
|
components: {
|
|
timeindex,
|
|
pagination,
|
|
},
|
|
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 {
|
|
loading: true,
|
|
formInline: {},
|
|
bg: true,
|
|
tu: false,
|
|
rowname: "",
|
|
pttype: 0,
|
|
phaseType: "",
|
|
dialogTableVisible: false,
|
|
search: "",
|
|
tableData: [],
|
|
echartsheight: undefined,
|
|
value: ["40"],
|
|
//指标类型
|
|
options2: [
|
|
{
|
|
label: "电压趋势",
|
|
options: [
|
|
{
|
|
value: "12",
|
|
label: "电压偏差",
|
|
},
|
|
{
|
|
value: "15",
|
|
label: "电压总谐波畸变率",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "电流趋势",
|
|
options: [
|
|
{
|
|
value: "22",
|
|
label: "负序电流",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "频率趋势",
|
|
options: [
|
|
{
|
|
value: "30",
|
|
label: "频率",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "谐波趋势",
|
|
options: [
|
|
{
|
|
value: "40",
|
|
label: "谐波电压含有率",
|
|
},
|
|
{
|
|
value: "43",
|
|
label: "谐波电流幅值",
|
|
},
|
|
{
|
|
value: "46",
|
|
label: "间谐波电压含有率",
|
|
},
|
|
{
|
|
value: "47",
|
|
label: "间谐波电流含有率",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "闪变趋势",
|
|
options: [
|
|
{
|
|
value: "61",
|
|
label: "长时电压闪变",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
//参数
|
|
formData: {
|
|
condition: [],
|
|
harmonics: [],
|
|
inHarmonics: [],
|
|
// lineId: [],
|
|
searchBeginTime: "",
|
|
searchEndTime: "",
|
|
},
|
|
interval: 4,
|
|
device: 1,
|
|
limit: 8,
|
|
limit2: 8,
|
|
span1: 5,
|
|
span2: 14,
|
|
n: 40,
|
|
m: 75,
|
|
options: [
|
|
{
|
|
label: "电压趋势",
|
|
options: [
|
|
{
|
|
value: "12",
|
|
label: "电压偏差",
|
|
},
|
|
{
|
|
value: "15",
|
|
label: "电压总谐波畸变率",
|
|
},
|
|
{
|
|
value: "13",
|
|
label: "三相电压不平衡",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "电流趋势",
|
|
options: [
|
|
{
|
|
value: "22",
|
|
label: "负序电流",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "频率趋势",
|
|
options: [
|
|
{
|
|
value: "30",
|
|
label: "频率",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "谐波趋势",
|
|
options: [
|
|
{
|
|
value: "40",
|
|
label: "谐波电压含有率",
|
|
},
|
|
{
|
|
value: "43",
|
|
label: "谐波电流幅值",
|
|
},
|
|
{
|
|
value: "46",
|
|
label: "间谐波电压含有率",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: "闪变趋势",
|
|
options: [
|
|
{
|
|
value: "61",
|
|
label: "长时电压闪变",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
xb: false,
|
|
jxb: false,
|
|
checked: true,
|
|
checkbox: true,
|
|
tableheight: undefined,
|
|
id: 1,
|
|
harmonic: [333],
|
|
harmonicoptions: [
|
|
{ label: "全部", value: 333 },
|
|
{ label: "偶次", value: 222 },
|
|
{ label: "奇次", value: 111 },
|
|
{ label: "2次", value: 2 },
|
|
{ label: "3次", value: 3 },
|
|
{ label: "4次", value: 4 },
|
|
{ label: "5次", value: 5 },
|
|
{ label: "6次", value: 6 },
|
|
{ label: "7次", value: 7 },
|
|
{ label: "8次", value: 8 },
|
|
{ label: "9次", value: 9 },
|
|
{ label: "10次", value: 10 },
|
|
{ label: "11次", value: 11 },
|
|
{ label: "12次", value: 12 },
|
|
{ label: "13次", value: 13 },
|
|
{ label: "14次", value: 14 },
|
|
{ label: "15次", value: 15 },
|
|
{ label: "16次", value: 16 },
|
|
{ label: "17次", value: 17 },
|
|
{ label: "18次", value: 18 },
|
|
{ label: "19次", value: 19 },
|
|
{ label: "20次", value: 20 },
|
|
{ label: "21次", value: 21 },
|
|
{ label: "22次", value: 22 },
|
|
{ label: "23次", value: 23 },
|
|
{ label: "24次", value: 24 },
|
|
{ label: "25次", value: 25 },
|
|
],
|
|
inharmonic: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
|
|
inharmonicoptions: [
|
|
{ label: "0.5次", value: 1 },
|
|
{ label: "1.5次", value: 2 },
|
|
{ label: "2.5次", value: 3 },
|
|
{ label: "3.5次", value: 4 },
|
|
{ label: "4.5次", value: 5 },
|
|
{ label: "5.5次", value: 6 },
|
|
{ label: "6.5次", value: 7 },
|
|
{ label: "7.5次", value: 8 },
|
|
{ label: "8.5次", value: 9 },
|
|
{ label: "9.5次", value: 10 },
|
|
{ label: "10.5次", value: 11 },
|
|
{ label: "11.5次", value: 12 },
|
|
{ label: "12.5次", value: 13 },
|
|
{ label: "13.5次", value: 14 },
|
|
{ label: "14.5次", value: 15 },
|
|
{ label: "15.5次", value: 16 },
|
|
],
|
|
number: 333,
|
|
list: [],
|
|
disabled: false,
|
|
};
|
|
},
|
|
|
|
props: {
|
|
treenode: {
|
|
type: Object,
|
|
default: undefined,
|
|
},
|
|
dataTree: {
|
|
type: Array,
|
|
default: undefined,
|
|
},
|
|
linelist: {
|
|
type: Array,
|
|
default: undefined,
|
|
},
|
|
view: {
|
|
type: Boolean,
|
|
default: undefined,
|
|
},
|
|
},
|
|
watch: {
|
|
value: function (a, b) {
|
|
for (var i = 0; i < a.length; i++) {
|
|
if (a.length == 0) {
|
|
this.xb = false;
|
|
this.jxb = false;
|
|
} else {
|
|
if (a[i] == "40" || a[i] == "43") {
|
|
this.xb = true;
|
|
this.jxb = false;
|
|
} else if (a[i] == "46") {
|
|
this.jxb = true;
|
|
this.xb = false;
|
|
} else if (a[i] == "61") {
|
|
return;
|
|
} else {
|
|
this.xb = false;
|
|
this.jxb = false;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
harmonic: function (a, b) {
|
|
if (a.length !== 0) {
|
|
for (var i = 0; i < a.length; i++) {
|
|
if (a[i] == 111) {
|
|
//奇
|
|
this.number = 111;
|
|
this.limit2 = 1;
|
|
} else if (a[i] == 222) {
|
|
//偶
|
|
this.number = 222;
|
|
} else if (a[i] == 333) {
|
|
//全部
|
|
this.number = 333;
|
|
this.limit2 = 1;
|
|
} else {
|
|
this.number = 555;
|
|
this.limit2 = 24;
|
|
}
|
|
}
|
|
} else {
|
|
this.number = 0;
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
// this.menutree()
|
|
},
|
|
mounted() {
|
|
// this.echartsheight= (getheight()*1.92)
|
|
this.device = window.devicePixelRatio;
|
|
// const width = document.documentElement.clientWidth || document.body.clientWidth
|
|
// this.device = 1/(width / 1920)
|
|
// if(this.device==1){
|
|
// this.tableheight = (getheight()*1.82)
|
|
// this.echartsheight =getheight()*1.92
|
|
// }else if(this.device==1.25){
|
|
// this.echartsheight =getheight()*0.8
|
|
// }else if(this.device==1.5){
|
|
// this.echartsheight =getheight()*0.75
|
|
// }
|
|
},
|
|
methods: {
|
|
menutree() {
|
|
var data = this.checked;
|
|
this.$emit("menuTree", data);
|
|
},
|
|
backgg() {
|
|
this.bg = true;
|
|
this.tu = false;
|
|
this.disabled = false;
|
|
},
|
|
//日期组件触发事件
|
|
querfromdata(data) {
|
|
this.loading = true;
|
|
//监测点赋值
|
|
this.formData.lineId = [];
|
|
this.timeValue = data;
|
|
this.formData.searchBeginTime = data[0];
|
|
this.formData.searchEndTime = data[1];
|
|
this.formData.condition = this.value;
|
|
this.formData.inHarmonics = this.inharmonic;
|
|
if (this.number == 111) {
|
|
this.formData.harmonics = [];
|
|
for (var i = 2; i < 25; i++) {
|
|
if (i % 2 !== 0) {
|
|
this.formData.harmonics.push(i);
|
|
}
|
|
}
|
|
} else if (this.number == 222) {
|
|
this.formData.harmonics = [];
|
|
for (var i = 2; i < 25; i++) {
|
|
if (i % 2 == 0) {
|
|
this.formData.harmonics.push(i);
|
|
}
|
|
}
|
|
} else if (this.number == 333) {
|
|
this.formData.harmonics = [];
|
|
for (var i = 2; i < 25; i++) {
|
|
this.formData.harmonics.push(i);
|
|
}
|
|
} else if (this.number == 555) {
|
|
this.formData.harmonics = this.harmonic;
|
|
}
|
|
api.getHistoryData(this.formData).then((res) => {
|
|
if (res.code == "A0000") {
|
|
this.tableData = res.data;
|
|
this.loading = false;
|
|
}
|
|
});
|
|
},
|
|
//最大值触发
|
|
maxvalue(row) {
|
|
this.disabled = true;
|
|
// this.rowname = row.lineName +'--'+row.targetName+'--'+'最大值趋势分析'
|
|
// this.dialogTableVisible = true
|
|
this.phaseType = row.phaseType;
|
|
this.bg = false;
|
|
this.tu = true;
|
|
var data = {
|
|
lineId: row.lineId,
|
|
number: row.number,
|
|
phaseType: row.phaseType,
|
|
searchTime: row.timeId,
|
|
targetCode: row.targetCode,
|
|
valueType: 3,
|
|
};
|
|
api.getHistoryLineData(data).then((res) => {
|
|
if (res.code == "A0000") {
|
|
this.list = res.data;
|
|
this.list[0].phaiscType[0] = row.phaseType + "相";
|
|
this.datachuli();
|
|
// this.$nextTick(()=>{
|
|
this.trendanalysis(row);
|
|
// })
|
|
}
|
|
});
|
|
},
|
|
//最下值触发
|
|
minvalue(row) {
|
|
this.disabled = true;
|
|
this.phaseType = row.phaseType;
|
|
//this.rowname = row.lineName +'--'+row.targetName+'--'+'最小值趋势分析'
|
|
//this.dialogTableVisible = true
|
|
this.bg = false;
|
|
this.tu = true;
|
|
var data = {
|
|
lineId: row.lineId,
|
|
number: row.number,
|
|
phaseType: row.phaseType,
|
|
searchTime: row.timeId,
|
|
targetCode: row.targetCode,
|
|
valueType: 2,
|
|
};
|
|
api.getHistoryLineData(data).then((res) => {
|
|
if (res.code == "A0000") {
|
|
this.list = res.data;
|
|
this.list[0].phaiscType[0] = row.phaseType + "相";
|
|
this.datachuli();
|
|
// this.$nextTick(()=>{
|
|
this.trendanalysis(row);
|
|
// })
|
|
}
|
|
});
|
|
},
|
|
//平均值触发
|
|
avgvalue(row) {
|
|
this.disabled = true;
|
|
this.phaseType = row.phaseType;
|
|
this.bg = false;
|
|
this.tu = true;
|
|
//this.rowname = row.lineName +'--'+row.targetName+'--'+'平均值趋势分析'
|
|
//this.dialogTableVisible = true
|
|
var data = {
|
|
lineId: row.lineId,
|
|
number: row.number,
|
|
phaseType: row.phaseType,
|
|
searchTime: row.timeId,
|
|
targetCode: row.targetCode,
|
|
valueType: 1,
|
|
};
|
|
api.getHistoryLineData(data).then((res) => {
|
|
if (res.code == "A0000") {
|
|
this.list = res.data;
|
|
this.list[0].phaiscType[0] = row.phaseType + "相";
|
|
this.datachuli();
|
|
// this.$nextTick(()=>{
|
|
this.trendanalysis(row);
|
|
// })
|
|
}
|
|
});
|
|
},
|
|
//CP95值触发
|
|
cp95value(row) {
|
|
this.disabled = true;
|
|
// this.phaseType = row.phaseType
|
|
this.bg = false;
|
|
this.tu = true;
|
|
//this.rowname = row.lineName +'--'+row.targetName+'--'+'cp95值趋势分析'
|
|
//this.dialogTableVisible = true
|
|
var data = {
|
|
lineId: row.lineId,
|
|
number: row.number,
|
|
phaseType: row.phaseType,
|
|
searchTime: row.timeId,
|
|
targetCode: row.targetCode,
|
|
valueType: 4,
|
|
};
|
|
api.getHistoryLineData(data).then((res) => {
|
|
if (res.code == "A0000") {
|
|
this.list = res.data;
|
|
this.list[0].phaiscType[0] = row.phaseType + "相";
|
|
this.datachuli();
|
|
//this.$nextTick(()=>{
|
|
this.trendanalysis(row);
|
|
// })
|
|
}
|
|
});
|
|
},
|
|
// 判断是否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;
|
|
},
|
|
//数据处理
|
|
datachuli() {
|
|
var time = [];
|
|
var value = [];
|
|
var topLimit = [];
|
|
var lowerLimit = [];
|
|
if (this.list[0].value !== null) {
|
|
for (var j = 0; j < this.list[0].value.length; j++) {
|
|
time.push(this.list[0].value[j][0]);
|
|
value.push(this.list[0].value[j][1]);
|
|
}
|
|
this.list[0].time = time;
|
|
this.list[0].value = value;
|
|
for (var k = 0; k < this.list[0].time.length; k++) {
|
|
if (
|
|
this.list[0].topLimit !== null &&
|
|
this.list[0].lowerLimit == null
|
|
) {
|
|
topLimit.push(this.list[0].topLimit);
|
|
} else if (
|
|
this.list[0].lowerLimit == null &&
|
|
this.list[0].lowerLimit !== null
|
|
) {
|
|
lowerLimit.push(this.list[0].lowerLimit);
|
|
} else if (
|
|
this.list[0].lowerLimit !== null &&
|
|
this.list[0].lowerLimit !== null
|
|
) {
|
|
topLimit.push(this.list[0].topLimit);
|
|
lowerLimit.push(this.list[0].lowerLimit);
|
|
}
|
|
}
|
|
this.list[0].topLimit = topLimit;
|
|
this.list[0].lowerLimit = lowerLimit;
|
|
if (
|
|
this.list[0].topLimit !== null &&
|
|
this.list[0].lowerLimit !== null
|
|
) {
|
|
this.list[0].phaiscType.push("上限");
|
|
this.list[0].phaiscType.push("下限");
|
|
this.list[0].seriesData = [
|
|
{
|
|
name: this.list[0].phaiscType[0],
|
|
type: "line",
|
|
symbol: "none",
|
|
smooth: "true",
|
|
sampling: "lttb",
|
|
itemStyle: {
|
|
color: A,
|
|
},
|
|
data: this.list[0].value,
|
|
},
|
|
{
|
|
name: this.list[0].phaiscType[2],
|
|
type: "line",
|
|
smooth: "true",
|
|
symbol: "none",
|
|
sampling: "lttb",
|
|
itemStyle: {
|
|
color: B,
|
|
normal: {
|
|
lineStyle: {
|
|
width: 2,
|
|
type: "dotted", //'dotted'虚线 'solid'实线
|
|
},
|
|
},
|
|
},
|
|
data: this.list[0].lowerLimit,
|
|
},
|
|
{
|
|
name: this.list[0].phaiscType[1],
|
|
type: "line",
|
|
smooth: "true",
|
|
symbol: "none",
|
|
sampling: "lttb",
|
|
itemStyle: {
|
|
color: C,
|
|
normal: {
|
|
lineStyle: {
|
|
width: 2,
|
|
type: "dotted", //'dotted'虚线 'solid'实线
|
|
},
|
|
},
|
|
},
|
|
data: this.list[0].topLimit,
|
|
},
|
|
];
|
|
} else if (
|
|
this.list[0].topLimit !== null &&
|
|
this.list[0].lowerLimit == null
|
|
) {
|
|
this.list[0].phaiscType.push("下限");
|
|
this.list[0].seriesData = [
|
|
{
|
|
name: this.list[0].phaiscType[0],
|
|
type: "line",
|
|
symbol: "none",
|
|
smooth: "true",
|
|
sampling: "lttb",
|
|
itemStyle: {
|
|
color: A,
|
|
},
|
|
data: this.list[0].value,
|
|
},
|
|
{
|
|
name: this.list[0].phaiscType[1],
|
|
type: "line",
|
|
smooth: "true",
|
|
symbol: "none",
|
|
sampling: "lttb",
|
|
itemStyle: {
|
|
color: C,
|
|
normal: {
|
|
lineStyle: {
|
|
width: 2,
|
|
type: "dotted", //'dotted'虚线 'solid'实线
|
|
},
|
|
},
|
|
},
|
|
data: this.list[0].topLimit,
|
|
},
|
|
];
|
|
} else if (
|
|
this.list[0].topLimit == null &&
|
|
this.list[0].lowerLimit !== null
|
|
) {
|
|
this.list[0].phaiscType.push("上限");
|
|
this.list[0].seriesData = [
|
|
{
|
|
name: this.list[0].phaiscType[0],
|
|
type: "line",
|
|
symbol: "none",
|
|
smooth: "true",
|
|
sampling: "lttb",
|
|
itemStyle: {
|
|
color: A,
|
|
},
|
|
data: this.list[0].value,
|
|
},
|
|
{
|
|
name: this.list[0].phaiscType[1],
|
|
type: "line",
|
|
smooth: "true",
|
|
symbol: "none",
|
|
sampling: "lttb",
|
|
itemStyle: {
|
|
color: C,
|
|
normal: {
|
|
lineStyle: {
|
|
width: 2,
|
|
type: "dotted", //'dotted'虚线 'solid'实线
|
|
},
|
|
},
|
|
},
|
|
data: this.list[0].lowerLimit,
|
|
},
|
|
];
|
|
}
|
|
} else {
|
|
// this.list=[]
|
|
// var time=[]
|
|
// var value=[]
|
|
// var topLimit=[]
|
|
// var lowerLimit=[]
|
|
}
|
|
},
|
|
//趋势分析图
|
|
trendanalysis(row) {
|
|
const echarts = require("echarts");
|
|
var myChartes = echarts.init(document.getElementById("qshfx"));
|
|
myChartes.clear();
|
|
var option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
title: {
|
|
left: "center",
|
|
text:
|
|
"时间:" +
|
|
row.timeId +
|
|
"--指标:" +
|
|
this.list[0].targetName +
|
|
"--监测点:" +
|
|
this.list[0].lineName,
|
|
textStyle: {
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: this.list[0].time,
|
|
},
|
|
legend: {
|
|
data: this.list[0].phaiscType,
|
|
left: "0%",
|
|
},
|
|
grid: {
|
|
left: "4%",
|
|
right: "4%",
|
|
bottom: "8%",
|
|
containLabel: true,
|
|
},
|
|
yAxis: {
|
|
name: "单位(" + this.list[0].unit[0] + ")",
|
|
type: "value",
|
|
boundaryGap: [0, "100%"],
|
|
axisLine: {
|
|
show: true,
|
|
},
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: "inside",
|
|
height: 10,
|
|
start: 0,
|
|
end: 100,
|
|
},
|
|
{
|
|
start: 0,
|
|
end: 100,
|
|
},
|
|
],
|
|
toolbox: {
|
|
show: true,
|
|
feature: {
|
|
saveAsImage: { show: true },
|
|
// dataZoom: {
|
|
// yAxisIndex: 'none'
|
|
// },
|
|
// //restore: {},
|
|
// mark : {show: true},
|
|
//magicType : {show: true, type: ['line', 'bar']},
|
|
},
|
|
},
|
|
series: this.list[0].seriesData,
|
|
};
|
|
|
|
myChartes.setOption(option)
|
|
window.echartsArr.push(myChartes);
|
|
let _this = this;
|
|
_this.$erd.listenTo(_this.$refs.llk, (element) => {
|
|
_this.$nextTick(() => {
|
|
myChartes.resize();
|
|
});
|
|
});
|
|
setTimeout(() => {
|
|
myChartes.resize();
|
|
}, 100);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
::v-deep .el-table.el-table--enable-row-hover .el-table__body tr:hover > td {
|
|
//background: $themeColor;
|
|
background: $themeColor;
|
|
color: aliceblue;
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.cfd {
|
|
display: inline-block;
|
|
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
margin-top: -3%;
|
|
position: relative;
|
|
z-index: 100000;
|
|
}
|
|
.cf {
|
|
display: inline-block;
|
|
margin-left: 55%;
|
|
margin-bottom: 10px;
|
|
width: 100%;
|
|
margin-top: -3.6%;
|
|
position: relative;
|
|
z-index: 100000;
|
|
}
|
|
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
|
|
background-color: #79878769;
|
|
width: 10px;
|
|
}
|
|
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
|
|
// width: 8px; /*滚动条宽度*/
|
|
// height: 12px; /*滚动条高度*/
|
|
// }
|
|
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
|
|
// border-radius: 0px; /*滚动条的背景区域的圆角*/
|
|
// background-color: rgba(203, 208, 207, 0.286); /*滚动条的背景颜色*/
|
|
// cursor: pointer;
|
|
// }
|
|
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-corner {
|
|
// background-color: rgba(202, 207, 206, 0.286);
|
|
// cursor: pointer;
|
|
// }
|
|
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
|
// border-radius: 4px; /*滚动条的圆角*/
|
|
// background-color: rgba(144, 148, 148, 0.979); /*滚动条的背景颜色*/
|
|
// }
|
|
::v-deep .el-select-group__title {
|
|
padding-left: 20px;
|
|
font-size: 14px;
|
|
color: #010c11;
|
|
line-height: 30px;
|
|
font-weight: bold;
|
|
}
|
|
</style> |