almost done

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>