展会设备大屏 update

src/http/cisma/index.ts

@@ -1,6 +1,10 @@
 import {get,post} from "@/utils/http"
 
-//气压
+//获取设备在线状态、设备列表
 export function getCismaList(){
     return get('/cisma/getCismaList')
 }
+
+export function getFiveList(){
+    return get('/cisma/getFiveList')
+}

src/views/MicroExhibition/components/BarChart.vue

@@ -15,14 +15,18 @@ const setCharts = () => {
         },
         xAxis: {
             type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+            data: ['步进抬压脚电\r\n脑花样平缝机', '超高速全自\r\n动电脑包缝\r\n机(五线)'],
+            // axisLabel: {
+            //     interval: 0, //控制X轴刻度全部显示
+            //     rotate: 45, //倾斜角度
+            // },
         },
         yAxis: {
             type: 'value'
         },
         series: [
             {
-                data: [120, 200, 150, 80, 70, 110, 130],
+                data: [120, 200],
                 type: 'bar'
             }
         ]

src/views/MicroExhibition/components/DevCard.vue

@@ -8,11 +8,8 @@
                 <div class="dev-content dev-title">
                     <div class="key" v-for="item in dev_title">{{ item }}</div>
                 </div>
-            <div class="dev-content" v-for="(item,index) in dev_value">
+                <div class="dev-content" v-for="(items, index) in dev_value">
-                <div>{{ item.a }}</div>
+                    <div v-for="item in items">{{ item}}</div>
-                <div>{{ item.b }}</div>
-                <div>{{ item.c }}</div>
-                <div>{{ item.d }}</div>
                 </div>
             </div>
         </div>
@@ -27,8 +24,10 @@ const prop = defineProps({
         default: ['机架号', '状态', '布料层数', '裁片数量']
     },
     dev_value: {
-        type: [Object],
+        type: [Array],
-        default: [{a:102014422,b:'待机',c:'40层',d:'1000片'}]
+        default: [
+            [102014422, '待机', '40层', '1000片']
+        ]
     },
 })
 </script>
@@ -41,20 +40,25 @@ const prop = defineProps({
     display: flex;
     flex-direction: row;
 }
-.dev-left,.dev-right {
+
+.dev-left,
+.dev-right {
     width: 50%;
     height: 100%;
     box-sizing: border-box;
 }
+
 .dev-right {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
 }
+
 .dev-title {
     color: #FFF;
 }
+
 .dev-box {
     height: 100%;
     width: 100%;
@@ -63,6 +67,7 @@ const prop = defineProps({
     justify-content: end;
     align-items: center;
 }
+
 .dev-content {
     width: 100%;
     height: 100%;
@@ -79,5 +84,4 @@ const prop = defineProps({
     line-height: 35px;
     text-align: center;
     background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%;
-}
+}</style>
-</style>

src/views/MicroExhibition/components/LineChart.vue

@@ -28,7 +28,8 @@ const setCharts = ()=>{
             trigger: 'axis'
         },
         legend: {
-            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+            data: ['步进抬压脚电脑花样平缝机', '富怡全自动皮革缝纫机(任意转)整机', '富怡电脑绣花机(精密绣花机)', '超高速全自动电脑包缝机(五线)', '富怡全自动缝纫机(服装机)'],
+            left:'100px'
         },
         grid: {
             left: '3%',
@@ -46,33 +47,38 @@ const setCharts = ()=>{
         },
         series: [
             {
-                name: 'Email',
+                name: '步进抬压脚电脑花样平缝机',
                 type: 'line',
                 stack: 'Total',
+                smooth: true,
                 data: [120, 132, 101, 134, 90, 230, 210]
             },
             {
-                name: 'Union Ads',
+                name: '富怡全自动皮革缝纫机(任意转)整机',
                 type: 'line',
                 stack: 'Total',
+                smooth: true,
                 data: [220, 182, 191, 234, 290, 330, 310]
             },
             {
-                name: 'Video Ads',
+                name: '富怡电脑绣花机(精密绣花机)',
                 type: 'line',
                 stack: 'Total',
+                smooth: true,
                 data: [150, 232, 201, 154, 190, 330, 410]
             },
             {
-                name: 'Direct',
+                name: '超高速全自动电脑包缝机(五线)',
                 type: 'line',
                 stack: 'Total',
+                smooth: true,
                 data: [320, 332, 301, 334, 390, 330, 320]
             },
             {
-                name: 'Search Engine',
+                name: '富怡全自动缝纫机(服装机)',
                 type: 'line',
                 stack: 'Total',
+                smooth: true,
                 data: [820, 932, 901, 934, 1290, 1330, 1320]
             }
         ]

src/views/MicroExhibition/components/PbjCard.vue

@@ -1,17 +1,34 @@
 <template>
   <div class="pbj-card">
-    <div>机架号：12024467</div>
+    <div>机架号：{{ data.label }}</div>
     <div>工作时间</div>
-    <div class="demo-progress"><el-progress :text-inside="true" :stroke-width="26" :percentage="70" :format="format" />85%</div>
+    <div class="demo-progress"><el-progress :text-inside="true" :stroke-width="26" :percentage="percent"  />{{percent}}%
-    <div>状态：工作</div>
+    </div>
-    <div>铺布层数：50层</div>
+    <div>状态：{{ data.status }}</div>
+    <div>铺布层数：{{data.layer}}层</div>
   </div>
 </template>
 
 <script setup lang='ts'>
+import {computed} from 'vue'
+let minute = 480;
 
+const prop = defineProps({
+  data: {
+    type: Object,
+    default: {
+      label: '12024467',
+      time: 75,
+      status: '工作',
+      layer: 50
+    }
+  }
+})
+let percent = computed(() => {
+  return prop.data.time//Math.floor((prop.data.time / 480) * 100);
+})
 function format(percentage) {
-  return 3550;
+  return prop.data.time;
 }
 </script>
 
@@ -27,13 +44,14 @@ function format (percentage) {
   font-size: 18px;
   font-weight: 700;
 }
+
 .demo-progress {
   display: flex;
   align-items: center;
   color: #fff;
 }
+
 .demo-progress .el-progress--line {
   width: 350px;
   margin-right: 5px;
-}
+}</style>
-</style>

src/views/MicroExhibition/index.vue

@@ -38,10 +38,10 @@
                         </div>
                     </div>
                 </div>
-                <LineChart class="cc"></LineChart>
+                <LineChart class="cc" :config="{ title: '工作帧数' }"></LineChart>
                 <div class="cb">
                     <Card title="富 怡 全 自 动 裁 床">
-                        <DevCard>
+                        <DevCard :dev_title="cc_title" :dev_value="cc_value">
                             <div class="progress">
                                 <dv-water-level-pond :config="pond_config" style="width:120px;height:120px" />
                                 <div class="progress-title">工作时间</div>
@@ -128,9 +128,11 @@ let scrollBoardConfig = reactive({
     rawData: []
 })
 let dev_title = ['机架号', '设备状态', '剪线次数', '压脚次数']
+let cc_title = ['机架号', '设备状态', '布料层数', '裁片数量']
+let cc_value = ref([[102014421, '待机', '40层', '1000片']])
 let dev_value = [
-    { a: 102014422, b: '待机', c: '40层', d: '1000片' },
+    [102014423, '待机', '40层', '1000片'],
-    { a: 102014422, b: '待机', c: '40层', d: '1000片' },
+    [102014424, '待机', '40层', '1000片'],
 ]
 
 let pond_config = reactive({
@@ -138,8 +140,6 @@ let pond_config = reactive({
     shape: 'round'
 })
 async function reqCismaList() {
-    console.log();
-
     let res: any = await getCismaList()
     if (res.code === 200) {
         store.setDevlist(res.data.devlist)