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

src/views/monitoring/equipmentProcessAmount/graph.vue

@@ -0,0 +1,69 @@
+<!-- 
+    filename: graph.vue
+    author: liubin
+    date: 2023-08-31 14:00:02
+    description: 
+-->
+
+<template>
+	<div class="chart-wrapper">
+		<h4>line graph</h4>
+		<div class="chart" ref="chart"></div>
+	</div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+	name: 'LineChartInEquipmentProcessAmount',
+	components: {},
+	props: {},
+	data() {
+		return {
+			chart: null,
+			option: {
+				xAxis: {
+					type: 'category',
+					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+				},
+				yAxis: {
+					type: 'value',
+				},
+				series: [
+					{
+						data: [120, 200, 150, 80, 70, 110, 130],
+						type: 'bar',
+						showBackground: true,
+						backgroundStyle: {
+							color: 'rgba(180, 180, 180, 0.2)',
+						},
+					},
+				],
+			},
+		};
+	},
+	mounted() {
+		if (!this.chart) this.chart = echarts.init(this.$refs.chart);
+		this.chart.setOption(this.option);
+	},
+	beforeDestroy() {
+		this.chart.dispose();
+	},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.chart-wrapper {
+	height: 100%;
+	flex: 1;
+	background: #f1f1f1;
+	padding: 12px;
+}
+
+.chart {
+	height: 100%;
+	width: 100%;
+}
+</style>

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>