echarts
parent
6cc29c6428
commit
11f3a8db3c
|
|
@ -0,0 +1,229 @@
|
||||||
|
<template>
|
||||||
|
<div class="analyse-container">
|
||||||
|
<div id="echartDiv" class="echartDiv100"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import myApi from "@/api/myApi.js";
|
||||||
|
import BarEchart from "./BarEchart.vue";
|
||||||
|
import Process from "./Process.vue";
|
||||||
|
import Date from "@/components/Date.vue";
|
||||||
|
export default {
|
||||||
|
name: "Analyse",
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
|
||||||
|
});
|
||||||
|
onMounted(async () => {
|
||||||
|
getChartsZf2("echartDiv", '热岛消减率');
|
||||||
|
// getChartsZfl("echartDivQ", '蒸发带走的潜热')
|
||||||
|
});
|
||||||
|
const getChartsZfl = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
var op = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
crossStyle: {
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
"00",
|
||||||
|
"01",
|
||||||
|
"02",
|
||||||
|
"03",
|
||||||
|
"04",
|
||||||
|
"05",
|
||||||
|
"06",
|
||||||
|
"07",
|
||||||
|
"08",
|
||||||
|
"09",
|
||||||
|
"10",
|
||||||
|
"11",
|
||||||
|
"12",
|
||||||
|
"13",
|
||||||
|
"14",
|
||||||
|
"15",
|
||||||
|
"16",
|
||||||
|
"17",
|
||||||
|
"18",
|
||||||
|
"19",
|
||||||
|
"20",
|
||||||
|
"21",
|
||||||
|
"22",
|
||||||
|
"23",
|
||||||
|
],
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getChartsZf2 = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
var op = {
|
||||||
|
title: {
|
||||||
|
text
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
"00",
|
||||||
|
"01",
|
||||||
|
"02",
|
||||||
|
"03",
|
||||||
|
"04",
|
||||||
|
"05",
|
||||||
|
"06",
|
||||||
|
"07",
|
||||||
|
"08",
|
||||||
|
"09",
|
||||||
|
"10",
|
||||||
|
"11",
|
||||||
|
"12",
|
||||||
|
"13",
|
||||||
|
"14",
|
||||||
|
"15",
|
||||||
|
"16",
|
||||||
|
"17",
|
||||||
|
"18",
|
||||||
|
"19",
|
||||||
|
"20",
|
||||||
|
"21",
|
||||||
|
"22",
|
||||||
|
"23",
|
||||||
|
],
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '热岛消减率A',
|
||||||
|
min: 0,
|
||||||
|
max: 250,
|
||||||
|
interval: 50,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '热岛消减率B',
|
||||||
|
min: 0,
|
||||||
|
max: 25,
|
||||||
|
interval: 5,
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '系统A',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'one',
|
||||||
|
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, 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: '系统B',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'one',
|
||||||
|
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, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统C',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'one',
|
||||||
|
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, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统D',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'one',
|
||||||
|
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, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统E',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
data: [
|
||||||
|
2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getEchart = (dom, op) => {
|
||||||
|
if (dom) {
|
||||||
|
var myChart = echarts.init(dom);
|
||||||
|
var option = op;
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
getChartsZfl,
|
||||||
|
getEchart
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.analyse-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.echartDiv100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
// border: 1px solid red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,267 @@
|
||||||
|
<template>
|
||||||
|
<div class="analyse-container">
|
||||||
|
<div id="echartDiv" class="echartDiv100"></div>
|
||||||
|
<div id="echartDivQ" class="echartDiv100"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import myApi from "@/api/myApi.js";
|
||||||
|
import BarEchart from "./BarEchart.vue";
|
||||||
|
import Process from "./Process.vue";
|
||||||
|
import Date from "@/components/Date.vue";
|
||||||
|
export default {
|
||||||
|
name: "Analyse",
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
|
||||||
|
});
|
||||||
|
onMounted(async () => {
|
||||||
|
getChartsZfl("echartDiv", '蒸发量');
|
||||||
|
getChartsZfl("echartDivQ", '蒸发带走的潜热')
|
||||||
|
});
|
||||||
|
const getChartsZfl = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
var op = {
|
||||||
|
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||||
|
title: {
|
||||||
|
text: text
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: [
|
||||||
|
"00",
|
||||||
|
"01",
|
||||||
|
"02",
|
||||||
|
"03",
|
||||||
|
"04",
|
||||||
|
"05",
|
||||||
|
"06",
|
||||||
|
"07",
|
||||||
|
"08",
|
||||||
|
"09",
|
||||||
|
"10",
|
||||||
|
"11",
|
||||||
|
"12",
|
||||||
|
"13",
|
||||||
|
"14",
|
||||||
|
"15",
|
||||||
|
"16",
|
||||||
|
"17",
|
||||||
|
"18",
|
||||||
|
"19",
|
||||||
|
"20",
|
||||||
|
"21",
|
||||||
|
"22",
|
||||||
|
"23",
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '系统A',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(128, 255, 165)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(1, 191, 236)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统B',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(0, 221, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(77, 119, 255)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统C',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(55, 162, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(116, 21, 219)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统D',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 0, 135)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(135, 0, 157)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统E',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 191, 0)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(224, 62, 76)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getEchart = (dom, op) => {
|
||||||
|
if (dom) {
|
||||||
|
var myChart = echarts.init(dom);
|
||||||
|
var option = op;
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
getChartsZfl,
|
||||||
|
getEchart
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.analyse-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.echartDiv100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 49%;
|
||||||
|
margin: 0 auto;
|
||||||
|
// border: 1px solid red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,170 @@
|
||||||
|
<template>
|
||||||
|
<div class="analyse-container">
|
||||||
|
<div id="echartDiv" class="echartDiv100"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import myApi from "@/api/myApi.js";
|
||||||
|
import BarEchart from "./BarEchart.vue";
|
||||||
|
import Process from "./Process.vue";
|
||||||
|
import Date from "@/components/Date.vue";
|
||||||
|
export default {
|
||||||
|
name: "Analyse",
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
|
||||||
|
});
|
||||||
|
onMounted(async () => {
|
||||||
|
getChartsZfl("echartDiv", '蒸发量');
|
||||||
|
getChartsZfl("echartDivQ", '蒸发带走的潜热')
|
||||||
|
});
|
||||||
|
const getChartsZfl = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
var op = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
crossStyle: {
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
"00",
|
||||||
|
"01",
|
||||||
|
"02",
|
||||||
|
"03",
|
||||||
|
"04",
|
||||||
|
"05",
|
||||||
|
"06",
|
||||||
|
"07",
|
||||||
|
"08",
|
||||||
|
"09",
|
||||||
|
"10",
|
||||||
|
"11",
|
||||||
|
"12",
|
||||||
|
"13",
|
||||||
|
"14",
|
||||||
|
"15",
|
||||||
|
"16",
|
||||||
|
"17",
|
||||||
|
"18",
|
||||||
|
"19",
|
||||||
|
"20",
|
||||||
|
"21",
|
||||||
|
"22",
|
||||||
|
"23",
|
||||||
|
],
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '热岛消减率A',
|
||||||
|
min: 0,
|
||||||
|
max: 250,
|
||||||
|
interval: 50,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '热岛消减率B',
|
||||||
|
min: 0,
|
||||||
|
max: 25,
|
||||||
|
interval: 5,
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '系统A',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'one',
|
||||||
|
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, 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: '系统B',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'one',
|
||||||
|
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, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统C',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'one',
|
||||||
|
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, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统D',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'one',
|
||||||
|
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, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统E',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
data: [
|
||||||
|
2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getEchart = (dom, op) => {
|
||||||
|
if (dom) {
|
||||||
|
var myChart = echarts.init(dom);
|
||||||
|
var option = op;
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
getChartsZfl,
|
||||||
|
getEchart
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.analyse-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.echartDiv100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
// border: 1px solid red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,474 @@
|
||||||
|
<template>
|
||||||
|
<div class="analyse-container">
|
||||||
|
<div id="echartDiv" class="echartDiv100"></div>
|
||||||
|
<div id="echartDivQ" class="echartDiv100"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import myApi from "@/api/myApi.js";
|
||||||
|
import BarEchart from "./BarEchart.vue";
|
||||||
|
import Process from "./Process.vue";
|
||||||
|
import Date from "@/components/Date.vue";
|
||||||
|
export default {
|
||||||
|
name: "Analyse",
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
|
||||||
|
});
|
||||||
|
onMounted(async () => {
|
||||||
|
getChartsZfl("echartDiv", '蒸发量');
|
||||||
|
getChartsZf2("echartDivQ", '蒸发带走的潜热')
|
||||||
|
});
|
||||||
|
const getChartsZfl = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
var op = {
|
||||||
|
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||||
|
title: {
|
||||||
|
text: text
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: [
|
||||||
|
"00",
|
||||||
|
"01",
|
||||||
|
"02",
|
||||||
|
"03",
|
||||||
|
"04",
|
||||||
|
"05",
|
||||||
|
"06",
|
||||||
|
"07",
|
||||||
|
"08",
|
||||||
|
"09",
|
||||||
|
"10",
|
||||||
|
"11",
|
||||||
|
"12",
|
||||||
|
"13",
|
||||||
|
"14",
|
||||||
|
"15",
|
||||||
|
"16",
|
||||||
|
"17",
|
||||||
|
"18",
|
||||||
|
"19",
|
||||||
|
"20",
|
||||||
|
"21",
|
||||||
|
"22",
|
||||||
|
"23",
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '系统A',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(128, 255, 165)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(1, 191, 236)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统B',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(0, 221, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(77, 119, 255)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统C',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(55, 162, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(116, 21, 219)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统D',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 0, 135)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(135, 0, 157)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统E',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 191, 0)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(224, 62, 76)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getChartsZf2 = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
var op = {
|
||||||
|
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||||
|
title: {
|
||||||
|
text: text
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: [
|
||||||
|
"00",
|
||||||
|
"01",
|
||||||
|
"02",
|
||||||
|
"03",
|
||||||
|
"04",
|
||||||
|
"05",
|
||||||
|
"06",
|
||||||
|
"07",
|
||||||
|
"08",
|
||||||
|
"09",
|
||||||
|
"10",
|
||||||
|
"11",
|
||||||
|
"12",
|
||||||
|
"13",
|
||||||
|
"14",
|
||||||
|
"15",
|
||||||
|
"16",
|
||||||
|
"17",
|
||||||
|
"18",
|
||||||
|
"19",
|
||||||
|
"20",
|
||||||
|
"21",
|
||||||
|
"22",
|
||||||
|
"23",
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '系统A',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(128, 255, 165)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(1, 191, 236)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统B',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(0, 221, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(77, 119, 255)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统C',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(55, 162, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(116, 21, 219)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统D',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 0, 135)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(135, 0, 157)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统E',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 191, 0)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(224, 62, 76)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getEchart = (dom, op) => {
|
||||||
|
if (dom) {
|
||||||
|
var myChart = echarts.init(dom);
|
||||||
|
var option = op;
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
getChartsZfl,
|
||||||
|
getChartsZf2,
|
||||||
|
getEchart
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.analyse-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.echartDiv100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 49%;
|
||||||
|
margin: 0 auto;
|
||||||
|
// border: 1px solid red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,274 @@
|
||||||
|
<template>
|
||||||
|
<div class="analyse-container">
|
||||||
|
<div id="echartDiv" class="echartDiv100"></div>
|
||||||
|
<div id="echartDivQ" class="echartDiv100"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import myApi from "@/api/myApi.js";
|
||||||
|
import BarEchart from "./BarEchart.vue";
|
||||||
|
import Process from "./Process.vue";
|
||||||
|
import Date from "@/components/Date.vue";
|
||||||
|
export default {
|
||||||
|
name: "Analyse",
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
|
||||||
|
});
|
||||||
|
onMounted(async () => {
|
||||||
|
getChartsZf1("echartDiv", '蒸发量');
|
||||||
|
getChartsZf2("echartDivQ", '蒸发带走的潜热')
|
||||||
|
});
|
||||||
|
const getChartsZf1 = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
var op = {
|
||||||
|
title: {
|
||||||
|
text
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '系统A',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
areaStyle: {},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统B',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
areaStyle: {},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统C',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
areaStyle: {},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统D',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
areaStyle: {},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 332, 301, 334, 390, 330, 320]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统E',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
|
areaStyle: {},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getChartsZf2 = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
var op = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
crossStyle: {
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
"00",
|
||||||
|
"01",
|
||||||
|
"02",
|
||||||
|
"03",
|
||||||
|
"04",
|
||||||
|
"05",
|
||||||
|
"06",
|
||||||
|
"07",
|
||||||
|
"08",
|
||||||
|
"09",
|
||||||
|
"10",
|
||||||
|
"11",
|
||||||
|
"12",
|
||||||
|
"13",
|
||||||
|
"14",
|
||||||
|
"15",
|
||||||
|
"16",
|
||||||
|
"17",
|
||||||
|
"18",
|
||||||
|
"19",
|
||||||
|
"20",
|
||||||
|
"21",
|
||||||
|
"22",
|
||||||
|
"23",
|
||||||
|
],
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '热岛消减率A',
|
||||||
|
min: 0,
|
||||||
|
max: 250,
|
||||||
|
interval: 50,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '热岛消减率B',
|
||||||
|
min: 0,
|
||||||
|
max: 25,
|
||||||
|
interval: 5,
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '系统A',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'one',
|
||||||
|
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, 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: '系统B',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'one',
|
||||||
|
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, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统C',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'one',
|
||||||
|
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, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统D',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'one',
|
||||||
|
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, 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统E',
|
||||||
|
type: 'line',
|
||||||
|
yAxisIndex: 1,
|
||||||
|
data: [
|
||||||
|
2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getEchart = (dom, op) => {
|
||||||
|
if (dom) {
|
||||||
|
var myChart = echarts.init(dom);
|
||||||
|
var option = op;
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
getChartsZf1,
|
||||||
|
getChartsZf2,
|
||||||
|
getEchart
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.analyse-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.echartDiv100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 49%;
|
||||||
|
margin: 0 auto;
|
||||||
|
// border: 1px solid red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,265 @@
|
||||||
|
<template>
|
||||||
|
<div class="history-container">
|
||||||
|
<div class="flex top">
|
||||||
|
<div class="flex width200">
|
||||||
|
<span> 系统选择：</span>
|
||||||
|
<el-select v-model="value1" placeholder="请选择" size="mini">
|
||||||
|
<el-option
|
||||||
|
v-for="item in fxOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="date">
|
||||||
|
<Date />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-for="(item, index) of listData" :key="index" class="middle">
|
||||||
|
<BarEchart :echartData="item" class="echartDiv100" />
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
|
||||||
|
<el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
|
||||||
|
</el-table> -->
|
||||||
|
<table border="1">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>项目</th>
|
||||||
|
<th colspan="17">降雨量(mm/s)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>序号</td>
|
||||||
|
<td v-for="(item, index) in tableHeader" :key="index">
|
||||||
|
{{ item.label }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>时间</td>
|
||||||
|
<td v-for="(item, index) in tableHeader" :key="index">
|
||||||
|
{{ item.time }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>数值</td>
|
||||||
|
<td v-for="(item, index) in tableHeader" :key="index">
|
||||||
|
{{ item.value }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import myApi from "@/api/myApi.js";
|
||||||
|
import BarEchart from "./BarEchart.vue";
|
||||||
|
import Process from "./Process.vue";
|
||||||
|
import Date from "@/components/Date.vue";
|
||||||
|
export default {
|
||||||
|
name: "History",
|
||||||
|
components: {
|
||||||
|
BarEchart,
|
||||||
|
Process,
|
||||||
|
Date,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
listData: [
|
||||||
|
{
|
||||||
|
id: "echart0",
|
||||||
|
title: "降水量-柱状图",
|
||||||
|
legend: ["降水量"],
|
||||||
|
color: ["#6fdbce"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
fxOptions: [
|
||||||
|
{
|
||||||
|
value: "0",
|
||||||
|
label: "降水量",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "1",
|
||||||
|
label: "系统A",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "2",
|
||||||
|
label: "系统B",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "3",
|
||||||
|
label: "系统C",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "4",
|
||||||
|
label: "系统D",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "5",
|
||||||
|
label: "系统E",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
value1: "降水量",
|
||||||
|
tableHeader: [
|
||||||
|
{
|
||||||
|
label: 1,
|
||||||
|
time: "00:00",
|
||||||
|
value: 78,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 2,
|
||||||
|
time: "01:00",
|
||||||
|
value: 56,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 3,
|
||||||
|
time: "02:00",
|
||||||
|
value: 45,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 4,
|
||||||
|
time: "03:00",
|
||||||
|
value: 66,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 5,
|
||||||
|
time: "04:00",
|
||||||
|
value: 86,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 6,
|
||||||
|
time: "05:00",
|
||||||
|
value: 11,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 7,
|
||||||
|
time: "06:00",
|
||||||
|
value: 13,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 8,
|
||||||
|
time: "07:00",
|
||||||
|
value: 55,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 9,
|
||||||
|
time: "08:00",
|
||||||
|
value: 76,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 10,
|
||||||
|
time: "09:00",
|
||||||
|
value: 65,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 11,
|
||||||
|
time: "10:00",
|
||||||
|
value: 80,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 12,
|
||||||
|
time: "11:00",
|
||||||
|
value: 90,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 13,
|
||||||
|
time: "12:00",
|
||||||
|
value: 34,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 14,
|
||||||
|
time: "13:00",
|
||||||
|
value: 89,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 15,
|
||||||
|
time: "14:00",
|
||||||
|
value: 34,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 16,
|
||||||
|
time: "15:00",
|
||||||
|
value: 90,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 17,
|
||||||
|
time: "16:00",
|
||||||
|
value: 45,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
onMounted(async () => {});
|
||||||
|
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.history-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 10px;
|
||||||
|
.top {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
.middle {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
// border: 1px solid red;s
|
||||||
|
.echartDiv100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
height: calc(100% - 520px);
|
||||||
|
// border: 1px solid red;
|
||||||
|
}
|
||||||
|
.date {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
.width200 {
|
||||||
|
width: 200px;
|
||||||
|
> span {
|
||||||
|
display: inline-block;
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
td {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
th:first-child {
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
td:first-child {
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,265 @@
|
||||||
|
<template>
|
||||||
|
<div class="history-container">
|
||||||
|
<div class="flex top">
|
||||||
|
<div class="flex width200">
|
||||||
|
<span> 系统选择：</span>
|
||||||
|
<el-select v-model="value1" placeholder="请选择" size="mini">
|
||||||
|
<el-option
|
||||||
|
v-for="item in fxOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="date">
|
||||||
|
<Date />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-for="(item, index) of listData" :key="index" class="middle">
|
||||||
|
<BarEchart :echartData="item" class="echartDiv100" />
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
|
||||||
|
<el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
|
||||||
|
</el-table> -->
|
||||||
|
<table border="1">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>项目</th>
|
||||||
|
<th colspan="17">降雨量(mm/s)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>序号</td>
|
||||||
|
<td v-for="(item, index) in tableHeader" :key="index">
|
||||||
|
{{ item.label }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>时间</td>
|
||||||
|
<td v-for="(item, index) in tableHeader" :key="index">
|
||||||
|
{{ item.time }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>数值</td>
|
||||||
|
<td v-for="(item, index) in tableHeader" :key="index">
|
||||||
|
{{ item.value }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import myApi from "@/api/myApi.js";
|
||||||
|
import BarEchart from "./BarEchart.vue";
|
||||||
|
import Process from "./Process.vue";
|
||||||
|
import Date from "@/components/Date.vue";
|
||||||
|
export default {
|
||||||
|
name: "History",
|
||||||
|
components: {
|
||||||
|
BarEchart,
|
||||||
|
Process,
|
||||||
|
Date,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
listData: [
|
||||||
|
{
|
||||||
|
id: "echart0",
|
||||||
|
title: "降水量-柱状图",
|
||||||
|
legend: ["降水量"],
|
||||||
|
color: ["#6fdbce"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
fxOptions: [
|
||||||
|
{
|
||||||
|
value: "0",
|
||||||
|
label: "降水量",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "1",
|
||||||
|
label: "系统A",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "2",
|
||||||
|
label: "系统B",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "3",
|
||||||
|
label: "系统C",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "4",
|
||||||
|
label: "系统D",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "5",
|
||||||
|
label: "系统E",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
value1: "降水量",
|
||||||
|
tableHeader: [
|
||||||
|
{
|
||||||
|
label: 1,
|
||||||
|
time: "00:00",
|
||||||
|
value: 78,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 2,
|
||||||
|
time: "01:00",
|
||||||
|
value: 56,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 3,
|
||||||
|
time: "02:00",
|
||||||
|
value: 45,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 4,
|
||||||
|
time: "03:00",
|
||||||
|
value: 66,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 5,
|
||||||
|
time: "04:00",
|
||||||
|
value: 86,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 6,
|
||||||
|
time: "05:00",
|
||||||
|
value: 11,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 7,
|
||||||
|
time: "06:00",
|
||||||
|
value: 13,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 8,
|
||||||
|
time: "07:00",
|
||||||
|
value: 55,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 9,
|
||||||
|
time: "08:00",
|
||||||
|
value: 76,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 10,
|
||||||
|
time: "09:00",
|
||||||
|
value: 65,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 11,
|
||||||
|
time: "10:00",
|
||||||
|
value: 80,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 12,
|
||||||
|
time: "11:00",
|
||||||
|
value: 90,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 13,
|
||||||
|
time: "12:00",
|
||||||
|
value: 34,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 14,
|
||||||
|
time: "13:00",
|
||||||
|
value: 89,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 15,
|
||||||
|
time: "14:00",
|
||||||
|
value: 34,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 16,
|
||||||
|
time: "15:00",
|
||||||
|
value: 90,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 17,
|
||||||
|
time: "16:00",
|
||||||
|
value: 45,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
onMounted(async () => {});
|
||||||
|
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.history-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 10px;
|
||||||
|
.top {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
.middle {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
// border: 1px solid red;s
|
||||||
|
.echartDiv100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
height: calc(100% - 520px);
|
||||||
|
// border: 1px solid red;
|
||||||
|
}
|
||||||
|
.date {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
.width200 {
|
||||||
|
width: 200px;
|
||||||
|
> span {
|
||||||
|
display: inline-block;
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
td {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
th:first-child {
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
td:first-child {
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,265 @@
|
||||||
|
<template>
|
||||||
|
<div class="history-container">
|
||||||
|
<div class="flex top">
|
||||||
|
<div class="flex width200">
|
||||||
|
<span> 系统选择：</span>
|
||||||
|
<el-select v-model="value1" placeholder="请选择" size="mini">
|
||||||
|
<el-option
|
||||||
|
v-for="item in fxOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="date">
|
||||||
|
<Date />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-for="(item, index) of listData" :key="index" class="middle">
|
||||||
|
<BarEchart :echartData="item" class="echartDiv100" />
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
|
||||||
|
<el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
|
||||||
|
</el-table> -->
|
||||||
|
<table border="1">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>项目</th>
|
||||||
|
<th colspan="17">降雨量(mm/s)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>序号</td>
|
||||||
|
<td v-for="(item, index) in tableHeader" :key="index">
|
||||||
|
{{ item.label }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>时间</td>
|
||||||
|
<td v-for="(item, index) in tableHeader" :key="index">
|
||||||
|
{{ item.time }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>数值</td>
|
||||||
|
<td v-for="(item, index) in tableHeader" :key="index">
|
||||||
|
{{ item.value }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import myApi from "@/api/myApi.js";
|
||||||
|
import BarEchart from "./BarEchart.vue";
|
||||||
|
import Process from "./Process.vue";
|
||||||
|
import Date from "@/components/Date.vue";
|
||||||
|
export default {
|
||||||
|
name: "History",
|
||||||
|
components: {
|
||||||
|
BarEchart,
|
||||||
|
Process,
|
||||||
|
Date,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
listData: [
|
||||||
|
{
|
||||||
|
id: "echart0",
|
||||||
|
title: "降水量-柱状图",
|
||||||
|
legend: ["降水量"],
|
||||||
|
color: ["#6fdbce"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
fxOptions: [
|
||||||
|
{
|
||||||
|
value: "0",
|
||||||
|
label: "降水量",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "1",
|
||||||
|
label: "系统A",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "2",
|
||||||
|
label: "系统B",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "3",
|
||||||
|
label: "系统C",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "4",
|
||||||
|
label: "系统D",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "5",
|
||||||
|
label: "系统E",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
value1: "降水量",
|
||||||
|
tableHeader: [
|
||||||
|
{
|
||||||
|
label: 1,
|
||||||
|
time: "00:00",
|
||||||
|
value: 78,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 2,
|
||||||
|
time: "01:00",
|
||||||
|
value: 56,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 3,
|
||||||
|
time: "02:00",
|
||||||
|
value: 45,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 4,
|
||||||
|
time: "03:00",
|
||||||
|
value: 66,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 5,
|
||||||
|
time: "04:00",
|
||||||
|
value: 86,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 6,
|
||||||
|
time: "05:00",
|
||||||
|
value: 11,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 7,
|
||||||
|
time: "06:00",
|
||||||
|
value: 13,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 8,
|
||||||
|
time: "07:00",
|
||||||
|
value: 55,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 9,
|
||||||
|
time: "08:00",
|
||||||
|
value: 76,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 10,
|
||||||
|
time: "09:00",
|
||||||
|
value: 65,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 11,
|
||||||
|
time: "10:00",
|
||||||
|
value: 80,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 12,
|
||||||
|
time: "11:00",
|
||||||
|
value: 90,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 13,
|
||||||
|
time: "12:00",
|
||||||
|
value: 34,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 14,
|
||||||
|
time: "13:00",
|
||||||
|
value: 89,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 15,
|
||||||
|
time: "14:00",
|
||||||
|
value: 34,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 16,
|
||||||
|
time: "15:00",
|
||||||
|
value: 90,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 17,
|
||||||
|
time: "16:00",
|
||||||
|
value: 45,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
onMounted(async () => {});
|
||||||
|
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.history-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 10px;
|
||||||
|
.top {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
.middle {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
// border: 1px solid red;s
|
||||||
|
.echartDiv100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
height: calc(100% - 520px);
|
||||||
|
// border: 1px solid red;
|
||||||
|
}
|
||||||
|
.date {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
.width200 {
|
||||||
|
width: 200px;
|
||||||
|
> span {
|
||||||
|
display: inline-block;
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
td {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
th:first-child {
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
td:first-child {
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,265 @@
|
||||||
|
<template>
|
||||||
|
<div class="history-container">
|
||||||
|
<div class="flex top">
|
||||||
|
<div class="flex width200">
|
||||||
|
<span> 系统选择：</span>
|
||||||
|
<el-select v-model="value1" placeholder="请选择" size="mini">
|
||||||
|
<el-option
|
||||||
|
v-for="item in fxOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="date">
|
||||||
|
<Date />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-for="(item, index) of listData" :key="index" class="middle">
|
||||||
|
<BarEchart :echartData="item" class="echartDiv100" />
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
|
||||||
|
<el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
|
||||||
|
</el-table> -->
|
||||||
|
<table border="1">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>项目</th>
|
||||||
|
<th colspan="17">降雨量(mm/s)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>序号</td>
|
||||||
|
<td v-for="(item, index) in tableHeader" :key="index">
|
||||||
|
{{ item.label }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>时间</td>
|
||||||
|
<td v-for="(item, index) in tableHeader" :key="index">
|
||||||
|
{{ item.time }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>数值</td>
|
||||||
|
<td v-for="(item, index) in tableHeader" :key="index">
|
||||||
|
{{ item.value }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import myApi from "@/api/myApi.js";
|
||||||
|
import BarEchart from "./BarEchart.vue";
|
||||||
|
import Process from "./Process.vue";
|
||||||
|
import Date from "@/components/Date.vue";
|
||||||
|
export default {
|
||||||
|
name: "History",
|
||||||
|
components: {
|
||||||
|
BarEchart,
|
||||||
|
Process,
|
||||||
|
Date,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
listData: [
|
||||||
|
{
|
||||||
|
id: "echart0",
|
||||||
|
title: "降水量-柱状图",
|
||||||
|
legend: ["降水量"],
|
||||||
|
color: ["#6fdbce"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
fxOptions: [
|
||||||
|
{
|
||||||
|
value: "0",
|
||||||
|
label: "降水量",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "1",
|
||||||
|
label: "系统A",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "2",
|
||||||
|
label: "系统B",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "3",
|
||||||
|
label: "系统C",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "4",
|
||||||
|
label: "系统D",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "5",
|
||||||
|
label: "系统E",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
value1: "降水量",
|
||||||
|
tableHeader: [
|
||||||
|
{
|
||||||
|
label: 1,
|
||||||
|
time: "00:00",
|
||||||
|
value: 78,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 2,
|
||||||
|
time: "01:00",
|
||||||
|
value: 56,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 3,
|
||||||
|
time: "02:00",
|
||||||
|
value: 45,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 4,
|
||||||
|
time: "03:00",
|
||||||
|
value: 66,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 5,
|
||||||
|
time: "04:00",
|
||||||
|
value: 86,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 6,
|
||||||
|
time: "05:00",
|
||||||
|
value: 11,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 7,
|
||||||
|
time: "06:00",
|
||||||
|
value: 13,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 8,
|
||||||
|
time: "07:00",
|
||||||
|
value: 55,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 9,
|
||||||
|
time: "08:00",
|
||||||
|
value: 76,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 10,
|
||||||
|
time: "09:00",
|
||||||
|
value: 65,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 11,
|
||||||
|
time: "10:00",
|
||||||
|
value: 80,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 12,
|
||||||
|
time: "11:00",
|
||||||
|
value: 90,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 13,
|
||||||
|
time: "12:00",
|
||||||
|
value: 34,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 14,
|
||||||
|
time: "13:00",
|
||||||
|
value: 89,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 15,
|
||||||
|
time: "14:00",
|
||||||
|
value: 34,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 16,
|
||||||
|
time: "15:00",
|
||||||
|
value: 90,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 17,
|
||||||
|
time: "16:00",
|
||||||
|
value: 45,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
onMounted(async () => {});
|
||||||
|
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.history-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 10px;
|
||||||
|
.top {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
.middle {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
// border: 1px solid red;s
|
||||||
|
.echartDiv100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
height: calc(100% - 520px);
|
||||||
|
// border: 1px solid red;
|
||||||
|
}
|
||||||
|
.date {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
.width200 {
|
||||||
|
width: 200px;
|
||||||
|
> span {
|
||||||
|
display: inline-block;
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
td {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
th:first-child {
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
td:first-child {
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,265 @@
|
||||||
|
<template>
|
||||||
|
<div class="history-container">
|
||||||
|
<div class="flex top">
|
||||||
|
<div class="flex width200">
|
||||||
|
<span> 系统选择：</span>
|
||||||
|
<el-select v-model="value1" placeholder="请选择" size="mini">
|
||||||
|
<el-option
|
||||||
|
v-for="item in fxOptions"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div class="date">
|
||||||
|
<Date />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-for="(item, index) of listData" :key="index" class="middle">
|
||||||
|
<BarEchart :echartData="item" class="echartDiv100" />
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<!-- <el-table :data="tableData" style="width: 100%" border="1" height="360" class="table-left-header">
|
||||||
|
<el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label" />
|
||||||
|
</el-table> -->
|
||||||
|
<table border="1">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>项目</th>
|
||||||
|
<th colspan="17">降雨量(mm/s)</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>序号</td>
|
||||||
|
<td v-for="(item, index) in tableHeader" :key="index">
|
||||||
|
{{ item.label }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>时间</td>
|
||||||
|
<td v-for="(item, index) in tableHeader" :key="index">
|
||||||
|
{{ item.time }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>数值</td>
|
||||||
|
<td v-for="(item, index) in tableHeader" :key="index">
|
||||||
|
{{ item.value }}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import myApi from "@/api/myApi.js";
|
||||||
|
import BarEchart from "./BarEchart.vue";
|
||||||
|
import Process from "./Process.vue";
|
||||||
|
import Date from "@/components/Date.vue";
|
||||||
|
export default {
|
||||||
|
name: "History",
|
||||||
|
components: {
|
||||||
|
BarEchart,
|
||||||
|
Process,
|
||||||
|
Date,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
listData: [
|
||||||
|
{
|
||||||
|
id: "echart0",
|
||||||
|
title: "降水量-柱状图",
|
||||||
|
legend: ["降水量"],
|
||||||
|
color: ["#6fdbce"],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
fxOptions: [
|
||||||
|
{
|
||||||
|
value: "0",
|
||||||
|
label: "降水量",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "1",
|
||||||
|
label: "系统A",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "2",
|
||||||
|
label: "系统B",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "3",
|
||||||
|
label: "系统C",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "4",
|
||||||
|
label: "系统D",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "5",
|
||||||
|
label: "系统E",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
value1: "降水量",
|
||||||
|
tableHeader: [
|
||||||
|
{
|
||||||
|
label: 1,
|
||||||
|
time: "00:00",
|
||||||
|
value: 78,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 2,
|
||||||
|
time: "01:00",
|
||||||
|
value: 56,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 3,
|
||||||
|
time: "02:00",
|
||||||
|
value: 45,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 4,
|
||||||
|
time: "03:00",
|
||||||
|
value: 66,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 5,
|
||||||
|
time: "04:00",
|
||||||
|
value: 86,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 6,
|
||||||
|
time: "05:00",
|
||||||
|
value: 11,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 7,
|
||||||
|
time: "06:00",
|
||||||
|
value: 13,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 8,
|
||||||
|
time: "07:00",
|
||||||
|
value: 55,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 9,
|
||||||
|
time: "08:00",
|
||||||
|
value: 76,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 10,
|
||||||
|
time: "09:00",
|
||||||
|
value: 65,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 11,
|
||||||
|
time: "10:00",
|
||||||
|
value: 80,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 12,
|
||||||
|
time: "11:00",
|
||||||
|
value: 90,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 13,
|
||||||
|
time: "12:00",
|
||||||
|
value: 34,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 14,
|
||||||
|
time: "13:00",
|
||||||
|
value: 89,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 15,
|
||||||
|
time: "14:00",
|
||||||
|
value: 34,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 16,
|
||||||
|
time: "15:00",
|
||||||
|
value: 90,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 17,
|
||||||
|
time: "16:00",
|
||||||
|
value: 45,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
onMounted(async () => {});
|
||||||
|
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.history-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 10px;
|
||||||
|
.top {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
.middle {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
// border: 1px solid red;s
|
||||||
|
.echartDiv100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
height: calc(100% - 520px);
|
||||||
|
// border: 1px solid red;
|
||||||
|
}
|
||||||
|
.date {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
.width200 {
|
||||||
|
width: 200px;
|
||||||
|
> span {
|
||||||
|
display: inline-block;
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
td {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
th:first-child {
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
tr {
|
||||||
|
td:first-child {
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,606 @@
|
||||||
|
<template>
|
||||||
|
<div class="analyse-container">
|
||||||
|
<div id="echartDiv1" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv2" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv3" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv4" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv5" class="echartDiv100"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import myApi from "@/api/myApi.js";
|
||||||
|
import BarEchart from "./BarEchart.vue";
|
||||||
|
import Process from "./Process.vue";
|
||||||
|
import Date from "@/components/Date.vue";
|
||||||
|
export default {
|
||||||
|
name: "Analyse",
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
|
||||||
|
});
|
||||||
|
onMounted(async () => {
|
||||||
|
getChartsZfl("echartDiv1", '蒸腾量');
|
||||||
|
getChartsZf2("echartDiv2", 'COD');
|
||||||
|
getChartsZf3("echartDiv3", '氨氮');
|
||||||
|
getChartsZf4("echartDiv4", 'SS');
|
||||||
|
getChartsZf5("echartDiv5", '屋面温度');
|
||||||
|
});
|
||||||
|
const getChartsZfl = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
console.log(dom);
|
||||||
|
var op = {
|
||||||
|
title: {
|
||||||
|
text: text,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['Rainfall', 'Evaporation']
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true,
|
||||||
|
feature: {
|
||||||
|
dataView: { show: true, readOnly: false },
|
||||||
|
magicType: { show: true, type: ['line', 'bar'] },
|
||||||
|
restore: { show: true },
|
||||||
|
saveAsImage: { show: true }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
// prettier-ignore
|
||||||
|
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Rainfall',
|
||||||
|
type: 'bar',
|
||||||
|
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
|
||||||
|
],
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{ type: 'max', name: 'Max' },
|
||||||
|
{ type: 'min', name: 'Min' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
markLine: {
|
||||||
|
data: [{ type: 'average', name: 'Avg' }]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Evaporation',
|
||||||
|
type: 'bar',
|
||||||
|
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
|
||||||
|
],
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{ name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
|
||||||
|
{ name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
markLine: {
|
||||||
|
data: [{ type: 'average', name: 'Avg' }]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getChartsZf2 = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
console.log(dom);
|
||||||
|
var op = {
|
||||||
|
title: {
|
||||||
|
text: text,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
boundaryGap: [0, '30%']
|
||||||
|
},
|
||||||
|
visualMap: {
|
||||||
|
type: 'piecewise',
|
||||||
|
show: false,
|
||||||
|
dimension: 0,
|
||||||
|
seriesIndex: 0,
|
||||||
|
pieces: [
|
||||||
|
{
|
||||||
|
gt: 1,
|
||||||
|
lt: 3,
|
||||||
|
color: 'rgba(0, 0, 180, 0.4)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
gt: 5,
|
||||||
|
lt: 7,
|
||||||
|
color: 'rgba(0, 0, 180, 0.4)'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'line',
|
||||||
|
smooth: 0.6,
|
||||||
|
symbol: 'none',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#5470C6',
|
||||||
|
width: 5
|
||||||
|
},
|
||||||
|
markLine: {
|
||||||
|
symbol: ['none', 'none'],
|
||||||
|
label: { show: false },
|
||||||
|
data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
|
||||||
|
},
|
||||||
|
areaStyle: {},
|
||||||
|
data: [
|
||||||
|
['2019-10-10', 200],
|
||||||
|
['2019-10-11', 560],
|
||||||
|
['2019-10-12', 750],
|
||||||
|
['2019-10-13', 580],
|
||||||
|
['2019-10-14', 250],
|
||||||
|
['2019-10-15', 300],
|
||||||
|
['2019-10-16', 450],
|
||||||
|
['2019-10-17', 300],
|
||||||
|
['2019-10-18', 100]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getChartsZf3 = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
console.log(dom);
|
||||||
|
var op = {
|
||||||
|
title: {
|
||||||
|
text: text,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Direct',
|
||||||
|
type: 'bar',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 332, 301, 334, 390, 330, 320]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Email',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Union Ads',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Video Ads',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Ad',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Search Engine',
|
||||||
|
type: 'bar',
|
||||||
|
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
markLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed'
|
||||||
|
},
|
||||||
|
data: [[{ type: 'min' }, { type: 'max' }]]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Baidu',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 5,
|
||||||
|
stack: 'Search Engine',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [620, 732, 701, 734, 1090, 1130, 1120]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Google',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Search Engine',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 132, 101, 134, 290, 230, 220]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Bing',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Search Engine',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [60, 72, 71, 74, 190, 130, 110]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Others',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'Search Engine',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [62, 82, 91, 84, 109, 110, 120]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getChartsZf4 = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
console.log(dom);
|
||||||
|
var op = {
|
||||||
|
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||||
|
title: {
|
||||||
|
text: text
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: [
|
||||||
|
"00",
|
||||||
|
"01",
|
||||||
|
"02",
|
||||||
|
"03",
|
||||||
|
"04",
|
||||||
|
"05",
|
||||||
|
"06",
|
||||||
|
"07",
|
||||||
|
"08",
|
||||||
|
"09",
|
||||||
|
"10",
|
||||||
|
"11",
|
||||||
|
"12",
|
||||||
|
"13",
|
||||||
|
"14",
|
||||||
|
"15",
|
||||||
|
"16",
|
||||||
|
"17",
|
||||||
|
"18",
|
||||||
|
"19",
|
||||||
|
"20",
|
||||||
|
"21",
|
||||||
|
"22",
|
||||||
|
"23",
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '系统A',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(128, 255, 165)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(1, 191, 236)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统B',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(0, 221, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(77, 119, 255)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统C',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(55, 162, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(116, 21, 219)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统D',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 0, 135)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(135, 0, 157)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统E',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 191, 0)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(224, 62, 76)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getChartsZf5 = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
console.log(dom);
|
||||||
|
// prettier-ignore
|
||||||
|
let dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
|
||||||
|
// prettier-ignore
|
||||||
|
let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
|
||||||
|
let yMax = 500;
|
||||||
|
let dataShadow = [];
|
||||||
|
for (let i = 0; i < data.length; i++) {
|
||||||
|
dataShadow.push(yMax);
|
||||||
|
}
|
||||||
|
var op = {
|
||||||
|
title: {
|
||||||
|
text
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: dataAxis,
|
||||||
|
axisLabel: {
|
||||||
|
inside: true,
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
z: 10
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#999'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: 'inside'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
showBackground: true,
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: '#83bff6' },
|
||||||
|
{ offset: 0.5, color: '#188df0' },
|
||||||
|
{ offset: 1, color: '#188df0' }
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: '#2378f7' },
|
||||||
|
{ offset: 0.7, color: '#2378f7' },
|
||||||
|
{ offset: 1, color: '#83bff6' }
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: data
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getEchart = (dom, op) => {
|
||||||
|
if (dom) {
|
||||||
|
// 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
|
||||||
|
// 手动移除该属性
|
||||||
|
dom.removeAttribute('_echarts_instance_')
|
||||||
|
var myChart = echarts.init(dom);
|
||||||
|
var option = op;
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
getChartsZfl,
|
||||||
|
getEchart
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.analyse-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.echartDiv100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 20%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,276 @@
|
||||||
|
<template>
|
||||||
|
<div class="analyse-container">
|
||||||
|
<div id="echartDiv1" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv2" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv3" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv4" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv5" class="echartDiv100"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import myApi from "@/api/myApi.js";
|
||||||
|
import BarEchart from "./BarEchart.vue";
|
||||||
|
import Process from "./Process.vue";
|
||||||
|
import Date from "@/components/Date.vue";
|
||||||
|
export default {
|
||||||
|
name: "Analyse",
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
|
||||||
|
});
|
||||||
|
onMounted(async () => {
|
||||||
|
getChartsZfl("echartDiv1", '蒸腾量');
|
||||||
|
getChartsZfl("echartDiv2", 'COD');
|
||||||
|
getChartsZfl("echartDiv3", '氨氮');
|
||||||
|
getChartsZfl("echartDiv4", 'SS');
|
||||||
|
getChartsZfl("echartDiv5", '屋面温度');
|
||||||
|
});
|
||||||
|
const getChartsZfl = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
console.log(dom);
|
||||||
|
var op = {
|
||||||
|
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||||
|
title: {
|
||||||
|
text: text
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: [
|
||||||
|
"00",
|
||||||
|
"01",
|
||||||
|
"02",
|
||||||
|
"03",
|
||||||
|
"04",
|
||||||
|
"05",
|
||||||
|
"06",
|
||||||
|
"07",
|
||||||
|
"08",
|
||||||
|
"09",
|
||||||
|
"10",
|
||||||
|
"11",
|
||||||
|
"12",
|
||||||
|
"13",
|
||||||
|
"14",
|
||||||
|
"15",
|
||||||
|
"16",
|
||||||
|
"17",
|
||||||
|
"18",
|
||||||
|
"19",
|
||||||
|
"20",
|
||||||
|
"21",
|
||||||
|
"22",
|
||||||
|
"23",
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '系统A',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(128, 255, 165)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(1, 191, 236)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统B',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(0, 221, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(77, 119, 255)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统C',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(55, 162, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(116, 21, 219)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统D',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 0, 135)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(135, 0, 157)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统E',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 191, 0)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(224, 62, 76)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getEchart = (dom, op) => {
|
||||||
|
if (dom) {
|
||||||
|
// 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
|
||||||
|
// 手动移除该属性
|
||||||
|
dom.removeAttribute('_echarts_instance_')
|
||||||
|
var myChart = echarts.init(dom);
|
||||||
|
var option = op;
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
getChartsZfl,
|
||||||
|
getEchart
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.analyse-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.echartDiv100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 20%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,276 @@
|
||||||
|
<template>
|
||||||
|
<div class="analyse-container">
|
||||||
|
<div id="echartDiv1" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv2" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv3" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv4" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv5" class="echartDiv100"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import myApi from "@/api/myApi.js";
|
||||||
|
import BarEchart from "./BarEchart.vue";
|
||||||
|
import Process from "./Process.vue";
|
||||||
|
import Date from "@/components/Date.vue";
|
||||||
|
export default {
|
||||||
|
name: "Analyse",
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
|
||||||
|
});
|
||||||
|
onMounted(async () => {
|
||||||
|
getChartsZfl("echartDiv1", '蒸腾量');
|
||||||
|
getChartsZfl("echartDiv2", 'COD');
|
||||||
|
getChartsZfl("echartDiv3", '氨氮');
|
||||||
|
getChartsZfl("echartDiv4", 'SS');
|
||||||
|
getChartsZfl("echartDiv5", '屋面温度');
|
||||||
|
});
|
||||||
|
const getChartsZfl = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
console.log(dom);
|
||||||
|
var op = {
|
||||||
|
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||||
|
title: {
|
||||||
|
text: text
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: [
|
||||||
|
"00",
|
||||||
|
"01",
|
||||||
|
"02",
|
||||||
|
"03",
|
||||||
|
"04",
|
||||||
|
"05",
|
||||||
|
"06",
|
||||||
|
"07",
|
||||||
|
"08",
|
||||||
|
"09",
|
||||||
|
"10",
|
||||||
|
"11",
|
||||||
|
"12",
|
||||||
|
"13",
|
||||||
|
"14",
|
||||||
|
"15",
|
||||||
|
"16",
|
||||||
|
"17",
|
||||||
|
"18",
|
||||||
|
"19",
|
||||||
|
"20",
|
||||||
|
"21",
|
||||||
|
"22",
|
||||||
|
"23",
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '系统A',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(128, 255, 165)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(1, 191, 236)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统B',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(0, 221, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(77, 119, 255)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统C',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(55, 162, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(116, 21, 219)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统D',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 0, 135)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(135, 0, 157)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统E',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 191, 0)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(224, 62, 76)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getEchart = (dom, op) => {
|
||||||
|
if (dom) {
|
||||||
|
// 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
|
||||||
|
// 手动移除该属性
|
||||||
|
dom.removeAttribute('_echarts_instance_')
|
||||||
|
var myChart = echarts.init(dom);
|
||||||
|
var option = op;
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
getChartsZfl,
|
||||||
|
getEchart
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.analyse-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.echartDiv100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 20%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,276 @@
|
||||||
|
<template>
|
||||||
|
<div class="analyse-container">
|
||||||
|
<div id="echartDiv1" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv2" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv3" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv4" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv5" class="echartDiv100"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import myApi from "@/api/myApi.js";
|
||||||
|
import BarEchart from "./BarEchart.vue";
|
||||||
|
import Process from "./Process.vue";
|
||||||
|
import Date from "@/components/Date.vue";
|
||||||
|
export default {
|
||||||
|
name: "Analyse",
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
|
||||||
|
});
|
||||||
|
onMounted(async () => {
|
||||||
|
getChartsZfl("echartDiv1", '蒸腾量');
|
||||||
|
getChartsZfl("echartDiv2", 'COD');
|
||||||
|
getChartsZfl("echartDiv3", '氨氮');
|
||||||
|
getChartsZfl("echartDiv4", 'SS');
|
||||||
|
getChartsZfl("echartDiv5", '屋面温度');
|
||||||
|
});
|
||||||
|
const getChartsZfl = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
console.log(dom);
|
||||||
|
var op = {
|
||||||
|
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||||
|
title: {
|
||||||
|
text: text
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: [
|
||||||
|
"00",
|
||||||
|
"01",
|
||||||
|
"02",
|
||||||
|
"03",
|
||||||
|
"04",
|
||||||
|
"05",
|
||||||
|
"06",
|
||||||
|
"07",
|
||||||
|
"08",
|
||||||
|
"09",
|
||||||
|
"10",
|
||||||
|
"11",
|
||||||
|
"12",
|
||||||
|
"13",
|
||||||
|
"14",
|
||||||
|
"15",
|
||||||
|
"16",
|
||||||
|
"17",
|
||||||
|
"18",
|
||||||
|
"19",
|
||||||
|
"20",
|
||||||
|
"21",
|
||||||
|
"22",
|
||||||
|
"23",
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '系统A',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(128, 255, 165)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(1, 191, 236)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统B',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(0, 221, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(77, 119, 255)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统C',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(55, 162, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(116, 21, 219)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统D',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 0, 135)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(135, 0, 157)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统E',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 191, 0)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(224, 62, 76)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getEchart = (dom, op) => {
|
||||||
|
if (dom) {
|
||||||
|
// 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
|
||||||
|
// 手动移除该属性
|
||||||
|
dom.removeAttribute('_echarts_instance_')
|
||||||
|
var myChart = echarts.init(dom);
|
||||||
|
var option = op;
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
getChartsZfl,
|
||||||
|
getEchart
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.analyse-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.echartDiv100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 20%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,276 @@
|
||||||
|
<template>
|
||||||
|
<div class="analyse-container">
|
||||||
|
<div id="echartDiv1" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv2" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv3" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv4" class="echartDiv100"></div>
|
||||||
|
<div id="echartDiv5" class="echartDiv100"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import myApi from "@/api/myApi.js";
|
||||||
|
import BarEchart from "./BarEchart.vue";
|
||||||
|
import Process from "./Process.vue";
|
||||||
|
import Date from "@/components/Date.vue";
|
||||||
|
export default {
|
||||||
|
name: "Analyse",
|
||||||
|
components: {
|
||||||
|
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
|
||||||
|
});
|
||||||
|
onMounted(async () => {
|
||||||
|
getChartsZfl("echartDiv1", '蒸腾量');
|
||||||
|
getChartsZfl("echartDiv2", 'COD');
|
||||||
|
getChartsZfl("echartDiv3", '氨氮');
|
||||||
|
getChartsZfl("echartDiv4", 'SS');
|
||||||
|
getChartsZfl("echartDiv5", '屋面温度');
|
||||||
|
});
|
||||||
|
const getChartsZfl = (id, text) => {
|
||||||
|
var dom = document.getElementById(id);
|
||||||
|
console.log(dom);
|
||||||
|
var op = {
|
||||||
|
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
|
||||||
|
title: {
|
||||||
|
text: text
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['系统A', '系统B', '系统C', '系统D', '系统E']
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: [
|
||||||
|
"00",
|
||||||
|
"01",
|
||||||
|
"02",
|
||||||
|
"03",
|
||||||
|
"04",
|
||||||
|
"05",
|
||||||
|
"06",
|
||||||
|
"07",
|
||||||
|
"08",
|
||||||
|
"09",
|
||||||
|
"10",
|
||||||
|
"11",
|
||||||
|
"12",
|
||||||
|
"13",
|
||||||
|
"14",
|
||||||
|
"15",
|
||||||
|
"16",
|
||||||
|
"17",
|
||||||
|
"18",
|
||||||
|
"19",
|
||||||
|
"20",
|
||||||
|
"21",
|
||||||
|
"22",
|
||||||
|
"23",
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '系统A',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(128, 255, 165)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(1, 191, 236)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340, 250, 140, 232, 101]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统B',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(0, 221, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(77, 119, 255)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [120, 700, 600, 500, 900, 282, 111, 120, 700, 600, 500, 900, 282, 111, 234, 220, 340, 310, 234, 220, 340, 310, 220, 340]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统C',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(55, 162, 255)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(116, 21, 219)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 132, 201, 334, 190, 130, 320, 132, 201, 334, 190, 130, 220, 220, 320, 132, 201, 334, 190, 130, 220, 190, 130, 220]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统D',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 0, 135)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(135, 0, 157)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 120, 200, 500, 800, 600, 700]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '系统E',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
showSymbol: false,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.8,
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgb(255, 191, 0)'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgb(224, 62, 76)'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 302, 181, 30, 120, 200, 500, 800, 600, 700, 220, 402, 231, 134, 190, 230, 234, 210, 290, 150, 181, 30, 120, 200]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
getEchart(dom, op)
|
||||||
|
}
|
||||||
|
const getEchart = (dom, op) => {
|
||||||
|
if (dom) {
|
||||||
|
// 图表的dom属性中发现了一个特殊的属性：_echarts_instance_，对应的值是一个id，可能是由于再次渲染时这个id未发生改变导致ehcarts认为不需要重新渲染
|
||||||
|
// 手动移除该属性
|
||||||
|
dom.removeAttribute('_echarts_instance_')
|
||||||
|
var myChart = echarts.init(dom);
|
||||||
|
var option = op;
|
||||||
|
|
||||||
|
option && myChart.setOption(option);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
getChartsZfl,
|
||||||
|
getEchart
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.analyse-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
.echartDiv100 {
|
||||||
|
width: 100%;
|
||||||
|
height: 20%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -15,8 +15,8 @@
|
||||||
<script>
|
<script>
|
||||||
import Menus from "@/components/Menus.vue";
|
import Menus from "@/components/Menus.vue";
|
||||||
import Bindex from "@/components/Bindex.vue";
|
import Bindex from "@/components/Bindex.vue";
|
||||||
import Zhibiao from "@/components/Zhibiao.vue";
|
import Zhibiao from "@/components/Zhibiao2.vue";
|
||||||
import Analyse from "@/components/Analyse.vue";
|
import Analyse from "@/components/Ganalyse2.vue";
|
||||||
import History from "@/components/History.vue";
|
import History from "@/components/History.vue";
|
||||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||||
export default {
|
export default {
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
import Menus from "@/components/Menus.vue";
|
import Menus from "@/components/Menus.vue";
|
||||||
import Cindex from "@/components/Cindex.vue";
|
import Cindex from "@/components/Cindex.vue";
|
||||||
import Zhibiao from "@/components/Zhibiao.vue";
|
import Zhibiao from "@/components/Zhibiao.vue";
|
||||||
import Ganalyse from "@/components/Ganalyse.vue";
|
import Ganalyse from "@/components/Ganalyse4.vue";
|
||||||
import History from "@/components/History.vue";
|
import History from "@/components/History.vue";
|
||||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||||
export default {
|
export default {
|
||||||
|
|
|
||||||
|
|
@ -15,8 +15,8 @@
|
||||||
<script>
|
<script>
|
||||||
import Menus from "@/components/Menus.vue";
|
import Menus from "@/components/Menus.vue";
|
||||||
import Gindex from "@/components/Gindex.vue";
|
import Gindex from "@/components/Gindex.vue";
|
||||||
import Zhibiao from "@/components/Zhibiao.vue";
|
import Zhibiao from "@/components/Zhibiao1.vue";
|
||||||
import Ganalyse from "@/components/Ganalyse.vue";
|
import Ganalyse from "@/components/Ganalyse1.vue";
|
||||||
import History from "@/components/History.vue";
|
import History from "@/components/History.vue";
|
||||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||||
export default {
|
export default {
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
import Menus from "@/components/Menus.vue";
|
import Menus from "@/components/Menus.vue";
|
||||||
import Sindex from "@/components/Sindex.vue";
|
import Sindex from "@/components/Sindex.vue";
|
||||||
import Zhibiao from "@/components/Zhibiao.vue";
|
import Zhibiao from "@/components/Zhibiao.vue";
|
||||||
import Analyse from "@/components/Analyse.vue";
|
import Analyse from "@/components/Ganalyse3.vue";
|
||||||
import History from "@/components/History.vue";
|
import History from "@/components/History.vue";
|
||||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||||
export default {
|
export default {
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
import Menus from "@/components/Menus.vue";
|
import Menus from "@/components/Menus.vue";
|
||||||
import Windex from "@/components/Windex.vue";
|
import Windex from "@/components/Windex.vue";
|
||||||
import Report from "@/components/Report.vue";
|
import Report from "@/components/Report.vue";
|
||||||
import Analyse from "@/components/Analyse.vue";
|
import Analyse from "@/components/Ganalyse5.vue";
|
||||||
import History from "@/components/History.vue";
|
import History from "@/components/History.vue";
|
||||||
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
|
||||||
export default {
|
export default {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue