|
|
|
@ -53,7 +53,7 @@
|
|
|
|
:type="getDatePickerType"
|
|
|
|
:type="getDatePickerType"
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
:placeholder="getDatePickerPlaceholder"
|
|
|
|
:placeholder="getDatePickerPlaceholder"
|
|
|
|
style="width: 240px"
|
|
|
|
style="width: 200px"
|
|
|
|
@change="handleQuery"
|
|
|
|
@change="handleQuery"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<span class="mx-2">-</span>
|
|
|
|
<span class="mx-2">-</span>
|
|
|
|
@ -62,16 +62,16 @@
|
|
|
|
:type="getDatePickerType"
|
|
|
|
:type="getDatePickerType"
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
|
:placeholder="getDatePickerPlaceholder"
|
|
|
|
:placeholder="getDatePickerPlaceholder"
|
|
|
|
style="width: 240px"
|
|
|
|
style="width: 200px"
|
|
|
|
@change="handleEndTimeChange"
|
|
|
|
@change="handleEndTimeChange"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="时间范围" prop="status">
|
|
|
|
<el-form-item label="时间范围" prop="type">
|
|
|
|
<el-select
|
|
|
|
<el-select
|
|
|
|
v-model="queryParams.type"
|
|
|
|
v-model="queryParams.type"
|
|
|
|
placeholder="请选择"
|
|
|
|
placeholder="请选择"
|
|
|
|
clearable
|
|
|
|
clearable
|
|
|
|
style="width: 240px"
|
|
|
|
style="width: 100px"
|
|
|
|
@change="handleTimeRangeChange"
|
|
|
|
@change="handleTimeRangeChange"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<el-option
|
|
|
|
<el-option
|
|
|
|
@ -82,6 +82,17 @@
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</el-select>
|
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
<el-form-item label="类型对应关系" prop="relationType" label-width="100px">
|
|
|
|
|
|
|
|
<el-select v-model="queryParams.relationType" @change="getRelationTreeData" placeholder="请选择类型对应关系"
|
|
|
|
|
|
|
|
style="width: 100px">
|
|
|
|
|
|
|
|
<el-option
|
|
|
|
|
|
|
|
v-for="dict in statisticalUnit"
|
|
|
|
|
|
|
|
:key="dict.value"
|
|
|
|
|
|
|
|
:label="dict.label"
|
|
|
|
|
|
|
|
:value="dict.value"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
|
|
</el-form>
|
|
|
|
<!--柱状图 -->
|
|
|
|
<!--柱状图 -->
|
|
|
|
<el-card style="height: 750px; margin-bottom: 20px">
|
|
|
|
<el-card style="height: 750px; margin-bottom: 20px">
|
|
|
|
@ -99,6 +110,7 @@ import Treeselect from "@riophae/vue-treeselect";
|
|
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
import {treeDat} from "@/api/energy/energy/base/typeRelation";
|
|
|
|
import {treeDat} from "@/api/energy/energy/base/typeRelation";
|
|
|
|
|
|
|
|
import {treeDatthree, treeDattwo} from "../../../../api/energy/energy/base/typeRelation";
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: "EnergyConsumptionTrendAnalysis",
|
|
|
|
name: "EnergyConsumptionTrendAnalysis",
|
|
|
|
@ -166,6 +178,7 @@ export default {
|
|
|
|
endTime: '',
|
|
|
|
endTime: '',
|
|
|
|
energyType: 2,
|
|
|
|
energyType: 2,
|
|
|
|
monitorIds: '',
|
|
|
|
monitorIds: '',
|
|
|
|
|
|
|
|
relationType: '0',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 列信息
|
|
|
|
// 列信息
|
|
|
|
columns: [
|
|
|
|
columns: [
|
|
|
|
@ -287,6 +300,11 @@ export default {
|
|
|
|
{label: "月", value: "month"},
|
|
|
|
{label: "月", value: "month"},
|
|
|
|
{label: "年", value: "year"},
|
|
|
|
{label: "年", value: "year"},
|
|
|
|
],
|
|
|
|
],
|
|
|
|
|
|
|
|
statisticalUnit: [
|
|
|
|
|
|
|
|
{label: "建筑", value: "0"},
|
|
|
|
|
|
|
|
{label: "业态", value: "1"},
|
|
|
|
|
|
|
|
{label: "部门", value: "2"}
|
|
|
|
|
|
|
|
],
|
|
|
|
// 图表配置
|
|
|
|
// 图表配置
|
|
|
|
chartOptions: {
|
|
|
|
chartOptions: {
|
|
|
|
lineChart: {
|
|
|
|
lineChart: {
|
|
|
|
@ -340,7 +358,7 @@ export default {
|
|
|
|
const minutes = pad(date.getMinutes());
|
|
|
|
const minutes = pad(date.getMinutes());
|
|
|
|
const seconds = pad(date.getSeconds());
|
|
|
|
const seconds = pad(date.getSeconds());
|
|
|
|
|
|
|
|
|
|
|
|
switch(type) {
|
|
|
|
switch (type) {
|
|
|
|
case 'year':
|
|
|
|
case 'year':
|
|
|
|
return `${year}-01-01 00:00:00`;
|
|
|
|
return `${year}-01-01 00:00:00`;
|
|
|
|
case 'month':
|
|
|
|
case 'month':
|
|
|
|
@ -360,7 +378,7 @@ export default {
|
|
|
|
const month = pad(date.getMonth() + 1);
|
|
|
|
const month = pad(date.getMonth() + 1);
|
|
|
|
const day = pad(date.getDate());
|
|
|
|
const day = pad(date.getDate());
|
|
|
|
|
|
|
|
|
|
|
|
switch(type) {
|
|
|
|
switch (type) {
|
|
|
|
case 'year':
|
|
|
|
case 'year':
|
|
|
|
return `${year}-12-31 23:59:59`;
|
|
|
|
return `${year}-12-31 23:59:59`;
|
|
|
|
case 'month':
|
|
|
|
case 'month':
|
|
|
|
@ -428,16 +446,39 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
/** 查询部门下拉树结构 */
|
|
|
|
/** 查询部门下拉树结构 */
|
|
|
|
getDeptTree() {
|
|
|
|
getDeptTree() {
|
|
|
|
treeDat().then((response) => {
|
|
|
|
if (this.queryParams.relationType == '0') {
|
|
|
|
response.map((item, index) => {
|
|
|
|
treeDat().then(response => {
|
|
|
|
item,
|
|
|
|
response.map((item, index) => {
|
|
|
|
item.oid = item.id,
|
|
|
|
item,
|
|
|
|
item.lable = item.name
|
|
|
|
item.oid = item.id,
|
|
|
|
})
|
|
|
|
item.lable = item.name
|
|
|
|
this.deptOptions = this.tranListToTreeData(response);
|
|
|
|
})
|
|
|
|
console.log(this.deptOptions)
|
|
|
|
this.deptOptions = this.tranListToTreeData(response);
|
|
|
|
//this.deptOptions = response.data;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
} else if (this.queryParams.relationType == '1') {
|
|
|
|
|
|
|
|
treeDattwo().then(response => {
|
|
|
|
|
|
|
|
response.map((item, index) => {
|
|
|
|
|
|
|
|
item,
|
|
|
|
|
|
|
|
item.oid = item.id,
|
|
|
|
|
|
|
|
item.lable = item.name
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
this.deptOptions = this.tranListToTreeData(response);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
} else if (this.queryParams.relationType == '2') {
|
|
|
|
|
|
|
|
treeDatthree().then(response => {
|
|
|
|
|
|
|
|
response.map((item, index) => {
|
|
|
|
|
|
|
|
item,
|
|
|
|
|
|
|
|
item.oid = item.id,
|
|
|
|
|
|
|
|
item.lable = item.name
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
this.deptOptions = this.tranListToTreeData(response);
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.dynamicTags = [];
|
|
|
|
|
|
|
|
console.log(this.deptOptions)
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
getRelationTreeData() {
|
|
|
|
|
|
|
|
this.getDeptTree();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 筛选节点
|
|
|
|
// 筛选节点
|
|
|
|
filterNode(value, data) {
|
|
|
|
filterNode(value, data) {
|
|
|
|
@ -497,6 +538,7 @@ export default {
|
|
|
|
type: this.queryParams.type,
|
|
|
|
type: this.queryParams.type,
|
|
|
|
startTime: this.queryParams.startTime,
|
|
|
|
startTime: this.queryParams.startTime,
|
|
|
|
endTime: this.queryParams.endTime,
|
|
|
|
endTime: this.queryParams.endTime,
|
|
|
|
|
|
|
|
relationType: this.queryParams.relationType,
|
|
|
|
monitorIds,
|
|
|
|
monitorIds,
|
|
|
|
energyType: 2
|
|
|
|
energyType: 2
|
|
|
|
});
|
|
|
|
});
|
|
|
|
@ -533,7 +575,7 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
computed: {
|
|
|
|
getDatePickerType() {
|
|
|
|
getDatePickerType() {
|
|
|
|
switch(this.queryParams.type) {
|
|
|
|
switch (this.queryParams.type) {
|
|
|
|
case 'year':
|
|
|
|
case 'year':
|
|
|
|
return 'year';
|
|
|
|
return 'year';
|
|
|
|
case 'month':
|
|
|
|
case 'month':
|
|
|
|
@ -546,7 +588,7 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
getDatePickerPlaceholder() {
|
|
|
|
getDatePickerPlaceholder() {
|
|
|
|
switch(this.queryParams.type) {
|
|
|
|
switch (this.queryParams.type) {
|
|
|
|
case 'year':
|
|
|
|
case 'year':
|
|
|
|
return '选择年份';
|
|
|
|
return '选择年份';
|
|
|
|
case 'month':
|
|
|
|
case 'month':
|
|
|
|
|
yinq
6 days ago