的锅展会大屏update

2024-04-18 13:38:58 +08:00 · 2024-04-18 13:38:58 +08:00 · 24bdc11c81
commit 24bdc11c81
parent dae937ac26
6 changed files with 132 additions and 68 deletions
--- a/src/views/Exhibition/Germany/components/BottomCBox.vue
+++ b/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: {
--- a/src/views/Exhibition/Germany/components/BottomLBox.vue
+++ b/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>

--- a/src/views/Exhibition/Germany/components/BottomRBox.vue
+++ b/src/views/Exhibition/Germany/components/BottomRBox.vue
@ -1,13 +1,13 @@
 <template>
    <div class="br-container">
-        <div class="card" v-for="item in 2">
-            <v-chart class="chart-class" :option="pie_option"></v-chart>
+        <div class="card" v-for="item in props.data">
+            <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()
-
-let pie_option = ref({
-    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','已完成') },
-
-            ]
-        }
-    ]
-})
+const props = defineProps<{
+  data: any
+}>()

 </script>

--- a/src/views/Exhibition/Germany/components/TopLBox.vue
+++ b/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: {
--- a/src/views/Exhibition/Germany/components/TopRBox.vue
+++ b/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;
                }
            },

--- a/src/views/Exhibition/Germany/index.vue
+++ b/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 {dDeviceList} from '@/http/Exhibition/Germany'
+import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, } from "vue";
+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 = {
+                xAxisData: [],
+                rate: []
+            }
+            let production = []

-            data.forEach(item=>{
-                if(item.name == '工业缝纫机') {
+            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;
 }