update
This commit is contained in:
@@ -1,7 +1,731 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:58:23
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-11-19 10:58:23
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-30 20:23:37
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div class="kiln-electric-treebox">
|
||||
<el-tree :data="yaoluList" @node-click="handleNode" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col>
|
||||
<h3>氨气流量分析</h3>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col style="width: 400px">
|
||||
<el-card>
|
||||
<p style="font-size: 18px">氨气流量（立方米）：<strong style="font-size: 22px">123,109</strong></p>
|
||||
<p>昨日氨气流量(立方米)：1145</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col style="margin: 20px 0">
|
||||
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||
<el-checkbox-button label="折线" />
|
||||
<el-checkbox-button label="柱状" />
|
||||
</el-checkbox-group>
|
||||
<el-row style="float: right">
|
||||
<el-radio-group 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
|
||||
v-model="date"
|
||||
:type="datePickerType[eleType].type"
|
||||
:format="datePickerType[eleType].format"
|
||||
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||
/>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col style="height: 500px">
|
||||
<chart height="100%" width="100%" :title="eleType" :showId="showId" titleFooter="氨气使用量" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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: 'ammonia-analysis',
|
||||
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
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dataList = this.eleYearList
|
||||
this.lastDataList = this.lastEleYearList
|
||||
this.showId = this.yaoluList[0].id
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 124px);
|
||||
.kiln-electric-treebox {
|
||||
width: 100%;
|
||||
border: 1px solid #eeeeee;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.el-tabs__item{
|
||||
height: 120px;
|
||||
}
|
||||
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||
line-height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,731 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:57:00
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-11-19 10:57:00
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-30 20:23:45
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div class="kiln-electric-treebox">
|
||||
<el-tree :data="yaoluList" @node-click="handleNode" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col>
|
||||
<h3>氨气流量分析</h3>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col style="width: 400px">
|
||||
<el-card>
|
||||
<p style="font-size: 18px">氨气流量（立方米）：<strong style="font-size: 22px">123,109</strong></p>
|
||||
<p>昨日氨气流量(立方米)：1145</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col style="margin: 20px 0">
|
||||
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||
<el-checkbox-button label="折线" />
|
||||
<el-checkbox-button label="柱状" />
|
||||
</el-checkbox-group>
|
||||
<el-row style="float: right">
|
||||
<el-radio-group 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
|
||||
v-model="date"
|
||||
:type="datePickerType[eleType].type"
|
||||
:format="datePickerType[eleType].format"
|
||||
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||
/>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col style="height: 500px">
|
||||
<chart height="100%" width="100%" :title="eleType" :showId="showId" titleFooter="氨气使用量" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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: 'ammonia',
|
||||
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
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dataList = this.eleYearList
|
||||
this.lastDataList = this.lastEleYearList
|
||||
this.showId = this.yaoluList[0].id
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 124px);
|
||||
.kiln-electric-treebox {
|
||||
width: 100%;
|
||||
border: 1px solid #eeeeee;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.el-tabs__item{
|
||||
height: 120px;
|
||||
}
|
||||
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||
line-height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,319 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:57:29
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-11-19 10:57:30
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="mod-config">
|
||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
||||
<el-form-item>
|
||||
<el-radio-group v-model="dataForm.type" @change="changeType">
|
||||
<el-radio-button label="日" />
|
||||
<el-radio-button label="周" />
|
||||
<el-radio-button label="月" />
|
||||
<el-radio-button label="年" />
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择时间">
|
||||
<el-date-picker
|
||||
v-model="dataForm.date"
|
||||
:type="datePickerType[dataForm.type].type"
|
||||
:format="datePickerType[dataForm.type].format"
|
||||
:placeholder="'选择' + datePickerType[dataForm.type].placeholder"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList()">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
:data="dataList"
|
||||
border
|
||||
v-loading="dataListLoading"
|
||||
style="width: 100%;">
|
||||
<el-table-column
|
||||
prop="time"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="时间"
|
||||
/>
|
||||
<el-table-column
|
||||
v-for="item in yaoluList"
|
||||
:prop="item.id"
|
||||
header-align="center"
|
||||
align="center"
|
||||
:label="item.name"
|
||||
:key="item.id"
|
||||
/>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 = {
|
||||
'日': {
|
||||
type: 'date',
|
||||
format: '',
|
||||
placeholder: '日期'
|
||||
},
|
||||
'周': {
|
||||
type: 'week',
|
||||
format: 'yyyy 第 WW 周',
|
||||
placeholder: '周'
|
||||
},
|
||||
'月': {
|
||||
type: 'month',
|
||||
format: '',
|
||||
placeholder: '月'
|
||||
},
|
||||
'年': {
|
||||
type: 'year',
|
||||
format: '',
|
||||
placeholder: '年'
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dataForm: {
|
||||
type: '日',
|
||||
date: ''
|
||||
},
|
||||
dataList: [],
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
totalPage: 0,
|
||||
dataListLoading: false,
|
||||
orderDetailVisible: false,
|
||||
yaoluList,
|
||||
datePickerType
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
// 获取数据列表
|
||||
getDataList () {
|
||||
this.dataList = []
|
||||
this.dataListLoading = true
|
||||
this.yaoluList.map((item, index) => {
|
||||
if (index === 0) {
|
||||
item.data.map(i => {
|
||||
this.dataList.push({
|
||||
time: i.time,
|
||||
[item.id]: i.value
|
||||
})
|
||||
})
|
||||
} else {
|
||||
item.data.map((i, idx) => {
|
||||
this.dataList[idx][item.id] = i.value
|
||||
})
|
||||
}
|
||||
})
|
||||
this.dataListLoading = false
|
||||
},
|
||||
// 切换查询类型
|
||||
changeType (v) {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-26 16:53:20
|
||||
* @LastEditTime: 2021-11-30 20:19:52
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@@ -50,12 +50,12 @@
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col style="height: 500px">
|
||||
<chart height="100%" width="100%" :title="eleType" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||
<chart height="100%" width="100%" :title="eleType" titleFooter="用电量（W）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||
</el-col>
|
||||
<el-col style="margin: 20px 0">
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane v-for="item in yaoluList" :key="item.id">
|
||||
<el-row style="width: 200px; height: 120px" slot="label">
|
||||
<el-row style="width: 200px; height: 120px" slot="label" @click.native="handleTab(item.id)">
|
||||
<el-col :span="12">
|
||||
<el-row style="margin-top: 24px; line-height: 24px; height: 24px; font-size: 16px; font-weight: bold">
|
||||
{{ item.name }}(KW)
|
||||
@@ -68,10 +68,34 @@
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<ring-chart :id="item.id" />
|
||||
<ring-chart :id="item.id" :data="item.percent" :name="item.name" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="height: 300px">
|
||||
<el-col style="margin: 20px 0">
|
||||
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||
<el-checkbox-button label="折线" />
|
||||
<el-checkbox-button label="柱状" />
|
||||
</el-checkbox-group>
|
||||
<el-row style="float: right">
|
||||
<el-radio-group 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
|
||||
v-model="date"
|
||||
:type="datePickerType[eleType].type"
|
||||
:format="datePickerType[eleType].format"
|
||||
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||
/>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col style="height: 500px">
|
||||
<chart height="100%" width="100%" :id="item.id" :showId="showId" :title="eleType" :titleHeader="item.name" titleFooter="用电量（W）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
我的行程
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
@@ -82,6 +106,7 @@
|
||||
<script>
|
||||
import Chart from '@/components/Charts/MixChart'
|
||||
import ringChart from '@/components/Charts/RingChart'
|
||||
import lineChart from '@/components/Charts/LineChart'
|
||||
|
||||
// 日发电数据
|
||||
const eleDayList = [
|
||||
@@ -269,8 +294,8 @@ const datePickerType = {
|
||||
placeholder: '日期'
|
||||
},
|
||||
'周': {
|
||||
type: 'date',
|
||||
format: 'yyyy 第 W 周',
|
||||
type: 'week',
|
||||
format: 'yyyy 第 WW 周',
|
||||
placeholder: '周'
|
||||
},
|
||||
'月': {
|
||||
@@ -665,7 +690,7 @@ const yaoluList = [
|
||||
|
||||
export default {
|
||||
name: 'electric',
|
||||
components: { Chart, ringChart },
|
||||
components: { Chart, ringChart, lineChart },
|
||||
data () {
|
||||
return {
|
||||
eleDayList,
|
||||
@@ -682,12 +707,14 @@ export default {
|
||||
dataList: [],
|
||||
lastDataList: [],
|
||||
chartType: ['柱状'],
|
||||
eleType: '年'
|
||||
eleType: '年',
|
||||
showId: 0
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dataList = this.eleYearList
|
||||
this.lastDataList = this.lastEleYearList
|
||||
this.showId = this.yaoluList[0].id
|
||||
},
|
||||
methods: {
|
||||
changeEleType (v) {
|
||||
@@ -713,6 +740,9 @@ export default {
|
||||
this.date = new Date()
|
||||
break
|
||||
}
|
||||
},
|
||||
handleTab (id) {
|
||||
this.showId = id
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,788 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:56:01
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-11-19 10:56:02
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-30 20:24:04
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div class="kiln-electric-treebox">
|
||||
<el-tree :data="yaoluList" @node-click="handleNode" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col>
|
||||
<h3>用电分析</h3>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col style="width: 300px">
|
||||
<el-card>
|
||||
<p style="font-size: 18px">总电量（KW）：<strong style="font-size: 22px">123,109</strong></p>
|
||||
<p>昨日用电量(KW)：1145</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col style="width: 300px">
|
||||
<el-card>
|
||||
<p style="font-size: 18px">总电流（A）：<strong style="font-size: 22px">123,109</strong></p>
|
||||
<p>昨日用电流（A）：1145</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col style="margin: 20px 0">
|
||||
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||
<el-checkbox-button label="折线" />
|
||||
<el-checkbox-button label="柱状" />
|
||||
</el-checkbox-group>
|
||||
<el-row style="float: right">
|
||||
<el-radio-group 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
|
||||
v-model="date"
|
||||
:type="datePickerType[eleType].type"
|
||||
:format="datePickerType[eleType].format"
|
||||
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||
/>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col style="height: 500px">
|
||||
<chart height="100%" width="100%" :title="eleType" titleFooter="用电量（W）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||
</el-col>
|
||||
<el-col style="margin: 20px 0">
|
||||
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||
<el-checkbox-button label="折线" />
|
||||
<el-checkbox-button label="柱状" />
|
||||
</el-checkbox-group>
|
||||
<el-row style="float: right">
|
||||
<el-radio-group 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
|
||||
v-model="date"
|
||||
:type="datePickerType[eleType].type"
|
||||
:format="datePickerType[eleType].format"
|
||||
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||
/>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col style="height: 500px">
|
||||
<chart height="100%" width="100%" :id="1" :title="eleType" titleFooter="电流趋势（A）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||
</el-col>
|
||||
<el-col style="margin: 20px 0">
|
||||
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||
<el-checkbox-button label="折线" />
|
||||
<el-checkbox-button label="柱状" />
|
||||
</el-checkbox-group>
|
||||
<el-row style="float: right">
|
||||
<el-radio-group 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
|
||||
v-model="date"
|
||||
:type="datePickerType[eleType].type"
|
||||
:format="datePickerType[eleType].format"
|
||||
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||
/>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col style="height: 500px">
|
||||
<chart height="100%" width="100%" :id="2" :title="eleType" titleFooter="电压趋势（V）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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: 'kiln-electric',
|
||||
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
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dataList = this.eleYearList
|
||||
this.lastDataList = this.lastEleYearList
|
||||
this.showId = this.yaoluList[0].id
|
||||
},
|
||||
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.yaoluList.map((item, index) => {
|
||||
if (item.id === obj.id) {
|
||||
this.yaoluIndex = index
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 124px);
|
||||
.kiln-electric-treebox {
|
||||
width: 100%;
|
||||
border: 1px solid #eeeeee;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.el-tabs__item{
|
||||
height: 120px;
|
||||
}
|
||||
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||
line-height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,731 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:59:04
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-11-19 10:59:05
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-30 20:24:10
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div class="kiln-electric-treebox">
|
||||
<el-tree :data="yaoluList" @node-click="handleNode" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col>
|
||||
<h3>氨气流量分析</h3>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col style="width: 400px">
|
||||
<el-card>
|
||||
<p style="font-size: 18px">氨气流量（立方米）：<strong style="font-size: 22px">123,109</strong></p>
|
||||
<p>昨日氨气流量(立方米)：1145</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col style="margin: 20px 0">
|
||||
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||
<el-checkbox-button label="折线" />
|
||||
<el-checkbox-button label="柱状" />
|
||||
</el-checkbox-group>
|
||||
<el-row style="float: right">
|
||||
<el-radio-group 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
|
||||
v-model="date"
|
||||
:type="datePickerType[eleType].type"
|
||||
:format="datePickerType[eleType].format"
|
||||
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||
/>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col style="height: 500px">
|
||||
<chart height="100%" width="100%" :title="eleType" :showId="showId" titleFooter="氨气使用量" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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: 'kiln-speed',
|
||||
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
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dataList = this.eleYearList
|
||||
this.lastDataList = this.lastEleYearList
|
||||
this.showId = this.yaoluList[0].id
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 124px);
|
||||
.kiln-electric-treebox {
|
||||
width: 100%;
|
||||
border: 1px solid #eeeeee;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.el-tabs__item{
|
||||
height: 120px;
|
||||
}
|
||||
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||
line-height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,731 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:57:17
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-11-19 10:57:18
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-30 20:24:16
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div class="kiln-electric-treebox">
|
||||
<el-tree :data="yaoluList" @node-click="handleNode" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col>
|
||||
<h3>氮气流量分析</h3>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col style="width: 400px">
|
||||
<el-card>
|
||||
<p style="font-size: 18px">氮气流量（立方米）：<strong style="font-size: 22px">123,109</strong></p>
|
||||
<p>昨日氮气流量(立方米)：1145</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col style="margin: 20px 0">
|
||||
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||
<el-checkbox-button label="折线" />
|
||||
<el-checkbox-button label="柱状" />
|
||||
</el-checkbox-group>
|
||||
<el-row style="float: right">
|
||||
<el-radio-group 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
|
||||
v-model="date"
|
||||
:type="datePickerType[eleType].type"
|
||||
:format="datePickerType[eleType].format"
|
||||
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||
/>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col style="height: 500px">
|
||||
<chart height="100%" width="100%" :showId="showId" :title="eleType" titleFooter="氮气使用量" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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: 'nitrogen',
|
||||
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
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dataList = this.eleYearList
|
||||
this.lastDataList = this.lastEleYearList
|
||||
this.showId = this.yaoluList[0].id
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 124px);
|
||||
.kiln-electric-treebox {
|
||||
width: 100%;
|
||||
border: 1px solid #eeeeee;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.el-tabs__item{
|
||||
height: 120px;
|
||||
}
|
||||
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||
line-height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,731 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:58:02
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-11-19 10:58:03
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-30 20:24:22
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div class="kiln-electric-treebox">
|
||||
<el-tree :data="yaoluList" @node-click="handleNode" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col>
|
||||
<h3>氨气流量分析</h3>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col style="width: 400px">
|
||||
<el-card>
|
||||
<p style="font-size: 18px">氨气流量（立方米）：<strong style="font-size: 22px">123,109</strong></p>
|
||||
<p>昨日氨气流量(立方米)：1145</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col style="margin: 20px 0">
|
||||
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||
<el-checkbox-button label="折线" />
|
||||
<el-checkbox-button label="柱状" />
|
||||
</el-checkbox-group>
|
||||
<el-row style="float: right">
|
||||
<el-radio-group 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
|
||||
v-model="date"
|
||||
:type="datePickerType[eleType].type"
|
||||
:format="datePickerType[eleType].format"
|
||||
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||
/>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col style="height: 500px">
|
||||
<chart height="100%" width="100%" :title="eleType" :showId="showId" titleFooter="氨气使用量" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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: 'process-temperature',
|
||||
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
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dataList = this.eleYearList
|
||||
this.lastDataList = this.lastEleYearList
|
||||
this.showId = this.yaoluList[0].id
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 124px);
|
||||
.kiln-electric-treebox {
|
||||
width: 100%;
|
||||
border: 1px solid #eeeeee;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.el-tabs__item{
|
||||
height: 120px;
|
||||
}
|
||||
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||
line-height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,731 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:56:37
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-11-19 10:56:38
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-30 20:24:28
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div class="kiln-electric-treebox">
|
||||
<el-tree :data="yaoluList" @node-click="handleNode" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col>
|
||||
<h3>二氧化硫流量分析</h3>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col style="width: 400px">
|
||||
<el-card>
|
||||
<p style="font-size: 18px">二氧化硫流量（立方米）：<strong style="font-size: 22px">123,109</strong></p>
|
||||
<p>昨日二氧化硫流量(立方米)：1145</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col style="margin: 20px 0">
|
||||
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||
<el-checkbox-button label="折线" />
|
||||
<el-checkbox-button label="柱状" />
|
||||
</el-checkbox-group>
|
||||
<el-row style="float: right">
|
||||
<el-radio-group 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
|
||||
v-model="date"
|
||||
:type="datePickerType[eleType].type"
|
||||
:format="datePickerType[eleType].format"
|
||||
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||
/>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col style="height: 500px">
|
||||
<chart height="100%" width="100%" :showId="showId" :title="eleType" titleFooter="二氧化硫使用量" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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: 'sulfur-dioxide',
|
||||
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
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dataList = this.eleYearList
|
||||
this.lastDataList = this.lastEleYearList
|
||||
this.showId = this.yaoluList[0].id
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 124px);
|
||||
.kiln-electric-treebox {
|
||||
width: 100%;
|
||||
border: 1px solid #eeeeee;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.el-tabs__item{
|
||||
height: 120px;
|
||||
}
|
||||
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||
line-height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,731 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-19 10:57:55
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2021-11-19 10:57:56
|
||||
* @Date: 2021-11-19 10:55:33
|
||||
* @LastEditors: gtz
|
||||
* @LastEditTime: 2021-11-30 20:24:34
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div class="kiln-electric-treebox">
|
||||
<el-tree :data="yaoluList" @node-click="handleNode" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col>
|
||||
<h3>氨气流量分析</h3>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col style="width: 400px">
|
||||
<el-card>
|
||||
<p style="font-size: 18px">氨气流量（立方米）：<strong style="font-size: 22px">123,109</strong></p>
|
||||
<p>昨日氨气流量(立方米)：1145</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
<el-row style="margin: 20px 0" :gutter="20">
|
||||
<el-col style="margin: 20px 0">
|
||||
<el-checkbox-group :min="1" v-model="chartType" style="float: left">
|
||||
<el-checkbox-button label="折线" />
|
||||
<el-checkbox-button label="柱状" />
|
||||
</el-checkbox-group>
|
||||
<el-row style="float: right">
|
||||
<el-radio-group 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
|
||||
v-model="date"
|
||||
:type="datePickerType[eleType].type"
|
||||
:format="datePickerType[eleType].format"
|
||||
:placeholder="'选择' + datePickerType[eleType].placeholder"
|
||||
/>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col style="height: 500px">
|
||||
<chart height="100%" width="100%" :title="eleType" :showId="showId" titleFooter="氨气使用量" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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: 'sump-temperature',
|
||||
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
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.dataList = this.eleYearList
|
||||
this.lastDataList = this.lastEleYearList
|
||||
this.showId = this.yaoluList[0].id
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 124px);
|
||||
.kiln-electric-treebox {
|
||||
width: 100%;
|
||||
border: 1px solid #eeeeee;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.el-tabs__item{
|
||||
height: 120px;
|
||||
}
|
||||
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||
line-height: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user