大屏文件导入和创建。

.env.development

@@ -10,8 +10,8 @@ VITE_APP_BASE_API = '/dev-api'
 # 上传文件接口地址
 VITE_APP_UPLOAD_URL = 'http://192.168.101.4:9000'
 # 开发接口地址
-# VITE_APP_API_URL = 'http://192.168.101.4:8078'
-VITE_APP_API_URL = 'http://127.0.0.1:8078'
+ VITE_APP_API_URL = 'http://192.168.101.4:8078'
+#VITE_APP_API_URL = 'http://127.0.0.1:8078'
 #  VITE_APP_API_URL = 'http://121.41.179.41:8078'  #lup
 #VITE_APP_API_URL = 'http://192.168.101.64:8078'  #hetao
 

src/router/index.ts

@@ -43,6 +43,23 @@ export const constantRoutes: RouteRecordRaw[] = [
     meta: { hidden: true },
     component: () => import("@/views/error-page/404.vue"),
   },
+  // ===============大屏
+  {
+    path: "/taskScreen",
+    component: () =>
+      import("@/views/report/statistics/screens/tasks/index.vue"),
+  },
+  {
+    path: "/capacityScreen",
+    component: () =>
+      import("@/views/report/statistics/screens/capacity/index.vue"),
+  },
+  {
+    path: "/qualityScreen",
+    component: () =>
+      import("@/views/report/statistics/screens/quality/index.vue"),
+  },
+
   // 外部链接
   // {
   //   path: "/external-link",

src/styles/index.scss

@@ -3,6 +3,7 @@
 .app-container {
   padding: 10px;
 }
+
 .search-container {
   padding: 18px 0 0 10px;
   margin-bottom: 10px;
@@ -35,3 +36,5 @@
   background-color: white;
   border-radius: 10px;
 }
+
+

src/styles/variables.scss

@@ -27,3 +27,5 @@ $sidebar-width: 210px; // 侧边栏宽度
 $sidebar-width-collapsed: 54px; // 侧边栏收缩宽度
 $navbar-height: 50px; // 导航栏高度
 $tags-view-height: 34px; // TagsView 高度
+
+$screen-header-height: 80px;

src/views/report/statistics/screens/capacity/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="screen-container">
+    <common-header title="工位任务分布" />
+    <div class="screen-content"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
+</script>
+
+<style lang="scss" scoped>
+.screen-container {
+  width: 100vw;
+  height: 100vh;
+  background-image: url("@/assets/images/screen_bg_task.png");
+  background-size: cover;
+  background-position: center;
+}
+
+.screen-content {
+  width: 100vw;
+  height: calc(100vh - 96px - 18px);
+  margin-top: 18px;
+  border: 2px solid red;
+}
+</style>

src/views/report/statistics/screens/common-header.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="screen-header">{{ title }}</div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.screen-header {
+  display: flex;
+  justify-content: center;
+  align-items: end;
+  height: $screen-header-height;
+  padding-bottom: 15px;
+  font-weight: 500;
+  font-size: 49px;
+  color: #ffffff;
+  line-height: 58px;
+  background-image: url("@/assets/images/screen_header1.png");
+  background-size: 100% 100%;
+  background-position: center;
+}
+</style>

src/views/report/statistics/screens/quality/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="screen-container">
+    <common-header title="工位任务分布" />
+    <div class="screen-content"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
+</script>
+
+<style lang="scss" scoped>
+.screen-container {
+  width: 100vw;
+  height: 100vh;
+  background-image: url("@/assets/images/screen_bg_task.png");
+  background-size: cover;
+  background-position: center;
+}
+
+.screen-content {
+  width: 100vw;
+  height: calc(100vh - 96px - 18px);
+  margin-top: 18px;
+  border: 2px solid red;
+}
+</style>

src/views/report/statistics/screens/tasks/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="screen-container">
+    <common-header title="工位任务分布" />
+    <div class="screen-content">
+      <div v-for="(item, index) in data" :key="index" class="grid-item"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
+
+const data = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);
+</script>
+
+<style lang="scss" scoped>
+.screen-container {
+  width: 100vw;
+  height: 100vh;
+  background-image: url("@/assets/images/screen_bg_task.png");
+  background-size: cover;
+  background-position: center;
+}
+
+.screen-content {
+  width: 100vw;
+  height: calc(100vh - $screen-header-height - 18px);
+  margin-top: 18px;
+  padding: 0 32px;
+
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 25px;
+
+  overflow-y: auto;
+
+  border: 2px solid red;
+
+  .grid-item {
+    height: 300px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 8px 8px 8px 8px;
+  }
+}
+</style>

src/views/system/menu/index.vue

@@ -1,95 +1,96 @@
 <template>
   <div class="app-container">
     <div class="search-container">
-      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+      <el-form ref="queryFormRef" :inline="true" :model="queryParams">
         <el-form-item label="关键字" prop="keywords">
           <el-input
             v-model="queryParams.keywords"
-            placeholder="菜单名称"
             clearable
+            placeholder="菜单名称"
             @keyup.enter="handleQuery"
           />
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="handleQuery"
-            ><template #icon><i-ep-search /></template>搜索</el-button
-          >
+          <el-button type="primary" @click="handleQuery">
+            <template #icon>
+              <i-ep-search />
+            </template>
+            搜索
+          </el-button>
           <el-button @click="resetQuery">
-            <template #icon><i-ep-refresh /></template>
-            重置</el-button
-          >
+            <template #icon>
+              <i-ep-refresh />
+            </template>
+            重置
+          </el-button>
         </el-form-item>
       </el-form>
     </div>
 
-    <el-card shadow="never" class="table-container">
+    <el-card class="table-container" shadow="never">
       <template #header>
         <el-button
           v-hasPerm="[ButtonPermKeys.SYSTEM.BTNS.menu_add]"
           type="primary"
           @click="openDialog('0')"
         >
-          <template #icon><i-ep-plus /></template>
-          新增</el-button
-        >
+          <template #icon>
+            <i-ep-plus />
+          </template>
+          新增
+        </el-button>
       </template>
 
       <el-table
         v-loading="loading"
         :data="menuList"
-        highlight-current-row
-        row-key="id"
         :expand-row-keys="['1']"
-        @row-click="onRowClick"
         :tree-props="{
           children: 'childs',
           hasChildren: 'hasChildren',
         }"
+        highlight-current-row
+        row-key="id"
+        @row-click="onRowClick"
       >
-        <el-table-column label="菜单名称"  >
+        <el-table-column label="菜单名称">
           <template #default="scope">
             <svg-icon :icon-class="scope.row.icon" />
             {{ scope.row.menuName }}
           </template>
         </el-table-column>
 
-        <el-table-column label="类型" align="center">
+        <el-table-column align="center" label="类型">
           <template #default="scope">
             <el-tag
               v-if="scope.row.type === MenuTypeEnum.CATALOG"
               type="warning"
-              >目录</el-tag
-            >
+              >目录
+            </el-tag>
             <el-tag v-if="scope.row.type === MenuTypeEnum.MENU" type="success"
-              >菜单</el-tag
-            >
-            <el-tag v-if="scope.row.type === MenuTypeEnum.BUTTON" type="danger"
-              >按钮</el-tag
-            >
-            <el-tag v-if="scope.row.isFrame" type="info">外链</el-tag>
+              >菜单
+            </el-tag>
+            <el-tag v-if="scope.row.type === MenuTypeEnum.BUTTON" type="info"
+              >按钮
+            </el-tag>
+            <el-tag v-if="scope.row.type === MenuTypeEnum.EXTLINK" type="danger"
+              >外链
+            </el-tag>
           </template>
         </el-table-column>
 
-        <el-table-column
-          label="路由路径"
-          align="left"
-          prop="path"
-        />
+        <el-table-column align="left" label="路由路径" prop="path" />
 
-        <el-table-column
-          label="组件路径"
-          align="left"
-          prop="component"
-        />
+        <el-table-column align="left" label="组件路径" prop="component" />
 
         <el-table-column
-          label="权限标识"
           align="center"
-          width="200"
+          label="权限标识"
           prop="perms"
+          width="200"
         />
 
-        <el-table-column label="状态" align="center" width="80">
+        <el-table-column align="center" label="状态" width="80">
           <template #default="scope">
             <el-tag v-if="scope.row.visible === 0" type="success">显示</el-tag>
             <el-tag v-else type="info">隐藏</el-tag>
@@ -97,41 +98,44 @@
         </el-table-column>
 
         <el-table-column
-          label="排序"
           align="center"
-          width="80"
+          label="排序"
           prop="orderNum"
+          width="80"
         />
 
-        <el-table-column fixed="right" align="center" label="操作" width="220">
+        <el-table-column align="center" fixed="right" label="操作" width="220">
           <template #default="scope">
             <el-button
-              v-hasPerm="[ButtonPermKeys.SYSTEM.BTNS.menu_add]"
               v-if="scope.row.type == 0 || scope.row.type == 1"
-              type="primary"
+              v-hasPerm="[ButtonPermKeys.SYSTEM.BTNS.menu_add]"
               link
               size="small"
+              type="primary"
               @click.stop="openDialog(scope.row.id)"
             >
-              <i-ep-plus />新增
+              <i-ep-plus />
+              新增
             </el-button>
 
             <el-button
               v-hasPerm="[ButtonPermKeys.SYSTEM.BTNS.menu_edit]"
-              type="primary"
               link
               size="small"
+              type="primary"
               @click.stop="openDialog(undefined, scope.row.id)"
             >
-              <i-ep-edit />编辑
+              <i-ep-edit />
+              编辑
             </el-button>
             <el-button
               v-hasPerm="[ButtonPermKeys.SYSTEM.BTNS.menu_del]"
-              type="primary"
               link
               size="small"
+              type="primary"
               @click.stop="handleDelete(scope.row.id)"
-              ><i-ep-delete />
+            >
+              <i-ep-delete />
               删除
             </el-button>
           </template>
@@ -142,11 +146,11 @@
     <el-dialog
       v-model="dialog.visible"
       :header="dialog.title"
-      destroy-on-close
       append-to-body
+      destroy-on-close
+      top="5vh"
       width="1000px"
       @close="closeDialog"
-      top="5vh"
     >
       <el-form
         ref="menuFormRef"
@@ -157,13 +161,13 @@
         <el-form-item label="父级菜单" prop="parentId">
           <el-tree-select
             v-model="formData.parentId"
-            placeholder="选择上级菜单"
             :data="menuOptions"
-            filterable
-            check-strictly
-            :render-after-expand="false"
             :props="defaultProps"
+            :render-after-expand="false"
+            check-strictly
+            filterable
             node-key="id"
+            placeholder="选择上级菜单"
           />
         </el-form-item>
 
@@ -172,8 +176,8 @@
         </el-form-item>
 
         <el-row>
-          <el-col :span="12"
-            ><el-form-item label="菜单类型" prop="type">
+          <el-col :span="12">
+            <el-form-item label="菜单类型" prop="type">
               <el-radio-group
                 v-model="formData.type"
                 @change="onMenuTypeChange"
@@ -181,26 +185,26 @@
                 <el-radio :value="0">目录</el-radio>
                 <el-radio :value="1">菜单</el-radio>
                 <el-radio :value="2">按钮</el-radio>
-                <!-- <el-radio label="EXTLINK">外链</el-radio> -->
+                <el-radio :value="3">外链</el-radio>
               </el-radio-group>
             </el-form-item>
           </el-col>
-          <el-col :span="12"
-            ><el-form-item
+          <el-col :span="12">
+            <el-form-item
               v-if="formData.type !== MenuTypeEnum.BUTTON"
-              prop="visible"
               label="显示状态"
+              prop="visible"
             >
               <el-radio-group v-model="formData.visible">
                 <el-radio :value="0">显示</el-radio>
                 <el-radio :value="1">隐藏</el-radio>
               </el-radio-group>
-            </el-form-item></el-col
-          >
+            </el-form-item>
+          </el-col>
         </el-row>
 
         <el-form-item
-          v-if="formData.isFrame === 1"
+          v-if="formData.type == MenuTypeEnum.EXTLINK"
           label="外链地址"
           prop="path"
         >
@@ -208,7 +212,7 @@
         </el-form-item>
 
         <el-form-item
-          v-if="
+          v-else-if="
             formData.type == MenuTypeEnum.CATALOG ||
             formData.type == MenuTypeEnum.MENU
           "
@@ -233,11 +237,11 @@
             style="width: 95%"
           >
             <template v-if="formData.type == MenuTypeEnum.MENU" #prepend
-              >src/views/</template
-            >
+              >src/views/
+            </template>
             <template v-if="formData.type == MenuTypeEnum.MENU" #append
-              >.vue</template
-            >
+              >.vue
+            </template>
           </el-input>
         </el-form-item>
 
@@ -269,20 +273,20 @@
             <el-form-item label="排序" prop="orderNum">
               <el-input-number
                 v-model="formData.orderNum"
-                style="width: 100px"
-                controls-position="right"
                 :min="0"
+                controls-position="right"
+                style="width: 100px"
               />
             </el-form-item>
           </el-col>
-          <el-col :span="12"
-            ><el-form-item label="是否为外链">
-              <el-radio-group v-model="formData.isFrame">
-                <el-radio :value="1">是</el-radio>
-                <el-radio :value="0">否</el-radio>
-              </el-radio-group>
-            </el-form-item></el-col
-          >
+          <!--          <el-col :span="12">-->
+          <!--            <el-form-item label="是否为外链">-->
+          <!--              <el-radio-group v-model="formData.isFrame">-->
+          <!--                <el-radio :value="1">是</el-radio>-->
+          <!--                <el-radio :value="0">否</el-radio>-->
+          <!--              </el-radio-group>-->
+          <!--            </el-form-item>-->
+          <!--          </el-col>-->
         </el-row>
 
         <el-row>
@@ -292,8 +296,8 @@
                 <el-radio :value="0">启用</el-radio>
                 <el-radio :value="1">禁用</el-radio>
               </el-radio-group>
-            </el-form-item></el-col
-          >
+            </el-form-item>
+          </el-col>
           <el-col :span="12">
             <el-form-item
               v-if="formData.type === MenuTypeEnum.MENU"
@@ -347,7 +351,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 defineOptions({
   // eslint-disable-next-line vue/no-reserved-component-names
   name: "Menu",
@@ -386,9 +390,9 @@ const formData = reactive<MenuForm>({
   visible: 0,
   orderNum: 1,
   type: MenuTypeEnum.MENU,
-  alwaysShow: 0,
+  alwaysShow: 1,
   keepAlive: 0,
-  isFrame: 0,
+  isFrame: 0, //用type来判断是否为外链
   state: 0,
 });