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 {
props: ['data', 'id'],
watch: {
data() {
this.initPie()
}
},
mounted() { mounted() {
this.pie() this.initPie()
}, },
methods: { methods: {
pie() { initPie() {
let dom = document.getElementById('pie') let dom = document.getElementById(this.id)
if (!dom) return if (!dom) return
let myCharts = this.$echarts.init(dom) let myCharts = this.$echarts.init(dom)
let option = { let option = {
color: ['skyblue', '#F2637B', '#8EE0E0', '#FFCC00'],
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
...@@ -25,14 +31,26 @@ export default { ...@@ -25,14 +31,26 @@ export default {
{ {
type: 'pie', type: 'pie',
radius: '50%', radius: '50%',
data: [ data: this.data
{ value: 1048, name: '搜索引擎' }, // data: [
{ value: 735, name: '直接访问' }, // {
{ value: 580, name: '邮件营销' }, // value: 1048,
{ value: 484, name: '联盟广告' }, // name: '风冷热泵机组',
{ value: 300, 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' } }
// ]
} }
] ]
} }
...@@ -42,5 +60,4 @@ export default { ...@@ -42,5 +60,4 @@ export default {
} }
</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() { data() {
return { return {
legendData: [],
nameList: [
'赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩'
],
list: {} list: {}
} }
}, },
created() { watch: {
this.list = this.genData(20) data() {
this.initPie2()
}
}, },
mounted() { mounted() {
this.ring() this.initPie2()
console.log(this.list)
}, },
methods: { methods: {
ring() { initPie2() {
let dom = document.getElementById('pie2') let dom = document.getElementById(this.id)
if (!dom) return if (!dom) return
let myCharts = this.$echarts.init(dom) let myCharts = this.$echarts.init(dom)
let option = { let option = {
color: ['skyblue', '#F2637B', '#8EE0E0', '#FFCC00'],
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)' formatter: '{a} <br/>{b} : {c} ({d}%)'
...@@ -36,17 +36,34 @@ export default { ...@@ -36,17 +36,34 @@ export default {
right: 10, right: 10,
top: 20, top: 20,
bottom: 20, bottom: 20,
data: this.list.legendData, // data: ['风冷热泵机组', '室内机风柜', '水泵', '多联室内机']
data: this.legendData
selected: this.list.selected
}, },
series: [ series: [
{ {
name: '姓名', name: '',
type: 'pie', type: 'pie',
radius: '55%', radius: '55%',
center: ['40%', '50%'], center: ['40%', '50%'],
data: this.list.seriesData, 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: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
...@@ -58,40 +75,9 @@ export default { ...@@ -58,40 +75,9 @@ export default {
] ]
} }
myCharts.setOption(option) myCharts.setOption(option)
},
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
}
},
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) ]
)
}
return name.join('')
} }
} }
} }
</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