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

upodate

Browse Source
This commit is contained in:
hzz 2024-04-19 16:58:35 +08:00
parent d8897a3a6f
commit 69cc789fd6
11 changed files with 300 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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)
}

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

@ -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',

34
src/store/module/GermanyExhibition.ts Normal file
View File

@ -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
}
}
})

1
src/store/storeName.ts
View File

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

4
src/utils/devSever.ts
View File

@ -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 production={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://192.168.1.128:9018/",imgxhr:process.env.VUE_APP_BASE_API}
//拼接图片url路径
export function imgurlAddXhr(img){
let src=null

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

@ -10,15 +10,8 @@
<div class="container">
<div class="header">
<div class="title">
<header2
ref="headerref"
:width="'100%'"
:height="'100px'"
:title="'再登工况物联管理系统'"
:titleTip="[]"
:typeFun="['time', 'comback']"
:alarmType="[]"
></header2>
<header2 ref="headerref" :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
style="width: 100%; height: 100%"
:xData="xData"
:seriesData="seriesData"
></DynamicChart>
<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>rpm/min</span>
<span>{{ dev_list.speed }}</span>
<span>rpm</span>
</div>
</div>
</BorderView>
@ -79,58 +68,86 @@
</template>
<script setup lang="ts">
import {
ref,
reactive,
onMounted,
onUnmounted,
getCurrentInstance,
watch,
onUpdated,
computed,
} from "vue";
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, computed, } from "vue";
import { dDeviceOutput } from "@/http/Exhibition/Germany";
import { useGermanyExhibition } from '@/store/module/GermanyExhibition'
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([
{ key: "设备名称", value: "冲缝一体机", value_style: { fontSize: "20px" } },
{ key: proxy.tLang('messages','RackNum'), value: "1171210#" },
{ key: "工作人员", value: "张--" },
{ key: proxy.tLang('messages','DevStatus'), value: "1" },
{ key: "稼动率", value: "30%" },
{ key: proxy.tLang('messages','花样名称'), value: "0.7盾牌" },
let dev_list = computed(()=>{
let dev_data: any = {}
if (props.label == '1171210') {
dev_data = GermanyExhibition.cfytj
} else if (props.label == 'RP2401009') {
dev_data = GermanyExhibition.gyfrj
} 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: "断线次数", value: "0次" },
{ key: proxy.tLang('messages','当前针数'), value: "100针" },
]);
{ key: proxy.tLang('messages', '花样总针数'), value: dev_data.patternCount },
{ key: proxy.tLang('messages', '当前针数'), value: dev_data.currentCount },
{ 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"),
工业缝纫机: require("./images/cfytj.png"),
'1171210': 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([
"2024-04-15",
"2024-04-16",
"2024-04-17",
"2024-04-18",
"2024-04-19",
"2024-04-20",
"2024-04-21",
]);
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: "实际产量",
@ -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;
width: 160px;
left: 427px;
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%;

9
src/views/Exhibition/Germany/components/TopLBox.vue
View File

@ -28,8 +28,7 @@
</template>
<script setup lang='ts'>
import { de } from 'element-plus/es/locale';
import { ref, getCurrentInstance } from 'vue'
import { ref, getCurrentInstance,computed } 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>

37
src/views/Exhibition/Germany/components/TopRBox.vue
View File

@ -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) {
return props.data?.consumption;
}
formatter: 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%;
div {
margin-left: 20px;
}
width: 35%;
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 {

65
src/views/Exhibition/Germany/components/devinfo.vue
View File

@ -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
class="status"
v-if="index == 3"
:style="{ background: status_color[item.value] }"
></div>
<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);
}

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

@ -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 (data.type == 'WorkingState') {
let { RackNumber, WorkingState } = data.msg
console.log(data.value, 'data.value');
if (newVal.type == 'WorkingState') {
let { RackNumber, WorkingState,speed } = newVal.msg
console.log(newVal.msg, 'data.value');
}
})
@ -259,9 +270,9 @@ onMounted(() => {
.left-tip-type {
position: absolute;
top: 50px;
left: 462px;
width: 160px;
top: 45px;
left: 413px;
width: 200px;
height: 50px;
display: flex;
justify-content: space-between;

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

@ -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)` }"
:key="index"
>
<component :is="item.components()" v-model="socketMsg" :label="item.label" v-if="hash.includes(index)"></component>
: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>
</li>
</ul>
</div>
@ -20,22 +19,22 @@ const Germanyindex = defineAsyncComponent(() =>
const Germanychild = defineAsyncComponent(() =>
import('@/views/Exhibition/Germany/child.vue')
);
let i = ref(0)
let hash = [0]
let i = ref(1)
let hash = reactive([0,1,2])
let socketMsg = ref({})
let timer = null
let time = 60000
watch(i, (val) => {
if (val < 0) {
i.value = 0
}
if (val > list.length - 1) {
i.value = list.length - 1
}
if (!hash.includes(i.value)) {
hash.push(i.value)
}
})
// watch(i, (val) => {
// if (val < 0) {
// i.value = 0
// }
// if (val > list.length - 1) {
// i.value = list.length - 1
// }
// if (!hash.includes(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)
})