mt-ck/mt-qj-wms-ui
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
gtz217 2021-11-30 21:05:26 +08:00
parent bda097fe8c
commit 9325ce5fdb
26 changed files with 6514 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build/webpack.base.conf.js
View File

@ -98,7 +98,6 @@ module.exports = {
// 引入外部库, 无需webpack打包处理 // 引入外部库, 无需webpack打包处理
externals: { externals: {
mockjs: 'Mock', mockjs: 'Mock',
echarts: 'echarts',
ueditor: 'UE' ueditor: 'UE'
} }
} }

9
index.html
View File

@ -1,3 +1,11 @@
<!--
* @Author: gtz
* @Date: 2021-11-19 10:10:51
* @LastEditors: gtz
* @LastEditTime: 2021-11-30 09:39:29
* @Description: file content
* @FilePath: \mt-qj-wms-ui\index.html
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -13,7 +21,6 @@
<link rel="shortcut icon" type="image/x-icon" href="./static/img/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="./static/img/favicon.ico">
<script src="./static/config/index.js"></script> <script src="./static/config/index.js"></script>
<script src="./static/plugins/mock-1.0.0-beta3/mock-min.js"></script> <script src="./static/plugins/mock-1.0.0-beta3/mock-min.js"></script>
<script src="./static/plugins/echarts-3.8.5/echarts.common.min.js"></script>
<script src="./static/plugins/ueditor-1.4.3.3/ueditor.config.js"></script> <script src="./static/plugins/ueditor-1.4.3.3/ueditor.config.js"></script>
<script src="./static/plugins/ueditor-1.4.3.3/ueditor.all.min.js"></script> <script src="./static/plugins/ueditor-1.4.3.3/ueditor.all.min.js"></script>
<script src="./static/plugins/ueditor-1.4.3.3/lang/zh-cn/zh-cn.js"></script> <script src="./static/plugins/ueditor-1.4.3.3/lang/zh-cn/zh-cn.js"></script>

22
package-lock.json generated
View File

@ -522,8 +522,8 @@
}, },
"async-validator": { "async-validator": {
"version": "1.8.5", "version": "1.8.5",
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz", "resolved": "https://registry.npmmirror.com/async-validator/download/async-validator-1.8.5.tgz?cache=0&sync_timestamp=1634529574100&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fasync-validator%2Fdownload%2Fasync-validator-1.8.5.tgz",
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==", "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
"requires": { "requires": {
"babel-runtime": "6.x" "babel-runtime": "6.x"
} }
@ -3466,8 +3466,8 @@
}, },
"deepmerge": { "deepmerge": {
"version": "1.5.2", "version": "1.5.2",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz", "resolved": "https://registry.nlark.com/deepmerge/download/deepmerge-1.5.2.tgz",
"integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==" "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
}, },
"default-require-extensions": { "default-require-extensions": {
"version": "1.0.0", "version": "1.0.0",
@ -3893,8 +3893,8 @@
}, },
"element-ui": { "element-ui": {
"version": "2.8.2", "version": "2.8.2",
"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.8.2.tgz", "resolved": "https://registry.npmmirror.com/element-ui/download/element-ui-2.8.2.tgz?cache=0&sync_timestamp=1637231762535&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Felement-ui%2Fdownload%2Felement-ui-2.8.2.tgz",
"integrity": "sha512-LABKHKGUyewFNvpf9BQLecB659Wq0XYvyP1tBveZ4RWpdlPSylDfGW/RLvDYU7zuCBoRasdZAz7ryjOwq1lLNg==", "integrity": "sha1-Iaeky5Jhaw+LddTU5jfToc2MCd4=",
"requires": { "requires": {
"async-validator": "~1.8.1", "async-validator": "~1.8.1",
"babel-helper-vue-jsx-merge-props": "^2.0.0", "babel-helper-vue-jsx-merge-props": "^2.0.0",
@ -11348,7 +11348,7 @@
}, },
"normalize-wheel": { "normalize-wheel": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz", "resolved": "https://registry.nlark.com/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
"integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=" "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
}, },
"npm": { "npm": {
@ -17322,8 +17322,8 @@
}, },
"resize-observer-polyfill": { "resize-observer-polyfill": {
"version": "1.5.1", "version": "1.5.1",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", "resolved": "https://registry.nlark.com/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz?cache=0&sync_timestamp=1618846967396&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fresize-observer-polyfill%2Fdownload%2Fresize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
}, },
"resolve": { "resolve": {
"version": "1.10.1", "version": "1.10.1",
@ -19015,8 +19015,8 @@
}, },
"throttle-debounce": { "throttle-debounce": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz", "resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz",
"integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==" "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
}, },
"through": { "through": {
"version": "2.3.8", "version": "2.3.8",

2
package.json
View File

@ -18,7 +18,7 @@
"babel-plugin-component": "0.10.1", "babel-plugin-component": "0.10.1",
"babel-polyfill": "6.26.0", "babel-polyfill": "6.26.0",
"echarts": "^5.2.2", "echarts": "^5.2.2",
"element-ui": "2.8.2", "element-ui": "^2.8.2",
"gulp": "3.9.1", "gulp": "3.9.1",
"gulp-concat": "2.6.1", "gulp-concat": "2.6.1",
"gulp-load-plugins": "1.5.0", "gulp-load-plugins": "1.5.0",

2
src/components/Charts/BarChart.vue
View File

@ -11,7 +11,7 @@
</template> </template>
<script> <script>
import echarts from 'echarts' import * as echarts from 'echarts'
export default { export default {
data () { data () {
return { return {

2
src/components/Charts/Keyboard.vue
View File

@ -3,7 +3,7 @@
</template> </template>
<script> <script>
import echarts from 'echarts' import * as echarts from 'echarts'
import resize from './mixins/resize' import resize from './mixins/resize'
export default { export default {

143
src/components/Charts/LineChart.1.vue Normal file
View File

@ -0,0 +1,143 @@
<template>
<div class="mod-demo-echarts">
<el-row :gutter="20">
<el-col :span="24">
<el-card>
<div :id="'J_chartLineBox' + nameFooter" class="chart-box"></div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
props: {
id: {
type: Number,
default: 1
},
showId: {
type: Number,
default: 0
},
name: {
type: String,
default: ''
},
nameFooter: {
type: String,
default: ''
},
dataList: {
type: Array,
default: () => {
return []
}
},
lastDataList: {
type: Array,
default: () => {
return []
}
}
},
data () {
return {
chartLine: null
}
},
watch: {
showId: function (v) {
if (v === this.id) {
this.initChartLine()
}
}
},
mounted () {
this.initChartLine()
},
activated () {
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
if (this.chartLine) {
this.chartLine.resize()
}
},
methods: {
// 折线图
initChartLine () {
if (this.chartLine) {
this.chartLine.dispose()
}
var option = {
title: {
text: this.name + this.nameFooter
},
tooltip: {
trigger: 'axis'
},
legend: {
data: [ '当前', '上一个单位' ]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.dataList.map(item => {
return item.time
})
},
yAxis: {
type: 'value'
},
series: [
{
name: '当前',
type: 'line',
data: this.dataList.map(item => {
return item.value
})
},
{
name: '上一个单位',
type: 'line',
data: this.lastDataList.map(item => {
return item.value
})
}
]
}
this.chartLine = echarts.init(document.getElementById('J_chartLineBox' + this.nameFooter))
this.chartLine.setOption(option)
window.addEventListener('resize', () => {
this.chartLine.resize()
})
}
}
}
</script>
<style lang="scss" scoped>
.mod-demo-echarts {
> .el-alert {
margin-bottom: 10px;
}
> .el-row {
margin-top: -10px;
margin-bottom: -10px;
.el-col {
padding-top: 10px;
padding-bottom: 10px;
}
}
.chart-box {
min-height: 300px;
}
}
</style>

91
src/components/Charts/LineChart.vue
View File

@ -3,7 +3,7 @@
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24"> <el-col :span="24">
<el-card> <el-card>
<div id="J_chartLineBox" class="chart-box"></div> <div :id="'J_chartLineBox' + id" class="chart-box"></div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
@ -11,13 +11,46 @@
</template> </template>
<script> <script>
import echarts from 'echarts' import * as echarts from 'echarts'
export default { export default {
props: {
id: {
type: Number,
default: 1
},
showId: {
type: Number,
default: 0
},
name: {
type: String,
default: ''
},
dataList: {
type: Array,
default: () => {
return []
}
},
lastDataList: {
type: Array,
default: () => {
return []
}
}
},
data () { data () {
return { return {
chartLine: null chartLine: null
} }
}, },
watch: {
showId: function (v) {
if (v === this.id) {
this.initChartLine()
}
}
},
mounted () { mounted () {
this.initChartLine() this.initChartLine()
}, },
@ -30,15 +63,18 @@
methods: { methods: {
// 折线图 // 折线图
initChartLine () { initChartLine () {
if (this.chartLine) {
this.chartLine.dispose()
}
var option = { var option = {
title: { title: {
text: '折线图堆叠' text: this.name
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: [ '邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎' ] data: [ '当前', '上一个单位' ]
}, },
grid: { grid: {
left: '3%', left: '3%',
@ -46,53 +82,34 @@
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
toolbox: {
feature: {
saveAsImage: { }
}
},
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ] data: this.dataList.map(item => {
return item.time
})
}, },
yAxis: { yAxis: {
type: 'value' type: 'value'
}, },
series: [ series: [
{ {
name: '邮件营销', name: '当前',
type: 'line', type: 'line',
stack: '总量', data: this.dataList.map(item => {
data: [ 120, 132, 101, 134, 90, 230, 210 ] return item.value
})
}, },
{ {
name: '联盟广告', name: '上一个单位',
type: 'line', type: 'line',
stack: '总量', data: this.lastDataList.map(item => {
data: [ 220, 182, 191, 234, 290, 330, 310 ] return item.value
}, })
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [ 150, 232, 201, 154, 190, 330, 410 ]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [ 320, 332, 301, 334, 390, 330, 320 ]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [ 820, 932, 901, 934, 1290, 1330, 1320 ]
} }
] ]
} }
this.chartLine = echarts.init(document.getElementById('J_chartLineBox')) this.chartLine = echarts.init(document.getElementById('J_chartLineBox' + this.id))
this.chartLine.setOption(option) this.chartLine.setOption(option)
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.chartLine.resize() this.chartLine.resize()
@ -102,7 +119,7 @@
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.mod-demo-echarts { .mod-demo-echarts {
> .el-alert { > .el-alert {
margin-bottom: 10px; margin-bottom: 10px;
@ -116,7 +133,7 @@
} }
} }
.chart-box { .chart-box {
min-height: 400px; min-height: 300px;
} }
} }
</style> </style>

2
src/components/Charts/LineMarker.vue
View File

@ -3,7 +3,7 @@
</template> </template>
<script> <script>
import echarts from 'echarts' import * as echarts from 'echarts'
import resize from './mixins/resize' import resize from './mixins/resize'
export default { export default {

25
src/components/Charts/MixChart.vue
View File

@ -3,7 +3,7 @@
</template> </template>
<script> <script>
import echarts from 'echarts' import * as echarts from 'echarts'
import resize from './mixins/resize' import resize from './mixins/resize'
export default { export default {
@ -14,8 +14,12 @@ export default {
default: 'chart' default: 'chart'
}, },
id: { id: {
type: String, type: Number,
default: 'chart' default: 0
},
showId: {
type: Number,
default: 0
}, },
width: { width: {
type: String, type: String,
@ -29,6 +33,14 @@ export default {
type: String, type: String,
default: 'Mix-Chart' default: 'Mix-Chart'
}, },
titleFooter: {
type: String,
default: ''
},
titleHeader: {
type: String,
default: ''
},
dataList: { dataList: {
type: Array, type: Array,
default: () => { default: () => {
@ -167,6 +179,11 @@ export default {
}, },
deep: true deep: true
}, },
showId: {
handler () {
this.initChart()
}
},
chartType: { chartType: {
handler (val) { handler (val) {
console.log(val) console.log(val)
@ -286,7 +303,7 @@ export default {
this.chart.setOption({ this.chart.setOption({
backgroundColor: '#344b58', backgroundColor: '#344b58',
title: { title: {
text: this.title === 'Mix-Chart' ? 'Mix-Chart' : this.title + '用电量', text: this.title === 'Mix-Chart' ? 'Mix-Chart' : this.titleHeader + this.title + this.titleFooter,
x: '20', x: '20',
top: '20', top: '20',
textStyle: { textStyle: {

2
src/components/Charts/PieChart.vue
View File

@ -5,7 +5,7 @@
</template> </template>
<script> <script>
import echarts from 'echarts' import * as echarts from 'echarts'
export default { export default {
data () { data () {
return { return {

50
src/components/Charts/RingChart.vue
View File

@ -2,7 +2,7 @@
* @Author: gtz * @Author: gtz
* @Date: 2021-11-22 19:03:01 * @Date: 2021-11-22 19:03:01
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-11-26 11:31:58 * @LastEditTime: 2021-11-30 10:36:52
* @Description: file content * @Description: file content
* @FilePath: \mt-qj-wms-ui\src\components\Charts\ringChart.vue * @FilePath: \mt-qj-wms-ui\src\components\Charts\ringChart.vue
--> -->
@ -13,7 +13,7 @@
</template> </template>
<script> <script>
import echarts from 'echarts' import * as echarts from 'echarts'
export default { export default {
props: { props: {
id: { id: {
@ -21,10 +21,12 @@
default: 1 default: 1
}, },
data: { data: {
type: Array, type: Number,
default: () => { default: 0
return [] },
} name: {
type: String,
default: ''
} }
}, },
data () { data () {
@ -46,15 +48,11 @@
initChartRing () { initChartRing () {
var option = { var option = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item',
}, formatter: '{d}%'
legend: {
top: '5%',
left: 'center'
}, },
series: [ series: [
{ {
name: 'Access From',
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['40%', '70%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
@ -67,17 +65,31 @@
show: false, show: false,
fontSize: '40', fontSize: '40',
fontWeight: 'bold' fontWeight: 'bold'
} },
scale: false
}, },
labelLine: { labelLine: {
show: false show: false
}, },
data: [ data: [
{ value: 1048, name: 'Search Engine' }, {
{ value: 735, name: 'Direct' }, value: this.data,
{ value: 580, name: 'Email' }, name: this.name,
{ value: 484, name: 'Union Ads' }, itemStyle: {
{ value: 300, name: 'Video Ads' } normal: {
color: 'rgba(0, 191, 183, 1)'
}
}
},
{
value: (100 - this.data),
name: '其他',
itemStyle: {
normal: {
color: 'rgba(231, 231, 231, 1)'
}
}
}
] ]
} }
] ]
@ -92,7 +104,7 @@
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.mod-demo-echarts { .mod-demo-echarts {
> .el-alert { > .el-alert {
margin-bottom: 10px; margin-bottom: 10px;

2
src/components/Charts/ScatterChart.vue
View File

@ -11,7 +11,7 @@
</template> </template>
<script> <script>
import echarts from 'echarts' import * as echarts from 'echarts'
export default { export default {
data () { data () {
return { return {

2
src/views/demo/echarts.vue
View File

@ -35,7 +35,7 @@
</template> </template>
<script> <script>
import echarts from 'echarts' import * as echarts from 'echarts'
export default { export default {
data () { data () {
return { return {

730
src/views/energy/ammonia-analysis.vue
View File

@ -1,7 +1,731 @@
<!-- <!--
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:58:23 * @Date: 2021-11-19 10:55:33
* @LastEditors: zwq * @LastEditors: gtz
* @LastEditTime: 2021-11-19 10:58:23 * @LastEditTime: 2021-11-30 20:23:37
* @Description: * @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>

730
src/views/energy/ammonia.vue
View File

@ -1,7 +1,731 @@
<!-- <!--
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:57:00 * @Date: 2021-11-19 10:55:33
* @LastEditors: zwq * @LastEditors: gtz
* @LastEditTime: 2021-11-19 10:57:00 * @LastEditTime: 2021-11-30 20:23:45
* @Description: * @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>

326
src/views/energy/electric-acquisition.vue
View File

@ -1,7 +1,319 @@
<!-- <template>
* @Author: zwq <div class="mod-config">
* @Date: 2021-11-19 10:57:29 <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
* @LastEditors: zwq <el-form-item>
* @LastEditTime: 2021-11-19 10:57:30 <el-radio-group v-model="dataForm.type" @change="changeType">
* @Description: <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>

48
src/views/energy/electric.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:55:33 * @Date: 2021-11-19 10:55:33
* @LastEditors: gtz * @LastEditors: gtz
* @LastEditTime: 2021-11-26 16:53:20 * @LastEditTime: 2021-11-30 20:19:52
* @Description: * @Description:
--> -->
<template> <template>
@ -50,12 +50,12 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col style="height: 500px"> <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>
<el-col style="margin: 20px 0"> <el-col style="margin: 20px 0">
<el-tabs type="border-card"> <el-tabs type="border-card">
<el-tab-pane v-for="item in yaoluList" :key="item.id"> <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-col :span="12">
<el-row style="margin-top: 24px; line-height: 24px; height: 24px; font-size: 16px; font-weight: bold"> <el-row style="margin-top: 24px; line-height: 24px; height: 24px; font-size: 16px; font-weight: bold">
{{ item.name }}(KW) {{ item.name }}(KW)
@ -68,10 +68,34 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="12"> <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-col>
</el-row> </el-row>
我的行程
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-col> </el-col>
@ -82,6 +106,7 @@
<script> <script>
import Chart from '@/components/Charts/MixChart' import Chart from '@/components/Charts/MixChart'
import ringChart from '@/components/Charts/RingChart' import ringChart from '@/components/Charts/RingChart'
import lineChart from '@/components/Charts/LineChart'
// 日发电数据 // 日发电数据
const eleDayList = [ const eleDayList = [
@ -269,8 +294,8 @@ const datePickerType = {
placeholder: '日期' placeholder: '日期'
}, },
'周': { '周': {
type: 'date', type: 'week',
format: 'yyyy 第 W 周', format: 'yyyy 第 WW 周',
placeholder: '周' placeholder: '周'
}, },
'月': { '月': {
@ -665,7 +690,7 @@ const yaoluList = [
export default { export default {
name: 'electric', name: 'electric',
components: { Chart, ringChart }, components: { Chart, ringChart, lineChart },
data () { data () {
return { return {
eleDayList, eleDayList,
@ -682,12 +707,14 @@ export default {
dataList: [], dataList: [],
lastDataList: [], lastDataList: [],
chartType: ['柱状'], chartType: ['柱状'],
eleType: '年' eleType: '年',
showId: 0
} }
}, },
mounted () { mounted () {
this.dataList = this.eleYearList this.dataList = this.eleYearList
this.lastDataList = this.lastEleYearList this.lastDataList = this.lastEleYearList
this.showId = this.yaoluList[0].id
}, },
methods: { methods: {
changeEleType (v) { changeEleType (v) {
@ -713,6 +740,9 @@ export default {
this.date = new Date() this.date = new Date()
break break
} }
},
handleTab (id) {
this.showId = id
} }
} }
} }

787
src/views/energy/kiln-electric.vue
View File

@ -1,7 +1,788 @@
<!-- <!--
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:56:01 * @Date: 2021-11-19 10:55:33
* @LastEditors: zwq * @LastEditors: gtz
* @LastEditTime: 2021-11-19 10:56:02 * @LastEditTime: 2021-11-30 20:24:04
* @Description: * @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>

730
src/views/energy/kiln-speed.vue
View File

@ -1,7 +1,731 @@
<!-- <!--
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:59:04 * @Date: 2021-11-19 10:55:33
* @LastEditors: zwq * @LastEditors: gtz
* @LastEditTime: 2021-11-19 10:59:05 * @LastEditTime: 2021-11-30 20:24:10
* @Description: * @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>

730
src/views/energy/nitrogen.vue
View File

@ -1,7 +1,731 @@
<!-- <!--
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:57:17 * @Date: 2021-11-19 10:55:33
* @LastEditors: zwq * @LastEditors: gtz
* @LastEditTime: 2021-11-19 10:57:18 * @LastEditTime: 2021-11-30 20:24:16
* @Description: * @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>

730
src/views/energy/process-temperature.vue
View File

@ -1,7 +1,731 @@
<!-- <!--
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:58:02 * @Date: 2021-11-19 10:55:33
* @LastEditors: zwq * @LastEditors: gtz
* @LastEditTime: 2021-11-19 10:58:03 * @LastEditTime: 2021-11-30 20:24:22
* @Description: * @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>

730
src/views/energy/sulfur-dioxide.vue
View File

@ -1,7 +1,731 @@
<!-- <!--
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:56:37 * @Date: 2021-11-19 10:55:33
* @LastEditors: zwq * @LastEditors: gtz
* @LastEditTime: 2021-11-19 10:56:38 * @LastEditTime: 2021-11-30 20:24:28
* @Description: * @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>

730
src/views/energy/sump-temperature.vue
View File

@ -1,7 +1,731 @@
<!-- <!--
* @Author: zwq * @Author: zwq
* @Date: 2021-11-19 10:57:55 * @Date: 2021-11-19 10:55:33
* @LastEditors: zwq * @LastEditors: gtz
* @LastEditTime: 2021-11-19 10:57:56 * @LastEditTime: 2021-11-30 20:24:34
* @Description: * @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>

10
static/config/init.js
View File

@ -1,3 +1,11 @@
/*
* @Author: gtz
* @Date: 2021-11-19 10:10:52
* @LastEditors: gtz
* @LastEditTime: 2021-11-30 09:40:45
* @Description: file content
* @FilePath: \mt-qj-wms-ui\static\config\init.js
*/
/** /**
* 动态加载初始资源 * 动态加载初始资源
*/ */
@ -9,8 +17,6 @@
], ],
js: [ js: [
// 插件, 放置业务之前加载, 以免业务需求依赖插件时, 还未加载出错 // 插件, 放置业务之前加载, 以免业务需求依赖插件时, 还未加载出错
// 插件 - echarts
window.SITE_CONFIG.cdnUrl + '/static/plugins/echarts-3.8.5/echarts.common.min.js',
// 插件 - ueditor // 插件 - ueditor
window.SITE_CONFIG.cdnUrl + '/static/plugins/ueditor-1.4.3.3/ueditor.config.js', window.SITE_CONFIG.cdnUrl + '/static/plugins/ueditor-1.4.3.3/ueditor.config.js',
window.SITE_CONFIG.cdnUrl + '/static/plugins/ueditor-1.4.3.3/ueditor.all.min.js', window.SITE_CONFIG.cdnUrl + '/static/plugins/ueditor-1.4.3.3/ueditor.all.min.js',

1
static/plugins/echarts-3.8.5/echarts.common.min.js vendored
View File

File diff suppressed because one or more lines are too long