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节能系统' ...@@ -7,9 +7,9 @@ CONFIG.TITLE = '拉灵线-山南站AI节能系统'
// CONFIG.requestPath = 'http://localhost:8046' // CONFIG.requestPath = 'http://localhost:8046'
CONFIG.requestPath = 'http://10.20.72.31:8046' // CONFIG.requestPath = 'http://10.20.72.31:8046'
// CONFIG.requestPath = 'http://59.110.43.122:8046' CONFIG.requestPath = 'http://59.110.43.122:8046'
// 文件上传 // 文件上传
CONFIG.urlPath = 'http://10.20.72.31/' // CONFIG.urlPath = 'http://10.20.72.31/'
// CONFIG.urlPath = 'http://59.110.43.122/' 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%' }") ...@@ -3,60 +3,76 @@ div(:id="id", :style="{ width: '100%', height: '90%' }")
</template> </template>
<script> <script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default { export default {
props: ['data', 'id'], props: ['data', 'id'],
watch: { watch: {
data() { data() {
this.initPie() this.initPie()
} }
}, },
mounted() { mounted() {
this.initPie() this.initPie()
}, const erd = elementResizeDetectorMaker()
methods: { erd.listenTo(document.getElementById(this.id), () => {
initPie() { this.$nextTick(() => {
let dom = document.getElementById(this.id) //监听到事件后执行的业务逻辑
if (!dom) return this.initPie()
let myCharts = this.$echarts.init(dom) })
let option = { })
color: ['skyblue', '#F2637B', '#8EE0E0', '#FFCC00', '#4ECB74'], },
tooltip: { destroyed() {
trigger: 'item' window.onresize = null
}, },
legend: { methods: {
orient: 'horizontal', initPie() {
top: '1%' let dom = document.getElementById(this.id)
}, if (!dom) return
series: [ let myCharts = this.$echarts.init(dom)
{ let option = {
type: 'pie', color: ['skyblue', '#F2637B', '#8EE0E0', '#FFCC00', '#4ECB74'],
radius: '50%', tooltip: {
data: this.data trigger: 'item'
// data: [ },
// { legend: {
// value: 1048, orient: 'horizontal',
// name: '风冷热泵机组', top: '1%'
// itemStyle: { color: 'skyblue' } },
// }, series: [
// { {
// value: 735, type: 'pie',
// name: '室内机风柜', radius: '50%',
// itemStyle: { color: '#F2637B' } data: this.data
// }, // data: [
// { value: 580, name: '水泵', itemStyle: { color: '#8EE0E0' } }, // {
// { // value: 1048,
// value: 484, // name: '风冷热泵机组',
// name: '多联室内机', // itemStyle: { color: 'skyblue' }
// itemStyle: { color: '#4ECB74' } // },
// }, // {
// { value: 300, name: '排风机', itemStyle: { color: '#FFCC00' } } // value: 735,
// ] // name: '室内机风柜',
} // itemStyle: { color: '#F2637B' }
] // },
} // { value: 580, name: '水泵', itemStyle: { color: '#8EE0E0' } },
myCharts.setOption(option) // {
} // value: 484,
} // name: '多联室内机',
// itemStyle: { color: '#4ECB74' }
// },
// { value: 300, name: '排风机', itemStyle: { color: '#FFCC00' } }
// ]
}
]
}
myCharts.setOption(option)
myCharts.resize()
window.addEventListener('resize', function() {
myCharts.resize()
})
}
}
} }
</script> </script>
......
src/pages/analysis/fault/pie2.vue
View file @ 0e64fad7
...@@ -3,80 +3,96 @@ div(:id="id", :style="{ width: '100%', height: '90%' }") ...@@ -3,80 +3,96 @@ div(:id="id", :style="{ width: '100%', height: '90%' }")
</template> </template>
<script> <script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default { export default {
props: ['data', 'id', 'legendData'], props: ['data', 'id', 'legendData'],
data() { data() {
return { return {
list: {} list: {}
} }
}, },
watch: { watch: {
data() { data() {
this.initPie2() this.initPie2()
} }
}, },
mounted() { mounted() {
this.initPie2() this.initPie2()
}, const erd = elementResizeDetectorMaker()
methods: { erd.listenTo(document.getElementById(this.id), () => {
initPie2() { this.$nextTick(() => {
let dom = document.getElementById(this.id) //监听到事件后执行的业务逻辑
if (!dom) return this.initPie2()
let myCharts = this.$echarts.init(dom) })
let option = { })
color: ['skyblue', '#F2637B', '#8EE0E0', '#FFCC00', '#4ECB74'], },
tooltip: { destroyed() {
trigger: 'item', window.onresize = null
formatter: '{a} <br/>{b} : {c} ({d}%)' },
}, methods: {
legend: { initPie2() {
type: 'scroll', let dom = document.getElementById(this.id)
orient: 'vertical', if (!dom) return
right: 10, let myCharts = this.$echarts.init(dom)
top: 20, let option = {
bottom: 20, color: ['skyblue', '#F2637B', '#8EE0E0', '#FFCC00', '#4ECB74'],
// data: ['风冷热泵机组', '室内机风柜', '水泵', '多联室内机'] tooltip: {
data: this.legendData trigger: 'item',
}, formatter: '{a} <br/>{b} : {c} ({d}%)'
series: [ },
{ legend: {
name: '', type: 'scroll',
type: 'pie', orient: 'vertical',
radius: '55%', right: 10,
center: ['40%', '50%'], top: 20,
data: this.data, bottom: 20,
// data: [ // data: ['风冷热泵机组', '室内机风柜', '水泵', '多联室内机']
// { data: this.legendData
// name: '风冷热泵机组', },
// value: '100', series: [
// itemStyle: { color: 'skyblue' } {
// }, name: '',
// { type: 'pie',
// name: '室内机风柜', radius: '55%',
// value: '130', center: ['40%', '50%'],
// itemStyle: { color: '#F2637B' } data: this.data,
// }, // data: [
// { name: '水泵', value: '400', itemStyle: { color: '#8EE0E0' } }, // {
// { // name: '风冷热泵机组',
// name: '多联室内机', // value: '100',
// value: '100', // itemStyle: { color: 'skyblue' }
// itemStyle: { color: '#FFCC00' } // },
// } // {
// ], // name: '室内机风柜',
emphasis: { // value: '130',
itemStyle: { // itemStyle: { color: '#F2637B' }
shadowBlur: 10, // },
shadowOffsetX: 0, // { name: '水泵', value: '400', itemStyle: { color: '#8EE0E0' } },
shadowColor: 'rgba(0, 0, 0, 0.5)' // {
} // name: '多联室内机',
} // value: '100',
} // itemStyle: { color: '#FFCC00' }
] // }
} // ],
myCharts.setOption(option) 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> </script>
......
src/pages/analysis/indoor/index.vue
View file @ 0e64fad7
...@@ -164,7 +164,7 @@ export default { ...@@ -164,7 +164,7 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
height: calc(100vh - 350px); height: calc(100vh - 350px);
> div { > div {
width: 48%; width: 47%;
height: calc(90% / 2); height: calc(90% / 2);
margin: 3px; margin: 3px;
padding: 13px; padding: 13px;
......
src/pages/components/chart.vue
View file @ 0e64fad7
// 曲线图 ==》 （首页，数据分析） // 曲线图 ==》 （首页，数据分析）
<template lang='pug'> <template lang="pug">
div(:id="id", :style="{ width: '100%', height: '90%' }") div(:id="id", :style="{ width: '100%', height: '90%' }")
</template> </template>
<script> <script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default { export default {
props: ['id', 'data', 'title', 'color', 'yAxisName'], props: ['id', 'data', 'title', 'color', 'yAxisName'],
watch: { watch: {
data: { data: {
immediate: true, immediate: true,
deep: true, deep: true,
handler(newValue, oldValue) { handler(newValue, oldValue) {
this.initChart() this.initChart()
} }
} }
}, },
mounted() { mounted() {
this.initChart() this.initChart()
}, const erd = elementResizeDetectorMaker()
methods: { erd.listenTo(document.getElementById(this.id), () => {
initChart() { this.$nextTick(() => {
let dom = document.getElementById(this.id) //监听到事件后执行的业务逻辑
if (!dom) return this.initChart()
let myCharts = this.$echarts.init(dom) })
let option = { })
// color:['#D0F0FF'], },
title: { destroyed() {
text: this.title window.onresize = null
}, },
tooltip: { methods: {
trigger: 'axis', initChart() {
transitionDuration: 0 let dom = document.getElementById(this.id)
}, if (!dom) return
grid: { let myCharts = this.$echarts.init(dom)
left: '3%', let option = {
bottom: '3%', // color:['#D0F0FF'],
containLabel: true title: {
}, text: this.title
xAxis: [ },
{ tooltip: {
// type: 'category', trigger: 'axis',
type: 'time', transitionDuration: 0
boundaryGap: false },
} grid: {
], left: '3%',
yAxis: [ bottom: '3%',
{ containLabel: true
type: 'value', },
name: this.yAxisName 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()
} window.addEventListener('resize', function() {
], 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)
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
</style>
src/pages/components/myPies.vue
View file @ 0e64fad7
<template> <template>
<div id="myPies" style="height: 100%"></div> <div id="myPies" style="height: 100%"></div>
</template> </template>
<script> <script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default { export default {
name: 'myPies', name: 'myPies',
data() { data() {
return { return {
myPies: null myPies: null
} }
}, },
mounted() { mounted() {
this.initPie() 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: { legend: {
initPie() { show: true,
let myPie = document.getElementById('myPies') orient: 'horizontal',
this.myPies = this.$echarts.init(myPie) // left: "center",
const data = [ bottom: '0',
{ name: '冷', value: 500 }, itemHeight: 13,
{ name: '适中', value: 900 }, itemWidth: 13,
{ name: '热', value: 600 } itemGap: 35,
] icon: 'circle',
const option = { data: data,
tooltip: { formatter: function(name) {
trigger: 'item' 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: { this.myPies.setOption(option)
show: true, this.myPies.resize()
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)
}
}
} }
</script> </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