Skip to content

S
super-hive-web
Commit 0925a374 authored by wends's avatar wends
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents d2bbbf87 cc32ccc5
Show whitespace changes
Inline Side-by-side
Showing with 57 additions and 161 deletions
src/api/equipment-management/equipment-model.js
View file @ 0925a374
...@@ -55,3 +55,12 @@ export function getDataModelByDeviceTypeId(data) { ...@@ -55,3 +55,12 @@ export function getDataModelByDeviceTypeId(data) {
data data
}) })
} }
// 获取设备类型对应的实例数量统计
export function getDeviceTypeStatistics(data) {
return request({
url: `${baseURL}/iot/deviceModel/getDeviceTypeStatistics`,
method: 'post',
data
})
}
src/settings.js
View file @ 0925a374
...@@ -25,5 +25,5 @@ module.exports = { ...@@ -25,5 +25,5 @@ module.exports = {
*/ */
sidebarLogo: true, sidebarLogo: true,
overview: false overview: true
} }
src/views/overview/index.vue
View file @ 0925a374
<template> <template>
<div class="overview"> <div class="overview">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :xs="24" :sm="12" :lg="6"> <el-col
<el-card ref="rowOne" class="box-card row-one"> v-for="(deviceType, index) in deviceTypeList"
<div slot="header"> :key="index"
<span>温度</span> :span="6"
</div> >
<div class="number"> <el-card style="margin-bottom: 20px">
{{ overview.temperature }}摄氏度 <div :id="'donut' + deviceType.id" style="height: 360px" />
</div>
<div class="content">
<div id="gaugePlot" />
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :lg="6">
<el-card class="box-card row-one">
<div slot="header">
<span>气压</span>
</div>
<div class="number">
1212帕
</div>
<div class="content">
<div id="meterGaugePlot" />
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :lg="6">
<el-card class="box-card row-one">
<div slot="header">
<span>功率</span>
</div>
<div class="number">
6560千瓦时
</div>
<div class="content">
<div id="fanGaugePlot" />
</div>
</el-card>
</el-col>
<el-col :xs="24" :sm="12" :lg="6">
<el-card class="box-card row-one">
<div slot="header">
<span>活动营销效果</span>
</div>
<div class="number">
¥126560
</div>
<div class="content" />
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20">
<el-col :span="12" style="height: 500px">
<div id="line" style="background-color: #fff" />
</el-col>
<el-col :span="12" style="height: 500px">
<chart width="100%" height="100%"/>
</el-col>
<el-col :span="12" style="height: 500px">
<g2-line />
</el-col>
</el-row>
</div> </div>
</template> </template>
<script> <script>
import { Line, Gauge, MeterGauge, FanGauge } from '@antv/g2plot' import {
import { getLineData, getOverviewData } from '@/api/overview/overview' getDeviceTypeStatistics
import Chart from '@/components/Charts/LineMarker' } from '@/api/equipment-management/equipment-model'
import G2Line from '@/components/G2Plot/G2Line' import { Donut } from '@antv/g2plot'
export default { export default {
name: 'Overview', name: 'Overview',
components: { components: {},
Chart,
G2Line
},
data() { data() {
return { return {
circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png', deviceTypeList: []
line: null,
timer: 0,
count: 0,
lineData: [],
gaugePlot: null,
overview: {
temperature: null,
pressure: null,
power: null
}
} }
}, },
mounted() { created() {
this.line = new Line(document.getElementById('line'), { getDeviceTypeStatistics()
data: this.lineData, .then(res => {
this.deviceTypeList = res.data
this.deviceTypeList.forEach(item => {
const data = []
data.push({ type: '离线', value: item.instanceOfflineCount })
data.push({ type: '在线', value: item.instanceOnlineCount })
this.$nextTick()
.then(_ => {
const el = 'donut' + item.id
const donutPlot = new Donut(document.getElementById(el), {
forceFit: true,
title: { title: {
visible: true, visible: true,
text: '折线图' text: item.name
},
description: {
visible: true,
text: '用平滑的曲线代替折线'
}, },
xField: 'time', radius: 0.9,
yField: 'value', padding: 'auto',
xAxis: { data,
type: 'time', angleField: 'value',
mask: 'HH:mm:ss' colorField: 'type',
statistic: {
visible: true
} }
}) })
// this.timer = setInterval(() => { donutPlot.render()
// this.count++
// this.updateData()
// }, 1000)
this.line.render()
this.gaugePlot = new Gauge(document.getElementById('gaugePlot'), {
value: 64,
min: 0,
max: 100,
range: [0, 25, 50, 75, 100],
height: 200,
color: ['#39B8FF', '#52619B', '#43E089', '#C0EDF3']
}) })
this.gaugePlot.render()
const meterGaugePlot = new MeterGauge(document.getElementById('meterGaugePlot'), {
value: 64,
min: 0,
max: 100,
height: 200,
range: [0, 25, 50, 75, 100],
forceFit: true,
color: ['#39B8FF', '#52619B', '#43E089', '#C0EDF3']
}) })
meterGaugePlot.render()
const fanGaugePlot = new FanGauge(document.getElementById('fanGaugePlot'), {
value: 34,
min: 0,
max: 100,
height: 200,
range: [0, 70],
format: (v) => {
return v + '%'
},
color: ['l(0) 0:#b0d0ff 1:#5f92f9']
}) })
fanGaugePlot.render() .catch(err => {
this.$message.error(err.message)
})
},
mounted() {
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.timer)
}, },
methods: { methods: {
updateData() {
getLineData()
.then(res => this.line.changeData(res.data))
.catch(err => console.error(err))
getOverviewData()
.then(res => this.updateGaugePlot(res))
.catch(err => console.error(err))
},
updateGaugePlot(res) {
const { temperature } = res.data
this.overview.temperature = temperature
this.gaugePlot.updateConfig({
value: temperature
})
this.gaugePlot.render()
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.overview{ .overview{
.row-one{
margin-bottom: 20px;
.number{
font-size: 30px;
}
.content{
height: 200px;
}
.el-divider{
margin-top: 12px;
}
}
} }
</style> </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