commit
350c93c9f8
@ -1,8 +1,8 @@
|
|||||||
/*
|
/*
|
||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2021-11-15 08:20:28
|
* @Date: 2021-11-15 08:20:28
|
||||||
* @LastEditors: gtz
|
* @LastEditors: zwq
|
||||||
* @LastEditTime: 2021-12-16 10:25:29
|
* @LastEditTime: 2021-12-17 14:51:08
|
||||||
* @Description:
|
* @Description:
|
||||||
*/
|
*/
|
||||||
/**
|
/**
|
||||||
@ -65,8 +65,12 @@ const mainRoutes = {
|
|||||||
{ path: '/energy-electric', component: _import('energy/electric'), name: 'energy-electric', meta: { title: '用电能源分析', isTab: true } },
|
{ path: '/energy-electric', component: _import('energy/electric'), name: 'energy-electric', meta: { title: '用电能源分析', isTab: true } },
|
||||||
{ path: '/energy-kiln-electric', component: _import('energy/kiln-electric'), name: 'energy-kiln-electric', meta: { title: '窑炉用电分析', isTab: true } },
|
{ path: '/energy-kiln-electric', component: _import('energy/kiln-electric'), name: 'energy-kiln-electric', meta: { title: '窑炉用电分析', isTab: true } },
|
||||||
{ path: '/energy-ammonia', component: _import('energy/ammonia'), name: 'energy-ammonia', meta: { title: '氨气流量分析', isTab: true } },
|
{ path: '/energy-ammonia', component: _import('energy/ammonia'), name: 'energy-ammonia', meta: { title: '氨气流量分析', isTab: true } },
|
||||||
|
{ path: '/energy-methanol', component: _import('energy/methanol'), name: 'energy-methanol', meta: { title: '甲醇流量分析', isTab: true } },
|
||||||
|
{ path: '/energy-propane', component: _import('energy/propane'), name: 'energy-propane', meta: { title: '丙烷流量分析', isTab: true } },
|
||||||
{ path: '/energy-nitrogen', component: _import('energy/nitrogen'), name: 'energy-nitrogen', meta: { title: '氮气流量分析', isTab: true } },
|
{ path: '/energy-nitrogen', component: _import('energy/nitrogen'), name: 'energy-nitrogen', meta: { title: '氮气流量分析', isTab: true } },
|
||||||
{ path: '/energy-electric-acquisition', component: _import('energy/electric-acquisition'), name: 'energy-electric-acquisition', meta: { title: '电能采集数据', isTab: true } },
|
{ path: '/energy-electric-acquisition', component: _import('energy/electric-acquisition'), name: 'energy-electric-acquisition', meta: { title: '电能采集数据', isTab: true } },
|
||||||
|
{ path: '/energy-gas-acquisition', component: _import('energy/gas-acquisition'), name: 'energy-gas-acquisition', meta: { title: '用气采集数据', isTab: true } },
|
||||||
|
{ path: '/energy-temperature-acquisition', component: _import('energy/temperature-acquisition'), name: 'energy-temperature-acquisition', meta: { title: '温度采集数据', isTab: true } },
|
||||||
{ path: '/energy-process-temperature', component: _import('energy/process-temperature'), name: 'energy-process-temperature', meta: { title: '窑炉加工温度', isTab: true } },
|
{ path: '/energy-process-temperature', component: _import('energy/process-temperature'), name: 'energy-process-temperature', meta: { title: '窑炉加工温度', isTab: true } },
|
||||||
{ path: '/energy-sump-temperature', component: _import('energy/sump-temperature'), name: 'energy-sump-temperature', meta: { title: '油槽温度', isTab: true } },
|
{ path: '/energy-sump-temperature', component: _import('energy/sump-temperature'), name: 'energy-sump-temperature', meta: { title: '油槽温度', isTab: true } },
|
||||||
{ path: '/energy-ammonia-analysis', component: _import('energy/ammonia-analysis'), name: 'energy-ammonia-analysis', meta: { title: '使用氮气分析', isTab: true } },
|
{ path: '/energy-ammonia-analysis', component: _import('energy/ammonia-analysis'), name: 'energy-ammonia-analysis', meta: { title: '使用氮气分析', isTab: true } },
|
||||||
|
|||||||
@ -1,319 +1,275 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zwq
|
||||||
|
* @Date: 2021-11-19 10:55:33
|
||||||
|
* @LastEditors: zwq
|
||||||
|
* @LastEditTime: 2021-12-17 15:27:13
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="mod-config">
|
<div class="chart-container">
|
||||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
<el-row>
|
||||||
<el-form-item>
|
<el-col :span="2">
|
||||||
<el-radio-group size="small" v-model="dataForm.type" @change="changeType">
|
<div class="kiln-electric-treebox">
|
||||||
<el-radio-button label="日" />
|
<el-tree
|
||||||
<el-radio-button label="周" />
|
:data="yaoluList"
|
||||||
<el-radio-button label="月" />
|
@node-click="handleNode"
|
||||||
<el-radio-button label="年" />
|
:highlight-current="true"
|
||||||
</el-radio-group>
|
/>
|
||||||
</el-form-item>
|
</div>
|
||||||
<el-form-item size="small" label="选择时间">
|
</el-col>
|
||||||
<el-date-picker
|
<el-col :span="22">
|
||||||
v-model="dataForm.date"
|
<el-card class="base-container" style="min-height: 540px">
|
||||||
:type="datePickerType[dataForm.type].type"
|
<el-row style="z-index: 10;">
|
||||||
:format="datePickerType[dataForm.type].format"
|
<el-radio-group
|
||||||
:placeholder="'选择' + datePickerType[dataForm.type].placeholder"
|
style="margin: 0 20px; position:relative; bottom: 2px"
|
||||||
/>
|
size="small"
|
||||||
</el-form-item>
|
v-model="eleType"
|
||||||
<el-form-item>
|
@change="changeEleType"
|
||||||
<el-button @click="getDataList()">查询</el-button>
|
>
|
||||||
</el-form-item>
|
<el-radio-button label="日"></el-radio-button>
|
||||||
</el-form>
|
<el-radio-button label="周"></el-radio-button>
|
||||||
<el-table
|
<el-radio-button label="月"></el-radio-button>
|
||||||
:data="dataList"
|
<el-radio-button label="年"></el-radio-button>
|
||||||
border
|
</el-radio-group>
|
||||||
v-loading="dataListLoading"
|
<el-date-picker
|
||||||
style="width: 100%;">
|
size="small"
|
||||||
<el-table-column
|
v-model="date"
|
||||||
prop="time"
|
:type="datePickerType[eleType].type"
|
||||||
header-align="center"
|
:format="datePickerType[eleType].format"
|
||||||
align="center"
|
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||||
label="时间"
|
/>
|
||||||
/>
|
<el-button size="small" @click="getDataList()">
|
||||||
<el-table-column
|
<icon-svg class="iconClass" name="sousuo"></icon-svg>
|
||||||
v-for="item in yaoluList"
|
查询
|
||||||
:prop="item.id"
|
</el-button>
|
||||||
header-align="center"
|
</el-row>
|
||||||
align="center"
|
<el-col style="height: 600px">
|
||||||
:label="item.name"
|
<el-table
|
||||||
:key="item.id"
|
:data="dataList"
|
||||||
/>
|
:stripe="true"
|
||||||
</el-table>
|
:header-cell-style="{
|
||||||
|
background: '#eef1f6',
|
||||||
|
color: '#606266',
|
||||||
|
height: '56px'
|
||||||
|
}"
|
||||||
|
v-loading="dataListLoading"
|
||||||
|
style="width: 100%;padding:20px"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
type="index"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="序号"
|
||||||
|
width="50"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="createTime"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="采集时间"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="vehicleName" label="A相电压">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="code" label="B相电压"> </el-table-column>
|
||||||
|
<el-table-column prop="vehicleAlias" label="C相电压">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="anqi" label="A相电流"> </el-table-column>
|
||||||
|
<el-table-column prop="anqi" label="B相电流"> </el-table-column>
|
||||||
|
<el-table-column prop="anqi" label="C相电流"> </el-table-column>
|
||||||
|
<el-table-column prop="anqi" label="功率值"> </el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
@size-change="sizeChangeHandle"
|
||||||
|
@current-change="currentChangeHandle"
|
||||||
|
:current-page="pageIndex"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
:page-size="pageSize"
|
||||||
|
:total="totalPage"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</el-col>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 窑炉列表
|
|
||||||
const yaoluList = [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
name: '窑炉1',
|
|
||||||
data: [
|
|
||||||
{ time: '0:00', value: 24 },
|
|
||||||
{ time: '2:00', value: 43 },
|
|
||||||
{ time: '4:00', value: 33 },
|
|
||||||
{ time: '6:00', value: 25 },
|
|
||||||
{ time: '8:00', value: 44 },
|
|
||||||
{ time: '10:00', value: 46 },
|
|
||||||
{ time: '12:00', value: 16 },
|
|
||||||
{ time: '14:00', value: 47 },
|
|
||||||
{ time: '16:00', value: 86 },
|
|
||||||
{ time: '18:00', value: 22 },
|
|
||||||
{ time: '20:00', value: 25 },
|
|
||||||
{ time: '22:00', value: 27 }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '2',
|
|
||||||
name: '窑炉2',
|
|
||||||
data: [
|
|
||||||
{ time: '0:00', value: 24 },
|
|
||||||
{ time: '2:00', value: 43 },
|
|
||||||
{ time: '4:00', value: 33 },
|
|
||||||
{ time: '6:00', value: 25 },
|
|
||||||
{ time: '8:00', value: 44 },
|
|
||||||
{ time: '10:00', value: 46 },
|
|
||||||
{ time: '12:00', value: 16 },
|
|
||||||
{ time: '14:00', value: 47 },
|
|
||||||
{ time: '16:00', value: 86 },
|
|
||||||
{ time: '18:00', value: 22 },
|
|
||||||
{ time: '20:00', value: 25 },
|
|
||||||
{ time: '22:00', value: 27 }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3',
|
|
||||||
name: '窑炉3',
|
|
||||||
data: [
|
|
||||||
{ time: '0:00', value: 24 },
|
|
||||||
{ time: '2:00', value: 43 },
|
|
||||||
{ time: '4:00', value: 33 },
|
|
||||||
{ time: '6:00', value: 25 },
|
|
||||||
{ time: '8:00', value: 44 },
|
|
||||||
{ time: '10:00', value: 46 },
|
|
||||||
{ time: '12:00', value: 16 },
|
|
||||||
{ time: '14:00', value: 47 },
|
|
||||||
{ time: '16:00', value: 86 },
|
|
||||||
{ time: '18:00', value: 22 },
|
|
||||||
{ time: '20:00', value: 25 },
|
|
||||||
{ time: '22:00', value: 27 }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '4',
|
|
||||||
name: '窑炉4',
|
|
||||||
data: [
|
|
||||||
{ time: '0:00', value: 24 },
|
|
||||||
{ time: '2:00', value: 43 },
|
|
||||||
{ time: '4:00', value: 33 },
|
|
||||||
{ time: '6:00', value: 25 },
|
|
||||||
{ time: '8:00', value: 44 },
|
|
||||||
{ time: '10:00', value: 46 },
|
|
||||||
{ time: '12:00', value: 16 },
|
|
||||||
{ time: '14:00', value: 47 },
|
|
||||||
{ time: '16:00', value: 86 },
|
|
||||||
{ time: '18:00', value: 22 },
|
|
||||||
{ time: '20:00', value: 25 },
|
|
||||||
{ time: '22:00', value: 27 }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '5',
|
|
||||||
name: '窑炉5',
|
|
||||||
data: [
|
|
||||||
{ time: '0:00', value: 24 },
|
|
||||||
{ time: '2:00', value: 43 },
|
|
||||||
{ time: '4:00', value: 33 },
|
|
||||||
{ time: '6:00', value: 25 },
|
|
||||||
{ time: '8:00', value: 44 },
|
|
||||||
{ time: '10:00', value: 46 },
|
|
||||||
{ time: '12:00', value: 16 },
|
|
||||||
{ time: '14:00', value: 47 },
|
|
||||||
{ time: '16:00', value: 86 },
|
|
||||||
{ time: '18:00', value: 22 },
|
|
||||||
{ time: '20:00', value: 25 },
|
|
||||||
{ time: '22:00', value: 27 }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '6',
|
|
||||||
name: '窑炉6',
|
|
||||||
data: [
|
|
||||||
{ time: '0:00', value: 24 },
|
|
||||||
{ time: '2:00', value: 43 },
|
|
||||||
{ time: '4:00', value: 33 },
|
|
||||||
{ time: '6:00', value: 25 },
|
|
||||||
{ time: '8:00', value: 44 },
|
|
||||||
{ time: '10:00', value: 46 },
|
|
||||||
{ time: '12:00', value: 16 },
|
|
||||||
{ time: '14:00', value: 47 },
|
|
||||||
{ time: '16:00', value: 86 },
|
|
||||||
{ time: '18:00', value: 22 },
|
|
||||||
{ time: '20:00', value: 25 },
|
|
||||||
{ time: '22:00', value: 27 }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '7',
|
|
||||||
name: '窑炉7',
|
|
||||||
data: [
|
|
||||||
{ time: '0:00', value: 24 },
|
|
||||||
{ time: '2:00', value: 43 },
|
|
||||||
{ time: '4:00', value: 33 },
|
|
||||||
{ time: '6:00', value: 25 },
|
|
||||||
{ time: '8:00', value: 44 },
|
|
||||||
{ time: '10:00', value: 46 },
|
|
||||||
{ time: '12:00', value: 16 },
|
|
||||||
{ time: '14:00', value: 47 },
|
|
||||||
{ time: '16:00', value: 86 },
|
|
||||||
{ time: '18:00', value: 22 },
|
|
||||||
{ time: '20:00', value: 25 },
|
|
||||||
{ time: '22:00', value: 27 }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '8',
|
|
||||||
name: '窑炉8',
|
|
||||||
data: [
|
|
||||||
{ time: '0:00', value: 24 },
|
|
||||||
{ time: '2:00', value: 43 },
|
|
||||||
{ time: '4:00', value: 33 },
|
|
||||||
{ time: '6:00', value: 25 },
|
|
||||||
{ time: '8:00', value: 44 },
|
|
||||||
{ time: '10:00', value: 46 },
|
|
||||||
{ time: '12:00', value: 16 },
|
|
||||||
{ time: '14:00', value: 47 },
|
|
||||||
{ time: '16:00', value: 86 },
|
|
||||||
{ time: '18:00', value: 22 },
|
|
||||||
{ time: '20:00', value: 25 },
|
|
||||||
{ time: '22:00', value: 27 }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '9',
|
|
||||||
name: '窑炉9',
|
|
||||||
data: [
|
|
||||||
{ time: '0:00', value: 24 },
|
|
||||||
{ time: '2:00', value: 43 },
|
|
||||||
{ time: '4:00', value: 33 },
|
|
||||||
{ time: '6:00', value: 25 },
|
|
||||||
{ time: '8:00', value: 44 },
|
|
||||||
{ time: '10:00', value: 46 },
|
|
||||||
{ time: '12:00', value: 16 },
|
|
||||||
{ time: '14:00', value: 47 },
|
|
||||||
{ time: '16:00', value: 86 },
|
|
||||||
{ time: '18:00', value: 22 },
|
|
||||||
{ time: '20:00', value: 25 },
|
|
||||||
{ time: '22:00', value: 27 }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '10',
|
|
||||||
name: '窑炉10',
|
|
||||||
data: [
|
|
||||||
{ time: '0:00', value: 24 },
|
|
||||||
{ time: '2:00', value: 43 },
|
|
||||||
{ time: '4:00', value: 33 },
|
|
||||||
{ time: '6:00', value: 25 },
|
|
||||||
{ time: '8:00', value: 44 },
|
|
||||||
{ time: '10:00', value: 46 },
|
|
||||||
{ time: '12:00', value: 16 },
|
|
||||||
{ time: '14:00', value: 47 },
|
|
||||||
{ time: '16:00', value: 86 },
|
|
||||||
{ time: '18:00', value: 22 },
|
|
||||||
{ time: '20:00', value: 25 },
|
|
||||||
{ time: '22:00', value: 27 }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '11',
|
|
||||||
name: '窑炉11',
|
|
||||||
data: [
|
|
||||||
{ time: '0:00', value: 24 },
|
|
||||||
{ time: '2:00', value: 43 },
|
|
||||||
{ time: '4:00', value: 33 },
|
|
||||||
{ time: '6:00', value: 25 },
|
|
||||||
{ time: '8:00', value: 44 },
|
|
||||||
{ time: '10:00', value: 46 },
|
|
||||||
{ time: '12:00', value: 16 },
|
|
||||||
{ time: '14:00', value: 47 },
|
|
||||||
{ time: '16:00', value: 86 },
|
|
||||||
{ time: '18:00', value: 22 },
|
|
||||||
{ time: '20:00', value: 25 },
|
|
||||||
{ time: '22:00', value: 27 }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
// 日期类型
|
// 日期类型
|
||||||
const datePickerType = {
|
const datePickerType = {
|
||||||
'日': {
|
日: {
|
||||||
type: 'date',
|
type: 'date',
|
||||||
format: '',
|
format: '',
|
||||||
placeholder: '日期'
|
placeholder: '日期'
|
||||||
},
|
},
|
||||||
'周': {
|
周: {
|
||||||
type: 'week',
|
type: 'week',
|
||||||
format: 'yyyy 第 WW 周',
|
format: 'yyyy 第 WW 周',
|
||||||
placeholder: '周'
|
placeholder: '周'
|
||||||
},
|
},
|
||||||
'月': {
|
月: {
|
||||||
type: 'month',
|
type: 'month',
|
||||||
format: '',
|
format: '',
|
||||||
placeholder: '月'
|
placeholder: '月'
|
||||||
},
|
},
|
||||||
'年': {
|
年: {
|
||||||
type: 'year',
|
type: 'year',
|
||||||
format: '',
|
format: '',
|
||||||
placeholder: '年'
|
placeholder: '年'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 窑炉列表
|
||||||
|
const yaoluList = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
label: '窑炉1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
label: '窑炉2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
label: '窑炉3'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
label: '窑炉4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
label: '窑炉5'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
label: '窑炉6'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
label: '窑炉7'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
label: '窑炉8'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
label: '窑炉9'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
label: '窑炉10'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
label: '窑炉11'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
name: 'gas-acquisition',
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
dataForm: {
|
datePickerType,
|
||||||
type: '日',
|
yaoluList,
|
||||||
date: new Date()
|
date: new Date(),
|
||||||
},
|
eleType: '年',
|
||||||
|
showId: 0,
|
||||||
|
yaoluIndex: 0,
|
||||||
|
yaoluName: '',
|
||||||
dataList: [],
|
dataList: [],
|
||||||
pageIndex: 1,
|
pageIndex: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
totalPage: 0,
|
totalPage: 0,
|
||||||
dataListLoading: false,
|
dataListLoading: false
|
||||||
orderDetailVisible: false,
|
|
||||||
yaoluList,
|
|
||||||
datePickerType
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
mounted () {
|
||||||
|
this.showId = this.yaoluList[0].id
|
||||||
|
this.yaoluName = this.yaoluList[0].label
|
||||||
|
},
|
||||||
|
activated () {
|
||||||
this.getDataList()
|
this.getDataList()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 获取数据列表
|
// 获取数据列表
|
||||||
getDataList () {
|
getDataList () {
|
||||||
this.dataList = []
|
|
||||||
this.dataListLoading = true
|
this.dataListLoading = true
|
||||||
this.yaoluList.map((item, index) => {
|
this.$http({
|
||||||
if (index === 0) {
|
url: this.$http.adornUrl('/vehicle/page'),
|
||||||
item.data.map(i => {
|
method: 'post',
|
||||||
this.dataList.push({
|
data: this.$http.adornData({
|
||||||
time: i.time,
|
'current': this.pageIndex,
|
||||||
[item.id]: i.value
|
'size': this.pageSize
|
||||||
})
|
})
|
||||||
})
|
}).then(({data}) => {
|
||||||
|
if (data && data.code === 0) {
|
||||||
|
this.dataList = data.data.records
|
||||||
|
this.totalPage = data.data.total
|
||||||
} else {
|
} else {
|
||||||
item.data.map((i, idx) => {
|
this.dataList = []
|
||||||
this.dataList[idx][item.id] = i.value
|
this.totalPage = 0
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
this.dataListLoading = false
|
||||||
})
|
})
|
||||||
this.dataListLoading = false
|
|
||||||
},
|
},
|
||||||
// 切换查询类型
|
changeEleType (v) {
|
||||||
changeType (v) {}
|
switch (v) {
|
||||||
|
case '日':
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '周':
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '月':
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '年':
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 每页数
|
||||||
|
sizeChangeHandle (val) {
|
||||||
|
this.pageSize = val
|
||||||
|
this.pageIndex = 1
|
||||||
|
this.getDataList()
|
||||||
|
},
|
||||||
|
// 当前页
|
||||||
|
currentChangeHandle (val) {
|
||||||
|
this.pageIndex = val
|
||||||
|
this.getDataList()
|
||||||
|
},
|
||||||
|
handleNode (obj, node, e) {
|
||||||
|
if (!obj.children) {
|
||||||
|
this.showId = obj.id
|
||||||
|
this.yaoluName = obj.label
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - 138px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.chart-container {
|
||||||
|
.el-tabs__item {
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-next,
|
||||||
|
.el-tabs__nav-prev {
|
||||||
|
line-height: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
272
src/views/energy/gas-acquisition.vue
Normal file
272
src/views/energy/gas-acquisition.vue
Normal file
@ -0,0 +1,272 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zwq
|
||||||
|
* @Date: 2021-11-19 10:55:33
|
||||||
|
* @LastEditors: zwq
|
||||||
|
* @LastEditTime: 2021-12-17 15:24:18
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="chart-container">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="2">
|
||||||
|
<div class="kiln-electric-treebox">
|
||||||
|
<el-tree
|
||||||
|
:data="yaoluList"
|
||||||
|
@node-click="handleNode"
|
||||||
|
:highlight-current="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="22">
|
||||||
|
<el-card class="base-container" style="min-height: 540px">
|
||||||
|
<el-row style="z-index: 10;">
|
||||||
|
<el-radio-group
|
||||||
|
style="margin: 0 20px; position:relative; bottom: 2px"
|
||||||
|
size="small"
|
||||||
|
v-model="eleType"
|
||||||
|
@change="changeEleType"
|
||||||
|
>
|
||||||
|
<el-radio-button label="日"></el-radio-button>
|
||||||
|
<el-radio-button label="周"></el-radio-button>
|
||||||
|
<el-radio-button label="月"></el-radio-button>
|
||||||
|
<el-radio-button label="年"></el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
<el-date-picker
|
||||||
|
size="small"
|
||||||
|
v-model="date"
|
||||||
|
:type="datePickerType[eleType].type"
|
||||||
|
:format="datePickerType[eleType].format"
|
||||||
|
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||||
|
/>
|
||||||
|
<el-button size="small" @click="getDataList()">
|
||||||
|
<icon-svg class="iconClass" name="sousuo"></icon-svg>
|
||||||
|
查询
|
||||||
|
</el-button>
|
||||||
|
</el-row>
|
||||||
|
<el-col style="height: 600px">
|
||||||
|
<el-table
|
||||||
|
:data="dataList"
|
||||||
|
:stripe="true"
|
||||||
|
:header-cell-style="{
|
||||||
|
background: '#eef1f6',
|
||||||
|
color: '#606266',
|
||||||
|
height: '56px'
|
||||||
|
}"
|
||||||
|
v-loading="dataListLoading"
|
||||||
|
style="width: 100%;padding:20px"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
type="index"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="序号"
|
||||||
|
width="50"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="createTime"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="采集时间"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="vehicleName" label="氮气流量">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="code" label="甲醇流量"> </el-table-column>
|
||||||
|
<el-table-column prop="vehicleAlias" label="丙烷流量">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="anqi" label="氨气流量"> </el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
@size-change="sizeChangeHandle"
|
||||||
|
@current-change="currentChangeHandle"
|
||||||
|
:current-page="pageIndex"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
:page-size="pageSize"
|
||||||
|
:total="totalPage"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</el-col>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 日期类型
|
||||||
|
const datePickerType = {
|
||||||
|
日: {
|
||||||
|
type: 'date',
|
||||||
|
format: '',
|
||||||
|
placeholder: '日期'
|
||||||
|
},
|
||||||
|
周: {
|
||||||
|
type: 'week',
|
||||||
|
format: 'yyyy 第 WW 周',
|
||||||
|
placeholder: '周'
|
||||||
|
},
|
||||||
|
月: {
|
||||||
|
type: 'month',
|
||||||
|
format: '',
|
||||||
|
placeholder: '月'
|
||||||
|
},
|
||||||
|
年: {
|
||||||
|
type: 'year',
|
||||||
|
format: '',
|
||||||
|
placeholder: '年'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 窑炉列表
|
||||||
|
const yaoluList = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
label: '窑炉1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
label: '窑炉2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
label: '窑炉3'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
label: '窑炉4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
label: '窑炉5'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
label: '窑炉6'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
label: '窑炉7'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
label: '窑炉8'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
label: '窑炉9'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
label: '窑炉10'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
label: '窑炉11'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'gas-acquisition',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
datePickerType,
|
||||||
|
yaoluList,
|
||||||
|
date: new Date(),
|
||||||
|
eleType: '年',
|
||||||
|
showId: 0,
|
||||||
|
yaoluIndex: 0,
|
||||||
|
yaoluName: '',
|
||||||
|
dataList: [],
|
||||||
|
pageIndex: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
totalPage: 0,
|
||||||
|
dataListLoading: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.showId = this.yaoluList[0].id
|
||||||
|
this.yaoluName = this.yaoluList[0].label
|
||||||
|
},
|
||||||
|
activated () {
|
||||||
|
this.getDataList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取数据列表
|
||||||
|
getDataList () {
|
||||||
|
this.dataListLoading = true
|
||||||
|
this.$http({
|
||||||
|
url: this.$http.adornUrl('/vehicle/page'),
|
||||||
|
method: 'post',
|
||||||
|
data: this.$http.adornData({
|
||||||
|
'current': this.pageIndex,
|
||||||
|
'size': this.pageSize
|
||||||
|
})
|
||||||
|
}).then(({data}) => {
|
||||||
|
if (data && data.code === 0) {
|
||||||
|
this.dataList = data.data.records
|
||||||
|
this.totalPage = data.data.total
|
||||||
|
} else {
|
||||||
|
this.dataList = []
|
||||||
|
this.totalPage = 0
|
||||||
|
}
|
||||||
|
this.dataListLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
changeEleType (v) {
|
||||||
|
switch (v) {
|
||||||
|
case '日':
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '周':
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '月':
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '年':
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 每页数
|
||||||
|
sizeChangeHandle (val) {
|
||||||
|
this.pageSize = val
|
||||||
|
this.pageIndex = 1
|
||||||
|
this.getDataList()
|
||||||
|
},
|
||||||
|
// 当前页
|
||||||
|
currentChangeHandle (val) {
|
||||||
|
this.pageIndex = val
|
||||||
|
this.getDataList()
|
||||||
|
},
|
||||||
|
handleNode (obj, node, e) {
|
||||||
|
if (!obj.children) {
|
||||||
|
this.showId = obj.id
|
||||||
|
this.yaoluName = obj.label
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - 138px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.chart-container {
|
||||||
|
.el-tabs__item {
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-next,
|
||||||
|
.el-tabs__nav-prev {
|
||||||
|
line-height: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
737
src/views/energy/methanol.vue
Normal file
737
src/views/energy/methanol.vue
Normal file
@ -0,0 +1,737 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zwq
|
||||||
|
* @Date: 2021-11-19 10:55:33
|
||||||
|
* @LastEditors: zwq
|
||||||
|
* @LastEditTime: 2021-12-17 15:08:06
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="chart-container">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="2">
|
||||||
|
<div class="kiln-electric-treebox">
|
||||||
|
<el-tree :data="yaoluList" @node-click="handleNode" />
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="22">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-card class="base-container" style="height: 214px">
|
||||||
|
<el-row style="position: relative;">
|
||||||
|
<div class="base-container-titleline"></div>
|
||||||
|
<h3>甲醇流量分析</h3>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col style="padding: 24px 0">
|
||||||
|
<p
|
||||||
|
:title="'甲醇流量（立方米）：123,109'"
|
||||||
|
style="font-size: 16px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
|
||||||
|
>
|
||||||
|
<icon-svg style="position: relative; top: 2px" class="iconClass" name="甲醇"></icon-svg>
|
||||||
|
甲醇流量（立方米）：<strong style="font-size: 32px; color: #f78c3e">123,109</strong>
|
||||||
|
</p>
|
||||||
|
<p style="font-size: 14px; text-indent: 20px;">昨日甲醇流量(立方米)：1145</p>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-card class="base-container" style="margin-top: 20px; min-height: 540px">
|
||||||
|
<el-row style="position: absolute; z-index: 10; right: 20px">
|
||||||
|
<el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
|
||||||
|
<el-checkbox-button label="折线" />
|
||||||
|
<el-checkbox-button label="柱状" />
|
||||||
|
</el-checkbox-group>
|
||||||
|
<el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" v-model="eleType" @change="changeEleType">
|
||||||
|
<el-radio-button label="日"></el-radio-button>
|
||||||
|
<el-radio-button label="周"></el-radio-button>
|
||||||
|
<el-radio-button label="月"></el-radio-button>
|
||||||
|
<el-radio-button label="年"></el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
<el-date-picker
|
||||||
|
size="small"
|
||||||
|
v-model="date"
|
||||||
|
:type="datePickerType[eleType].type"
|
||||||
|
:format="datePickerType[eleType].format"
|
||||||
|
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||||
|
/>
|
||||||
|
</el-row>
|
||||||
|
<el-col style="height: 500px">
|
||||||
|
<chart height="100%" width="100%" :title="eleType" :showId="showId" :titleHeader="yaoluName" titleFooter="甲醇使用量（㎡）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||||
|
</el-col>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Chart from '@/components/Charts/MixChart'
|
||||||
|
import ringChart from '@/components/Charts/RingChart'
|
||||||
|
import lineChart from '@/components/Charts/LineChart.1'
|
||||||
|
|
||||||
|
// 日发电数据
|
||||||
|
const eleDayList = [
|
||||||
|
{ time: '01:00', value: 22 },
|
||||||
|
{ time: '02:00', value: 12 },
|
||||||
|
{ time: '03:00', value: 32 },
|
||||||
|
{ time: '04:00', value: 52 },
|
||||||
|
{ time: '05:00', value: 22 },
|
||||||
|
{ time: '06:00', value: 12 },
|
||||||
|
{ time: '07:00', value: 42 },
|
||||||
|
{ time: '08:00', value: 32 },
|
||||||
|
{ time: '09:00', value: 22 },
|
||||||
|
{ time: '10:00', value: 12 },
|
||||||
|
{ time: '11:00', value: 12 },
|
||||||
|
{ time: '12:00', value: 52 },
|
||||||
|
{ time: '13:00', value: 62 },
|
||||||
|
{ time: '14:00', value: 62 },
|
||||||
|
{ time: '15:00', value: 32 },
|
||||||
|
{ time: '16:00', value: 22 },
|
||||||
|
{ time: '17:00', value: 12 },
|
||||||
|
{ time: '18:00', value: 2 },
|
||||||
|
{ time: '19:00', value: 92 },
|
||||||
|
{ time: '20:00', value: 12 },
|
||||||
|
{ time: '21:00', value: 52 },
|
||||||
|
{ time: '22:00', value: 26 },
|
||||||
|
{ time: '23:00', value: 21 },
|
||||||
|
{ time: '24:00', value: 28 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 前日发电数据
|
||||||
|
const lastEleDayList = [
|
||||||
|
{ time: '01:00', value: 22 },
|
||||||
|
{ time: '02:00', value: 62 },
|
||||||
|
{ time: '03:00', value: 23 },
|
||||||
|
{ time: '04:00', value: 25 },
|
||||||
|
{ time: '05:00', value: 72 },
|
||||||
|
{ time: '06:00', value: 21 },
|
||||||
|
{ time: '07:00', value: 24 },
|
||||||
|
{ time: '08:00', value: 23 },
|
||||||
|
{ time: '09:00', value: 20 },
|
||||||
|
{ time: '10:00', value: 14 },
|
||||||
|
{ time: '11:00', value: 18 },
|
||||||
|
{ time: '12:00', value: 72 },
|
||||||
|
{ time: '13:00', value: 22 },
|
||||||
|
{ time: '14:00', value: 12 },
|
||||||
|
{ time: '15:00', value: 62 },
|
||||||
|
{ time: '16:00', value: 72 },
|
||||||
|
{ time: '17:00', value: 22 },
|
||||||
|
{ time: '18:00', value: 46 },
|
||||||
|
{ time: '19:00', value: 52 },
|
||||||
|
{ time: '20:00', value: 22 },
|
||||||
|
{ time: '21:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 62 },
|
||||||
|
{ time: '23:00', value: 12 },
|
||||||
|
{ time: '24:00', value: 82 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 周发电数据
|
||||||
|
const eleWeekList = [
|
||||||
|
{ time: '周日', value: 22 },
|
||||||
|
{ time: '周一', value: 12 },
|
||||||
|
{ time: '周二', value: 32 },
|
||||||
|
{ time: '周三', value: 52 },
|
||||||
|
{ time: '周四', value: 22 },
|
||||||
|
{ time: '周五', value: 12 },
|
||||||
|
{ time: '周六', value: 42 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 上周发电数据
|
||||||
|
const lastEleWeekList = [
|
||||||
|
{ time: '周日', value: 111 },
|
||||||
|
{ time: '周一', value: 72 },
|
||||||
|
{ time: '周二', value: 312 },
|
||||||
|
{ time: '周三', value: 52 },
|
||||||
|
{ time: '周四', value: 82 },
|
||||||
|
{ time: '周五', value: 152 },
|
||||||
|
{ time: '周六', value: 52 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 月发电数据
|
||||||
|
const eleMonthList = [
|
||||||
|
{ time: '1日', value: 12 },
|
||||||
|
{ time: '2日', value: 12 },
|
||||||
|
{ time: '3日', value: 32 },
|
||||||
|
{ time: '4日', value: 52 },
|
||||||
|
{ time: '5日', value: 22 },
|
||||||
|
{ time: '6日', value: 12 },
|
||||||
|
{ time: '7日', value: 42 },
|
||||||
|
{ time: '8日', value: 32 },
|
||||||
|
{ time: '9日', value: 75 },
|
||||||
|
{ time: '10日', value: 124 },
|
||||||
|
{ time: '11日', value: 234 },
|
||||||
|
{ time: '12日', value: 542 },
|
||||||
|
{ time: '13日', value: 644 },
|
||||||
|
{ time: '14日', value: 62 },
|
||||||
|
{ time: '15日', value: 32 },
|
||||||
|
{ time: '16日', value: 565 },
|
||||||
|
{ time: '17日', value: 12 },
|
||||||
|
{ time: '18日', value: 2 },
|
||||||
|
{ time: '19日', value: 92 },
|
||||||
|
{ time: '20日', value: 12 },
|
||||||
|
{ time: '21日', value: 52 },
|
||||||
|
{ time: '22日', value: 176 },
|
||||||
|
{ time: '23日', value: 21 },
|
||||||
|
{ time: '24日', value: 64 },
|
||||||
|
{ time: '25日', value: 92 },
|
||||||
|
{ time: '26日', value: 124 },
|
||||||
|
{ time: '27日', value: 44 },
|
||||||
|
{ time: '28日', value: 226 },
|
||||||
|
{ time: '29日', value: 17 },
|
||||||
|
{ time: '30日', value: 28 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 上月发电数据
|
||||||
|
const lastEleMonthList = [
|
||||||
|
{ time: '1日', value: 22 },
|
||||||
|
{ time: '2日', value: 236 },
|
||||||
|
{ time: '3日', value: 32 },
|
||||||
|
{ time: '4日', value: 312 },
|
||||||
|
{ time: '5日', value: 22 },
|
||||||
|
{ time: '6日', value: 12 },
|
||||||
|
{ time: '7日', value: 42 },
|
||||||
|
{ time: '8日', value: 32 },
|
||||||
|
{ time: '9日', value: 22 },
|
||||||
|
{ time: '10日', value: 84 },
|
||||||
|
{ time: '11日', value: 25 },
|
||||||
|
{ time: '12日', value: 52 },
|
||||||
|
{ time: '13日', value: 122 },
|
||||||
|
{ time: '14日', value: 62 },
|
||||||
|
{ time: '15日', value: 32 },
|
||||||
|
{ time: '16日', value: 22 },
|
||||||
|
{ time: '17日', value: 12 },
|
||||||
|
{ time: '18日', value: 2 },
|
||||||
|
{ time: '19日', value: 92 },
|
||||||
|
{ time: '20日', value: 12 },
|
||||||
|
{ time: '21日', value: 52 },
|
||||||
|
{ time: '22日', value: 26 },
|
||||||
|
{ time: '23日', value: 81 },
|
||||||
|
{ time: '24日', value: 28 },
|
||||||
|
{ time: '25日', value: 52 },
|
||||||
|
{ time: '26日', value: 12 },
|
||||||
|
{ time: '27日', value: 47 },
|
||||||
|
{ time: '28日', value: 12 },
|
||||||
|
{ time: '29日', value: 21 },
|
||||||
|
{ time: '30日', value: 28 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 年发电数据
|
||||||
|
const eleYearList = [
|
||||||
|
{ time: '1月', value: 256 },
|
||||||
|
{ time: '2月', value: 12 },
|
||||||
|
{ time: '3月', value: 32 },
|
||||||
|
{ time: '4月', value: 52 },
|
||||||
|
{ time: '5月', value: 22 },
|
||||||
|
{ time: '6月', value: 12 },
|
||||||
|
{ time: '7月', value: 42 },
|
||||||
|
{ time: '8月', value: 32 },
|
||||||
|
{ time: '9月', value: 22 },
|
||||||
|
{ time: '10月', value: 12 },
|
||||||
|
{ time: '11月', value: 12 },
|
||||||
|
{ time: '12月', value: 52 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 去年发电数据
|
||||||
|
const lastEleYearList = [
|
||||||
|
{ time: '1月', value: 22 },
|
||||||
|
{ time: '2月', value: 12 },
|
||||||
|
{ time: '3月', value: 42 },
|
||||||
|
{ time: '4月', value: 52 },
|
||||||
|
{ time: '5月', value: 224 },
|
||||||
|
{ time: '6月', value: 12 },
|
||||||
|
{ time: '7月', value: 42 },
|
||||||
|
{ time: '8月', value: 32 },
|
||||||
|
{ time: '9月', value: 44 },
|
||||||
|
{ time: '10月', value: 12 },
|
||||||
|
{ time: '11月', value: 168 },
|
||||||
|
{ time: '12月', value: 51 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 日期类型
|
||||||
|
const datePickerType = {
|
||||||
|
'日': {
|
||||||
|
type: 'date',
|
||||||
|
format: '',
|
||||||
|
placeholder: '日期'
|
||||||
|
},
|
||||||
|
'周': {
|
||||||
|
type: 'week',
|
||||||
|
format: 'yyyy 第 WW 周',
|
||||||
|
placeholder: '周'
|
||||||
|
},
|
||||||
|
'月': {
|
||||||
|
type: 'month',
|
||||||
|
format: '',
|
||||||
|
placeholder: '月'
|
||||||
|
},
|
||||||
|
'年': {
|
||||||
|
type: 'year',
|
||||||
|
format: '',
|
||||||
|
placeholder: '年'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 窑炉列表
|
||||||
|
const yaoluList = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
label: '窑炉1',
|
||||||
|
value: 63,
|
||||||
|
percent: 11,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
label: '窑炉2',
|
||||||
|
value: 44,
|
||||||
|
percent: 8,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
label: '窑炉3',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
label: '窑炉4',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
label: '窑炉5',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
label: '窑炉6',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
label: '窑炉7',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
label: '窑炉8',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
label: '窑炉9',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
label: '窑炉10',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
label: '窑炉11',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'methanol',
|
||||||
|
components: { Chart, ringChart, lineChart },
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
eleDayList,
|
||||||
|
eleWeekList,
|
||||||
|
eleMonthList,
|
||||||
|
eleYearList,
|
||||||
|
lastEleDayList,
|
||||||
|
lastEleWeekList,
|
||||||
|
lastEleMonthList,
|
||||||
|
lastEleYearList,
|
||||||
|
datePickerType,
|
||||||
|
yaoluList,
|
||||||
|
date: new Date(),
|
||||||
|
dataList: [],
|
||||||
|
lastDataList: [],
|
||||||
|
chartType: ['柱状'],
|
||||||
|
eleType: '年',
|
||||||
|
showId: 0,
|
||||||
|
yaoluIndex: 0,
|
||||||
|
yaoluName: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.showId = this.yaoluList[0].id
|
||||||
|
this.yaoluName = this.yaoluList[0].label
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeEleType (v) {
|
||||||
|
switch (v) {
|
||||||
|
case '日':
|
||||||
|
this.dataList = this.eleDayList
|
||||||
|
this.lastDataList = this.lastEleDayList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '周':
|
||||||
|
this.dataList = this.eleWeekList
|
||||||
|
this.lastDataList = this.lastEleWeekList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '月':
|
||||||
|
this.dataList = this.eleMonthList
|
||||||
|
this.lastDataList = this.lastEleMonthList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '年':
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleNode (obj, node, e) {
|
||||||
|
if (!(obj.children)) {
|
||||||
|
this.showId = obj.id
|
||||||
|
this.yaoluName = obj.label
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - 138px);
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.chart-container {
|
||||||
|
.el-tabs__item{
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||||
|
line-height: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
737
src/views/energy/propane.vue
Normal file
737
src/views/energy/propane.vue
Normal file
@ -0,0 +1,737 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zwq
|
||||||
|
* @Date: 2021-11-19 10:55:33
|
||||||
|
* @LastEditors: zwq
|
||||||
|
* @LastEditTime: 2021-12-17 15:08:36
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="chart-container">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="2">
|
||||||
|
<div class="kiln-electric-treebox">
|
||||||
|
<el-tree :data="yaoluList" @node-click="handleNode" />
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="22">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-card class="base-container" style="height: 214px">
|
||||||
|
<el-row style="position: relative;">
|
||||||
|
<div class="base-container-titleline"></div>
|
||||||
|
<h3>丙烷流量分析</h3>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col style="padding: 24px 0">
|
||||||
|
<p
|
||||||
|
:title="'丙烷流量（立方米）：123,109'"
|
||||||
|
style="font-size: 16px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
|
||||||
|
>
|
||||||
|
<icon-svg style="position: relative; top: 2px" class="iconClass" name="丙烷"></icon-svg>
|
||||||
|
丙烷流量（立方米）：<strong style="font-size: 32px; color: #f78c3e">123,109</strong>
|
||||||
|
</p>
|
||||||
|
<p style="font-size: 14px; text-indent: 20px;">昨日丙烷流量(立方米)：1145</p>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-card class="base-container" style="margin-top: 20px; min-height: 540px">
|
||||||
|
<el-row style="position: absolute; z-index: 10; right: 20px">
|
||||||
|
<el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
|
||||||
|
<el-checkbox-button label="折线" />
|
||||||
|
<el-checkbox-button label="柱状" />
|
||||||
|
</el-checkbox-group>
|
||||||
|
<el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" v-model="eleType" @change="changeEleType">
|
||||||
|
<el-radio-button label="日"></el-radio-button>
|
||||||
|
<el-radio-button label="周"></el-radio-button>
|
||||||
|
<el-radio-button label="月"></el-radio-button>
|
||||||
|
<el-radio-button label="年"></el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
<el-date-picker
|
||||||
|
size="small"
|
||||||
|
v-model="date"
|
||||||
|
:type="datePickerType[eleType].type"
|
||||||
|
:format="datePickerType[eleType].format"
|
||||||
|
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||||
|
/>
|
||||||
|
</el-row>
|
||||||
|
<el-col style="height: 500px">
|
||||||
|
<chart height="100%" width="100%" :title="eleType" :showId="showId" :titleHeader="yaoluName" titleFooter="丙烷使用量（㎡）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||||
|
</el-col>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Chart from '@/components/Charts/MixChart'
|
||||||
|
import ringChart from '@/components/Charts/RingChart'
|
||||||
|
import lineChart from '@/components/Charts/LineChart.1'
|
||||||
|
|
||||||
|
// 日发电数据
|
||||||
|
const eleDayList = [
|
||||||
|
{ time: '01:00', value: 22 },
|
||||||
|
{ time: '02:00', value: 12 },
|
||||||
|
{ time: '03:00', value: 32 },
|
||||||
|
{ time: '04:00', value: 52 },
|
||||||
|
{ time: '05:00', value: 22 },
|
||||||
|
{ time: '06:00', value: 12 },
|
||||||
|
{ time: '07:00', value: 42 },
|
||||||
|
{ time: '08:00', value: 32 },
|
||||||
|
{ time: '09:00', value: 22 },
|
||||||
|
{ time: '10:00', value: 12 },
|
||||||
|
{ time: '11:00', value: 12 },
|
||||||
|
{ time: '12:00', value: 52 },
|
||||||
|
{ time: '13:00', value: 62 },
|
||||||
|
{ time: '14:00', value: 62 },
|
||||||
|
{ time: '15:00', value: 32 },
|
||||||
|
{ time: '16:00', value: 22 },
|
||||||
|
{ time: '17:00', value: 12 },
|
||||||
|
{ time: '18:00', value: 2 },
|
||||||
|
{ time: '19:00', value: 92 },
|
||||||
|
{ time: '20:00', value: 12 },
|
||||||
|
{ time: '21:00', value: 52 },
|
||||||
|
{ time: '22:00', value: 26 },
|
||||||
|
{ time: '23:00', value: 21 },
|
||||||
|
{ time: '24:00', value: 28 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 前日发电数据
|
||||||
|
const lastEleDayList = [
|
||||||
|
{ time: '01:00', value: 22 },
|
||||||
|
{ time: '02:00', value: 62 },
|
||||||
|
{ time: '03:00', value: 23 },
|
||||||
|
{ time: '04:00', value: 25 },
|
||||||
|
{ time: '05:00', value: 72 },
|
||||||
|
{ time: '06:00', value: 21 },
|
||||||
|
{ time: '07:00', value: 24 },
|
||||||
|
{ time: '08:00', value: 23 },
|
||||||
|
{ time: '09:00', value: 20 },
|
||||||
|
{ time: '10:00', value: 14 },
|
||||||
|
{ time: '11:00', value: 18 },
|
||||||
|
{ time: '12:00', value: 72 },
|
||||||
|
{ time: '13:00', value: 22 },
|
||||||
|
{ time: '14:00', value: 12 },
|
||||||
|
{ time: '15:00', value: 62 },
|
||||||
|
{ time: '16:00', value: 72 },
|
||||||
|
{ time: '17:00', value: 22 },
|
||||||
|
{ time: '18:00', value: 46 },
|
||||||
|
{ time: '19:00', value: 52 },
|
||||||
|
{ time: '20:00', value: 22 },
|
||||||
|
{ time: '21:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 62 },
|
||||||
|
{ time: '23:00', value: 12 },
|
||||||
|
{ time: '24:00', value: 82 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 周发电数据
|
||||||
|
const eleWeekList = [
|
||||||
|
{ time: '周日', value: 22 },
|
||||||
|
{ time: '周一', value: 12 },
|
||||||
|
{ time: '周二', value: 32 },
|
||||||
|
{ time: '周三', value: 52 },
|
||||||
|
{ time: '周四', value: 22 },
|
||||||
|
{ time: '周五', value: 12 },
|
||||||
|
{ time: '周六', value: 42 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 上周发电数据
|
||||||
|
const lastEleWeekList = [
|
||||||
|
{ time: '周日', value: 111 },
|
||||||
|
{ time: '周一', value: 72 },
|
||||||
|
{ time: '周二', value: 312 },
|
||||||
|
{ time: '周三', value: 52 },
|
||||||
|
{ time: '周四', value: 82 },
|
||||||
|
{ time: '周五', value: 152 },
|
||||||
|
{ time: '周六', value: 52 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 月发电数据
|
||||||
|
const eleMonthList = [
|
||||||
|
{ time: '1日', value: 12 },
|
||||||
|
{ time: '2日', value: 12 },
|
||||||
|
{ time: '3日', value: 32 },
|
||||||
|
{ time: '4日', value: 52 },
|
||||||
|
{ time: '5日', value: 22 },
|
||||||
|
{ time: '6日', value: 12 },
|
||||||
|
{ time: '7日', value: 42 },
|
||||||
|
{ time: '8日', value: 32 },
|
||||||
|
{ time: '9日', value: 75 },
|
||||||
|
{ time: '10日', value: 124 },
|
||||||
|
{ time: '11日', value: 234 },
|
||||||
|
{ time: '12日', value: 542 },
|
||||||
|
{ time: '13日', value: 644 },
|
||||||
|
{ time: '14日', value: 62 },
|
||||||
|
{ time: '15日', value: 32 },
|
||||||
|
{ time: '16日', value: 565 },
|
||||||
|
{ time: '17日', value: 12 },
|
||||||
|
{ time: '18日', value: 2 },
|
||||||
|
{ time: '19日', value: 92 },
|
||||||
|
{ time: '20日', value: 12 },
|
||||||
|
{ time: '21日', value: 52 },
|
||||||
|
{ time: '22日', value: 176 },
|
||||||
|
{ time: '23日', value: 21 },
|
||||||
|
{ time: '24日', value: 64 },
|
||||||
|
{ time: '25日', value: 92 },
|
||||||
|
{ time: '26日', value: 124 },
|
||||||
|
{ time: '27日', value: 44 },
|
||||||
|
{ time: '28日', value: 226 },
|
||||||
|
{ time: '29日', value: 17 },
|
||||||
|
{ time: '30日', value: 28 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 上月发电数据
|
||||||
|
const lastEleMonthList = [
|
||||||
|
{ time: '1日', value: 22 },
|
||||||
|
{ time: '2日', value: 236 },
|
||||||
|
{ time: '3日', value: 32 },
|
||||||
|
{ time: '4日', value: 312 },
|
||||||
|
{ time: '5日', value: 22 },
|
||||||
|
{ time: '6日', value: 12 },
|
||||||
|
{ time: '7日', value: 42 },
|
||||||
|
{ time: '8日', value: 32 },
|
||||||
|
{ time: '9日', value: 22 },
|
||||||
|
{ time: '10日', value: 84 },
|
||||||
|
{ time: '11日', value: 25 },
|
||||||
|
{ time: '12日', value: 52 },
|
||||||
|
{ time: '13日', value: 122 },
|
||||||
|
{ time: '14日', value: 62 },
|
||||||
|
{ time: '15日', value: 32 },
|
||||||
|
{ time: '16日', value: 22 },
|
||||||
|
{ time: '17日', value: 12 },
|
||||||
|
{ time: '18日', value: 2 },
|
||||||
|
{ time: '19日', value: 92 },
|
||||||
|
{ time: '20日', value: 12 },
|
||||||
|
{ time: '21日', value: 52 },
|
||||||
|
{ time: '22日', value: 26 },
|
||||||
|
{ time: '23日', value: 81 },
|
||||||
|
{ time: '24日', value: 28 },
|
||||||
|
{ time: '25日', value: 52 },
|
||||||
|
{ time: '26日', value: 12 },
|
||||||
|
{ time: '27日', value: 47 },
|
||||||
|
{ time: '28日', value: 12 },
|
||||||
|
{ time: '29日', value: 21 },
|
||||||
|
{ time: '30日', value: 28 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 年发电数据
|
||||||
|
const eleYearList = [
|
||||||
|
{ time: '1月', value: 256 },
|
||||||
|
{ time: '2月', value: 12 },
|
||||||
|
{ time: '3月', value: 32 },
|
||||||
|
{ time: '4月', value: 52 },
|
||||||
|
{ time: '5月', value: 22 },
|
||||||
|
{ time: '6月', value: 12 },
|
||||||
|
{ time: '7月', value: 42 },
|
||||||
|
{ time: '8月', value: 32 },
|
||||||
|
{ time: '9月', value: 22 },
|
||||||
|
{ time: '10月', value: 12 },
|
||||||
|
{ time: '11月', value: 12 },
|
||||||
|
{ time: '12月', value: 52 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 去年发电数据
|
||||||
|
const lastEleYearList = [
|
||||||
|
{ time: '1月', value: 22 },
|
||||||
|
{ time: '2月', value: 12 },
|
||||||
|
{ time: '3月', value: 42 },
|
||||||
|
{ time: '4月', value: 52 },
|
||||||
|
{ time: '5月', value: 224 },
|
||||||
|
{ time: '6月', value: 12 },
|
||||||
|
{ time: '7月', value: 42 },
|
||||||
|
{ time: '8月', value: 32 },
|
||||||
|
{ time: '9月', value: 44 },
|
||||||
|
{ time: '10月', value: 12 },
|
||||||
|
{ time: '11月', value: 168 },
|
||||||
|
{ time: '12月', value: 51 }
|
||||||
|
]
|
||||||
|
|
||||||
|
// 日期类型
|
||||||
|
const datePickerType = {
|
||||||
|
'日': {
|
||||||
|
type: 'date',
|
||||||
|
format: '',
|
||||||
|
placeholder: '日期'
|
||||||
|
},
|
||||||
|
'周': {
|
||||||
|
type: 'week',
|
||||||
|
format: 'yyyy 第 WW 周',
|
||||||
|
placeholder: '周'
|
||||||
|
},
|
||||||
|
'月': {
|
||||||
|
type: 'month',
|
||||||
|
format: '',
|
||||||
|
placeholder: '月'
|
||||||
|
},
|
||||||
|
'年': {
|
||||||
|
type: 'year',
|
||||||
|
format: '',
|
||||||
|
placeholder: '年'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 窑炉列表
|
||||||
|
const yaoluList = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
label: '窑炉1',
|
||||||
|
value: 63,
|
||||||
|
percent: 11,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
label: '窑炉2',
|
||||||
|
value: 44,
|
||||||
|
percent: 8,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
label: '窑炉3',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
label: '窑炉4',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
label: '窑炉5',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
label: '窑炉6',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
label: '窑炉7',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
label: '窑炉8',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
label: '窑炉9',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
label: '窑炉10',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
label: '窑炉11',
|
||||||
|
value: 56,
|
||||||
|
percent: 9,
|
||||||
|
data: [
|
||||||
|
{ time: '0:00', value: 24 },
|
||||||
|
{ time: '2:00', value: 43 },
|
||||||
|
{ time: '4:00', value: 33 },
|
||||||
|
{ time: '6:00', value: 25 },
|
||||||
|
{ time: '8:00', value: 44 },
|
||||||
|
{ time: '10:00', value: 46 },
|
||||||
|
{ time: '12:00', value: 16 },
|
||||||
|
{ time: '14:00', value: 47 },
|
||||||
|
{ time: '16:00', value: 86 },
|
||||||
|
{ time: '18:00', value: 22 },
|
||||||
|
{ time: '20:00', value: 25 },
|
||||||
|
{ time: '22:00', value: 27 }
|
||||||
|
],
|
||||||
|
lastData: [
|
||||||
|
{ time: '0:00', value: 54 },
|
||||||
|
{ time: '2:00', value: 13 },
|
||||||
|
{ time: '4:00', value: 63 },
|
||||||
|
{ time: '6:00', value: 85 },
|
||||||
|
{ time: '8:00', value: 14 },
|
||||||
|
{ time: '10:00', value: 26 },
|
||||||
|
{ time: '12:00', value: 56 },
|
||||||
|
{ time: '14:00', value: 37 },
|
||||||
|
{ time: '16:00', value: 36 },
|
||||||
|
{ time: '18:00', value: 12 },
|
||||||
|
{ time: '20:00', value: 35 },
|
||||||
|
{ time: '22:00', value: 17 }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'propane',
|
||||||
|
components: { Chart, ringChart, lineChart },
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
eleDayList,
|
||||||
|
eleWeekList,
|
||||||
|
eleMonthList,
|
||||||
|
eleYearList,
|
||||||
|
lastEleDayList,
|
||||||
|
lastEleWeekList,
|
||||||
|
lastEleMonthList,
|
||||||
|
lastEleYearList,
|
||||||
|
datePickerType,
|
||||||
|
yaoluList,
|
||||||
|
date: new Date(),
|
||||||
|
dataList: [],
|
||||||
|
lastDataList: [],
|
||||||
|
chartType: ['柱状'],
|
||||||
|
eleType: '年',
|
||||||
|
showId: 0,
|
||||||
|
yaoluIndex: 0,
|
||||||
|
yaoluName: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.showId = this.yaoluList[0].id
|
||||||
|
this.yaoluName = this.yaoluList[0].label
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeEleType (v) {
|
||||||
|
switch (v) {
|
||||||
|
case '日':
|
||||||
|
this.dataList = this.eleDayList
|
||||||
|
this.lastDataList = this.lastEleDayList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '周':
|
||||||
|
this.dataList = this.eleWeekList
|
||||||
|
this.lastDataList = this.lastEleWeekList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '月':
|
||||||
|
this.dataList = this.eleMonthList
|
||||||
|
this.lastDataList = this.lastEleMonthList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '年':
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleNode (obj, node, e) {
|
||||||
|
if (!(obj.children)) {
|
||||||
|
this.showId = obj.id
|
||||||
|
this.yaoluName = obj.label
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - 138px);
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.chart-container {
|
||||||
|
.el-tabs__item{
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||||
|
line-height: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
274
src/views/energy/temperature-acquisition.vue
Normal file
274
src/views/energy/temperature-acquisition.vue
Normal file
@ -0,0 +1,274 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zwq
|
||||||
|
* @Date: 2021-11-19 10:55:33
|
||||||
|
* @LastEditors: zwq
|
||||||
|
* @LastEditTime: 2021-12-17 15:25:52
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="chart-container">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="2">
|
||||||
|
<div class="kiln-electric-treebox">
|
||||||
|
<el-tree
|
||||||
|
:data="yaoluList"
|
||||||
|
@node-click="handleNode"
|
||||||
|
:highlight-current="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="22">
|
||||||
|
<el-card class="base-container" style="min-height: 540px">
|
||||||
|
<el-row style="z-index: 10;">
|
||||||
|
<el-radio-group
|
||||||
|
style="margin: 0 20px; position:relative; bottom: 2px"
|
||||||
|
size="small"
|
||||||
|
v-model="eleType"
|
||||||
|
@change="changeEleType"
|
||||||
|
>
|
||||||
|
<el-radio-button label="日"></el-radio-button>
|
||||||
|
<el-radio-button label="周"></el-radio-button>
|
||||||
|
<el-radio-button label="月"></el-radio-button>
|
||||||
|
<el-radio-button label="年"></el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
<el-date-picker
|
||||||
|
size="small"
|
||||||
|
v-model="date"
|
||||||
|
:type="datePickerType[eleType].type"
|
||||||
|
:format="datePickerType[eleType].format"
|
||||||
|
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||||
|
/>
|
||||||
|
<el-button size="small" @click="getDataList()">
|
||||||
|
<icon-svg class="iconClass" name="sousuo"></icon-svg>
|
||||||
|
查询
|
||||||
|
</el-button>
|
||||||
|
</el-row>
|
||||||
|
<el-col style="height: 600px">
|
||||||
|
<el-table
|
||||||
|
:data="dataList"
|
||||||
|
:stripe="true"
|
||||||
|
:header-cell-style="{
|
||||||
|
background: '#eef1f6',
|
||||||
|
color: '#606266',
|
||||||
|
height: '56px'
|
||||||
|
}"
|
||||||
|
v-loading="dataListLoading"
|
||||||
|
style="width: 100%;padding:20px"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
type="index"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="序号"
|
||||||
|
width="50"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="createTime"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="采集时间"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="vehicleName" label="实际温度">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="code" label="设定温度"> </el-table-column>
|
||||||
|
<el-table-column prop="vehicleAlias" label="实际碳势">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="anqi" label="设定碳势"> </el-table-column>
|
||||||
|
<el-table-column prop="anqi" label="油槽实际温度"> </el-table-column>
|
||||||
|
<el-table-column prop="anqi" label="油槽设定温度"> </el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
@size-change="sizeChangeHandle"
|
||||||
|
@current-change="currentChangeHandle"
|
||||||
|
:current-page="pageIndex"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
:page-size="pageSize"
|
||||||
|
:total="totalPage"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</el-col>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 日期类型
|
||||||
|
const datePickerType = {
|
||||||
|
日: {
|
||||||
|
type: 'date',
|
||||||
|
format: '',
|
||||||
|
placeholder: '日期'
|
||||||
|
},
|
||||||
|
周: {
|
||||||
|
type: 'week',
|
||||||
|
format: 'yyyy 第 WW 周',
|
||||||
|
placeholder: '周'
|
||||||
|
},
|
||||||
|
月: {
|
||||||
|
type: 'month',
|
||||||
|
format: '',
|
||||||
|
placeholder: '月'
|
||||||
|
},
|
||||||
|
年: {
|
||||||
|
type: 'year',
|
||||||
|
format: '',
|
||||||
|
placeholder: '年'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 窑炉列表
|
||||||
|
const yaoluList = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
label: '窑炉1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
label: '窑炉2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
label: '窑炉3'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
label: '窑炉4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
label: '窑炉5'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
label: '窑炉6'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
label: '窑炉7'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
label: '窑炉8'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
label: '窑炉9'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
label: '窑炉10'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
label: '窑炉11'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'gas-acquisition',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
datePickerType,
|
||||||
|
yaoluList,
|
||||||
|
date: new Date(),
|
||||||
|
eleType: '年',
|
||||||
|
showId: 0,
|
||||||
|
yaoluIndex: 0,
|
||||||
|
yaoluName: '',
|
||||||
|
dataList: [],
|
||||||
|
pageIndex: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
totalPage: 0,
|
||||||
|
dataListLoading: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.showId = this.yaoluList[0].id
|
||||||
|
this.yaoluName = this.yaoluList[0].label
|
||||||
|
},
|
||||||
|
activated () {
|
||||||
|
this.getDataList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取数据列表
|
||||||
|
getDataList () {
|
||||||
|
this.dataListLoading = true
|
||||||
|
this.$http({
|
||||||
|
url: this.$http.adornUrl('/vehicle/page'),
|
||||||
|
method: 'post',
|
||||||
|
data: this.$http.adornData({
|
||||||
|
'current': this.pageIndex,
|
||||||
|
'size': this.pageSize
|
||||||
|
})
|
||||||
|
}).then(({data}) => {
|
||||||
|
if (data && data.code === 0) {
|
||||||
|
this.dataList = data.data.records
|
||||||
|
this.totalPage = data.data.total
|
||||||
|
} else {
|
||||||
|
this.dataList = []
|
||||||
|
this.totalPage = 0
|
||||||
|
}
|
||||||
|
this.dataListLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
changeEleType (v) {
|
||||||
|
switch (v) {
|
||||||
|
case '日':
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '周':
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '月':
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '年':
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 每页数
|
||||||
|
sizeChangeHandle (val) {
|
||||||
|
this.pageSize = val
|
||||||
|
this.pageIndex = 1
|
||||||
|
this.getDataList()
|
||||||
|
},
|
||||||
|
// 当前页
|
||||||
|
currentChangeHandle (val) {
|
||||||
|
this.pageIndex = val
|
||||||
|
this.getDataList()
|
||||||
|
},
|
||||||
|
handleNode (obj, node, e) {
|
||||||
|
if (!obj.children) {
|
||||||
|
this.showId = obj.id
|
||||||
|
this.yaoluName = obj.label
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - 138px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.chart-container {
|
||||||
|
.el-tabs__item {
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-next,
|
||||||
|
.el-tabs__nav-prev {
|
||||||
|
line-height: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -161,6 +161,26 @@
|
|||||||
></icon-svg>
|
></icon-svg>
|
||||||
<span slot="title">二氧化硫流量分析</span>
|
<span slot="title">二氧化硫流量分析</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
|
<el-menu-item
|
||||||
|
index="methanol"
|
||||||
|
@click="$router.push({ name: 'energy-methanol' })"
|
||||||
|
>
|
||||||
|
<icon-svg
|
||||||
|
name="tubiao"
|
||||||
|
class="site-sidebar__menu-icon"
|
||||||
|
></icon-svg>
|
||||||
|
<span slot="title">甲醇流量分析</span>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item
|
||||||
|
index="propane"
|
||||||
|
@click="$router.push({ name: 'energy-propane' })"
|
||||||
|
>
|
||||||
|
<icon-svg
|
||||||
|
name="tubiao"
|
||||||
|
class="site-sidebar__menu-icon"
|
||||||
|
></icon-svg>
|
||||||
|
<span slot="title">丙烷流量分析</span>
|
||||||
|
</el-menu-item>
|
||||||
<el-menu-item
|
<el-menu-item
|
||||||
index="ammonia"
|
index="ammonia"
|
||||||
@click="$router.push({ name: 'energy-ammonia' })"
|
@click="$router.push({ name: 'energy-ammonia' })"
|
||||||
@ -189,6 +209,20 @@
|
|||||||
<icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
|
<icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
|
||||||
<span slot="title">电能采集数据</span>
|
<span slot="title">电能采集数据</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
|
<el-menu-item
|
||||||
|
index="gas-acquisition"
|
||||||
|
@click="$router.push({ name: 'energy-gas-acquisition' })"
|
||||||
|
>
|
||||||
|
<icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
|
||||||
|
<span slot="title">用气采集数据</span>
|
||||||
|
</el-menu-item>
|
||||||
|
<el-menu-item
|
||||||
|
index="temperature-acquisition"
|
||||||
|
@click="$router.push({ name: 'energy-temperature-acquisition' })"
|
||||||
|
>
|
||||||
|
<icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
|
||||||
|
<span slot="title">温度采集数据</span>
|
||||||
|
</el-menu-item>
|
||||||
<el-submenu index="temperature">
|
<el-submenu index="temperature">
|
||||||
<template slot="title">
|
<template slot="title">
|
||||||
<icon-svg
|
<icon-svg
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user