add 工艺流程列表

.env.dev

@@ -12,7 +12,8 @@ ENV = 'development'
 VUE_APP_TITLE = 产线监控系统
 
 # 芋道管理系统/开发环境
-VUE_APP_BASE_API = 'http://192.168.0.33:48082'
+VUE_APP_BASE_API = 'http://192.168.1.8:48082'
+# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

src/views/extend/processFlow/index.vue

@@ -0,0 +1,139 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-10-19 10:03:42
+    description: 
+-->
+
+<template>
+	<div class="app-container">
+		<!-- 搜索工作栏 -->
+		<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
+
+		<section class="process-flow">
+			<div class="process-item__add-btn">+ 新增工艺</div>
+			<ProcessItem
+				v-for="n in 5"
+				:key="n"
+				:name="'工艺 ' + n"
+				line="产线1"
+				desc="Lorem ipsum dolor sit amet consectetur, elique! Nemo deserunt quidem facilis eum.sadf sf asdfa skdlj"
+				:isActive="n % 2 == 0" />
+		</section>
+	</div>
+</template>
+
+<script>
+const ProcessItem = {
+	name: 'ProcessItem',
+	components: {},
+	props: ['name', 'line', 'desc', 'isActive'],
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+	render: function (h) {
+		return (
+			<div
+				class={'process-item' + (this.isActive ? ' active' : '')}
+				style="display: flex; flex-direction: column;">
+				<div class="process-item__content" style="flex: 1;">
+					<div class="logo"></div>
+					<div
+						class="info"
+						style="margin-left: 48px; display: flex; flex-direction: column;">
+						<h2 style="margin: 20px 0 0; font-weight: 600; font-size: 18px; ">
+							{this.name}
+						</h2>
+						<h3 style="margin: 0;  font-weight: 400; font-size: 14px; line-height: 2; color: #888;">
+							{this.line}
+						</h3>
+						<p style="margin: 0; height: 48px; width: 80%; text-overflow: ellipse; white-space: no-wrap; font-weight: 400; font-size: 14px; line-height: 1.25; color: #888;">
+							{this.desc}
+						</p>
+					</div>
+				</div>
+				<div
+					class="process-item__footer"
+					style="background: #f7f9fa; border-top: 1px solid #0001;">
+					<el-row gutter={20}>
+						<el-col
+							span={8}
+							style="text-align: center; border-right: 1px solid #0001">
+							<el-button type="text" style="color: #0007; line-height: 1.75">
+								编辑
+							</el-button>
+						</el-col>
+						<el-col
+							span={8}
+							style="text-align: center; border-right: 1px solid #0001">
+							<el-button type="text" style="color: #0007; line-height: 1.75">
+								复制
+							</el-button>
+						</el-col>
+						<el-col span={8} style="text-align: center;">
+							<el-button type="text" style="color: #0007; line-height: 1.75">
+								删除
+							</el-button>
+						</el-col>
+					</el-row>
+				</div>
+			</div>
+		);
+	},
+};
+
+export default {
+	name: 'ProcessFlow',
+	components: { ProcessItem },
+	props: {},
+	data() {
+		return {
+			searchBarFormConfig: [
+				{
+					label: '工艺流程列表',
+				},
+			],
+		};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.process-flow {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+	grid-auto-rows: 200px;
+	gap: 24px;
+}
+
+.process-item__add-btn {
+	display: grid;
+	border: 1px solid #ccc;
+	font-size: 20px;
+	color: #ccc;
+	border-style: dashed;
+	border-radius: 6px;
+	place-items: center;
+	cursor: pointer;
+	transition: all 0.2s ease-in;
+
+	&:hover {
+		color: #555;
+		border-color: #555;
+	}
+}
+
+.process-item {
+	border-radius: 4px;
+	box-shadow: 0 0 6px 1px #ccc;
+	overflow: hidden;
+
+	&.active {
+		box-shadow: 0 0 6px 1px #18c8bf66;
+	}
+}
+</style>

src/views/extend/processFlowView/index.vue

@@ -0,0 +1,25 @@
+<!-- 
+    filename: index.vue
+    author: liubin
+    date: 2023-10-18 12:25:46
+    description: 
+-->
+
+<template>
+	<div>process flow vidivew</div>
+</template>
+
+<script>
+export default {
+	name: 'ProcessFlowView',
+	components: {},
+	props: {},
+	data() {
+		return {};
+	},
+	computed: {},
+	methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>