mes 平板端

This commit is contained in:
helloDy 2024-01-10 17:58:43 +08:00
parent 51cd918ec6
commit d25abf3b18
29 changed files with 1979 additions and 226 deletions

View File

@ -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 = { module.exports = {
root: true, root: true,
env: { env: {
@ -12,6 +19,7 @@ module.exports = {
}, },
rules: { rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', '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'
} }
} }

615
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -8,7 +8,10 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"axios": "^1.6.5",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"element-ui": "^2.15.14",
"vant": "^2.13.2",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vuex": "^3.6.2" "vuex": "^3.6.2"
@ -26,7 +29,7 @@
"eslint-plugin-import": "^2.25.3", "eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0", "eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.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": "^4.0.0",
"less-loader": "^8.0.0", "less-loader": "^8.0.0",
"lint-staged": "^11.1.2", "lint-staged": "^11.1.2",

View File

@ -1,13 +1,29 @@
<!--
* @Author: Do not edit
* @Date: 2023-12-27 16:41:40
* @LastEditTime: 2024-01-07 22:29:50
* @LastEditors: DY
* @Description:
-->
<template> <template>
<div id="app"> <div id="app">
<nav> <!-- <nav>
<router-link to="/">Home</router-link> | <router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> <router-link to="/about">About</router-link>
</nav> </nav> -->
<!-- <HomeView v-if="!$route.meta.keepAlive" /> -->
<router-view/> <router-view/>
</div> </div>
</template> </template>
<script>
// import HomeView from '@/views/HomeView.vue'
export default {
// components: { HomeView }
}
</script>
<style lang="less"> <style lang="less">
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;

37
src/api/login.js Normal file
View File

@ -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'
})
}

71
src/api/quality.js Normal file
View File

@ -0,0 +1,71 @@
/*
* @Author: Do not edit
* @Date: 2023-11-20 11:05:00
* @LastEditTime: 2024-01-10 11:20:45
* @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
})
}

BIN
src/assets/bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

BIN
src/assets/home.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
src/assets/home_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 413 KiB

BIN
src/assets/icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 673 B

BIN
src/assets/login-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

BIN
src/assets/modal.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

BIN
src/assets/mountain.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

BIN
src/assets/quality-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 250 KiB

BIN
src/assets/quality.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

BIN
src/assets/scrap.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

View File

@ -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);
}
}
}

BIN
src/assets/transparent.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

BIN
src/assets/xcac.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

View File

@ -1,9 +1,25 @@
/*
* @Author: Do not edit
* @Date: 2023-12-27 16:41:40
* @LastEditTime: 2024-01-09 17:50:38
* @LastEditors: DY
* @Description:
*/
import Vue from 'vue' import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store' 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.config.productionTip = false
Vue.prototype.$http = axios
Vue.use(Vant)
Vue.use(ElementUI)
new Vue({ new Vue({
router, router,

View File

@ -1,12 +1,28 @@
/*
* @Author: Do not edit
* @Date: 2023-12-27 16:41:40
* @LastEditTime: 2024-01-09 13:58:18
* @LastEditors: DY
* @Description:
*/
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue' import HomeView from '../views/HomeView.vue'
import LoginView from '../views/Login.vue'
Vue.use(VueRouter) Vue.use(VueRouter)
const routes = [ const routes = [
{ {
path: '/', path: '/',
name: 'login',
component: LoginView,
meta: {
keepAlive: true
}
},
{
path: '/home',
name: 'home', name: 'home',
component: HomeView component: HomeView
}, },
@ -17,6 +33,16 @@ const routes = [
// this generates a separate chunk (about.[hash].js) for this route // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') 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')
} }
] ]

36
src/utils/auth.js Normal file
View File

@ -0,0 +1,36 @@
// ========== 租户相关 ==========
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 getRefreshToken () {
return localStorage.getItem(RefreshTokenKey)
}
export function setToken (token) {
localStorage.setItem(AccessTokenKey, token.accessToken)
localStorage.setItem(RefreshTokenKey, token.refreshToken)
}
export function removeToken () {
localStorage.removeItem(AccessTokenKey)
localStorage.removeItem(RefreshTokenKey)
}

108
src/utils/request.js Normal file
View File

@ -0,0 +1,108 @@
/*
* @Author: Do not edit
* @Date: 2023-11-20 11:02:29
* @LastEditTime: 2024-01-10 17:31:37
* @LastEditors: DY
* @Description:
*/
import axios from 'axios'
import { getTenantId, getAccessToken, getRefreshToken, setToken } from '@/utils/auth'
import { refreshToken } from '@/api/login'
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.0.33: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
this.$message.confirm('登录状态已过期,您可以继续留在该页面,或者重新登录', '系统提示', {
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
isRelogin.show = false
this.$router.push({ path: '/' })
// store.dispatch('LogOut').then(() => {
// location.href = getPath('/index');
// })
}).catch(() => {
isRelogin.show = false
})
}
return Promise.reject(new Error('无效的会话,或者会话已过期,请重新登录。'))
}
export default service

View File

@ -1,18 +1,82 @@
<!--
* @Author: Do not edit
* @Date: 2023-12-27 16:41:40
* @LastEditTime: 2024-01-09 14:00:12
* @LastEditors: DY
* @Description: 首页
-->
<template> <template>
<div class="home"> <div class="home">
<img alt="Vue logo" src="../assets/logo.png"> <div class="centerDiv">
<HelloWorld msg="Welcome to Your Vue.js App"/> <div class="img1" @click="toQuality">
<p class="title">质量收集器</p>
</div>
<div class="img" @click="toScrap">
<p class="title">报废管理</p>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default { export default {
name: 'HomeView', name: 'HomeView',
components: { data () {
HelloWorld return {
}
},
methods: {
toQuality () {
this.$router.push({
path: 'quality'
})
},
toScrap () {
this.$router.push({
path: 'scrap'
})
}
} }
} }
</script> </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: 100vh;
gap: 18px;
}
.home {
background-image: url('./../assets/home_bg.png');
height: 100vh;
width: 100vw;
background-size: cover;
}
</style>

182
src/views/Login.vue Normal file
View File

@ -0,0 +1,182 @@
<!--
* @Author: Do not edit
* @Date: 2023-12-28 11:21:53
* @LastEditTime: 2024-01-10 16:58:49
* @LastEditors: DY
* @Description: 登陆
-->
<template>
<div class="login">
<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"
:rules="[{ required: true, message: '请填写用户名' }]"
/>
<van-field
v-model="password"
type="password"
name="password"
placeholder="密码"
: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>
</div>
</template>
<script>
import { loginUser, getTenantIdByName } from '@/api/login'
import { setTenantId, setToken } from '@/utils/auth'
export default {
name: 'Login',
data () {
return {
username: 'admin',
password: 'admin123',
tenantName: '技术中心'
}
},
created () {
//
getTenantIdByName(this.tenantName).then((res) => {
//
const tenantId = res.data.data
if (tenantId && tenantId >= 0) {
setTenantId(tenantId)
}
})
},
methods: {
onSubmit (values) {
loginUser(values).then(res => {
console.log(res.data)
if (res.data.code === 0) {
setToken(res.data.data)
this.$router.push({
path: 'home'
})
}
})
}
}
}
</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: 121px;
margin-left: 40px;
}
.modalImg {
margin-top: 55px;
margin-left: 55px;
text-align: left;
}
.title {
/* width: 297px; */
/* height: 59px; */
padding-top: 122px;
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>

222
src/views/Quality.vue Normal file
View File

@ -0,0 +1,222 @@
<!--
* @Author: Do not edit
* @Date: 2024-01-09 13:48:42
* @LastEditTime: 2024-01-10 17:56:00
* @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="20" 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">
本班次合计数量{{ count }}
</div>
<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=" it.active ? 'flexActive' : '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>
</div>
</template>
<script>
import { lineList, workshopSectionListByLine, qualityManage, createInspection } from '@/api/quality'
export default {
name: 'Quality',
data () {
return {
lineArray: [],
sectionArray: [],
listQuery: {
productionLineId: '',
sectionId: ''
},
count: 0,
typeList: []
}
},
mounted () {
this.getLine()
},
methods: {
addRecord (value) {
const now = new Date() // 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)
createInspection({
...this.listQuery,
inspectionDetId: value.detId,
checkTime: formattedTime
}).then(res => {
if (res.data.code === 0) {
this.$set(value, 'active', true)
value.count++
this.count++
}
})
},
toHome () {
this.$router.push({
path: 'home'
})
},
getQuality () {
qualityManage(this.listQuery).then(res => {
if (JSON.stringify(res.data.data) !== '{}') {
this.typeList = Object.values(res.data.data)
this.count = this.typeList[0][0].sunCount
} else {
this.typeList = []
this.count = 0
}
})
},
getLine () {
lineList().then(res => {
this.lineArray = res.data.data.map(item => {
return {
text: item.name,
value: item.id
}
})
})
},
getSection () {
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;
}
.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: #276BFF;
}
.rightDiv {
border-radius: 7px;
height: 72px;
line-height: 72px;
width: 140px;
/* background-color: #276BFF; */
}
.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: #276BFF;
height: 72px;
width: 77px;
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-top: 7px;
padding: 0 20px 20px 20px;
box-sizing: border-box;
}
.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');
height: 100vh;
width: 100vw;
padding: 20px 20px;
box-sizing: border-box;
}
</style>

134
src/views/Scrap.vue Normal file
View File

@ -0,0 +1,134 @@
<!--
* @Author: Do not edit
* @Date: 2024-01-09 13:49:03
* @LastEditTime: 2024-01-09 20:39:57
* @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>
<h2>报废管理</h2>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="工单" prop="workOrderId">
<el-select v-model="ruleForm.workOrderId" filterable clearable 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>
<el-form-item label="报废数量" prop="num">
<el-input-Number v-model="ruleForm.num" style="width: 100%; display: block"></el-input-Number>
</el-form-item>
<el-form-item label="报废原因" prop="detName">
<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.content" :name="item.id"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="产线" prop="lineId">
<el-select v-model="ruleForm.lineId" filterable clearable placeholder="请选择产线" style="width: 100%; display: block">
<el-option v-for="(item, index) in lineArray" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="时间" prop="logTime">
<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>
<el-form-item>
<el-button @click="resetForm('ruleForm')">取消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { workOrderList, scrapDetList, lineList, createScrap } from '@/api/quality'
export default {
data () {
return {
ruleForm: {
workOrderId: '',
num: 0,
detId: '',
detName: [],
lineId: undefined,
logTime: new Date()
},
workOrderList: [],
lineArray: [],
scrapList: [],
rules: {
workOrderId: [
{ required: true, message: '请选择工单', trigger: 'change' }
],
num: [
{ required: true, message: '请输入报废数量', trigger: 'blur' }
],
detName: [
{ required: true, message: '请选择报废原因', trigger: 'blur' }
]
}
}
},
mounted () {
this.getDict()
this.ruleForm = {
workOrderId: '',
num: 0,
detId: '',
detName: [],
lineId: undefined,
logTime: new Date()
}
},
methods: {
goback () {
this.$router.go(-1)
},
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
}
})
})
const scrapRes = await scrapDetList()
this.scrapList = scrapRes.data.data
},
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'
})
}
})
} else {
console.log('error submit!!')
return false
}
})
},
resetForm (formName) {
this.$refs[formName].resetFields()
}
}
}
</script>
<style scoped>
.scrap {
padding: 30px;
/* font-size: 20px; */
}
</style>

View File

@ -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>

View File

@ -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') const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({ module.exports = defineConfig({
transpileDependencies: true transpileDependencies: true,
// 配置代理服务器
devServer: {
// proxy: {
// '/api': {
// target: 'http://192.168.0.33:48082',
// ws: true,
// changeOrigin: true,
// pathRewrite: {
// '^/portapi': ''
// }
// }
// }
}
}) })