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

update

Browse Source
This commit is contained in:
gtz217 2021-11-26 17:15:20 +08:00
parent db51049507
commit bda097fe8c
6 changed files with 535 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
package-lock.json generated
View File

@ -3834,6 +3834,15 @@
"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": {
"version": "0.15.3",
"resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.15.3.tgz",
@ -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": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
@ -20978,6 +20992,14 @@
"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",
"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"
}
}
}
}

1
package.json
View File

@ -17,6 +17,7 @@
"axios": "0.17.1",
"babel-plugin-component": "0.10.1",
"babel-polyfill": "6.26.0",
"echarts": "^5.2.2",
"element-ui": "2.8.2",
"gulp": "3.9.1",
"gulp-concat": "2.6.1",

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

@ -6,21 +6,6 @@
<div id="J_chartLineBox" 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-col>
</el-row>
</div>
</template>
@ -30,32 +15,17 @@
export default {
data () {
return {
chartLine: null,
chartBar: null,
chartPie: null,
chartScatter: null
chartLine: null
}
},
mounted () {
this.initChartLine()
this.initChartBar()
this.initChartPie()
this.initChartScatter()
},
activated () {
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
if (this.chartLine) {
this.chartLine.resize()
}
if (this.chartBar) {
this.chartBar.resize()
}
if (this.chartPie) {
this.chartPie.resize()
}
if (this.chartScatter) {
this.chartScatter.resize()
}
},
methods: {
// 折线图

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

@ -1,12 +1,7 @@
<template>
<el-row :gutter="20">
<el-col :span="12">
<el-card>
<div id="J_chartPieBox" class="chart-box"></div>
</el-card>
</el-col>
</el-row>
</div>
<div class="mod-demo-echarts">
<div id="J_chartPieBox" class="chart-box"></div>
</div>
</template>
<script>
@ -121,7 +116,7 @@
}
}
.chart-box {
min-height: 400px;
min-height: 120px;
}
}
</style>

112
src/components/Charts/RingChart.vue Normal file
View File

@ -0,0 +1,112 @@
<!--
* @Author: gtz
* @Date: 2021-11-22 19:03:01
* @LastEditors: gtz
* @LastEditTime: 2021-11-26 11:31:58
* @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 echarts from 'echarts'
export default {
props: {
id: {
type: Number,
default: 1
},
data: {
type: Array,
default: () => {
return []
}
}
},
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'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
}
this.chartRing = echarts.init(document.getElementById('J_chartRingBox' + this.id))
this.chartRing.setOption(option)
window.addEventListener('resize', () => {
this.chartRing.resize()
})
}
}
}
</script>
<style lang="scss">
.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>

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

@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-11-19 10:55:33
* @LastEditors: gtz
* @LastEditTime: 2021-11-25 19:30:06
* @LastEditTime: 2021-11-26 16:53:20
* @Description:
-->
<template>
@ -49,17 +49,28 @@
/>
</el-row>
</el-col>
<el-col style="height: 500px">
<chart height="100%" width="100%" :title="eleType" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
</el-col>
<el-col style="height: 500px">
<chart height="100%" width="100%" :title="eleType" :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">
<span slot="label"><i class="el-icon-date"></i> 我的行程</span>
<el-row style="width: 200px; height: 120px" slot="label">
<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" />
</el-col>
</el-row>
我的行程
</el-tab-pane>
</el-tabs>
@ -70,6 +81,7 @@
<script>
import Chart from '@/components/Charts/MixChart'
import ringChart from '@/components/Charts/RingChart'
// 日发电数据
const eleDayList = [
@ -278,16 +290,382 @@ const yaoluList = [
{
id: 1,
name: '窑炉1',
value: 56,
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 {
name: 'electric',
components: { Chart },
components: { Chart, ringChart },
data () {
return {
eleDayList,
@ -348,4 +726,11 @@ export default {
}
</style>
<style lang="scss">
.el-tabs__item{
height: 120px;
}
.el-tabs__nav-next, .el-tabs__nav-prev {
line-height: 120px;
}
</style>