fuguobin
1 year ago
9 changed files with 1273 additions and 179 deletions
@ -0,0 +1,202 @@ |
|||||
|
<template> |
||||
|
<div class="details"> |
||||
|
<el-card class="search" shadow="always"> |
||||
|
<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 particleData" :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="submitForm(searchRef)">确认</el-button> |
||||
|
<el-button @click="resetForm(searchRef)">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</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 * as echarts from 'echarts'; |
||||
|
import { Ref } from 'vue'; |
||||
|
const stackedRef: Ref<HTMLElement | any> = ref(null); |
||||
|
import type { FormInstance } from 'element-plus'; |
||||
|
|
||||
|
const searchRef = ref<FormInstance>(); |
||||
|
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) => { |
||||
|
if (!formEl) return; |
||||
|
formEl.validate(valid => { |
||||
|
if (valid) { |
||||
|
console.log('submit!'); |
||||
|
} else { |
||||
|
console.log('error submit!'); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const resetForm = (formEl: FormInstance | undefined) => { |
||||
|
if (!formEl) return; |
||||
|
formEl.resetFields(); |
||||
|
}; |
||||
|
const particleData = [ |
||||
|
{ label: '分钟', value: 1 }, |
||||
|
{ label: '小时', value: 2 } |
||||
|
]; |
||||
|
const optionss = [ |
||||
|
{ |
||||
|
value: 'Option1', |
||||
|
label: 'Option1' |
||||
|
}, |
||||
|
{ |
||||
|
value: 'Option2', |
||||
|
label: 'Option2' |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
const colors = ['#EE6666', '#91CC75', '#5470C6']; |
||||
|
const options = { |
||||
|
color: colors, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'cross' |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
right: '20%' |
||||
|
}, |
||||
|
toolbox: { |
||||
|
feature: { |
||||
|
dataView: { show: true, readOnly: false }, |
||||
|
restore: { show: true }, |
||||
|
saveAsImage: { show: true } |
||||
|
} |
||||
|
}, |
||||
|
legend: { |
||||
|
data: ['回温', '供压', '回压'] |
||||
|
}, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
axisTick: { |
||||
|
alignWithLabel: true |
||||
|
}, |
||||
|
// prettier-ignore |
||||
|
data: ['2021', '2022', '2023', '2024', '2025', '2026', '2027', '2028', '2029', '2030', '2031', '2032'] |
||||
|
} |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: '回温', |
||||
|
position: 'right', |
||||
|
alignTicks: true, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: colors[0] |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
formatter: '{value} ml' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: '供压', |
||||
|
position: 'right', |
||||
|
alignTicks: true, |
||||
|
offset: 80, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: colors[1] |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
formatter: '{value} ml' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: '回压', |
||||
|
position: 'left', |
||||
|
alignTicks: true, |
||||
|
axisLine: { |
||||
|
show: true, |
||||
|
lineStyle: { |
||||
|
color: colors[2] |
||||
|
} |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
formatter: '{value} °C' |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '回温', |
||||
|
type: 'line', |
||||
|
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] |
||||
|
}, |
||||
|
{ |
||||
|
name: '供压', |
||||
|
type: 'line', |
||||
|
yAxisIndex: 2, |
||||
|
data: [5.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] |
||||
|
}, |
||||
|
{ |
||||
|
name: '回压', |
||||
|
type: 'line', |
||||
|
yAxisIndex: 1, |
||||
|
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
// 图表初始化 |
||||
|
const chart = echarts.init(stackedRef.value); |
||||
|
chart.setOption(options); |
||||
|
|
||||
|
// 大小自适应 |
||||
|
window.addEventListener('resize', () => { |
||||
|
chart.resize(); |
||||
|
}); |
||||
|
}); |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
@import './index.scss'; |
||||
|
</style> |
||||
@ -0,0 +1,187 @@ |
|||||
|
<template> |
||||
|
<div class="details"> |
||||
|
<el-card class="search" shadow="always"> |
||||
|
<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="submitForm(searchRef)">确认</el-button> |
||||
|
<el-button @click="resetForm(searchRef)">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</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 * as echarts from 'echarts'; |
||||
|
import { Ref } from 'vue'; |
||||
|
const stackedRef: Ref<HTMLElement | any> = ref(null); |
||||
|
import type { FormInstance } from 'element-plus'; |
||||
|
|
||||
|
const searchRef = ref<FormInstance>(); |
||||
|
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) => { |
||||
|
if (!formEl) return; |
||||
|
formEl.validate(valid => { |
||||
|
if (valid) { |
||||
|
console.log('submit!'); |
||||
|
} else { |
||||
|
console.log('error submit!'); |
||||
|
return false; |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
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