almost done

src/views/databoard/kiln/EnergeCost.vue

@@ -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>

src/views/databoard/kiln/GasHandle.vue

@@ -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>

src/views/databoard/kiln/index.vue

@@ -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 {};
 	},