hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
hzz 2024-04-22 16:58:28 +08:00
parent 54b2634d47
commit fec8589136
11 changed files with 259 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/http/Exhibition/Germany/index.ts
View File

@ -10,3 +10,7 @@ export function dDeviceList(){
export function dDeviceOutput(label:string){
return get('/screen/cisma/dDeviceOutput?s='+label)
}
//获取设备在线状态、设备列表
export function standardTimeD(){
return get('/screen/cisma/standardTimeD')
}

14
src/locales/lang/en.ts
View File

@ -347,7 +347,19 @@ export default {
"稼动率说明": "Utilization rate (actual working time/actual boot time)",
"已完成":"Completed",
"未完成":"Uncompleted",
"工作速度":"Working Speed",
"产品合格率":"Product qualified rate",
"维保信息":"Maintenance",
"件":"Piece",
"日期":"Date",
"工作人员":"Operator",
"操作员编号":"Operator ID",
"完成":"Completed",
"通知":"Notice",
"轮播已开启":"Carousel has been turned on",
"轮播已关闭":"Carousel has been turned off",
"加工时长":"Processing Time",
"合格率":"Qualified Rate",
},
"default":{
'年': 'Year',

13
src/locales/lang/zh.ts
View File

@ -345,6 +345,19 @@ export default {
"稼动率说明":"稼动率：实际工作时间/设备开机时间",
"已完成":"已完成",
"未完成":"未完成",
"工作速度":"工作速度",
"产品合格率":"产品合格率",
"维保信息":"维保信息",
'件':'件',
"日期":"日期",
"工作人员":"工作人员",
"操作员编号":"操作员编号",
"完成":"完成",
"合格率":"合格率",
"通知":"通知",
"轮播已开启":"轮播已开启",
"轮播已关闭":"轮播已关闭",
"加工时长":"加工时长",
},
"default":{
'年': '年',

65
src/store/module/GermanyExhibition.ts
View File

@ -8,26 +8,67 @@
* 版权信息 : 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:{}
import { Names } from '@/store/storeName'
export const useGermanyExhibition = defineStore(Names.GermanyExhibition, {
state: () => {
return {
cfytj: {
"id": "5f4000d0-bb4d-11ee-bf45-cf357b830191",
"label": "1171210",
"name": "冲缝一体机",
"brokenLineCount": null,
"currentCount": null,
"workTime": "0.0",
"patternCount": null,
"activation": "0.0",
"planProduction": 100,
"production": 0,
"fileName": null,
"workingState": 0,
"speed": 0,
},
gyfrj: {
"id": "8263ab70-bb4d-11ee-bf45-cf357b830191",
"name": "工业缝纫机",
"label": "RP2401009",
"activation": "0.2",
"workTime": "0.06",
"planProduction": 100,
"production": 0,
"in2Count": 2,
"in3Count": 4,
"in4Count": 15,
"consumption": 0,
"workingState": 0,
"speed": 0,
},
lq: {
"id": "78f01000-b8c9-11ee-bf45-cf357b830191",
"label": "104019564",
"name": "立切机180双喷机",
"brokenLineCount": null,
"currentCount": null,
"workTime": "0.0",
"patternCount": null,
"activation": "0.0",
"planProduction": 0,
"production": 0,
"fileName": null,
"workingState": 0
}
}
},
getters:{
getters: {
},
actions:{
set_cfytj(data:any){
actions: {
set_cfytj(data: any) {
this.cfytj = data
},
set_gyfrj(data:any){
set_gyfrj(data: any) {
this.gyfrj = data
},
set_lq(data:any){
set_lq(data: any) {
this.lq = data
}
}

6
src/utils/devSever.ts
View File

@ -8,9 +8,9 @@
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
*/
// 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://192.168.1.128: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}
// export const development={xhr:process.env.VUE_APP_BASE_API,ws:"ws://192.168.1.128: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 production={xhr:process.env.VUE_APP_BASE_API,ws:"ws://8.130.165.100:9018/",imgxhr:process.env.VUE_APP_BASE_API}
//拼接图片url路径
export function imgurlAddXhr(img){
let src=null

62
src/views/Exhibition/Germany/child.vue
View File

@ -10,26 +10,26 @@
<div class="container">
<div class="header">
<div class="title">
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'再登工况物联管理系统'" :titleTip="[]"
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="tLang('messages','再登机器物联管理系统')" :titleTip="[]"
:typeFun="['time', 'comback']" :alarmType="[]"></header2>
</div>
</div>
<div class="content">
<div class="left">
<div class="detail">
<BorderView :title="'设备信息'">
<BorderView :title="tLang('messages','DevInfo')">
<DevInfo :data="device_data" :imgSrc="getImgSrc"></DevInfo>
</BorderView>
</div>
<div class="yield">
<BorderView :title="'产出进度'">
<BorderView :title="tLang('messages','产出进度')">
<DynamicChart style="width: 100%; height: 100%" :xData="xData" :seriesData="seriesData"></DynamicChart>
</BorderView>
</div>
</div>
<div class="right">
<div class="speed">
<BorderView :title="'工作速度'">
<BorderView :title="tLang('messages','工作速度')">
<div class="box-lt">
<div class="pie">
<span>{{ dev_list.speed }}</span>
@ -39,12 +39,12 @@
</BorderView>
</div>
<div class="percent">
<BorderView :title="'产品合格率'">
<PercentChart style="width: 100%; height: 100%"></PercentChart>
<BorderView :title="tLang('messages','产品合格率')">
<PercentChart style="width: 100%; height: 100%" :xData="props.rxData"></PercentChart>
</BorderView>
</div>
<div class="history">
<BorderView :title="'维保信息'">
<BorderView :title="tLang('messages','维保信息')">
<ZdScrollBoard ref="devList" class="dev-list" :config="config" />
</BorderView>
</div>
@ -83,6 +83,7 @@ const GermanyExhibition = useGermanyExhibition();
const props = defineProps<{
modelValue: any;
label: string;
rxData: any;
}>();
// 设备信息
let dev_list = computed(()=>{
@ -102,7 +103,7 @@ let device_data = computed(() => {
if (props.label == '1171210') {
dev_data = GermanyExhibition.cfytj
dev_arr = [
{ key: "加工时长", value: "23min" },
{ key: proxy.tLang('messages', '加工时长'), value: dev_data.workTime + 'min' },
{ key: proxy.tLang('messages', '花样总针数'), value: dev_data.patternCount },
{ key: proxy.tLang('messages', '当前针数'), value: dev_data.currentCount },
{ key: proxy.tLang('messages', '花样名称'), value: dev_data.fileName },
@ -124,9 +125,9 @@ let device_data = computed(() => {
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',"UtilizationRate"), value: dev_data.activation + "%" },
{ key: proxy.tLang('messages', 'DevStatus'), value: dev_data.workingState },
{ key: "工作人员", value: "张--" },
{ key: proxy.tLang('messages',"工作人员"), value: "1001" },
];
object_data.push(...dev_arr)
return object_data;
@ -139,28 +140,23 @@ let getImgSrc = computed(() => {
};
return imgSrc[props.label];
});
let xData = ref(["2024-04-16", "2024-04-17", "2024-04-18", "2024-04-19", "2024-04-20", "2024-04-21", "2024-04-22",]);
function init() {
dDeviceOutput(props.label).then((res) => {
console.log(res);
});
}
// 获取产出进度echarts数据
let xData = ref(["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: "实际产量",
name: proxy.tLang('default',"实际产量"),
type: "bar",
tooltip: {
valueFormatter: function (value) {
return value + " 件";
return value + " " + proxy.tLang('messages',"件");
},
},
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],
},
{
name: "产出进度",
name: proxy.tLang('messages',"产出进度"),
type: "line",
yAxisIndex: 1,
tooltip: {
@ -168,15 +164,23 @@ let seriesData = ref([
return value + " %";
},
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3],
data: [2.0, 2.2, 3.3, 15.5, 17.3, 50.2, 90.3],
},
]);
function init() {
if (props.label == GermanyExhibition.lq.label) {
return;
}
dDeviceOutput(props.label).then((res:any) => {
xData.value = res.data.time.reverse();
seriesData.value[0].data = res.data.output.reverse();
seriesData.value[1].data = res.data.outputRate.reverse();
});
}
// 转速
let speed = ref(2000);
let config = ref({
header: ["序号", "类型", "日期", "状态", "操作员编号"], //, '故障率'
header: [proxy.tLang('default',"序号"), proxy.tLang('messages',"type"), proxy.tLang('messages',"日期"), proxy.tLang('default',"状态"), proxy.tLang('messages',"操作员编号")], //, '故障率'
headerBGC: "transparent",
oddRowBGC: "transparent",
evenRowBGC: "transparent",
@ -186,12 +190,12 @@ let config = ref({
rowNum: 5,
waitTime: 3000,
data: [
[1, "保养", "2024-02-10", "完成", "1001"],
[2, "机头保养", "2024-03-14", "完成", "1002"],
[3, "电机保养", "2024-03-25", "完成", "1003"],
[4, "保养", "2024-04-05", "完成", "1001"],
[5, "机头保养", "2024-04-08", "完成", "1002"],
[6, "维护", "2024-04-15", "完成", "1001"],
[1, "保养", "2024-02-10", proxy.tLang('messages',"完成"), "1001"],
[2, "机头保养", "2024-03-14", proxy.tLang('messages',"完成"), "1002"],
[3, "电机保养", "2024-03-25", proxy.tLang('messages',"完成"), "1003"],
[4, "保养", "2024-04-05", proxy.tLang('messages',"完成"), "1001"],
[5, "机头保养", "2024-04-08", proxy.tLang('messages',"完成"), "1002"],
[6, "维护", "2024-04-15", proxy.tLang('messages',"完成"), "1001"],
],
});

10
src/views/Exhibition/Germany/components/DynamicChart.vue
View File

@ -14,7 +14,6 @@
import { ref, getCurrentInstance, onMounted, watch } from "vue";
import { useI18n } from "vue-i18n";
let { t } = useI18n();
const prop = defineProps({
xData: {
type: Array,
@ -43,7 +42,7 @@ const setCharts = () => {
},
},
legend: {
data: ["实际产量", "产出进度"],
data: [proxy.tLang('default','实际产量'), proxy.tLang('messages','产出进度')],
textStyle: {
color: "#AEEEFA",
},
@ -64,7 +63,7 @@ const setCharts = () => {
yAxis: [
{
type: "value",
name: "实际产量",
name: proxy.tLang('default','实际产量'),
nameTextStyle: {
color: "#AEEEFA",
fontSize: 12,
@ -84,7 +83,7 @@ const setCharts = () => {
},
{
type: "value",
name: "产出进度",
name: proxy.tLang('messages','产出进度'),
nameTextStyle: {
color: "#AEEEFA",
fontSize: 12,
@ -96,8 +95,7 @@ const setCharts = () => {
},
},
min: 0,
max: 25,
interval: 5,
max: 100,
axisLabel: {
formatter: "{value} %",
fontSize: 12,

27
src/views/Exhibition/Germany/components/PercentChart.vue
View File

@ -13,6 +13,12 @@
import { ref, getCurrentInstance, onMounted, watch } from "vue";
let PChartRef = ref(null);
const { proxy } = getCurrentInstance() as any;
const prop = defineProps({
xData: {
type: Array,
default: [],
},
});
let charts = null;
const setCharts = () => {
charts = proxy.$echarts.init(PChartRef.value, "dark");
@ -20,7 +26,7 @@ const setCharts = () => {
backgroundColor: "transparent",
xAxis: {
type: "category",
data: ["03-05", "03-06", "03-07", " 03-08", "03-09", "03-10", "03-10"],
data: prop.xData,
axisLabel: {
fontSize: 12,
color: "#AEEEFA",
@ -29,7 +35,7 @@ const setCharts = () => {
yAxis: {
type: "value",
name: "合格率",
name: proxy.tLang('messages',"合格率"),
nameTextStyle: {
color: "#AEEEFA",
fontSize: 12,
@ -51,8 +57,8 @@ const setCharts = () => {
},
series: [
{
name: "合格率",
data: [50, 98, 80, 60, 95, 70, 85, 86, 78, 85, 75],
name: proxy.tLang('messages',"合格率"),
data: [50, 98, 80, 60, 95, 70],
type: "line",
smooth: true,
},
@ -60,6 +66,19 @@ const setCharts = () => {
};
charts.setOption(option);
};
watch(
() => prop.xData,
(newVal, oldVal) => {
charts.setOption({
xAxis: {
type: "category",
data: prop.xData,
},
});
},
{ deep: true }
);
onMounted(() => {
setCharts();
});

1
src/views/Exhibition/Germany/components/header2.vue
View File

@ -158,6 +158,7 @@ let AbnormalDataFun = () => {
}
}
};
document.title = props.title;
let noClickAbnormalDataFun = () => {
//该函数执行优先级高于AbnormalDataFun
// 判断弹窗是否打开如果打开并且我点击了非弹窗位置则ctrl为true否则为false

65
src/views/Exhibition/Germany/index.vue
View File

@ -2,44 +2,44 @@
<div class="container">
<div class="header">
<div class="title">
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="tLang('messages','再登机器物联管理系统')" :titleTip="[]"
:typeFun="['time']" :alarmType="[]"></header2>
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="tLang('messages', '再登机器物联管理系统')"
:titleTip="[]" :typeFun="['time']" :alarmType="[]"></header2>
</div>
</div>
<div class="content">
<div class="top-content">
<div class="top-left-content">
<BorderView :title="tLang('messages','冲缝一体机')">
<BorderView :title="tLang('messages', '冲缝一体机')">
<TopLBox :data="cfytj" :warning="warning"></TopLBox>
</BorderView>
</div>
<div class="top-center-content">
{{ props.label }}
<!-- <video controls loop autoplay="true" muted ref="videoElement" width="720">
<source :src="videoUrl" type="video/mp4" />
</video> -->
<video controls loop autoplay="true" muted ref="videoElement" width="720">
<source :src="videoUrl" type="video/mp4" />
</video>
</div>
<div class="top-right-content">
<BorderView :title="tLang('messages','工业缝纫机')">
<BorderView :title="tLang('messages', '工业缝纫机')">
<TopRBox :data="gyfrj"></TopRBox>
</BorderView>
</div>
</div>
<div class="bottom-content">
<div class="bottom-left-content">
<BorderView :title="tLang('messages','立切180双喷')">
<BorderView :title="tLang('messages', '立切180双喷')">
<BottomLBox :data="lq"></BottomLBox>
</BorderView>
</div>
<div class="bottom-center-content">
<BorderView :title="tLang('messages','设备稼动率')">
<BorderView :title="tLang('messages', '设备稼动率')">
<BottomCBox :data="bar"></BottomCBox>
</BorderView>
</div>
<div class="bottom-right-content">
<BorderView :title="tLang('messages','产出进度')">
<BorderView :title="tLang('messages', '产出进度')">
<BottomRBox :data="pie"></BottomRBox>
</BorderView>
</div>
@ -49,24 +49,24 @@
<div class="left-tip-type">
<div class="left-tip-type-item">
<div class="yuan green"></div>
<div class="left-tip-type-item-text">{{tLang('default','工作')}}</div>
<div class="left-tip-type-item-text">{{ tLang('default', '工作') }}</div>
</div>
<div class="left-tip-type-item">
<div class="yuan yello"></div>
<div class="left-tip-type-item-text">{{tLang('default','待机')}}</div>
<div class="left-tip-type-item-text">{{ tLang('default', '待机') }}</div>
</div>
<div class="left-tip-type-item">
<div class="yuan red"></div>
<div class="left-tip-type-item-text">{{tLang('default','停机')}}</div>
<div class="left-tip-type-item-text">{{ tLang('default', '停机') }}</div>
</div>
</div>
</div>
</template>
<script setup lang='ts'>
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch} from "vue";
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch } from "vue";
import { dDeviceList } from '@/http/Exhibition/Germany'
import { useGermanyExhibition} from '@/store/module/GermanyExhibition'
import { useGermanyExhibition } from '@/store/module/GermanyExhibition'
import BorderView from "./components/Border.vue";
import header2 from "./components/header2.vue";
@ -83,14 +83,16 @@ const props = defineProps<{
}>()
const GermanyExhibition = useGermanyExhibition()
const { proxy } = getCurrentInstance();
let videoUrl = ref('/mic_english.mp4')
//https://d.tufting222.cn/video/yzy/micor_edos_english.mp4
///mic_english.mp4
let videoUrl = ref('https://d.tufting222.cn/video/yzy/micor_edos_english.mp4')
let cfytj = ref({})
let gyfrj = ref({})
let lq = ref({})
let bar = ref({})
let pie = ref([])
let warning = ref(false)
let timer = null
function init() {
dDeviceList().then((res: any) => {
if (res.code == 200) {
@ -126,6 +128,7 @@ function init() {
})
//立切180双喷
} else if (item.label == '104019564') {
item.speed = 0
lq.value = item
GermanyExhibition.set_lq(item)
}
@ -138,7 +141,8 @@ function init() {
})
}
function pie_option(planProduction,production) {
function pie_option(planProduction, production) {
return {
tooltip: {
@ -163,8 +167,8 @@ function pie_option(planProduction,production) {
label: {
show: true,
position: 'center',
formatter: (params) => {
return (production/planProduction*100).toFixed(1) + '%'
formatter: (params) => {
return (production / planProduction * 100).toFixed(1) + '%'
},
color: "#fff",
},
@ -179,13 +183,28 @@ function pie_option(planProduction,production) {
}
watch(() => props.modelValue, (newVal) => {
if (newVal.type == 'WorkingState') {
let { RackNumber, WorkingState,speed } = newVal.msg
console.log(newVal.msg, 'data.value');
let { RackNumber, WorkingState, speed } = newVal.msg
if (RackNumber == GermanyExhibition.cfytj.label) {
GermanyExhibition.cfytj.workingState = WorkingState
GermanyExhibition.cfytj.speed = speed
} else if (RackNumber == GermanyExhibition.gyfrj.label) {
GermanyExhibition.gyfrj.workingState = WorkingState
GermanyExhibition.gyfrj.speed = speed
} else if (RackNumber == GermanyExhibition.lq.label) {
GermanyExhibition.lq.workingState = WorkingState
}
}
})
onMounted(() => {
init()
timer = setInterval(() => {
init()
}, 60000)
})
onUnmounted(() => {
clearInterval(timer)
})
</script>

87
src/views/Exhibition/Germany/loop.vue
View File

@ -1,9 +1,10 @@
<template>
<div class="container">
<div class="container" @dblclick="editLoop">
<ul :style="{ width: `${list.length * 1920}px` }">
<li v-for="(item, index) in list"
:style="{ 'background-color': item.color, transform: `translateX(-${i * 1920}px)` }" :key="index">
<component :is="item.components()" v-model="socketMsg" :label="item.label" v-if="hash.includes(index)">
<component :is="item.components()" v-model="socketMsg" :rxData="rxData" :label="item.label"
v-if="hash.includes(index)">
</component>
</li>
</ul>
@ -12,7 +13,18 @@
<script setup lang='ts'>
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed, defineAsyncComponent } from 'vue'
import { standardTimeD } from '@/http/Exhibition/Germany'
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
import { getStoredLanguage, saveStoredLanguage, languageHash } from "@/utils/languageStorage";
import { ElNotification } from 'element-plus'
import { useRoute } from 'vue-router'
let route = useRoute()
let lang = route.query.lang as string
const { proxy } = getCurrentInstance()
if (lang && languageHash(lang) && languageHash(lang) != getStoredLanguage()) {
saveStoredLanguage(languageHash(lang))
window.location.reload()
}
const Germanyindex = defineAsyncComponent(() =>
import('@/views/Exhibition/Germany/index.vue')
);
@ -20,10 +32,11 @@ const Germanychild = defineAsyncComponent(() =>
import('@/views/Exhibition/Germany/child.vue')
);
let i = ref(0)
let hash = reactive([0,1,2])
let hash = reactive([0])
let socketMsg = ref({})
let timer = null
let time = 60000
let time = 45000
let isloop = ref(true)
// watch(i, (val) => {
// if (val < 0) {
// i.value = 0
@ -41,14 +54,53 @@ let list = reactive([
{ color: '', components: () => Germanychild, label: '1171210' },
{ color: '', components: () => Germanychild, label: '104019564' },
])
//控制轮播
function editLoop() {
isloop.value = !isloop.value
if (isloop.value) {
timer = setInterval(() => {
i.value++
if (i.value > list.length - 1) {
i.value = 0
}
if (!hash.includes(i.value)) {
hash.push(i.value)
}
}, time)
ElNotification({
title: proxy.tLang('messages', '通知'),
message: proxy.tLang('messages', '轮播已开启'),
type: 'success',
})
} else {
clearInterval(timer)
ElNotification({
title: proxy.tLang('messages', '通知'),
message: proxy.tLang('messages', '轮播已关闭'),
type: 'success',
})
}
}
let rxData = ref(["2024-04-16", "2024-04-17", "2024-04-18", "2024-04-19", "2024-04-20", "2024-04-21", "2024-04-22",]);
function getStandardTimeD() {
standardTimeD().then((res: any) => {
rxData.value = res.data;
});
}
function getWebsocket(val) {
try {
let data = JSON.parse(val)
socketMsg.value = data
// if (data.type == 'SwitchBigScreen') {
// i.value = data.msg
// }
if (data.type == 'WorkingState') {
socketMsg.value = data
}
} catch (err) {
console.log(err);
@ -59,15 +111,16 @@ function errWebsocket(val) {
// console.log(val);
}
onMounted(() => {
// setInterval(() => {
// i.value++
// if (i.value > list.length - 1) {
// i.value = 0
// }
// if (!hash.includes(i.value)) {
// hash.push(i.value)
// }
// }, time)
getStandardTimeD()
timer = setInterval(() => {
i.value++
if (i.value > list.length - 1) {
i.value = 0
}
if (!hash.includes(i.value)) {
hash.push(i.value)
}
}, time)
connectWebsocket(null, null, getWebsocket, errWebsocket)
})
onUnmounted(() => {