Compare commits
8 Commits
a0d647caf9
...
5579b657d5
| Author | SHA1 | Date | |
|---|---|---|---|
| 5579b657d5 | |||
| 6073b6d43b | |||
| 124f27fe5f | |||
| 9325ce5fdb | |||
| bda097fe8c | |||
| db51049507 | |||
| abcc75f669 | |||
| 945e332181 |
@ -98,7 +98,6 @@ module.exports = {
|
|||||||
// 引入外部库, 无需webpack打包处理
|
// 引入外部库, 无需webpack打包处理
|
||||||
externals: {
|
externals: {
|
||||||
mockjs: 'Mock',
|
mockjs: 'Mock',
|
||||||
echarts: 'echarts',
|
|
||||||
ueditor: 'UE'
|
ueditor: 'UE'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
11
index.html
11
index.html
@ -1,10 +1,18 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: gtz
|
||||||
|
* @Date: 2021-11-19 10:10:51
|
||||||
|
* @LastEditors: gtz
|
||||||
|
* @LastEditTime: 2021-11-30 21:08:05
|
||||||
|
* @Description: file content
|
||||||
|
* @FilePath: \mt-qj-wms-ui\index.html
|
||||||
|
-->
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
<title>人人快速开发平台</title>
|
<title>求精WMS调度管理系统</title>
|
||||||
<% if (process.env.NODE_ENV === 'production') { %>
|
<% if (process.env.NODE_ENV === 'production') { %>
|
||||||
<!-- 生产环境 -->
|
<!-- 生产环境 -->
|
||||||
<script>document.write('<script src="./config/index.js?t=' + new Date().getTime() + '"><\/script>');</script>
|
<script>document.write('<script src="./config/index.js?t=' + new Date().getTime() + '"><\/script>');</script>
|
||||||
@ -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>
|
||||||
|
|||||||
44
package-lock.json
generated
44
package-lock.json
generated
@ -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",
|
||||||
@ -3834,6 +3834,15 @@
|
|||||||
"safer-buffer": "^2.1.0"
|
"safer-buffer": "^2.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"echarts": {
|
||||||
|
"version": "5.2.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/echarts/download/echarts-5.2.2.tgz",
|
||||||
|
"integrity": "sha1-7DyLKhUcu6cbo8LHz5svIEfOQ3A=",
|
||||||
|
"requires": {
|
||||||
|
"tslib": "2.3.0",
|
||||||
|
"zrender": "5.2.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"editorconfig": {
|
"editorconfig": {
|
||||||
"version": "0.15.3",
|
"version": "0.15.3",
|
||||||
"resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
|
"resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
|
||||||
@ -3884,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",
|
||||||
@ -11339,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": {
|
||||||
@ -17313,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",
|
||||||
@ -19006,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",
|
||||||
@ -19252,6 +19261,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"tslib": {
|
||||||
|
"version": "2.3.0",
|
||||||
|
"resolved": "https://registry.nlark.com/tslib/download/tslib-2.3.0.tgz",
|
||||||
|
"integrity": "sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4="
|
||||||
|
},
|
||||||
"tty-browserify": {
|
"tty-browserify": {
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
|
||||||
@ -20978,6 +20992,14 @@
|
|||||||
"version": "20.2.9",
|
"version": "20.2.9",
|
||||||
"resolved": "https://registry.nlark.com/yargs-parser/download/yargs-parser-20.2.9.tgz?cache=0&sync_timestamp=1624233514145&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fyargs-parser%2Fdownload%2Fyargs-parser-20.2.9.tgz",
|
"resolved": "https://registry.nlark.com/yargs-parser/download/yargs-parser-20.2.9.tgz?cache=0&sync_timestamp=1624233514145&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fyargs-parser%2Fdownload%2Fyargs-parser-20.2.9.tgz",
|
||||||
"integrity": "sha1-LrfcOwKJcY/ClfNidThFxBoMlO4="
|
"integrity": "sha1-LrfcOwKJcY/ClfNidThFxBoMlO4="
|
||||||
|
},
|
||||||
|
"zrender": {
|
||||||
|
"version": "5.2.1",
|
||||||
|
"resolved": "https://registry.nlark.com/zrender/download/zrender-5.2.1.tgz",
|
||||||
|
"integrity": "sha1-X0u9qRW6bUErCxncJDG+qtBUF7s=",
|
||||||
|
"requires": {
|
||||||
|
"tslib": "2.3.0"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,7 +17,8 @@
|
|||||||
"axios": "0.17.1",
|
"axios": "0.17.1",
|
||||||
"babel-plugin-component": "0.10.1",
|
"babel-plugin-component": "0.10.1",
|
||||||
"babel-polyfill": "6.26.0",
|
"babel-polyfill": "6.26.0",
|
||||||
"element-ui": "2.8.2",
|
"echarts": "^5.2.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",
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
@ -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
143
src/components/Charts/LineChart.1.vue
Normal 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>
|
||||||
@ -3,22 +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-col>
|
|
||||||
<el-col :span="24">
|
|
||||||
<el-card>
|
|
||||||
<div id="J_chartBarBox" class="chart-box"></div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-card>
|
|
||||||
<div id="J_chartPieBox" class="chart-box"></div>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12">
|
|
||||||
<el-card>
|
|
||||||
<div id="J_chartScatterBox" class="chart-box"></div>
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
@ -26,49 +11,70 @@
|
|||||||
</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
|
||||||
chartBar: null,
|
}
|
||||||
chartPie: null,
|
},
|
||||||
chartScatter: null
|
watch: {
|
||||||
|
showId: function (v) {
|
||||||
|
if (v === this.id) {
|
||||||
|
this.initChartLine()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.initChartLine()
|
this.initChartLine()
|
||||||
this.initChartBar()
|
|
||||||
this.initChartPie()
|
|
||||||
this.initChartScatter()
|
|
||||||
},
|
},
|
||||||
activated () {
|
activated () {
|
||||||
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
|
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
|
||||||
if (this.chartLine) {
|
if (this.chartLine) {
|
||||||
this.chartLine.resize()
|
this.chartLine.resize()
|
||||||
}
|
}
|
||||||
if (this.chartBar) {
|
|
||||||
this.chartBar.resize()
|
|
||||||
}
|
|
||||||
if (this.chartPie) {
|
|
||||||
this.chartPie.resize()
|
|
||||||
}
|
|
||||||
if (this.chartScatter) {
|
|
||||||
this.chartScatter.resize()
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
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%',
|
||||||
@ -76,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()
|
||||||
@ -132,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;
|
||||||
@ -146,7 +133,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.chart-box {
|
.chart-box {
|
||||||
min-height: 400px;
|
min-height: 300px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
423
src/components/Charts/MixChart.1.vue
Normal file
423
src/components/Charts/MixChart.1.vue
Normal file
@ -0,0 +1,423 @@
|
|||||||
|
<template>
|
||||||
|
<div :id="id" :class="className" :style="{ height: height, width: width }" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import resize from './mixins/resize'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [resize],
|
||||||
|
props: {
|
||||||
|
className: {
|
||||||
|
type: String,
|
||||||
|
default: 'chart'
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
showId: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '200px'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '200px'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: 'Mix-Chart'
|
||||||
|
},
|
||||||
|
titleFooter: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
titleHeader: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
dataList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lastDataList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chartType: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
series: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
if (!this.chart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
dataList: {
|
||||||
|
handler (val) {
|
||||||
|
if (val) {
|
||||||
|
this.series = []
|
||||||
|
if (this.chartType.indexOf('柱状') >= 0) {
|
||||||
|
this.series.push({
|
||||||
|
name: '后室风扇1运行速度',
|
||||||
|
type: 'bar',
|
||||||
|
barMaxWidth: 35,
|
||||||
|
barGap: '10%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(255,144,128,1)',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
position: 'insideTop',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.dataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.series.push({
|
||||||
|
name: '后室风扇2运行速度',
|
||||||
|
type: 'bar',
|
||||||
|
barMaxWidth: 35,
|
||||||
|
barGap: '10%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(0,191,183,1)',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
position: 'insideTop',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.lastDataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (this.chartType.indexOf('折线') >= 0) {
|
||||||
|
this.series.push({
|
||||||
|
name: '后室风扇1运行速度',
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 10,
|
||||||
|
symbol: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(255,144,128,1)',
|
||||||
|
barBorderRadius: 0,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.dataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.series.push({
|
||||||
|
name: '后室风扇2运行速度',
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 10,
|
||||||
|
symbol: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(0,191,183,1)',
|
||||||
|
barBorderRadius: 0,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.lastDataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.initChart()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
},
|
||||||
|
showId: {
|
||||||
|
handler () {
|
||||||
|
this.initChart()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chartType: {
|
||||||
|
handler (val) {
|
||||||
|
console.log(val)
|
||||||
|
if (val.length) {
|
||||||
|
this.series = []
|
||||||
|
if (val.indexOf('柱状') >= 0) {
|
||||||
|
this.series.push({
|
||||||
|
name: '后室风扇1运行速度',
|
||||||
|
type: 'bar',
|
||||||
|
barMaxWidth: 35,
|
||||||
|
barGap: '10%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(255,144,128,1)',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
position: 'insideTop',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.dataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.series.push({
|
||||||
|
name: '后室风扇2运行速度',
|
||||||
|
type: 'bar',
|
||||||
|
barMaxWidth: 35,
|
||||||
|
barGap: '10%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(0,191,183,1)',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
position: 'insideTop',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.lastDataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (val.indexOf('折线') >= 0) {
|
||||||
|
this.series.push({
|
||||||
|
name: '后室风扇1运行速度',
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 10,
|
||||||
|
symbol: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(255,144,128,1)',
|
||||||
|
barBorderRadius: 0,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.dataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.series.push({
|
||||||
|
name: '后室风扇2运行速度',
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 10,
|
||||||
|
symbol: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(0,191,183,1)',
|
||||||
|
barBorderRadius: 0,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.lastDataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.initChart()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart () {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.dispose()
|
||||||
|
}
|
||||||
|
this.chart = echarts.init(document.getElementById(this.id))
|
||||||
|
const xData = this.dataList.map(item => {
|
||||||
|
return item.time
|
||||||
|
})
|
||||||
|
this.chart.setOption({
|
||||||
|
backgroundColor: '#344b58',
|
||||||
|
title: {
|
||||||
|
text: this.title === 'Mix-Chart' ? 'Mix-Chart' : this.titleHeader + this.title + this.titleFooter,
|
||||||
|
x: '20',
|
||||||
|
top: '20',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: '22'
|
||||||
|
},
|
||||||
|
subtextStyle: {
|
||||||
|
color: '#90979c',
|
||||||
|
fontSize: '16'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '5%',
|
||||||
|
right: '5%',
|
||||||
|
borderWidth: 0,
|
||||||
|
top: 150,
|
||||||
|
bottom: 95,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
x: '5%',
|
||||||
|
top: '10%',
|
||||||
|
textStyle: {
|
||||||
|
color: '#90979c'
|
||||||
|
},
|
||||||
|
data: this.series.map(item => {
|
||||||
|
return item.name
|
||||||
|
})
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#90979c'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0
|
||||||
|
},
|
||||||
|
data: xData
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#90979c'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
show: true,
|
||||||
|
height: 30,
|
||||||
|
xAxisIndex: [0],
|
||||||
|
bottom: 30,
|
||||||
|
start: 0,
|
||||||
|
end: 100,
|
||||||
|
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
||||||
|
handleSize: '110%',
|
||||||
|
handleStyle: {
|
||||||
|
color: '#d3dee5'
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
borderColor: '#90979c'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'inside',
|
||||||
|
show: true,
|
||||||
|
height: 15,
|
||||||
|
start: 1,
|
||||||
|
end: 35
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: this.series
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -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,23 +33,39 @@ export default {
|
|||||||
type: String,
|
type: String,
|
||||||
default: 'Mix-Chart'
|
default: 'Mix-Chart'
|
||||||
},
|
},
|
||||||
nameData: {
|
titleFooter: {
|
||||||
type: Array,
|
type: String,
|
||||||
default: []
|
default: ''
|
||||||
|
},
|
||||||
|
titleHeader: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
},
|
},
|
||||||
dataList: {
|
dataList: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: []
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lastDataList: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chartType: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
chart: null
|
chart: null,
|
||||||
|
series: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
|
||||||
this.initChart()
|
|
||||||
},
|
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
if (!this.chart) {
|
if (!this.chart) {
|
||||||
return
|
return
|
||||||
@ -53,20 +73,237 @@ export default {
|
|||||||
this.chart.dispose()
|
this.chart.dispose()
|
||||||
this.chart = null
|
this.chart = null
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
dataList: {
|
||||||
|
handler (val) {
|
||||||
|
if (val) {
|
||||||
|
this.series = []
|
||||||
|
if (this.chartType.indexOf('柱状') >= 0) {
|
||||||
|
this.series.push({
|
||||||
|
name: '本' + this.title,
|
||||||
|
type: 'bar',
|
||||||
|
barMaxWidth: 35,
|
||||||
|
barGap: '10%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(255,144,128,1)',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
position: 'insideTop',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.dataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.series.push({
|
||||||
|
name: '上' + this.title,
|
||||||
|
type: 'bar',
|
||||||
|
barMaxWidth: 35,
|
||||||
|
barGap: '10%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(0,191,183,1)',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
position: 'insideTop',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.lastDataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (this.chartType.indexOf('折线') >= 0) {
|
||||||
|
this.series.push({
|
||||||
|
name: '本' + this.title,
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 10,
|
||||||
|
symbol: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(255,144,128,1)',
|
||||||
|
barBorderRadius: 0,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.dataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.series.push({
|
||||||
|
name: '上' + this.title,
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 10,
|
||||||
|
symbol: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(0,191,183,1)',
|
||||||
|
barBorderRadius: 0,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.lastDataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.initChart()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
},
|
||||||
|
showId: {
|
||||||
|
handler () {
|
||||||
|
this.initChart()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chartType: {
|
||||||
|
handler (val) {
|
||||||
|
console.log(val)
|
||||||
|
if (val.length) {
|
||||||
|
this.series = []
|
||||||
|
if (val.indexOf('柱状') >= 0) {
|
||||||
|
this.series.push({
|
||||||
|
name: '本' + this.title,
|
||||||
|
type: 'bar',
|
||||||
|
barMaxWidth: 35,
|
||||||
|
barGap: '10%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(255,144,128,1)',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
position: 'insideTop',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.dataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.series.push({
|
||||||
|
name: '上' + this.title,
|
||||||
|
type: 'bar',
|
||||||
|
barMaxWidth: 35,
|
||||||
|
barGap: '10%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(0,191,183,1)',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
position: 'insideTop',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.lastDataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (val.indexOf('折线') >= 0) {
|
||||||
|
this.series.push({
|
||||||
|
name: '本' + this.title,
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 10,
|
||||||
|
symbol: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(255,144,128,1)',
|
||||||
|
barBorderRadius: 0,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.dataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.series.push({
|
||||||
|
name: '上' + this.title,
|
||||||
|
type: 'line',
|
||||||
|
symbolSize: 10,
|
||||||
|
symbol: 'circle',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(0,191,183,1)',
|
||||||
|
barBorderRadius: 0,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top',
|
||||||
|
formatter (p) {
|
||||||
|
return p.value > 0 ? p.value : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: this.lastDataList.map(item => {
|
||||||
|
return item.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.initChart()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart () {
|
initChart () {
|
||||||
this.chart = echarts.init(document.getElementById(this.id))
|
if (this.chart) {
|
||||||
const xData = (function () {
|
this.chart.dispose()
|
||||||
const data = []
|
|
||||||
for (let i = 1; i < 13; i++) {
|
|
||||||
data.push(i + 'month')
|
|
||||||
}
|
}
|
||||||
return data
|
this.chart = echarts.init(document.getElementById(this.id))
|
||||||
})()
|
const xData = this.dataList.map(item => {
|
||||||
|
return item.time
|
||||||
|
})
|
||||||
this.chart.setOption({
|
this.chart.setOption({
|
||||||
backgroundColor: '#344b58',
|
backgroundColor: '#344b58',
|
||||||
title: {
|
title: {
|
||||||
text: 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: {
|
||||||
@ -102,7 +339,9 @@ export default {
|
|||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#90979c'
|
color: '#90979c'
|
||||||
},
|
},
|
||||||
data: this.nameData
|
data: this.series.map(item => {
|
||||||
|
return item.name
|
||||||
|
})
|
||||||
},
|
},
|
||||||
calculable: true,
|
calculable: true,
|
||||||
xAxis: [
|
xAxis: [
|
||||||
@ -156,8 +395,8 @@ export default {
|
|||||||
height: 30,
|
height: 30,
|
||||||
xAxisIndex: [0],
|
xAxisIndex: [0],
|
||||||
bottom: 30,
|
bottom: 30,
|
||||||
start: 10,
|
start: 0,
|
||||||
end: 80,
|
end: 100,
|
||||||
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
||||||
handleSize: '110%',
|
handleSize: '110%',
|
||||||
handleStyle: {
|
handleStyle: {
|
||||||
@ -176,71 +415,7 @@ export default {
|
|||||||
end: 35
|
end: 35
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
series: [
|
series: this.series
|
||||||
{
|
|
||||||
name: 'female',
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'total',
|
|
||||||
barMaxWidth: 35,
|
|
||||||
barGap: '10%',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: 'rgba(255,144,128,1)',
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff'
|
|
||||||
},
|
|
||||||
position: 'insideTop',
|
|
||||||
formatter (p) {
|
|
||||||
return p.value > 0 ? p.value : ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'male',
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'total',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: 'rgba(0,191,183,1)',
|
|
||||||
barBorderRadius: 0,
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top',
|
|
||||||
formatter (p) {
|
|
||||||
return p.value > 0 ? p.value : ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'average',
|
|
||||||
type: 'line',
|
|
||||||
stack: 'total',
|
|
||||||
symbolSize: 10,
|
|
||||||
symbol: 'circle',
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: 'rgba(252,230,48,1)',
|
|
||||||
barBorderRadius: 0,
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
position: 'top',
|
|
||||||
formatter (p) {
|
|
||||||
return p.value > 0 ? p.value : ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: [1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,16 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-row :gutter="20">
|
<div class="mod-demo-echarts">
|
||||||
<el-col :span="12">
|
|
||||||
<el-card>
|
|
||||||
<div id="J_chartPieBox" class="chart-box"></div>
|
<div id="J_chartPieBox" class="chart-box"></div>
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
@ -121,7 +116,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.chart-box {
|
.chart-box {
|
||||||
min-height: 400px;
|
min-height: 120px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
124
src/components/Charts/RingChart.vue
Normal file
124
src/components/Charts/RingChart.vue
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: gtz
|
||||||
|
* @Date: 2021-11-22 19:03:01
|
||||||
|
* @LastEditors: gtz
|
||||||
|
* @LastEditTime: 2021-11-30 10:36:52
|
||||||
|
* @Description: file content
|
||||||
|
* @FilePath: \mt-qj-wms-ui\src\components\Charts\ringChart.vue
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="mod-demo-echarts">
|
||||||
|
<div :id="'J_chartRingBox' + id" class="chart-box"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
id: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
chartRing: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.initChartRing()
|
||||||
|
},
|
||||||
|
activated () {
|
||||||
|
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
|
||||||
|
if (this.chartRing) {
|
||||||
|
this.chartRing.resize()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 折线图
|
||||||
|
initChartRing () {
|
||||||
|
var option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{d}%'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
fontSize: '40',
|
||||||
|
fontWeight: 'bold'
|
||||||
|
},
|
||||||
|
scale: false
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: this.data,
|
||||||
|
name: this.name,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(0, 191, 183, 1)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: (100 - this.data),
|
||||||
|
name: '其他',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'rgba(231, 231, 231, 1)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
this.chartRing = echarts.init(document.getElementById('J_chartRingBox' + this.id))
|
||||||
|
this.chartRing.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.chartRing.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: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -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,7 +2,15 @@
|
|||||||
<div class="mod-config">
|
<div class="mod-config">
|
||||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-input v-model="dataForm.paramKey" placeholder="名称或编码" clearable></el-input>
|
<el-select v-model="dataForm.paramKey" filterable placeholder="报警编码">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button @click="getDataList()">查询</el-button>
|
<el-button @click="getDataList()">查询</el-button>
|
||||||
@ -25,19 +33,25 @@
|
|||||||
prop="paramKey"
|
prop="paramKey"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数名">
|
label="添加时间">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramValue"
|
prop="paramValue"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数值">
|
label="报警类型">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="remark"
|
prop="remark"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="备注">
|
label="报警编码">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="remark"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="报警内容">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
fixed="right"
|
fixed="right"
|
||||||
@ -74,6 +88,7 @@
|
|||||||
paramKey: ''
|
paramKey: ''
|
||||||
},
|
},
|
||||||
dataList: [],
|
dataList: [],
|
||||||
|
options: [],
|
||||||
pageIndex: 1,
|
pageIndex: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
totalPage: 0,
|
totalPage: 0,
|
||||||
|
|||||||
@ -25,19 +25,31 @@
|
|||||||
prop="paramKey"
|
prop="paramKey"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数名">
|
label="添加时间">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramValue"
|
prop="paramValue"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数值">
|
label="缓存区名称">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="remark"
|
prop="remark"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="备注">
|
label="编码">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="ename"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="英文名">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="status"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="状态">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
fixed="right"
|
fixed="right"
|
||||||
|
|||||||
@ -2,7 +2,15 @@
|
|||||||
<div class="mod-config">
|
<div class="mod-config">
|
||||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-input v-model="dataForm.paramKey" placeholder="名称或编码" clearable></el-input>
|
<el-select v-model="dataForm.paramKey" filterable placeholder="名称">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button @click="getDataList()">查询</el-button>
|
<el-button @click="getDataList()">查询</el-button>
|
||||||
@ -25,19 +33,25 @@
|
|||||||
prop="paramKey"
|
prop="paramKey"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数名">
|
label="添加时间">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramValue"
|
prop="paramValue"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数值">
|
label="车辆名称">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="remark"
|
prop="remark"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="备注">
|
label="编码">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="suoxie"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="缩写">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
fixed="right"
|
fixed="right"
|
||||||
@ -74,6 +88,7 @@
|
|||||||
paramKey: ''
|
paramKey: ''
|
||||||
},
|
},
|
||||||
dataList: [],
|
dataList: [],
|
||||||
|
options: [],
|
||||||
pageIndex: 1,
|
pageIndex: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
totalPage: 0,
|
totalPage: 0,
|
||||||
|
|||||||
@ -12,29 +12,47 @@
|
|||||||
v-loading="dataListLoading"
|
v-loading="dataListLoading"
|
||||||
style="width: 100%;">
|
style="width: 100%;">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="id"
|
type="index"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
width="80"
|
label="序号"
|
||||||
label="ID">
|
width="50">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramKey"
|
prop="paramKey"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数名">
|
label="添加时间">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramValue"
|
prop="paramValue"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数值">
|
label="库位名称">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="remark"
|
prop="remark"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="备注">
|
label="编码">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="rname"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="别名">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="ename"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="英文名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="status"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="状态">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
fixed="right"
|
fixed="right"
|
||||||
|
|||||||
@ -1,8 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="mod-config">
|
<div class="mod-config">
|
||||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
<el-form
|
||||||
|
:inline="true"
|
||||||
|
:model="dataForm"
|
||||||
|
@keyup.enter.native="getDataList()"
|
||||||
|
>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-input v-model="dataForm.paramKey" placeholder="名称或编码" clearable></el-input>
|
<el-select v-model="dataForm.paramKey" filterable placeholder="名称">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button @click="getDataList()">查询</el-button>
|
<el-button @click="getDataList()">查询</el-button>
|
||||||
@ -13,41 +25,78 @@
|
|||||||
:data="dataList"
|
:data="dataList"
|
||||||
border
|
border
|
||||||
v-loading="dataListLoading"
|
v-loading="dataListLoading"
|
||||||
style="width: 100%;">
|
style="width: 100%;"
|
||||||
|
>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
type="index"
|
type="index"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="序号"
|
label="序号"
|
||||||
width="50">
|
width="50"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramKey"
|
prop="paramKey"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数名">
|
label="添加时间"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramValue"
|
prop="paramValue"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数值">
|
label="设备名称"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="remark"
|
prop="remark"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="备注">
|
label="编码"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="type"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="类型"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="ename"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="英文名"
|
||||||
|
>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="suoxie"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="缩写"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
fixed="right"
|
fixed="right"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
width="150"
|
width="150"
|
||||||
label="操作">
|
label="操作"
|
||||||
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
|
<el-button
|
||||||
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
|
type="text"
|
||||||
|
size="small"
|
||||||
|
@click="addOrUpdateHandle(scope.row.id)"
|
||||||
|
>修改</el-button
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
type="text"
|
||||||
|
size="small"
|
||||||
|
@click="deleteHandle(scope.row.id)"
|
||||||
|
>删除</el-button
|
||||||
|
>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@ -58,22 +107,28 @@
|
|||||||
:page-sizes="[10, 20, 50, 100]"
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
:page-size="pageSize"
|
:page-size="pageSize"
|
||||||
:total="totalPage"
|
:total="totalPage"
|
||||||
layout="total, sizes, prev, pager, next, jumper">
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
>
|
||||||
</el-pagination>
|
</el-pagination>
|
||||||
<!-- 弹窗, 新增 / 修改 -->
|
<!-- 弹窗, 新增 / 修改 -->
|
||||||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
|
<add-or-update
|
||||||
|
v-if="addOrUpdateVisible"
|
||||||
|
ref="addOrUpdate"
|
||||||
|
@refreshDataList="getDataList"
|
||||||
|
></add-or-update>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AddOrUpdate from './components/equipmentInfo-add'
|
import AddOrUpdate from './components/equipmentInfo-add'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
dataForm: {
|
dataForm: {
|
||||||
paramKey: ''
|
paramKey: ''
|
||||||
},
|
},
|
||||||
dataList: [],
|
dataList: [],
|
||||||
|
options: [],
|
||||||
pageIndex: 1,
|
pageIndex: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
totalPage: 0,
|
totalPage: 0,
|
||||||
@ -95,11 +150,11 @@
|
|||||||
url: this.$http.adornUrl('/sys/config/list'),
|
url: this.$http.adornUrl('/sys/config/list'),
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: this.$http.adornParams({
|
params: this.$http.adornParams({
|
||||||
'page': this.pageIndex,
|
page: this.pageIndex,
|
||||||
'limit': this.pageSize,
|
limit: this.pageSize,
|
||||||
'paramKey': this.dataForm.paramKey
|
paramKey: this.dataForm.paramKey
|
||||||
})
|
})
|
||||||
}).then(({data}) => {
|
}).then(({ data }) => {
|
||||||
if (data && data.code === 0) {
|
if (data && data.code === 0) {
|
||||||
this.dataList = data.page.list
|
this.dataList = data.page.list
|
||||||
this.totalPage = data.page.totalCount
|
this.totalPage = data.page.totalCount
|
||||||
@ -134,12 +189,13 @@
|
|||||||
confirmButtonText: '确定',
|
confirmButtonText: '确定',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
type: 'warning'
|
type: 'warning'
|
||||||
}).then(() => {
|
})
|
||||||
|
.then(() => {
|
||||||
this.$http({
|
this.$http({
|
||||||
url: this.$http.adornUrl('/sys/config/delete'),
|
url: this.$http.adornUrl('/sys/config/delete'),
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: this.$http.adornData(id, false)
|
data: this.$http.adornData(id, false)
|
||||||
}).then(({data}) => {
|
}).then(({ data }) => {
|
||||||
if (data && data.code === 0) {
|
if (data && data.code === 0) {
|
||||||
this.$message({
|
this.$message({
|
||||||
message: '操作成功',
|
message: '操作成功',
|
||||||
@ -153,8 +209,9 @@
|
|||||||
this.$message.error(data.msg)
|
this.$message.error(data.msg)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}).catch(() => {})
|
})
|
||||||
}
|
.catch(() => {})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -3,8 +3,8 @@
|
|||||||
<div class="site-content__wrapper">
|
<div class="site-content__wrapper">
|
||||||
<div class="site-content">
|
<div class="site-content">
|
||||||
<div class="brand-info">
|
<div class="brand-info">
|
||||||
<h2 class="brand-info__text">renren-fast-vue</h2>
|
<h2 class="brand-info__text">求精WMS调度管理系统</h2>
|
||||||
<p class="brand-info__intro">renren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案。</p>
|
<!-- <p class="brand-info__intro">renren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案。</p> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="login-main">
|
<div class="login-main">
|
||||||
<h3 class="login-title">管理员登录</h3>
|
<h3 class="login-title">管理员登录</h3>
|
||||||
|
|||||||
@ -32,7 +32,6 @@
|
|||||||
prop="id"
|
prop="id"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
width="80"
|
|
||||||
label="标识卡">
|
label="标识卡">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
@ -59,6 +58,12 @@
|
|||||||
align="center"
|
align="center"
|
||||||
label="材料号牌">
|
label="材料号牌">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="num"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="已完成数">
|
||||||
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="number"
|
prop="number"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
@ -81,7 +86,6 @@
|
|||||||
fixed="right"
|
fixed="right"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
width="150"
|
|
||||||
label="操作">
|
label="操作">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
|
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
@ -1,7 +1,719 @@
|
|||||||
<!--
|
<!--
|
||||||
* @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-12-01 09:18:32
|
||||||
* @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 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" :titleHeader="yaoluName" 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,
|
||||||
|
yaoluName: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.showId = this.yaoluList[0].id
|
||||||
|
this.yaoluName = this.yaoluList[0].label
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeEleType (v) {
|
||||||
|
switch (v) {
|
||||||
|
case '日':
|
||||||
|
this.dataList = this.eleDayList
|
||||||
|
this.lastDataList = this.lastEleDayList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '周':
|
||||||
|
this.dataList = this.eleWeekList
|
||||||
|
this.lastDataList = this.lastEleWeekList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '月':
|
||||||
|
this.dataList = this.eleMonthList
|
||||||
|
this.lastDataList = this.lastEleMonthList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '年':
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleNode (obj, node, e) {
|
||||||
|
if (!(obj.children)) {
|
||||||
|
this.showId = obj.id
|
||||||
|
this.yaoluName = obj.label
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - 124px);
|
||||||
|
.kiln-electric-treebox {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #eeeeee;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.el-tabs__item{
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||||
|
line-height: 120px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,7 +1,734 @@
|
|||||||
<!--
|
<!--
|
||||||
* @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-12-01 09:17:51
|
||||||
* @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" :titleHeader="yaoluName" 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,
|
||||||
|
yaoluName: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.showId = this.yaoluList[0].id
|
||||||
|
this.yaoluName = this.yaoluList[0].label
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeEleType (v) {
|
||||||
|
switch (v) {
|
||||||
|
case '日':
|
||||||
|
this.dataList = this.eleDayList
|
||||||
|
this.lastDataList = this.lastEleDayList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '周':
|
||||||
|
this.dataList = this.eleWeekList
|
||||||
|
this.lastDataList = this.lastEleWeekList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '月':
|
||||||
|
this.dataList = this.eleMonthList
|
||||||
|
this.lastDataList = this.lastEleMonthList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '年':
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleNode (obj, node, e) {
|
||||||
|
if (!(obj.children)) {
|
||||||
|
this.showId = obj.id
|
||||||
|
this.yaoluName = obj.label
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - 124px);
|
||||||
|
.kiln-electric-treebox {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #eeeeee;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.el-tabs__item{
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||||
|
line-height: 120px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,7 +1,319 @@
|
|||||||
<!--
|
<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: new Date()
|
||||||
|
},
|
||||||
|
dataList: [],
|
||||||
|
pageIndex: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
totalPage: 0,
|
||||||
|
dataListLoading: false,
|
||||||
|
orderDetailVisible: false,
|
||||||
|
yaoluList,
|
||||||
|
datePickerType
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created () {
|
||||||
|
this.getDataList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取数据列表
|
||||||
|
getDataList () {
|
||||||
|
this.dataList = []
|
||||||
|
this.dataListLoading = true
|
||||||
|
this.yaoluList.map((item, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
item.data.map(i => {
|
||||||
|
this.dataList.push({
|
||||||
|
time: i.time,
|
||||||
|
[item.id]: i.value
|
||||||
|
})
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
item.data.map((i, idx) => {
|
||||||
|
this.dataList[idx][item.id] = i.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.dataListLoading = false
|
||||||
|
},
|
||||||
|
// 切换查询类型
|
||||||
|
changeType (v) {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|||||||
@ -2,21 +2,749 @@
|
|||||||
* @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-22 19:36:14
|
* @LastEditTime: 2021-12-01 09:15:35
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div class="chart-container">
|
<div class="chart-container">
|
||||||
<chart height="100%" width="100%" />
|
<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="用电量（KW）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||||
|
</el-col>
|
||||||
|
<el-col style="margin: 20px 0">
|
||||||
|
<el-tabs type="border-card">
|
||||||
|
<el-tab-pane v-for="item in yaoluList" :key="item.id">
|
||||||
|
<el-row style="width: 200px; height: 120px" slot="label" @click.native="handleTab(item.id)">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-row style="margin-top: 24px; line-height: 24px; height: 24px; font-size: 16px; font-weight: bold">
|
||||||
|
{{ item.name }}(KW)
|
||||||
|
</el-row>
|
||||||
|
<el-row style="line-height: 24px; height: 24px; font-size: 18px; font-weight: bold">
|
||||||
|
{{ item.value }}KW
|
||||||
|
</el-row>
|
||||||
|
<el-row style="line-height: 24px; height: 24px; font-size: 14px; font-weight: bold">
|
||||||
|
{{ item.percent }}%
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<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="用电量（KW）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Chart from '@/components/Charts/MixChart'
|
import Chart from '@/components/Charts/MixChart'
|
||||||
|
import ringChart from '@/components/Charts/RingChart'
|
||||||
|
import lineChart from '@/components/Charts/LineChart'
|
||||||
|
|
||||||
|
// 日发电数据
|
||||||
|
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,
|
||||||
|
name: '窑炉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,
|
||||||
|
name: '窑炉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,
|
||||||
|
name: '窑炉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,
|
||||||
|
name: '窑炉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,
|
||||||
|
name: '窑炉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,
|
||||||
|
name: '窑炉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,
|
||||||
|
name: '窑炉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,
|
||||||
|
name: '窑炉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,
|
||||||
|
name: '窑炉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,
|
||||||
|
name: '窑炉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,
|
||||||
|
name: '窑炉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 {
|
export default {
|
||||||
name: 'electric',
|
name: 'electric',
|
||||||
components: { Chart }
|
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
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleTab (id) {
|
||||||
|
this.showId = id
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -24,8 +752,15 @@ export default {
|
|||||||
.chart-container {
|
.chart-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - 84px);
|
min-height: calc(100vh - 124px);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.el-tabs__item{
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||||
|
line-height: 120px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,7 +1,791 @@
|
|||||||
<!--
|
<!--
|
||||||
* @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-12-01 09:16: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: 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%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="用电量（KW）" :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" :showId="showId" :title="eleType" :titleHeader="yaoluName" 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" :showId="showId" :title="eleType" :titleHeader="yaoluName" 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,
|
||||||
|
yaoluName: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.showId = this.yaoluList[0].id
|
||||||
|
this.yaoluName = this.yaoluList[0].label
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeEleType (v) {
|
||||||
|
switch (v) {
|
||||||
|
case '日':
|
||||||
|
this.dataList = this.eleDayList
|
||||||
|
this.lastDataList = this.lastEleDayList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '周':
|
||||||
|
this.dataList = this.eleWeekList
|
||||||
|
this.lastDataList = this.lastEleWeekList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '月':
|
||||||
|
this.dataList = this.eleMonthList
|
||||||
|
this.lastDataList = this.lastEleMonthList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '年':
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleNode (obj, node, e) {
|
||||||
|
if (!(obj.children)) {
|
||||||
|
this.showId = obj.id
|
||||||
|
this.yaoluList.map((item, index) => {
|
||||||
|
if (item.id === obj.id) {
|
||||||
|
this.yaoluIndex = index
|
||||||
|
this.yaoluName = obj.label
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - 124px);
|
||||||
|
.kiln-electric-treebox {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #eeeeee;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.el-tabs__item{
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||||
|
line-height: 120px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,7 +1,719 @@
|
|||||||
<!--
|
<!--
|
||||||
* @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-12-01 10:54: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 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" :titleHeader="yaoluName" titleFooter="速度参数（转/s）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Chart from '@/components/Charts/MixChart.1'
|
||||||
|
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,
|
||||||
|
yaoluName: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.showId = this.yaoluList[0].id
|
||||||
|
this.yaoluName = this.yaoluList[0].label
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeEleType (v) {
|
||||||
|
switch (v) {
|
||||||
|
case '日':
|
||||||
|
this.dataList = this.eleDayList
|
||||||
|
this.lastDataList = this.lastEleDayList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '周':
|
||||||
|
this.dataList = this.eleWeekList
|
||||||
|
this.lastDataList = this.lastEleWeekList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '月':
|
||||||
|
this.dataList = this.eleMonthList
|
||||||
|
this.lastDataList = this.lastEleMonthList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '年':
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleNode (obj, node, e) {
|
||||||
|
if (!(obj.children)) {
|
||||||
|
this.showId = obj.id
|
||||||
|
this.yaoluName = obj.label
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - 124px);
|
||||||
|
.kiln-electric-treebox {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #eeeeee;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.el-tabs__item{
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||||
|
line-height: 120px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,7 +1,734 @@
|
|||||||
<!--
|
<!--
|
||||||
* @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-12-01 09:17:20
|
||||||
* @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" :titleHeader="yaoluName" 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,
|
||||||
|
yaoluName: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.showId = this.yaoluList[0].id
|
||||||
|
this.yaoluName = this.yaoluList[0].label
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeEleType (v) {
|
||||||
|
switch (v) {
|
||||||
|
case '日':
|
||||||
|
this.dataList = this.eleDayList
|
||||||
|
this.lastDataList = this.lastEleDayList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '周':
|
||||||
|
this.dataList = this.eleWeekList
|
||||||
|
this.lastDataList = this.lastEleWeekList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '月':
|
||||||
|
this.dataList = this.eleMonthList
|
||||||
|
this.lastDataList = this.lastEleMonthList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '年':
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleNode (obj, node, e) {
|
||||||
|
if (!(obj.children)) {
|
||||||
|
this.showId = obj.id
|
||||||
|
this.yaoluName = obj.label
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - 124px);
|
||||||
|
.kiln-electric-treebox {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #eeeeee;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.el-tabs__item{
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||||
|
line-height: 120px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,7 +1,719 @@
|
|||||||
<!--
|
<!--
|
||||||
* @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-12-01 09:18:17
|
||||||
* @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 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" :titleHeader="yaoluName" 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,
|
||||||
|
yaoluName: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.showId = this.yaoluList[0].id
|
||||||
|
this.yaoluName = this.yaoluList[0].label
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeEleType (v) {
|
||||||
|
switch (v) {
|
||||||
|
case '日':
|
||||||
|
this.dataList = this.eleDayList
|
||||||
|
this.lastDataList = this.lastEleDayList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '周':
|
||||||
|
this.dataList = this.eleWeekList
|
||||||
|
this.lastDataList = this.lastEleWeekList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '月':
|
||||||
|
this.dataList = this.eleMonthList
|
||||||
|
this.lastDataList = this.lastEleMonthList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '年':
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleNode (obj, node, e) {
|
||||||
|
if (!(obj.children)) {
|
||||||
|
this.showId = obj.id
|
||||||
|
this.yaoluName = obj.label
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - 124px);
|
||||||
|
.kiln-electric-treebox {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #eeeeee;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.el-tabs__item{
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||||
|
line-height: 120px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,7 +1,734 @@
|
|||||||
<!--
|
<!--
|
||||||
* @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-12-01 09:17:03
|
||||||
* @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" :titleHeader="yaoluName" 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,
|
||||||
|
yaoluName: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.showId = this.yaoluList[0].id
|
||||||
|
this.yaoluName = this.yaoluList[0].label
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeEleType (v) {
|
||||||
|
switch (v) {
|
||||||
|
case '日':
|
||||||
|
this.dataList = this.eleDayList
|
||||||
|
this.lastDataList = this.lastEleDayList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '周':
|
||||||
|
this.dataList = this.eleWeekList
|
||||||
|
this.lastDataList = this.lastEleWeekList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '月':
|
||||||
|
this.dataList = this.eleMonthList
|
||||||
|
this.lastDataList = this.lastEleMonthList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '年':
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleNode (obj, node, e) {
|
||||||
|
if (!(obj.children)) {
|
||||||
|
this.showId = obj.id
|
||||||
|
this.yaoluName = obj.label
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - 124px);
|
||||||
|
.kiln-electric-treebox {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid #eeeeee;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.el-tabs__item{
|
||||||
|
height: 120px;
|
||||||
|
}
|
||||||
|
.el-tabs__nav-next, .el-tabs__nav-prev {
|
||||||
|
line-height: 120px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1,7 +1,719 @@
|
|||||||
<!--
|
<!--
|
||||||
* @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-12-01 09:18:38
|
||||||
* @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 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" :titleHeader="yaoluName" 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,
|
||||||
|
yaoluName: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.showId = this.yaoluList[0].id
|
||||||
|
this.yaoluName = this.yaoluList[0].label
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeEleType (v) {
|
||||||
|
switch (v) {
|
||||||
|
case '日':
|
||||||
|
this.dataList = this.eleDayList
|
||||||
|
this.lastDataList = this.lastEleDayList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '周':
|
||||||
|
this.dataList = this.eleWeekList
|
||||||
|
this.lastDataList = this.lastEleWeekList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '月':
|
||||||
|
this.dataList = this.eleMonthList
|
||||||
|
this.lastDataList = this.lastEleMonthList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
case '年':
|
||||||
|
this.dataList = this.eleYearList
|
||||||
|
this.lastDataList = this.lastEleYearList
|
||||||
|
this.date = new Date()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleNode (obj, node, e) {
|
||||||
|
if (!(obj.children)) {
|
||||||
|
this.showId = obj.id
|
||||||
|
this.yaoluName = obj.label
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: calc(100vh - 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>
|
||||||
|
|||||||
@ -2,8 +2,8 @@
|
|||||||
<nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
|
<nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
|
||||||
<div class="site-navbar__header">
|
<div class="site-navbar__header">
|
||||||
<h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
|
<h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
|
||||||
<a class="site-navbar__brand-lg" href="javascript:;">人人快速开发平台</a>
|
<a class="site-navbar__brand-lg" href="javascript:;">求精WMS调度管理系统</a>
|
||||||
<a class="site-navbar__brand-mini" href="javascript:;">人人</a>
|
<a class="site-navbar__brand-mini" href="javascript:;">求精</a>
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="site-navbar__body clearfix">
|
<div class="site-navbar__body clearfix">
|
||||||
@ -24,7 +24,7 @@
|
|||||||
</el-badge>
|
</el-badge>
|
||||||
</template>
|
</template>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
<el-menu-item index="2">
|
<!-- <el-menu-item index="2">
|
||||||
<el-badge value="hot">
|
<el-badge value="hot">
|
||||||
<a href="https://www.renren.io/" target="_blank">官方社区</a>
|
<a href="https://www.renren.io/" target="_blank">官方社区</a>
|
||||||
</el-badge>
|
</el-badge>
|
||||||
@ -34,7 +34,7 @@
|
|||||||
<el-menu-item index="2-1"><a href="https://github.com/renrenio/renren-fast-vue" target="_blank">前端</a></el-menu-item>
|
<el-menu-item index="2-1"><a href="https://github.com/renrenio/renren-fast-vue" target="_blank">前端</a></el-menu-item>
|
||||||
<el-menu-item index="2-2"><a href="https://gitee.com/renrenio/renren-fast" target="_blank">后台</a></el-menu-item>
|
<el-menu-item index="2-2"><a href="https://gitee.com/renrenio/renren-fast" target="_blank">后台</a></el-menu-item>
|
||||||
<el-menu-item index="2-3"><a href="https://gitee.com/renrenio/renren-generator" target="_blank">代码生成器</a></el-menu-item>
|
<el-menu-item index="2-3"><a href="https://gitee.com/renrenio/renren-generator" target="_blank">代码生成器</a></el-menu-item>
|
||||||
</el-submenu>
|
</el-submenu> -->
|
||||||
<el-menu-item class="site-navbar__avatar" index="3">
|
<el-menu-item class="site-navbar__avatar" index="3">
|
||||||
<el-dropdown :show-timeout="0" placement="bottom">
|
<el-dropdown :show-timeout="0" placement="bottom">
|
||||||
<span class="el-dropdown-link">
|
<span class="el-dropdown-link">
|
||||||
|
|||||||
@ -11,29 +11,77 @@
|
|||||||
v-loading="dataListLoading"
|
v-loading="dataListLoading"
|
||||||
style="width: 100%;">
|
style="width: 100%;">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="id"
|
type="index"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
width="80"
|
label="序号"
|
||||||
label="ID">
|
width="50">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramKey"
|
prop="paramKey"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数名">
|
label="任务编码">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramValue"
|
prop="paramValue"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数值">
|
label="发起时间">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="remark"
|
prop="remark"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="备注">
|
label="完成时间">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="type"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="任务类型">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="precess"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="当前工序">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="start"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="开始位置">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="end"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="目标位置">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="name"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="车辆名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="luzi"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="加工炉">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="num"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="加工数量">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="weight"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="重量">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
|
|||||||
@ -20,29 +20,71 @@
|
|||||||
v-loading="dataListLoading"
|
v-loading="dataListLoading"
|
||||||
style="width: 100%;">
|
style="width: 100%;">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="id"
|
type="index"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
width="80"
|
label="序号"
|
||||||
label="ID">
|
width="50">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramKey"
|
prop="paramKey"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数名">
|
label="标识卡号">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramValue"
|
prop="paramValue"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数值">
|
label="订单名">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="remark"
|
prop="remark"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="备注">
|
label="客户名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="name"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="产品名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="type"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="产品型号">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="card"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="材料号牌">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="need"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="生产工艺要求">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="unit"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="单位">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="num"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="数量">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="weight"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="重量">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
|
|||||||
@ -2,7 +2,26 @@
|
|||||||
<div class="mod-config">
|
<div class="mod-config">
|
||||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-input v-model="dataForm.paramKey" placeholder="名称或编码" clearable></el-input>
|
<el-select v-model="dataForm.card" filterable placeholder="标识卡号">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options1"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-select v-model="dataForm.orderid" filterable placeholder="订单号">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options2"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button @click="getDataList()">查询</el-button>
|
<el-button @click="getDataList()">查询</el-button>
|
||||||
@ -90,7 +109,7 @@
|
|||||||
prop="paramKey"
|
prop="paramKey"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="实际加工重量">
|
label="实际重量">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
fixed="right"
|
fixed="right"
|
||||||
@ -144,9 +163,12 @@
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
dataForm: {
|
dataForm: {
|
||||||
paramKey: ''
|
card: '',
|
||||||
|
orderid: ''
|
||||||
},
|
},
|
||||||
dataList: [],
|
dataList: [],
|
||||||
|
options1: [],
|
||||||
|
options2: [],
|
||||||
pageIndex: 1,
|
pageIndex: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
totalPage: 0,
|
totalPage: 0,
|
||||||
@ -170,7 +192,8 @@
|
|||||||
params: this.$http.adornParams({
|
params: this.$http.adornParams({
|
||||||
'page': this.pageIndex,
|
'page': this.pageIndex,
|
||||||
'limit': this.pageSize,
|
'limit': this.pageSize,
|
||||||
'paramKey': this.dataForm.paramKey
|
'orderid': this.dataForm.orderid,
|
||||||
|
'card': this.dataForm.card
|
||||||
})
|
})
|
||||||
}).then(({data}) => {
|
}).then(({data}) => {
|
||||||
if (data && data.code === 0) {
|
if (data && data.code === 0) {
|
||||||
|
|||||||
@ -2,7 +2,15 @@
|
|||||||
<div class="mod-config">
|
<div class="mod-config">
|
||||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-input v-model="dataForm.paramKey" placeholder="名称或编码" clearable></el-input>
|
<el-select v-model="dataForm.paramKey" filterable placeholder="车辆名称">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button @click="getDataList()">查询</el-button>
|
<el-button @click="getDataList()">查询</el-button>
|
||||||
@ -25,19 +33,49 @@
|
|||||||
prop="paramKey"
|
prop="paramKey"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数名">
|
label="任务编码">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramValue"
|
prop="paramValue"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数值">
|
label="发起时间">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="remark"
|
prop="remark"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="备注">
|
label="任务来源">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="status"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="任务状态">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="type"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="任务类型">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="start"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="开始位置">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="end"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="目标位置">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="name"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="车辆名称">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
fixed="right"
|
fixed="right"
|
||||||
@ -70,6 +108,7 @@
|
|||||||
paramKey: ''
|
paramKey: ''
|
||||||
},
|
},
|
||||||
dataList: [],
|
dataList: [],
|
||||||
|
options: [],
|
||||||
pageIndex: 1,
|
pageIndex: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
totalPage: 0,
|
totalPage: 0,
|
||||||
|
|||||||
@ -2,7 +2,25 @@
|
|||||||
<div class="mod-log">
|
<div class="mod-log">
|
||||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-input v-model="dataForm.key" placeholder="用户名／用户操作" clearable></el-input>
|
<el-select v-model="dataForm.key" filterable placeholder="车辆名称">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="dataForm.time"
|
||||||
|
type="daterange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button @click="getDataList()">查询</el-button>
|
<el-button @click="getDataList()">查询</el-button>
|
||||||
@ -62,9 +80,11 @@
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
dataForm: {
|
dataForm: {
|
||||||
key: ''
|
key: '',
|
||||||
|
time: []
|
||||||
},
|
},
|
||||||
dataList: [],
|
dataList: [],
|
||||||
|
options: [],
|
||||||
pageIndex: 1,
|
pageIndex: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
totalPage: 0,
|
totalPage: 0,
|
||||||
|
|||||||
@ -11,29 +11,82 @@
|
|||||||
v-loading="dataListLoading"
|
v-loading="dataListLoading"
|
||||||
style="width: 100%;">
|
style="width: 100%;">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="id"
|
type="index"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
width="80"
|
label="序号"
|
||||||
label="ID">
|
width="50">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramKey"
|
prop="paramKey"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数名">
|
label="任务编码">
|
||||||
|
</el-table-column><el-table-column
|
||||||
|
prop="start"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="发起时间">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="end"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="完成时间">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="paramKey"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="任务来源">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramValue"
|
prop="paramValue"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数值">
|
label="任务类型">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="remark"
|
prop="remark"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="备注">
|
label="当前工序">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="unit"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="单位">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="num"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="数量">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="weight"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="重量">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="start"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="开始位置">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="end"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="目标位置">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="name"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="车辆名称">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
|
|||||||
@ -11,29 +11,71 @@
|
|||||||
v-loading="dataListLoading"
|
v-loading="dataListLoading"
|
||||||
style="width: 100%;">
|
style="width: 100%;">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="id"
|
type="index"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
width="80"
|
label="序号"
|
||||||
label="ID">
|
width="50">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramKey"
|
prop="paramKey"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数名">
|
label="标识卡号">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramValue"
|
prop="paramValue"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="参数值">
|
label="订单名">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="remark"
|
prop="remark"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="备注">
|
label="客户名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="name"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="产品名称">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="type"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="产品型号">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="card"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="材料号牌">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="need"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="生产工艺要求">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="unit"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="单位">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="num"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="数量">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="weight"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="重量">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
|
|||||||
@ -1,8 +1,30 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="mod-log">
|
<div class="mod-log">
|
||||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
<el-form
|
||||||
|
:inline="true"
|
||||||
|
:model="dataForm"
|
||||||
|
@keyup.enter.native="getDataList()"
|
||||||
|
>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-input v-model="dataForm.key" placeholder="用户名／用户操作" clearable></el-input>
|
<el-select v-model="dataForm.key" filterable placeholder="窑炉名称">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="dataForm.time"
|
||||||
|
type="daterange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button @click="getDataList()">查询</el-button>
|
<el-button @click="getDataList()">查询</el-button>
|
||||||
@ -12,37 +34,43 @@
|
|||||||
:data="dataList"
|
:data="dataList"
|
||||||
border
|
border
|
||||||
v-loading="dataListLoading"
|
v-loading="dataListLoading"
|
||||||
style="width: 100%">
|
style="width: 100%"
|
||||||
|
>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
type="index"
|
type="index"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="序号"
|
label="序号"
|
||||||
width="50">
|
width="50"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="username"
|
prop="username"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="窑炉名称">
|
label="窑炉名称"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="operation"
|
prop="operation"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="报警时间">
|
label="报警时间"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="time"
|
prop="time"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="报警级别">
|
label="报警级别"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="ip"
|
prop="ip"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="报警内容">
|
label="报警内容"
|
||||||
|
>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
@ -52,19 +80,22 @@
|
|||||||
:page-sizes="[10, 20, 50, 100]"
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
:page-size="pageSize"
|
:page-size="pageSize"
|
||||||
:total="totalPage"
|
:total="totalPage"
|
||||||
layout="total, sizes, prev, pager, next, jumper">
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
>
|
||||||
</el-pagination>
|
</el-pagination>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
dataForm: {
|
dataForm: {
|
||||||
key: ''
|
key: '',
|
||||||
|
time: []
|
||||||
},
|
},
|
||||||
dataList: [],
|
dataList: [],
|
||||||
|
options: [],
|
||||||
pageIndex: 1,
|
pageIndex: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
totalPage: 0,
|
totalPage: 0,
|
||||||
@ -83,11 +114,11 @@
|
|||||||
url: this.$http.adornUrl('/sys/log/list'),
|
url: this.$http.adornUrl('/sys/log/list'),
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: this.$http.adornParams({
|
params: this.$http.adornParams({
|
||||||
'page': this.pageIndex,
|
page: this.pageIndex,
|
||||||
'limit': this.pageSize,
|
limit: this.pageSize,
|
||||||
'key': this.dataForm.key
|
key: this.dataForm.key
|
||||||
})
|
})
|
||||||
}).then(({data}) => {
|
}).then(({ data }) => {
|
||||||
if (data && data.code === 0) {
|
if (data && data.code === 0) {
|
||||||
this.dataList = data.page.list
|
this.dataList = data.page.list
|
||||||
this.totalPage = data.page.totalCount
|
this.totalPage = data.page.totalCount
|
||||||
@ -110,5 +141,5 @@
|
|||||||
this.getDataList()
|
this.getDataList()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -2,7 +2,26 @@
|
|||||||
<div class="mod-config">
|
<div class="mod-config">
|
||||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-input v-model="dataForm.paramKey" placeholder="名称或编码" clearable></el-input>
|
<el-select v-model="dataForm.card" filterable placeholder="标识卡号">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options1"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-select v-model="dataForm.orderid" filterable placeholder="订单号">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options2"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button @click="getDataList()">查询</el-button>
|
<el-button @click="getDataList()">查询</el-button>
|
||||||
@ -38,6 +57,18 @@
|
|||||||
align="center"
|
align="center"
|
||||||
label="订单号">
|
label="订单号">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="start"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="发起时间">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="end"
|
||||||
|
header-align="center"
|
||||||
|
align="center"
|
||||||
|
label="完成时间">
|
||||||
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramKey"
|
prop="paramKey"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
@ -69,28 +100,16 @@
|
|||||||
label="产品名称">
|
label="产品名称">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramKey"
|
prop="card"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="物料名称">
|
label="材料号牌">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramKey"
|
prop="paramKey"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="物料数量">
|
label="数量">
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="paramKey"
|
|
||||||
header-align="center"
|
|
||||||
align="center"
|
|
||||||
label="物料重量">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="paramKey"
|
|
||||||
header-align="center"
|
|
||||||
align="center"
|
|
||||||
label="实际加工重量">
|
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
fixed="right"
|
fixed="right"
|
||||||
@ -133,9 +152,12 @@
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
dataForm: {
|
dataForm: {
|
||||||
paramKey: ''
|
card: '',
|
||||||
|
orderid: ''
|
||||||
},
|
},
|
||||||
dataList: [],
|
dataList: [],
|
||||||
|
options1: [],
|
||||||
|
options2: [],
|
||||||
pageIndex: 1,
|
pageIndex: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
totalPage: 0,
|
totalPage: 0,
|
||||||
@ -159,7 +181,7 @@
|
|||||||
params: this.$http.adornParams({
|
params: this.$http.adornParams({
|
||||||
'page': this.pageIndex,
|
'page': this.pageIndex,
|
||||||
'limit': this.pageSize,
|
'limit': this.pageSize,
|
||||||
'paramKey': this.dataForm.paramKey
|
'card': this.dataForm.card
|
||||||
})
|
})
|
||||||
}).then(({data}) => {
|
}).then(({data}) => {
|
||||||
if (data && data.code === 0) {
|
if (data && data.code === 0) {
|
||||||
|
|||||||
@ -2,7 +2,36 @@
|
|||||||
<div class="mod-config">
|
<div class="mod-config">
|
||||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-input v-model="dataForm.paramKey" placeholder="名称或编码" clearable></el-input>
|
<el-select v-model="dataForm.card" filterable placeholder="标识卡号">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options1"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-select v-model="dataForm.orderid" filterable placeholder="车辆名称">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options2"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-date-picker
|
||||||
|
v-model="dataForm.time"
|
||||||
|
type="daterange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<el-button @click="getDataList()">查询</el-button>
|
<el-button @click="getDataList()">查询</el-button>
|
||||||
@ -24,7 +53,7 @@
|
|||||||
prop="paramKey"
|
prop="paramKey"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="获取时间">
|
label="任务编码">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramValue"
|
prop="paramValue"
|
||||||
@ -33,10 +62,10 @@
|
|||||||
label="标识卡号">
|
label="标识卡号">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramKey"
|
prop="start"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="订单号">
|
label="发起时间">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramKey"
|
prop="paramKey"
|
||||||
@ -54,43 +83,25 @@
|
|||||||
prop="paramKey"
|
prop="paramKey"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="订单状态">
|
label="任务类型">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramKey"
|
prop="start"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="客户名称">
|
label="开始位置">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramKey"
|
prop="end"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="产品名称">
|
label="目标位置">
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
prop="paramKey"
|
prop="name"
|
||||||
header-align="center"
|
header-align="center"
|
||||||
align="center"
|
align="center"
|
||||||
label="物料名称">
|
label="车辆名称">
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="paramKey"
|
|
||||||
header-align="center"
|
|
||||||
align="center"
|
|
||||||
label="物料数量">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="paramKey"
|
|
||||||
header-align="center"
|
|
||||||
align="center"
|
|
||||||
label="物料重量">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="paramKey"
|
|
||||||
header-align="center"
|
|
||||||
align="center"
|
|
||||||
label="实际加工重量">
|
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
fixed="right"
|
fixed="right"
|
||||||
@ -120,9 +131,13 @@
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
dataForm: {
|
dataForm: {
|
||||||
paramKey: ''
|
card: '',
|
||||||
|
orderid: '',
|
||||||
|
time: []
|
||||||
},
|
},
|
||||||
dataList: [],
|
dataList: [],
|
||||||
|
options1: [],
|
||||||
|
options2: [],
|
||||||
pageIndex: 1,
|
pageIndex: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
totalPage: 0,
|
totalPage: 0,
|
||||||
@ -143,7 +158,7 @@
|
|||||||
params: this.$http.adornParams({
|
params: this.$http.adornParams({
|
||||||
'page': this.pageIndex,
|
'page': this.pageIndex,
|
||||||
'limit': this.pageSize,
|
'limit': this.pageSize,
|
||||||
'paramKey': this.dataForm.paramKey
|
'card': this.dataForm.card
|
||||||
})
|
})
|
||||||
}).then(({data}) => {
|
}).then(({data}) => {
|
||||||
if (data && data.code === 0) {
|
if (data && data.code === 0) {
|
||||||
|
|||||||
@ -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',
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user