add 设备加工数量-图表，设备状态和参数，设备全参数查询

src/views/monitoring/equipmentProcessAmount/index.vue

@@ -24,41 +24,44 @@
 			class="app-container equipment-process-amount"
 			style="flex: 1; border-radius: 8px; background: #fff">
 			<!-- main area  -->
-			<div class="main-content">
+			<div class="main-content" style="display: flex; flex-direction: column">
 				<SearchBar
 					:formConfigs="searchBarFormConfig"
 					ref="search-bar"
 					@headBtnClick="handleSearchBarBtnClick" />
 
-				<!-- tabs  -->
-				<div class="table" v-if="mode == 'table'">
+				<transition appear name="vvv" mode="out-in">
 					<base-table
+						v-if="mode == 'table'"
 						:table-props="tableProps"
 						:page="1"
 						:limit="999"
 						:table-data="list"
 						@emitFun="handleEmitFun">
 						<!-- <method-btn
-						v-if="tableBtn.length"
+							v-if="tableBtn.length"
 						slot="handleBtn"
 						label="操作"
 						:method-list="tableBtn"
 						@clickBtn="handleTableBtnClick" /> -->
 					</base-table>
-				</div>
 
-				<div class="graph" v-else>
-					<!-- graph  -->
-				</div>
+					<div class="graph" style="height: 56vh;" v-else>
+						<!-- graph  -->
+						<Graph />
+					</div>
+				</transition>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script>
+import Graph from './graph.vue';
+
 export default {
 	name: 'EquipmentProcessAmount',
-	components: {},
+	components: { Graph },
 	props: {},
 	data() {
 		return {
@@ -127,7 +130,6 @@ export default {
 				// 				},
 				// 			],
 				// 		},
-
 				// 		{
 				// 			name: '产线2',
 				// 			id: 'pl2',
@@ -317,4 +319,22 @@ export default {
 	color: #111;
 	background: #f2f4f7;
 }
+
+.vvv-enter,
+.vvv-leave-to {
+	/* transform: translateY(24px) scaleY(0); */
+	transform: translateY(24px);
+	opacity: 0;
+}
+
+.vvv-enter-active,
+.vvv-leave-active {
+	transition: all 0.3s ease-out;
+}
+
+.vvv-enter-to,
+.vvv-leave {
+	/* transform: translateY(0) scaleY(1); */
+	transform: translateY(0);
+}
 </style>