Skip to content

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

add 设备实例详情 数据模型详情

parent 234c0222
Hide whitespace changes
Inline Side-by-side
Showing with 140 additions and 53 deletions
src/api/equipment-management/device-instance.js
View file @ cfb51cf1
......@@ -37,3 +37,21 @@ export function deleteDeviceInstance(data) {
data
})
}
// 获取设备实例详情
export function getDeviceInstanceDetail(data) {
return request({
url: `${baseURL}/iot/deviceModel/instance/detail`,
method: 'post',
data
})
}
// 获取属性信息
export function getPropertyDetail(data) {
return request({
url: `${baseURL}/iot/deviceModel/data/getDataByModel`,
method: 'post',
data
})
}
src/views/device-management/device-detail/index.vue
View file @ cfb51cf1
......@@ -40,47 +40,45 @@
</descriptions>
</el-card>
<el-card class="margin-top-20">
<div slot="header" class="clearfix">
<div slot="header">
<span>设备信息</span>
<el-button style="float: right; padding: 3px 0" type="text">2020-08-12 12:22:21</el-button>
</div>
<descriptions
label-position="right"
label-width="140px"
>
<descriptions-item label="型号" value="AKB48" />
<descriptions-item label="健康状态" value="健康" />
<descriptions-item label="运行状态" value="运行中" />
<descriptions-item label="上次启动时间" value="2020-08-12 12:22:21" />
<descriptions-item label="运行时长" value="1d 27h 13m 21s" />
<descriptions-item label="描述" value="非常贵的设备" />
<descriptions-item label="设备名称" :value="deviceInstance.name" />
<descriptions-item label="运行状态" :value="$_dictionaryFormat(deviceInstance.onlineState, 'onlineState')" />
<descriptions-item label="设备型号" :value="deviceInstance.deviceModel" />
<descriptions-item label="业务ID" :value="deviceInstance.businessId" />
<descriptions-item label="描述" :value="deviceInstance.description" />
</descriptions>
</el-card>
<el-card class="margin-top-20">
<el-tabs v-model="secondActiveName">
<el-tab-pane label="模型一" name="first">
<descriptions
label-position="right"
label-width="140px"
>
<descriptions-item label="温度" value="20 摄氏度" />
<descriptions-item label="湿度" value="70%" />
<descriptions-item label="压力" value="2500 帕斯卡" />
<descriptions-item label="转子转速" value="1250 rpm/m" />
</descriptions>
</el-tab-pane>
<el-tab-pane label="模型二" name="second">
<div slot="header">
<span>数据模型</span>
</div>
<el-tabs v-if="dataModelList.length" v-model="activeDataModel" @tab-click="onTabClick">
<el-tab-pane
v-for="(dataModel, index) in dataModelList"
:key="index"
:label="dataModel.name"
:name="dataModel.name"
>
<descriptions
label-position="right"
label-width="140px"
>
<descriptions-item label="温度" value="20 摄氏度" />
<descriptions-item label="湿度" value="70%" />
<descriptions-item label="压力" value="2500 帕斯卡" />
<descriptions-item label="转子转速" value="1250 rpm/m" />
<descriptions-item
v-for="(property, index) in propertyList"
:key="index"
:label="property.propertyName"
:value="`${property.propertyValue} ${property.propertyUnit}`"
/>
</descriptions>
</el-tab-pane>
</el-tabs>
<div v-else class="el-table__empty-text" style="text-align: center;margin: 0 auto">暂无数据</div>
</el-card>
</div>
</template>
......@@ -89,22 +87,33 @@
import { getAllInstanceByDeviceTypeId } from '@/api/data-visible/dashboard'
import { getDataModelByDeviceTypeId } from '@/api/equipment-management/equipment-model'
import { getAllDeviceModel } from '@/api/equipment-management/equipment-instance'
import { getDeviceInstanceDetail, getPropertyDetail } from '@/api/equipment-management/device-instance'
import dictionary from '@/utils/dictionary'
export default {
name: 'DeviceMonitoring',
mixins: [
dictionary
],
data() {
return {
form: {
deviceType: null,
deviceInstance: null
},
activeName: 'first',
secondActiveName: 'first',
activeDataModel: '',
deviceTypeList: [],
deviceInstanceList: [],
dataModelList: [],
propertyList: [],
activeProperty: null
activeProperty: null,
deviceInstance: {
businessId: null,
description: null,
name: null,
onlineState: null,
deviceModel: null
}
}
},
computed: {
......@@ -132,13 +141,31 @@ export default {
this.form.deviceType = deviceTypeId || (this.deviceTypeList.length ? this.deviceTypeList[0].id : null)
this.getAllInstanceByDeviceTypeId(this.form.deviceType, deviceInstanceId)
this.getDataModelByDeviceTypeId(this.form.deviceType)
this.getDeviceInstanceDetail(this.form.deviceType)
})
.catch(_ => {})
},
methods: {
onTabClick() {
const dataModel = this.dataModelList.find(v => v.name === this.activeDataModel)
this.getPropertyDetail(dataModel.id, this.form.deviceInstance)
},
getDeviceInstanceDetail(id) {
getDeviceInstanceDetail({ id })
.then(res => {
const { businessId, description, name, onlineState, deviceModel } = res.data.deviceInstance
this.deviceInstance = {
businessId,
description,
name,
onlineState,
deviceModel
}
})
.catch(_ => {})
},
onDeviceTypeChange(val) {
this.getAllInstanceByDeviceTypeId(val)
this.getDataModelByDeviceTypeId(val)
},
getAllInstanceByDeviceTypeId(val, deviceInstanceId) {
getAllInstanceByDeviceTypeId({ deviceTypeId: val })
......@@ -159,15 +186,23 @@ export default {
.then(res => {
this.dataModelList = res.data
if (this.dataModelList.length) {
this.propertyList = this.dataModelList[0].propertyList
if (this.propertyList.length) {
this.activeProperty = this.propertyList[0].propertyCode
}
this.activeDataModel = this.dataModelList[0].name
this.getPropertyDetail(this.dataModelList[0].id, this.form.deviceInstance)
}
})
.catch(_ => {})
},
queryData() {}
getPropertyDetail(dataModelId, deviceId) {
getPropertyDetail({ dataModelId, deviceId })
.then(res => {
this.propertyList = res.data.propertyList
})
.catch(_ => {})
},
queryData() {
this.getDataModelByDeviceTypeId(this.form.deviceType)
this.getDeviceInstanceDetail(this.form.deviceType)
}
}
}
</script>
......
src/views/device-management/device-monitoring/index.vue
View file @ cfb51cf1
......@@ -53,34 +53,29 @@
<el-card class="margin-top-20">
<div slot="header" class="clearfix">
<span>设备信息</span>
<el-button style="float: right; padding: 3px 0" type="text">2020-08-12 12:22:21</el-button>
</div>
<descriptions
label-position="right"
label-width="140px"
>
<descriptions-item label="型号" value="AKB48" />
<descriptions-item label="健康状态" value="健康" />
<descriptions-item label="运行状态" value="运行中" />
<descriptions-item label="上次启动时间" value="2020-08-12 12:22:21" />
<descriptions-item label="运行时长" value="1d 27h 13m 21s" />
<descriptions-item label="描述" value="非常贵的设备" />
<descriptions-item label="设备名称" :value="deviceInstance.name" />
<descriptions-item label="运行状态" :value="$_dictionaryFormat(deviceInstance.onlineState, 'onlineState')" />
<descriptions-item label="设备型号" :value="deviceInstance.deviceModel" />
<descriptions-item label="业务ID" :value="deviceInstance.businessId" />
<descriptions-item label="描述" :value="deviceInstance.description" />
</descriptions>
</el-card>
<el-card class="margin-top-20">
<div slot="header" class="clearfix">
<span>模型数据</span>
<el-button style="float: right; padding: 3px 0" type="text">2020-08-12 12:22:21</el-button>
<el-button style="float: right; padding: 3px 0" type="text">{{ $moment(dataModelReportTime, 'YYYY-MM-DD HH:mm:ss') }}</el-button>
</div>
<descriptions
label-position="right"
label-width="140px"
>
<descriptions-item label="温度" value="20 摄氏度" />
<descriptions-item label="湿度" value="70%" />
<descriptions-item label="压力" value="2500 帕斯卡" />
<descriptions-item label="转子转速" value="1250 rpm/m" />
</descriptions>
<descriptions-item
v-for="(property, index) in dataModelDetail"
:key="index"
:label="property.propertyName"
:value="`${property.propertyValue} ${property.propertyUnit}`"
/>
</el-card>
<el-card class="margin-top-20">
<div v-if="!propertyList.length" slot="header" class="clearfix">
......@@ -113,12 +108,17 @@ import { getAllInstanceByDeviceTypeId } from '@/api/equipment-management/equipme
import { getDataModelByDeviceTypeId } from '@/api/equipment-management/equipment-model'
import { getModelInstanceChart } from '@/api/device-management/device-monitoring'
import ELine from '@/components/Charts/ELine'
import { getDeviceInstanceDetail, getPropertyDetail } from '@/api/equipment-management/device-instance'
import dictionary from '@/utils/dictionary'
export default {
name: 'DeviceDetail',
name: 'DeviceMonitoring',
components: {
ELine
},
mixins: [
dictionary
],
data() {
return {
form: {
......@@ -150,7 +150,16 @@ export default {
activeProperty: null,
deviceTypeList: [],
tableData: [],
timer: 0
timer: 0,
deviceInstance: {
businessId: null,
description: null,
name: null,
onlineState: null,
deviceModel: null
},
dataModelDetail: [],
dataModelReportTime: null
}
},
watch: {
......@@ -195,6 +204,7 @@ export default {
const deviceInstanceList = await getAllInstanceByDeviceTypeId({ deviceTypeId: this.form.deviceType })
this.deviceInstanceList = deviceInstanceList.data
this.form.deviceInstance = deviceInstanceId || (this.deviceInstanceList.length ? this.deviceInstanceList[0].id : null)
await this.getDeviceInstanceDetail(this.form.deviceType)
// 根据设备类型 ID 获取关联数据模型
const dataModelList = await getDataModelByDeviceTypeId({ id: this.form.deviceType })
this.dataModelList = dataModelList.data
......@@ -215,6 +225,7 @@ export default {
if (this.propertyList.length) {
this.activeProperty = this.propertyList[0].propertyCode
}
this.getDeviceInstanceDetail(this.form.deviceInstance)
return [{
modelId: this.form.dataMode,
deviceId: this.form.deviceInstance,
......@@ -234,6 +245,7 @@ export default {
.then(params => {
this.timer && clearInterval(this.timer)
this.timer = setInterval(async() => {
await this.getPropertyDetail(this.form.dataMode, this.form.deviceInstance)
const chartData = await getModelInstanceChart(params)
this.tableData = chartData.data[0].dataList
this.property.data = [...this.getChartData(this.activeProperty)]
......@@ -241,6 +253,28 @@ export default {
})
.catch(_ => {})
},
getDeviceInstanceDetail(id) {
getDeviceInstanceDetail({ id })
.then(res => {
const { businessId, description, name, onlineState, deviceModel } = res.data.deviceInstance
this.deviceInstance = {
businessId,
description,
name,
onlineState,
deviceModel
}
})
.catch(_ => {})
},
getPropertyDetail(dataModelId, deviceId) {
getPropertyDetail({ dataModelId, deviceId })
.then(res => {
this.dataModelDetail = res.data.propertyList
this.dataModelReportTime = res.data.reportTime
})
.catch(_ => {})
},
onDeviceTypeChange(val) {
this.form.deviceInstance = null
this.form.dataMode = null
......
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