|
|
@@ -112,6 +112,35 @@
|
|
|
custom-class="modal"
|
|
|
:close-on-click-modal="false"
|
|
|
>
|
|
|
+ <div class="searchForm">
|
|
|
+ <el-select
|
|
|
+ @change="searchTime(selectValue)"
|
|
|
+ class="inputs"
|
|
|
+ v-model="selectValue"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in timeoptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="choose">
|
|
|
+ <button class="btn"
|
|
|
+ @click="switchChange(60)"
|
|
|
+ >
|
|
|
+ 等间隔
|
|
|
+ </button>
|
|
|
+ <button class="btn"
|
|
|
+ @click="switchChange(0)"
|
|
|
+ >
|
|
|
+ 原始数据
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<multiple-y-line-chart-normal
|
|
|
height="500px"
|
|
|
:list="Analysis"
|
|
|
@@ -125,15 +154,19 @@
|
|
|
<script>
|
|
|
import Panel3 from "../../components/coms/panel/panel3.vue";
|
|
|
import Table3 from "../../components/coms/table/table3.vue";
|
|
|
-import MultipleYLineChartNormal from "../../components/chart/line/multiple-y-line-chart-normal.vue";
|
|
|
+import MultipleYLineChartNormal from "./multiple-y-line-chart-normal.vue";
|
|
|
export default {
|
|
|
components: { Panel3, Table3, MultipleYLineChartNormal },
|
|
|
data() {
|
|
|
return {
|
|
|
- dialogTitle:"",
|
|
|
+ dialogTitle: "",
|
|
|
dialogVisible: false,
|
|
|
+ switchFlag: false,
|
|
|
+ chooseTime: [],
|
|
|
wpvalue: "",
|
|
|
wpid: "",
|
|
|
+ wtId:"",
|
|
|
+ descName:"",
|
|
|
AnalysisName: "",
|
|
|
AnalysisUnit: "",
|
|
|
Analysis: [
|
|
|
@@ -159,6 +192,33 @@ export default {
|
|
|
position: "right",
|
|
|
},
|
|
|
],
|
|
|
+ selectValue: "60",
|
|
|
+ timeoptions: [
|
|
|
+ {
|
|
|
+ value: "60",
|
|
|
+ label: "一分钟",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "300",
|
|
|
+ label: "五分钟",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "600",
|
|
|
+ label: "十分钟",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "1800",
|
|
|
+ label: "三十分钟",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "3600",
|
|
|
+ label: "一小时",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "86400",
|
|
|
+ label: "一天",
|
|
|
+ },
|
|
|
+ ],
|
|
|
wpoptions: "",
|
|
|
options: [],
|
|
|
cascaderOptions: [],
|
|
|
@@ -263,23 +323,43 @@ export default {
|
|
|
//对比
|
|
|
showChart(column) {
|
|
|
let that = this;
|
|
|
- that.dialogTitle = column.column.name
|
|
|
+ that.dialogTitle = column.column.name;
|
|
|
+ that.wtId = column.row.name;
|
|
|
+ that.descName = column.column.name;
|
|
|
// console.log('column:',column)
|
|
|
// console.log('name:',column.column.name)
|
|
|
// console.log('wtid:',column.row.name)
|
|
|
// console.log('starttime:',new Date(that.startdate).getTime())
|
|
|
// console.log('endtime:',new Date(that.enddate).getTime())
|
|
|
that.dialogVisible = true;
|
|
|
+ that.requestDetailData(
|
|
|
+ that.wpvalue,
|
|
|
+ that.startdate,
|
|
|
+ that.enddate,
|
|
|
+ 0,
|
|
|
+ column.row.name,
|
|
|
+ column.column.name
|
|
|
+ );
|
|
|
+ },
|
|
|
+ requestDetailData(station, startTs, endTs, interval, wtId, name) {
|
|
|
+ let that = this;
|
|
|
that.API.requestData({
|
|
|
method: "GET",
|
|
|
subUrl: "/analysis/detail",
|
|
|
data: {
|
|
|
- station: that.wpvalue,
|
|
|
- startTs: new Date(that.startdate).getTime(),
|
|
|
- endTs: new Date(that.enddate).getTime(),
|
|
|
- interval: 360,
|
|
|
- wtId: column.row.name,
|
|
|
- name: column.column.name,
|
|
|
+ // station: that.wpvalue,
|
|
|
+ // startTs: new Date(that.startdate).getTime(),
|
|
|
+ // endTs: new Date(that.enddate).getTime(),
|
|
|
+ // // interval: 360,
|
|
|
+ // interval:1,
|
|
|
+ // wtId: column.row.name,
|
|
|
+ // name: column.column.name,
|
|
|
+ station: station,
|
|
|
+ startTs: new Date(startTs).getTime(),
|
|
|
+ endTs: new Date(endTs).getTime(),
|
|
|
+ interval: interval,
|
|
|
+ wtId: wtId,
|
|
|
+ name: name,
|
|
|
},
|
|
|
success(res) {
|
|
|
console.log("resAnalysis:", res);
|
|
|
@@ -302,33 +382,47 @@ export default {
|
|
|
let aList1 = [
|
|
|
{
|
|
|
title: "",
|
|
|
+ // yAxisIndex:"",
|
|
|
smooth: true,
|
|
|
value: [],
|
|
|
},
|
|
|
];
|
|
|
- aKey1.forEach((keyEle, keyIndex) => {
|
|
|
- res.data.forEach((rEle) => {
|
|
|
- rEle.data.forEach((tEle) => {
|
|
|
- aList1[keyIndex].title = res.data[0].name
|
|
|
- aList1[keyIndex].value.push({
|
|
|
- text: new Date(tEle.ts).formatDate("hh:mm"),
|
|
|
- value: tEle[keyEle],
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
+ aKey1.forEach((keyEle,keyIndex)=>{
|
|
|
+ // console.log('keyindex:',res.data[keyIndex]);
|
|
|
+ aList1[keyIndex].title = res.data[keyIndex].name;
|
|
|
+ res.data[keyIndex].data.forEach((rEle)=>{
|
|
|
+ aList1[keyIndex].value.push({
|
|
|
+ text:new Date(rEle.ts).formatDate("hh:mm"),
|
|
|
+ value:rEle.doubleValue
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ // aKey1.forEach((keyEle, keyIndex) => {
|
|
|
+ // res.data.forEach((rEle) => {
|
|
|
+ // rEle.data.forEach((tEle) => {
|
|
|
+ // alist1[keyIndex].yAxisIndex = keyIndex;
|
|
|
+ // aList1[keyIndex].title = res.data[0].name;
|
|
|
+ // aList1[keyIndex].value.push({
|
|
|
+ // text: new Date(tEle.ts).formatDate("hh:mm"),
|
|
|
+ // value: tEle[keyEle],
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // });
|
|
|
that.Analysis = aList1;
|
|
|
console.log("that.Analysis1:", that.Analysis);
|
|
|
} else if (res.data.length == 2) {
|
|
|
let aKey2 = ["doubleValue", "doubleValue"];
|
|
|
let aList2 = [
|
|
|
{
|
|
|
- title: "",
|
|
|
+ title: "",
|
|
|
+ // yAxisIndex:"",
|
|
|
smooth: true,
|
|
|
value: [],
|
|
|
},
|
|
|
{
|
|
|
title: "",
|
|
|
+ // yAxisIndex:"",
|
|
|
smooth: true,
|
|
|
value: [],
|
|
|
},
|
|
|
@@ -359,17 +453,34 @@ export default {
|
|
|
});
|
|
|
that.AnalysisYAxises = yaxises1;
|
|
|
console.log("AnalysisYAxises:", that.AnalysisYAxises);
|
|
|
- aKey2.forEach((keyEle, keyIndex) => {
|
|
|
- res.data.forEach((rEle) => {
|
|
|
- aList2[keyIndex].title=res.data[keyIndex].name
|
|
|
- rEle.data.forEach((tEle) => {
|
|
|
- aList2[keyIndex].value.push({
|
|
|
- text: new Date(tEle.ts).formatDate("hh:mm"),
|
|
|
- value: tEle[keyEle],
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
+ aKey2.forEach((keyEle,keyIndex)=>{
|
|
|
+ // console.log('keyindex:',res.data[keyIndex]);
|
|
|
+ aList2[keyIndex].title = res.data[keyIndex].name;
|
|
|
+ res.data[keyIndex].data.forEach((rEle)=>{
|
|
|
+ aList2[keyIndex].value.push({
|
|
|
+ text:new Date(rEle.ts).formatDate("hh:mm"),
|
|
|
+ value:rEle.doubleValue
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ // res.data.forEach((rEle,rIndex)=>{
|
|
|
+ // console.log('rele:',rEle)
|
|
|
+ // })
|
|
|
+ // aKey2.forEach((keyEle, keyIndex) => {
|
|
|
+ // res.data.forEach((rEle) => {
|
|
|
+ // // alist2[keyIndex].yAxisIndex = keyIndex;
|
|
|
+ // aList2[keyIndex].title = res.data[keyIndex].name;
|
|
|
+ // rEle.data.forEach((tEle,tIndex) => {
|
|
|
+ // console.log('res.data[keyIndex].data[tIndex].doubleValue2:',res.data)
|
|
|
+ // aList2[keyIndex].value.push({
|
|
|
+ // text: new Date(tEle.ts).formatDate("hh:mm"),
|
|
|
+ // // value: tEle[keyEle],
|
|
|
+ // // value:res.data[keyIndex].data[tIndex].doubleValue
|
|
|
+
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // });
|
|
|
|
|
|
that.Analysis = aList2;
|
|
|
console.log("that.Analysis2:", that.Analysis);
|
|
|
@@ -383,21 +494,25 @@ export default {
|
|
|
let aList4 = [
|
|
|
{
|
|
|
title: "",
|
|
|
+ // yAxisIndex:"",
|
|
|
smooth: true,
|
|
|
value: [],
|
|
|
},
|
|
|
{
|
|
|
title: "",
|
|
|
+ // yAxisIndex:"",
|
|
|
smooth: true,
|
|
|
value: [],
|
|
|
},
|
|
|
{
|
|
|
title: "",
|
|
|
+ // yAxisIndex:"",
|
|
|
smooth: true,
|
|
|
value: [],
|
|
|
},
|
|
|
{
|
|
|
title: "",
|
|
|
+ // yAxisIndex:"",
|
|
|
smooth: true,
|
|
|
value: [],
|
|
|
},
|
|
|
@@ -428,23 +543,92 @@ export default {
|
|
|
});
|
|
|
that.AnalysisYAxises = yaxises2;
|
|
|
console.log("AnalysisYAxises:", that.AnalysisYAxises);
|
|
|
- aKey4.forEach((keyEle, keyIndex) => {
|
|
|
- res.data.forEach((rEle) => {
|
|
|
- aList4[keyIndex].title = res.data[keyIndex].name
|
|
|
- rEle.data.forEach((tEle) => {
|
|
|
- aList4[keyIndex].value.push({
|
|
|
- text: new Date(tEle.ts).formatDate("hh:mm"),
|
|
|
- value: tEle[keyEle],
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
+ aKey4.forEach((keyEle,keyIndex)=>{
|
|
|
+ // console.log('keyindex:',res.data[keyIndex]);
|
|
|
+ aList4[keyIndex].title = res.data[keyIndex].name;
|
|
|
+ res.data[keyIndex].data.forEach((rEle)=>{
|
|
|
+ aList4[keyIndex].value.push({
|
|
|
+ text:new Date(rEle.ts).formatDate("hh:mm"),
|
|
|
+ value:rEle.doubleValue
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
+ // aKey4.forEach((keyEle, keyIndex) => {
|
|
|
+ // res.data.forEach((rEle) => {
|
|
|
+ // // aList4[keyIndex].yAxisIndex = keyIndex;
|
|
|
+ // aList4[keyIndex].title = res.data[keyIndex].name;
|
|
|
+ // rEle.data.forEach((tEle,tIndex) => {
|
|
|
+ // console.log('res.data[keyIndex].data[tIndex].doubleValue4:',res.data)
|
|
|
+ // aList4[keyIndex].value.push({
|
|
|
+ // text: new Date(tEle.ts).formatDate("hh:mm"),
|
|
|
+ // // value: tEle[keyEle],
|
|
|
+ // // value:res.data[keyIndex].data[tIndex].doubleValue
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // });
|
|
|
that.Analysis = aList4;
|
|
|
console.log("that.Analysis4:", that.Analysis);
|
|
|
+ }else if (res.data.length == 0) {
|
|
|
+ that.dialogVisible = false;
|
|
|
+ that.BASE.showMsg({
|
|
|
+ type: "warning",
|
|
|
+ msg: "暂无数据",
|
|
|
+ });
|
|
|
}
|
|
|
+
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
+ //切换数据类型
|
|
|
+ switchChange(interval) {
|
|
|
+ if(interval == 0){
|
|
|
+ this.requestDetailData(this.wpvalue,this.startdate,this.enddate,0,this.wtId,this.descName)
|
|
|
+ }
|
|
|
+ else if(interval == 60){
|
|
|
+ this.requestDetailData(this.wpvalue,this.startdate,this.enddate,60,this.wtId,this.descName)
|
|
|
+ }
|
|
|
+ // this.switchFlag = !this.switchFlag;
|
|
|
+ // this.selectValue = "60";
|
|
|
+ // this.searchTime();
|
|
|
+ // const loading = this.$loading({
|
|
|
+ // lock: true,
|
|
|
+ // text: "数据加载中",
|
|
|
+ // spinner: "el-icon-loading",
|
|
|
+ // background: "rgba(0, 0, 0, 0.7)",
|
|
|
+ // });
|
|
|
+ // setTimeout(() => {
|
|
|
+ // loading.close();
|
|
|
+ // }, 1000);
|
|
|
+ },
|
|
|
+ searchTime(values) {
|
|
|
+ console.log("values:", values);
|
|
|
+ this.requestDetailData(this.wpvalue,this.startdate,this.enddate,values,this.wtId,this.descName)
|
|
|
+ // let times = [];
|
|
|
+ // this.chooseTime.forEach((item) => {
|
|
|
+ // times.push(dayjs(item).valueOf());
|
|
|
+ // });
|
|
|
+ // times.length > 0
|
|
|
+ // ? this.switchFlag
|
|
|
+ // ? this.$emit("original-data", times)
|
|
|
+ // : this.$emit("search-data", times, Number(this.selectValue))
|
|
|
+ // : this.$message({
|
|
|
+ // showClose: true,
|
|
|
+ // message: "请选择查询日期",
|
|
|
+ // center: true,
|
|
|
+ // type: "error",
|
|
|
+ // });
|
|
|
+ // if (values) {
|
|
|
+ // this.$message({
|
|
|
+ // showClose: true,
|
|
|
+ // center: true,
|
|
|
+ // message: '下载中'
|
|
|
+ // });
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.export()
|
|
|
+ // }, 2000)
|
|
|
+ // }
|
|
|
+ },
|
|
|
tabSelect(tab) {},
|
|
|
|
|
|
async search() {
|
|
|
@@ -617,5 +801,13 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .searchForm{
|
|
|
+ display: flex;
|
|
|
+ margin-left: 36px;
|
|
|
+ .inputs{
|
|
|
+ width: 15%;
|
|
|
+ margin-right: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
darker