的锅展会大屏update

src/views/Exhibition/Germany/components/BottomCBox.vue

@@ -8,16 +8,23 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, getCurrentInstance } from 'vue'
+import { ref, getCurrentInstance,watch } from 'vue'
 const { proxy } = getCurrentInstance()
+const props = defineProps<{
+  data: any
+}>()
 
+watch(() => props.data, (val) => {
+  bar_option.value.xAxis.data = val.xAxisData
+  bar_option.value.series[0].data = val.rate
+})
 let bar_option = ref({
  legend: {
         data:[proxy.tLang('messages','稼动率')],
     },
   xAxis: {
     type: 'category',
-    data: ['104019564#', '1171210#', 'RP2401009', ],
+    data: props.data?.xAxisData,
     axisLabel: {
             color: '#AEEEFA',
             fontSize: 14 
@@ -26,6 +33,8 @@ let bar_option = ref({
   },
   yAxis: {
     type: 'value',
+    min: 0,
+    max: 100,
     name: proxy.tLang('messages','稼动率'),
     nameTextStyle: {
             color: '#fff', 
@@ -45,7 +54,7 @@ let bar_option = ref({
   },
   series: [
     {
-      data: [120, 200, 150],
+      data: props.data?.rate,
       type: 'bar',
       showBackground: true,
       backgroundStyle: {

src/views/Exhibition/Germany/components/BottomLBox.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="bl-box-container">
         <div class="box-item pos">{{ tLang('messages', '机架号') }}:
-            <div>104019564#</div>
+            <div>{{ props.data?.label }}</div>
         </div>
         <div class="box-item">{{ tLang('messages', '设备状态') }}:
-            <div class="status green"></div>
+            <div class="status" :class="[statusObj[props.data?.workingState]]"></div>
         </div>
         <div class="box-item">
             <div style="text-wrap: nowrap;">{{ tLang('messages', '型号') }}:</div>
@@ -19,6 +19,17 @@
 <script setup lang='ts'>
 import { ref, getCurrentInstance } from 'vue'
 const { proxy } = getCurrentInstance()
+const props = defineProps<{
+    data: any,
+}>()
+
+let statusObj = {
+    0:'red',
+    1:'yello',
+    2:'green',
+    3:'yello'
+}
+
 let lqImg = require('./../images/lq.png');
 </script>
 

src/views/Exhibition/Germany/components/BottomRBox.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="br-container">
-        <div class="card" v-for="item in 2">
+        <div class="card" v-for="item in props.data">
-            <v-chart class="chart-class" :option="pie_option"></v-chart>
+            <v-chart class="chart-class" :option="item.option"></v-chart>
             <div class="box-list">
-                <div class="box-item">{{ tLang('messages', '实际产量') }}：<div></div>
+                <div class="box-item">{{ tLang('messages', '实际产量') }}：<div>{{ item.production }}</div>
                 </div>
-                <div class="box-item">{{ tLang('messages', '计划产量') }}：<div></div>
+                <div class="box-item">{{ tLang('messages', '计划产量') }}：<div>{{ item.planProduction }}</div>
                 </div>
-                <div class="box-item">{{ tLang('messages', '设备名称') }}：<div></div>
+                <div class="box-item">{{ tLang('messages', '设备名称') }}：<div>{{ item.name }}</div>
                 </div>
             </div>
         </div>
@@ -18,41 +18,9 @@
 <script setup lang='ts'>
 import { ref, getCurrentInstance } from "vue"
 const { proxy } = getCurrentInstance()
-
+const props = defineProps<{
-let pie_option = ref({
+  data: any
-    tooltip: {
+}>()
-        trigger: 'item'
-    },
-    legend: {
-        top: '10%',
-        left: 'center',
-        textStyle: {
-            color: "#ffffff",
-            fontSize: 14,
-        },
-    },
-    series: [
-        {
-            name: 'Output',
-            type: 'pie',
-            radius: ['80%', '90%'],
-            center: ['50%', '70%'],
-            startAngle: 210,
-            endAngle: 330,
-            label: {
-                show: true,
-                position: 'center',
-                formatter: `{d}%`,
-                color: "#fff",
-            },
-            data: [
-                { value: 28, name: proxy.tLang('messages','未完成') },
-                { value: 100, name: proxy.tLang('messages','已完成') },
-
-            ]
-        }
-    ]
-})
 
 </script>
 

src/views/Exhibition/Germany/components/TopLBox.vue

@@ -108,7 +108,7 @@ let gauge_option = ref({
                 offsetCenter: [0, '35%'],
                 valueAnimation: true,
                 formatter: function (value) {
-                    return '{value|' + value.toFixed(0) + '}{unit|rpm/min}';
+                    return '{value|' + value.toFixed(0) + '}{unit|rpm}';
                 },
                 rich: {
                     value: {

src/views/Exhibition/Germany/components/TopRBox.vue

@@ -1,32 +1,32 @@
 <template>
     <div class="r-box-container">
         <div class="pos-label">
-            <div class="box-item">{{ tLang('messages', '机架号') }}：<div></div>
+            <div class="box-item">{{ tLang('messages', '机架号') }}：<div>{{ props.data?.label }}</div>
             </div>
         </div>
         <div class="box-item pos1">
             {{ tLang('messages', '设备状态') }}:
-            <div class="status green"></div>
+            <div class="status" :class="[statusObj[props.data?.workingState]]"></div>
         </div>
         <div class="icon-box-item pos2">
             <div class="icon-div">
                 <div class="iconfont icon-caijian"></div>
 
-                <div>111</div>
+                <div>{{ props.data?.in3Count + tLang('messages','次') }}</div>
             </div>
             <span>{{ tLang('messages', '剪线次数') }}</span>
         </div>
         <div class="icon-box-item pos3">
             <div class="icon-div">
                 <div class="iconfont icon-jizhenzhenshu"></div>
-                <div>111</div>
+                <div>{{ props.data?.in4Count + tLang('messages','次') }}</div>
             </div>
             <span>{{ tLang('messages', '针数') }}</span>
         </div>
         <div class="icon-box-item pos4">
             <div class="icon-div">
                 <div class="iconfont icon-zidongtaiyajiao"></div>
-                <div>111</div>
+                <div>{{ props.data?.in2Count + tLang('messages','次') }}</div>
             </div>
             <span>{{ tLang('messages', '压脚次数') }}</span>
         </div>
@@ -48,6 +48,16 @@ import 'echarts-liquidfill'
 const { proxy } = getCurrentInstance()
 
 let gyfrjImg = require('./../images/gyfrj.png');
+const props = defineProps<{
+    data: any,
+}>()
+
+let statusObj = {
+    0:'red',
+    1:'yello',
+    2:'green',
+    3:'yello'
+}
 let gauge_option = ref({
     series: [
         {
@@ -115,7 +125,7 @@ let gauge_option = ref({
                 offsetCenter: [0, '35%'],
                 valueAnimation: true,
                 formatter: function (value) {
-                    return '{value|' + value.toFixed(0) + '}{unit|rpm/min}';
+                    return '{value|' + value.toFixed(0) + '}{unit|rpm}';
                 },
                 rich: {
                     value: {
@@ -132,7 +142,7 @@ let gauge_option = ref({
             },
             data: [
                 {
-                    value: 900
+                    value: 1000
                 }
             ]
         }
@@ -181,7 +191,7 @@ let fill_option = ref({
                 },
                 formatter: function (params) {
                     
-                    return params.value
+                    return props.data?.consumption;
                 }
             },
 

src/views/Exhibition/Germany/index.vue

@@ -32,14 +32,14 @@
                 </div>
                 <div class="bottom-center-content">
                     <BorderView :title="'设备稼动率'">
-                        <BottomCBox></BottomCBox>
+                        <BottomCBox :data="bar"></BottomCBox>
                     </BorderView>
 
                 </div>
                 <div class="bottom-right-content">
-                    
+
                     <BorderView :title="'产出进度'">
-                        <BottomRBox></BottomRBox>
+                        <BottomRBox :data="pie"></BottomRBox>
                     </BorderView>
                 </div>
             </div>
@@ -63,8 +63,8 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, reactive, onMounted, onUnmounted, getCurrentInstance,} from "vue";
+import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, } from "vue";
-import {dDeviceList} from '@/http/Exhibition/Germany'
+import { dDeviceList } from '@/http/Exhibition/Germany'
 import BorderView from "./components/Border.vue";
 import header2 from "./components/header2.vue";
 import TopLBox from "./components/TopLBox.vue";
@@ -78,27 +78,90 @@ let cfytj = ref({})
 let gyfrj = ref({})
 let lq = ref({})
 let bar = ref({})
-let pie = ref()
+let pie = ref([])
 let warning = ref(false)
 
 function init() {
-    dDeviceList().then((res:any) => {
+    dDeviceList().then((res: any) => {
         if (res.code == 200) {
-            let data:any = res.data
+            let data: any = res.data
-            
+            let activationRate = {
-            data.forEach(item=>{
+                xAxisData: [],
-                if(item.name == '工业缝纫机') {
+                rate: []
+            }
+            let production = []
+
+            data.forEach(item => {
+                if (item.name == '工业缝纫机') {
                     gyfrj.value = item
-                } else if(item.name == '冲缝一体机') {
+                    production.push({
+                        production: item.production,
+                        name: item.name,
+                        planProduction: item.planProduction,
+                        option: pie_option(item.planProduction, item.production)
+                    })
+                } else if (item.name == '冲缝一体机') {
                     cfytj.value = item
-                } else if(item.name == '立切机180双喷机') {
+                    production.push({
+                        production: item.production,
+                        name: item.name,
+                        planProduction: item.planProduction,
+                        option: pie_option(item.planProduction, item.production)
+                    })
+                } else if (item.name == '立切机180双喷机') {
                     lq.value = item
                 }
+                activationRate.xAxisData.push(item.label)
+                activationRate.rate.push(item.activation)
             })
+            bar.value = activationRate
+            pie.value = production
         }
     })
 }
-onMounted(()=>{
+
+function pie_option(planProduction,production) {
+
+    return {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            top: '10%',
+            left: 'center',
+            textStyle: {
+                color: "#ffffff",
+                fontSize: 14,
+            },
+        },
+        series: [
+            {
+                name: proxy.tLang('messages', '产出进度'),
+                type: 'pie',
+                radius: ['80%', '90%'],
+                center: ['50%', '70%'],
+                startAngle: 210,
+                endAngle: 330,
+                label: {
+                    show: true,
+                    position: 'center',
+                    formatter: (params) => {
+                        console.log(params,'params');
+                        
+                        return (production/planProduction*100).toFixed(1) + '%'
+                    },
+                    color: "#fff",
+                },
+                data: [
+                    { value: production, name: proxy.tLang('messages', '已完成'), itemStyle: { color: '#7cffb2' } },
+                    { value: planProduction - production, name: proxy.tLang('messages', '未完成'), itemStyle: { color: '#ff6e76' } },
+
+                ]
+            }
+        ]
+    }
+}
+onMounted(() => {
     init()
 })
 </script>
@@ -215,6 +278,7 @@ onMounted(()=>{
 :deep(.green) {
     background-color: #7cffb2;
 }
+
 :deep(.green-color) {
     color: #7cffb2;
 }
@@ -222,6 +286,7 @@ onMounted(()=>{
 :deep(.yello) {
     background-color: #fddd60;
 }
+
 :deep(.yello-color) {
     color: #fddd60;
 }
@@ -229,6 +294,7 @@ onMounted(()=>{
 :deep(.red) {
     background-color: #ff6e76;
 }
+
 :deep(.red-color) {
     color: #ff6e76;
 }