Skip to content

E
energyai_vue
Commit 0e64fad7 authored by xiexingan's avatar xiexingan
Browse files
Options

tj

parent 41bb57b3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 777 additions and 654 deletions
public/config.js
View file @ 0e64fad7
......@@ -7,9 +7,9 @@ CONFIG.TITLE = '拉灵线-山南站AI节能系统'
// CONFIG.requestPath = 'http://localhost:8046'
CONFIG.requestPath = 'http://10.20.72.31:8046'
// CONFIG.requestPath = 'http://59.110.43.122:8046'
// CONFIG.requestPath = 'http://10.20.72.31:8046'
CONFIG.requestPath = 'http://59.110.43.122:8046'
// 文件上传
CONFIG.urlPath = 'http://10.20.72.31/'
// CONFIG.urlPath = 'http://59.110.43.122/'
// CONFIG.urlPath = 'http://10.20.72.31/'
CONFIG.urlPath = 'http://59.110.43.122/'
src/layout/header-aside/layout.vue
View file @ 0e64fad7
This diff is collapsed.
src/pages/analysis/fault/pie.vue
View file @ 0e64fad7
......@@ -3,60 +3,76 @@ div(:id="id", :style="{ width: '100%', height: '90%' }")
</template>
<script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
props: ['data', 'id'],
watch: {
data() {
this.initPie()
}
},
mounted() {
this.initPie()
},
methods: {
initPie() {
let dom = document.getElementById(this.id)
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
color: ['skyblue', '#F2637B', '#8EE0E0', '#FFCC00', '#4ECB74'],
tooltip: {
trigger: 'item'
},
legend: {
orient: 'horizontal',
top: '1%'
},
series: [
{
type: 'pie',
radius: '50%',
data: this.data
// data: [
// {
// value: 1048,
// name: '风冷热泵机组',
// itemStyle: { color: 'skyblue' }
// },
// {
// value: 735,
// name: '室内机风柜',
// itemStyle: { color: '#F2637B' }
// },
// { value: 580, name: '水泵', itemStyle: { color: '#8EE0E0' } },
// {
// value: 484,
// name: '多联室内机',
// itemStyle: { color: '#4ECB74' }
// },
// { value: 300, name: '排风机', itemStyle: { color: '#FFCC00' } }
// ]
}
]
}
myCharts.setOption(option)
}
}
props: ['data', 'id'],
watch: {
data() {
this.initPie()
}
},
mounted() {
this.initPie()
const erd = elementResizeDetectorMaker()
erd.listenTo(document.getElementById(this.id), () => {
this.$nextTick(() => {
//监听到事件后执行的业务逻辑
this.initPie()
})
})
},
destroyed() {
window.onresize = null
},
methods: {
initPie() {
let dom = document.getElementById(this.id)
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
color: ['skyblue', '#F2637B', '#8EE0E0', '#FFCC00', '#4ECB74'],
tooltip: {
trigger: 'item'
},
legend: {
orient: 'horizontal',
top: '1%'
},
series: [
{
type: 'pie',
radius: '50%',
data: this.data
// data: [
// {
// value: 1048,
// name: '风冷热泵机组',
// itemStyle: { color: 'skyblue' }
// },
// {
// value: 735,
// name: '室内机风柜',
// itemStyle: { color: '#F2637B' }
// },
// { value: 580, name: '水泵', itemStyle: { color: '#8EE0E0' } },
// {
// value: 484,
// name: '多联室内机',
// itemStyle: { color: '#4ECB74' }
// },
// { value: 300, name: '排风机', itemStyle: { color: '#FFCC00' } }
// ]
}
]
}
myCharts.setOption(option)
myCharts.resize()
window.addEventListener('resize', function() {
myCharts.resize()
})
}
}
}
</script>
......
src/pages/analysis/fault/pie2.vue
View file @ 0e64fad7
......@@ -3,80 +3,96 @@ div(:id="id", :style="{ width: '100%', height: '90%' }")
</template>
<script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
props: ['data', 'id', 'legendData'],
data() {
return {
list: {}
}
},
watch: {
data() {
this.initPie2()
}
},
props: ['data', 'id', 'legendData'],
data() {
return {
list: {}
}
},
watch: {
data() {
this.initPie2()
}
},
mounted() {
this.initPie2()
},
methods: {
initPie2() {
let dom = document.getElementById(this.id)
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
color: ['skyblue', '#F2637B', '#8EE0E0', '#FFCC00', '#4ECB74'],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
// data: ['风冷热泵机组', '室内机风柜', '水泵', '多联室内机']
data: this.legendData
},
series: [
{
name: '',
type: 'pie',
radius: '55%',
center: ['40%', '50%'],
data: this.data,
// data: [
// {
// name: '风冷热泵机组',
// value: '100',
// itemStyle: { color: 'skyblue' }
// },
// {
// name: '室内机风柜',
// value: '130',
// itemStyle: { color: '#F2637B' }
// },
// { name: '水泵', value: '400', itemStyle: { color: '#8EE0E0' } },
// {
// name: '多联室内机',
// value: '100',
// itemStyle: { color: '#FFCC00' }
// }
// ],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myCharts.setOption(option)
}
}
mounted() {
this.initPie2()
const erd = elementResizeDetectorMaker()
erd.listenTo(document.getElementById(this.id), () => {
this.$nextTick(() => {
//监听到事件后执行的业务逻辑
this.initPie2()
})
})
},
destroyed() {
window.onresize = null
},
methods: {
initPie2() {
let dom = document.getElementById(this.id)
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
color: ['skyblue', '#F2637B', '#8EE0E0', '#FFCC00', '#4ECB74'],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
// data: ['风冷热泵机组', '室内机风柜', '水泵', '多联室内机']
data: this.legendData
},
series: [
{
name: '',
type: 'pie',
radius: '55%',
center: ['40%', '50%'],
data: this.data,
// data: [
// {
// name: '风冷热泵机组',
// value: '100',
// itemStyle: { color: 'skyblue' }
// },
// {
// name: '室内机风柜',
// value: '130',
// itemStyle: { color: '#F2637B' }
// },
// { name: '水泵', value: '400', itemStyle: { color: '#8EE0E0' } },
// {
// name: '多联室内机',
// value: '100',
// itemStyle: { color: '#FFCC00' }
// }
// ],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myCharts.setOption(option)
myCharts.resize()
window.addEventListener('resize', function() {
myCharts.resize()
})
}
}
}
</script>
......
src/pages/analysis/indoor/index.vue
View file @ 0e64fad7
......@@ -164,7 +164,7 @@ export default {
flex-wrap: wrap;
height: calc(100vh - 350px);
> div {
width: 48%;
width: 47%;
height: calc(90% / 2);
margin: 3px;
padding: 13px;
......
src/pages/components/chart.vue
View file @ 0e64fad7
// 曲线图 ==》 （首页，数据分析）
<template lang='pug'>
<template lang="pug">
div(:id="id", :style="{ width: '100%', height: '90%' }")
</template>
<script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
props: ['id', 'data', 'title', 'color', 'yAxisName'],
watch: {
data: {
immediate: true,
deep: true,
handler(newValue, oldValue) {
this.initChart()
}
}
},
mounted() {
this.initChart()
},
methods: {
initChart() {
let dom = document.getElementById(this.id)
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
// color:['#D0F0FF'],
title: {
text: this.title
},
tooltip: {
trigger: 'axis',
transitionDuration: 0
},
grid: {
left: '3%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
// type: 'category',
type: 'time',
boundaryGap: false
}
],
yAxis: [
{
type: 'value',
name: this.yAxisName
props: ['id', 'data', 'title', 'color', 'yAxisName'],
watch: {
data: {
immediate: true,
deep: true,
handler(newValue, oldValue) {
this.initChart()
}
}
},
mounted() {
this.initChart()
const erd = elementResizeDetectorMaker()
erd.listenTo(document.getElementById(this.id), () => {
this.$nextTick(() => {
//监听到事件后执行的业务逻辑
this.initChart()
})
})
},
destroyed() {
window.onresize = null
},
methods: {
initChart() {
let dom = document.getElementById(this.id)
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
// color:['#D0F0FF'],
title: {
text: this.title
},
tooltip: {
trigger: 'axis',
transitionDuration: 0
},
grid: {
left: '3%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
// type: 'category',
type: 'time',
boundaryGap: false
}
],
yAxis: [
{
type: 'value',
name: this.yAxisName
}
],
series: [
{
name: '',
type: 'line',
stack: '总量',
smooth: true,
// label: {
// show: true,
// position: 'top'
// },
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: this.color // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
]
)
}
},
lineStyle: {
color: this.color
},
itemStyle: {
normal: {
color: '#13B0FF'
}
},
emphasis: {
focus: 'series'
},
data: this.data
}
]
}
myCharts.setOption(option, true)
myCharts.resize()
}
],
series: [
{
name: '',
type: 'line',
stack: '总量',
smooth: true,
// label: {
// show: true,
// position: 'top'
// },
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: this.color // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
lineStyle: {
color: this.color
},
itemStyle: {
normal: {
color: '#13B0FF'
}
},
emphasis: {
focus: 'series'
},
data: this.data
}
]
}
myCharts.setOption(option, true)
}
}
window.addEventListener('resize', function() {
myCharts.resize()
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>
src/pages/components/myPies.vue
View file @ 0e64fad7
<template>
<div id="myPies" style="height: 100%"></div>
<div id="myPies" style="height: 100%"></div>
</template>
<script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
name: 'myPies',
data() {
return {
myPies: null
}
},
name: 'myPies',
data() {
return {
myPies: null
}
},
mounted() {
this.initPie()
},
mounted() {
this.initPie()
const erd = elementResizeDetectorMaker()
erd.listenTo(document.getElementById('myPies'), () => {
this.$nextTick(() => {
//监听到事件后执行的业务逻辑
this.initPie()
})
})
},
methods: {
initPie() {
let myPie = document.getElementById('myPies')
this.myPies = this.$echarts.init(myPie)
const data = [
{ name: '冷', value: 500 },
{ name: '适中', value: 900 },
{ name: '热', value: 600 }
]
const option = {
tooltip: {
trigger: 'item'
},
methods: {
initPie() {
let myPie = document.getElementById('myPies')
this.myPies = this.$echarts.init(myPie)
const data = [
{ name: '冷', value: 500 },
{ name: '适中', value: 900 },
{ name: '热', value: 600 }
]
const option = {
tooltip: {
trigger: 'item'
},
legend: {
show: true,
orient: 'horizontal',
// left: "center",
bottom: '0',
itemHeight: 13,
itemWidth: 13,
itemGap: 35,
icon: 'circle',
data: data,
formatter: function(name) {
var total = 0
var target
var value
for (let i = 0, l = data.length; i < l; i++) {
value = data[i].value
total += data[i].value
if (data[i].name == name) {
target = data[i].value
}
}
return (
name +
' ' +
((target / total) * 100).toFixed(0) +
'%'
)
},
textStyle: {
rich: {
a: {
color: '#333333',
// verticalAlign: "top",
// align: "center",
// fontSize: 12,
// padding: [10, 0, 28, 0]
padding: 20
},
b: {
// align: "left",
// fontSize: 18,
padding: [10, 10, 10, 0],
// // lineHeight: 25,
color: '#333333'
}
}
}
},
color: [
'rgba(72,154,254,1)',
'rgba(247,243,204,1)',
'rgba(236,73,104,1)'
],
series: [
{
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '40%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
normal: {
show: true,
position: 'center',
formatter: function() {
return `\r\n20000`
},
textStyle: {
fontSize: 30,
lineHeight: 20,
color: '#36CBCB'
}
}
},
emphasis: {
label: {
show: false,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [...data]
}
]
}
legend: {
show: true,
orient: 'horizontal',
// left: "center",
bottom: '0',
itemHeight: 13,
itemWidth: 13,
itemGap: 35,
icon: 'circle',
data: data,
formatter: function (name) {
var total = 0
var target
var value
for (let i = 0, l = data.length; i < l; i++) {
value = data[i].value
total += data[i].value
if (data[i].name == name) {
target = data[i].value
}
}
return name + ' ' + ((target / total) * 100).toFixed(0) + '%'
},
textStyle: {
rich: {
a: {
color: '#333333',
// verticalAlign: "top",
// align: "center",
// fontSize: 12,
// padding: [10, 0, 28, 0]
padding: 20
},
b: {
// align: "left",
// fontSize: 18,
padding: [10, 10, 10, 0],
// // lineHeight: 25,
color: '#333333'
}
}
}
},
color: [
'rgba(72,154,254,1)',
'rgba(247,243,204,1)',
'rgba(236,73,104,1)'
],
series: [
{
type: 'pie',
radius: ['50%', '70%'],
center: ['50%', '40%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
normal: {
show: true,
position: 'center',
formatter: function () {
return `\r\n20000`
},
textStyle: {
fontSize: 30,
lineHeight: 20,
color: '#36CBCB'
}
}
},
emphasis: {
label: {
show: false,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [...data]
}
]
}
this.myPies.setOption(option)
}
}
this.myPies.setOption(option)
this.myPies.resize()
}
}
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment