bug

.eslintrc.js

@@ -1,3 +1,10 @@
+/*
+ * @Author: Do not edit
+ * @Date: 2023-12-27 16:41:40
+ * @LastEditTime: 2023-12-28 13:39:09
+ * @LastEditors: DY
+ * @Description:
+ */
 module.exports = {
   root: true,
   env: {
@@ -12,6 +19,7 @@ module.exports = {
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/multi-word-component-names': 'off'
   }
 }

package.json

@@ -8,7 +8,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.6.5",
     "core-js": "^3.8.3",
+    "element-ui": "^2.15.14",
+    "simple-keyboard": "^3.7.47",
+    "simple-keyboard-layouts": "^3.3.55",
+    "vant": "^2.13.2",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
@@ -26,7 +31,7 @@
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.0",
-    "eslint-plugin-vue": "^8.0.3",
+    "eslint-plugin-vue": "^7.0.0",
     "less": "^4.0.0",
     "less-loader": "^8.0.0",
     "lint-staged": "^11.1.2",

src/App.vue

@@ -1,13 +1,29 @@
+<!--
+ * @Author: Do not edit
+ * @Date: 2023-12-27 16:41:40
+ * @LastEditTime: 2024-02-18 09:26:27
+ * @LastEditors: DY
+ * @Description:
+-->
 <template>
   <div id="app">
-    <nav>
+    <!-- <nav>
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link>
-    </nav>
+    </nav> -->
+    <!-- <HomeView v-if="!$route.meta.keepAlive" /> -->
     <router-view/>
   </div>
 </template>
 
+<script>
+// import HomeView from '@/views/HomeView.vue'
+
+export default {
+  // components: { HomeView }
+}
+</script>
+
 <style lang="less">
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -15,18 +31,6 @@
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-}
+  margin: 0;
-
-nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
 }
 </style>

src/api/login.js

@@ -0,0 +1,37 @@
+/*
+ * @Author: Do not edit
+ * @Date: 2023-11-20 11:05:00
+ * @LastEditTime: 2024-01-09 09:50:55
+ * @LastEditors: DY
+ * @Description:
+ */
+import request from '@/utils/request'
+import { getRefreshToken } from '@/utils/auth'
+
+// 用户登陆
+export function loginUser (data) {
+  return request({
+    url: '/system/auth/login',
+    method: 'post',
+    data: data
+  })
+}
+
+// 使用租户名，获得租户编号
+export function getTenantIdByName (name) {
+  return request({
+    url: '/system/tenant/get-id-by-name',
+    method: 'get',
+    params: {
+      name
+    }
+  })
+}
+
+// 刷新访问令牌
+export function refreshToken () {
+  return request({
+    url: '/system/auth/refresh-token?refreshToken=' + getRefreshToken(),
+    method: 'post'
+  })
+}

src/api/quality.js

@@ -0,0 +1,107 @@
+/*
+ * @Author: Do not edit
+ * @Date: 2023-11-20 11:05:00
+ * @LastEditTime: 2024-04-29 14:13:18
+ * @LastEditors: DY
+ * @Description: 质量和报废
+ */
+import request from '@/utils/request'
+
+// 质量管理
+export function qualityManage (data) {
+  return request({
+    url: '/base/quality-inspection-record/qualityManage',
+    method: 'get',
+    params: data
+  })
+}
+
+// 报废管理
+export function createScrap (data) {
+  return request({
+    url: '/base/quality-scrap-log/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获得所有产线列表
+export function lineList (data) {
+  return request({
+    url: '/base/core-production-line/listAll',
+    method: 'get',
+    params: data
+  })
+}
+
+// 根据产线获得工段
+export function workshopSectionListByLine (data) {
+  return request({
+    url: '/base/core-workshop-section/listByParentId',
+    method: 'get',
+    params: data
+  })
+}
+
+// 获得所有工单列表
+export function workOrderList (data) {
+  return request({
+    url: '/base/core-work-order/listbyfilter',
+    method: 'get',
+    params: data
+  })
+}
+
+// 获得所有报废原因列表
+export function scrapDetList (data) {
+  return request({
+    url: '/base/quality-scrap-det/listAll',
+    method: 'get',
+    params: data
+  })
+}
+
+// 创建质量检查信息
+export function createInspection (data) {
+  return request({
+    url: '/base/quality-inspection-record/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 撤销质量检查信息
+export function deleteByCancel (data) {
+  return request({
+    url: '/base/quality-inspection-record/deleteByCancel',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获得所有报废日志列表
+export function scrapLogList (data) {
+  return request({
+    url: '/base/quality-scrap-log/page',
+    method: 'get',
+    params: data
+  })
+}
+
+// 获得安灯权限
+export function authList (data) {
+  return request({
+    url: '/base/quality-inspection-box-btn-auth/get',
+    method: 'get',
+    params: data
+  })
+}
+
+// 重置按钮
+export function resetBtn (data) {
+  return request({
+    url: '/base/quality-inspection-record/resetBtn',
+    method: 'get',
+    params: data
+  })
+}

src/assets/styles/login.scss

@@ -0,0 +1,571 @@
+/* ===== PC DESIGN ===== */
+$W: 1080;
+$H: 1920;
+// $picW: 438;
+// $picH: 560;
+$picW: 1080;
+$picH: 1118;
+$formW: 420;
+$tabW: $formW / 2;
+// $rowH: 56;
+$rowH: 56;
+$buttonH: 50;
+
+// container
+$containerBgColor: #e6ebf2;
+$containerBgImage: '../assets/bg.png';
+// container-logo
+$logoWidth: 417px;
+$logoHeight: 64px;
+// $logoImage: '../assets/logo/login-logo.png';
+// $cnbmLogo: '../assets/logo/cnbm.png';
+// container-content
+$contentWidth: round($W / $H * 100) * 1vw;
+$contentHeight: round($picH / $W * 100) / 100 * $contentWidth;
+$contentBgColor: #ffffff;
+// container-content-pic
+$picWidth: round($picW / $H * 100) * 1vw;
+$picHeight: inherit;
+// $picImage: '../assets/images/pic.png';
+$picImage: '../assets/login-bg.png';
+// container-content-field
+$fieldWidth: $contentWidth - $picWidth;
+$fieldHeight: inherit;
+// container-content-field-form
+$formWidth: $formW * 1px;
+$tabWidth: $tabW * 1px;
+$rowHeight: $rowH * 1px;
+$buttonHeight: $buttonH * 1px;
+
+// 1080px 高度为基准的 1px
+$base1px: 0.15vh; // 1px / 1080px;
+
+// - - - - - 页面基础设置
+.container {
+	.login-code {
+		width: 33%;
+		height: 38px;
+		float: right;
+		img {
+			cursor: pointer;
+			width: 100%;
+			max-width: 100px;
+			height: auto;
+			vertical-align: middle;
+		}
+	}
+	// 元素
+	width: inherit;
+	height: inherit;
+	min-width: 1080px;
+	min-height: 620px;
+	background-color: $containerBgColor;
+	// background-image: url($containerBgImage);
+	background-size: cover;
+	// 定位
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	// 文字
+	font-size: 14px;
+	font-family: Microsoft YaHei;
+	font-weight: 400;
+	.logo {
+		// 元素
+		width: $logoWidth;
+		height: $logoHeight;
+		// background-image: url($logoImage);
+		// background-size: contain;
+		// 定位
+		position: absolute;
+		top: 50px;
+		left: 50%;
+		margin-left: -$logoWidth/2;
+	}
+	.content {
+		// 元素
+		// width: $contentWidth;
+		// height: $contentHeight;
+		width: 100%;
+		height: 100%;
+		background-color: #ffffff;
+		// box-shadow: 0px calc(16 * 0.12vh) 40px rgba(0, 0, 0, 0.07);
+		// border-radius: 20px;
+		// 定位
+		position: relative;
+		display: flex;
+
+		.pic {
+			flex: 3;
+			width: 1px;
+			min-width: 800px;
+			// 元素
+			// width: $picWidth;
+			height: $picHeight;
+			// height: 10vh;
+			background-image: url($picImage);
+			background-repeat: no-repeat;
+			background-size: 100% 100%;
+			background-position: 0 0;
+			position: relative;
+			&::after {
+				content: '';
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				// background: #f003;
+				display: inline-block;
+			}
+		}
+		.field {
+			position: relative;
+			margin-top: 14vh;
+			flex: 2;
+			// width: 800px;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			.pc-title {
+				width: 100%;
+				text-align: center;
+				clear: both;
+				position: relative;
+				top: calc(-32 * $base1px);
+				height: calc(128 * $base1px);
+
+				.title {
+					margin: 0;
+					margin-left: calc(18px * 0.12vh);
+					font-weight: 400;
+					user-select: none;
+					color: #000;
+					font-size: calc(28 * 0.12vh);
+					line-height: calc(40 * 0.12vh);
+					letter-spacing: calc(2 * 0.12vh);
+
+					.cnbm_logo {
+						height: calc(160 * 0.12vh);
+						width: calc(182 * 0.12vh);
+						position: relative;
+						top: calc(8 * 0.12vh);
+						right: calc(8 * 0.12vh);
+					}
+				}
+
+				.sub-title {
+					margin: 0;
+					margin-left: calc(28 * 0.12vh);
+					font-weight: 400;
+					user-select: none;
+					color: #000;
+					font-size: calc(28 * 0.12vh);
+					line-height: calc(48 * 0.12vh);
+					letter-spacing: 2px;
+				}
+			}
+
+			.mobile-title,
+			.mobile-switch {
+				display: none;
+			}
+
+			.form-cont {
+				// height: 560px;
+				flex: 1;
+				overflow: hidden;
+			}
+
+			.footer {
+				user-select: none;
+				// 元素
+				margin: calc(12 * 0.12vh) 0;
+				height: calc(16 * 0.12vh);
+				line-height: calc(16 * 0.12vh);
+				font-size: calc(12 * 0.12vh);
+				color: #8c8c8c;
+
+				a,
+				a:hover,
+				a:active {
+					color: inherit;
+					text-decoration: none;
+				}
+			}
+
+			.form {
+				margin-top: 0;
+				box-sizing: border-box;
+				width: 100%;
+
+				:deep(.el-tabs__content) {
+					padding: 20px 0 0;
+				}
+				:deep(.el-tabs__item) {
+					user-select: none;
+					// 元素
+					width: $tabWidth;
+					// height: $rowHeight;
+					height: calc(54 * 0.12vh);
+					padding: 0;
+					// 文字
+					line-height: $rowHeight;
+					color: #666666;
+					font-size: calc(14 * 0.12vh);
+					font-weight: 400;
+					text-align: center;
+				}
+				:deep(.el-tabs__item.is-active) {
+					font-weight: 500;
+					color: #2f53eb;
+				}
+				:deep(.el-tabs__active-bar) {
+					height: 3px;
+					border-radius: 2px;
+				}
+				// - - - input
+				:deep(.el-input__inner) {
+					// 元素
+					width: 100%;
+					// height: $rowHeight;
+					height: calc(72 * 0.12vh);
+					background: #f5f5f5;
+					border: 0;
+					border-radius: 28px;
+					// 文字
+					text-align: center;
+					line-height: 19px;
+					color: #262626;
+				}
+				.code:deep(.el-input__inner) {
+					padding: 0 24px;
+					// 文字
+					text-align: left;
+				}
+				:deep(.el-input__inner::-webkit-input-placeholder) {
+					/* WebKit browsers */
+					font-weight: 400;
+					color: #8c8c8c;
+				}
+				:deep(.el-input__inner:-moz-placeholder) {
+					/* Mozilla Firefox 4 to 18 */
+					font-weight: 400;
+					color: #8c8c8c;
+				}
+				:deep(.el-input__inner::-moz-placeholder) {
+					/* Mozilla Firefox 19+ */
+					font-weight: 400;
+					color: #8c8c8c;
+					opacity: 1;
+				}
+				:deep(.el-input__inner:-ms-input-placeholder) {
+					/* Internet Explorer 10+ */
+					font-weight: 400;
+					color: #8c8c8c !important;
+				}
+				:deep(.el-form-item) {
+					position: relative;
+					.button-code {
+						// 元素
+						height: $rowHeight;
+						box-sizing: border-box;
+						// 定位
+						position: absolute;
+						top: 0;
+						right: 20px;
+						z-index: 1;
+						// 文字
+						line-height: 20px;
+						font-size: 14px;
+						font-family: PingFang SC;
+						font-weight: 400;
+						color: #2f53eb;
+						span {
+							padding-left: 15px;
+							border-left: 2px solid #d9d9d9;
+						}
+					}
+				}
+				:deep(.el-form-item__error) {
+					padding-left: 24px;
+				}
+				.button {
+					width: 100%;
+					height: $buttonHeight;
+					background: rgba(24, 144, 255, 0.2);
+					border: 0;
+					border-radius: 24px;
+					margin-bottom: 20px;
+					// 文字
+					line-height: 26px;
+					font-size: calc(18 * 0.12vh);
+					color: #ffffff;
+				}
+				.button-active {
+					background: #2f53eb;
+					box-shadow: 0px 2px 8px rgba(0, 80, 184, 0.2);
+				}
+			}
+		}
+	}
+
+	.login-form {
+		* {
+			user-select: none;
+		}
+		// - - - input
+		:deep(.el-input__inner) {
+			// 元素
+			width: 420px;
+			height: calc(52 * 0.12vh);
+			// height: 66px;
+			color: #262626;
+			font-size: calc(14 * 0.12vh);
+		}
+		:deep(.el-checkbox__label) {
+			font-size: calc(14 * 0.12vh);
+			line-height: calc(12 * 0.12vh);
+		}
+	}
+}
+
+// - - - - - PC 最小尺寸设置
+@media screen and (min-width: 1920px) {
+	.container {
+		.content {
+			.field {
+				flex: initial;
+				// width: 800px;
+				width: 40vw;
+			}
+		}
+	}
+}
+
+@media screen and (min-height: 1024px) {
+	.container {
+		.content {
+			.field {
+				margin-top: 16vh;
+			}
+		}
+	}
+}
+
+@media screen and (max-height: 1024px) {
+	.container {
+		.content {
+			.field {
+				margin-top: 8vh;
+			}
+		}
+	}
+}
+
+
+
+@media screen and (min-width: 599px) and (max-width: 1366px) {
+	.container {
+		// min-width: 599px;
+		min-width: 42vw;
+
+		.content {
+			// width: 710px;
+			// height: 397px;
+			width: 100%;
+			height: 100%;
+			.pic {
+				// width: 314px;
+				display: none;
+			}
+			.field {
+				// margin-top: 6vh;
+				// width: calc(710px - 314px);
+				// left: 314px;
+				// justify-content: center;
+				width: 100%;
+
+				.pc-title {
+					h3 {
+						font-size: 2.4rem !important;
+					}
+				}
+
+				.form {
+					// width: 320px;
+					:deep(.el-input__inner) {
+						width: 320px;
+						height: 56px;
+					}
+					.button {
+						height: 50px;
+					}
+				}
+			}
+		}
+	}
+}
+
+// @media screen and (max-height: 1080px) {
+// 	.container {
+// 		.field {
+// 			transform: scale(0.74);
+// 		}
+// 	}
+// }
+
+/* ===== MOBILE DESIGN ===== */
+$mobileW: 375;
+$mobileH: 812;
+$mobileContentW: 327;
+$mobileContentH: 376;
+$mobileFormW: 280;
+$mobileRowH: 48;
+$mobileButtonH: 48;
+
+// container
+$mobileContainerBgImage: '../assets/images/bg-mobile.png';
+// container-content
+$mobileContentWidth: round($mobileContentW / $mobileW * 100) * 1vw;
+$mobileContentHeight: round($mobileContentH / $mobileW * 100) / 100 *
+	$mobileContentWidth;
+// container-content-field-form
+$mobileFormWidth: round($mobileFormW / $mobileW * 100) * 1vw;
+$mobileRowHeight: $mobileRowH * 1px;
+$mobileButtonHeight: $mobileButtonH * 1px;
+$iconBgImage: '../assets/images/icon.png';
+
+// - - - - - 移动端设置
+@media screen and (max-width: 599px) {
+	.container {
+		// 元素
+		background-image: url($mobileContainerBgImage);
+		min-width: 280px;
+		min-height: 568px;
+		// 文字
+		font-size: 14px;
+		font-family: PingFang SC;
+		font-weight: bold;
+		.logo {
+			display: none;
+		}
+
+		.pc-title {
+			display: none;
+		}
+
+		.content {
+			// 元素
+			width: $mobileContentWidth;
+			height: $mobileContentHeight;
+			min-width: 250px;
+			min-height: 340px;
+			// 定位
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			.pic {
+				display: none;
+			}
+			.field {
+				padding: 0;
+				// 元素
+				width: inherit;
+				min-height: inherit;
+				// 定位
+				left: 0;
+				display: flex;
+				flex-direction: column;
+
+				.mobile-title {
+					// 元素
+					margin: 0;
+					display: block;
+				}
+
+				.form {
+					margin: 0;
+					width: $mobileFormWidth;
+					// - - - tab
+					:deep(.el-tabs__header) {
+						display: none;
+					}
+					:deep(.el-tabs__content) {
+						padding: 0;
+					}
+					// - - - input
+					:deep(.el-input__inner) {
+						height: $mobileRowHeight;
+						line-height: 24px;
+						// 文字
+						text-align: center;
+						color: #262626;
+					}
+					:deep(.el-form-item) {
+						.button-code {
+							// 元素
+							height: $mobileRowHeight;
+						}
+					}
+					.button {
+						height: $mobileButtonHeight;
+						line-height: 24px;
+						color: #ffffff;
+					}
+				}
+
+				.login-form {
+					:deep(.el-input__inner) {
+						height: $mobileRowHeight;
+						line-height: 24px;
+						// 文字
+						text-align: center;
+						color: #262626;
+					}
+
+					:deep(#button-form-item) {
+						margin: 0 !important;
+						button {
+							// 元素
+							height: $mobileRowHeight;
+						}
+					}
+				}
+				.mobile-switch {
+					display: block;
+					line-height: 20px;
+					font-size: 14px;
+					font-weight: 400;
+					color: #595959;
+					margin: 0;
+					.icon {
+						width: 14px;
+						height: 14px;
+						display: inline-block;
+						background-image: url($iconBgImage);
+						background-size: cover;
+					}
+				}
+				.mobile-switch:hover {
+					cursor: pointer;
+				}
+			}
+		}
+
+		.footer {
+			// 元素
+			font-size: calc(12 * 0.12vh);
+			font-family: PingFang SC;
+			font-weight: 400;
+			line-height: 17px;
+			color: #333333;
+			opacity: 0.6;
+			// 定位
+			// position: absolute;
+			bottom: -calc(32 * 0.12vh);
+		}
+	}
+}

src/main.js

@@ -1,9 +1,25 @@
+/*
+ * @Author: Do not edit
+ * @Date: 2023-12-27 16:41:40
+ * @LastEditTime: 2024-03-28 10:45:26
+ * @LastEditors: DY
+ * @Description:
+ */
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import Vant from 'vant'
+import 'vant/lib/index.css'
+import axios from 'axios'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
 
 Vue.config.productionTip = false
+Vue.prototype.$http = axios
+
+Vue.use(Vant)
+Vue.use(ElementUI)
 
 new Vue({
   router,

src/router/index.js

@@ -1,12 +1,28 @@
+/*
+ * @Author: Do not edit
+ * @Date: 2023-12-27 16:41:40
+ * @LastEditTime: 2024-01-29 10:04:05
+ * @LastEditors: DY
+ * @Description:
+ */
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import LoginView from '../views/Login.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
+    name: 'login',
+    component: LoginView,
+    meta: {
+      keepAlive: true
+    }
+  },
+  {
+    path: '/home',
     name: 'home',
     component: HomeView
   },
@@ -17,6 +33,21 @@ const routes = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+  },
+  {
+    path: '/quality',
+    name: 'quality',
+    component: () => import('../views/Quality.vue')
+  },
+  {
+    path: '/scrap',
+    name: 'scrap',
+    component: () => import('../views/Scrap.vue')
+  },
+  {
+    path: '/list',
+    name: 'scrapList',
+    component: () => import('../views/ScrapList.vue')
   }
 ]
 

src/utils/auth.js

@@ -0,0 +1,48 @@
+/*
+ * @Author: Do not edit
+ * @Date: 2024-01-09 09:55:17
+ * @LastEditTime: 2024-01-29 16:56:22
+ * @LastEditors: DY
+ * @Description: cookie
+ */
+
+// ========== 租户相关 ==========
+
+const TenantIdKey = 'TENANT_ID'
+// const TenantNameKey = 'TENANT_NAME'
+
+export function setTenantId (username) {
+  localStorage.setItem(TenantIdKey, username)
+}
+
+export function getTenantId () {
+  return localStorage.getItem(TenantIdKey)
+}
+
+const AccessTokenKey = 'ACCESS_TOKEN'
+const RefreshTokenKey = 'REFRESH_TOKEN'
+
+// ========== Token 相关 ==========
+
+export function getAccessToken () {
+  return localStorage.getItem(AccessTokenKey)
+}
+
+export function getUserId () {
+  return localStorage.getItem('UserId')
+}
+
+export function getRefreshToken () {
+  return localStorage.getItem(RefreshTokenKey)
+}
+
+export function setToken (token) {
+  localStorage.setItem(AccessTokenKey, token.accessToken)
+  localStorage.setItem(RefreshTokenKey, token.refreshToken)
+  localStorage.setItem('UserId', token.userId)
+}
+
+export function removeToken () {
+  localStorage.removeItem(AccessTokenKey)
+  localStorage.removeItem(RefreshTokenKey)
+}

src/utils/request.js

@@ -0,0 +1,107 @@
+/*
+ * @Author: Do not edit
+ * @Date: 2023-11-20 11:02:29
+ * @LastEditTime: 2024-04-29 16:56:15
+ * @LastEditors: DY
+ * @Description:
+ */
+import axios from 'axios'
+import { getTenantId, getAccessToken, getRefreshToken, setToken } from '@/utils/auth'
+import { refreshToken } from '@/api/login'
+import { MessageBox } from 'element-ui'
+
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+
+const service = axios.create({
+  baseURL: 'http://192.168.0.33:48082/admin-api',
+  // baseURL: 'http://192.168.1.104:48082/admin-api',
+  // baseURL: 'http://192.168.1.78:48082/admin-api',
+  timeout: 30000,
+  withCredentials: false
+})
+
+// 是否显示重新登录
+export const isRelogin = { show: false }
+// 是否正在刷新中
+let isRefreshToken = false
+// 请求队列
+let requestList = []
+
+// request拦截器
+service.interceptors.request.use(config => {
+  // 设置租户
+  const tenantId = getTenantId()
+  config.headers['tenant-id'] = tenantId
+  // 是否需要设置 token
+  const isToken = (config.headers || {}).isToken === false
+  if (getAccessToken() && !isToken) {
+    config.headers.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+  }
+  return config
+})
+
+// 响应拦截器
+service.interceptors.response.use(async res => {
+  // return Promise.reject(error)
+  // 访问令牌过期
+  if (res.data.code === 401) {
+    if (!isRefreshToken) {
+      isRefreshToken = true
+      // 1. 如果获取不到刷新令牌，则只能执行登出操作
+      if (!getRefreshToken()) {
+        return handleAuthorized()
+      }
+      // 2. 进行刷新访问令牌
+      try {
+        const refreshTokenRes = await refreshToken()
+        // 2.1 刷新成功，则回放队列的请求 + 当前请求
+        // if (refreshTokenRes.data.code === 0) {
+        setToken(refreshTokenRes.data.data)
+        requestList.forEach(cb => cb())
+        return service(res.config)
+        // } else {
+        //   return handleAuthorized()
+        // }
+      } catch (e) { // 为什么需要 catch 异常呢？刷新失败时，请求因为 Promise.reject 触发异常。
+        // 2.2 刷新失败，只回放队列的请求
+        requestList.forEach(cb => cb())
+        // 提示是否要登出。即不回放当前请求！不然会形成递归
+        return handleAuthorized()
+      } finally {
+        requestList = []
+        isRefreshToken = false
+      }
+    } else {
+      // 添加到队列，等待刷新获取到新的令牌
+      return new Promise(resolve => {
+        requestList.push(() => {
+          res.config.headers.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+          resolve(service(res.config))
+        })
+      })
+    }
+  } else {
+    return res
+  }
+  // if (res.dat)
+})
+
+function handleAuthorized () {
+  if (!isRelogin.show) {
+    isRelogin.show = true
+    MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
+      confirmButtonText: '重新登录',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }
+    ).then(() => {
+      isRelogin.show = false
+      location.href = ''
+    }).catch(() => {
+      isRelogin.show = false
+    })
+  }
+  // return Promise.reject(new Error('无效的会话，或者会话已过期，请重新登录。'))
+}
+
+export default service

src/utils/time.js

@@ -0,0 +1,51 @@
+/*
+ * @Author: Do not edit
+ * @Date: 2024-01-29 15:33:10
+ * @LastEditTime: 2024-01-29 15:39:34
+ * @LastEditors: DY
+ * @Description:
+ */
+// 日期格式化（通用）
+export function parseTime (time, pattern) {
+  if (arguments.length === 0 || !time) {
+    return null
+  }
+  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+      time = parseInt(time)
+    } else if (typeof time === 'string') {
+      // const reg1 = new RegExp(/-/gm)
+      // const reg2 = new RegExp(/\.\d{3}/gm)
+      // time = time.replace(reg1, '/').replace('T', ' ').replace(reg2, '')
+    }
+    if ((typeof time === 'number') && (time.toString().length === 10)) {
+      time = time * 1000
+    }
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const timeStr = format.replace(/{([ymdhisa])+}/g, (result, key) => {
+    let value = formatObj[key]
+    // Note: getDay() returns 0 on Sunday
+    if (key === 'a') {
+      return ['日', '一', '二', '三', '四', '五', '六'][value]
+    }
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return timeStr
+}

src/views/HomeView.vue

@@ -1,18 +1,93 @@
+<!--
+ * @Author: Do not edit
+ * @Date: 2023-12-27 16:41:40
+ * @LastEditTime: 2024-01-29 16:35:29
+ * @LastEditors: DY
+ * @Description: 首页
+-->
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
+    <van-row style="width: 100%" type="flex" justify="space-between">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+      <van-col span="20"></van-col>
+      <van-col span="4" style="text-align: right">
+        <img class="homeIcon" @click="goback" src="./../assets/back.png" alt="">
+      </van-col>
+    </van-row>
+    <div class="centerDiv">
+      <div class="img1" @click="toQuality">
+        <p class="title">质量收集器</p>
+      </div>
+      <div class="img" @click="toScrap">
+        <p class="title">报废管理</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
 
 export default {
   name: 'HomeView',
-  components: {
+  data () {
-    HelloWorld
+    return {
+    }
+  },
+  methods: {
+    goback () {
+      window.electronAPI.closeWindow()
+    },
+    toQuality () {
+      this.$router.push({
+        path: 'quality'
+      })
+    },
+    toScrap () {
+      this.$router.push({
+        path: 'list'
+      })
+    }
   }
 }
 </script>
+
+<style scoped>
+.title {
+  /* width: 175px;
+  height: 45px; */
+  font-size: 32px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  color: #000000;
+  line-height: 45px;
+  letter-spacing: 3px;
+  margin-top: 395px;
+}
+.img {
+  width: 428px;
+  height: 607px;
+  background-image: url('./../assets/scrap.png');
+  background-size: cover;
+}
+.img1 {
+  width: 428px;
+  height: 607px;
+  background-image: url('./../assets/quality.png');
+  background-size: cover;
+}
+.centerDiv {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  height: 80vh;
+  gap: 18px;
+}
+.home {
+  background-image: url('./../assets/home_bg.png');
+  height: 100vh;
+  width: 100vw;
+  padding-top: 10px;
+  background-size: cover;
+  box-sizing: border-box;
+}
+</style>

src/views/Login.vue

@@ -0,0 +1,272 @@
+<!--
+ * @Author: Do not edit
+ * @Date: 2023-12-28 11:21:53
+ * @LastEditTime: 2024-04-10 11:10:56
+ * @LastEditors: DY
+ * @Description: 登陆
+-->
+<template>
+  <div class="login">
+    <van-row style="width: 100%; height: 15px; padding-top: 5px" type="flex" justify="space-between">
+      <van-col span="20"></van-col>
+      <van-col span="4" style="text-align: right">
+        <img class="homeIcon" @click="goback" src="./../assets/back.png" alt="">
+      </van-col>
+    </van-row>
+    <van-row type="flex" justify="space-around">
+      <van-col span="12">
+        <div class="left">
+          <div class="title">
+            <span>Wel</span>
+            <span style="color: white">come</span>
+            <p
+              style="
+                margin: 0;
+                font-size: 16px;
+                letter-spacing: 1px;
+                color: #26b9de;
+                opacity: 75%;
+              ">
+              <span
+                style="
+                  display: inline-block;
+                  height: 12px;
+                  width: 12px;
+                  margin-left: 8px;
+                  margin-right: 2px;
+                  border-radius: 100%;
+                  background: #26b9de;
+                "></span>
+              向世界先进水平挑战，为人类社会文明做贡献
+            </p>
+          </div>
+          <div>
+            <img class="modalImg" src="./../assets/modal.png" alt="">
+          </div>
+        </div>
+      </van-col>
+      <van-col span="12">
+        <div class="right">
+          <div>
+            <img class="xcacImg" src="./../assets/xcac.png" alt="">
+            <p class="xc">许昌安彩新能源科技有限公司</p>
+          </div>
+          <div class="form">
+            <van-form @submit="onSubmit">
+              <van-field
+                v-model="username"
+                name="username"
+                placeholder="用户名 / 手机号"
+                style="margin-bottom: 16px"
+                @focus="focusInput($event)"
+                :rules="[{ required: true, message: '请填写用户名' }]"
+              />
+              <van-field
+                v-model="password"
+                type="password"
+                name="password"
+                placeholder="密码"
+                @focus="focusInput1($event)"
+                :rules="[{ required: true, message: '请填写密码' }]"
+              />
+              <div style="margin-top: 36px; border-radius: 3px">
+                <van-button block type="info" native-type="submit">提交</van-button>
+              </div>
+            </van-form>
+          </div>
+        </div>
+      </van-col>
+    </van-row>
+    <div class="mountain">
+      <p style="margin-top: 80px; color: #3196E7">{{'版权所有：中建材智能自动化有限公司版本' + '\u3000' +'版本：1.0'}}</p>
+    </div>
+    <SimpleKeyboard
+      style="position: fixed; bottom: 0"
+      v-show="simpleShow"
+      v-model="inputValue"
+      ref="keyboardClass"
+      keyboardClass="keyboardClass"
+      @on-change="onChange"
+      @on-key-press="onKeyPress"
+      @close="simpleShow = false"
+      :input="inputValue"
+      :maxLength="30"
+    />
+    <SimpleKeyboard
+      style="position: fixed; bottom: 0"
+      v-show="simpleShow1"
+      v-model="inputValue1"
+      ref="keyboardClass1"
+      keyboardClass="keyboardClass1"
+      @on-change="onChange1"
+      @on-key-press="onKeyPress1"
+      @close="simpleShow1 = false"
+      :input="inputValue1"
+      :maxLength="30"
+    />
+  </div>
+</template>
+
+<script>
+import { loginUser, getTenantIdByName } from '@/api/login'
+import { setTenantId, setToken } from '@/utils/auth'
+import SimpleKeyboard from './components/simpleKeyboard.vue'
+
+export default {
+  name: 'Login',
+  components: { SimpleKeyboard },
+  data () {
+    return {
+      username: 'admin',
+      password: 'admin123',
+      tenantName: '技术中心',
+      simpleShow: false,
+      simpleShow1: false,
+      input: null,
+      inputEle: null,
+      inputEle1: null
+    }
+  },
+  computed: {
+    inputValue: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        this.username = value
+      }
+    },
+    inputValue1: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        this.password = value
+      }
+    }
+  },
+  created () {
+    // 租户
+    getTenantIdByName(this.tenantName).then((res) => {
+      // 设置租户
+      const tenantId = res.data.data
+      if (tenantId && tenantId >= 0) {
+        setTenantId(tenantId)
+      }
+    })
+  },
+  methods: {
+    goback () {
+      window.electronAPI.closeWindow()
+    },
+    focusInput1 (e) {
+      this.inputEle1 = e.srcElement
+      this.simpleShow1 = true
+      this.simpleShow = false
+    },
+    focusInput (e) {
+      this.inputEle = e.srcElement
+      this.simpleShow1 = false
+      this.simpleShow = true
+    },
+    onChange1 (input) {
+      this.inputValue1 = input
+      this.$set(this.password, input)
+      // 解决当输入框为密码输入框时，切换显示/隐藏密码，光标在开头问题，注意：element-ui版本号需为2.15.2及以上
+      this.inputEle1.focus()
+    },
+    onChange (input) {
+      this.inputValue = input
+      this.$set(this.username, input)
+      // 解决当输入框为密码输入框时，切换显示/隐藏密码，光标在开头问题，注意：element-ui版本号需为2.15.2及以上
+      this.inputEle.focus()
+    },
+    onKeyPress1 (button) {
+      console.log('onKeyPress', button)
+    },
+    onKeyPress (button) {
+      console.log('onKeyPress', button)
+    },
+    onSubmit (values) {
+      loginUser(values).then(res => {
+        console.log(res.data)
+        if (res.data.code === 0) {
+          setToken(res.data.data)
+          this.$router.push({
+            path: 'home'
+          })
+        } else {
+          this.$message.error(res.data.msg)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.form {
+  width: 332px;
+  margin: 45px auto;
+}
+.xc {
+  /* width: 342px;
+  height: 32px; */
+  font-size: 24px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 500;
+  color: #FFFFFF;
+  line-height: 32px;
+  letter-spacing: 1px;
+  margin: 0;
+  text-align: center;
+}
+.xcacImg {
+  height: 46px;
+  width: 130px;
+  margin: 80px 148px 0;
+}
+.right {
+  background-image: url('./../assets/transparent.png');
+  height: 534px;
+  width: 458px;
+  margin-top: 100px;
+  margin-left: 40px;
+}
+.modalImg {
+  margin-top: 55px;
+  margin-left: 55px;
+  text-align: left;
+}
+.title {
+  /* width: 297px; */
+  /* height: 59px; */
+  padding-top: 100px;
+  padding-left: 115px;
+  text-align: left;
+  font-size: 66px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 600;
+  color: #1BD1FF;
+  line-height: 58px;
+}
+.left {
+  margin: 0;
+}
+.mountain {
+  background-image: url('./../assets/mountain.png');
+  height: 131px;
+  width: 100vw;
+  background-size: 100%;
+  position: absolute;
+  bottom: 0;
+  text-align: center;
+}
+.login {
+  background-image: url('./../assets/login-bg.png');
+  height: 100vh;
+  background-size: 100%;
+  position: relative;
+  text-align: left;
+}
+</style>

src/views/Quality.vue

@@ -0,0 +1,376 @@
+<!--
+ * @Author: Do not edit
+ * @Date: 2024-01-09 13:48:42
+ * @LastEditTime: 2024-04-29 16:35:33
+ * @LastEditors: DY
+ * @Description:
+-->
+<template>
+  <div class="quality">
+    <van-row type="flex" justify="space-between">
+      <van-col span="5" style="text-align: left">
+        <h2>质量管理器</h2>
+      </van-col>
+      <van-col span="4" style="text-align: right">
+        <img class="homeIcon" @click="toHome" src="./../assets/home.png" alt="">
+      </van-col>
+    </van-row>
+    <van-row gutter="10" style="margin-top: -20px;">
+      <van-col span="12">
+        <van-dropdown-menu >
+          <van-dropdown-item v-model="listQuery.productionLineId" :options="lineArray" @change="getSection" />
+        </van-dropdown-menu>
+      </van-col>
+      <van-col span="12">
+        <van-dropdown-menu>
+          <van-dropdown-item v-model="listQuery.sectionId" :options="sectionArray" @change="getQuality()" />
+        </van-dropdown-menu>
+      </van-col>
+    </van-row>
+    <!-- <div class="count"> -->
+    <van-row gutter="10">
+      <van-col span="12">
+        <div class="count">本班次合计数量：{{ count }}</div>
+      </van-col>
+      <van-col span="12">
+        <van-row gutter="10" style="font-size: 9px">
+          <van-col span="8">
+            <div class="count" @click="getQuality">
+              <img style="width: 15px; height: 15px" src="./../assets/refresh.png" alt="">
+              <span style="margin-left: 10px">刷 新</span>
+            </div>
+          </van-col>
+          <van-col span="8">
+            <div class="count" :style="[{ background: isCancel ? '#FFA927' : '#FFFFFF' }]" @click="isCancel = !isCancel">
+              <img style="width: 15px; height: 15px" src="./../assets/cancel.png" alt="">
+              <span style="margin-left: 10px">撤 销</span>
+            </div>
+          </van-col>
+          <van-col span="8">
+            <div v-show="showReset" class="count" @click="reset">
+              <img style="width: 15px; height: 15px" src="./../assets/reset.png" alt="">
+              <span style="margin-left: 10px">重 置</span>
+            </div>
+          </van-col>
+        </van-row>
+      </van-col>
+    </van-row>
+    <div style="height: 7px"></div>
+    <el-scrollbar class="scollbar" ref="scrollbar" style="height: 75%;" >
+      <el-backtop target=".scollbar .el-scrollbar__wrap" :visibility-height="10" :bottom="50">
+        <i class="el-icon-caret-top" />
+      </el-backtop>
+      <div class="content" v-for="(item, index) in typeList" :key="index">
+        <van-row type="flex" align="center" style="margin-left: -20px">
+          <van-col span="1">
+            <img style="width: 20px; height: 20px;" src="./../assets/icon.png" alt="">
+          </van-col>
+          <van-col span="8">
+            <p style="text-align: left; color: #276BFF">{{ item[0].typeName }}</p>
+          </van-col>
+        </van-row>
+        <van-row type="flex">
+          <van-col span="6" v-for="it in item" :key="it.id">
+            <div :class=" isCancel ? 'flexCancelItem' : 'flexItem'">
+            <!-- <div class="flexItem"> -->
+              <!-- <div> -->
+                <div class="contain">
+                  <div class="leftDiv">{{ it.count }}</div>
+                </div>
+              <!-- </div> -->
+              <!-- <div> -->
+                <div class="rightDiv" @click="addRecord(it)">{{ it.detContent }}</div>
+              <!-- </div> -->
+            </div>
+          </van-col>
+        </van-row>
+      </div>
+    </el-scrollbar>
+    <!-- <div class="ext"></div> -->
+    <!-- <el-backtop target=".quality" :visibility-height="10" :bottom="10">
+      <i class="el-icon-caret-top" />
+    </el-backtop> -->
+  </div>
+</template>
+
+<script>
+import { qualityManage, createInspection, deleteByCancel, authList, resetBtn } from '@/api/quality'
+import { getUserId } from '@/utils/auth'
+
+export default {
+  name: 'Quality',
+  data () {
+    return {
+      isCancel: false,
+      lineArray: [],
+      sectionArray: [],
+      listQuery: {
+        productionLineId: '',
+        sectionId: ''
+      },
+      count: 0,
+      typeList: [],
+      showReset: false
+    }
+  },
+  mounted () {
+    this.getLine()
+  },
+  methods: {
+    reset () {
+      resetBtn(this.listQuery).then(res => {
+        if (res.data.data === true) {
+          this.typeList.forEach(item => {
+            item.forEach(it => {
+              it.count = 0
+            })
+          })
+          this.count = 0
+          this.$message.success('重置完成！')
+        } else {
+          this.typeList = []
+          this.count = 0
+        }
+      })
+    },
+    addRecord (value) {
+      const now = new Date().getTime() // 创建一个表示当前时间的Date对象
+      // const formattedTime = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
+      // console.log(formattedTime)
+      if (!this.isCancel) {
+        createInspection({
+          ...this.listQuery,
+          inspectionDetId: value.detId,
+          checkTime: now,
+          source: 1
+        }).then(res => {
+          if (res.data.code === 0) {
+            // this.typeList.forEach(element => {
+            //   element.forEach(el => {
+            //     el.active = false
+            //   })
+            // })
+            // value.active = true
+            // this.$set(value, 'active', true)
+            value.count++
+            this.count++
+          }
+        })
+      } else {
+        if (value.count > 0) {
+          deleteByCancel({
+            ...this.listQuery,
+            inspectionDetId: value.detId,
+            checkTime: now
+          }).then(res => {
+            if (res.data.code === 0) {
+              // this.typeList.forEach(element => {
+              //   element.forEach(el => {
+              //     el.active = false
+              //   })
+              // })
+              // value.active = true
+              // this.$set(value, 'active', true)
+              value.count--
+              this.count--
+            }
+          })
+        } else {
+          this.$message.warning('数量小于0，不可操作')
+        }
+      }
+    },
+    toHome () {
+      this.$router.push({
+        path: 'home'
+      })
+    },
+    getQuality () {
+      // qualityManage().then(res => {
+      qualityManage(this.listQuery).then(res => {
+        if (res.data.code === 0 && JSON.stringify(res.data.data) !== '{}') {
+          this.typeList = Object.values(res.data.data)
+          this.count = this.typeList[0][0].sunCount
+          if (this.typeList[0][0]?.resetMethod === 1) {
+            this.showReset = true
+          } else {
+            this.showReset = false
+          }
+        } else {
+          this.typeList = []
+          this.count = 0
+        }
+      })
+    },
+    getLine () {
+      authList({ userId: getUserId() }).then(res => {
+        if (res && res?.data?.data?.datas?.length > 0) {
+          this.lineArray = res.data.data.datas.map(item => {
+            item.text = item.name
+            item.value = item.id
+            return item
+          })
+          this.listQuery.productionLineId = this.lineArray[0].value
+          this.getSection(this.listQuery.productionLineId)
+        } else {
+          this.lineArray = []
+          this.listQuery.productionLineId = ''
+        }
+      })
+    },
+    getSection (value) {
+      const temp = this.lineArray.filter(item => {
+        return item.id === value
+      })
+      this.sectionArray = temp[0].children.map(it => {
+        return {
+          text: it.name,
+          value: it.id
+        }
+      })
+      if (this.sectionArray.length > 0) {
+        this.listQuery.sectionId = this.sectionArray[0].value
+        this.getQuality()
+      } else {
+        this.listQuery.sectionId = ''
+      }
+      // workshopSectionListByLine({ id: this.listQuery.productionLineId }).then(res => {
+      //   this.sectionArray = res.data.data.map(item => {
+      //     return {
+      //       text: item.name,
+      //       value: item.id
+      //     }
+      //   })
+      // })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.flexItem {
+  display: flex;
+  margin-right: 20px;
+  width: 226px;
+  line-height: 72px;
+  box-shadow: 5px 6px 8px 0px rgba(206,212,226,0.72), inset 6px 0px 6px 0px #FFFFFF;
+  /* background-color: #FFFFFF; */
+   background-image: url('./../assets/2.png');
+   background-size: 100%;
+}
+.flexItem:active {
+  background-image: url('./../assets/1.png');
+  background-size: cover;
+}
+.flexCancelItem {
+  display: flex;
+  margin-right: 20px;
+  width: 226px;
+  line-height: 72px;
+  box-shadow: 5px 6px 8px 0px rgba(206,212,226,0.72), inset 6px 0px 6px 0px #FFFFFF;
+  /* background-color: #FFFFFF; */
+   background-image: url('./../assets/cancel1.png');
+   background-size: 100%;
+}
+.flexCancelItem:active {
+  background-image: url('./../assets/cancel2.png');
+  background-size: cover;
+}
+.flexActive {
+  display: flex;
+  margin-right: 20px;
+  width: 226px;
+  line-height: 72px;
+  box-shadow: 5px 6px 8px 0px rgba(206,212,226,0.72), inset 6px 0px 6px 0px #FFFFFF;
+  /* background-color: #456DFF; */
+  background-image: url('./../assets/1.png');
+  background-size: cover;
+}
+.rightDiv {
+  border-radius: 7px;
+  /* height: 72px; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 24px;
+  width: 140px;
+  text-align: left;
+  padding-left: 10px;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: center;
+  /* text-align: justify; */
+  text-overflow: ellipsis;
+  /* background-color: #276BFF; */
+}
+/* .rightDiv::after {
+  content: "...";
+} */
+.contain {
+  border-radius: 7px 36px 36px 7px;
+  height: 72px;
+  width: 80px;
+  line-height: 72px;
+  /* background-color: #FFFFFF; */
+  /* margin: 5px 0 5px 0; */
+}
+.leftDiv {
+  border-radius: 7px 36px 36px 7px;
+  /* background-color: #456DFF; */
+  height: 72px;
+  width: 77px;
+  color: white;
+  line-height: 72px;
+  /* margin: 5px 0 5px 0; */
+}
+.content {
+  width: 100%;
+  /* height: 40px; */
+  /* display: flex; */
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+  background: #FFFFFF;
+  border-radius: 8px;
+  opacity: 0.7;
+  backdrop-filter: blur(50px);
+  line-height: 40px;
+  font-size: 18px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  color: #000000;
+  margin-bottom: 7px;
+  padding: 0 20px 20px 20px;
+  box-sizing: border-box;
+  /* overflow: scroll;
+  height: 100%; */
+}
+.count {
+  width: 100%;
+  height: 40px;
+  background: #FFFFFF;
+  border-radius: 8px;
+  opacity: 0.7;
+  backdrop-filter: blur(50px);
+  line-height: 40px;
+  font-size: 18px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 600;
+  color: #000000;
+  margin-top: 7px;
+}
+.homeIcon {
+  width: 84px;
+  height: 84px;
+}
+.quality {
+  background-image: url('./../assets/quality-bg.png');
+  background-size: cover;
+  height: 100vh;
+  width: 100vw;
+  padding: 20px 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+</style>

src/views/Scrap.vue

@@ -0,0 +1,596 @@
+<!--
+ * @Author: Do not edit
+ * @Date: 2024-01-09 13:49:03
+ * @LastEditTime: 2024-04-22 09:36:10
+ * @LastEditors: DY
+ * @Description:
+-->
+<template>
+  <div class="scrap">
+    <!-- <div style="float: right" type="primary" size="small" plain @click="goback()">
+      <img class="homeIcon" src="./../assets/home.png" alt="">
+    </div>
+    <div style="height: 60px;">
+      <h2>报废管理</h2>
+    </div> -->
+    <!-- <van-row type="flex" class="search" justify="center">
+      <el-input v-model="form.data" @focus="onInputFocus('form.data',form.data)" ref="searchInput" placeholder="请输入关键词" >
+      </el-input>
+     </van-row> -->
+    <van-row type="flex" justify="space-between">
+      <van-col span="5" style="text-align: left">
+        <h2>报废管理</h2>
+      </van-col>
+      <van-col span="4" style="text-align: right">
+        <img class="homeIcon" @click="goback" src="./../assets/home.png" alt="">
+      </van-col>
+    </van-row>
+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <div class="whiteForm">
+            <el-form-item label="工单选择" prop="workOrderId">
+              <div slot="label" class="labelDiv">
+                <img class="formLabelIcon" src="./../assets/form1.png" alt="">
+                工单选择
+              </div>
+              <el-select v-model="ruleForm.workOrderId" filterable clearable @focus="focusInput($event)" placeholder="请选择工单" style="width: 100%; display: block">
+                <el-option v-for="(item, index) in workOrderList" :key="index" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="whiteForm">
+            <el-form-item label="报废数量" prop="num">
+              <div slot="label" class="labelDiv">
+                <img class="formLabelIcon" src="./../assets/form2.png" alt="">
+                报废数量
+              </div>
+              <el-input v-model="ruleForm.num" @focus="showNumber" clearable controls-position="right" :min="0" placeholder="请输入报废数量" style="width: 100%; display: block"></el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+      <van-number-keyboard
+        v-model="ruleForm.num"
+        :show="show"
+        @blur="show = false"
+        @input="onInput"
+        @delete="onDelete"
+      />
+      <el-form-item label="报废原因" prop="detName" class="reson">
+        <div slot="label" class="labelDiv">
+          <img class="formLabelIcon" src="./../assets/form3.png" alt="">
+          报废原因
+        </div>
+        <br>
+        <div class="resonDiv">
+          <el-checkbox-group v-model="ruleForm.detName" style="width: 100%; display: block; text-align: left">
+            <el-checkbox v-for="(item, index) in scrapList" :key="index" :label="item.id" :name="item.id">{{ item.content }}</el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </el-form-item>
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <div class="whiteForm">
+            <el-form-item label="产线" prop="lineId">
+              <div slot="label" class="labelDiv">
+                <img class="formLabelIcon" src="./../assets/form4.png" alt="">
+                产线
+              </div>
+              <el-select v-model="ruleForm.lineId" filterable clearable placeholder="请选择产线" @focus="focusInput1($event)" style="width: 100%; display: block" @change="getSection">
+                <el-option v-for="(item, index) in lineArray" :key="index" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="whiteForm">
+            <el-form-item label="工段" prop="sectionId">
+              <div slot="label" class="labelDiv">
+                <img class="formLabelIcon" src="./../assets/form5.png" alt="">
+                工段
+              </div>
+              <el-select v-model="ruleForm.sectionId" filterable clearable placeholder="请选择产线" @focus="focusInput2($event)" style="width: 100%; display: block">
+                <el-option v-for="(item, index) in sectionArray" :key="index" :label="item.name" :value="item.id"></el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <div class="whiteForm">
+            <el-form-item label="时间" prop="logTime">
+              <div slot="label" class="labelDiv">
+                <img class="formLabelIcon" src="./../assets/form6.png" alt="">
+                时间
+              </div>
+              <div class="timeDiv">
+                <el-date-picker type="datetime" placeholder="选择日期" value-format="timestamp" v-model="ruleForm.logTime" style="width: 100%;">
+                </el-date-picker>
+                <div style="margin-right: 10px" @click="refresh">
+                  <i class="el-icon-refresh-right" />
+                </div>
+              </div>
+            </el-form-item>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="whiteForm">
+            <el-form-item label="备注" prop="remark">
+              <div slot="label" class="labelDiv">
+                <img class="formLabelIcon" src="./../assets/form7.png" alt="">
+                备注
+              </div>
+              <el-input v-model="ruleForm.remark" @focus="focusInput3($event)" placeholder="请输入备注"></el-input>
+              <!-- <el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleForm.logTime" style="width: 100%;"></el-date-picker> -->
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-form-item>
+          <!-- <el-button @click="resetForm('ruleForm')">取消</el-button> -->
+          <!-- <el-button :disabled="disabled" type="primary" @click="submitForm('ruleForm')"> <i class="el-icon-sub"></i>11</el-button> -->
+          <el-button class="subButton" icon="el-icon-circle-check" :disabled="disabled" type="primary" @click="submitForm('ruleForm')">提交</el-button>
+        </el-form-item>
+      </el-row>
+    </el-form>
+    <SimpleKeyboard
+      v-show="simpleShow"
+      v-model="inputValue"
+      ref="keyboardClass"
+      keyboardClass="keyboardClass"
+      @on-change="onChange"
+      @on-key-press="onKeyPress"
+      @close="simpleShow = false"
+      :input="inputValue"
+      :maxLength="30"
+    />
+    <SimpleKeyboard
+      v-show="simpleShow1"
+      v-model="inputValue1"
+      ref="keyboardClass1"
+      keyboardClass="keyboardClass1"
+      @on-change="onChange1"
+      @on-key-press="onKeyPress1"
+      @close="simpleShow1 = false"
+      :input="inputValue1"
+      :maxLength="30"
+    />
+    <SimpleKeyboard
+      v-show="simpleShow2"
+      v-model="inputValue2"
+      ref="keyboardClass2"
+      keyboardClass="keyboardClass2"
+      @on-change="onChange2"
+      @on-key-press="onKeyPress2"
+      @close="simpleShow2 = false"
+      :input="inputValue2"
+      :maxLength="30"
+    />
+    <SimpleKeyboard
+      v-show="simpleShow3"
+      v-model="inputValue3"
+      ref="keyboardClass3"
+      keyboardClass="keyboardClass3"
+      @on-change="onChange3"
+      @on-key-press="onKeyPress3"
+      @close="simpleShow3 = false"
+      :input="inputValue3"
+      :maxLength="30"
+    />
+    <!-- <KeysInput ref="keysInput" @input="updateInputValue" /> -->
+  </div>
+</template>
+
+<script>
+import { workOrderList, scrapDetList, createScrap, authList } from '@/api/quality'
+import SimpleKeyboard from './components/simpleKeyboard.vue'
+import { getUserId } from '@/utils/auth'
+// import KeysInput from './components/keyboard'
+
+export default {
+  components: { SimpleKeyboard },
+  data () {
+    return {
+      // form: {
+      //   data: '11'
+      // },
+      ruleForm: {
+        workOrderId: '',
+        num: '',
+        detId: '',
+        detName: [],
+        lineId: undefined,
+        sectionId: undefined,
+        remark: undefined,
+        source: 1,
+        logTime: new Date().getTime()
+      },
+      show: false,
+      simpleShow: false,
+      simpleShow1: false,
+      simpleShow2: false,
+      simpleShow3: false,
+      input: null,
+      inputEle: null,
+      inputEle1: null,
+      inputEle2: null,
+      inputEle3: null,
+      // field: '',
+      workOrderList: [],
+      lineArray: [],
+      scrapList: [],
+      sectionArray: [],
+      disabled: true,
+      subIconUrl: require('@/assets/sub-right.png'),
+      rules: {
+        // workOrderId: [
+        //   { required: true, message: '请选择工单', trigger: 'change' }
+        // ],
+        // num: [
+        //   { required: true, message: '请输入报废数量', trigger: 'blur' }
+        // ],
+        // detName: [
+        //   { required: true, message: '请选择报废原因', trigger: 'change' }
+        // ]
+      }
+    }
+  },
+  watch: {
+    ruleForm: {
+      handler (val) {
+        console.log('场次', val)
+        if (val.workOrderId && val.num && val.detName.length > 0) {
+          this.disabled = false
+        }
+      },
+      deep: true
+      // immediate: true
+    }
+  },
+  computed: {
+    inputValue: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        this.ruleForm.workOrderId = value
+        // this.$emit('inputChange', value, this.field)
+      }
+    },
+    inputValue1: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        this.ruleForm.lineId = value
+      }
+    },
+    inputValue2: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        this.ruleForm.sectionId = value
+      }
+    },
+    inputValue3: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        this.ruleForm.remark = value
+      }
+    }
+  },
+  mounted () {
+    this.getDict()
+    this.ruleForm = {
+      workOrderId: '',
+      num: '',
+      detId: '',
+      detName: [],
+      lineId: undefined,
+      sectionId: undefined,
+      remark: undefined,
+      source: 1,
+      logTime: new Date().getTime()
+    }
+  },
+  methods: {
+    onInputFocus (event, value) {
+      // 当前input获取焦点时，显示键盘
+      console.log('122', event, value)
+      this.$refs.keysInput.showKeyboard = true
+      // 传入绑定值（字符串）
+      this.$refs.keysInput.key = event
+      // 传入当前值
+      this.$refs.keysInput.setKeyboardInput(value)
+    },
+    updateInputValue (value) {
+      console.log('123232', value)
+      // 根据key 回写input值
+      const parameter = value.key.split('.')
+      console.log('122', parameter)
+      if (parameter.length === 1) {
+        value.key = value.value
+      } else {
+        // let par0 = parameter[0]
+        // let par1 = parameter[1]
+        // par0.par1 = value.value
+      }
+    },
+    refresh () {
+      this.ruleForm.logTime = new Date().getTime()
+    },
+    getSection (value) {
+      const temp = this.lineArray.filter(item => {
+        return item.id === value
+      })
+      this.sectionArray = temp[0].children
+      if (this.sectionArray.length > 0) {
+        this.ruleForm.sectionId = this.sectionArray[0].id
+      } else {
+        this.ruleForm.sectionId = ''
+      }
+      // workshopSectionListByLine({ id: this.ruleForm.lineId }).then(res => {
+      //   this.sectionArray = res.data.data
+      // })
+    },
+    inputFun () {
+      this.$emit('input')
+    },
+    showNumber () {
+      this.show = true
+      this.simpleShow = false
+      this.simpleShow1 = false
+      this.simpleShow2 = false
+      this.simpleShow3 = false
+    },
+    focusInput (e) {
+      this.inputEle = e.srcElement
+      // 关闭所有keyboard
+      // const arr = document.querySelectorAll('.hg-theme-default')
+      // arr.forEach((ele) => {
+      //   ele.style.visibility = 'hidden'
+      // })
+      // // 打开当前输入框的keyboard
+      // const currentKeyborad = this.$refs[this.keyboardClass]
+      // currentKeyborad.$el.style.visibility = 'visible'
+      this.simpleShow = true
+      this.simpleShow1 = false
+      this.simpleShow2 = false
+      this.simpleShow3 = false
+      this.show = false
+      // this.$emit('focus')
+    },
+    focusInput1 (e) {
+      this.inputEle1 = e.srcElement
+      this.simpleShow1 = true
+      this.simpleShow = false
+      this.simpleShow2 = false
+      this.simpleShow3 = false
+      this.show = false
+    },
+    focusInput2 (e) {
+      this.inputEle2 = e.srcElement
+      this.simpleShow2 = true
+      this.simpleShow1 = false
+      this.simpleShow = false
+      this.simpleShow3 = false
+      this.show = false
+    },
+    focusInput3 (e) {
+      this.inputEle3 = e.srcElement
+      this.simpleShow3 = true
+      this.simpleShow2 = false
+      this.simpleShow1 = false
+      this.simpleShow = false
+      this.show = false
+    },
+    onChange1 (input) {
+      this.inputValue1 = input
+      this.$set(this.ruleForm, 'lineId', input)
+      // 解决当输入框为密码输入框时，切换显示/隐藏密码，光标在开头问题，注意：element-ui版本号需为2.15.2及以上
+      this.inputEle1.focus()
+    },
+    onChange2 (input) {
+      this.inputValue2 = input
+      this.$set(this.ruleForm, 'sectionId', input)
+      // 解决当输入框为密码输入框时，切换显示/隐藏密码，光标在开头问题，注意：element-ui版本号需为2.15.2及以上
+      this.inputEle2.focus()
+    },
+    onChange3 (input) {
+      this.inputValue3 = input
+      // this.$set(this.ruleForm, 'remark', input)
+      // 解决当输入框为密码输入框时，切换显示/隐藏密码，光标在开头问题，注意：element-ui版本号需为2.15.2及以上
+      this.inputEle3.focus()
+    },
+    onChange (input) {
+      this.inputValue = input
+      this.$set(this.ruleForm, 'workOrderId', input)
+      console.log('输出', input)
+      // 解决当输入框为密码输入框时，切换显示/隐藏密码，光标在开头问题，注意：element-ui版本号需为2.15.2及以上
+      // this.inputEle.focus()
+    },
+    onKeyPress3 (button) {
+      console.log('onKeyPress', button)
+    },
+    onKeyPress2 (button) {
+      console.log('onKeyPress', button)
+    },
+    onKeyPress1 (button) {
+      console.log('onKeyPress', button)
+    },
+    onKeyPress (button) {
+      console.log('onKeyPress', button)
+    },
+    onInput (value) {
+      console.log('value', value, this.ruleForm.num)
+    },
+    onDelete () {
+      // Toast('删除');
+    },
+    goback () {
+      // this.$router.go(-1)
+      this.$router.push({
+        path: 'home'
+      })
+    },
+    async getDict () {
+      const workRes = await workOrderList()
+      this.workOrderList = workRes?.data?.data
+      // await lineList().then(res => {
+      //   this.lineArray = res?.data?.data.map(item => {
+      //     return {
+      //       name: item.name,
+      //       id: item.id
+      //     }
+      //   })
+      // })
+      await authList({ userId: getUserId() }).then(res => {
+        // console.log('res', res.data.data)
+        if (res && res?.data?.data?.datas.length > 0) {
+          this.lineArray = res.data.data.datas
+          this.ruleForm.lineId = this.lineArray[0].id
+          this.getSection(this.ruleForm.lineId)
+        } else {
+          this.lineArray = []
+        }
+      })
+      const scrapRes = await scrapDetList()
+      this.scrapList = scrapRes?.data?.data
+      // this.scrapList.push({
+      //   content: '其他',
+      //   id: '10086'
+      // })
+    },
+    submitForm (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.ruleForm.detId = this.ruleForm.detName.join(',')
+          createScrap(this.ruleForm).then(res => {
+            console.log(res.data)
+            if (res.data.code === 0) {
+              this.$message({
+                message: '提交成功！',
+                type: 'success'
+              })
+              this.$router.push({
+                path: 'list'
+              })
+            } else {
+              this.$message.error(res.data.msg)
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    resetForm (formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
+
+<style>
+.labelDiv {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+}
+.formLabelIcon {
+  width: 17px;
+  height: 17px;
+  margin-right: 8px;
+}
+.timeDiv {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+.subButton {
+  background-color: #456DFF;
+  width: 168px;
+  height: 56px;
+  box-shadow: 0px 16px 16px 0px rgba(25,70,170,0.31);
+  border-radius: 31px;
+  font-size: 20px;
+  text-align: center;
+}
+.el-checkbox {
+  background: #EDF0FD;
+  box-shadow: 0px 6px 8px 0px #D2D9E8, inset 0px 6px 6px 0px #FFFFFF;
+  width: 206px;
+  height: 56px;
+  border-radius: 7px;
+  line-height: 56px;
+  padding: 5px;
+  box-sizing: border-box;
+  margin-bottom: 8px;
+}
+.reson {
+  background-color: #FFFFFF;
+  border-radius: 8px;
+  margin-bottom: 8px !important;
+  padding-bottom: 15px;
+}
+.el-checkbox__label {
+  padding-right: 10px !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 160px;
+  line-height: 1;
+}
+.demo-ruleForm .reson .el-form-item__content {
+  margin-left: 20px !important;
+}
+.resonDiv {
+  display: flex;
+  width: 100%;
+}
+.whiteForm {
+  background-color: #ffffff;
+  border-radius: 8px;
+  margin-bottom: 8px;
+}
+.el-input__inner {
+  border: none;
+}
+.el-form-item {
+  margin: 0;
+}
+.demo-ruleForm .reson .el-form-item__label {
+  border: none;
+}
+.demo-ruleForm .el-form-item__label {
+  color: #276BFF;
+  border-right: 1px solid #000000;
+  height: 18px;
+  line-height: 18px;
+  margin: 11px 0;
+}
+.homeIcon {
+  width: 84px;
+  height: 84px;
+}
+.scrap {
+  background-image: url('./../assets/quality-bg.png');
+  background-size: cover;
+  height: 100vh;
+  width: 100vw;
+  padding: 20px 24px;
+  box-sizing: border-box;
+  /* font-size: 20px; */
+}
+</style>

src/views/ScrapList.vue

@@ -0,0 +1,159 @@
+<!--
+ * @Author: Do not edit
+ * @Date: 2023-12-29 10:01:55
+ * @LastEditTime: 2024-04-28 16:41:33
+ * @LastEditors: DY
+ * @Description: 报废列表
+-->
+<template>
+  <div class="list">
+    <van-row type="flex" justify="space-between">
+      <van-col span="5" style="text-align: left">
+        <h2>报废管理</h2>
+      </van-col>
+      <!-- <van-col span="4">
+        <img class="homeIcon" @click="goback" src="./../assets/record.png" alt="">
+      </van-col> -->
+      <van-col span="8" style="text-align: right">
+        <img class="homeIcon" @click="toScrap" src="./../assets/record.png" alt="">
+        <img class="homeIcon" @click="goback" src="./../assets/home.png" alt="">
+      </van-col>
+    </van-row>
+    <el-table
+    :data="tableData"
+    border
+    :header-cell-style="{ background: 'rgba(210, 220, 242, 1)', color: '#000', height: '33px' }"
+    show-header
+    max-height="600"
+    style="width: 100%">
+      <el-table-column
+      type="index" :index="indexMethod" label="序号" width="60" />
+      <el-table-column v-for="(item, index) in tableProps" :key="index" :prop="item.prop" :label="item.label" />
+    </el-table>
+    <el-pagination
+      class="pagination"
+      background
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="listQuery.pageNo"
+      :page-sizes="[10, 20, 30]"
+      :page-size="listQuery.pageSize"
+      layout="prev, pager, next"
+      :total="total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { scrapLogList } from '@/api/quality'
+import { parseTime } from '@/utils/time'
+
+const tableProps = [
+  {
+    prop: 'scrapTime',
+    label: '报废时间'
+  },
+  {
+    prop: 'lineName',
+    label: '产线名称'
+  },
+  {
+    prop: 'sectionName',
+    label: '工段名称'
+  },
+  {
+    prop: 'workOrderName',
+    label: '工单名称'
+  },
+  {
+    prop: 'num',
+    label: '报废数量'
+  },
+  {
+    prop: 'detContent',
+    label: '报废原因'
+  },
+  {
+    prop: 'sources',
+    label: '来源'
+  }
+]
+
+export default {
+  name: 'ScrapList',
+  data () {
+    return {
+      listQuery: {
+        pageSize: 10,
+        pageNo: 1
+      },
+      tableProps,
+      tableData: [],
+      total: 0
+    }
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    indexMethod (index) {
+      return (this.listQuery.pageNo - 1) * 10 + index + 1
+    },
+    handleSizeChange (val) {
+      console.log(`每页 ${val} 条`)
+      this.listQuery.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange (val) {
+      this.listQuery.pageNo = val
+      this.getList()
+      console.log(`当前页: ${val}`)
+    },
+    getList () {
+      scrapLogList(this.listQuery).then(res => {
+        if (res && res?.data?.code === 0) {
+          this.tableData = res.data.data.list.map(item => {
+            item.sources = item.source === 1 ? '平板端' : '网页端'
+            item.scrapTime = parseTime(item.logTime)
+            return item
+          })
+          this.total = res.data.data.total
+        }
+      })
+    },
+    goback () {
+      this.$router.push({
+        path: 'home'
+      })
+    },
+    toScrap () {
+      this.$router.push({
+        path: 'scrap'
+      })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+.el-table__row--even {
+  background-color: #f9fafc; /* 偶数行背景颜色 */
+}
+.el-table__row--odd {
+  background-color: #a76c6c; /* 奇数行背景颜色 */
+}
+.pagination {
+  margin-top: 15px;
+  float: right;
+}
+.list {
+  background-image: url('./../assets/quality-bg.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  min-height: 100vh;
+  width: 100vw;
+  padding: 20px 24px;
+  box-sizing: border-box;
+}
+</style>

src/views/components/HomePage.vue

@@ -0,0 +1,53 @@
+<!--
+ * @Author: Do not edit
+ * @Date: 2023-12-29 10:01:55
+ * @LastEditTime: 2024-01-07 22:26:39
+ * @LastEditors: DY
+ * @Description: 首页
+-->
+<template>
+  <div>
+    首页
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HomePage',
+  data () {
+    return {
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+.workDiv {
+  background-color: #F2F2F2;
+  font-size: 12px;
+  width: 90%;
+  padding: 5px 0 10px 10px;
+}
+.swipeDiv {
+  padding: 10px;
+  margin-bottom:20px;
+  text-align: left;
+  background-color: white;
+  border-radius: 10px;
+  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
+}
+.my-swipe .van-swipe-item {
+  // color: #fff;
+  // font-size: 20px;
+  // line-height: 150px;
+  margin: 0 10px;
+  text-align: left;
+  // background-color: #39a9ed;
+}
+.hello {
+  background-color: #F7F7F7;
+  height: 100%;
+  padding: 20px;
+}
+</style>

src/views/components/SKeyboard.vue

@@ -0,0 +1,176 @@
+<template>
+  <div :class="keyboardClass"></div>
+</template>
+<script>
+import Keyboard from 'simple-keyboard'
+import 'simple-keyboard/build/css/index.css'
+import layout from 'simple-keyboard-layouts/build/layouts/chinese' // 中文字库
+export default {
+  name: 'SimpleKeyboard',
+  props: {
+    keyboardClass: {
+      default: 'simple-keyboard',
+      type: String
+    },
+    maxLength: { default: '' }
+  },
+  data: () => ({
+    keyboard: null,
+    displayDefault: {
+      '{bksp}': 'backspace',
+      '{lock}': '切换',
+      '{enter}': '> enter',
+      '{tab}': 'tab',
+      '{shift}': 'shift',
+      '{change}': '中文',
+      '{space}': ' ',
+      '{clear}': '清空',
+      '{close}': '关闭'
+    }
+  }),
+  mounted () {
+    this.keyboard = new Keyboard(this.keyboardClass, {
+      onChange: this.onChange,
+      onKeyPress: this.onKeyPress,
+      layoutCandidates: layout.layoutCandidates,
+      layout: {
+        // 默认布局
+        default: [
+          '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
+          '{tab} q w e r t y u i o p [ ] \\',
+          "{lock} a s d f g h j k l ; ' {enter}",
+          '{shift} z x c v b n m , . / {clear}',
+          '{change} {space} {close}'
+        ],
+        // shift布局
+        shift: [
+          '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
+          '{tab} Q W E R T Y U I O P { } |',
+          '{lock} A S D F G H J K L : " {enter}',
+          '{shift} Z X C V B N M < > ? {clear}',
+          '{change} {space} {close}'
+        ]
+      },
+      // 按钮展示文字
+      display: this.displayDefault,
+      // 按钮样式
+      buttonTheme: [
+        {
+          class: 'hg-red close',
+          buttons: '{close}'
+        },
+        {
+          class: 'change',
+          buttons: '{change}'
+        }
+      ],
+      // 输入限制长度
+      maxLength: this.maxLength
+    })
+  },
+  methods: {
+    onChange (input) {
+      this.$emit('on-change', input) // 输入值向外传递
+    },
+    // 重写清空按钮
+    onChangeKey () {
+      this.keyboard.setInput('')
+      this.$emit('empty')
+    },
+    // @focus 触发时赋值 封装组件调用
+    onChangeFocus (value) {
+      this.keyboard.setInput(value)
+    },
+    // 点击键盘
+    onKeyPress (button, $event) {
+      // 点击关闭
+      if (button === '{close}') {
+        // 子组件调用父组件的关闭按钮方法
+        this.$parent.closekeyboard()
+        return false
+      } else if (button === '{change}') {
+        // 切换中英文输入法
+        if (this.keyboard.options.layoutCandidates !== null) {
+          this.$set(this.displayDefault, '{change}', '英文')
+          // 切换至英文
+          this.keyboard.setOptions({
+            layoutCandidates: null,
+            display: this.displayDefault
+          })
+        } else {
+          // 切换至中文
+          this.$set(this.displayDefault, '{change}', '中文')
+          this.keyboard.setOptions({
+            layoutCandidates: layout.layoutCandidates,
+            display: this.displayDefault
+          })
+        }
+      } else if (button === '{clear}') {
+        this.onChangeKey()
+      } else {
+        const value = $event.target.offsetParent.parentElement.children[0].children[0].value
+        // 输入框有默认值时，覆写
+        if (value) {
+          this.keyboard.setInput(value)
+        }
+        this.$emit('on-key-press', button)
+      }
+      if (button === '{shift}' || button === '{lock}') this.handleShift()
+    },
+    // 切换shift/默认布局
+    handleShift () {
+      const currentLayout = this.keyboard.options.layoutName
+      const shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
+      this.keyboard.setOptions({
+        layoutName: shiftToggle
+      })
+    }
+  }
+}
+</script>
+<style lang="less">  //这块样式可以根据自己的需求调整
+@deep: ~'>>>';
+.hg-candidate-box{
+  position: fixed;
+  width: 100%;
+  font-size: 42px;
+  background: rgba(256, 256, 256);
+  z-index: 9999;
+  .hg-candidate-box-list{
+    .hg-candidate-box-list-item{
+      padding: 0 20px;
+    }
+  }
+
+}
+.hg-rows{
+  width: 100% !important;
+  .hg-row {
+    height: 50px;
+    .hg-button{
+      height: 50px;
+      font-size: 30px;
+    }
+
+  }
+}
+.hg-theme-default {
+  width: 100%;
+  height: 400px;
+  left: 0;
+  position: fixed;
+  bottom: 10px;
+  .hg-button {
+    &.hg-red {
+      background: #3e87db;
+      color: white;
+      &.close {
+        max-width: 200px;
+      }
+    }
+    &.change {
+      max-width: 200px;
+    }
+  }
+}
+</style>

src/views/components/keyboard.vue

@@ -0,0 +1,74 @@
+<!--
+ * @Author: Do not edit
+ * @Date: 2024-04-03 15:01:04
+ * @LastEditTime: 2024-04-07 15:14:39
+ * @LastEditors: DY
+ * @Description:
+-->
+<template>
+  <div>
+    <div v-show="showKeyboard" >
+      <SimpleKeyboard ref="refSimpleKeyboard" class="Keyboard" @onChange="onChangeKeyboard" @empty="empty" />
+    </div>
+  </div>
+</template>
+<script>
+import SimpleKeyboard from './SKeyboard.vue'
+export default {
+  name: 'Keyboard',
+  components: {
+    SimpleKeyboard
+  },
+  data () {
+    return {
+      showKeyboard: false, // 键盘默认隐藏
+      value: '',
+      key: ''
+    }
+  },
+  watch: {
+    key (val) {
+      this.key = val
+      if (this.showKeyboard) {
+        this.showKeyboard = false
+        setTimeout(() => {
+          this.showKeyboard = true
+        }, 100)
+      }
+    }
+  },
+  methods: {
+    // inpuit获取焦点显示虚拟键盘
+    onInputFocus (res) {
+      this.showKeyboard = true
+    },
+    // 给输入框赋值
+    onChangeKeyboard (input) {
+      this.$emit('input', { value: input, key: this.key })
+    },
+    // 隐藏键盘 父组件调用
+    closeInputFocus () {
+      this.showKeyboard = false
+    },
+    // 隐藏键盘 子组件调用
+    closekeyboard () {
+      this.showKeyboard = false
+    },
+    // 清空输入框
+    empty () {
+      this.$emit('input', { value: '', key: this.key })
+    },
+    // 给虚拟键盘赋当前输入框的值
+    setKeyboardInput (input) {
+      console.log('给虚拟键盘赋当前输入框的值', input)
+      this.$refs.refSimpleKeyboard.onChangeFocus(input)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+// 键盘样式
+.Keyboard{
+  position: absolute;
+}
+</style>

src/views/components/simpleKeyboard.vue

@@ -0,0 +1,160 @@
+<template>
+  <div :class="keyboardClass"></div>
+</template>
+
+<script>
+import Keyboard from 'simple-keyboard'
+import 'simple-keyboard/build/css/index.css'
+import layout from 'simple-keyboard-layouts/build/layouts/chinese' // 中文输入法
+
+export default {
+  name: 'SimpleKeyboard',
+  props: {
+    keyboardClass: {
+      default: 'simple-keyboard',
+      type: String
+    },
+    input: {
+      default: ''
+    },
+    maxLength: { default: '' }
+  },
+  data: () => ({
+    keyboard: null,
+    displayDefault: {
+      '{bksp}': 'backspace',
+      '{lock}': 'caps',
+      '{enter}': '> enter',
+      '{tab}': 'tab',
+      '{shift}': 'shift',
+      '{change}': '英文',
+      '{space}': ' ',
+      '{clear}': '清空',
+      '{close}': '关闭'
+    }
+  }),
+  mounted () {
+    this.keyboard = new Keyboard(this.keyboardClass, {
+      onChange: this.onChange,
+      onKeyPress: this.onKeyPress,
+      layoutCandidates: layout.layoutCandidates,
+      layout: {
+        // 默认布局
+        default: [
+          '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
+          '{tab} q w e r t y u i o p [ ] \\',
+          "{lock} a s d f g h j k l ; ' {enter}",
+          '{shift} z x c v b n m , . / {clear}',
+          '{change} {space} {close}'
+        ],
+        // shift布局
+        shift: [
+          '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
+          '{tab} Q W E R T Y U I O P { } |',
+          '{lock} A S D F G H J K L : " {enter}',
+          '{shift} Z X C V B N M < > ? {clear}',
+          '{change} {space} {close}'
+        ]
+      },
+      // 按钮展示文字
+      display: this.displayDefault,
+      // 按钮样式
+      buttonTheme: [
+        {
+          class: 'hg-red close',
+          buttons: '{close}'
+        },
+        {
+          class: 'change',
+          buttons: '{change}'
+        }
+      ],
+      // 输入限制长度
+      maxLength: this.maxLength
+    })
+  },
+  methods: {
+    onChange (input) {
+      this.keyboard.setInput(input)
+      this.$emit('on-change', input)
+      console.log('nihc', input)
+    },
+    // 点击键盘
+    onKeyPress (button, $event) {
+      // 点击关闭
+      if (button === '{close}') {
+        // const keyboard = $event.path[3]
+        // keyboard.style.visibility = 'hidden'
+        this.$emit('close')
+        return false
+      } else if (button === '{change}') {
+        // 切换中英文输入法
+        if (this.keyboard.options.layoutCandidates !== null) {
+          this.$set(this.displayDefault, '{change}', '中文')
+          // 切换至英文
+          this.keyboard.setOptions({
+            layoutCandidates: null,
+            display: this.displayDefault
+          })
+        } else {
+          // 切换至中文
+          this.$set(this.displayDefault, '{change}', '英文')
+          this.keyboard.setOptions({
+            layoutCandidates: layout.layoutCandidates,
+            display: this.displayDefault
+          })
+        }
+      } else if (button === '{clear}') {
+        this.keyboard.clearInput()
+      } else {
+        const value =
+          $event.target.offsetParent.parentElement.children[0].children[0]
+            .value
+        // 输入框有默认值时，覆写
+        if (value) {
+          this.keyboard.setInput(value)
+        }
+        this.$emit('on-key-press', button)
+      }
+      if (button === '{shift}' || button === '{lock}') this.handleShift()
+    },
+    // 切换shift/默认布局
+    handleShift () {
+      const currentLayout = this.keyboard.options.layoutName
+      const shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
+      this.keyboard.setOptions({
+        layoutName: shiftToggle
+      })
+    }
+  },
+  watch: {
+    input (input) {
+      this.keyboard.setInput(input)
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@deep: ~'>>>';
+.hg-theme-default {
+  width: 100%;
+  margin-top: -10px;
+  z-index: 1;
+  // position: absolute;
+  // bottom: 0;
+  // left: 0;
+  .hg-button {
+    &.hg-red {
+      background: #db3e5d;
+      color: white;
+      &.close {
+        max-width: 200px;
+      }
+    }
+    &.change {
+      max-width: 200px;
+    }
+  }
+}
+</style>

vue.config.js

@@ -1,4 +1,25 @@
+/*
+ * @Author: Do not edit
+ * @Date: 2023-12-27 16:41:40
+ * @LastEditTime: 2024-01-09 10:20:47
+ * @LastEditors: DY
+ * @Description:
+ */
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  publicPath: './',
+  // 配置代理服务器
+  devServer: {
+    // proxy: {
+    //   '/api': {
+    //     target: 'http://192.168.0.33:48082',
+    //     ws: true,
+    //     changeOrigin: true,
+    //     pathRewrite: {
+    //       '^/portapi': ''
+    //     }
+    //   }
+    // }
+  }
 })