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){ export function dDeviceOutput(label:string){
return get('/screen/cisma/dDeviceOutput?s='+label) 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)", "稼动率说明": "Utilization rate (actual working time/actual boot time)",
"已完成":"Completed", "已完成":"Completed",
"未完成":"Uncompleted", "未完成":"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":{ "default":{
'年': 'Year', '年': 'Year',

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

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

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

@ -8,26 +8,67 @@
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved. * 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
*/ */
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import {Names} from '@/store/storeName' import { Names } from '@/store/storeName'
export const useGermanyExhibition = defineStore(Names.GermanyExhibition,{ export const useGermanyExhibition = defineStore(Names.GermanyExhibition, {
state:()=>{ state: () => {
return{ return {
cfytj:{}, cfytj: {
gyfrj:{}, "id": "5f4000d0-bb4d-11ee-bf45-cf357b830191",
lq:{} "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:{ actions: {
set_cfytj(data:any){ set_cfytj(data: any) {
this.cfytj = data this.cfytj = data
}, },
set_gyfrj(data:any){ set_gyfrj(data: any) {
this.gyfrj = data this.gyfrj = data
}, },
set_lq(data:any){ set_lq(data: any) {
this.lq = data this.lq = data
} }
} }

6
src/utils/devSever.ts
View File

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

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

@ -10,26 +10,26 @@
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<div class="title"> <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> :typeFun="['time', 'comback']" :alarmType="[]"></header2>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div class="left"> <div class="left">
<div class="detail"> <div class="detail">
<BorderView :title="'设备信息'"> <BorderView :title="tLang('messages','DevInfo')">
<DevInfo :data="device_data" :imgSrc="getImgSrc"></DevInfo> <DevInfo :data="device_data" :imgSrc="getImgSrc"></DevInfo>
</BorderView> </BorderView>
</div> </div>
<div class="yield"> <div class="yield">
<BorderView :title="'产出进度'"> <BorderView :title="tLang('messages','产出进度')">
<DynamicChart style="width: 100%; height: 100%" :xData="xData" :seriesData="seriesData"></DynamicChart> <DynamicChart style="width: 100%; height: 100%" :xData="xData" :seriesData="seriesData"></DynamicChart>
</BorderView> </BorderView>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<div class="speed"> <div class="speed">
<BorderView :title="'工作速度'"> <BorderView :title="tLang('messages','工作速度')">
<div class="box-lt"> <div class="box-lt">
<div class="pie"> <div class="pie">
<span>{{ dev_list.speed }}</span> <span>{{ dev_list.speed }}</span>
@ -39,12 +39,12 @@
</BorderView> </BorderView>
</div> </div>
<div class="percent"> <div class="percent">
<BorderView :title="'产品合格率'"> <BorderView :title="tLang('messages','产品合格率')">
<PercentChart style="width: 100%; height: 100%"></PercentChart> <PercentChart style="width: 100%; height: 100%" :xData="props.rxData"></PercentChart>
</BorderView> </BorderView>
</div> </div>
<div class="history"> <div class="history">
<BorderView :title="'维保信息'"> <BorderView :title="tLang('messages','维保信息')">
<ZdScrollBoard ref="devList" class="dev-list" :config="config" /> <ZdScrollBoard ref="devList" class="dev-list" :config="config" />
</BorderView> </BorderView>
</div> </div>
@ -83,6 +83,7 @@ const GermanyExhibition = useGermanyExhibition();
const props = defineProps<{ const props = defineProps<{
modelValue: any; modelValue: any;
label: string; label: string;
rxData: any;
}>(); }>();
// 设备信息 // 设备信息
let dev_list = computed(()=>{ let dev_list = computed(()=>{
@ -102,7 +103,7 @@ let device_data = computed(() => {
if (props.label == '1171210') { if (props.label == '1171210') {
dev_data = GermanyExhibition.cfytj dev_data = GermanyExhibition.cfytj
dev_arr = [ 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.patternCount },
{ key: proxy.tLang('messages', '当前针数'), value: dev_data.currentCount }, { key: proxy.tLang('messages', '当前针数'), value: dev_data.currentCount },
{ key: proxy.tLang('messages', '花样名称'), value: dev_data.fileName }, { key: proxy.tLang('messages', '花样名称'), value: dev_data.fileName },
@ -124,9 +125,9 @@ let device_data = computed(() => {
let object_data = [ let object_data = [
{ key: proxy.tLang('messages', 'DevName'), value: dev_data.name, value_style: { fontSize: "20px" } }, { key: proxy.tLang('messages', 'DevName'), value: dev_data.name, value_style: { fontSize: "20px" } },
{ key: proxy.tLang('messages', 'RackNum'), value: dev_data.label }, { 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: proxy.tLang('messages', 'DevStatus'), value: dev_data.workingState },
{ key: "工作人员", value: "张--" }, { key: proxy.tLang('messages',"工作人员"), value: "1001" },
]; ];
object_data.push(...dev_arr) object_data.push(...dev_arr)
return object_data; return object_data;
@ -139,28 +140,23 @@ let getImgSrc = computed(() => {
}; };
return imgSrc[props.label]; 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数据 // 获取产出进度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([ let seriesData = ref([
{ {
name: "实际产量", name: proxy.tLang('default',"实际产量"),
type: "bar", type: "bar",
tooltip: { tooltip: {
valueFormatter: function (value) { 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], data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],
}, },
{ {
name: "产出进度", name: proxy.tLang('messages',"产出进度"),
type: "line", type: "line",
yAxisIndex: 1, yAxisIndex: 1,
tooltip: { tooltip: {
@ -168,15 +164,23 @@ let seriesData = ref([
return value + " %"; 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({ let config = ref({
header: ["序号", "类型", "日期", "状态", "操作员编号"], //, '故障率' header: [proxy.tLang('default',"序号"), proxy.tLang('messages',"type"), proxy.tLang('messages',"日期"), proxy.tLang('default',"状态"), proxy.tLang('messages',"操作员编号")], //, '故障率'
headerBGC: "transparent", headerBGC: "transparent",
oddRowBGC: "transparent", oddRowBGC: "transparent",
evenRowBGC: "transparent", evenRowBGC: "transparent",
@ -186,12 +190,12 @@ let config = ref({
rowNum: 5, rowNum: 5,
waitTime: 3000, waitTime: 3000,
data: [ data: [
[1, "保养", "2024-02-10", "完成", "1001"], [1, "保养", "2024-02-10", proxy.tLang('messages',"完成"), "1001"],
[2, "机头保养", "2024-03-14", "完成", "1002"], [2, "机头保养", "2024-03-14", proxy.tLang('messages',"完成"), "1002"],
[3, "电机保养", "2024-03-25", "完成", "1003"], [3, "电机保养", "2024-03-25", proxy.tLang('messages',"完成"), "1003"],
[4, "保养", "2024-04-05", "完成", "1001"], [4, "保养", "2024-04-05", proxy.tLang('messages',"完成"), "1001"],
[5, "机头保养", "2024-04-08", "完成", "1002"], [5, "机头保养", "2024-04-08", proxy.tLang('messages',"完成"), "1002"],
[6, "维护", "2024-04-15", "完成", "1001"], [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 { ref, getCurrentInstance, onMounted, watch } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
let { t } = useI18n(); let { t } = useI18n();
const prop = defineProps({ const prop = defineProps({
xData: { xData: {
type: Array, type: Array,
@ -43,7 +42,7 @@ const setCharts = () => {
}, },
}, },
legend: { legend: {
data: ["实际产量", "产出进度"], data: [proxy.tLang('default','实际产量'), proxy.tLang('messages','产出进度')],
textStyle: { textStyle: {
color: "#AEEEFA", color: "#AEEEFA",
}, },
@ -64,7 +63,7 @@ const setCharts = () => {
yAxis: [ yAxis: [
{ {
type: "value", type: "value",
name: "实际产量", name: proxy.tLang('default','实际产量'),
nameTextStyle: { nameTextStyle: {
color: "#AEEEFA", color: "#AEEEFA",
fontSize: 12, fontSize: 12,
@ -84,7 +83,7 @@ const setCharts = () => {
}, },
{ {
type: "value", type: "value",
name: "产出进度", name: proxy.tLang('messages','产出进度'),
nameTextStyle: { nameTextStyle: {
color: "#AEEEFA", color: "#AEEEFA",
fontSize: 12, fontSize: 12,
@ -96,8 +95,7 @@ const setCharts = () => {
}, },
}, },
min: 0, min: 0,
max: 25, max: 100,
interval: 5,
axisLabel: { axisLabel: {
formatter: "{value} %", formatter: "{value} %",
fontSize: 12, fontSize: 12,

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

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

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

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

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

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

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

@ -1,9 +1,10 @@
<template> <template>
<div class="container"> <div class="container" @dblclick="editLoop">
<ul :style="{ width: `${list.length * 1920}px` }"> <ul :style="{ width: `${list.length * 1920}px` }">
<li v-for="(item, index) in list" <li v-for="(item, index) in list"
:style="{ 'background-color': item.color, transform: `translateX(-${i * 1920}px)` }" :key="index"> :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> </component>
</li> </li>
</ul> </ul>
@ -12,7 +13,18 @@
<script setup lang='ts'> <script setup lang='ts'>
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed, defineAsyncComponent } from 'vue' 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 { 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(() => const Germanyindex = defineAsyncComponent(() =>
import('@/views/Exhibition/Germany/index.vue') import('@/views/Exhibition/Germany/index.vue')
); );
@ -20,10 +32,11 @@ const Germanychild = defineAsyncComponent(() =>
import('@/views/Exhibition/Germany/child.vue') import('@/views/Exhibition/Germany/child.vue')
); );
let i = ref(0) let i = ref(0)
let hash = reactive([0,1,2]) let hash = reactive([0])
let socketMsg = ref({}) let socketMsg = ref({})
let timer = null let timer = null
let time = 60000 let time = 45000
let isloop = ref(true)
// watch(i, (val) => { // watch(i, (val) => {
// if (val < 0) { // if (val < 0) {
// i.value = 0 // i.value = 0
@ -41,14 +54,53 @@ let list = reactive([
{ color: '', components: () => Germanychild, label: '1171210' }, { color: '', components: () => Germanychild, label: '1171210' },
{ color: '', components: () => Germanychild, label: '104019564' }, { 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) { function getWebsocket(val) {
try { try {
let data = JSON.parse(val) let data = JSON.parse(val)
if (data.type == 'WorkingState') {
socketMsg.value = data socketMsg.value = data
// if (data.type == 'SwitchBigScreen') { }
// i.value = data.msg
// }
} catch (err) { } catch (err) {
console.log(err); console.log(err);
@ -59,15 +111,16 @@ function errWebsocket(val) {
// console.log(val); // console.log(val);
} }
onMounted(() => { onMounted(() => {
// setInterval(() => { getStandardTimeD()
// i.value++ timer = setInterval(() => {
// if (i.value > list.length - 1) { i.value++
// i.value = 0 if (i.value > list.length - 1) {
// } i.value = 0
// if (!hash.includes(i.value)) { }
// hash.push(i.value) if (!hash.includes(i.value)) {
// } hash.push(i.value)
// }, time) }
}, time)
connectWebsocket(null, null, getWebsocket, errWebsocket) connectWebsocket(null, null, getWebsocket, errWebsocket)
}) })
onUnmounted(() => { onUnmounted(() => {