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> |
<template> |
||||
<div class="roleContainer"> |
<div class="details"> |
||||
<el-card class="search" shadow="always"> |
<el-card class="search" shadow="always"> |
||||
<el-form ref="queryFormRef" :model="searchForm" :inline="true"> |
<el-form ref="searchRef" :inline="true" :model="searchForm" label-width="100px" class="demo-ruleForm"> |
||||
<el-form-item label="关键字" prop="keywords"> |
<el-form-item label="时间" prop="time"> |
||||
<el-input |
<el-date-picker |
||||
v-model="searchForm.keywords" |
v-model="searchForm.time" |
||||
clearable |
type="datetimerange" |
||||
style="width: 200px" |
start-placeholder="开始时间" |
||||
placeholder="用户名/昵称/手机号" |
end-placeholder="结束时间" |
||||
@keyup.enter="getUserData" |
:default-time="defaultTime1" |
||||
/> |
/> |
||||
</el-form-item> |
</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-form-item> |
||||
<el-button type="primary" @click="getUserData"><i-ep-search />搜索</el-button> |
<el-button type="primary" @click="submitForm(searchRef)">确认</el-button> |
||||
<el-button @click="resetClick"><i-ep-refresh />重置</el-button> |
<el-button @click="resetForm(searchRef)">重置</el-button> |
||||
</el-form-item> |
</el-form-item> |
||||
</el-form> |
</el-form> |
||||
</el-card> |
</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> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
// import { getRolePage } from '@/api/role'; |
import * as echarts from 'echarts'; |
||||
// import { listMenuOptions } from '@/api/menu'; |
import { Ref } from 'vue'; |
||||
// import { RolePageVO, RoleForm, RoleQuery } from '@/api/role/types'; |
const stackedRef: Ref<HTMLElement | any> = ref(null); |
||||
|
import type { FormInstance } from 'element-plus'; |
||||
// const queryFormRef = ref(ElForm); |
|
||||
// const roleData = ref<RolePageVO[]>(); |
|
||||
// const searchForm = reactive<RoleQuery>({ |
|
||||
// pageNum: 1, |
|
||||
// pageSize: 10 |
|
||||
// }); |
|
||||
|
|
||||
onMounted(() => { |
const searchRef = ref<FormInstance>(); |
||||
// getUserData(); |
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00' |
||||
|
const searchForm = reactive({ |
||||
|
time: '', |
||||
|
particle: '', |
||||
|
device: '', |
||||
|
parameter: '' |
||||
}); |
}); |
||||
|
|
||||
//列表数据 |
const submitForm = (formEl: FormInstance | undefined) => { |
||||
// function getUserData() { |
if (!formEl) return; |
||||
// loading.value = true; |
formEl.validate(valid => { |
||||
// getRolePage(searchForm) |
if (valid) { |
||||
// .then(({ data }) => { |
console.log('submit!'); |
||||
// // roleData.value = data.list; |
} else { |
||||
// }) |
console.log('error submit!'); |
||||
// .finally(() => { |
return false; |
||||
// loading.value = false; |
} |
||||
// }); |
}); |
||||
// } |
}; |
||||
|
|
||||
//搜索 |
const resetForm = (formEl: FormInstance | undefined) => { |
||||
// function resetClick() { |
if (!formEl) return; |
||||
// queryFormRef.value.resetFields(); |
formEl.resetFields(); |
||||
// searchForm.pageNum = 1; |
}; |
||||
// getUserData(); |
const optionss = [ |
||||
// } |
{ |
||||
</script> |
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> |
<style lang="scss" scoped> |
||||
@import './index.scss'; |
@import './index.scss'; |
||||
</style> |
</style> |
||||
|
|||||
Loading…
Reference in new issue