upodate

src/http/Exhibition/Germany/index.ts

@@ -4,3 +4,9 @@ import {get,post} from "@/utils/http"
 export function dDeviceList(){
     return get('/screen/cisma/dDeviceList')
 }
+
+
+//获取设备在线状态、设备列表
+export function dDeviceOutput(label:string){
+    return get('/screen/cisma/dDeviceOutput?s='+label)
+}

src/locales/lang/en.ts

@@ -86,11 +86,11 @@ export default {
         'QiCheDevSchedule':'AIAIM Division\n Equipment Complete Schedule',
         'InPlantProductsDevList':'Equipment List',
         'SerialNum':'Serial Number',
-        'RackNum':'Machine number',
+        'RackNum':'Machine No.',
         'DevName':'Machine name',
         'JiqiName':'Machine name',
         'ofLegion':'Affiliated Division',
-        'DevStatus':'Device status',
+        'DevStatus':'Dev status',
         'JiqiStatus':'Machine Status',
         "RunTime":'Working hours',
         'finishSchedule':'Complete Schedule',

src/store/module/GermanyExhibition.ts

@@ -0,0 +1,34 @@
+/*
+ * @FilePath: \wwwd:\code\screenFront\src\store\module\energyConsume.ts
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-02-06 15:58:13
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+ */
+import { defineStore } from "pinia";
+import {Names} from '@/store/storeName'
+export const useGermanyExhibition = defineStore(Names.GermanyExhibition,{
+    state:()=>{
+        return{
+            cfytj:{},
+            gyfrj:{},
+            lq:{}
+        }
+    },
+    getters:{
+
+    },
+    actions:{
+        set_cfytj(data:any){
+            this.cfytj = data
+        },
+        set_gyfrj(data:any){
+            this.gyfrj = data
+        },
+        set_lq(data:any){
+            this.lq = data
+        }
+    }
+})

src/store/storeName.ts

@@ -30,4 +30,5 @@ export const enum Names{
     socketMechanics = 'socketMechanics',
     socketMicEnvironment = 'socketMicEnvironment',
     MicroExhibition = 'MicroExhibition',
+    GermanyExhibition = 'GermanyExhibition',
 }

src/utils/devSever.ts

@@ -9,8 +9,8 @@
  */
 
 // export const development={xhr:process.env.VUE_APP_BASE_API,ws:"ws://192.168.3.97:9018/",imgxhr:process.env.VUE_APP_BASE_API+"/image/"}
-export const development={xhr:process.env.VUE_APP_BASE_API,ws:"ws://8.130.165.100:9018/",imgxhr:process.env.VUE_APP_BASE_API}
+export const development={xhr:process.env.VUE_APP_BASE_API,ws:"ws://192.168.1.128:9018/",imgxhr:process.env.VUE_APP_BASE_API}
-export const production={xhr:process.env.VUE_APP_BASE_API,ws:"ws://8.130.165.100:9018/",imgxhr:process.env.VUE_APP_BASE_API}
+export const production={xhr:process.env.VUE_APP_BASE_API,ws:"ws://192.168.1.128:9018/",imgxhr:process.env.VUE_APP_BASE_API}
 //拼接图片url路径
 export function imgurlAddXhr(img){
     let src=null

src/views/Exhibition/Germany/child.vue

@@ -10,15 +10,8 @@
   <div class="container">
     <div class="header">
       <div class="title">
-        <header2
+        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'再登工况物联管理系统'" :titleTip="[]"
-          ref="headerref"
+          :typeFun="['time', 'comback']" :alarmType="[]"></header2>
-          :width="'100%'"
-          :height="'100px'"
-          :title="'再登工况物联管理系统'"
-          :titleTip="[]"
-          :typeFun="['time', 'comback']"
-          :alarmType="[]"
-        ></header2>
       </div>
     </div>
     <div class="content">
@@ -30,11 +23,7 @@
         </div>
         <div class="yield">
           <BorderView :title="'产出进度'">
-            <DynamicChart
+            <DynamicChart style="width: 100%; height: 100%" :xData="xData" :seriesData="seriesData"></DynamicChart>
-              style="width: 100%; height: 100%"
-              :xData="xData"
-              :seriesData="seriesData"
-            ></DynamicChart>
           </BorderView>
         </div>
       </div>
@@ -43,8 +32,8 @@
           <BorderView :title="'工作速度'">
             <div class="box-lt">
               <div class="pie">
-                <span>{{ speed }}</span>
+                <span>{{ dev_list.speed }}</span>
-                <span>rpm/min</span>
+                <span>rpm</span>
               </div>
             </div>
           </BorderView>
@@ -79,58 +68,86 @@
 </template>
 
 <script setup lang="ts">
-import {
+import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, computed, } from "vue";
-  ref,
+import { dDeviceOutput } from "@/http/Exhibition/Germany";
-  reactive,
+import { useGermanyExhibition } from '@/store/module/GermanyExhibition'
-  onMounted,
+
-  onUnmounted,
-  getCurrentInstance,
-  watch,
-  onUpdated,
-  computed,
-} from "vue";
 import header2 from "./components/header2.vue";
 import BorderView from "./components/Border.vue";
 import DevInfo from "./components/devinfo.vue";
 import DynamicChart from "./components/DynamicChart.vue";
 import PercentChart from "./components/PercentChart.vue";
 import ZdScrollBoard from "@/components/data-view/index.vue";
-import { useMicroExhibitionStore } from "@/store/module/MicroExhibition";
 const { proxy } = getCurrentInstance();
+const GermanyExhibition = useGermanyExhibition();
+const props = defineProps<{
+  modelValue: any;
+  label: string;
+}>();
 // 设备信息
-let device_data = ref([
+let dev_list = computed(()=>{
-  { key: "设备名称", value: "冲缝一体机", value_style: { fontSize: "20px" } },
+  let dev_data: any = {}
-  { key: proxy.tLang('messages','RackNum'), value: "1171210#" },
+  if (props.label == '1171210') {
-  { key: "工作人员", value: "张--" },
+    dev_data = GermanyExhibition.cfytj
-  { key: proxy.tLang('messages','DevStatus'), value: "1" },
+  } else if (props.label == 'RP2401009') {
-  { key: "稼动率", value: "30%" },
+    dev_data = GermanyExhibition.gyfrj
-  { key: proxy.tLang('messages','花样名称'), value: "0.7盾牌" },
+  } else if (props.label == '104019564') {
+    dev_data = GermanyExhibition.lq
+  }
+  return dev_data;
+})
+let device_data = computed(() => {
+  let dev_data: any = {}
+  let dev_arr: any = []
+  if (props.label == '1171210') {
+    dev_data = GermanyExhibition.cfytj
+    dev_arr = [
       { key: "加工时长", value: "23min" },
-  { key: proxy.tLang('messages','花样总针数'), value: "300针" },
+      { key: proxy.tLang('messages', '花样总针数'), value: dev_data.patternCount },
-  { key: "断线次数", value: "0次" },
+      { key: proxy.tLang('messages', '当前针数'), value: dev_data.currentCount },
-  { key: proxy.tLang('messages','当前针数'), value: "100针" },
+      { key: proxy.tLang('messages', '花样名称'), value: dev_data.fileName },
-]);
+    ]
+  } else if (props.label == 'RP2401009') {
+    dev_data = GermanyExhibition.gyfrj
+    dev_arr = [
+      { key: proxy.tLang('messages', '剪线次数'), value: dev_data.in3Count },
+      { key: proxy.tLang('messages', '压脚次数'), value: dev_data.in2Count },
+      { key: proxy.tLang('messages', '针数'), value: dev_data.in4Count },
+      { key: proxy.tLang('messages', '能耗'), value: dev_data.consumption||0 + 'kW·h' },
+    ]
+  } else if (props.label == '104019564') {
+    dev_data = GermanyExhibition.lq
+    dev_arr = [
+      { key: proxy.tLang('messages', 'model'), value: 'RPSP-NM-I+K-1-1800-Ⅰ-WC2+K-RF-1P220' },
+    ]
+  }
+  let object_data = [
+    { key: proxy.tLang('messages', 'DevName'), value: dev_data.name, value_style: { fontSize: "20px" } },
+    { key: proxy.tLang('messages', 'RackNum'), value: dev_data.label },
+    { key: "稼动率", value: dev_data.activation + "%" },
+    { key: proxy.tLang('messages', 'DevStatus'), value: dev_data.workingState },
+    { key: "工作人员", value: "张--" },
+  ];
+  object_data.push(...dev_arr)
+  return object_data;
+});
 let getImgSrc = computed(() => {
-  // let name: string = Array.isArray(route.params.name)
-  //   ? route.params.name[0]
-  //   : route.params.name;
   let imgSrc = {
-    冲缝一体机: require("./images/cfytj.png"),
+    '1171210': require("./images/cfytj.png"),
-    工业缝纫机: require("./images/cfytj.png"),
+    'RP2401009': require("./images/gyfrj.png"),
+    '104019564': require("./images/lq.png"),
   };
-  return imgSrc['冲缝一体机'];
+  return imgSrc[props.label];
 });
 
+function init() {
+  dDeviceOutput(props.label).then((res) => {
+    console.log(res);
+  });
+}
+
 // 获取产出进度echarts数据
-let xData = ref([
+let xData = ref(["2024-04-15", "2024-04-16", "2024-04-17", "2024-04-18", "2024-04-19", "2024-04-20", "2024-04-21",]);
-  "2024-04-15",
-  "2024-04-16",
-  "2024-04-17",
-  "2024-04-18",
-  "2024-04-19",
-  "2024-04-20",
-  "2024-04-21",
-]);
 let seriesData = ref([
   {
     name: "实际产量",
@@ -177,6 +194,10 @@ let config = ref({
     [6, "维护", "2024-04-15", "完成", "1001"],
   ],
 });
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style scoped>
@@ -188,10 +209,12 @@ let config = ref({
   background-color: #0e0e0e;
   position: relative;
 }
+
 .header {
   height: 100px;
   width: 1920px;
 }
+
 .content {
   height: 980px;
   width: 1920px;
@@ -201,6 +224,7 @@ let config = ref({
   padding: 0 5px;
   box-sizing: border-box;
 }
+
 .left {
   height: 980px;
   width: 1200px;
@@ -208,6 +232,7 @@ let config = ref({
   flex-direction: column;
   justify-content: space-between;
 }
+
 .right {
   height: 980px;
   width: 710px;
@@ -216,18 +241,22 @@ let config = ref({
   flex-direction: column;
   justify-content: space-between;
 }
+
 .detail {
   width: 100%;
   height: 500px;
 }
+
 .yield {
   width: 100%;
   height: 480px;
 }
+
 .speed {
   width: 100%;
   height: 250px;
 }
+
 .box-lt {
   width: 100%;
   height: 100%;
@@ -249,6 +278,7 @@ let config = ref({
   font-size: 25px;
   margin-bottom: 22px;
 }
+
 .percent {
   width: 100%;
   height: 420px;
@@ -265,8 +295,8 @@ let config = ref({
 .left-tip-type {
   position: absolute;
   top: 50px;
-  left: 462px;
+  left: 427px;
-  width: 160px;
+  width: 200px;
   height: 50px;
   display: flex;
   justify-content: space-between;
@@ -283,6 +313,7 @@ let config = ref({
   justify-content: space-between;
   align-items: center;
 }
+
 .yuan {
   width: 24px;
   height: 24px;
@@ -308,6 +339,7 @@ let config = ref({
 .err {
   color: #ff6e76;
 }
+
 .dev-list {
   width: 100%;
   height: 100%;

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

@@ -28,8 +28,7 @@
 </template>
 
 <script setup lang='ts'>
-import { de } from 'element-plus/es/locale';
+import { ref, getCurrentInstance,computed } from 'vue'
-import { ref, getCurrentInstance } from 'vue'
 const { proxy } = getCurrentInstance()
 const props = defineProps<{
     data: any,
@@ -43,7 +42,8 @@ let statusObj = {
     3: 'yello'
 }
 let cfytjImg = require('./../images/cfytj.png');
-let gauge_option = ref({
+let gauge_option = computed(()=>{
+    return {
     series: [
         {
             type: 'gauge',
@@ -127,11 +127,12 @@ let gauge_option = ref({
             },
             data: [
                 {
-                    value: 900
+                    value: props.data.speed
                 }
             ]
         }
     ]
+}
 })
 </script>
 

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

@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang='ts'>
-import { ref, getCurrentInstance, watch } from 'vue'
+import { ref, getCurrentInstance, watch, computed } from 'vue'
 import 'echarts-liquidfill'
 const { proxy } = getCurrentInstance()
 
@@ -58,7 +58,8 @@ let statusObj = {
     2: 'green',
     3: 'yello'
 }
-let gauge_option = ref({
+let gauge_option = computed(() => {
+    return {
     series: [
         {
             type: 'gauge',
@@ -142,13 +143,15 @@ let gauge_option = ref({
             },
             data: [
                 {
-                    value: 1000
+                    value: props.data.speed
                 }
             ]
         }
     ]
-})
+}})
-let fill_option = ref({
+let fill_option = computed(() => {
+    
+    return {
         series: [{
             type: 'liquidFill',
             radius: '80%', //水球大小
@@ -189,10 +192,7 @@ let fill_option = ref({
                         fontWeight: 'bold',
                         color: '#fff',
                     },
-                formatter: function (params) {
+                    formatter: props.data?.consumption+''
-
-                    return props.data?.consumption;
-                }
                 },
 
             },
@@ -204,11 +204,6 @@ let fill_option = ref({
                 },
             },
         }],
-})
-
-watch(() => props.data, (newVal) => {
-    fill_option.value.series[0].label.normal.formatter = function (params) {
-        return newVal?.consumption;
     }
 })
 </script>
@@ -265,11 +260,7 @@ watch(() => props.data, (newVal) => {
 
     .icon-box-item {
         position: absolute;
-        width: 50%;
+        width: 35%;
-
-        div {
-            margin-left: 20px;
-        }
 
         span {
             text-align: center;
@@ -306,8 +297,6 @@ watch(() => props.data, (newVal) => {
             width: 180px;
             height: 220px;
         }
-
-        .fill-title {}
     }
 
 
@@ -326,17 +315,17 @@ watch(() => props.data, (newVal) => {
 
     .pos2 {
         top: 140px;
-        left: 0;
+        left: 20px;
     }
 
     .pos3 {
         top: 312px;
-        left: -33px;
+        left: -13px;
     }
 
     .pos4 {
         bottom: 14px;
-        left: 163px;
+        left: 180px;
     }
 
     .iconfont {

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

@@ -12,24 +12,19 @@
       <div class="top-item" v-for="(item, index) in data" :style="{ width }">
         <span class="key-text">{{ item.key }}:</span>
         <span class="value-text" :style="item?.value_style">
-          <div
+          <div class="status" v-if="index == 3" :style="{ background: status_color[item.value] }"></div>
-            class="status"
-            v-if="index == 3"
-            :style="{ background: status_color[item.value] }"
-          ></div>
           <span v-else>{{ item.value }}</span>
         </span>
       </div>
     </div>
     <div class="box-right">
-      <img :src="imgSrc" alt="" />
+      <el-image style="width: 100%; height: 100%" :src="imgSrc" fit="contain"></el-image>
     </div>
   </div>
 </template>
 <script setup lang="ts">
+import { el } from "element-plus/es/locale";
 import { computed, ref } from "vue";
-const imgSrc =
-  "https://www.richpeace.cn/uploadfile/thumb/0b94ce08688c6389ce7b68c52ce3f8c7/880x580_auto.jpg";
 const prop = defineProps({
   data: {
     type: Array as any,
@@ -54,44 +49,50 @@ const status_color = {
   "3": "#FDDD60",
 };
 </script>
-<style scoped>
+<style scoped lang="scss">
 .item-card-container {
   width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
+
 .box-left {
-  width: 600px;
+  width: 60%;
   height: 100%;
   box-sizing: border-box;
   display: flex;
-  justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
-  float: left;
-}
-.box-right {
-  width: 500px;
-  height: 100%;
-  /* background-color: red; */
-  margin-left: 55%;
-}
-.box-right img {
-  max-width: 100%;
-  max-height: 100%;
-}
-.key-text {
-  width: 60%;
-  font-size: 22px;
-  color: #02c1d7;
-  font-weight: 700;
-}
   .top-item {
     height: 50%;
+    height: 20%;
     display: flex;
     justify-content: space-around;
     align-items: center;
     box-sizing: border-box;
     padding: 20px 10px;
   }
+}
+
+.box-right {
+  width: 40%;
+  height: 100%;
+}
+
+.box-right img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.key-text {
+  width: 60%;
+  font-size: 22px;
+  color: #02c1d7;
+  font-weight: 700;
+}
+
 .value-text {
   width: 40%;
   font-size: 20px;
@@ -104,20 +105,24 @@ const status_color = {
   justify-content: center;
   align-items: center;
 }
+
 .status {
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  animation: blink 1s infinite; /* 添加动画效果 */
+  animation: blink 1s infinite;
+  /* 添加动画效果 */
 }
 
 @keyframes blink {
   0% {
     box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
   }
+
   90% {
     box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
   }
+
   100% {
     box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
   }

src/views/Exhibition/Germany/index.vue

@@ -66,6 +66,8 @@
 <script setup lang='ts'>
 import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch} from "vue";
 import { dDeviceList } from '@/http/Exhibition/Germany'
+import { useGermanyExhibition} from '@/store/module/GermanyExhibition'
+
 import BorderView from "./components/Border.vue";
 import header2 from "./components/header2.vue";
 import TopLBox from "./components/TopLBox.vue";
@@ -74,10 +76,12 @@ import BottomLBox from "./components/BottomLBox.vue";
 import BottomCBox from "./components/BottomCBox.vue";
 import BottomRBox from "./components/BottomRBox.vue";
 
+
 const props = defineProps<{
     modelValue: any,
     label: string
 }>()
+const GermanyExhibition = useGermanyExhibition()
 const { proxy } = getCurrentInstance();
 let videoUrl = ref('/mic_english.mp4')
 let cfytj = ref({})
@@ -98,24 +102,32 @@ function init() {
             let production = []
 
             data.forEach(item => {
-                if (item.name == '工业缝纫机') {
+                //工业缝纫机
+                if (item.label == 'RP2401009') {
+                    item.speed = 0
                     gyfrj.value = item
+                    GermanyExhibition.set_gyfrj(item)
                     production.push({
                         production: item.production,
                         name: item.name,
                         planProduction: item.planProduction,
                         option: pie_option(item.planProduction, item.production)
                     })
-                } else if (item.name == '冲缝一体机') {
+                    //冲缝一体机
+                } else if (item.label == '1171210') {
+                    item.speed = 0
                     cfytj.value = item
+                    GermanyExhibition.set_cfytj(item)
                     production.push({
                         production: item.production,
                         name: item.name,
                         planProduction: item.planProduction,
                         option: pie_option(item.planProduction, item.production)
                     })
-                } else if (item.name == '立切机180双喷机') {
+                    //立切180双喷
+                } else if (item.label == '104019564') {
                     lq.value = item
+                    GermanyExhibition.set_lq(item)
                 }
                 activationRate.xAxisData.push(item.label)
                 activationRate.rate.push(item.activation)
@@ -166,10 +178,9 @@ function pie_option(planProduction,production) {
     }
 }
 watch(() => props.modelValue, (newVal) => {
-    let data = newVal
+    if (newVal.type == 'WorkingState') {
-    if (data.type == 'WorkingState') {
+        let { RackNumber, WorkingState,speed } = newVal.msg
-        let { RackNumber, WorkingState } = data.msg
+        console.log(newVal.msg, 'data.value');
-        console.log(data.value, 'data.value');
         
     }
 })
@@ -259,9 +270,9 @@ onMounted(() => {
 
 .left-tip-type {
     position: absolute;
-    top: 50px;
+    top: 45px;
-    left: 462px;
+    left: 413px;
-    width: 160px;
+    width: 200px;
     height: 50px;
     display: flex;
     justify-content: space-between;

src/views/Exhibition/Germany/loop.vue

@@ -2,10 +2,9 @@
     <div class="container">
         <ul :style="{ width: `${list.length * 1920}px` }">
             <li v-for="(item, index) in list"
-                :style="{ 'background-color': item.color, transform: `translateX(-${i * 1920}px)` }"
+                :style="{ 'background-color': item.color, transform: `translateX(-${i * 1920}px)` }" :key="index">
-                 :key="index"
+                <component :is="item.components()" v-model="socketMsg" :label="item.label" v-if="hash.includes(index)">
-                 >
+                </component>
-                <component :is="item.components()" v-model="socketMsg" :label="item.label" v-if="hash.includes(index)"></component>
             </li>
         </ul>
     </div>
@@ -20,22 +19,22 @@ const Germanyindex = defineAsyncComponent(() =>
 const Germanychild = defineAsyncComponent(() =>
     import('@/views/Exhibition/Germany/child.vue')
 );
-let i = ref(0)
+let i = ref(1)
-let hash = [0]
+let hash = reactive([0,1,2])
 let socketMsg = ref({})
 let timer = null
 let time = 60000
-watch(i, (val) => {    
+// watch(i, (val) => {    
-    if (val < 0) {
+//     if (val < 0) {
-        i.value = 0
+//         i.value = 0
-    }
+//     }
-    if (val > list.length - 1) {
+//     if (val > list.length - 1) {
-        i.value = list.length - 1
+//         i.value = list.length - 1
-    }
+//     }
-    if (!hash.includes(i.value)) {
+//     if (!hash.includes(i.value)) {
-        hash.push(i.value)
+//         hash.push(i.value)
-    }
+//     }
-})
+// })
 let list = reactive([
     { color: '', components: () => Germanyindex, label: '' },
     { color: '', components: () => Germanychild, label: 'RP2401009' },
@@ -65,6 +64,9 @@ onMounted(() => {
     //     if (i.value > list.length - 1) {
     //         i.value = 0
     //     }
+    //     if (!hash.includes(i.value)) {
+    //         hash.push(i.value)
+    //     }
     // }, time)
     connectWebsocket(null, null, getWebsocket, errWebsocket)
 })