mt-ck/mt-qj-wms-ui
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
124f27fe5f
mt-qj-wms-ui/src/views/energy/ammonia-analysis.vue

732 lines
20 KiB
Vue
Raw Normal View History

完成所有页面路由
2021-11-19 11:15:58 +08:00
<!--
* @Author: zwq
update
2021-11-30 21:05:26 +08:00
* @Date: 2021-11-19 10:55:33
* @LastEditors: gtz
* @LastEditTime: 2021-11-30 20:23:37
完成所有页面路由
2021-11-19 11:15:58 +08:00
* @Description:
-->
update
2021-11-30 21:05:26 +08:00
<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>
Reference in New Issue Copy Permalink