projects/mesxc-lb #149

Merged
g7hoo merged 28 commits from projects/mesxc-lb into projects/mesxc-test 2023-12-19 09:02:24 +08:00
4 changed files with 257 additions and 6 deletions
Showing only changes of commit ae83da6eb9 - Show all commits

View File

@ -0,0 +1,150 @@
<!--
filename: GasChart.vue
author: liubin
date: 2023-12-12 10:53:49
description:
-->
<template>
<div class="gas-chart"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
name: 'GasChart',
components: {},
props: {},
data() {
const colors = [
'#12FFF5',
'#2760FF',
'#FFD160',
'#E80091',
'#8064ff',
'#ff8a3b',
'#8cd26d',
'#2aa1ff',
];
return {
chart: null,
option: {
color: colors,
grid: { top: 32, right: 12, bottom: 20, left: 48 },
xAxis: {
type: 'category',
data: Array(7)
.fill(1)
.map((_, index) => {
const today = new Date();
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp
).getDate()}`;
})
.reverse(),
axisLabel: {
color: '#fff',
fontSize: 12,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: '#213259',
},
},
},
yAxis: {
name: '单位m³/h',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
type: 'value',
axisLabel: {
color: '#fff',
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: '#213259',
},
},
splitLine: {
lineStyle: {
color: '#213259a0',
},
},
},
series: [
Array(7)
.fill(1)
.map((_) => Math.ceil(Math.random() * 100)),
Array(7)
.fill(1)
.map((_) => Math.ceil(Math.random() * 100)),
Array(7)
.fill(1)
.map((_) => Math.ceil(Math.random() * 100)),
].map((v, i) => ({
name: ['总量', '白班', '夜班'][i],
data: v,
type: 'line',
symbol: 'circle',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// i % 8 8
{ offset: 0, color: colors[i % 8] + '40' },
{ offset: 0.5, color: colors[i % 8] + '20' },
{ offset: 1, color: colors[i % 8] + '00' },
]),
},
})),
tooltip: {
trigger: 'axis',
},
},
};
},
inject: ['resizeChart'],
computed: {
sidebarStatus() {
return this.$store.state.app.sidebar.opened;
},
},
watch: {
sidebarStatus(val) {
console.log('sidebarStatus', val);
this.chart && this.chart.dispose();
setTimeout(() => {
this.chart = echarts.init(this.$el);
this.chart.setOption(this.option);
}, 500);
},
// resizeChart(val) {
// console.log('resizeChart', val);
// val && this.chart && this.chart.resize();
// },
},
mounted() {
this.$el.addEventListener('resize', () => {
console.log('resziing.....');
});
this.chart = echarts.init(this.$el);
this.chart.setOption(this.option);
},
methods: {},
};
</script>
<style scoped lang="scss">
.gas-chart {
width: 100%;
height: 100%;
}
</style>

View File

@ -17,6 +17,11 @@
烟气趋势图
</h2>
<Switcher />
<div>
<span class="lgd lgd-total">总量</span>
<!-- <span class="lgd lgd-day">白班</span>
<span class="lgd lgd-night">夜班</span> -->
</div>
</div>
<div
class="select-line"
@ -29,7 +34,9 @@
:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
<SelectorBtnGroup :options="['日', '周', '月', '年']" />
</div>
<div class="chart" style="height: 193px"></div>
<div class="chart" style="height: 150px; margin-top: 8px;">
<GasChart />
</div>
</div>
</Container>
</template>
@ -40,9 +47,19 @@ import ShadowRect from '../components/ShadowRect.vue';
import SplitLine from '../components/line';
import Switcher from '../components/Switcher.vue';
import EnergeTop from './EnergeTop.vue';
import GasChart from '../components/GasChart.vue';
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
export default {
name: 'EnergeCost',
components: { Container, ShadowRect, SplitLine, Switcher, EnergeTop },
components: {
Container,
ShadowRect,
SplitLine,
Switcher,
EnergeTop,
GasChart,
SelectorBtnGroup,
},
props: {},
data() {
return {};
@ -52,4 +69,33 @@ export default {
};
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.lgd {
color: #fff;
&:not(:last-child) {
margin-right: 12px;
}
}
.lgd::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
margin-right: 4px;
border-radius: 2px;
}
.lgd.lgd-total::before {
background-color: #ff9e00;
}
.lgd.lgd-day::before {
background-color: #08d8cd;
}
.lgd.lgd-night::before {
background-color: #0b58ff;
}
</style>

View File

@ -89,6 +89,11 @@
烟气趋势图
</h2>
<Switcher />
<div>
<span class="lgd lgd-total">总量</span>
<span class="lgd lgd-day">白班</span>
<span class="lgd lgd-night">夜班</span>
</div>
</div>
<div
class="select-line"
@ -101,7 +106,9 @@
:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
<SelectorBtnGroup :options="['日', '周', '月', '年']" />
</div>
<div class="chart" style="height: 220px"></div>
<div class="chart" style="height: 220px">
<GasChart />
</div>
</div>
</Container>
</div>
@ -113,10 +120,18 @@ import ShadowRect from '../components/ShadowRect.vue';
import KilnLine from '../components/line';
import Switcher from '../components/Switcher.vue';
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
import GasChart from '../components/GasChart.vue';
export default {
name: 'GasHandle',
components: { Container, ShadowRect, KilnLine, Switcher, SelectorBtnGroup },
components: {
Container,
ShadowRect,
KilnLine,
Switcher,
SelectorBtnGroup,
GasChart,
},
props: {},
data() {
return {};
@ -129,4 +144,33 @@ export default {
<style scoped lang="scss">
.gas-handle {
}
.lgd {
color: #fff;
&:not(:last-child) {
margin-right: 12px;
}
}
.lgd::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
margin-right: 4px;
border-radius: 2px;
}
.lgd.lgd-total::before {
background-color: #ff9e00;
}
.lgd.lgd-day::before {
background-color: #08d8cd;
}
.lgd.lgd-night::before {
background-color: #0b58ff;
}
</style>

View File

@ -29,7 +29,7 @@
<RightTwo />
</div>
</div>
</div>
</div>
</template>
<script>
@ -44,6 +44,17 @@ export default {
LeftFour,
RightTwo,
},
// provide() {
// return {
// resizeChart: null,
// };
// },
mounted() {
// this.$el.addEventListener('resize', () => {
// console.log('resizzzze...')
// this.resizeChart = Math.random();
// });
},
data() {
return {};
},