Skip to content

E
energyai_vue
Commit 8b7a106d authored by xiexingan's avatar xiexingan
Browse files
Options

调整

parent 4a5d76df
Hide whitespace changes
Inline Side-by-side
Showing with 142 additions and 199 deletions
public/config.js
View file @ 8b7a106d
......@@ -5,10 +5,10 @@ CONFIG.TITLE = 'AI节能管理系统'
// 网络请求公用地址
// CONFIG.requestPath = 'http://localhost:8046'
CONFIG.requestPath = 'http://localhost: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.33/'
......
src/pages/analysis/fault/index.vue
View file @ 8b7a106d
......@@ -7,46 +7,39 @@ card-warp(title="故障报警分析", height="45px", showBackground)
size="mini",
type="primary",
@click="handleDate(item.id)",
v-for="(item, index) in typeList",
v-for="(item, index) in dateTypeList",
:key="index",
:class="[item.id == currentActive ? 'isActive' : '']"
) {{ item.name }}
.echartsWarp(width="100%", flex)
//- div
//- .title 设备故障统计
//- pie
//- div
//- .title 设备报警统计
//- pie2
div
.title 设备类型故障数量统计
pie3
pie(:data='typeList' , id='123')
div
.title 设备故障数量统计
pie4
pie2(:data='idList' , id='daad' :legendData='legendData')
</template>
<script>
// import pie from './pie'
// import pie2 from './pie2'
import pie3 from './pie3'
import pie4 from './pie4'
import pie from './pie'
import pie2 from './pie2'
export default {
components: {
// pie,
// pie2,
pie3,
pie4
pie,
pie2
},
data() {
return {
typeList: [
dateTypeList: [
{ name: '当日', id: 1 },
{ name: '本周', id: 2 },
{ name: '当月', id: 3 },
{ name: '今年', id: 4 }
],
currentActive: 1
currentActive: 1,
typeList: [],
idList: [],
legendData: []
}
},
mounted() {
......@@ -64,7 +57,9 @@ export default {
if (data && data.code === 0) {
console.log('数据1', data.typeList)
console.log('数据2', data.idList)
// this.data = data.list
this.typeList = data.typeList
this.idList = data.idList
this.legendData = this.idList.filter(e => e.name)
}
})
},
......
src/pages/analysis/fault/pie.vue
View file @ 8b7a106d
<template lang='pug'>
#pie(:style="{ width: '100%', height: '90%'}")
<template lang="pug">
div(:id="id", :style="{ width: '100%', height: '90%' }")
</template>
<script>
export default {
mounted() {
this.pie()
},
methods: {
pie() {
let dom = document.getElementById('pie')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: 'horizontal',
top: '1%'
},
series: [
{
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
{ value: 300, name: '视频广告' }
]
}
]
}
myCharts.setOption(option)
}
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'],
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)
}
}
}
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>
src/pages/analysis/fault/pie2.vue
View file @ 8b7a106d
<template lang='pug'>
#pie2(:style="{ width: '100%', height: '90%' }")
<template lang="pug">
div(:id="id", :style="{ width: '100%', height: '90%' }")
</template>
<script>
export default {
props: ['data', 'id', 'legendData'],
data() {
return {
list: {}
}
},
watch: {
data() {
return {
legendData: [],
nameList: [
'赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩'
],
list: {}
}
},
created() {
this.list = this.genData(20)
},
mounted() {
this.ring()
console.log(this.list)
},
methods: {
ring() {
let dom = document.getElementById('pie2')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: this.list.legendData,
this.initPie2()
}
},
selected: this.list.selected
},
series: [
{
name: '姓名',
type: 'pie',
radius: '55%',
center: ['40%', '50%'],
data: this.list.seriesData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myCharts.setOption(option)
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'],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
genData(count) {
var legendData = []
var seriesData = []
for (var i = 0; i < count; i++) {
var name =
Math.random() > 0.65
? this.makeWord(4, 1) + '·' + this.makeWord(3, 0)
: this.makeWord(2, 1)
legendData.push(name)
seriesData.push({
name: name,
value: Math.round(Math.random() * 100000)
})
}
return {
legendData: legendData,
seriesData: seriesData
}
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
// data: ['风冷热泵机组', '室内机风柜', '水泵', '多联室内机']
data: this.legendData
},
makeWord(max, min) {
var nameLen = Math.ceil(Math.random() * max + min)
var name = []
for (var i = 0; i < nameLen; i++) {
name.push(
this.nameList[ Math.round(Math.random() * this.nameList.length - 1) ]
)
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)'
}
}
return name.join('')
}
}
]
}
myCharts.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>
src/pages/analysis/fault/pie3.vue deleted 100644 → 0
View file @ 4a5d76df
<template lang="pug">
#pie3(:style="{ width: '100%', height: '90%'}")
</template>
<script>
export default {
mounted() {
this.pie()
},
methods: {
pie() {
let dom = document.getElementById('pie3')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: 'horizontal',
top: '1%'
},
series: [
{
type: 'pie',
radius: '50%',
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)
}
}
}
</script>
<style lang="scss" scoped></style>
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