右侧图标

package.json

@@ -10,6 +10,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@icon-park/vue-next": "^1.4.2",
     "@types/lodash": "^4.14.149",
     "axios": "^1.7.2",
     "core-js": "^3.8.3",

src/App.vue

@@ -9,6 +9,7 @@
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+  // background-color: rgba(0, 0, 255, 0.6);
 }
 
 nav {

src/main.ts

@@ -11,7 +11,7 @@ import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import utc from 'dayjs/plugin/utc'
-
+import "@icon-park/vue-next/styles/index.css";
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 dayjs.extend(isSameOrBefore)

src/views/HomePage.vue

@@ -1,10 +1,21 @@
 <template>
 	<div>
 		<el-container>
+		      <el-header><HomeTop></HomeTop></el-header>
+		      <el-container>
+		        
+		        <el-container>
+		          <el-main><router-view /></el-main>
+		          <el-footer><HomeBottom class="fixed-bottom-center"></HomeBottom></el-footer>
+		        </el-container>
+				<el-aside width="120px"><HomeRight></HomeRight></el-aside>
+		      </el-container>
+		    </el-container>
+		<!-- <el-container>
 			<el-header ><HomeTop></HomeTop></el-header>
 			<el-main > <router-view /></el-main>
 			<el-footer><HomeBottom class="fixed-bottom-center"></HomeBottom></el-footer>
-		</el-container>
+		</el-container> -->
 	</div>
 </template>
 
@@ -16,13 +27,14 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import HomeTop from './components/Home/home_top.vue'
+import HomeRight from './components/Home/home_right.vue'
 import HomeBottom from './components/Home/home_bottom.vue'
 </script>
 
 <style lang="scss" scoped>
 .fixed-bottom-center {
 	position: fixed;
-	bottom: 10px;
+	bottom: 5px;
 	left: 50%;
 	transform: translateX(-50%);
 	/* 添加其他样式如宽度、高度、背景色等 */

src/views/components/Home/home_right.vue

@@ -0,0 +1,134 @@
+<template>
+	<div class="right-box">
+		<div class="right-item" @click="toProductionWorker()"><view-list theme="outline" size="48" fill="#ffffff" /></div>
+		<div class="right-item"><upload-logs theme="outline" size="48" fill="#ffffff" /></div>
+		<div class="right-item"><report theme="outline" size="48" fill="#ffffff" /></div>
+		<div class="right-item"><printer-one theme="outline" size="48" fill="#ffffff" /></div>
+		<div class="right-item" @click="showSetUp"><spanner theme="outline" size="48" fill="#ffffff" /></div>
+	</div>
+	<el-dialog v-model.sync="show" title="设置" width="40%" center>
+		<el-form ref="formRef" :model="form" class="form-box" label-width="auto">
+			<el-tabs tab-position="left" v-model="activeName" type="border-card">
+				<el-tab-pane label="工位设置" name="A001">
+					<el-form-item label="选择组别" prop="teamData">
+						<el-select value-key="id" v-model="form.teamData" placeholder="选择组别" @change="changeTeam">
+							<el-option
+								v-for="(item, index) in teamOptions"
+								:key="item.id"
+								:label="`${item.groupName}-${item.groupCode}`"
+								:value="item"
+							/>
+						</el-select>
+					</el-form-item>
+					<el-form-item label="选择线别" prop="lineData">
+						<el-select value-key="id" v-model="form.lineData" placeholder="选择线别">
+							<el-option v-for="(item, index) in lineOptions" :key="item.id" :label="`${item.name}-${item.code}`" :value="item" />
+						</el-select>
+					</el-form-item>
+					<el-form-item label="负责人" prop="persion">
+						<el-input v-model.trim="form.persion" />
+					</el-form-item>
+					<el-form-item label="时间">
+						<el-date-picker style="width: 100%" v-model="form.time" type="date" :clearable="false" />
+					</el-form-item>
+					<div class="button-box">
+						<el-button size="large" style="width: 100px" type="success" @click="saveSetting"> 保存 </el-button>
+					</div>
+				</el-tab-pane>
+				<el-tab-pane label="服务器" name="A002">服务器</el-tab-pane>
+				<el-tab-pane label="打印设置" name="A003">打印设置</el-tab-pane>
+				<el-tab-pane label="外接模块" name="A004">外接模块</el-tab-pane>
+				<el-tab-pane label="报工设置" name="A005">报工设置</el-tab-pane>
+				<el-tab-pane label="关于系统" name="A006">关于系统</el-tab-pane>
+			</el-tabs>
+		</el-form>
+	</el-dialog>
+</template>
+
+<script setup name="">
+import { getCurrentInstance } from 'vue'
+import { onMounted } from 'vue'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ViewList, Report, PrinterOne, UploadLogs, Spanner } from '@icon-park/vue-next'
+const { proxy } = getCurrentInstance()
+const router = useRouter()
+function toProductionWorker() {
+	router.push('/home_page/productwork')
+}
+// 配置界面
+const show = ref(false)
+function showSetUp() {
+	show.value = true
+}
+// 配置参数
+const activeName = ref('A001')
+const store = proxy.$useMapState(['teamOptions', 'lineOptions'])
+onMounted(() => {
+	proxy.$store.dispatch('updateTeamOptions')
+	proxy.$store.dispatch('updateLineOptions')
+})
+const formRef = ref()
+const form = ref({
+	teamData: null,
+	lineData: null,
+	persion: '',
+	time: new Date(),
+})
+const rules = ref({
+	teamData: [{ required: true, message: '组别不能为空', trigger: 'blur' }],
+	lineData: [{ required: true, message: '线别不能为空', trigger: 'blur' }],
+	persion: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
+})
+const teamOptions = ref(store.teamOptions)
+const lineOptions = ref(store.lineOptions)
+const changeTeam = (val) => {
+	form.value.persion = val.groupLeader
+}
+// 保存基本设置
+function saveSetting() {
+	proxy.$refs['formRef'].validate((valid) => {
+		if (valid) {
+			proxy.$store.dispatch('loginSetData', form.value).then(() => {
+				proxy.$store.dispatch('updateWorkOrderList').then((res) => {
+					const { code, data } = res
+					if (code === 200) {
+						proxy.$message.success('数据更新成功')
+						// router.push('/home_page/menu')
+					} else {
+						proxy.$message.error('工单数据拉取异常')
+					}
+				})
+			})
+		}
+	})
+}
+</script>
+
+<style lang="scss" scoped>
+.right-box {
+	width: 100px;
+	// height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	// justify-content: center;
+	// border: 1px solid #000000;
+}
+.right-item {
+	margin: 10px;
+	width: 80px;
+	height: 80px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	// border: 1px solid #000000;
+	border-radius: 10px;
+	background-color: #4a90e2;
+}
+.button-box {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+</style>

src/views/components/Home/home_top.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="top-box">
-		<el-button size="large" type="primary" icon="ArrowLeft"  class="left-button" @click="prePage">后退</el-button>
+		<!-- <el-button size="large" type="primary" icon="ArrowLeft"  class="left-button" @click="prePage">后退</el-button> -->
 		<table class="status-table">
 			<tr>
 				<td class="label">当前时间:</td>
@@ -27,11 +27,11 @@
 				</td> -->
 				<td class="label">今日工单总任务：</td>
 				<td class="value workorder">
-					<div>{{store.workOrderTotalTaskNum.value}}</div>
+					<div>{{ store.workOrderTotalTaskNum.value }}</div>
 				</td>
 				<td class="label">待完成剩余任务：</td>
 				<td class="value workorder">
-					<div style="color: red; font-weight: bolder">{{store.workOrderRemainTaskNum.value}}</div>
+					<div style="color: red; font-weight: bolder">{{ store.workOrderRemainTaskNum.value }}</div>
 				</td>
 			</tr>
 		</table>
@@ -47,7 +47,16 @@ import { useRouter } from 'vue-router'
 const { proxy } = getCurrentInstance()
 
 import { ref, onMounted, onUnmounted } from 'vue'
-const store = proxy.$useMapState(['teamName', 'teamCode', 'lineName', 'lineCode', 'persionName', 'workCheckTime','workOrderTotalTaskNum','workOrderRemainTaskNum'])
+const store = proxy.$useMapState([
+	'teamName',
+	'teamCode',
+	'lineName',
+	'lineCode',
+	'persionName',
+	'workCheckTime',
+	'workOrderTotalTaskNum',
+	'workOrderRemainTaskNum',
+])
 const currentTime = ref('')
 function updateTime() {
 	const now = new Date()
@@ -92,17 +101,19 @@ function nextPage() {
 	background-color: #f4f4f5;
 	// border: 1px solid #000000;
 }
-.left-button{
+.left-button {
 	// float: left;
 }
-.right-button{
+.right-button {
+	width: 100px;
+	margin-left: 20px;
 	// float: right;
 }
 .status-table {
 	width: 100%;
-	// height: 60px;
+	height: 50px;
 	border-collapse: separate;
-	border-spacing: 10px; /* 增加单元格间的水平间距 */
+	// border-spacing: 10px; /* 增加单元格间的水平间距 */
 }
 
 /* 设置单元格的样式 */
@@ -114,6 +125,7 @@ td {
 /* 标签列的样式 */
 td.label {
 	font-weight: 700;
+	font-size: 14px;
 	color: #555; /* 更暗的颜色以区分标签和值 */
 }
 
@@ -143,7 +155,7 @@ td .value {
 }
 /* 当前时间的特殊样式 */
 .current-time {
-	font-size: 1.2em; /* 较大的字体大小 */
+	font-size: 1em; /* 较大的字体大小 */
 	font-weight: bold;
 }
-</style>
+</style>

src/views/login/index.vue

@@ -97,7 +97,7 @@ const doLogin = () => {
 				proxy.$store.dispatch('updateWorkOrderList').then((res) => {
 					const { code, data } = res
 					if (code === 200) {
-						router.push('/home_page/menu')
+						router.push('/home_page/productwork')
 					} else {
 						proxy.$message.error('工单数据拉取异常')
 					}

src/views/productwork/index.vue

@@ -121,7 +121,8 @@ const getWorkOrderList = async () => {
 			loading1.value = false
 			proxy.$message.success('工单获取成功')
 		} else {
-			proxy.$message.error('获取工单异常')
+			proxy.$message.error('无工单信息，请检查配置或查看是否有工单！')
+			loading1.value = false
 		}
 		// console.log('getWorkOrderDetail', data)
 	})