Skip to content

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

update 仪表盘

parent a387c6b8
Hide whitespace changes
Inline Side-by-side
Showing with 159 additions and 81 deletions
src/views/data-visible/dashboard/index.vue
View file @ 01ed96ad
<template> <template>
<el-card class="container"> <el-card class="container">
<el-tabs <el-row :gutter="20" class="content">
v-model="activeModel" <el-col :xs="8" :sm="8" :md="6" :lg="4">
tab-position="left" <div class="left">
@tab-click="onTabClick" <div class="search">
> <el-select v-model="eModel" style="width: 100%">
<el-tab-pane <el-option
v-for="(model, index) in modelList" v-for="item in eModelList"
:key="index" :key="item.value"
:label="model.name" :label="item.label"
:name="model.id.toString()" :value="item.value"
>
<div v-if="activeModel === model.id.toString()">
<el-form
:ref="'form'+activeModel"
: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">
<el-checkbox
v-for="(prop, i) in propertyList"
:key="200+i"
:label="prop.propertyCode"
>{{ prop.propertyName }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</div>
<div>
<el-form-item label="时间轴:">
Timestamp
</el-form-item>
<el-form-item
label="刷新时间(秒):"
> >
<el-input-number </el-option>
v-model.number="chartField.refresh" </el-select>
:min="1" </div>
:max="10" <div class="custom-menu">
label="单位秒" <el-menu
/> ref="customMenu"
</el-form-item> default-active="1"
<el-form-item>
<el-button
type="primary"
@click="createCharts"
>生成图表</el-button>
</el-form-item>
</div>
</el-form>
<el-row :gutter="20">
<el-col
v-for="(chart) in chartList"
:key="chart.id"
:span="12"
style="height: 400px"
> >
<e-line <el-menu-item
:id="'line-' + chart.propertyCode" v-for="(model, index) in eInstanceList"
:title="chart.propertyName" :key="'model' + index"
:line-data="setChartData(chart.propertyCode)" :index="model.id.toString()"
:description="chart.propertyUnit" >{{ model.name }}</el-menu-item>
></e-line> </el-menu>
</el-col> </div>
</el-row>
</div> </div>
</el-tab-pane> </el-col>
</el-tabs> <el-col :xs="16" :sm="16" :md="18" :lg="20">
<el-form
:ref="'form'+activeModel"
: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">
<el-checkbox
v-for="(prop, i) in propertyList"
:key="200+i"
:label="prop.propertyCode"
>{{ prop.propertyName }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
</div>
<div>
<el-form-item label="时间轴:">
Timestamp
</el-form-item>
<el-form-item
label="刷新时间(秒):"
>
<el-input-number
v-model.number="chartField.refresh"
:min="1"
:max="10"
label="单位秒"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="createCharts"
>生成图表</el-button>
</el-form-item>
</div>
</el-form>
<el-row :gutter="20">
<el-col
v-for="(chart) in chartList"
:key="chart.id"
:span="12"
style="height: 400px"
>
<e-line
:id="'line-' + chart.propertyCode"
:title="chart.propertyName"
:line-data="setChartData(chart.propertyCode)"
:description="chart.propertyUnit"
></e-line>
</el-col>
</el-row>
</el-col>
</el-row>
</el-card> </el-card>
</template> </template>
...@@ -108,6 +124,35 @@ export default { ...@@ -108,6 +124,35 @@ export default {
count: 0, count: 0,
instanceList: [], instanceList: [],
propertyList: [], propertyList: [],
eModel: 1,
eModelList: [
{
value: 1,
label: '设备模型一'
},
{
value: 2,
label: '设备模型二'
}
],
eInstanceList: [
{
id: 1,
name: '设备实例一'
},
{
id: 2,
name: '设备实例二'
},
{
id: 3,
name: '设备实例三'
},
{
id: 4,
name: '设备实例四'
}
],
chartData: [], chartData: [],
chartList: [], chartList: [],
rules: { rules: {
...@@ -167,7 +212,7 @@ export default { ...@@ -167,7 +212,7 @@ export default {
}, },
createCharts() { createCharts() {
const form = `form${this.activeModel}` const form = `form${this.activeModel}`
this.$refs[form][0].validate() this.$refs[form].validate()
.then(_ => { .then(_ => {
this.chartData = [] this.chartData = []
this.chartList = [] this.chartList = []
...@@ -208,6 +253,39 @@ export default { ...@@ -208,6 +253,39 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.container{ .container{
min-height: calc(100vh - 90px); 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;
}
}
} }
</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