diff --git a/src/router/index.js b/src/router/index.js
index 8fac6a4..a74be56 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -23,155 +23,161 @@ import Layout from '@/layout'
 
 // 公共路由
 export const constantRoutes = [
-  {
-    name: 'Fullscreen',
-    path: '/fullscreen',
-    component: () => import('@/views/deviceManagement/datascreen/index.vue'),
-    hidden: true
-  },
-  // {
-  //   name: 'Fullscreen2',
-  //   path: '/fullscreen2',
-  //   component: () => import('@/views/andonManagement/analysis/fullscreen/index.vue'),
-  //   hidden: true
-  // },
-  {
-    name: 'TheTaskExecuteView',
-    path: '/TheTaskExecuteView',
-    component: () => import('@/views/deviceManagement/deviceTaskExecute/TheTaskExecuteView.vue'),
-    hidden: true
-  },
-  {
-    name: 'SmartScreen',
-    path: '/SmartScreen',
-    component: () => import('@/views/SmartScreen/index.vue'),
-    hidden: true
-  },
-  {
-    name: 'ProdScreen',
-    path: '/SmartScreen/ProdScreen',
-    component: () => import('@/views/SmartScreen/ProdScreen/index.vue'),
-    hidden: true
-  },
-  {
-    name: 'QualityScreen',
-    path: '/SmartScreen/QualityScreen',
-    component: () => import('@/views/SmartScreen/QualityScreen/index.vue'),
-    hidden: true
-  },
-  {
-    name: 'DeviceScreen',
-    path: '/SmartScreen/DeviceScreen',
-    component: () => import('@/views/SmartScreen/DeviceScreen/index.vue'),
-    hidden: true
-  },
-  {
-    name: 'ReportScreen',
-    path: '/SmartScreen/ReportScreen',
-    component: () => import('@/views/SmartScreen/ReportScreen/index.vue'),
-    hidden: true
-  },
-  {
-    name: 'touchScreen',
-    path: '/productManagement/touchScreen',
-    component: () => import('@/views/touchScreen/main/index.vue'),
-    hidden: true
-  },
-  // {
-  //   name: 'KANBAN',
-  //   path: '/KANBAN',
-  //   component: () => import('@/views/largeScreen/KANBAN/index.vue'),
-  //   hidden: true
-  // },
-  // 物料备料大屏
-  // {
-  //   name: 'materialKANBAN',
-  //   path: '/materialManagement/materialKANBAN',
-  //   component: () => import('@/views/materialMangement/materialKANBAN/KANBAN/index.vue'),
-  //   hidden: true
-  // },
-  {
-    path: '/redirect',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect/index.vue')
-      }
-    ]
-  },
-  {
-    path: '/login',
-    component: () => import('@/views/login'),
-    hidden: true
-  },
-  {
-    path: '/sociallogin',
-    component: () => import('@/views/socialLogin'),
-    hidden: true
-  },
-  {
-    path: '/register',
-    component: () => import('@/views/register'),
-    hidden: true
-  },
-  {
-    path: '/:pathMatch(.*)*',
-    component: () => import('@/views/error/404'),
-    hidden: true
-  },
-  {
-    path: '/401',
-    component: () => import('@/views/error/401'),
-    hidden: true
-  },
-  {
-    path: '/error',
-    component: () => import('@/views/error/Error'),
-    hidden: true
-  },
-  //todo  app.vue 里路由跳转<router-view>
-  {
-    path: '',
-    component: Layout,
-    redirect: '/index',
-    children: [
-      {
-        path: '/index',
-        component: () => import('@/views/index'),
-        name: 'Index',
-        meta: { title: '首页', icon: 'index', affix: true, titleKey: 'menu.home' }
-      }
-    ]
-  },
-  {
-    path: '/user',
-    component: Layout,
-    hidden: true,
-    redirect: 'noredirect',
-    children: [
-      {
-        path: 'profile',
-        component: () => import('@/views/system/user/profile/index'),
-        name: 'Profile',
-        meta: { title: '个人中心', icon: 'user', titleKey: 'menu.personalCenter' }
-      }
-    ]
-  }
+    {
+        name: 'Fullscreen',
+        path: '/fullscreen',
+        component: () => import('@/views/deviceManagement/datascreen/index.vue'),
+        hidden: true
+    },
+    // {
+    //   name: 'Fullscreen2',
+    //   path: '/fullscreen2',
+    //   component: () => import('@/views/andonManagement/analysis/fullscreen/index.vue'),
+    //   hidden: true
+    // },
+    {
+        name: 'TheTaskExecuteView',
+        path: '/TheTaskExecuteView',
+        component: () => import('@/views/deviceManagement/deviceTaskExecute/TheTaskExecuteView.vue'),
+        hidden: true
+    },
+    {
+        name: 'SmartScreen',
+        path: '/SmartScreen',
+        component: () => import('@/views/SmartScreen/index.vue'),
+        hidden: true
+    },
+    {
+        name: 'LoopScreen',
+        path: '/SmartScreen/LoopScreen',
+        component: () => import('@/views/SmartScreen/index.vue'),
+        hidden: true
+    },
+    {
+        name: 'ProdScreen',
+        path: '/SmartScreen/ProdScreen',
+        component: () => import('@/views/SmartScreen/ProdScreen/index.vue'),
+        hidden: true
+    },
+    {
+        name: 'QualityScreen',
+        path: '/SmartScreen/QualityScreen',
+        component: () => import('@/views/SmartScreen/QualityScreen/index.vue'),
+        hidden: true
+    },
+    {
+        name: 'DeviceScreen',
+        path: '/SmartScreen/DeviceScreen',
+        component: () => import('@/views/SmartScreen/DeviceScreen/index.vue'),
+        hidden: true
+    },
+    {
+        name: 'ReportScreen',
+        path: '/SmartScreen/ReportScreen',
+        component: () => import('@/views/SmartScreen/ReportScreen/index.vue'),
+        hidden: true
+    },
+    {
+        name: 'touchScreen',
+        path: '/productManagement/touchScreen',
+        component: () => import('@/views/touchScreen/main/index.vue'),
+        hidden: true
+    },
+    // {
+    //   name: 'KANBAN',
+    //   path: '/KANBAN',
+    //   component: () => import('@/views/largeScreen/KANBAN/index.vue'),
+    //   hidden: true
+    // },
+    // 物料备料大屏
+    // {
+    //   name: 'materialKANBAN',
+    //   path: '/materialManagement/materialKANBAN',
+    //   component: () => import('@/views/materialMangement/materialKANBAN/KANBAN/index.vue'),
+    //   hidden: true
+    // },
+    {
+        path: '/redirect',
+        component: Layout,
+        hidden: true,
+        children: [
+            {
+                path: '/redirect/:path(.*)',
+                component: () => import('@/views/redirect/index.vue')
+            }
+        ]
+    },
+    {
+        path: '/login',
+        component: () => import('@/views/login'),
+        hidden: true
+    },
+    {
+        path: '/sociallogin',
+        component: () => import('@/views/socialLogin'),
+        hidden: true
+    },
+    {
+        path: '/register',
+        component: () => import('@/views/register'),
+        hidden: true
+    },
+    {
+        path: '/:pathMatch(.*)*',
+        component: () => import('@/views/error/404'),
+        hidden: true
+    },
+    {
+        path: '/401',
+        component: () => import('@/views/error/401'),
+        hidden: true
+    },
+    {
+        path: '/error',
+        component: () => import('@/views/error/Error'),
+        hidden: true
+    },
+    //todo  app.vue 里路由跳转<router-view>
+    {
+        path: '',
+        component: Layout,
+        redirect: '/index',
+        children: [
+            {
+                path: '/index',
+                component: () => import('@/views/index'),
+                name: 'Index',
+                meta: { title: '首页', icon: 'index', affix: true, titleKey: 'menu.home' }
+            }
+        ]
+    },
+    {
+        path: '/user',
+        component: Layout,
+        hidden: true,
+        redirect: 'noredirect',
+        children: [
+            {
+                path: 'profile',
+                component: () => import('@/views/system/user/profile/index'),
+                name: 'Profile',
+                meta: { title: '个人中心', icon: 'user', titleKey: 'menu.personalCenter' }
+            }
+        ]
+    }
 ]
 
 const router = createRouter({
-  //history: createWebHistory(import.meta.env.VITE_APP_ROUTER_PREFIX),
-  history: createWebHashHistory(),
-  routes: constantRoutes,
-  scrollBehavior(to, from, savedPosition) {
-    if (savedPosition) {
-      return savedPosition
-    } else {
-      return { top: 0 }
+    //history: createWebHistory(import.meta.env.VITE_APP_ROUTER_PREFIX),
+    history: createWebHashHistory(),
+    routes: constantRoutes,
+    scrollBehavior(to, from, savedPosition) {
+        if (savedPosition) {
+            return savedPosition
+        } else {
+            return { top: 0 }
+        }
     }
-  }
 })
 
 export default router
diff --git a/src/views/SmartScreen/OrderScreen/background/1.png b/src/views/SmartScreen/OrderScreen/background/1.png
new file mode 100644
index 0000000..1c57392
Binary files /dev/null and b/src/views/SmartScreen/OrderScreen/background/1.png differ
diff --git a/src/views/SmartScreen/OrderScreen/background/10.png b/src/views/SmartScreen/OrderScreen/background/10.png
new file mode 100644
index 0000000..ae10658
Binary files /dev/null and b/src/views/SmartScreen/OrderScreen/background/10.png differ
diff --git a/src/views/SmartScreen/OrderScreen/background/2.png b/src/views/SmartScreen/OrderScreen/background/2.png
new file mode 100644
index 0000000..56d851e
Binary files /dev/null and b/src/views/SmartScreen/OrderScreen/background/2.png differ
diff --git a/src/views/SmartScreen/OrderScreen/background/3.png b/src/views/SmartScreen/OrderScreen/background/3.png
new file mode 100644
index 0000000..8bc92cf
Binary files /dev/null and b/src/views/SmartScreen/OrderScreen/background/3.png differ
diff --git a/src/views/SmartScreen/OrderScreen/background/4.png b/src/views/SmartScreen/OrderScreen/background/4.png
new file mode 100644
index 0000000..ecf7639
Binary files /dev/null and b/src/views/SmartScreen/OrderScreen/background/4.png differ
diff --git a/src/views/SmartScreen/OrderScreen/background/5.png b/src/views/SmartScreen/OrderScreen/background/5.png
new file mode 100644
index 0000000..3199260
Binary files /dev/null and b/src/views/SmartScreen/OrderScreen/background/5.png differ
diff --git a/src/views/SmartScreen/OrderScreen/background/6.png b/src/views/SmartScreen/OrderScreen/background/6.png
new file mode 100644
index 0000000..ab1fcdb
Binary files /dev/null and b/src/views/SmartScreen/OrderScreen/background/6.png differ
diff --git a/src/views/SmartScreen/OrderScreen/background/7.png b/src/views/SmartScreen/OrderScreen/background/7.png
new file mode 100644
index 0000000..1bf7e8c
Binary files /dev/null and b/src/views/SmartScreen/OrderScreen/background/7.png differ
diff --git a/src/views/SmartScreen/OrderScreen/background/8.png b/src/views/SmartScreen/OrderScreen/background/8.png
new file mode 100644
index 0000000..951770b
Binary files /dev/null and b/src/views/SmartScreen/OrderScreen/background/8.png differ
diff --git a/src/views/SmartScreen/OrderScreen/background/9.png b/src/views/SmartScreen/OrderScreen/background/9.png
new file mode 100644
index 0000000..97f6a6e
Binary files /dev/null and b/src/views/SmartScreen/OrderScreen/background/9.png differ
diff --git a/src/views/SmartScreen/OrderScreen/charts/DemoBar.vue b/src/views/SmartScreen/OrderScreen/charts/DemoBar.vue
new file mode 100644
index 0000000..39f7105
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/charts/DemoBar.vue
@@ -0,0 +1,145 @@
+<template>
+    <div ref="chartRef" :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import { getCurrentInstance, watch, onMounted, ref } from 'vue'
+import * as echarts from 'echarts'
+import theme from '../theme/chalk.json'
+echarts.registerTheme('theme', theme)
+import { CanvasRenderer } from 'echarts/renderers'
+echarts.use([CanvasRenderer])
+const { proxy } = getCurrentInstance()
+const chartRef = ref(null)
+const props = defineProps({
+    width: {
+        type: String,
+        default: '100%'
+    },
+    height: {
+        type: String,
+        default: '450px'
+    }
+})
+const options = {
+    title: {
+        text: '工单对比',
+        left: 'left'
+    },
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    xAxis: {
+        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        boundaryGap: true,
+        axisTick: {
+            show: false
+        }
+    },
+    yAxis: {
+        type: 'value',
+        axisTick: {
+            show: false
+        }
+    },
+    // 图例
+    legend: {
+        textStyle: {
+            color: '#fff'
+        },
+        data: ['计划', '实际', '占比']
+    },
+    series: [
+        {
+            name: '计划',
+            type: 'bar',
+            data: [312, 79, 59, 100, 541, 55, 142],
+            label: {
+                show: true,
+                position: 'top',
+                textBorderColor: '#fff',
+                textBorderWidth: 1,
+                color: '#fff'
+            }
+        },
+        {
+            name: '实际',
+            type: 'bar',
+            data: [108, 241, 239, 400, 542, 46, 425],
+            label: {
+                show: true,
+                position: 'top',
+                textBorderColor: '#fff',
+                textBorderWidth: 1,
+                color: '#fff'
+            }
+        },
+        {
+            name: '占比',
+            type: 'bar',
+            data: [10, 44, 44, 54, 20, 46, 60],
+            label: {
+                show: true,
+                position: 'top',
+                textBorderColor: '#fff',
+                textBorderWidth: 1,
+                color: '#fff'
+            }
+        }
+    ]
+}
+const chart = ref(null)
+function initChart() {
+    chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
+    chart.value.setOption(options)
+}
+onMounted(() => {
+    initChart()
+    window.addEventListener('resize', () => {
+        chart.value?.resize()
+    })
+})
+/// ============ 修改数据 ===========
+import { getMoudle03 } from '@/api/smartScreen/ProdScreen/index.js'
+function updateData() {
+    getMoudle03().then((res) => {
+        if (res.code === 200) {
+            options.title = res.data.title
+            options.xAxis.data = res.data.xAxis.data
+            options.series = res.data.series
+            chart.value.setOption(options)
+        }
+    })
+}
+function handleQuery() {
+    updateData()
+}
+// handleQuery()
+let timer1 = null
+const clearSearchTimer = () => {
+    clearInterval(timer1)
+    timer1 = null
+}
+const createSearchTimer = () => {
+    clearSearchTimer()
+    timer1 = setInterval(() => {
+        handleQuery()
+    }, 1000 * 60 * 5)
+}
+onMounted(() => {
+    createSearchTimer()
+})
+onUnmounted(() => {
+    clearSearchTimer()
+})
+/// ==========================================
+</script>
diff --git a/src/views/SmartScreen/OrderScreen/charts/DemoChart.vue b/src/views/SmartScreen/OrderScreen/charts/DemoChart.vue
new file mode 100644
index 0000000..3172246
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/charts/DemoChart.vue
@@ -0,0 +1,97 @@
+<template>
+    <div ref="chartRef" :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import { getCurrentInstance, watch, onMounted, ref } from 'vue'
+import * as echarts from 'echarts'
+import theme from '../theme/chalk.json'
+echarts.registerTheme('theme', theme)
+import { CanvasRenderer } from 'echarts/renderers'
+echarts.use([CanvasRenderer])
+const { proxy } = getCurrentInstance()
+const chartRef = ref(null)
+const props = defineProps({
+    width: {
+        type: String,
+        default: '400px'
+    },
+    height: {
+        type: String,
+        default: '350px'
+    }
+})
+watch(
+    () => props.chartData,
+    (val) => {
+        if (chart != null) {
+            // setOptions(val)
+        }
+    },
+    { deep: true }
+)
+const options = {
+    title: {
+        text: '柱状图',
+        left: 'left'
+    },
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    xAxis: {
+        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        boundaryGap: true,
+        axisTick: {
+            show: false
+        }
+    },
+    yAxis: {
+        type: 'value',
+        axisTick: {
+            show: false
+        }
+    },
+    // 图例
+    legend: {
+        data: ['参数1', '参数2']
+    },
+    series: [
+        {
+            name: '参数1',
+            type: 'bar',
+            data: [1, 2, 3, 4, 5, 6, 7],
+            // 动画时长与模式
+            animationDuration: 3000,
+            animationEasing: 'cubicInOut'
+        },
+        {
+            name: '参数2',
+            type: 'bar',
+            data: [1, 2, 3, 4, 5, 6, 7],
+            // 动画时长与模式
+            animationDuration: 3000,
+            animationEasing: 'cubicInOut'
+        }
+    ]
+}
+const chart = ref(null)
+function initChart() {
+    chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
+    chart.value.setOption(options)
+}
+onMounted(() => {
+    initChart()
+    window.addEventListener('resize', () => {
+        chart.value?.resize()
+    })
+})
+</script>
diff --git a/src/views/SmartScreen/OrderScreen/charts/DemoLine.vue b/src/views/SmartScreen/OrderScreen/charts/DemoLine.vue
new file mode 100644
index 0000000..19138a4
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/charts/DemoLine.vue
@@ -0,0 +1,120 @@
+<template>
+    <div ref="chartRef" :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import { getCurrentInstance, watch, onMounted, ref } from 'vue'
+import * as echarts from 'echarts'
+import theme from '../theme/chalk.json'
+echarts.registerTheme('theme', theme)
+import { CanvasRenderer } from 'echarts/renderers'
+echarts.use([CanvasRenderer])
+const { proxy } = getCurrentInstance()
+const chartRef = ref(null)
+const props = defineProps({
+    width: {
+        type: String,
+        default: '100%'
+    },
+    height: {
+        type: String,
+        default: '400px'
+    }
+})
+let options = {
+    title: {
+        text: '本月产量',
+        left: 'left'
+    },
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    xAxis: {
+        data: ['11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07', '11-08', '11-09'],
+        boundaryGap: true,
+        axisTick: {
+            show: false
+        }
+    },
+    yAxis: {
+        type: 'value',
+        axisTick: {
+            show: false
+        }
+    },
+    // 图例
+    legend: {
+        data: ['产量（个）']
+    },
+    series: [
+        {
+            name: '产量（个）',
+            type: 'line',
+            smooth: false,
+            data: [124, 252, 141, 335, 255, 414, 252, 127, 212],
+            label: {
+                show: true,
+                position: 'top',
+                textBorderColor: '#fff',
+                textBorderWidth: 1,
+                color: '#fff'
+            }
+        }
+    ]
+}
+
+const chart = ref(null)
+function initChart() {
+    chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
+    chart.value.setOption(options)
+}
+onMounted(() => {
+    initChart()
+    window.addEventListener('resize', () => {
+        chart.value?.resize()
+    })
+})
+/// ============ 修改数据 ===========
+import { getMoudle02 } from '@/api/smartScreen/ProdScreen/index.js'
+function updateData() {
+    // getMoudle02().then((res) => {
+    //     if (res.code === 200) {
+    //         options.title = res.data.title
+    //         options.xAxis.data = res.data.xAxis.data
+    //         options.series = res.data.series
+    //         chart.value.setOption(options)
+    //     }
+    // })
+}
+function handleQuery() {
+    updateData()
+}
+// handleQuery()
+let timer1 = null
+const clearSearchTimer = () => {
+    clearInterval(timer1)
+    timer1 = null
+}
+const createSearchTimer = () => {
+    clearSearchTimer()
+    timer1 = setInterval(() => {
+        handleQuery()
+    }, 1000 * 60 * 5)
+}
+onMounted(() => {
+    createSearchTimer()
+})
+onUnmounted(() => {
+    clearSearchTimer()
+})
+/// ==========================================
+</script>
diff --git a/src/views/SmartScreen/OrderScreen/charts/DemoList.vue b/src/views/SmartScreen/OrderScreen/charts/DemoList.vue
new file mode 100644
index 0000000..252b288
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/charts/DemoList.vue
@@ -0,0 +1,89 @@
+<!-- 今日工单 -->
+<template>
+    <div>
+        <div class="title">今日工单进度</div>
+        <el-table height="450" :data="dataList" v-loading="loading" ref="tableRef" highlight-current-row @mouseover.native="clearScroll" @mouseleave.native="createScroll">
+            <el-table-column type="index" width="50" align="center" />
+            <el-table-column prop="workorder" label="工单号" :show-overflow-tooltip="true" />
+            <el-table-column prop="productionName" label="产品名称" :show-overflow-tooltip="true" />
+            <el-table-column prop="productionCode" label="产品编号" :show-overflow-tooltip="true" />
+            <el-table-column prop="dispatchNum" label="派发数量" :show-overflow-tooltip="true" />
+            <el-table-column prop="finishedNum" label="完成数量" :show-overflow-tooltip="true" />
+            <el-table-column prop="status" label="工单状态" :show-overflow-tooltip="true">
+                <template #default="scope">
+                    <el-tag v-if="scope.row.status === 1" type="info">未开始</el-tag>
+                    <el-tag v-if="scope.row.status === 2" type="primary">进行中</el-tag>
+                    <el-tag v-if="scope.row.status === 3" type="success">已完成</el-tag>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance()
+import { getMoudle06 } from '@/api/smartScreen/ProdScreen/index.js'
+const loading = ref(false)
+const dataList = ref([])
+function getList() {
+    getMoudle06().then((res) => {
+        const { code, data } = res
+        if (code == 200) {
+            dataList.value = data
+        }
+    })
+}
+// 查询
+function handleQuery() {
+    getList()
+}
+handleQuery()
+// 自动获取数据
+let timer1 = null
+const clearSearchTimer = () => {
+    clearInterval(timer1)
+    timer1 = null
+}
+const createSearchTimer = () => {
+    clearSearchTimer()
+    timer1 = setInterval(() => {
+        handleQuery()
+    }, 1000 * 60 * 5)
+}
+
+// 自动滚动
+let timer2 = null
+let tableRef = ref(null)
+
+const clearScroll = () => {
+    clearInterval(timer2)
+    timer2 = null
+}
+const createScroll = () => {
+    clearScroll()
+    // 拿到 table
+    const _table = tableRef.value.layout.table.refs
+    // // 拿到可以滚动的元素
+    const tableWrapper = _table.bodyWrapper.firstElementChild.firstElementChild
+    timer2 = setInterval(() => {
+        tableWrapper.scrollTop += 1
+        // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
+        if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
+            tableWrapper.scrollTop = 0
+        }
+    }, 100)
+}
+
+onMounted(() => {
+    createSearchTimer()
+    createScroll()
+})
+onUnmounted(() => {
+    clearScroll()
+    clearSearchTimer()
+})
+</script>
+
+<style scoped>
+@import './table.css';
+</style>
diff --git a/src/views/SmartScreen/OrderScreen/charts/DemoPie.vue b/src/views/SmartScreen/OrderScreen/charts/DemoPie.vue
new file mode 100644
index 0000000..c1abee0
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/charts/DemoPie.vue
@@ -0,0 +1,120 @@
+<template>
+    <div ref="chartRef" :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import { getCurrentInstance, watch, onMounted, ref } from 'vue'
+import * as echarts from 'echarts'
+import theme from '../theme/chalk.json'
+echarts.registerTheme('theme', theme)
+import { CanvasRenderer } from 'echarts/renderers'
+echarts.use([CanvasRenderer])
+const { proxy } = getCurrentInstance()
+const chartRef = ref(null)
+const props = defineProps({
+    width: {
+        type: String,
+        default: '100%'
+    },
+    height: {
+        type: String,
+        default: '450px'
+    }
+})
+const options = {
+    title: {
+        text: '',
+        left: 'left'
+    },
+    legend: {
+        type: 'scroll',
+        top: 20
+    },
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    series: [
+        {
+            name: '参数1',
+            type: 'pie',
+            data: [
+                { value: 1048, name: '模块1' },
+                { value: 735, name: '模块2' },
+                { value: 580, name: '模块3' },
+                { value: 484, name: '模块4' },
+                { value: 300, name: '模块5' }
+            ],
+            label: {
+                position: 'outside',
+                formatter: '{b}\n{d}%'
+            },
+            // 动画时长与模式
+            animationDuration: 3000,
+            animationEasing: 'cubicInOut'
+        }
+    ]
+}
+const chart = ref(null)
+function initChart() {
+    chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
+    chart.value.setOption(options)
+}
+onMounted(() => {
+    initChart()
+    window.addEventListener('resize', () => {
+        chart.value?.resize()
+    })
+})
+/// ============ 修改数据 ===========
+import { getMoudle04 } from '@/api/smartScreen/ProdScreen/index.js'
+function updateData() {
+    getMoudle04().then((res) => {
+        if (res.code === 200) {
+            options.title = res.data.title
+            let _series = res.data.series
+            _series.forEach((item) => {
+                item.label = {
+                    // 设置label在扇区内部
+                    position: 'outside',
+                    // 自定义显示格式，{b}表示名称，{d}表示百分比
+                    formatter: '{b}\n{d}%'
+                }
+            })
+            options.series = _series
+            chart.value.setOption(options)
+            console.log(_series)
+        }
+    })
+}
+function handleQuery() {
+    updateData()
+}
+handleQuery()
+let timer1 = null
+const clearSearchTimer = () => {
+    clearInterval(timer1)
+    timer1 = null
+}
+const createSearchTimer = () => {
+    clearSearchTimer()
+    timer1 = setInterval(() => {
+        handleQuery()
+    }, 1000 * 60 * 5)
+}
+onMounted(() => {
+    createSearchTimer()
+})
+onUnmounted(() => {
+    clearSearchTimer()
+})
+/// ==========================================
+</script>
diff --git a/src/views/SmartScreen/OrderScreen/charts/chart1.vue b/src/views/SmartScreen/OrderScreen/charts/chart1.vue
new file mode 100644
index 0000000..17020b1
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/charts/chart1.vue
@@ -0,0 +1,137 @@
+<!-- 今日工单 -->
+<template>
+    <div>
+        <div class="title">{{ title }}</div>
+        <el-table height="700" :data="dataList" v-loading="loading" ref="tableRef" highlight-current-row @mouseover.native="clearScroll" @mouseleave.native="createScroll">
+            <el-table-column width="80px" prop="groupCode" label="组" :show-overflow-tooltip="true" />
+            <el-table-column width="120px" label="报工/计划" :show-overflow-tooltip="true">
+                <template #default="scope">
+                    {{ ` ${scope.row.reportQuantity} /  ${scope.row.planQuantity}` }}
+                </template>
+            </el-table-column>
+            <el-table-column min-width="260px" label="生产进度" align="center">
+                <template #default="scope">
+                    <el-progress :text-inside="true" :stroke-width="24" :percentage="getPercentage(scope.row)" :color="getProgressColor(scope.row)" />
+                </template>
+            </el-table-column>
+            <!-- <el-table-column prop="status" label="工单状态" :show-overflow-tooltip="true">
+                <template #default="scope">
+                    <el-tag v-if="scope.row.status === 1" type="info">未开始</el-tag>
+                    <el-tag v-if="scope.row.status === 2" type="primary">进行中</el-tag>
+                    <el-tag v-if="scope.row.status === 3" type="success">已完成</el-tag>
+                </template>
+            </el-table-column> -->
+        </el-table>
+    </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance()
+import { getMoudle02 } from '@/api/smartScreen/ProdScreen/index.js'
+const loading = ref(false)
+const dataList = ref([])
+const title = ref('今日各组计划进度')
+function getList() {
+    // let demoList = []
+    // for (let i = 0; i < 10; i++) {
+    //     demoList.push({
+    //         workorder: '组' + (i + 1),
+    //         status: Math.floor(Math.random() * 3) + 1,
+    //         actualNum: Math.floor(Math.random() * 100),
+    //         planNum: Math.floor(Math.random() * 100)
+    //     })
+    // }
+    // dataList.value = demoList
+    getMoudle02().then((res) => {
+        const { code, data } = res
+        if (code == 200) {
+            dataList.value = data
+        }
+    })
+}
+/// ====================== 进度条 ==================
+// 获取进度条百分比
+function getPercentage(row) {
+    try {
+        let current = row.reportQuantity || 0
+        let percentage = Math.round((current / row.planQuantity) * 100)
+        if (percentage > 100) {
+            percentage = 100
+        }
+        if (percentage < 0) {
+            percentage = 0
+        }
+        return percentage
+    } catch (error) {
+        return 0
+    }
+}
+// 获取进度条颜色
+function getProgressColor(row) {
+    const percentage = getPercentage(row)
+    if (percentage >= 0 && percentage < 50) {
+        return 'red'
+    } else if (percentage >= 50 && percentage < 90) {
+        return 'orange'
+    } else {
+        return 'green'
+    }
+}
+/// ============================================================
+
+/// ================== 自动滚动/自动获取工单列表 ======================
+
+// 查询
+function handleQuery() {
+    getList()
+}
+handleQuery()
+// 自动获取数据
+let timer1 = null
+const clearSearchTimer = () => {
+    clearInterval(timer1)
+    timer1 = null
+}
+const createSearchTimer = () => {
+    clearSearchTimer()
+    timer1 = setInterval(() => {
+        handleQuery()
+    }, 1000 * 60 * 1)
+}
+
+let timer2 = null
+let tableRef = ref(null)
+
+const clearScroll = () => {
+    clearInterval(timer2)
+    timer2 = null
+}
+const createScroll = () => {
+    clearScroll()
+    // 拿到 table
+    const _table = tableRef.value.layout.table.refs
+    // // 拿到可以滚动的元素
+    const tableWrapper = _table.bodyWrapper.firstElementChild.firstElementChild
+    timer2 = setInterval(() => {
+        tableWrapper.scrollTop += 1
+        // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
+        if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
+            tableWrapper.scrollTop = 0
+        }
+    }, 100)
+}
+
+onMounted(() => {
+    createSearchTimer()
+    createScroll()
+})
+onUnmounted(() => {
+    clearScroll()
+    clearSearchTimer()
+})
+/// =============================================================================================
+</script>
+
+<style scoped>
+@import './table.css';
+</style>
diff --git a/src/views/SmartScreen/OrderScreen/charts/chart100.vue b/src/views/SmartScreen/OrderScreen/charts/chart100.vue
new file mode 100644
index 0000000..ccd138c
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/charts/chart100.vue
@@ -0,0 +1,112 @@
+<template>
+    <div ref="chartRef" :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import { getCurrentInstance, watch, onMounted, ref } from 'vue'
+import * as echarts from 'echarts'
+import theme from '../theme/chalk.json'
+echarts.registerTheme('theme', theme)
+import { CanvasRenderer } from 'echarts/renderers'
+echarts.use([CanvasRenderer])
+const { proxy } = getCurrentInstance()
+const chartRef = ref(null)
+const props = defineProps({
+    width: {
+        type: String,
+        default: '100%'
+    },
+    height: {
+        type: String,
+        default: '450px'
+    }
+})
+let options = {
+    title: {
+        text: '',
+        left: 'left'
+    },
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    xAxis: {
+        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        boundaryGap: true,
+        axisTick: {
+            show: false
+        }
+    },
+    yAxis: {
+        type: 'value',
+        axisTick: {
+            show: false
+        }
+    },
+    // 图例
+    legend: {
+        data: ['产量（个）']
+    },
+    series: [
+        {
+            name: '产量（个）',
+            type: 'line',
+            data: [1, 2, 3, 4, 5, 6, 7]
+        }
+    ]
+}
+
+const chart = ref(null)
+function initChart() {
+    chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
+    chart.value.setOption(options)
+}
+onMounted(() => {
+    initChart()
+    window.addEventListener('resize', () => {
+        chart.value?.resize()
+    })
+})
+/// ============ 修改数据 ===========
+import { getMoudle02 } from '@/api/smartScreen/ProdScreen/index.js'
+function updateData() {
+    getMoudle02().then((res) => {
+        if (res.code === 200) {
+            options.title = res.data.title
+            options.xAxis.data = res.data.xAxis.data
+            options.series = res.data.series
+            chart.value.setOption(options)
+        }
+    })
+}
+function handleQuery() {
+    updateData()
+}
+handleQuery()
+let timer1 = null
+const clearSearchTimer = () => {
+    clearInterval(timer1)
+    timer1 = null
+}
+const createSearchTimer = () => {
+    clearSearchTimer()
+    timer1 = setInterval(() => {
+        handleQuery()
+    }, 1000 * 60 * 5)
+}
+onMounted(() => {
+    createSearchTimer()
+})
+onUnmounted(() => {
+    clearSearchTimer()
+})
+/// ==========================================
+</script>
diff --git a/src/views/SmartScreen/OrderScreen/charts/chart2.vue b/src/views/SmartScreen/OrderScreen/charts/chart2.vue
new file mode 100644
index 0000000..f8e8626
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/charts/chart2.vue
@@ -0,0 +1,195 @@
+<template>
+    <div class="button-box">
+        <dv-button :bg="false" @click="changeType(1)">统计图1</dv-button>
+        <dv-button :bg="false" size="small" @click="changeType(2)">统计图2</dv-button>
+    </div>
+    <div v-loading="loading" ref="chartRef" :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import { getCurrentInstance, watch, onMounted, ref } from 'vue'
+import * as echarts from 'echarts'
+import theme from '../theme/chalk.json'
+echarts.registerTheme('theme', theme)
+import { CanvasRenderer } from 'echarts/renderers'
+import {
+    TitleComponent,
+    TooltipComponent,
+    GridComponent,
+    MarkLineComponent // 明确导入 markLine 组件
+} from 'echarts/components'
+echarts.use([CanvasRenderer, TitleComponent, TooltipComponent, GridComponent, MarkLineComponent])
+const { proxy } = getCurrentInstance()
+const chartRef = ref(null)
+const props = defineProps({
+    width: {
+        type: String,
+        default: '100%'
+    },
+    height: {
+        type: String,
+        default: '320px'
+    }
+})
+let options = {
+    title: {
+        text: '工单对比',
+        left: 'left'
+    },
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    xAxis: {
+        data: [],
+        boundaryGap: true,
+        axisTick: {
+            show: false
+        }
+    },
+    yAxis: [
+        {
+            type: 'value',
+            axisTick: {
+                show: false
+            }
+        }
+    ],
+    // 图例
+    legend: {
+        textStyle: {
+            color: '#fff'
+        },
+        top: '6%',
+        data: []
+    },
+    series: []
+}
+const chart = ref(null)
+function initChart() {
+    chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
+    chart.value.setOption(options)
+}
+onMounted(() => {
+    initChart()
+    window.addEventListener('resize', () => {
+        chart.value?.resize()
+    })
+})
+/// ============ 修改数据 ===========
+import { getMoudle03 } from '@/api/smartScreen/ProdScreen/index.js'
+import { getMoudle09 } from '@/api/smartScreen/ProdScreen/index.js'
+
+const loading = ref(false)
+function updateData() {
+    loading.value = true
+    if (dataType.value === 1) {
+        getMoudle03().then((res) => {
+            if (res.code === 200) {
+                options.title = res.data.title
+                options.xAxis.data = res.data.xAxis.data
+                options.yAxis = {
+                    type: 'value',
+                    min: 0,
+                    max: null, // 设置 Y 轴的最小和最大值
+                    scale: false, // 允许数据超出Y轴范围
+                    axisTick: {
+                        show: false
+                    }
+                }
+                options.legend.data = ['报工数', '计划数']
+                let _series = res.data.series
+                _series.forEach((item, index) => {
+                    item.label = {
+                        show: true,
+                        position: index === 1 ? 'top' : 'inside',
+                        textBorderColor: '#fff',
+                        textBorderWidth: 0,
+                        color: '#fff'
+                    }
+                })
+                options.series = _series
+                chart.value.setOption(options)
+            }
+            loading.value = false
+        })
+    } else if (dataType.value === 2) {
+        getMoudle09().then((res) => {
+            if (res.code === 200) {
+                options.title = res.data.title
+                options.xAxis.data = res.data.xAxis.data
+                options.yAxis = {
+                    type: 'value',
+                    name: '报工数/计划数',
+                    min: 0,
+                    max: 2, // 设置 Y 轴的最小和最大值
+                    scale: true // 允许数据超出Y轴范围
+                }
+                options.legend.data = ['报工数/计划数']
+                let _series = res.data.series
+                _series.forEach((item, index) => {
+                    item.markLine = {
+                        data: [{ type: 'median', name: '标准值' }]
+                    }
+                    item.label = {
+                        show: true,
+                        position: 'top',
+                        textBorderColor: '#fff',
+                        textBorderWidth: 0,
+                        color: '#fff'
+                    }
+                })
+                options.series = _series
+                setTimeout(() => {
+                    chart.value.setOption(options, true)
+                })
+            }
+            loading.value = false
+        })
+    }
+}
+const dataType = ref(1)
+function changeType(type = 1) {
+    dataType.value = type
+    handleQuery()
+}
+function handleQuery() {
+    updateData()
+}
+handleQuery()
+let timer1 = null
+const clearSearchTimer = () => {
+    clearInterval(timer1)
+    timer1 = null
+}
+const createSearchTimer = () => {
+    clearSearchTimer()
+    timer1 = setInterval(() => {
+        dataType.value = dataType.value === 1 ? 2 : 1
+        handleQuery()
+    }, 1000 * 60 * 5)
+}
+onMounted(() => {
+    createSearchTimer()
+})
+onUnmounted(() => {
+    clearSearchTimer()
+})
+/// ==========================================
+</script>
+
+<style scoped>
+.button-box {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 5px;
+}
+</style>
diff --git a/src/views/SmartScreen/OrderScreen/charts/chart3.vue b/src/views/SmartScreen/OrderScreen/charts/chart3.vue
new file mode 100644
index 0000000..87207d7
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/charts/chart3.vue
@@ -0,0 +1,205 @@
+<template>
+    <div class="button-box">
+        <dv-button :bg="false" @click="changeType(1)">统计图1</dv-button>
+        <dv-button :bg="false" size="small" @click="changeType(2)">统计图2</dv-button>
+    </div>
+    <div ref="chartRef" :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import { getCurrentInstance, watch, onMounted, ref } from 'vue'
+import * as echarts from 'echarts'
+import theme from '../theme/chalk.json'
+echarts.registerTheme('theme', theme)
+import { CanvasRenderer } from 'echarts/renderers'
+echarts.use([CanvasRenderer])
+const { proxy } = getCurrentInstance()
+const chartRef = ref(null)
+const props = defineProps({
+    width: {
+        type: String,
+        default: '100%'
+    },
+    height: {
+        type: String,
+        default: '320px'
+    }
+})
+const options = {
+    title: {
+        text: '工单对比',
+        left: 'left'
+    },
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    xAxis: {
+        data: [],
+        boundaryGap: true,
+        axisTick: {
+            show: false
+        }
+    },
+    yAxis: {
+        type: 'value',
+        axisTick: {
+            show: false
+        }
+    },
+    // 图例
+    legend: {
+        textStyle: {
+            color: '#fff'
+        },
+        top: '10%',
+        data: ['报工数', '计划数']
+    },
+    series: [
+        {
+            name: '报工数',
+            type: 'bar',
+            data: [],
+            label: {
+                show: true,
+                position: 'inside',
+                textBorderColor: '#fff',
+                textBorderWidth: 0,
+                color: '#fff'
+            }
+        },
+        {
+            name: '计划数',
+            type: 'bar',
+            data: [],
+            label: {
+                show: true,
+                position: 'top',
+                textBorderColor: '#fff',
+                textBorderWidth: 0,
+                color: '#fff'
+            }
+        }
+    ]
+}
+const chart = ref(null)
+function initChart() {
+    chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
+    chart.value.setOption(options)
+}
+onMounted(() => {
+    initChart()
+    window.addEventListener('resize', () => {
+        chart.value?.resize()
+    })
+})
+/// ============ 修改数据 ===========
+import { getMoudle04 } from '@/api/smartScreen/ProdScreen/index.js'
+import { getMoudle10 } from '@/api/smartScreen/ProdScreen/index.js'
+function updateData() {
+    if (dataType.value === 1) {
+        options.yAxis = {
+            type: 'value',
+            min: 0,
+            max: null, // 设置 Y 轴的最小和最大值
+            scale: false, // 允许数据超出Y轴范围
+            axisTick: {
+                show: false
+            }
+        }
+        options.legend.data = ['报工数', '计划数']
+        getMoudle04().then((res) => {
+            if (res.code === 200) {
+                options.title = res.data.title
+                options.xAxis.data = res.data.xAxis.data
+                let _series = res.data.series
+                _series.forEach((item, index) => {
+                    item.label = {
+                        show: true,
+                        position: index === 1 ? 'top' : 'inside',
+                        textBorderColor: '#fff',
+                        textBorderWidth: 0,
+                        color: '#fff'
+                    }
+                })
+                options.series = _series
+                chart.value.setOption(options)
+            }
+        })
+    } else if (dataType.value === 2) {
+        options.yAxis = {
+            type: 'value',
+            name: '报工数/计划数',
+            min: 0,
+            max: 2, // 设置 Y 轴的最小和最大值
+            scale: true // 允许数据超出Y轴范围
+        }
+        options.legend.data = ['报工数/计划数']
+        getMoudle10().then((res) => {
+            if (res.code === 200) {
+                options.title = res.data.title
+                options.xAxis.data = res.data.xAxis.data
+                let _series = res.data.series
+                _series.forEach((item, index) => {
+                    item.markLine = {
+                        data: [{ type: 'median', name: '标准值' }]
+                    }
+                    item.label = {
+                        show: true,
+                        position: 'top',
+                        textBorderColor: '#fff',
+                        textBorderWidth: 0,
+                        color: '#fff'
+                    }
+                })
+                options.series = _series
+                setTimeout(() => {
+                    chart.value.setOption(options, true)
+                })
+            }
+        })
+    }
+}
+const dataType = ref(1)
+function changeType(type = 1) {
+    dataType.value = type
+    handleQuery()
+}
+function handleQuery() {
+    updateData()
+}
+handleQuery()
+let timer1 = null
+const clearSearchTimer = () => {
+    clearInterval(timer1)
+    timer1 = null
+}
+const createSearchTimer = () => {
+    clearSearchTimer()
+    timer1 = setInterval(() => {
+        handleQuery()
+    }, 1000 * 60 * 5)
+}
+onMounted(() => {
+    createSearchTimer()
+})
+onUnmounted(() => {
+    clearSearchTimer()
+})
+/// ==========================================
+</script>
+<style scoped>
+.button-box {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 5px;
+}
+</style>
diff --git a/src/views/SmartScreen/OrderScreen/charts/chart4.vue b/src/views/SmartScreen/OrderScreen/charts/chart4.vue
new file mode 100644
index 0000000..1077384
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/charts/chart4.vue
@@ -0,0 +1,78 @@
+<!-- 今日工单 -->
+<template>
+    <div>
+        <div class="title">今日异常工单</div>
+        <el-table height="350" :data="dataList" v-loading="loading" ref="tableRef" highlight-current-row @mouseover.native="clearScroll" @mouseleave.native="createScroll">
+            <el-table-column prop="workorder" label="工单号" :show-overflow-tooltip="true" />
+            <el-table-column prop="description" label="描述" :show-overflow-tooltip="true" />
+        </el-table>
+    </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance()
+import { getMoudle05 } from '@/api/smartScreen/ProdScreen/index.js'
+const loading = ref(false)
+const dataList = ref([])
+function getList() {
+    getMoudle05().then((res) => {
+        const { code, data } = res
+        if (code == 200) {
+            dataList.value = data
+        }
+    })
+}
+// 查询
+function handleQuery() {
+    getList()
+}
+handleQuery()
+// 自动获取数据
+let timer1 = null
+const clearSearchTimer = () => {
+    clearInterval(timer1)
+    timer1 = null
+}
+const createSearchTimer = () => {
+    clearSearchTimer()
+    timer1 = setInterval(() => {
+        handleQuery()
+    }, 1000 * 60 * 5)
+}
+
+// 自动滚动
+let timer2 = null
+let tableRef = ref(null)
+
+const clearScroll = () => {
+    clearInterval(timer2)
+    timer2 = null
+}
+const createScroll = () => {
+    clearScroll()
+    // 拿到 table
+    const _table = tableRef.value.layout.table.refs
+    // // 拿到可以滚动的元素
+    const tableWrapper = _table.bodyWrapper.firstElementChild.firstElementChild
+    timer2 = setInterval(() => {
+        tableWrapper.scrollTop += 1
+        // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
+        if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
+            tableWrapper.scrollTop = 0
+        }
+    }, 100)
+}
+
+onMounted(() => {
+    createSearchTimer()
+    createScroll()
+})
+onUnmounted(() => {
+    clearScroll()
+    clearSearchTimer()
+})
+</script>
+
+<style scoped>
+@import './table.css';
+</style>
diff --git a/src/views/SmartScreen/OrderScreen/charts/chart40.vue b/src/views/SmartScreen/OrderScreen/charts/chart40.vue
new file mode 100644
index 0000000..0e60553
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/charts/chart40.vue
@@ -0,0 +1,115 @@
+<template>
+    <div ref="chartRef" :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import { getCurrentInstance, watch, onMounted, ref } from 'vue'
+import * as echarts from 'echarts'
+import theme from '../theme/chalk.json'
+echarts.registerTheme('theme', theme)
+import { CanvasRenderer } from 'echarts/renderers'
+echarts.use([CanvasRenderer])
+const { proxy } = getCurrentInstance()
+const chartRef = ref(null)
+const props = defineProps({
+    width: {
+        type: String,
+        default: '100%'
+    },
+    height: {
+        type: String,
+        default: '450px'
+    }
+})
+const options = {
+    title: {
+        text: '',
+        left: 'left'
+    },
+    legend: {
+        type: 'scroll',
+        top: 20
+    },
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    series: [
+        {
+            name: '参数1',
+            type: 'pie',
+            data: [
+                { value: 1048, name: '模块1' },
+                { value: 735, name: '模块2' },
+                { value: 580, name: '模块3' },
+                { value: 484, name: '模块4' },
+                { value: 300, name: '模块5' }
+            ],
+            // 动画时长与模式
+            animationDuration: 3000,
+            animationEasing: 'cubicInOut'
+        }
+    ]
+}
+const chart = ref(null)
+function initChart() {
+    chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
+    chart.value.setOption(options)
+}
+onMounted(() => {
+    initChart()
+    window.addEventListener('resize', () => {
+        chart.value?.resize()
+    })
+})
+/// ============ 修改数据 ===========
+import { getMoudle05 } from '@/api/smartScreen/ProdScreen/index.js'
+function updateData() {
+    getMoudle05().then((res) => {
+        if (res.code === 200) {
+            options.title = res.data.title
+            let _series = res.data.series
+            _series.forEach((item) => {
+                item.label = {
+                    // 设置label在扇区内部
+                    position: 'inner',
+                    // 自定义显示格式，{b}表示名称，{d}表示百分比
+                    formatter: '{b}\n{d}%'
+                }
+            })
+            options.series = _series
+            chart.value.setOption(options)
+        }
+    })
+}
+function handleQuery() {
+    updateData()
+}
+handleQuery()
+let timer1 = null
+const clearSearchTimer = () => {
+    clearInterval(timer1)
+    timer1 = null
+}
+const createSearchTimer = () => {
+    clearSearchTimer()
+    timer1 = setInterval(() => {
+        handleQuery()
+    }, 1000 * 60 * 5)
+}
+onMounted(() => {
+    createSearchTimer()
+})
+onUnmounted(() => {
+    clearSearchTimer()
+})
+/// ==========================================
+</script>
diff --git a/src/views/SmartScreen/OrderScreen/charts/chart41.vue b/src/views/SmartScreen/OrderScreen/charts/chart41.vue
new file mode 100644
index 0000000..04807bd
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/charts/chart41.vue
@@ -0,0 +1,89 @@
+<!-- 今日工单 -->
+<template>
+    <div>
+        <div class="title">今日异常工单</div>
+        <el-table height="450" :data="dataList" v-loading="loading" ref="tableRef" highlight-current-row @mouseover.native="clearScroll" @mouseleave.native="createScroll">
+            <el-table-column type="index" width="50" align="center" />
+            <el-table-column prop="workorder" label="工单号" :show-overflow-tooltip="true" />
+            <el-table-column prop="productionName" label="产品名称" :show-overflow-tooltip="true" />
+            <el-table-column prop="productionCode" label="产品编号" :show-overflow-tooltip="true" />
+            <el-table-column prop="dispatchNum" label="派发数量" :show-overflow-tooltip="true" />
+            <el-table-column prop="finishedNum" label="完成数量" :show-overflow-tooltip="true" />
+            <el-table-column prop="status" label="工单状态" :show-overflow-tooltip="true">
+                <template #default="scope">
+                    <el-tag v-if="scope.row.status === 1" type="info">未开始</el-tag>
+                    <el-tag v-if="scope.row.status === 2" type="primary">进行中</el-tag>
+                    <el-tag v-if="scope.row.status === 3" type="success">已完成</el-tag>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script setup>
+const { proxy } = getCurrentInstance()
+import { getMoudle06 } from '@/api/smartScreen/ProdScreen/index.js'
+const loading = ref(false)
+const dataList = ref([])
+function getList() {
+    getMoudle06().then((res) => {
+        const { code, data } = res
+        if (code == 200) {
+            dataList.value = data
+        }
+    })
+}
+// 查询
+function handleQuery() {
+    getList()
+}
+handleQuery()
+// 自动获取数据
+let timer1 = null
+const clearSearchTimer = () => {
+    clearInterval(timer1)
+    timer1 = null
+}
+const createSearchTimer = () => {
+    clearSearchTimer()
+    timer1 = setInterval(() => {
+        handleQuery()
+    }, 1000 * 60 * 5)
+}
+
+// 自动滚动
+let timer2 = null
+let tableRef = ref(null)
+
+const clearScroll = () => {
+    clearInterval(timer2)
+    timer2 = null
+}
+const createScroll = () => {
+    clearScroll()
+    // 拿到 table
+    const _table = tableRef.value.layout.table.refs
+    // // 拿到可以滚动的元素
+    const tableWrapper = _table.bodyWrapper.firstElementChild.firstElementChild
+    timer2 = setInterval(() => {
+        tableWrapper.scrollTop += 1
+        // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
+        if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
+            tableWrapper.scrollTop = 0
+        }
+    }, 100)
+}
+
+onMounted(() => {
+    createSearchTimer()
+    createScroll()
+})
+onUnmounted(() => {
+    clearScroll()
+    clearSearchTimer()
+})
+</script>
+
+<style scoped>
+@import './table.css';
+</style>
diff --git a/src/views/SmartScreen/OrderScreen/charts/chart5.vue b/src/views/SmartScreen/OrderScreen/charts/chart5.vue
new file mode 100644
index 0000000..5c2d877
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/charts/chart5.vue
@@ -0,0 +1,118 @@
+<template>
+    <div ref="chartRef" :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import { getCurrentInstance, watch, onMounted, ref } from 'vue'
+import * as echarts from 'echarts'
+import theme from '../theme/chalk.json'
+echarts.registerTheme('theme', theme)
+import { CanvasRenderer } from 'echarts/renderers'
+echarts.use([CanvasRenderer])
+const { proxy } = getCurrentInstance()
+const chartRef = ref(null)
+const props = defineProps({
+    width: {
+        type: String,
+        default: '100%'
+    },
+    height: {
+        type: String,
+        default: '350px'
+    }
+})
+const options = {
+    title: {
+        text: '',
+        left: 'left'
+    },
+    legend: {
+        type: 'scroll',
+        top: 10,
+        right: 10,
+        textStyle: {
+            color: '#fff'
+        }
+    },
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    series: [
+        {
+            name: '',
+            type: 'pie',
+            data: [],
+            radius: [40, 140],
+            label: {
+                position: 'outside',
+                formatter: '{b}\n{d}%',
+                textBorderColor: '#fff',
+                textBorderWidth: 0,
+                color: '#fff'
+            }
+        }
+    ]
+}
+const chart = ref(null)
+function initChart() {
+    chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
+    chart.value.setOption(options)
+}
+onMounted(() => {
+    initChart()
+    window.addEventListener('resize', () => {
+        chart.value?.resize()
+    })
+})
+/// ============ 修改数据 ===========
+import { getMoudle06 } from '@/api/smartScreen/ProdScreen/index.js'
+function updateData() {
+    getMoudle06().then((res) => {
+        if (res.code === 200) {
+            options.title = res.data.title
+            let _series = res.data.series
+            // _series.forEach((item) => {
+            //     item.label = {
+            //         // 设置label在扇区内部
+            //         position: 'inner',
+            //         // 自定义显示格式，{b}表示名称，{d}表示百分比
+            //         formatter: '{b}\n{d}%'
+            //     }
+            // })
+            options.series = _series
+            chart.value.setOption(options)
+        }
+    })
+}
+function handleQuery() {
+    updateData()
+}
+handleQuery()
+let timer1 = null
+const clearSearchTimer = () => {
+    clearInterval(timer1)
+    timer1 = null
+}
+const createSearchTimer = () => {
+    clearSearchTimer()
+    timer1 = setInterval(() => {
+        handleQuery()
+    }, 1000 * 60 * 5)
+}
+onMounted(() => {
+    createSearchTimer()
+})
+onUnmounted(() => {
+    clearSearchTimer()
+})
+/// ==========================================
+</script>
diff --git a/src/views/SmartScreen/OrderScreen/charts/chart6.vue b/src/views/SmartScreen/OrderScreen/charts/chart6.vue
new file mode 100644
index 0000000..fd8c227
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/charts/chart6.vue
@@ -0,0 +1,126 @@
+<template>
+    <div ref="chartRef" :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import { getCurrentInstance, onMounted, ref } from 'vue'
+import * as echarts from 'echarts'
+import theme from '../theme/chalk.json'
+echarts.registerTheme('theme', theme)
+import { CanvasRenderer } from 'echarts/renderers'
+echarts.use([CanvasRenderer])
+const { proxy } = getCurrentInstance()
+const chartRef = ref(null)
+const props = defineProps({
+    width: {
+        type: String,
+        default: '100%'
+    },
+    height: {
+        type: String,
+        default: '350px'
+    }
+})
+const options = {
+    title: {
+        text: '',
+        left: 'left'
+    },
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    xAxis: {
+        type: 'value',
+        position: 'top'
+    },
+    yAxis: {
+        type: 'category',
+        inverse: true,
+        data: []
+    },
+    // 图例
+    legend: {
+        textStyle: {
+            color: '#fff'
+        },
+        data: ['']
+    },
+    series: [
+        {
+            name: '',
+            type: 'bar',
+            data: [],
+            color: '#22ed7c',
+            label: {
+                show: true,
+                position: 'outside',
+                textBorderColor: '#fff',
+                textBorderWidth: 1,
+                color: '#fff'
+            }
+        }
+    ]
+}
+const chart = ref(null)
+function initChart() {
+    chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
+    chart.value.setOption(options)
+}
+onMounted(() => {
+    initChart()
+    window.addEventListener('resize', () => {
+        chart.value?.resize()
+    })
+})
+/// ============ 修改数据 ===========
+import { getMoudle07 } from '@/api/smartScreen/ProdScreen/index.js'
+function updateData() {
+    getMoudle07().then((res) => {
+        if (res.code === 200) {
+            options.title = res.data.title
+            options.yAxis.data = res.data.yAxis.data
+            let _series = res.data.series
+            // _series.forEach((item, index) => {
+            //     if (index === 0) {
+            //         item.color = 'yellow'
+            //     } else {
+            //         item.color = '#22ed7c'
+            //     }
+            // })
+            options.series = _series
+            chart.value.setOption(options)
+        }
+    })
+}
+function handleQuery() {
+    updateData()
+}
+handleQuery()
+let timer1 = null
+const clearSearchTimer = () => {
+    clearInterval(timer1)
+    timer1 = null
+}
+const createSearchTimer = () => {
+    clearSearchTimer()
+    timer1 = setInterval(() => {
+        handleQuery()
+    }, 1000 * 60 * 5)
+}
+onMounted(() => {
+    createSearchTimer()
+})
+onUnmounted(() => {
+    clearSearchTimer()
+})
+/// ==========================================
+</script>
diff --git a/src/views/SmartScreen/OrderScreen/charts/chart7.vue b/src/views/SmartScreen/OrderScreen/charts/chart7.vue
new file mode 100644
index 0000000..1c77804
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/charts/chart7.vue
@@ -0,0 +1,129 @@
+<template>
+    <div ref="chartRef" :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import { getCurrentInstance, watch, onMounted, ref } from 'vue'
+import * as echarts from 'echarts'
+import theme from '../theme/chalk.json'
+echarts.registerTheme('theme', theme)
+import { CanvasRenderer } from 'echarts/renderers'
+echarts.use([CanvasRenderer])
+const { proxy } = getCurrentInstance()
+const chartRef = ref(null)
+const props = defineProps({
+    width: {
+        type: String,
+        default: '100%'
+    },
+    height: {
+        type: String,
+        default: '300px'
+    }
+})
+let options = {
+    title: {
+        text: '本月产量',
+        left: 'left'
+    },
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    xAxis: {
+        data: ['11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07', '11-08', '11-09'],
+        boundaryGap: true,
+        axisTick: {
+            show: false
+        }
+    },
+    yAxis: {
+        type: 'value',
+        axisTick: {
+            show: false
+        }
+    },
+    // 图例
+    legend: {
+        type: 'scroll',
+        top: 'top',
+        width: '70%',
+        left: '20%'
+    },
+    series: [
+        {
+            name: '本月每天产量',
+            type: 'line',
+            smooth: true,
+            data: [],
+            label: {
+                show: true,
+                position: 'top',
+                textBorderColor: '#fff',
+                textBorderWidth: 1,
+                color: '#fff'
+            }
+        }
+    ]
+}
+
+const chart = ref(null)
+function initChart() {
+    chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
+    chart.value.setOption(options)
+}
+onMounted(() => {
+    initChart()
+    window.addEventListener('resize', () => {
+        chart.value?.resize()
+    })
+})
+/// ============ 修改数据 ===========
+import { getMoudle08 } from '@/api/smartScreen/ProdScreen/index.js'
+function updateData() {
+    getMoudle08().then((res) => {
+        if (res.code === 200) {
+            options.title = res.data.title
+            options.xAxis.data = res.data.xAxis.data
+            let _series = res.data.series
+            _series.forEach((item) => {
+                if (item.type === 'bar') {
+                    item.stack = 'group'
+                }
+            })
+            options.series = _series
+            chart.value.setOption(options)
+        }
+    })
+}
+function handleQuery() {
+    updateData()
+}
+handleQuery()
+let timer1 = null
+const clearSearchTimer = () => {
+    clearInterval(timer1)
+    timer1 = null
+}
+const createSearchTimer = () => {
+    clearSearchTimer()
+    timer1 = setInterval(() => {
+        handleQuery()
+    }, 1000 * 60 * 5)
+}
+onMounted(() => {
+    createSearchTimer()
+})
+onUnmounted(() => {
+    clearSearchTimer()
+})
+/// ==========================================
+</script>
diff --git a/src/views/SmartScreen/OrderScreen/charts/chart8.vue b/src/views/SmartScreen/OrderScreen/charts/chart8.vue
new file mode 100644
index 0000000..aa69508
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/charts/chart8.vue
@@ -0,0 +1,116 @@
+<template>
+    <div ref="chartRef" :style="{ height: height, width: width }" />
+</template>
+
+<script setup>
+import { getCurrentInstance, watch, onMounted, ref } from 'vue'
+import * as echarts from 'echarts'
+import theme from '../theme/chalk.json'
+echarts.registerTheme('theme', theme)
+import { CanvasRenderer } from 'echarts/renderers'
+echarts.use([CanvasRenderer])
+const { proxy } = getCurrentInstance()
+const chartRef = ref(null)
+const props = defineProps({
+    width: {
+        type: String,
+        default: '100%'
+    },
+    height: {
+        type: String,
+        default: '400px'
+    }
+})
+let options = {
+    title: {
+        text: '',
+        left: 'left'
+    },
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            type: 'shadow'
+        }
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    xAxis: {
+        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+        boundaryGap: true,
+        axisTick: {
+            show: false
+        }
+    },
+    yAxis: {
+        type: 'value',
+        axisTick: {
+            show: false
+        }
+    },
+    // 图例
+    legend: {
+        type: 'scroll',
+        top: 'top',
+        width: '70%',
+        left: '20%'
+    },
+    series: [
+        {
+            name: '',
+            type: 'line',
+            smooth: false,
+            data: [1, 2, 3, 4, 5, 6, 7]
+        }
+    ]
+}
+
+const chart = ref(null)
+function initChart() {
+    chart.value = echarts.init(proxy.$refs.chartRef, 'theme')
+    chart.value.setOption(options)
+}
+onMounted(() => {
+    initChart()
+    window.addEventListener('resize', () => {
+        chart.value?.resize()
+    })
+})
+/// ============ 修改数据 ===========
+import { getMoudle02 } from '@/api/smartScreen/ProdScreen/index.js'
+function updateData() {
+    getMoudle02().then((res) => {
+        if (res.code === 200) {
+            options.title = res.data.title
+            options.xAxis.data = res.data.xAxis.data
+            options.series = res.data.series
+            chart.value.setOption(options)
+        }
+    })
+}
+function handleQuery() {
+    updateData()
+}
+handleQuery()
+let timer1 = null
+const clearSearchTimer = () => {
+    clearInterval(timer1)
+    timer1 = null
+}
+const createSearchTimer = () => {
+    clearSearchTimer()
+    timer1 = setInterval(() => {
+        handleQuery()
+    }, 1000 * 60 * 5)
+}
+onMounted(() => {
+    createSearchTimer()
+})
+onUnmounted(() => {
+    clearSearchTimer()
+})
+/// ==========================================
+</script>
diff --git a/src/views/SmartScreen/OrderScreen/charts/table.css b/src/views/SmartScreen/OrderScreen/charts/table.css
new file mode 100644
index 0000000..f4589fe
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/charts/table.css
@@ -0,0 +1,29 @@
+.el-table {
+    background-color: transparent !important; /* Set the background color for the table */
+	--el-table-text-color: #eee !important;
+	
+	--el-table-border-color: transparent !important; /* Set the border color for the table */
+	--el-table-border: 1px solid #fff !important; /* Set the border for the table */
+    --el-table-border-style: none !important; /* Set the border style for the table */
+    --el-table-border-width: 0 !important; /* Set the border width for the table */
+    --el-table-header-bg-color: transparent !important; /* Set the background color for the table header */
+    --el-table-header-text-color: #eee !important; /* Set the text color for the table header */
+	--el-table-header-cell-padding: 0 0 0 0 !important; /* Set the padding for the table header cell */
+    --el-table-row-hover-bg-color: transparent !important; /* Set the background color for the table row on hover */
+    --el-table-row-hover-text-color: #fff !important; /* Set the text color for the table row on hover */
+    --el-table-row-text-color: #fff !important; /* Set the text color for the table row */
+    --el-table-row-bg-color: transparent !important; /* Set the background color for the table row */
+    --el-table-header-cell-height: 40px !important; /* Set the height for the table header cell */
+    --el-table-cell-height: 40px !important; /* Set the height for the table cell */
+--el-table-cell-padding: 0 0 0 0 !important; /* Set the padding for the table cell */
+	--el-table-tr-bg-color: transparent !important; /* Set the background color for the table row */
+}
+
+.title{
+	height: 20px;
+	font-size: 20px;
+	font-weight: 700;
+	display: flex;
+	align-items: center;
+	color: #fff;
+}
\ No newline at end of file
diff --git a/src/views/SmartScreen/OrderScreen/components/header.png b/src/views/SmartScreen/OrderScreen/components/header.png
new file mode 100644
index 0000000..e9c8411
Binary files /dev/null and b/src/views/SmartScreen/OrderScreen/components/header.png differ
diff --git a/src/views/SmartScreen/OrderScreen/components/kbHeader.vue b/src/views/SmartScreen/OrderScreen/components/kbHeader.vue
new file mode 100644
index 0000000..d8e8658
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/components/kbHeader.vue
@@ -0,0 +1,29 @@
+<template>
+    <div class="header">
+        <span class="title"><slot></slot></span>
+    </div>
+</template>
+
+<script></script>
+
+<style scoped>
+.header {
+    background-image: url('./header.png');
+    background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.title {
+    font-size: 48px;
+    font-weight: 600;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    -webkit-background-clip: text; /* 仅将背景应用于文本 */
+    -webkit-text-fill-color: transparent; /* 设置文本颜色为透明 */
+    color: transparent; /* 兼容非WebKit浏览器 */
+    background-image: linear-gradient(92deg, #0072ff 0%, #00eaff 20%, #01aaff 100%);
+}
+</style>
diff --git a/src/views/SmartScreen/OrderScreen/components/kbTime.vue b/src/views/SmartScreen/OrderScreen/components/kbTime.vue
new file mode 100644
index 0000000..558fa0a
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/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: 36px;
+    font-weight: 600;
+    color: white;
+}
+</style>
diff --git a/src/views/SmartScreen/OrderScreen/components/logo.vue b/src/views/SmartScreen/OrderScreen/components/logo.vue
new file mode 100644
index 0000000..0df57fe
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/components/logo.vue
@@ -0,0 +1,39 @@
+<template>
+    <div class="box">
+        <div class="row-box">
+            <img class="logo" :src="imgUrl" />
+            <span class="text">北泽阀门(昆山)有限公司</span>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import imgUrl from '@/assets/logo/logo.png'
+</script>
+
+<style scoped>
+.box {
+    position: absolute;
+    left: 1%;
+    top: 10px;
+}
+
+.row-box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.logo {
+    width: 40px;
+    height: 40px;
+}
+
+.text {
+    margin-left: 10px;
+    text-align: center;
+    /* line-height: 25px; */
+    font-size: 24px;
+}
+</style>
diff --git a/src/views/SmartScreen/OrderScreen/index.css b/src/views/SmartScreen/OrderScreen/index.css
new file mode 100644
index 0000000..6e3b731
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/index.css
@@ -0,0 +1,60 @@
+body {
+    margin: 0;
+    padding: 0;
+}
+.background {
+    padding: 0;
+    margin: 0;
+    position: fixed;
+    left: 0px;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    /* background: url('./background/2.png') no-repeat; */
+    background-size: 100% 100%;
+    -webkit-filter: brightness(0.1);
+    filter: brightness(0.1);
+    z-index: -1;
+}
+.back {
+    border: 2px solid #a9aabc;
+}
+.border {
+    border: 2px solid #a9aabc;
+}
+.screen {
+    padding: 0;
+    margin: 0;
+    width: 99%;
+    height: 100%;
+    color: #eeeeee;
+    background-color: rgba(32, 163, 250, 0.2);
+}
+.screen .header {
+    width: 100%;
+    height: 100px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+.screen .title {
+    font-size: 30px;
+    font-weight: 700;
+    color: #eeeeee;
+}
+.screen .back {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    color: #eeeeee;
+}
+.body {
+    display: flex;
+    flex-direction: column;
+}
+.box {
+    min-height: 350px;
+    padding: 20px;
+}
diff --git a/src/views/SmartScreen/OrderScreen/index.vue b/src/views/SmartScreen/OrderScreen/index.vue
new file mode 100644
index 0000000..de351d3
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/index.vue
@@ -0,0 +1,245 @@
+<template>
+    <div class="screen">
+        <div class="background"></div>
+        <div class="back" @click="back">
+            <el-icon>
+                <ArrowLeftBold />
+            </el-icon>
+        </div>
+        <div>
+            <logo></logo>
+            <kbTime></kbTime>
+        </div>
+        <div class="header">
+            <kbHeader>车间订单看板</kbHeader>
+        </div>
+        <div class="body">
+            <dv-border-box8 class="box8" :dur="5">
+                <div class="top" dv-bg>
+                    <el-row :gutter="20">
+                        <el-col :span="4">
+                            <div class="num-item">
+                                <div class="num-title">总订单数</div>
+                                <div class="num-value">{{ orderData.todayGroupQuantity }} 组</div>
+                            </div>
+                        </el-col>
+                        <el-col :span="4">
+                            <div class="num-item">
+                                <div class="num-title">未完成订单数</div>
+                                <div class="num-value">{{ orderData.todayLineQuantity }} 条</div>
+                            </div>
+                        </el-col>
+                        <el-col :span="4">
+                            <div class="num-item">
+                                <div class="num-title">已完成订单数</div>
+                                <div class="num-value">{{ orderData.todayPlanQuantity }} 个</div>
+                            </div>
+                        </el-col>
+                        <el-col :span="4">
+                            <div class="num-item">
+                                <div class="num-title">本月完成订单数</div>
+                                <div class="num-value">{{ orderData.todayActionProductionQuantity }} 个</div>
+                            </div>
+                        </el-col>
+                        <el-col :span="4">
+                            <div class="num-item">
+                                <div class="num-title">本周完成订单数</div>
+                                <div class="num-value">{{ orderData.todayProductTypeQuantity }}种</div>
+                            </div>
+                        </el-col>
+                        <el-col :span="4">
+                            <div class="num-item">
+                                <div class="num-title">今日完成订单数</div>
+                                <div class="num-value">{{ orderData.sevenDaysPriorPlanQuantity }} 次</div>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </div>
+            </dv-border-box8>
+            <el-row :gutter="5">
+                <el-col :span="8">
+                    <dv-border-box12 class="box">
+                        <div>
+                            <chart1></chart1>
+                        </div>
+                    </dv-border-box12>
+                </el-col>
+                <el-col :span="16">
+                    <el-row :gutter="5">
+                        <el-col :span="12">
+                            <dv-border-box12 class="box">
+                                <div>
+                                    <chart2></chart2>
+                                </div>
+                            </dv-border-box12>
+                        </el-col>
+                        <el-col :span="12">
+                            <dv-border-box12 class="box">
+                                <div>
+                                    <chart3></chart3>
+                                </div>
+                            </dv-border-box12>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="5">
+                        <el-col :span="6">
+                            <dv-border-box12 class="box">
+                                <div>
+                                    <chart4></chart4>
+                                </div>
+                            </dv-border-box12>
+                        </el-col>
+                        <el-col :span="9">
+                            <dv-border-box12 class="box">
+                                <div>
+                                    <chart5></chart5>
+                                </div>
+                            </dv-border-box12>
+                        </el-col>
+                        <el-col :span="9">
+                            <dv-border-box12 class="box">
+                                <div>
+                                    <chart6></chart6>
+                                </div>
+                            </dv-border-box12>
+                        </el-col>
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row :gutter="5">
+                <el-col :span="24">
+                    <dv-border-box12 class="box">
+                        <div>
+                            <chart7></chart7>
+                            <!-- <chart8></chart8> -->
+                        </div>
+                    </dv-border-box12>
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { getCurrentInstance } from 'vue'
+const { proxy } = getCurrentInstance()
+/// ================ 基础组件导入 ======================
+import kbHeader from './components/kbHeader.vue'
+import kbTime from './components/kbTime.vue'
+import logo from './components/logo.vue'
+/// ================================================
+
+function back() {
+    console.log('123')
+    proxy.$router.push('/')
+}
+/// ================== 图表组件导入 ======================
+// import DemoBarChart1 from './charts/DemoBarChart.vue'
+// import chart1 from './charts/七日产量趋势图.vue'
+// import chart2 from './charts/七日工单数.vue'
+// import chart3 from './charts/报工超时占比.vue'
+// import chart4 from './charts/本月工单异常分布.vue'
+// import chart5 from './charts/今日工单.vue'
+// import chart6 from './charts/异常工单.vue'
+// import chart7 from './charts/昨日工单报工数.vue'
+// 模拟图表
+import DemoList from './charts/DemoList.vue'
+import DemoLine from './charts/DemoLine.vue'
+import DemoBar from './charts/DemoBar.vue'
+import DemoPie from './charts/DemoPie.vue'
+
+// 实际图表
+
+import chart1 from './charts/chart1.vue'
+import chart2 from './charts/chart2.vue'
+import chart3 from './charts/chart3.vue'
+import chart4 from './charts/chart4.vue'
+import chart5 from './charts/chart5.vue'
+import chart6 from './charts/chart6.vue'
+import chart7 from './charts/chart7.vue'
+// import chart8 from './charts/chart8.vue'
+/// ====================================================
+
+/// =================== 获取工单数据 ======================
+import { getMoudle01 } from '@/api/smartScreen/ProdScreen/index.js'
+const orderData = ref({
+    // 今日生产组数量
+    todayGroupQuantity: 0,
+    // 今日生产线数量
+    todayLineQuantity: 0,
+    // 今日计划数量
+    todayPlanQuantity: 0,
+    // 今日行动生产数量
+    todayActionProductionQuantity: 0,
+    // 今日产品类型数量
+    todayProductTypeQuantity: 0,
+    // 七天前计划数量
+    sevenDaysPriorPlanQuantity: 0
+})
+function getMoudle01Data() {
+    getMoudle01().then((res) => {
+        orderData.value = res.data
+    })
+}
+getMoudle01Data()
+let timer1 = null
+const clearSearchTimer = () => {
+    clearInterval(timer1)
+    timer1 = null
+}
+const createSearchTimer = () => {
+    clearSearchTimer()
+    timer1 = setInterval(() => {
+        getMoudle01Data()
+    }, 1000 * 60 * 5)
+}
+onMounted(() => {
+    createSearchTimer()
+})
+onUnmounted(() => {
+    clearSearchTimer()
+})
+/// ====================================================
+</script>
+
+<style scoped>
+@import './index.css';
+
+.box8 {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.top {
+    height: 80px;
+    background-color: rgba(60, 232, 248, 0.1);
+}
+
+.num-item {
+    /* border: #0072ff 1px solid; */
+    padding: 10px;
+    width: 100%;
+    height: 80px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.num-title {
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.num-value {
+    font-size: 24px;
+    font-weight: 800;
+    -webkit-background-clip: text;
+    /* 仅将背景应用于文本 */
+    -webkit-text-fill-color: transparent;
+    /* 设置文本颜色为透明 */
+    color: transparent;
+    /* 兼容非WebKit浏览器 */
+    background-image: linear-gradient(65deg, #0072ff 0%, #00eaff 50%, #01aaff 100%);
+}
+</style>
diff --git a/src/views/SmartScreen/OrderScreen/theme/chalk.json b/src/views/SmartScreen/OrderScreen/theme/chalk.json
new file mode 100644
index 0000000..9186e27
--- /dev/null
+++ b/src/views/SmartScreen/OrderScreen/theme/chalk.json
@@ -0,0 +1,356 @@
+{
+    "color": ["#0082fc", "#05f8d6", "#fdd845", "#22ed7c", "#09b0d3", "#1d27c9", "#f9e264", "#f47a75", "#72ccff", "#f0805a", "#26c0c0", "#d851cc", "#b91dd8", "#2418ea"],
+    "backgroundColor": "transparent",
+    "textStyle": {
+        "color": "#fff"
+    },
+    "title": {
+        "textStyle": {
+            "color": "#ffffff"
+        },
+        "subtextStyle": {
+            "color": "#dddddd"
+        }
+    },
+    "line": {
+        "itemStyle": {
+            "borderWidth": "4"
+        },
+        "lineStyle": {
+            "width": "3"
+        },
+        "symbolSize": "0",
+        "symbol": "circle",
+        "smooth": true
+    },
+    "radar": {
+        "itemStyle": {
+            "borderWidth": "4"
+        },
+        "lineStyle": {
+            "width": "3"
+        },
+        "symbolSize": "0",
+        "symbol": "circle",
+        "smooth": true
+    },
+    "bar": {
+        "itemStyle": {
+            "barBorderWidth": 0,
+            "barBorderColor": "#ccc"
+        }
+    },
+    "pie": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "scatter": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "boxplot": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "parallel": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "sankey": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "funnel": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "gauge": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        }
+    },
+    "candlestick": {
+        "itemStyle": {
+            "color": "#fc97af",
+            "color0": "transparent",
+            "borderColor": "#fc97af",
+            "borderColor0": "#87f7cf",
+            "borderWidth": "2"
+        }
+    },
+    "graph": {
+        "itemStyle": {
+            "borderWidth": 0,
+            "borderColor": "#ccc"
+        },
+        "lineStyle": {
+            "width": "1",
+            "color": "#ffffff"
+        },
+        "symbolSize": "0",
+        "symbol": "circle",
+        "smooth": true,
+        "color": ["#fc97af", "#87f7cf", "#f7f494", "#72ccff", "#f7c5a0", "#d4a4eb", "#d2f5a6", "#76f2f2"],
+        "label": {
+            "color": "#FFFFF"
+        }
+    },
+    "map": {
+        "itemStyle": {
+            "areaColor": "#f3f3f3",
+            "borderColor": "#999999",
+            "borderWidth": 0.5
+        },
+        "label": {
+            "color": "#893448"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "areaColor": "rgba(255,178,72,1)",
+                "borderColor": "#eb8146",
+                "borderWidth": 1
+            },
+            "label": {
+                "color": "rgb(137,52,72)"
+            }
+        }
+    },
+    "geo": {
+        "itemStyle": {
+            "areaColor": "#f3f3f3",
+            "borderColor": "#999999",
+            "borderWidth": 0.5
+        },
+        "label": {
+            "color": "#893448"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "areaColor": "rgba(255,178,72,1)",
+                "borderColor": "#eb8146",
+                "borderWidth": 1
+            },
+            "label": {
+                "color": "rgb(137,52,72)"
+            }
+        }
+    },
+    "categoryAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#666666"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "#aaaaaa"
+        },
+        "splitLine": {
+            "show": false,
+            "lineStyle": {
+                "color": ["#e6e6e6"]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
+            }
+        }
+    },
+    "valueAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#666666"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "#aaaaaa"
+        },
+        "splitLine": {
+            "show": false,
+            "lineStyle": {
+                "color": ["#e6e6e6"]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
+            }
+        }
+    },
+    "logAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#666666"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "#aaaaaa"
+        },
+        "splitLine": {
+            "show": false,
+            "lineStyle": {
+                "color": ["#e6e6e6"]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
+            }
+        }
+    },
+    "timeAxis": {
+        "axisLine": {
+            "show": true,
+            "lineStyle": {
+                "color": "#666666"
+            }
+        },
+        "axisTick": {
+            "show": false,
+            "lineStyle": {
+                "color": "#333"
+            }
+        },
+        "axisLabel": {
+            "show": true,
+            "color": "#aaaaaa"
+        },
+        "splitLine": {
+            "show": false,
+            "lineStyle": {
+                "color": ["#e6e6e6"]
+            }
+        },
+        "splitArea": {
+            "show": false,
+            "areaStyle": {
+                "color": ["rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)"]
+            }
+        }
+    },
+    "toolbox": {
+        "iconStyle": {
+            "borderColor": "#999999"
+        },
+        "emphasis": {
+            "iconStyle": {
+                "borderColor": "#666666"
+            }
+        }
+    },
+    "legend": {
+        "textStyle": {
+            "color": "#999999"
+        }
+    },
+    "tooltip": {
+        "axisPointer": {
+            "lineStyle": {
+                "color": "#cccccc",
+                "width": 1
+            },
+            "crossStyle": {
+                "color": "#cccccc",
+                "width": 1
+            }
+        }
+    },
+    "timeline": {
+        "lineStyle": {
+            "color": "#87f7cf",
+            "width": 1
+        },
+        "itemStyle": {
+            "color": "#87f7cf",
+            "borderWidth": 1
+        },
+        "controlStyle": {
+            "color": "#87f7cf",
+            "borderColor": "#87f7cf",
+            "borderWidth": 0.5
+        },
+        "checkpointStyle": {
+            "color": "#fc97af",
+            "borderColor": "#fc97af"
+        },
+        "label": {
+            "color": "#87f7cf"
+        },
+        "emphasis": {
+            "itemStyle": {
+                "color": "#f7f494"
+            },
+            "controlStyle": {
+                "color": "#87f7cf",
+                "borderColor": "#87f7cf",
+                "borderWidth": 0.5
+            },
+            "label": {
+                "color": "#87f7cf"
+            }
+        }
+    },
+    "visualMap": {
+        "color": ["#fc97af", "#87f7cf"]
+    },
+    "dataZoom": {
+        "backgroundColor": "rgba(255,255,255,0)",
+        "dataBackgroundColor": "rgba(114,204,255,1)",
+        "fillerColor": "rgba(114,204,255,0.2)",
+        "handleColor": "#72ccff",
+        "handleSize": "100%",
+        "textStyle": {
+            "color": "#333333"
+        }
+    },
+    "markPoint": {
+        "label": {
+            "color": "#293441"
+        },
+        "emphasis": {
+            "label": {
+                "color": "#293441"
+            }
+        }
+    }
+}
diff --git a/src/views/SmartScreen/index.vue b/src/views/SmartScreen/index.vue
index 4f5c595..6663ec3 100644
--- a/src/views/SmartScreen/index.vue
+++ b/src/views/SmartScreen/index.vue
@@ -1,17 +1,16 @@
 <template>
-    <!-- <el-carousel class="main-box border" height="100%" :autoplay="true" :interval="30000">
+    <el-carousel class="main-box border" height="100%" :autoplay="true" :interval="30000">
         <el-carousel-item :key="1">
-            <AndonFullScreen style="height: 100%"></AndonFullScreen>
+            <OrderScreen style="height: 100%"></OrderScreen>
         </el-carousel-item>
         <el-carousel-item :key="2">
-            <DeviceFullScreen style="height: 100%"></DeviceFullScreen>
+            <OrderScreen style="height: 100%"></OrderScreen>
         </el-carousel-item>
-    </el-carousel> -->
+    </el-carousel>
 </template>
 
 <script setup>
-import { ElMessageBox } from 'element-plus'
-
+import { default as OrderScreen } from '@/views/SmartScreen/OrderScreen/index'
 // 设备大屏
 // import { default as AndonFullScreen } from '@/views/andonManagement/analysis/fullscreen/index'
 // Andon大屏