diff --git a/src/api/pms/device.js b/src/api/pms/device.js
index d5f5632..5277189 100644
--- a/src/api/pms/device.js
+++ b/src/api/pms/device.js
@@ -30,6 +30,37 @@ export function getdeviceInfo() {
 
 
 
+//获取设备信息
+export function device(obj) {
+  return request({
+    url: '/mf/device',
+    method: 'get',
+    params: obj
+  })
+}
+
+
+//获取裁片视觉检测工作记录
+export function getOKOrNGList(obj) {
+  return request({
+      url: '/pms/device/getOKOrNGList',
+      method: 'get',
+      params: obj
+  })
+}
+
+
+
+
+
+// 查询设备保养记录
+export function checkRecord(obj) {
+  return request({
+      url: 'pms/checkRecord/list',
+      method: 'get',
+      params: obj
+  })
+}
 // 查询设备维修单列表
 // 设备保养提醒
 export function deviceCheck(devCode) {
@@ -66,4 +97,13 @@ export function deviceStatusChartByDevice(obj) {
       method: 'get',
       params: obj
   })
+}
+
+//查询单设备电耗趋势
+export function powerConsumptionTrend(obj) {
+  return request({
+      url: '/mf/powerConsumptionTrend',
+      method: 'get',
+      params: obj
+  })
 }
\ No newline at end of file
diff --git a/src/views/history/components/lcenter.vue b/src/views/history/components/lcenter.vue
index eba8163..a6fad1f 100644
--- a/src/views/history/components/lcenter.vue
+++ b/src/views/history/components/lcenter.vue
@@ -17,7 +17,13 @@
 <script setup>
 import { computed } from 'vue';
 
+
+
 const prop = defineProps({
+    totalElect: {
+        type: Number,
+        default: 0
+    },
     lineData: {
         type: Object,
         default: () => {
@@ -84,7 +90,7 @@ let left_option = computed(() => {
                 },
                 data: [
                     {
-                        value: 700,
+                        value: prop.totalElect,
                         name: '总耗电量'
                     }
                 ]
@@ -157,7 +163,7 @@ let line_option = computed(() => {
             type: 'line',
             smooth: true,
             itemStyle: {
-                color: 'rgb(150 ,162 ,116)',
+                color: '#3E7179',
             },
             lineStyle: {
                 width: 2,
@@ -171,10 +177,10 @@ let line_option = computed(() => {
                     y2: 1,
                     colorStops: [{
                         offset: 0,
-                        color: 'rgb(150 ,162 ,116 ,0.6)'
+                        color: '#437C84'
                     }, {
                         offset: 1,
-                        color: 'rgb(150 ,162 ,116 ,0.2)'
+                        color: '#1F2F33'
                     }]
                 }
             }
diff --git a/src/views/history/components/stackBarChart.vue b/src/views/history/components/stackBarChart.vue
index 147c602..8e1a3b6 100644
--- a/src/views/history/components/stackBarChart.vue
+++ b/src/views/history/components/stackBarChart.vue
@@ -21,9 +21,12 @@ const options = computed(() => {
     return {
         tooltip: {
             trigger: 'axis',
+
             axisPointer: {
-                // Use axis to trigger tooltip
-                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985'
+                }
             }
         },
         legend: {},
@@ -46,11 +49,7 @@ const options = computed(() => {
             return {
                 name: item.name,
                 type: 'line',
-                stack: 'Total',
-                areaStyle: {},
-                emphasis: {
-                    focus: 'series'
-                },
+                // stack: 'Total',
                 data: item.data
             };
         })
diff --git a/src/views/history/index.vue b/src/views/history/index.vue
index 0ad8e43..1164895 100644
--- a/src/views/history/index.vue
+++ b/src/views/history/index.vue
@@ -9,7 +9,7 @@
           <div class="status-list">
             <div class="status-item" v-for="item of infoList">
               <span class="status-name">{{ item.name }}:</span>
-              <span>{{ item.value }} min</span>
+              <span class="status-value">{{ item.value }} min</span>
             </div>
           </div>
           <div class="status-chart">
@@ -19,7 +19,7 @@
 
       </div>
       <div class="lc box-bg-color">
-        <Lcenter :lineData="lineData"></Lcenter>
+        <Lcenter :totalElect="totalElect" :lineData="lineData"></Lcenter>
       </div>
       <div class="lb box-bg-color">
       </div>
@@ -56,7 +56,7 @@ import StackBarChart from './components/stackBarChart.vue';
 import Lcenter from './components/lcenter.vue';
 import BottomTable from './components/bottomTable.vue';
 import LineChart from './components/lineChart.vue';
-import { deviceCheck, deviceRepair, productionChartByDevice, deviceStatusChartByDevice } from '@/api/pms/device'
+import { checkRecord, deviceRepair, productionChartByDevice, deviceStatusChartByDevice,powerConsumptionTrend } from '@/api/pms/device'
 const { proxy } = getCurrentInstance()
 const route = useRoute()
 let params = ref(route.params.timeFrame)
@@ -64,21 +64,21 @@ let deviceStatusChartData = reactive({
   xAxis: [],
   series: []
 })
-let devStorage = JSON.parse(localStorage.getItem('devStorage'))
+let devStorage ={  "devCode": "33202006",  "sn": "358284933"} //JSON.parse(localStorage.getItem('devStorage'))
 
 let repair_column = [
-  { prop: 'devCode', label: '编码', },
+  { prop: 'devCode', label: '编码', width: '60px'},
   { prop: 'name', label: '设备名称', },
   { prop: 'subject', label: '报警内容', },
-  { prop: 'person', label: '负责人', },
-  { prop: 'time', label: '报警时间', }
+  { prop: 'person', label: '负责人', width: '65px' },
+  { prop: 'time', label: '报警时间', width: '80px'}
 ]
 let remind_column = [
-  { prop: 'devCode', label: '编码', },
+  { prop: 'devCode', label: '编码',  width: '60px'},
   { prop: 'name', label: '设备名称', },
   { prop: 'subject', label: '保养内容', },
-  { prop: 'person', label: '负责人', },
-  { prop: 'time', label: '保养时间', }
+  { prop: 'person', label: '负责人', width: '65px' },
+  { prop: 'time', label: '保养时间', width: '80px'}
 ]
 
 let devTime = reactive({
@@ -89,24 +89,43 @@ let devTime = reactive({
 })
 let infoList = computed(() => {
   return [
-    { name: '总工作时长', value: devTime.workTime },
-    { name: '总待机时长', value: devTime.waitTime },
-    { name: '总停机时长', value: devTime.stopTime },
-    { name: '总故障时长', value: devTime.faultTime },
+    { name: '总工作时长', value: devTime.workTime.toFixed(1) },
+    { name: '总待机时长', value: devTime.waitTime.toFixed(1) },
+    { name: '总停机时长', value: devTime.stopTime.toFixed(1) },
+    { name: '总故障时长', value: devTime.faultTime.toFixed(1) },
   ]
 })
 
 let repair_data = ref()
 let remind_data = ref()
+
+let totalElect = ref(0)
 let lineData = reactive({
-  xAxis: ['1', '2', '3', '4', '5'],
-  series: [0, 0, 0, 0, 0]
+  xAxis: [],
+  series: []
 })
 
+function getPowerConsumptionTrend() {
+  powerConsumptionTrend({ type: params.value, devCode: devStorage.devCode }).then(res => {
+    lineData.xAxis = res.data.time
+    lineData.series = res.data.elec
+    totalElect.value = res.data.totalElect
+  })
+}
+
 /**获取保养记录 */
-function getDeviceCheck() {
-  deviceCheck(devStorage.devCode).then(res => {
-    remind_data.value = res.data
+function getCheckRecord() {
+  let query = { devCode: devStorage.devCode, pageNum: 1, pageSize: 10, status: 2 }
+  checkRecord(query).then(res => {
+    remind_data.value = res.rows.map(item => {
+      return {
+        devCode: item.devCode,
+        name: item.deviceName,
+        subject: item.subjectCodesName,
+        person: item.director,
+        time: item.deadline
+      }
+})
 
   })
 }
@@ -167,10 +186,10 @@ const getDeviceStatusChart = async () => {
     name: proxy.tLang('common', '待机'),
     data: series.wait
   })
-  deviceStatusChartData.series.push({
-    name: proxy.tLang('common', '停机'),
-    data: series.stop
-  })
+  // deviceStatusChartData.series.push({
+  //   name: proxy.tLang('common', '停机'),
+  //   data: series.stop
+  // })
   deviceStatusChartData.series.push({
     name: proxy.tLang('common', '故障'),
     data: series.fault
@@ -181,9 +200,10 @@ const getDeviceStatusChart = async () => {
 
 function init() {
   getDeviceStatusChart()
-  getDeviceCheck()
+  getCheckRecord()
   getDeviceRepair()
   getproductionChart()
+  getPowerConsumptionTrend()
 
 }
 onMounted(() => {
@@ -230,7 +250,7 @@ onMounted(() => {
   align-items: center;
 
   .left {
-    width: 60vw;
+    width: 63vw;
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -248,36 +268,35 @@ onMounted(() => {
         align-items: center;
 
         .status-list {
-          width: 30%;
+          width: 35%;
           height: 100%;
 
           display: flex;
           flex-direction: column;
           justify-content: space-around;
           align-items: center;
+          font-size: 12px;
 
           .status-item {
             width: 100%;
             height: 26px;
             box-sizing: border-box;
-            padding: 0 20px;
+            padding: 0 10px;
             display: flex;
-            justify-content: space-between;
             align-items: center;
 
             .status-name {
-              font-size: 12px;
               color: #999898;
             }
-
-            span {
+            span {              
+              text-align: left;
               margin: 0 10px;
             }
           }
         }
 
         .status-chart {
-          width: 70%;
+          width: 65%;
           height: 100%;
         }
       }
@@ -295,7 +314,7 @@ onMounted(() => {
   }
 
   .right {
-    width: 37.7vw;
+    width: 34.7vw;
     height: 100%;
     display: flex;
     flex-direction: column;
diff --git a/src/views/screen/components/bottomTable.vue b/src/views/screen/components/bottomTable.vue
index 90ace5a..bcec381 100644
--- a/src/views/screen/components/bottomTable.vue
+++ b/src/views/screen/components/bottomTable.vue
@@ -71,11 +71,13 @@ const handleSelectionChange = (val) => {
   --el-table-bg-color: transparent;
   --el-table-tr-bg-color: transparent;
   --el-table-expanded-cell-bg-color: transparent;
+  font-size: 12px;
 }
 ::v-deep(.table_header th) {
     background-color: transparent !important;
     color: #fff;
     text-align: center;
+    font-size: 12px;
 }
 .title {
     width: 100%;
diff --git a/src/views/screen/components/devInfo.vue b/src/views/screen/components/devInfo.vue
index b8678e5..fe235e0 100644
--- a/src/views/screen/components/devInfo.vue
+++ b/src/views/screen/components/devInfo.vue
@@ -11,12 +11,25 @@
 </template>
 
 <script setup>
+import { computed } from 'vue';
 
-let infoList = [
-    {name: '设备名称', value: '123456789'},
-    {name: '机架号', value: '123456789'},
-    {name: '最后保养', value: '123456789'},
+
+let prop = defineProps({
+    data: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+
+let infoList = computed(() => {
+  return [
+    {name: '设备名称', value: prop.data.name},
+    {name: '机架号', value: prop.data.devCode},
+    {name: '最后保养', value: prop.data.checkTime},
 ]
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/screen/components/imageCard.vue b/src/views/screen/components/imageCard.vue
index 00ce287..a74fab5 100644
--- a/src/views/screen/components/imageCard.vue
+++ b/src/views/screen/components/imageCard.vue
@@ -2,9 +2,10 @@
     <div class="imagecard-container">
         <div class="title">{{ tLang('message', '设备视图') }}</div>
         <div class="content">
-            <el-image style="width: 80%; height: 80%;max-width: 80%;max-height: 80%;" :src="bgimage" fit="contain">
+            <el-image style="width: 80%; height: 80%;max-width: 80%;max-height: 80%;" :src="fileUrl + props.bgimage"
+                fit="contain">
             </el-image>
-            <div class="data" v-if="data.length > 0">
+            <div class="data" v-if="props.isRate">
                 <div class="data-item" v-for="(item, index) in data" :key="index">{{ item.name }}：{{ item.value }}</div>
             </div>
         </div>
@@ -14,11 +15,16 @@
 <script setup>
 import bgimage from '@/assets/images/login-background.jpg'
 
+let fileUrl = import.meta.env.VITE_APP_BASE_API
 const props = defineProps({
     bgimage: {
         type: String,
         default: ''
     },
+    isRate: {
+        type: Boolean,
+        default: false
+    },
     data: {
         type: Object,
         default: () => {
@@ -29,6 +35,13 @@ const props = defineProps({
         }
     }
 })
+
+let list = computed(() => {
+    return [
+        { name: '当前花版名称', value: 'A' },
+        { name: '冲孔进度', value: '90%' },
+    ]
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/screen/components/lcenter1.vue b/src/views/screen/components/lcenter1.vue
index 12f5ff2..10bef26 100644
--- a/src/views/screen/components/lcenter1.vue
+++ b/src/views/screen/components/lcenter1.vue
@@ -15,14 +15,14 @@
                         <div class="message-mine">
                             <div class="message-title">主轴旋转异常，请检查机械部件</div>
                             <div class="message-desc">
-                                <span>{{ tLang('message', '设备ID') }}: </span>  
+                                <span>{{ tLang('message', '机架号') }}: </span>  
                                 <span>SWM5015</span>  
                                 <span>2025-04-16 13:20:18</span>  
 
                             </div>
                         </div>
                         <div class="option">
-                            <el-button color="#DC2626" size="small">{{ tLang('message','处理') }}</el-button>
+                            <!-- <el-button color="#DC2626" size="small">{{ tLang('message','处理') }}</el-button> -->
                             <el-button color="#e7e7e7" size="small">{{ tLang('message','忽略') }}</el-button>
                         </div>
                     </div>
@@ -33,6 +33,8 @@
 </template>
 
 <script setup>
+import { formatter } from 'element-plus';
+
 
 const { proxy } = getCurrentInstance();
 let options = computed(() => {
@@ -40,10 +42,6 @@ let options = computed(() => {
         tooltip: {
             trigger: 'item'
         },
-        legend: {
-            top: '5%',
-            left: 'center'
-        },
         backgroundColor: 'transparent',
         series: [
             {
@@ -56,8 +54,9 @@ let options = computed(() => {
                     borderRadius: 10
                 },
                 label: {
-                    show: false,
-                    position: 'center'
+                    formatter:(params)=>{
+                        return params.name + params.value + '次'
+                    }
                 },
                 // emphasis: {
                 //     label: {
@@ -66,13 +65,10 @@ let options = computed(() => {
                 //         fontWeight: 'bold'
                 //     }
                 // },
-                labelLine: {
-                    show: false
-                },
                 data: [
-                    { value: 1048, name: proxy.tLang('home', '维修') },
-                    { value: 735, name: proxy.tLang('pms', '保养') },
-                    { value: 580, name: proxy.tLang('message', '故障') },
+                    { value: 1, name: proxy.tLang('home', '维修') },
+                    { value: 2, name: proxy.tLang('pms', '保养') },
+                    { value: 3, name: proxy.tLang('message', '故障') },
                 ]
             }
         ]
@@ -169,9 +165,10 @@ let options = computed(() => {
                     justify-content: space-between;
                     align-items: center;
                     .message-mine {
-                        width: 60%;
+                        width: 75%;
                         height: 100%;
                         padding-left: 20px;
+                        box-sizing: border-box;
                         display: flex;
                         flex-direction: column;
                         justify-content: space-around;
@@ -189,7 +186,7 @@ let options = computed(() => {
                         }
                     }
                     .option {
-                        width: 40%;
+                        width: 25%;
                         height: 100%;
                         display: flex;
                         justify-content: center;
diff --git a/src/views/screen/components/lcenter2.vue b/src/views/screen/components/lcenter2.vue
index e5a4676..9fa410c 100644
--- a/src/views/screen/components/lcenter2.vue
+++ b/src/views/screen/components/lcenter2.vue
@@ -339,18 +339,18 @@ let oeeOption = computed(() => {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
-
+                margin-bottom: 5px;
                 .message-mine {
-                    width: 60%;
+                    width: 65%;
                     height: 100%;
-                    padding-left: 20px;
+                    padding-left: 5px;
                     display: flex;
                     flex-direction: column;
                     justify-content: space-around;
                     align-items: flex-start;
 
                     .message-title {
-                        font-size: 14px;
+                        font-size: 12px;
                         color: #fff;
                     }
 
@@ -359,13 +359,13 @@ let oeeOption = computed(() => {
                         color: #999898;
 
                         span {
-                            margin-right: 15px;
+                            margin-right: 10px;
                         }
                     }
                 }
 
                 .option {
-                    width: 40%;
+                    width: 35%;
                     height: 100%;
                     display: flex;
                     justify-content: center;
@@ -375,7 +375,7 @@ let oeeOption = computed(() => {
 
             .error-chart {
                 width: 100%;
-                height: calc(100% - 50px);
+                height: calc(100% - 55px);
             }
         }
     }
diff --git a/src/views/screen/components/ltop1.vue b/src/views/screen/components/ltop1.vue
index 2d9b753..30bdf10 100644
--- a/src/views/screen/components/ltop1.vue
+++ b/src/views/screen/components/ltop1.vue
@@ -5,9 +5,9 @@
         {{ tLang('common', '状态') }}
       </div>
       <div class="left-content">
-        <div class="status-box" style="background-color: #22C55E;"></div>
+        <div class="status-box" :style="{'background-color':stateList[props.data.state].color}"></div>
         <div class="status-text">
-          运行中
+          {{ stateList[props.data.state].text }}
         </div>
       </div>
     </div>
@@ -16,25 +16,25 @@
         <div class="top-item">
           <div class="title">{{ tLang('message', '检测裁片数') }}</div>
           <div class="content">
-            {{ 22 }}
+            {{ props.data.checkNum }}
           </div>
         </div>
         <div class="top-item">
           <div class="title">{{ tLang('message', '运行时长') }}</div>
           <div class="content">
-            {{ "00:00:00" }}
+            {{ props.data.runTime }} min
           </div>
         </div>
         <div class="top-item">
           <div class="title">{{ tLang('message', '耗电量') }}</div>
           <div class="content">
-            {{ '32 kw·h' }}
+            {{ props.data.electTotal+ ' kw·h' }}
           </div>
         </div>
       </div>
       <div class="bottom">
         <span class="label">{{ tLang('message', '异常次数') }}</span>
-        <span>{{ 3 }}</span>
+        <span>{{ props.data.errorCount }}</span>
       </div>
     </div>
   </div>
@@ -43,7 +43,22 @@
 <script setup>
 import {ref, reactive } from 'vue';
 
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  }
+})
 const { proxy } = getCurrentInstance();
+
+let stateList = {
+  0: {color:'#cfcfcf',text:'停机中'  },
+  1: {color:'#F59E0B',text:'待机中'  },
+  2: {color:'#22C55E',text:'运行中'  },
+  3: {color:'#EF4444',text:'故障中'  },
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/screen/components/ltop2.vue b/src/views/screen/components/ltop2.vue
index b00881c..6581923 100644
--- a/src/views/screen/components/ltop2.vue
+++ b/src/views/screen/components/ltop2.vue
@@ -25,26 +25,36 @@
 
 <script setup>
 import { ref, reactive } from 'vue';
-
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  }
+})
 const { proxy } = getCurrentInstance();
 
-let devData = reactive({
-  status: { 'label': proxy.tLang('home', '设备状态'), 'value': '1', type: 'status' },
-  scansNum: { 'label': proxy.tLang('message', '扫描次数'), 'value': '22', type: '' },
-  runTime: { 'label': proxy.tLang('message', '运行时长'), 'value': '00:34:22', type: '' },
-  consumption: { 'label': proxy.tLang('message', '耗电量'), 'value': '22 kW·h', type: '' },
-  identifyState: { 'label': proxy.tLang('message', '识别状态'), 'value': '1', type: 'status' },
-  identifyNum: { 'label': proxy.tLang('message', '识别次数'), 'value': '22', type: '' },
-  identifyTime: { 'label': proxy.tLang('message', '总识别时长'), 'value': '00:34:22', type: '' },
-  ErrorNum: { 'label': proxy.tLang('message', '异常次数'), 'value': '22', type: '' },
+
+
+let devData = computed(() => {
+  return {
+    status: { 'label': proxy.tLang('home', '设备状态'), 'value': props.data.state, type: 'status' },
+    scansNum: { 'label': proxy.tLang('message', '扫描次数'), 'value': props.data.outputToday, type: '' },
+    runTime: { 'label': proxy.tLang('message', '运行时长'), 'value': props.data.runTime + ' min', type: '' },
+    consumption: { 'label': proxy.tLang('message', '耗电量'), 'value': props.data.electTotal + ' kW·h', type: '' },
+    identifyState: { 'label': proxy.tLang('message', '识别状态'), 'value': '0', type: 'status' },
+    identifyNum: { 'label': proxy.tLang('message', '识别数量'), 'value': props.data.cutNum, type: '' },
+    identifyTime: { 'label': proxy.tLang('message', '总识别时长'), 'value': '00:34:22', type: '' },
+    ErrorNum: { 'label': proxy.tLang('message', '异常次数'), 'value': props.data.errorCount, type: '' },
+  }
 })
 
 let statusList = {
-  '0': { 'label': proxy.tLang('message', '停机中'), 'value': '1', 'color': '#f6f4f4' },
-  '1': { 'label': proxy.tLang('message', '待机中'), 'value': '1', 'color': '#fddd60' },
-  '2': { 'label': proxy.tLang('message', '运行中'), 'value': '1', 'color': '#7cffb2' },
-  '3': { 'label': proxy.tLang('message', '待机中'), 'value': '1', 'color': '#fddd60' },
-  '4': { 'label': proxy.tLang('message', '故障中'), 'value': '1', 'color': '#ff6e76' },
+  '0': { 'label': proxy.tLang('message', '停机中'), 'value': '1', 'color': '#cfcfcf' },
+  '1': { 'label': proxy.tLang('message', '待机中'), 'value': '1', 'color': '#F59E0B' },
+  '2': { 'label': proxy.tLang('message', '运行中'), 'value': '1', 'color': '#22C55E' },
+  '3': { 'label': proxy.tLang('message', '故障中'), 'value': '1', 'color': '#ff6e76' },
 
 
 }
@@ -118,6 +128,8 @@ let statusList = {
       background: #1F2937;
 
       .right-item-content {
+        height: calc(100% - 20px);
+        width: 100%;
         display: flex;
         justify-content: space-around;
         align-items: center;
diff --git a/src/views/screen/components/ltop3.vue b/src/views/screen/components/ltop3.vue
index 0f9e002..635fe5e 100644
--- a/src/views/screen/components/ltop3.vue
+++ b/src/views/screen/components/ltop3.vue
@@ -3,13 +3,13 @@
     <div class="left">
       <div class="left-content">
         <div class="speed-box">
-          <div class="speed-value">250rpm</div>
+          <div class="speed-value">{{props.data.speed}} rpm</div>
         </div>
         <div class="speed-title">{{ tLang('message', '设备转速') }}</div>
       </div>
     </div>
     <div class="right">
-      <div class="right-item" v-for="item of devData">
+      <div class="right-item" v-for="item in devData">
         <div class="title">{{ item['label'] }}</div>
         <div class="right-item-content" v-if="item['type'] == 'status'">
           <div class="status-box" :style="{ background: statusList[item.value]['color'] }"></div>
@@ -26,20 +26,31 @@
 <script setup>
 import { ref, reactive } from 'vue';
 
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {
+      return {
+      }
+    }
+  }
+})
 const { proxy } = getCurrentInstance();
 
-let devData = reactive({
-  status: { 'label': proxy.tLang('home', '设备状态'), 'value': '1', type: 'status' },
-  runTime: { 'label': proxy.tLang('message', '运行时长'), 'value': '00:34:22', type: '' },
-  prod: { 'label': proxy.tLang('message', '总产量'), 'value': '22', type: '' },
+let devData = computed(() => {
+  return [
+    { 'label': proxy.tLang('home', '设备状态'), 'value': props.data.state, type: 'status' },
+    { 'label': proxy.tLang('message', '运行时长'), 'value': props.data.runTime + ' min', type: '' },
+    { 'label': proxy.tLang('message', '总产量'), 'value': props.data.outputToday, type: '' },
+  ]
 })
 
+
 let statusList = {
-  '0': { 'label': proxy.tLang('message', '停机中'), 'value': '1', 'color': '#f6f4f4' },
-  '1': { 'label': proxy.tLang('message', '待机中'), 'value': '1', 'color': '#fddd60' },
-  '2': { 'label': proxy.tLang('message', '运行中'), 'value': '1', 'color': '#7cffb2' },
-  '3': { 'label': proxy.tLang('message', '待机中'), 'value': '1', 'color': '#fddd60' },
-  '4': { 'label': proxy.tLang('message', '故障中'), 'value': '1', 'color': '#ff6e76' },
+  '0': { 'label': proxy.tLang('message', '停机中'), 'value': '1', 'color': '#cfcfcf' },
+  '1': { 'label': proxy.tLang('message', '待机中'), 'value': '1', 'color': '#F59E0B' },
+  '2': { 'label': proxy.tLang('message', '运行中'), 'value': '1', 'color': '#22C55E' },
+  '3': { 'label': proxy.tLang('message', '故障中'), 'value': '1', 'color': '#ff6e76' },
 
 
 }
diff --git a/src/views/screen/components/rbottom1.vue b/src/views/screen/components/rbottom1.vue
index 6f1037d..52a54b6 100644
--- a/src/views/screen/components/rbottom1.vue
+++ b/src/views/screen/components/rbottom1.vue
@@ -8,11 +8,11 @@
       <div class="rate-info">
         <div class="ok flex-column">
           <span>OK</span>
-          <span class="rate">{{ 50 }}%</span>
+          <span class="rate">{{ rate.okRate+'%('+props.data.ok + '/'+rate.total+')' }} </span>
         </div>
         <div class="ng flex-column">
           <span>NG</span>
-          <span class="rate">{{ 50 }}%</span>
+          <span class="rate">{{ rate.ngRate+'%('+props.data.ng + '/'+rate.total+')' }}</span>
         </div>
       </div>
     </div>
@@ -20,12 +20,32 @@
 </template>
 
 <script setup>
+import { reactive } from 'vue'
+
 
 
 const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {
+      return {
+        ok: 0,
+        ng: 0
+      }
+    }
+  }
 })
 const {proxy} = getCurrentInstance()
+let rate = reactive({
+  okRate: 0,
+  ngRate: 0,
+  total: 0
+})
 let options = computed(() => {
+  let total = props.data.ok + props.data.ng
+  rate.okRate = ((props.data.ok / total) * 100).toFixed(1)
+  rate.ngRate = 100 - rate.okRate
+  rate.total = total
     return {
         tooltip: {
             trigger: 'item'
@@ -60,8 +80,8 @@ let options = computed(() => {
                     show: false
                 },
                 data: [
-                    { value: 1048, name: 'OK',itemStyle: {color: '#38D380'} },
-                    { value: 735, name: 'NG',itemStyle: {color: '#F05A5A'} },
+                    { value: props.data.ok, name: 'OK',itemStyle: {color: '#38D380'} },
+                    { value: props.data.ng, name: 'NG',itemStyle: {color: '#F05A5A'} },
                 ]
             }
         ]
diff --git a/src/views/screen/components/rbottom2.vue b/src/views/screen/components/rbottom2.vue
new file mode 100644
index 0000000..51b0f86
--- /dev/null
+++ b/src/views/screen/components/rbottom2.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="rbottom2-container">
+    <div class="title">{{ tLang('device', '检测结果占比') }}</div>
+    <div class="content">
+      
+    </div>
+  </div>
+</template>
+
+<script setup>
+import bottomTable from './bottomTable.vue'
+</script>
+
+<style lang="scss" scoped>
+.title {
+  width: 100%;
+  height: 20px;
+  line-height: 20px;
+  font-size: 12px;
+  color: #cfcfcf;
+
+}
+
+.content {
+  width: 100%;
+  height: calc(100% - 20px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.rbottom2-container {
+    width: 100%;
+    height: 100%;
+}
+</style>
diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
index d686625..2d11b09 100644
--- a/src/views/screen/index.vue
+++ b/src/views/screen/index.vue
@@ -2,27 +2,37 @@
   <div class="container">
     <div class="left">
       <div class="lt box-bg-color">
-        <Ltop1></Ltop1>
-        <!-- <Ltop2></Ltop2> -->
-        <!-- <Ltop3></Ltop3> -->
+        <Ltop1 v-if="devCode == codeList.cp" :data="info"></Ltop1>
+        <Ltop2 v-else-if="devCode == codeList.pb" :data="info"></Ltop2>
+        <Ltop3 v-else :data="info"></Ltop3>
       </div>
       <div class="lc">
-        <!-- <Lcenter1></Lcenter1> -->
-        <Lcenter2></Lcenter2>
+        <Lcenter1 v-if="devCode == codeList.cp || devCode == codeList.pb"></Lcenter1>
+        <Lcenter2 v-else></Lcenter2>
       </div>
       <div class="lb box-bg-color">
-        <bottomTable title="检测结果" :columns="columns"  :table-data="tableData"></bottomTable>
+        <bottomTable title="检测结果" v-if="devCode == codeList.cp" :columns="columns" :table-data="tableData">
+          <template #checkResult="scope">
+            <span v-if="scope.row.checkResult == 'NG'" style="color: red">{{ scope.row.checkResult }}</span>
+            <span v-else style="color: #17C27B;">{{ scope.row.checkResult }}</span>
+          </template>
+        </bottomTable>
+        <bottomTable title="识别记录" v-else-if="devCode == codeList.pb" :columns="columns" :table-data="tableData">
+        </bottomTable>
+        <bottomTable title="工作记录" v-else :columns="columns" :table-data="tableData"></bottomTable>
       </div>
     </div>
     <div class="right">
       <div class="rt box-bg-color">
-        <imageCard></imageCard>
+        <imageCard :bgimage="info.file" :isRate="is_rate"></imageCard>
       </div>
       <div class="rc box-bg-color">
-        <devInfo></devInfo>
+        <devInfo :data="info"></devInfo>
       </div>
       <div class="rb box-bg-color">
-        <Rbottom1></Rbottom1>
+        <Rbottom1 v-if="devCode == codeList.cp" :data="reqOKOrNGCount"></Rbottom1>
+        <bottomTable v-else title="保养提醒" :columns="remind_column" :table-data="remind_data"></bottomTable>
+
       </div>
     </div>
   </div>
@@ -38,22 +48,128 @@ import bottomTable from './components/bottomTable.vue'
 import imageCard from './components/imageCard.vue'
 import devInfo from './components/devInfo.vue'
 import Rbottom1 from './components/rbottom1.vue'
+import { device, deviceCheck, getOKOrNGList } from '@/api/pms/device'
+import { computed, reactive } from 'vue'
 
-
+let devCode = ref('3051903')
+let codeList = {
+  cp: '3051903',//裁片
+  pb: '3051502',//平板扫描
+  ck: '33202006',//冲孔
+  fr: '334011' //缝纫
+}
+let is_rate = ref(false)
 const columns = [
   // { type: 'selection' },
   // { type: 'index', label: '序号' },
-  { prop: 'code', label: '产品编码' },
-  { prop: 'status', label: '检查结果', slot: 'status' },
-  { prop: 'offset', label: '偏差值' },
-  { prop: 'date', label: '检测时间' },
-  { prop: 'num', label: '检测数量' },
+  { prop: 'productCode', label: '产品编码' },
+  { prop: 'checkResult', label: '检查结果', slot: 'checkResult', width: '80px' },
+  { prop: 'deviationValue', label: '偏差值' },
+  { prop: 'ts', label: '检测时间' },
+  { prop: 'checkNum', label: '检测数量' },
 ]
-
+let remind_column = [
+  { prop: 'devCode', label: '编码', width: '60px' },
+  { prop: 'name', label: '设备名称', },
+  { prop: 'subject', label: '保养内容', },
+  { prop: 'person', label: '负责人', width: '60px' },
+  { prop: 'time', label: '保养时间', width: '75px' }
+]
+let remind_data = ref()
 let tableData = ref([
   { code: '123456789', status: '正常', offset: '0.00', date: '2021-01-01', num: '100' },
   { code: '123456789', status: '正常', offset: '0.00', date: '2021-01-01', num: '100' }
 ])
+
+
+let info = reactive({
+  name: '',
+  devCode: '',
+  file: '',
+  checkTime: '',
+  state: 0,
+  checkNum: 0,
+  runTime: 0,
+  errorCount: 0,
+  electTotal: 0,
+  speed: 0,
+  output: 0,
+  outputToday: 0,
+  cutNum: 0
+})
+//获取设备信息
+function getDevice() {
+  device({ devCode: devCode.value }).then(res => {
+    info.name = res.data.name
+    info.devCode = res.data.code
+    info.file = res.data.file
+    info.checkTime = res.data.checkTime
+    info.state = res.data.state
+    info.checkNum = res.data.checkNum || 0
+    info.runTime = res.data.runTime
+    info.errorCount = res.data.errorCount
+    info.electTotal = res.data.electTotal || 0
+    info.output = res.data.output
+    info.outputToday = res.data.outputToday
+    info.cutNum = res.data.cutNum || 0
+
+
+  })
+}
+
+let reqOKOrNGCount = computed(() => {
+  let ok = 0
+  let ng = 0
+  tableData.value.forEach(item => {
+    if (item.checkResult == 'OK') {
+      ok++
+    } else {
+      ng++
+
+    }
+  })
+
+  return {
+    ok,ng
+  }
+})
+//裁片视觉检测 工作记录
+function reqOKOrNGList() {
+  getOKOrNGList({ devCode: devCode.value }).then(res => {
+    tableData.value = res.data
+  })
+}
+
+
+
+/**获取保养记录 */
+function getDeviceCheck() {
+  deviceCheck(devCode.value).then(res => {
+    remind_data.value = res.data
+
+  })
+}
+
+function init() {
+  getDevice()
+  getDeviceCheck()
+  if (devCode.value == codeList.cp) {
+    reqOKOrNGList()
+  }
+}
+
+onMounted(() => {
+  // devCode.value = localStorage.getItem('devStorage')?JSON.parse(localStorage.getItem('devStorage')).devCode:""
+
+  init()
+  if (devCode.value == '33202006') {
+    is_rate.value = true
+  } else if (devCode.value == '334011') {
+    is_rate.value = true
+  } else {
+    is_rate.value = false
+  }
+})
 </script>
 
 <style lang="scss" scoped>
@@ -64,55 +180,64 @@ let tableData = ref([
   box-sizing: border-box;
   overflow: hidden;
 }
+
 .container {
-    width: 100vw;
-    height: calc(100vh - 50px);
-    padding: 9px 8px;
-    box-sizing: border-box;
-    background: #131617;
-    color: #fff;
+  width: 100vw;
+  height: calc(100vh - 50px);
+  padding: 9px 8px;
+  box-sizing: border-box;
+  background: #131617;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .left {
+    width: 65.5vw;
+    height: 100%;
     display: flex;
+    flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    .left {
-      width: 65.5vw;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
-      .lt {
-        width: 100%;
-        height: 24.4%;
-      }
-      .lc {
-        width: 100%;
-        height: 36.2%;
-      }
-      .lb {
-        width: 100%;
-        height: 33.4%;
-      }
+
+    .lt {
+      width: 100%;
+      height: 24.4%;
     }
-    .right {
-      width: 32.6vw;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
-      .rt {
-        width: 100%;
-        height: 29.2%;
-      }
-      .rc {
-        width: 100%;
-        height: 27.8%;
-      }
-      .rb {
-        width: 100%;
-        height: 37.6%;
-      }
+
+    .lc {
+      width: 100%;
+      height: 36.2%;
     }
+
+    .lb {
+      width: 100%;
+      height: 33.4%;
+    }
+  }
+
+  .right {
+    width: 32.6vw;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+    .rt {
+      width: 100%;
+      height: 29.2%;
+    }
+
+    .rc {
+      width: 100%;
+      height: 27.8%;
+    }
+
+    .rb {
+      width: 100%;
+      height: 37.6%;
+    }
+  }
 }
 </style>