Skip to content

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

add 历史查询

parent 68658eaa
Hide whitespace changes
Inline Side-by-side
Showing with 349 additions and 168 deletions
src/api/data-visible/query-history.js
View file @ 7b9f4e6f
...@@ -2,10 +2,10 @@ import request from '@/utils/request' ...@@ -2,10 +2,10 @@ 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 getTableData(data) { export function getModelHistory(data) {
return request({ return request({
url: `${baseURL}/cc/linque/getDatasetList`, url: `${baseURL}/iot/dashboard/modelHistory`,
method: 'post', method: 'post',
data data
}) })
......
src/components/Charts/ELine.vue
View file @ 7b9f4e6f
...@@ -39,6 +39,12 @@ export default { ...@@ -39,6 +39,12 @@ export default {
description: { description: {
type: String, type: String,
default: '' default: ''
},
config: {
type: Object,
default: () => {
return {}
}
} }
}, },
data() { data() {
...@@ -81,8 +87,7 @@ export default { ...@@ -81,8 +87,7 @@ export default {
}, },
initChart() { initChart() {
this.chart = echarts.init(document.getElementById(this.id)) this.chart = echarts.init(document.getElementById(this.id))
let config = {
this.chart.setOption({
title: { title: {
text: `${this.title}监控图表`, text: `${this.title}监控图表`,
subtext: `单位为: ${this.description}` subtext: `单位为: ${this.description}`
...@@ -100,7 +105,13 @@ export default { ...@@ -100,7 +105,13 @@ export default {
type: 'line', type: 'line',
data: [] data: []
}] }]
}) }
config = {
...config,
...this.config
}
this.chart.setOption(config)
} }
} }
} }
......
src/views/data-visible/query-history/index.vue
View file @ 7b9f4e6f
<template> <template>
<div> <el-card class="container">
<el-card class="no-bottom"> <el-row :gutter="20" class="content">
<el-form <el-col :xs="8" :sm="8" :md="6" :lg="4">
ref="searchForm" <div class="left">
:model="searchForm" <div class="search">
label-width="80px" <el-select
inline v-model="deviceType"
> style="width: 100%"
<el-form-item @change="onDeviceTypeChange"
label="input:"
prop="input"
>
<el-input v-model="searchForm.input" />
</el-form-item>
<el-form-item
label="status:"
prop="status"
>
<el-select v-model="searchForm.status" placeholder="请选择">
<el-option label="全部" :value="null" />
<el-option label="正常" :value="0" />
<el-option label="锁定" :value="1" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getTableData">查询</el-button>
<el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
</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>
<el-table
:data="tableData"
border
>
<el-table-column
type="index"
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="scope">
<el-button type="text" @click="editItem(scope.row)">编辑</el-button>
<el-popconfirm
title="确定要删除此条记录吗？"
style="margin-left: 10px"
@onConfirm="deleteItem(scope.row.id)"
> >
<el-button slot="reference" type="text">删除</el-button> <el-option
</el-popconfirm> v-for="item in deviceTypeList"
</template> :key="item.value"
</el-table-column> :label="item.label"
</el-table> :value="item.value"
>
<el-pagination </el-option>
class="margin-top-20 text-align-right" </el-select>
:current-page="pageForm.pageNum" </div>
:page-sizes="[10, 20, 50, 100]" <div class="custom-menu">
:page-size="pageForm.pageSize" <el-menu
layout="total, sizes, prev, pager, next, jumper" ref="customMenu"
:total="pageForm.total" @select="onInstanceSelect"
@size-change="handleSizeChange" >
@current-change="handleCurrentChange" <el-menu-item
/> v-for="(instance, index) in deviceInstanceList"
</el-card> :id="'instance' + instance.id"
:key="'instance' + index"
<el-dialog :index="instance.id.toString()"
:title="add ? '增加系统' : '编辑系统'" >{{ instance.name }}</el-menu-item>
:visible.sync="dialogVisible" </el-menu>
width="700px" </div>
> </div>
<el-form </el-col>
v-if="dialogVisible" <el-col :xs="16" :sm="16" :md="18" :lg="20">
:model="addForm" <el-form
label-width="90px" ref="form"
> :model="chartField"
<el-form-item inline
label="input:" label-position="top"
label-width="100px"
style="margin-top: 20px"
> >
<el-input v-model="addForm.input" /> <el-form-item
</el-form-item> label="属性:"
<el-form-item prop="yFields"
label="status:" >
<div class="data-model-container">
<div
v-for="(dataModel, index) in dataModelList"
:key="index + 400"
class="data-model-item"
>
<div class="data-model-name">
{{ dataModel.name }}:
</div>
<el-checkbox-group v-model="chartField.yFields[index]">
<el-checkbox
v-for="(prop, i) in dataModel.propertyList"
:key="200+i"
:label="prop.propertyCode"
>{{ prop.propertyName }}</el-checkbox>
</el-checkbox-group>
</div>
</div>
</el-form-item>
<el-form-item
label="查询范围:"
prop="startAndEndTime"
:rules="[{ type: 'array', required: true, message: '请选择时间范围', trigger: 'blur' }]"
>
<el-date-picker
v-model="chartField.startAndEndTime"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<el-button
type="primary"
style="margin-left: 20px"
@click="createCharts"
>查看图表</el-button>
</el-form-item>
</el-form>
<el-row
v-for="(chartGroup, index) in chartList"
:key="index + 1000"
:gutter="20"
> >
<el-input v-model="addForm.status" /> <el-col
</el-form-item> v-for="(chart) in chartGroup"
</el-form> :key="chart.id"
<span slot="footer" class="dialog-footer"> :span="12"
<el-button @click="dialogVisible = false">取 消</el-button> style="height: 400px"
<el-button type="primary" @click="saveSystem">确 定</el-button> >
</span> <e-line
</el-dialog> :id="'line-' + chart.propertyCode"
</div> :title="chart.propertyName"
:line-data="setChartData(chart.propertyCode, index)"
:description="chart.propertyUnit"
:config="lineConfig"
></e-line>
</el-col>
</el-row>
</el-col>
</el-row>
</el-card>
</template> </template>
<script> <script>
import { getTableData } from '@/api/data-visible/query-history' import ELine from '@/components/Charts/ELine'
import { getAllInstanceByDeviceTypeId } from '@/api/data-visible/dashboard'
import { getAllDeviceModel } from '@/api/equipment-management/equipment-instance'
import { getDataModelByDeviceTypeId } from '@/api/equipment-management/equipment-model'
import { getModelHistory } from '@/api/data-visible/query-history'
export default { export default {
name: 'QueryHistory', name: 'QueryHistory',
props: {}, components: {
ELine
},
data() { data() {
return { return {
searchForm: { chartField: {
input: null, yFields: [],
status: null refresh: 1,
startAndEndTime: []
}, },
add: true, dataModelList: [],
dialogVisible: false, deviceInstance: null,
tableData: [], modelList: [],
addForm: { objectId: '1',
input: null, defaultActive: null,
status: null timer: 0,
count: 0,
instanceList: [],
propertyList: [],
deviceType: null,
deviceTypeList: [],
deviceInstanceList: [],
chartData: [],
chartList: [],
rules: {
instanceId: [
{ required: true, message: '请选择实例', trigger: 'change' }
],
yFields: [
{ type: 'array', required: true, message: '请至少选择一个属性', trigger: 'change' }
]
}, },
pageForm: { lineConfig: {
pageSize: 10, dataZoom: [
pageNum: 1, {
total: 0 show: true,
realtime: true,
start: 65,
end: 85
},
{
type: 'inside',
realtime: true,
start: 65,
end: 85
}
]
} }
} }
}, },
created() {}, created() {
mounted() {}, // 初始化设备类型
getAllDeviceModel()
.then(res => {
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(_ => {})
},
methods: { methods: {
getTableData(pageNum) { onDeviceTypeChange(val) {
const params = { this.dataModelList = []
...this.searchForm, this.chartField = {
pageNum, yFields: [],
pageSize: this.pageForm.pageSize refresh: 1
} }
getTableData(params) this.chartList = []
.then(res => { this.chartData = []
const { records, totalSize } = res.data clearInterval(this.timer)
this.tableData = records this.getDataModelByDeviceTypeId(val)
this.pageForm.total = totalSize this.getAllInstanceByDeviceTypeId(val)
})
.catch(err => console.error(err))
}, },
resetForm() { onInstanceSelect(index) {
this.$refs.searchForm.resetFields() const id = parseInt(index)
const instance = this.deviceInstanceList.find(v => v.id === id)
if (instance.id !== this.deviceInstance) {
this.deviceInstance = instance.id
this.chartField.refresh = 1
const length = this.chartField.yFields.length
this.chartField.yFields = [...new Array(length).fill([])]
this.chartList = []
this.chartData = []
clearInterval(this.timer)
}
}, },
addRow() { getDataModelByDeviceTypeId(id) {
this.add = true getDataModelByDeviceTypeId({ id })
this.dialogVisible = true .then(res => {
this.dataModelList = []
this.chartField.yFields = []
this.dataModelList = res.data
this.dataModelList.forEach(v => {
this.chartField.yFields.push([])
})
})
.catch(_ => {})
}, },
editItem() { getAllInstanceByDeviceTypeId(val) {
this.add = false getAllInstanceByDeviceTypeId({ deviceTypeId: val })
this.dialogVisible = true .then(res => {
this.deviceInstanceList = res.data
})
.then(_ => {
if (this.deviceInstanceList.length) {
this.deviceInstance = this.deviceInstanceList[0].id
this.$nextTick()
.then(_ => {
document.getElementById(`instance${this.deviceInstanceList[0].id}`).click()
})
.catch(_ => {})
}
})
.catch(_ => {})
}, },
deleteItem(id) {}, setChartData(yField, index) {
saveSystem() {}, return this.chartData[index].map(v => {
handleSizeChange(val) { return {
this.pageForm.pageSize = val time: v.time,
this.getTableData(1) value: parseInt(v[yField])
}
})
}, },
handleCurrentChange(val) { createCharts() {
this.pageForm.pageNum = val // eslint-disable-next-line no-unused-vars
this.getTableData(val) let count = 0
this.chartField.yFields.forEach(v => {
if (v.length) {
count += v.length
}
})
if (count > 0) {
this.$refs.form.validate()
.then(_ => {
this.chartData = []
this.chartList = []
const dashboardReqList = this.dataModelList.map((v, i) => {
return {
modelId: v.id,
deviceId: this.deviceInstance,
propertyCodeList: [...this.chartField.yFields[i]]
}
})
return {
beginTime: this.chartField.startAndEndTime[0].getTime(),
endTime: this.chartField.startAndEndTime[1].getTime(),
dashboardReqList
}
})
.then(params => getModelHistory(params))
.then(res => {
this.dataModelList.forEach((dataModel, i) => {
const arr = []
dataModel.propertyList.forEach(v => {
const index = this.chartField.yFields[i].findIndex(item => item === v.propertyCode)
index !== -1 && arr.push({ ...v })
})
this.chartList.push(arr)
})
this.chartData = res.data.map(v => {
return [...v.dataList]
})
})
.then(_ => this.$nextTick())
.then(_ => {
this.chartData = [...this.chartData]
})
.catch(_ => {})
} else {
this.$message.warning('请至少选择 1 个属性')
}
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container{
min-height: calc(100vh - 95px);
.content{
display: flex;
min-height: calc(100vh - 135px);
.left{
width: 100%;
height: 100%;
.search{
height: 40px;
}
.custom-menu{
background-color: #efeff1;
height: calc(100% - 40px);
.el-menu{
background-color: initial;
border-right: none;
border-top: solid 1px #e6e6e6;
border-left: solid 1px #e6e6e6;
.el-menu-item.el-menu-item{
min-width: initial;
background-color: #efeff1;
}
.el-menu-item.is-active{
background-color: #fff;
color: #303133;
}
}
}
}
.top{
display: flex;
justify-content: space-between;
}
.data-model-container{
display: flex;
.data-model-item{
display: flex;
.data-model-name{
margin-right: 20px;
margin-left: 20px;
}
}
.data-model-item:first-of-type{
.data-model-name{
margin-left: 0;
}
}
.data-model-item:last-of-type{
margin-right: 20px;
}
}
}
}
</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