add 用量统计&风机频率

src/views/databoard/components/Container.vue

@@ -6,14 +6,23 @@
 -->
 
 <template>
-	<div
-		class="kiln-container"
-		:style="{ width: width ? width + 'px' : 'initial' }">
-		<div class="container-hd">
-			<i class="">
-				<img src="" alt="" />
+	<div class="kiln-container" :class="['kiln-container__' + size]">
+		<div class="container-hd" style="display: flex; align-items: center">
+			<i
+				class=""
+				style="display: inline-block; margin-left: 12px; padding-top: 4px">
+				<img :src="imgSrc" width="18" height="16" alt="" />
 			</i>
-			<span>{{ name }}</span>
+			<span
+				style="
+					color: #fff;
+					font-size: 20px;
+					line-height: 2;
+					margin-left: 6px;
+					display: inline-block;
+				">
+				{{ name }}
+			</span>
 		</div>
 		<div class="container-body">
 			<slot>
@@ -27,11 +36,20 @@
 export default {
 	name: 'KilnContainer',
 	components: {},
-	props: ['name', 'width'],
+	props: ['name', 'width', 'size'],
 	data() {
 		return {};
 	},
-	computed: {},
+	computed: {
+		imgSrc() {
+			switch (this.name) {
+				case '原料用量统计':
+					return require('../assets/move.png');
+				case '风机运行频率':
+					return require('../assets/flow.png');
+			}
+		},
+	},
 	methods: {},
 };
 </script>
@@ -41,9 +59,27 @@ export default {
 	display: inline-block;
 	width: 100%;
 	height: 100%;
-	background: #ccc3;
+	padding: 8px;
 	display: flex;
 	flex-direction: column;
 	position: relative;
+
+	&__small {
+		background: url(../assets/short.png) no-repeat;
+		background-size: 100% 100%;
+		background-position: 0 0;
+	}
+
+	&__middle {
+		background: url(../assets/middle.png) no-repeat;
+		background-size: 100% 100%;
+		background-position: 0 0;
+	}
+
+	&__large {
+		background: url(../assets/high.png) no-repeat;
+		background-size: 100% 100%;
+		background-position: 0 0;
+	}
 }
 </style>

src/views/databoard/components/ShadowRect.vue

@@ -63,7 +63,7 @@ export default {
 .shadow-rect {
 	padding: 8px;
 	border-radius: 2px;
-	box-shadow: inset 0 0 10px 2px #ccc9;
+	box-shadow: inset 0 0 8px 2px #ccc3;
 	color: white;
 	display: flex;
 	align-items: center;

src/views/databoard/components/line.js

@@ -6,10 +6,10 @@ export default {
 			<div
 				class="line"
 				style={{
-					width: this.horizontal ? '100%' : '2px',
-					height: this.horizontal ? '2px' : '100%',
+					width: this.horizontal ? '100%' : '4px',
+					height: this.horizontal ? '4px' : '100%',
 					background:
-						'radial-gradient(ellipse at center, #3CE7FF 100%, #3CE7FF 50%, #3CE7FF 0%)',
+						'radial-gradient(ellipse at center, #3CE7FF, #3CE7FF66, transparent, transparent)',
 				}}></div>
 		);
 	},