fuguobin
1 year ago
11 changed files with 206 additions and 73 deletions
@ -0,0 +1,14 @@ |
|||
.details { |
|||
padding: 1.5rem; |
|||
.search { |
|||
margin-bottom: 1.5rem; |
|||
} |
|||
.echart { |
|||
.comparisonInfo { |
|||
.stackedLine { |
|||
width: 100%; |
|||
height: 500px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,62 +1,187 @@ |
|||
<template> |
|||
<div class="roleContainer"> |
|||
<div class="details"> |
|||
<el-card class="search" shadow="always"> |
|||
<el-form ref="queryFormRef" :model="searchForm" :inline="true"> |
|||
<el-form-item label="关键字" prop="keywords"> |
|||
<el-input |
|||
v-model="searchForm.keywords" |
|||
clearable |
|||
style="width: 200px" |
|||
placeholder="用户名/昵称/手机号" |
|||
@keyup.enter="getUserData" |
|||
<el-form ref="searchRef" :inline="true" :model="searchForm" label-width="100px" class="demo-ruleForm"> |
|||
<el-form-item label="时间" prop="time"> |
|||
<el-date-picker |
|||
v-model="searchForm.time" |
|||
type="datetimerange" |
|||
start-placeholder="开始时间" |
|||
end-placeholder="结束时间" |
|||
:default-time="defaultTime1" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="颗粒度" prop="particle"> |
|||
<el-select v-model="searchForm.particle" placeholder="请选择"> |
|||
<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="设备" prop="device"> |
|||
<el-select v-model="searchForm.device" placeholder="请选择"> |
|||
<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="参数" prop="parameter"> |
|||
<el-select v-model="searchForm.parameter" placeholder="请选择"> |
|||
<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="getUserData"><i-ep-search />搜索</el-button> |
|||
<el-button @click="resetClick"><i-ep-refresh />重置</el-button> |
|||
<el-button type="primary" @click="submitForm(searchRef)">确认</el-button> |
|||
<el-button @click="resetForm(searchRef)">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-card> |
|||
<el-card class="list" shadow="always"> 内容 </el-card> |
|||
<el-card class="echart" shadow="always"> |
|||
<div class="comparisonInfo"> |
|||
<div ref="stackedRef" class="stackedLine" /> |
|||
</div> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
// import { getRolePage } from '@/api/role'; |
|||
// import { listMenuOptions } from '@/api/menu'; |
|||
// import { RolePageVO, RoleForm, RoleQuery } from '@/api/role/types'; |
|||
|
|||
// const queryFormRef = ref(ElForm); |
|||
// const roleData = ref<RolePageVO[]>(); |
|||
// const searchForm = reactive<RoleQuery>({ |
|||
// pageNum: 1, |
|||
// pageSize: 10 |
|||
// }); |
|||
import * as echarts from 'echarts'; |
|||
import { Ref } from 'vue'; |
|||
const stackedRef: Ref<HTMLElement | any> = ref(null); |
|||
import type { FormInstance } from 'element-plus'; |
|||
|
|||
onMounted(() => { |
|||
// getUserData(); |
|||
const searchRef = ref<FormInstance>(); |
|||
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00' |
|||
const searchForm = reactive({ |
|||
time: '', |
|||
particle: '', |
|||
device: '', |
|||
parameter: '' |
|||
}); |
|||
|
|||
//列表数据 |
|||
// function getUserData() { |
|||
// loading.value = true; |
|||
// getRolePage(searchForm) |
|||
// .then(({ data }) => { |
|||
// // roleData.value = data.list; |
|||
// }) |
|||
// .finally(() => { |
|||
// loading.value = false; |
|||
// }); |
|||
// } |
|||
const submitForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return; |
|||
formEl.validate(valid => { |
|||
if (valid) { |
|||
console.log('submit!'); |
|||
} else { |
|||
console.log('error submit!'); |
|||
return false; |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
//搜索 |
|||
// function resetClick() { |
|||
// queryFormRef.value.resetFields(); |
|||
// searchForm.pageNum = 1; |
|||
// getUserData(); |
|||
// } |
|||
</script> |
|||
const resetForm = (formEl: FormInstance | undefined) => { |
|||
if (!formEl) return; |
|||
formEl.resetFields(); |
|||
}; |
|||
const optionss = [ |
|||
{ |
|||
value: 'Option1', |
|||
label: 'Option1' |
|||
}, |
|||
{ |
|||
value: 'Option2', |
|||
label: 'Option2' |
|||
}, |
|||
{ |
|||
value: 'Option3', |
|||
label: 'Option3' |
|||
}, |
|||
{ |
|||
value: 'Option4', |
|||
label: 'Option4' |
|||
}, |
|||
{ |
|||
value: 'Option5', |
|||
label: 'Option5' |
|||
} |
|||
]; |
|||
|
|||
const options = { |
|||
title: { |
|||
text: 'Temperature Change in the Coming Week' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis' |
|||
}, |
|||
legend: {}, |
|||
toolbox: { |
|||
show: true, |
|||
feature: { |
|||
dataZoom: { |
|||
yAxisIndex: 'none' |
|||
}, |
|||
dataView: { readOnly: false }, |
|||
magicType: { type: ['line', 'bar'] }, |
|||
restore: {}, |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
axisLabel: { |
|||
formatter: '{value} °C' |
|||
} |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: 'Highest', |
|||
type: 'line', |
|||
data: [10, 11, 13, 11, 12, 12, 9], |
|||
markPoint: { |
|||
data: [ |
|||
{ type: 'max', name: 'Max' }, |
|||
{ type: 'min', name: 'Min' } |
|||
] |
|||
}, |
|||
markLine: { |
|||
data: [{ type: 'average', name: 'Avg' }] |
|||
} |
|||
}, |
|||
{ |
|||
name: 'Lowest', |
|||
type: 'line', |
|||
data: [1, -2, 2, 5, 3, 2, 0], |
|||
markPoint: { |
|||
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }] |
|||
}, |
|||
markLine: { |
|||
data: [ |
|||
{ type: 'average', name: 'Avg' }, |
|||
[ |
|||
{ |
|||
symbol: 'none', |
|||
x: '90%', |
|||
yAxis: 'max' |
|||
}, |
|||
{ |
|||
symbol: 'circle', |
|||
label: { |
|||
position: 'start', |
|||
formatter: 'Max' |
|||
}, |
|||
type: 'max', |
|||
name: '最高点' |
|||
} |
|||
] |
|||
] |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// 图表初始化 |
|||
const chart = echarts.init(stackedRef.value); |
|||
chart.setOption(options); |
|||
|
|||
// 大小自适应 |
|||
window.addEventListener('resize', () => { |
|||
chart.resize(); |
|||
}); |
|||
}); |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import './index.scss'; |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue