From 757873c9b9387af364270951cd0f81057bc704d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AD=A3=E6=98=93?= <zhaozhengyi1b@126.com>
Date: Wed, 11 Dec 2024 13:05:52 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   4 +-
 src/main.js                                   |  29 ++-
 src/router/index.js                           |   7 +
 src/views/touchScreen/components/kbTime.vue   |  34 ++++
 .../touchScreen/components/scanInput.vue      |  63 ++++++
 src/views/touchScreen/main/index.vue          | 146 ++++++++++++++
 src/views/touchScreen/report/index.vue        | 185 +++++++++++++++---
 src/vuetify-theme.json                        |  37 ++++
 8 files changed, 477 insertions(+), 28 deletions(-)
 create mode 100644 src/views/touchScreen/components/kbTime.vue
 create mode 100644 src/views/touchScreen/components/scanInput.vue
 create mode 100644 src/views/touchScreen/main/index.vue
 create mode 100644 src/vuetify-theme.json

diff --git a/package.json b/package.json
index 323e8ac..a9a1909 100644
--- a/package.json
+++ b/package.json
@@ -44,13 +44,15 @@
     "vue-cropper": "1.0.2",
     "vue-i18n": "9.2.2",
     "vue-router": "^4.2.2",
-    "vxe-pc-ui": "^4.0.12",
     "vue3-print-nb": "^0.1.4",
     "vue3-qr-reader": "^1.0.0",
+    "vuetify": "^3.7.5",
+    "vxe-pc-ui": "^4.0.12",
     "vxe-table": "^4.7.14",
     "xe-utils": "^3.5.13"
   },
   "devDependencies": {
+    "@mdi/font": "^7.4.47",
     "@vitejs/plugin-vue": "^4.5.2",
     "@vue/compiler-sfc": "^3.3.4",
     "consola": "^3.2.3",
diff --git a/src/main.js b/src/main.js
index 0dc8a0f..46bef90 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,33 @@ import { dayjs } from 'element-plus'
 import 'dayjs/locale/zh-cn'
 import '@/assets/styles/index.scss' // global css
 
+// Vuetify
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import '@mdi/font/css/materialdesignicons.css'
+import { aliases, mdi } from 'vuetify/iconsets/mdi'
+import theme from './vuetify-theme.json'
+const myTheme = theme
+console.log(myTheme)
+const vuetify = createVuetify({
+  theme: {
+    defaultTheme: 'myTheme',
+    themes: { myTheme }
+  },
+  icons: {
+    defaultSet: 'mdi',
+    aliases,
+    sets: {
+      mdi
+    }
+  },
+  ssr: true,
+  components,
+  directives
+})
+
 import App from './App'
 import router from './router'
 import directive from './directive' // directive
@@ -78,4 +105,4 @@ app.component('MyTable', MyTable)
 
 directive(app)
 vxetb(app)
-app.use(pinia).use(router).use(plugins).use(ElementPlus, {}).use(elementIcons).use(vueI18n).mount('#app')
+app.use(pinia).use(router).use(plugins).use(ElementPlus, {}).use(elementIcons).use(vueI18n).use(vuetify).mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
index 3e10920..1215aed 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -64,6 +64,13 @@ export const constantRoutes = [
     component: () => import('@/views/error/Error'),
     hidden: true
   },
+  // 触摸屏
+  {
+    path: '/productManagement/touchScreen',
+    component: () => import('@/views/touchScreen/main/index'),
+    hidden: true
+  },
+
   {
     path: '',
     component: Layout,
diff --git a/src/views/touchScreen/components/kbTime.vue b/src/views/touchScreen/components/kbTime.vue
new file mode 100644
index 0000000..be30c59
--- /dev/null
+++ b/src/views/touchScreen/components/kbTime.vue
@@ -0,0 +1,34 @@
+<template>
+    <div class="box">
+        <span class="span">{{ datetime }}</span>
+    </div>
+</template>
+
+<script setup>
+import { getCurrentInstance, onMounted, onUnmounted, ref } from 'vue'
+const { proxy } = getCurrentInstance()
+const timer = ref(null)
+const datetime = ref(null)
+onMounted(() => {
+    timer.value = setInterval(() => {
+        datetime.value = proxy.dayjs().format('YYYY-MM-DD HH:mm:ss')
+    }, 1000)
+})
+onUnmounted(() => {
+    clearInterval(timer.value)
+})
+</script>
+
+<style scoped>
+/* .box {
+    position: absolute;
+    right: 2%;
+    top: 10px;
+    color: #eeeeee;
+} */
+.span {
+    font-size: 24px;
+    font-weight: 600;
+    color: #F1F1E6;
+}
+</style>
diff --git a/src/views/touchScreen/components/scanInput.vue b/src/views/touchScreen/components/scanInput.vue
new file mode 100644
index 0000000..bd9306e
--- /dev/null
+++ b/src/views/touchScreen/components/scanInput.vue
@@ -0,0 +1,63 @@
+<template>
+    <div class="scanInput">
+        <el-input ref="inputRef" v-model="input" type="password" placeholder="请扫码" @blur="doInputBlur"
+            @change="doInputChange">
+        </el-input>
+        <div style="width: 10%;"></div>
+        <el-button icon="FullScreen" type="primary" @click="doInputChange(input)">手动提交</el-button>
+    </div>
+</template>
+
+<script setup>
+import { getCurrentInstance, onMounted, onUnmounted, ref } from 'vue'
+const { proxy } = getCurrentInstance()
+const inputRef = ref(null)
+const input = ref('')
+// 自动重新聚焦
+function autoInputFocus() {
+    if (inputRef.value) {
+        proxy.$nextTick(() => {
+            inputRef.value.focus()
+        })
+    }
+}
+// 失去焦点时，重新聚焦
+function doInputBlur() {
+    setTimeout(() => {
+        autoInputFocus()
+    }, 500)
+}
+// 输入框变化时，重新聚焦
+function doInputChange(value) {
+    const _value = value
+    if (_value === '') {
+        autoInputFocus()
+        return
+    }
+    input.value = ''
+    setTimeout(() => {
+        autoInputFocus()
+    }, 500)
+    proxy.$emit('scanInput', _value)
+}
+
+
+const timer = ref(null)
+onMounted(() => {
+    timer.value = setInterval(() => {
+        // datetime.value = proxy.dayjs().format('YYYY-MM-DD HH:mm:ss')
+    }, 1000)
+})
+onUnmounted(() => {
+    // clearInterval(timer.value)
+})
+</script>
+
+<style scoped>
+.scanInput {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+</style>
diff --git a/src/views/touchScreen/main/index.vue b/src/views/touchScreen/main/index.vue
new file mode 100644
index 0000000..22e80fb
--- /dev/null
+++ b/src/views/touchScreen/main/index.vue
@@ -0,0 +1,146 @@
+<template>
+    <v-layout class="rounded rounded-md">
+        <v-app-bar>
+            <template v-slot:prepend>
+                <v-app-bar-nav-icon>
+                    <v-btn icon="mdi-home" @click="goBack"></v-btn>
+                </v-app-bar-nav-icon>
+            </template>
+            <v-app-bar-title>作业看板</v-app-bar-title>
+            <template v-slot:append>
+                <kbTime></kbTime>
+                <!-- <v-btn icon="mdi-magnify"></v-btn> -->
+                <v-btn icon="mdi-dots-vertical"></v-btn>
+            </template>
+        </v-app-bar>
+        <!-- 右侧菜单 -->
+        <v-navigation-drawer permanent location="right" :width="150">
+            <template v-slot:prepend>
+                <v-list-item lines="two" :prepend-avatar="userInfo.user.avatar" :subtitle="userInfo.roles[0]"
+                    :title="userInfo.user.nickName"></v-list-item>
+            </template>
+            <v-divider></v-divider>
+            <v-list lines="two">
+                <v-list-item v-for="(item, index) in listItems" :key="index" :value="item.value" :title="item.title"
+                    @click="selectItem(item)" rounded="shaped" :prepend-icon="item.icon"></v-list-item>
+            </v-list>
+        </v-navigation-drawer>
+        <!-- 操作主体 -->
+        <v-main>
+            <v-fade-transition>
+                <Report v-if="menuActivated === '报工'"></Report>
+            </v-fade-transition>
+        </v-main>
+    </v-layout>
+</template>
+
+<script setup>
+import kbTime from '../components/kbTime.vue'
+
+import Report from '../report/index.vue'
+const { proxy } = getCurrentInstance()
+// 返回主页面
+const goBack = () => {
+    proxy.$router.push({ path: '/' })
+}
+// 右侧菜单
+const listItems = ref([
+    { title: '报工', value: '报工', icon: 'mdi-account' },
+    { title: '质量', value: '质量', icon: 'mdi-account' },
+    { title: '报警', value: '报警', icon: 'mdi-account' },
+    { title: '打印', value: '打印', icon: 'mdi-account' },
+    { title: '设置', value: '设置', icon: 'mdi-account' },
+])
+const menuActivated = ref('报工')
+function selectItem(val) {
+    menuActivated.value = val.value
+}
+
+// 用户信息
+import { getUserProfile } from '@/api/system/user'
+const userInfo = ref({
+    user: {
+        nickName: '',
+        avatar: '',
+        isAdmin: ''
+    },
+    roles: [],
+
+})
+function getUser() {
+    getUserProfile().then((response) => {
+
+        if (response.code === 200) {
+            userInfo.value.user = response.data.user
+            userInfo.value.roles = response.data.roles
+            console.log(userInfo);
+        }
+    })
+}
+getUser()
+
+import { onMounted } from "vue";
+import { useDisplay } from "vuetify";
+
+const { mobile, name } = useDisplay();
+
+onMounted(() => {
+    console.log(mobile.value); // false
+    console.log(name.value); // false
+});
+</script>
+
+<style scoped>
+.background {
+    background-color: #214365;
+    height: 100vh;
+}
+
+.header {
+    background-color: #006B8C;
+    padding: 20px;
+}
+
+.title {
+    color: #F1F1E6;
+    font-size: 24px;
+}
+
+.tabs-box {
+    height: 90vh;
+    background-color: transparent;
+}
+
+:deep(.el-tabs--border-card) {
+    background-color: transparent;
+    border: none;
+    box-shadow: none;
+}
+
+:deep(.is-active) {
+    border: none;
+    background-color: #557398 !important;
+}
+
+:deep(.el-tabs__nav-wrap) {
+    background-color: #00258B;
+}
+
+:deep(.el-tabs__content) {
+    padding: 0;
+}
+
+:deep(.el-tabs__item) {
+    height: 100%;
+}
+
+.tab-pane-title-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100px;
+    font-size: 30px;
+    font-weight: bold;
+    color: #E6F4F1;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/touchScreen/report/index.vue b/src/views/touchScreen/report/index.vue
index 318d9d7..8ab71f7 100644
--- a/src/views/touchScreen/report/index.vue
+++ b/src/views/touchScreen/report/index.vue
@@ -1,44 +1,177 @@
 <template>
-    <el-container>
-        <!-- Header Section -->
-        <el-header>Header</el-header>
+    <el-row>
+        <!-- Left Part -->
+        <el-col :span="18">
+            <div class="left-content">
+                <v-card>
+                    <v-card-text>
+                        123
+                    </v-card-text>
+                    <v-card-actions>
+                        <v-btn>提交</v-btn>
+                    </v-card-actions>
+                </v-card>
+            </div>
+        </el-col>
 
-        <!-- Main Section with Left and Right Parts -->
-        <el-main>
-            <el-row>
-                <!-- Left Part -->
-                <el-col :span="18">
-                    <div class="left-content">Left Content</div>
-                </el-col>
-
-                <!-- Right Part -->
-                <el-col :span="6">
-                    <div class="right-content">Right Content</div>
-                </el-col>
-            </el-row>
-        </el-main>
-    </el-container>
+        <!-- Right Part -->
+        <el-col :span="6">
+            <div class="right-content">
+                <el-form :model="formData" label-width="auto" label-suffix=":">
+                    <el-form-item label="工序选择">
+                        <el-select v-model="processId" class="form-input">
+                            <el-option v-for="item in processOptions" :key="item.value" :label="item.label"
+                                :value="item.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="标签扫码">
+                        <scanInput @scanInput="handleScanInput"></scanInput>
+                    </el-form-item>
+                    <el-card class="form-input">
+                        <el-form-item label="工单号">
+                            <el-text class="formItem">{{ formData.workorder }}</el-text>
+                        </el-form-item>
+                        <el-form-item label="主体型号">
+                            <el-text class="formItem">{{ formData.productionCode }}</el-text>
+                        </el-form-item>
+                        <el-form-item label="主体品名">
+                            <el-text class="formItem">{{ formData.productionName }}</el-text>
+                        </el-form-item>
+                        <el-form-item label="计划数量">
+                            <el-text class="formItem">{{ formData.planNum }}</el-text>
+                        </el-form-item>
+                        <el-form-item label="主体图号">
+                            <el-text class="formItem">{{ formData.drawingCode }}</el-text>
+                        </el-form-item>
+                        <el-form-item label="版本号">
+                            <el-text class="formItem">{{ formData.version }}</el-text>
+                        </el-form-item>
+                        <el-form-item label="材料编号">
+                            <el-text class="formItem">{{ formData.materialCode }}</el-text>
+                        </el-form-item>
+                        <el-form-item label="材料型号">
+                            <el-text class="formItem">{{ formData.materialName }}</el-text>
+                        </el-form-item>
+                        <el-form-item label="材质">
+                            <el-text class="formItem">{{ formData.materialtextureCode }}</el-text>
+                        </el-form-item>
+                        <el-form-item label="工单日期">
+                            <el-text class="formItem">{{ formData.workorderDate }}</el-text>
+                        </el-form-item>
+                        <el-form-item label="指示日期">
+                            <el-text class="formItem">{{ formData.instructionDate }}</el-text>
+                        </el-form-item>
+                    </el-card>
+                </el-form>
+            </div>
+        </el-col>
+    </el-row>
 </template>
 
 <script setup>
 // Importing necessary components from Element Plus
-import { ElContainer, ElHeader, ElMain, ElRow, ElCol } from 'element-plus';
+import scanInput from '../components/scanInput.vue'
+
+const processOptions = [
+    {
+        value: 10,
+        label: '物料领用',
+    },
+    {
+        value: 20,
+        label: '机械加工',
+    },
+    {
+        value: 30,
+        label: '中间检查',
+    },
+    {
+        value: 40,
+        label: '手工研磨',
+    },
+    {
+        value: 50,
+        label: '机研磨',
+    },
+    {
+        value: 60,
+        label: '精研磨',
+    },
+    {
+        value: 70,
+        label: '入库检查',
+    },
+    // {
+    //     value: 80,
+    //     label: '出厂',
+    // },
+    {
+        value: 90,
+        label: '出货',
+    },
+]
+const processId = ref(10)
+
+
+const formData = reactive({
+    id: null,
+    workorder: '工单号',
+    planNum: 0,
+    finishNum: 0,
+    productionName: '产品名称',
+    productionCode: '产品编码',
+    unit: '单位',
+    planNum: '计划数量',
+    sort: '排序',
+    workorderDate: '工单日期',
+    priority: '优先级',
+    beat: '节拍',
+    status: '状态',
+    instructionDate: '指导日期',
+    materialName: '材料名称',
+    materialtextureCode: '材质编码',
+    materialCode: '材料编码',
+    drawingCode: '图纸编码',
+    version: '版本',
+    stoveCode: '炉子编码',
+    workshopCode: '车间编码',
+    routeCode: '路线编码',
+    groupCode: '组编码'
+})
+
+function handleScanInput(val) {
+    console.log(val)
+}
 </script>
 
 <style scoped>
+.label {
+    color: #E6F4F1;
+    margin-right: 10px;
+}
+
+:deep(.el-form-item__label) {
+    color: #000000;
+}
+
+.formItem {
+    color: #000000;
+}
+
+.form-input {
+    width: 100%;
+}
+
 .left-content {
-    height: 80vh;
+    min-height: 90vh;
     /* Adjust the height as needed */
-    background-color: #f0f0f0;
-    /* Just for visualization */
+    background-color: #00949D;
     padding: 20px;
 }
 
 .right-content {
-    height: 80vh;
-    /* Adjust the height as needed */
-    background-color: #e0e0e0;
-    /* Just for visualization */
+    min-height: 90vh;
+    background-color: #46547F;
     padding: 20px;
 }
 </style>
\ No newline at end of file
diff --git a/src/vuetify-theme.json b/src/vuetify-theme.json
new file mode 100644
index 0000000..d8c6465
--- /dev/null
+++ b/src/vuetify-theme.json
@@ -0,0 +1,37 @@
+{
+  "dark": false, 
+  "colors": {
+    "background": "#3F51B5", 
+    "surface": "#303F9F", 
+    "surface-bright": "#3D5AFE", 
+    "surface-light": "#5C6BC0", 
+    "surface-variant": "#303F9F", 
+    "on-surface-variant": "#E8EAF6",
+    "primary": "#3F51B5", 
+    "primary-darken-1": "#303F9F", 
+    "secondary": "#E8EAF6", 
+    "secondary-darken-1": "#B39DDB", 
+    "error": "#D32F2F", 
+    "info": "#2196F3", 
+    "success": "#4CAF50", 
+    "warning": "#FFC107" 
+  },
+  "variables": {
+    "border-color": "#000000", 
+    "border-opacity": 0.12, 
+    "high-emphasis-opacity": 0.87, 
+    "medium-emphasis-opacity": 0.6, 
+    "disabled-opacity": 0.38, 
+    "idle-opacity": 0.04, 
+    "hover-opacity": 0.04, 
+    "focus-opacity": 0.12, 
+    "selected-opacity": 0.08, 
+    "activated-opacity": 0.12, 
+    "pressed-opacity": 0.12, 
+    "dragged-opacity": 0.08, 
+    "theme-kbd": "#212529", 
+    "theme-on-kbd": "#FFFFFF", 
+    "theme-code": "#1A237E", 
+    "theme-on-code": "#FFFFFF" 
+  }
+}
\ No newline at end of file