Skip to content

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

update 仪表盘

parent 768eb0e8
Hide whitespace changes
Inline Side-by-side
Showing with 149 additions and 102 deletions
src/api/data-visible/dashboard.js
View file @ ee184c90
......@@ -36,3 +36,12 @@ export function getModelInstanceChart(data) {
data
})
}
// 根据设备类型ID获取所有设备实例
export function getAllInstanceByDeviceTypeId(data) {
return request({
url: `${baseURL}/iot/deviceModel/instance/getInstanceByDeviceTypeId`,
method: 'post',
data
})
}
src/views/data-visible/dashboard/index.vue
View file @ ee184c90
......@@ -4,9 +4,13 @@
<el-col :xs="8" :sm="8" :md="6" :lg="4">
<div class="left">
<div class="search">
<el-select v-model="eModel" style="width: 100%">
<el-select
v-model="deviceType"
style="width: 100%"
@change="onDeviceTypeChange"
>
<el-option
v-for="item in eModelList"
v-for="item in deviceTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
......@@ -17,42 +21,38 @@
<div class="custom-menu">
<el-menu
ref="customMenu"
default-active="1"
:default-active="defaultActive"
@select="onInstanceSelect"
>
<el-menu-item
v-for="(model, index) in eInstanceList"
:key="'model' + index"
:index="model.id.toString()"
>{{ model.name }}</el-menu-item>
v-for="(instance, index) in deviceInstanceList"
:id="'instance' + instance.id"
:key="'instance' + index"
:index="instance.id.toString()"
:class="'instance' + instance.id"
>{{ instance.name }}</el-menu-item>
</el-menu>
</div>
</div>
</el-col>
<el-col :xs="16" :sm="16" :md="18" :lg="20">
<el-form
:ref="'form'+activeModel"
ref="form"
:model="chartField"
inline
label-width="100px"
style="margin-top: 20px"
:rules="rules"
>
<div>
<el-form-item label="选择实例：" prop="instanceId">
<el-radio-group v-model="chartField.instanceId">
<el-radio
v-for="(ins, index) in instanceList"
:key="300 + index"
:label="ins.id"
>{{ ins.instanceName }}</el-radio>
</el-radio-group>
</el-form-item>
</div>
<div>
<el-form-item label="Y轴:" prop="yFields">
<el-checkbox-group v-model="chartField.yFields">
<div v-if="dataModelList.length">
<el-form-item
v-for="(dataModel, index) in dataModelList"
:key="index + 300"
:label='dataModel.name + ":"'
prop="yFields"
>
<el-checkbox-group v-model="chartField.yFields[index]">
<el-checkbox
v-for="(prop, i) in propertyList"
v-for="(prop, i) in dataModel.propertyList"
:key="200+i"
:label="prop.propertyCode"
>{{ prop.propertyName }}</el-checkbox>
......@@ -81,9 +81,13 @@
</el-form-item>
</div>
</el-form>
<el-row :gutter="20">
<el-row
v-for="(chartGroup, index) in chartList"
:key="index + 1000"
:gutter="20"
>
<el-col
v-for="(chart) in chartList"
v-for="(chart) in chartGroup"
:key="chart.id"
:span="12"
style="height: 400px"
......@@ -91,7 +95,7 @@
<e-line
:id="'line-' + chart.propertyCode"
:title="chart.propertyName"
:line-data="setChartData(chart.propertyCode)"
:line-data="setChartData(chart.propertyCode, index)"
:description="chart.propertyUnit"
></e-line>
</el-col>
......@@ -103,7 +107,10 @@
<script>
import ELine from '@/components/Charts/ELine'
import { getAllModel, getModelDetail, getModelInstanceList, getModelInstanceChart } from '@/api/data-visible/dashboard'
import { getModelInstanceChart } from '@/api/data-visible/dashboard'
import { getAllDeviceModel } from '@/api/equipment-management/equipment-instance'
import { getAllInstanceByDeviceTypeId } from '@/api/data-visible/dashboard'
import { getDataModelByDeviceTypeId } from '@/api/equipment-management/equipment-model'
export default {
name: 'Dashboard',
......@@ -113,46 +120,21 @@ export default {
data() {
return {
chartField: {
instanceId: null,
yFields: [],
refresh: 1
},
activeModel: null,
dataModelList: [],
deviceInstance: null,
modelList: [],
objectId: '1',
defaultActive: null,
timer: 0,
count: 0,
instanceList: [],
propertyList: [],
eModel: 1,
eModelList: [
{
value: 1,
label: '设备模型一'
},
{
value: 2,
label: '设备模型二'
}
],
eInstanceList: [
{
id: 1,
name: '设备实例一'
},
{
id: 2,
name: '设备实例二'
},
{
id: 3,
name: '设备实例三'
},
{
id: 4,
name: '设备实例四'
}
],
deviceType: null,
deviceTypeList: [],
deviceInstanceList: [],
chartData: [],
chartList: [],
rules: {
......@@ -166,44 +148,81 @@ export default {
}
},
created() {
getAllModel()
// 初始化设备类型
getAllDeviceModel()
.then(res => {
this.modelList = res.data
if (this.modelList.length > 0) {
this.activeModel = this.modelList[0].id.toString()
this.getDetail(parseInt(this.activeModel))
this.deviceTypeList = res.data.map(v => {
return {
value: v.id,
label: v.name
}
})
if (this.deviceTypeList.length) {
this.deviceType = this.deviceTypeList[0].value
// 获取该设备类型下的设备实例
this.getAllInstanceByDeviceTypeId(this.deviceType)
// 根据设备类型 ID 获取关联数据模型
this.getDataModelByDeviceTypeId(this.deviceType)
}
})
.catch(err => console.error(err))
.catch(_ => {})
},
beforeDestroy() {
clearInterval(this.timer)
},
methods: {
onTabClick() {
onDeviceTypeChange(val) {
this.dataModelList = []
this.chartField = {
instanceId: null,
yFields: [],
refresh: 1
}
this.getDetail(parseInt(this.activeModel))
this.chartList = []
this.chartData = []
clearInterval(this.timer)
this.getDataModelByDeviceTypeId(val)
this.getAllInstanceByDeviceTypeId(val)
},
onInstanceSelect(index) {
const id = parseInt(index)
const instance = this.deviceInstanceList.find(v => v.id === id)
this.deviceInstance = instance.id
},
getDetail(id) {
Promise.all([getModelInstanceList({ id }), getModelDetail({ id })])
getDataModelByDeviceTypeId(id) {
getDataModelByDeviceTypeId({ id })
.then(res => {
const [res1, res2] = res
this.instanceList = res1.data
this.propertyList = res2.data.propertyList
this.dataModelList = res.data
this.chartField.yFields = []
this.dataModelList.forEach(v => {
this.chartField.yFields.push([])
})
})
.catch(err => console.error(err))
.catch(_ => {})
},
getAllInstanceByDeviceTypeId(val) {
getAllInstanceByDeviceTypeId({ deviceTypeId: val })
.then(res => {
this.deviceInstanceList = res.data
this.$nextTick()
.then(_ => {
if (this.deviceInstanceList.length) {
this.defaultActive = this.deviceInstanceList[0].id.toString()
this.deviceInstance = this.deviceInstanceList[0].id
this.$nextTick()
.then(_ => {
document.getElementById(`instance${this.deviceInstanceList[0].id}`).click()
})
.catch(_ => {})
}
})
})
.catch(_ => {})
},
random(m, n) {
return Math.round(Math.random() * (m - n) + n)
},
setChartData(yField) {
return this.chartData.map(v => {
setChartData(yField, index) {
return this.chartData[index].map(v => {
return {
time: v.time,
value: parseInt(v[yField])
......@@ -211,41 +230,60 @@ export default {
})
},
createCharts() {
const form = `form${this.activeModel}`
this.$refs[form].validate()
.then(_ => {
this.chartData = []
this.chartList = []
const params = {
modelId: parseInt(this.activeModel),
instanceId: this.chartField.instanceId,
propertyCodeList: [...this.chartField.yFields]
// eslint-disable-next-line no-unused-vars
let count = 0
this.chartField.yFields.forEach(v => {
if (v.length) {
count += v.length
}
})
if (count > 0) {
const params = this.dataModelList.map((v, i) => {
return {
modelId: v.id,
deviceId: this.deviceInstance,
propertyCodeList: [...this.chartField.yFields[i]]
}
getModelInstanceChart(params)
.then(res => {
this.chartData = res.data.sort((a, b) => {
})
this.chartData = []
this.chartList = []
getModelInstanceChart(params)
.then(res => {
this.chartData = res.data.map(v => {
const data = v.dataList.sort((a, b) => {
return (a > b) ? 1 : -1
})
return [...data]
})
this.dataModelList.forEach((dataModel, i) => {
const arr = []
this.propertyList.forEach(v => {
const index = this.chartField.yFields.findIndex(item => item === v.propertyCode)
dataModel.propertyList.forEach(v => {
const index = this.chartField.yFields[i].findIndex(item => item === v.propertyCode)
index !== -1 && arr.push({ ...v })
})
this.chartList = [...arr]
this.chartList.push(arr)
})
.then(_ => {
this.timer && clearInterval(this.timer)
this.timer = setInterval(async() => {
const chartData = await getModelInstanceChart(params)
this.chartData = chartData.data.sort((a, b) => {
})
.then(_ => {
this.timer && clearInterval(this.timer)
this.timer = setInterval(async() => {
const chartData = await getModelInstanceChart(params)
// this.chartData = chartData.data.sort((a, b) => {
// return (a > b) ? 1 : -1
// })
this.chartData = chartData.data.map(v => {
const data = v.dataList.sort((a, b) => {
return (a > b) ? 1 : -1
})
this.count++
}, this.chartField.refresh * 1000)
})
.catch(_ => {})
})
.catch(err => console.error(err))
return [...data]
})
this.count++
}, this.chartField.refresh * 1000)
})
.catch(_ => {})
} else {
this.$message.warning('请至少选择 1 个属性')
}
}
}
}
......
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