Commit 8b7a106d authored by xiexingan's avatar xiexingan

调整

parent 4a5d76df
...@@ -5,10 +5,10 @@ CONFIG.TITLE = 'AI节能管理系统' ...@@ -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://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/' // CONFIG.urlPath = 'http://10.20.72.33/'
......
...@@ -7,46 +7,39 @@ card-warp(title="故障报警分析", height="45px", showBackground) ...@@ -7,46 +7,39 @@ card-warp(title="故障报警分析", height="45px", showBackground)
size="mini", size="mini",
type="primary", type="primary",
@click="handleDate(item.id)", @click="handleDate(item.id)",
v-for="(item, index) in typeList", v-for="(item, index) in dateTypeList",
:key="index", :key="index",
:class="[item.id == currentActive ? 'isActive' : '']" :class="[item.id == currentActive ? 'isActive' : '']"
) {{ item.name }} ) {{ item.name }}
.echartsWarp(width="100%", flex) .echartsWarp(width="100%", flex)
//- div
//- .title 设备故障统计
//- pie
//- div
//- .title 设备报警统计
//- pie2
div div
.title 设备类型故障数量统计 .title 设备类型故障数量统计
pie3 pie(:data='typeList' , id='123')
div div
.title 设备故障数量统计 .title 设备故障数量统计
pie4 pie2(:data='idList' , id='daad' :legendData='legendData')
</template> </template>
<script> <script>
// import pie from './pie' import pie from './pie'
// import pie2 from './pie2' import pie2 from './pie2'
import pie3 from './pie3'
import pie4 from './pie4'
export default { export default {
components: { components: {
// pie, pie,
// pie2, pie2
pie3,
pie4
}, },
data() { data() {
return { return {
typeList: [ dateTypeList: [
{ name: '当日', id: 1 }, { name: '当日', id: 1 },
{ name: '本周', id: 2 }, { name: '本周', id: 2 },
{ name: '当月', id: 3 }, { name: '当月', id: 3 },
{ name: '今年', id: 4 } { name: '今年', id: 4 }
], ],
currentActive: 1 currentActive: 1,
typeList: [],
idList: [],
legendData: []
} }
}, },
mounted() { mounted() {
...@@ -64,7 +57,9 @@ export default { ...@@ -64,7 +57,9 @@ export default {
if (data && data.code === 0) { if (data && data.code === 0) {
console.log('数据1', data.typeList) console.log('数据1', data.typeList)
console.log('数据2', data.idList) 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)
} }
}) })
}, },
......
<template lang='pug'> <template lang="pug">
#pie(:style="{ width: '100%', height: '90%'}") div(:id="id", :style="{ width: '100%', height: '90%' }")
</template> </template>
<script> <script>
export default { export default {
mounted() { props: ['data', 'id'],
this.pie() watch: {
}, data() {
methods: { this.initPie()
pie() { }
let dom = document.getElementById('pie') },
if (!dom) return mounted() {
let myCharts = this.$echarts.init(dom) this.initPie()
let option = { },
methods: {
tooltip: { initPie() {
trigger: 'item' let dom = document.getElementById(this.id)
}, if (!dom) return
legend: { let myCharts = this.$echarts.init(dom)
orient: 'horizontal', let option = {
top: '1%' color: ['skyblue', '#F2637B', '#8EE0E0', '#FFCC00'],
}, tooltip: {
series: [ trigger: 'item'
{ },
type: 'pie', legend: {
radius: '50%', orient: 'horizontal',
data: [ top: '1%'
{ value: 1048, name: '搜索引擎' }, },
{ value: 735, name: '直接访问' }, series: [
{ value: 580, name: '邮件营销' }, {
{ value: 484, name: '联盟广告' }, type: 'pie',
{ value: 300, name: '视频广告' } radius: '50%',
] data: this.data
// data: [
} // {
] // value: 1048,
} // name: '风冷热泵机组',
myCharts.setOption(option) // 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
</style>
<template lang='pug'> <template lang="pug">
#pie2(:style="{ width: '100%', height: '90%' }") div(:id="id", :style="{ width: '100%', height: '90%' }")
</template> </template>
<script> <script>
export default { export default {
props: ['data', 'id', 'legendData'],
data() {
return {
list: {}
}
},
watch: {
data() { data() {
return { this.initPie2()
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,
selected: this.list.selected mounted() {
}, this.initPie2()
series: [ },
{ methods: {
name: '姓名', initPie2() {
type: 'pie', let dom = document.getElementById(this.id)
radius: '55%', if (!dom) return
center: ['40%', '50%'], let myCharts = this.$echarts.init(dom)
data: this.list.seriesData, let option = {
emphasis: { color: ['skyblue', '#F2637B', '#8EE0E0', '#FFCC00'],
itemStyle: { tooltip: {
shadowBlur: 10, trigger: 'item',
shadowOffsetX: 0, formatter: '{a} <br/>{b} : {c} ({d}%)'
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myCharts.setOption(option)
}, },
genData(count) { legend: {
var legendData = [] type: 'scroll',
var seriesData = [] orient: 'vertical',
for (var i = 0; i < count; i++) { right: 10,
var name = top: 20,
Math.random() > 0.65 bottom: 20,
? this.makeWord(4, 1) + '·' + this.makeWord(3, 0) // data: ['风冷热泵机组', '室内机风柜', '水泵', '多联室内机']
: this.makeWord(2, 1) data: this.legendData
legendData.push(name)
seriesData.push({
name: name,
value: Math.round(Math.random() * 100000)
})
}
return {
legendData: legendData,
seriesData: seriesData
}
}, },
makeWord(max, min) { series: [
var nameLen = Math.ceil(Math.random() * max + min) {
var name = [] name: '',
for (var i = 0; i < nameLen; i++) { type: 'pie',
name.push( radius: '55%',
this.nameList[ Math.round(Math.random() * this.nameList.length - 1) ] 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
</style>
<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