Skip to content

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

update dashboard views

parent e3efdf33
Show whitespace changes
Inline Side-by-side
Showing with 290 additions and 160 deletions
src/api/object-visible/dashboard.js
View file @ 7f525e99
...@@ -2,10 +2,28 @@ import request from '@/utils/request' ...@@ -2,10 +2,28 @@ import request from '@/utils/request'
// const baseURL = process.env.VUE_APP_BASE_API // const baseURL = process.env.VUE_APP_BASE_API
const baseURL = '' const baseURL = ''
// 获取数据集列表-分页 // 获取所有模型列表
export function getDatasetList(data) { export function getAllModel(data) {
return request({ return request({
url: `${baseURL}/cc/linque/getDatasetList`, url: `${baseURL}/iot/model/all`,
method: 'post',
data
})
}
// 获取模型详情
export function getModelDetail(data) {
return request({
url: `${baseURL}/iot/model/detail`,
method: 'post',
data
})
}
// 获取指定模型的实例列表
export function getModelInstanceList(data) {
return request({
url: `${baseURL}/iot/model/getModelInstanceList`,
method: 'post', method: 'post',
data data
}) })
......
src/components/G2Plot/G2Line.vue
View file @ 7f525e99
<template> <template>
<div ref="line" style="background-color: #fff;height: 100%;width: 100%"/> <div :ref="id" style="height: 100%;width: 100%" />
</template> </template>
<script> <script>
import { Line } from '@antv/g2plot' import { Line } from '@antv/g2plot'
export default { export default {
name: "G2Line", name: 'G2Line',
props: {
id: {
type: String,
default: 'line'
},
lineData: {
type: Array,
default: () => {
return []
}
},
title: {
type: String,
default: 'line'
}
},
data() { data() {
return { return {
line: null line: null
} }
}, },
watch: {
lineData: function(val) {
this.line.changeData(val)
}
},
mounted() { mounted() {
const el = this.$refs.line const el = this.$refs[this.id]
this.line = new Line(el, { this.line = new Line(el, {
data: [], data: this.lineData,
title: { title: {
visible: true, visible: true,
text: '折线图' text: this.title
}, },
description: { description: {
visible: true, visible: true,
......
src/views/object-visible/dashboard/components/ObjectPanel.vue 0 → 100644
View file @ 7f525e99
<template>
<div>
<el-radio-group v-model="objectId">
<el-radio
v-for="(object, index) in objectList"
:key="index"
:label="object.id"
>{{ object.name }}</el-radio>
</el-radio-group>
</div>
</template>
<script>
export default {
name: 'ObjectPanel',
props: {
id: {
type: [Number, String],
default: 0
}
},
data() {
return {
objectList: [
{
name: 'object1',
id: '1'
},
{
name: 'object2',
id: '2'
}
],
objectId: '1',
propIds: []
}
},
watch: {
id(val) {
console.log(val)
}
}
}
</script>
<style scoped>
</style>
src/views/object-visible/dashboard/components/PropPanel.vue 0 → 100644
View file @ 7f525e99
<template>
<el-checkbox-group v-model="propIds">
<el-checkbox label="temperature">温度</el-checkbox>
<el-checkbox label="humidity">湿度</el-checkbox>
<el-checkbox label="power">功率</el-checkbox>
</el-checkbox-group>
</template>
<script>
export default {
name: 'PropPanel',
props: {
id: {
type: [Number, String],
default: 0
},
yFields: {
type: Array,
default: () => {
return []
}
},
list: {
type: Array,
default: () => {
return []
}
}
},
data() {
return {
propIds: []
}
},
watch: {
propIds: function(val) {
this.$emit('update:yFields', val)
}
}
}
</script>
<style scoped>
</style>
src/views/object-visible/dashboard/index.vue
View file @ 7f525e99
<template> <template>
<div> <el-card class="container">
<el-card class="no-bottom"> <el-tabs
v-model="activeModel"
tab-position="left"
@tab-click="onTabClick"
>
<el-tab-pane
v-for="(model, index) in modelList"
:key="index"
:label="model.name"
:name="model.id.toString()"
>
<div v-if="activeModel === model.id.toString()">
<el-form <el-form
ref="searchForm" :model="chartField"
:model="searchForm"
label-width="80px"
inline inline
label-width="100px"
style="margin-top: 20px"
> >
<el-form-item <div>
label="input:" <el-form-item label="选择实例：">
prop="input" <el-radio-group v-model="chartField.instanceId">
> <el-radio
<el-input v-model="searchForm.input" /> 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轴:">
<el-checkbox-group v-model="chartField.yFields">
<el-checkbox
v-for="(prop, i) in propertyList"
:key="200+i"
:label="prop.id"
>{{ prop.propertyName }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</div>
<div>
<el-form-item label="时间轴:">
Timestamp
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="status:" label="刷新时间(秒):"
prop="status"
> >
<el-select v-model="searchForm.status" placeholder="请选择"> <el-input-number
<el-option label="全部" :value="null" /> v-model.number="chartField.refresh"
<el-option label="正常" :value="0" /> :min="1"
<el-option label="锁定" :value="1" /> :max="10"
</el-select> label="单位秒"
/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getTableData">查询</el-button> <el-button
<el-button icon="el-icon-refresh" @click="resetForm">重置</el-button> type="primary"
@click="createCharts"
>生成图表</el-button>
</el-form-item> </el-form-item>
</el-form>
</el-card>
<el-card class="margin-top-20">
<div class="buttons-group margin-bottom-20">
<el-button type="primary" icon="el-icon-plus" @click="addRow">增加系统</el-button>
</div> </div>
</el-form>
<el-table <el-row :gutter="20">
:data="tableData" <el-col
border v-for="(chart, index) in charts"
> :key="100 + index"
<el-table-column :span="12"
type="index" style="height: 400px"
label="序号"
width="50px"
align="center"
/>
<el-table-column
prop="a"
label="a"
/>
<el-table-column
prop="b"
label="b"
/>
<el-table-column
prop="c"
label="c"
/>
<el-table-column
prop="d"
label="d"
/>
<el-table-column
label="操作"
width="140px"
align="center"
>
<template slot-scope="props">
<el-button v-permission="'SysMgr_update'" type="text" @click="editItem(props.row)">编辑</el-button>
<el-popconfirm
title="确定要删除此条记录吗？"
@onConfirm="deleteItem(props.row.id)"
> >
<el-button slot="reference" type="text">删除</el-button> <g2-line
</el-popconfirm> :id="'line-' + index"
</template> :title="chart"
</el-table-column> :line-data="setChartData(chart)"
</el-table> style="min-width: 500px;height: 400px"
<el-pagination
class="margin-top-20 text-align-right"
:current-page="pageForm.pageNum"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageForm.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageForm.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/> />
</el-card> </el-col>
</el-row>
<el-dialog
:title="add ? '增加系统' : '编辑系统'"
:visible.sync="dialogVisible"
width="700px"
>
<el-form
:model="addForm"
label-width="90px"
>
<el-form-item
label="input:"
>
<el-input v-model="addForm.input" />
</el-form-item>
<el-form-item
label="status:"
>
<el-input v-model="addForm.status" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveSystem">确 定</el-button>
</span>
</el-dialog>
</div> </div>
</el-tab-pane>
</el-tabs>
</el-card>
</template> </template>
<script> <script>
import G2Line from '@/components/G2Plot/G2Line'
import { getAllModel, getModelDetail, getModelInstanceList } from '@/api/object-visible/dashboard'
export default { export default {
name: 'Dashboard', name: 'Dashboard',
props: {}, components: {
G2Line
},
data() { data() {
return { return {
searchForm: { chartField: {
input: null, instanceId: null,
status: null yFields: [],
refresh: 1
}, },
add: true, activeModel: null,
dialogVisible: false, modelList: [],
tableData: [], objectId: '1',
addForm: { lineData: [],
input: null, chartData: [],
status: null timer: 0,
}, count: 0,
pageForm: { instanceList: [],
pageSize: 10, propertyList: [],
pageNum: 1, charts: []
total: 0
} }
},
created() {
getAllModel()
.then(res => {
this.modelList = res.data
if (this.modelList.length > 0) {
this.activeModel = this.modelList[0].id.toString()
this.getDetail(parseInt(this.activeModel))
} }
})
.catch(err => console.error(err))
}, },
created() {}, mounted() {
mounted() {}, // this.timer = setInterval(() => {
methods: { // this.chartData.push({
getTableData(pageNum) {}, // time: new Date().getTime(),
resetForm() { // value: {
this.$refs.searchForm.resetFields() // power: this.random(100, 120),
// temperature: this.random(20, 30),
// humidity: this.random(200, 300)
// }
// })
// this.count++
// }, this.chartField.refresh * 1000)
}, },
addRow() { beforeDestroy() {
this.add = true clearInterval(this.timer)
this.dialogVisible = true
}, },
editItem() { methods: {
this.add = false onTabClick() {
this.dialogVisible = true this.getDetail(parseInt(this.activeModel))
},
getDetail(id) {
Promise.all([getModelInstanceList({ id }), getModelDetail({ id })])
.then(res => {
const [res1, res2] = res
this.instanceList = res1.data
this.propertyList = res2.data.propertyList
})
.catch(err => console.error(err))
}, },
deleteItem(id) {}, random(m, n) {
saveSystem() {}, return Math.round(Math.random() * (m - n) + n)
handleSizeChange(val) {
this.pageForm.pageSize = val
this.getTableData(1)
}, },
handleCurrentChange(val) { setChartData(yField) {
this.pageForm.pageNum = val return this.chartData.map(v => {
this.getTableData(val) return {
time: v.time,
value: v.value[yField]
} }
})
},
createCharts() {}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container{
min-height: calc(100vh - 125px);
}
</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