Merge branch 'master' of https://codeup.aliyun.com/645deca397d94d909e439238/iotplatform_sourcecode/screenFront into rule
This commit is contained in:
hzz
commit
d2075072c9
31
package-lock.json
generated
31
package-lock.json
generated
@ -9,6 +9,7 @@
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
||||
"@iamzzg/data-view": "^2.10.0",
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"@tweenjs/tween.js": "^19.0.0",
|
||||
"axios": "^1.3.2",
|
||||
@ -1785,6 +1786,15 @@
|
||||
"@hapi/hoek": "^9.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@iamzzg/data-view": {
|
||||
"version": "2.10.0",
|
||||
"resolved": "https://registry.npmmirror.com/@iamzzg/data-view/-/data-view-2.10.0.tgz",
|
||||
"integrity": "sha512-UafIJaEqHIgEC+8CaEL0qQxG34JsgKOc13RkYjlupOIAoELNkWXCrYN89xOP+RkSreBTpgaTEt43PfW4EMMjcQ==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"@jiaminghi/charts": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@intlify/core-base": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.2.2.tgz",
|
||||
@ -4050,9 +4060,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001449",
|
||||
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001449.tgz",
|
||||
"integrity": "sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw==",
|
||||
"version": "1.0.30001532",
|
||||
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001532.tgz",
|
||||
"integrity": "sha512-FbDFnNat3nMnrROzqrsg314zhqN5LGQ1kyyMk2opcrwGbVGpHRhgCWtAgD5YJUqNAiQ+dklreil/c3Qf1dfCTw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/case-sensitive-paths-webpack-plugin": {
|
||||
@ -13390,6 +13400,15 @@
|
||||
"@hapi/hoek": "^9.0.0"
|
||||
}
|
||||
},
|
||||
"@iamzzg/data-view": {
|
||||
"version": "2.10.0",
|
||||
"resolved": "https://registry.npmmirror.com/@iamzzg/data-view/-/data-view-2.10.0.tgz",
|
||||
"integrity": "sha512-UafIJaEqHIgEC+8CaEL0qQxG34JsgKOc13RkYjlupOIAoELNkWXCrYN89xOP+RkSreBTpgaTEt43PfW4EMMjcQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"@jiaminghi/charts": "*"
|
||||
}
|
||||
},
|
||||
"@intlify/core-base": {
|
||||
"version": "9.2.2",
|
||||
"resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.2.2.tgz",
|
||||
@ -15280,9 +15299,9 @@
|
||||
}
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001449",
|
||||
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001449.tgz",
|
||||
"integrity": "sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw==",
|
||||
"version": "1.0.30001532",
|
||||
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001532.tgz",
|
||||
"integrity": "sha512-FbDFnNat3nMnrROzqrsg314zhqN5LGQ1kyyMk2opcrwGbVGpHRhgCWtAgD5YJUqNAiQ+dklreil/c3Qf1dfCTw==",
|
||||
"dev": true
|
||||
},
|
||||
"case-sensitive-paths-webpack-plugin": {
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
||||
"@iamzzg/data-view": "^2.10.0",
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"@tweenjs/tween.js": "^19.0.0",
|
||||
"axios": "^1.3.2",
|
||||
|
||||
@ -18,7 +18,7 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
import echarts from '@/utils/echarts'
|
||||
import {createPinia} from 'pinia'
|
||||
// import DataV, { setClassNamePrefix } from '@dataview/datav-vue3';
|
||||
import dataV from '@jiaminghi/data-view'
|
||||
import dataV from "@iamzzg/data-view/dist/vue3/datav.map.vue.esm";
|
||||
import './registerServiceWorker'
|
||||
import router from './router'
|
||||
import i18n from './locales'
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import { reactive, ref, watch,onMounted } from "vue";
|
||||
import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
|
||||
import { useRoute,useRouter } from "vue-router";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
@ -43,11 +43,9 @@ watch(
|
||||
|
||||
//动态更新echarts
|
||||
if(newVal.devInfo.progress){
|
||||
|
||||
|
||||
config.value=JSON.parse(newVal.devInfo.progress)
|
||||
}
|
||||
progress.value.updateRows(config)
|
||||
progress.value.mergeConfig()
|
||||
|
||||
},
|
||||
{ deep: true, flush: "post" }
|
||||
@ -55,11 +53,11 @@ watch(
|
||||
let comeBackFun=()=>{
|
||||
router.go(-1)
|
||||
}
|
||||
let config = {
|
||||
let config = reactive({
|
||||
value: 0,
|
||||
colors: ["#01c4f9", "#c135ff"],
|
||||
borderWidth: 3,
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -58,7 +58,34 @@ let refborder2 = ref();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const listdata = reactive<devListType>({});
|
||||
const listdata = reactive<devListType>({
|
||||
header:[
|
||||
t('messages.SerialNum'),
|
||||
t('messages.RackNum'),
|
||||
t('messages.productName'),
|
||||
t('messages.ofLegion'),
|
||||
t('messages.产品状态'),
|
||||
t('messages.DebugProgress'),
|
||||
t('messages.deliveryDay'),
|
||||
],
|
||||
headerBGC: "#3469F3",
|
||||
oddRowBGC: "#100C2A",
|
||||
evenRowBGC: "#100C2A",
|
||||
rowNum: 10,
|
||||
waitTime: 3000,
|
||||
carousel: "page",
|
||||
hoverPause: true,
|
||||
align: [
|
||||
"center",
|
||||
"center",
|
||||
"center",
|
||||
"center",
|
||||
"center",
|
||||
"center",
|
||||
"center",
|
||||
],
|
||||
columnWidth: [60, 130, 400, 100, 100],
|
||||
});
|
||||
let severdata = reactive([]); //暂存
|
||||
//弹窗显示与隐藏
|
||||
let visible = ref(false);
|
||||
@ -72,6 +99,7 @@ const devlistSize = reactive({
|
||||
});
|
||||
|
||||
const setData = (val: any) => {
|
||||
|
||||
let data = [];
|
||||
val.forEach((res) => {
|
||||
data.push([
|
||||
@ -84,33 +112,7 @@ const setData = (val: any) => {
|
||||
res.deliveryDate,
|
||||
]);
|
||||
});
|
||||
listdata.header = [
|
||||
t('messages.SerialNum'),
|
||||
t('messages.RackNum'),
|
||||
t('messages.productName'),
|
||||
t('messages.ofLegion'),
|
||||
t('messages.产品状态'),
|
||||
t('messages.DebugProgress'),
|
||||
t('messages.deliveryDay'),
|
||||
];
|
||||
listdata.data = data;
|
||||
listdata.headerBGC = "#3469F3";
|
||||
listdata.oddRowBGC = "#100C2A";
|
||||
listdata.evenRowBGC = "#100C2A";
|
||||
listdata.rowNum = 10;
|
||||
listdata.waitTime = 3000;
|
||||
listdata.carousel = "page";
|
||||
listdata.hoverPause = true;
|
||||
listdata.align = [
|
||||
"center",
|
||||
"center",
|
||||
"center",
|
||||
"center",
|
||||
"center",
|
||||
"center",
|
||||
"center",
|
||||
];
|
||||
listdata.columnWidth = [60, 130, 400, 100, 100];
|
||||
severdata = val;
|
||||
devList.value.updateRows(listdata.data, {
|
||||
headerBGC: "#00BAFF",
|
||||
|
||||
83
src/views/MicroExhibition/component/Border.vue
Normal file
83
src/views/MicroExhibition/component/Border.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="newboder">
|
||||
<!-- <img class="borderpng" src="" alt=""> -->
|
||||
<div class="title">
|
||||
<text class="title-text">{{ title }}</text>
|
||||
<div class="hr"></div>
|
||||
</div>
|
||||
|
||||
<div class="newboder-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { computed } from 'vue'
|
||||
let prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '裁剪设备'
|
||||
}
|
||||
})
|
||||
|
||||
// let newTitle = computed(() => {
|
||||
// return prop.title.split('').join(' ')
|
||||
// })
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.newboder {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background: url(./../images/border.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.borderpng {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 16%;
|
||||
text-align: left;
|
||||
font-family: "华文新魏", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
color: rgba(0, 255, 255, 0.996078431372549);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.hr {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: url(./../images/hr.png) no-repeat;
|
||||
background-position: 50%;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
margin-left: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.newboder-content {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
131
src/views/MicroExhibition/component/BottomBorder.vue
Normal file
131
src/views/MicroExhibition/component/BottomBorder.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<!--
|
||||
* @Author: hzz hzz
|
||||
* @Date: 2023-12-06 09:29:01
|
||||
* @LastEditors: hzz hzz
|
||||
* @LastEditTime: 2023-12-06 13:43:37
|
||||
* @FilePath: \screenFront\src\views\MicroExhibition\component\BottomBorder.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) 2023 by ${hzz}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="rbottom-container">
|
||||
<div class="rbottom-title">后整设备</div>
|
||||
<div class="rbottom-content">
|
||||
<div class="rbottom-bg" v-for="i in 5">
|
||||
<div class="dev-name">自动烫裤机</div>
|
||||
<div class="dev-progress">
|
||||
<div class="ele-progress">
|
||||
<el-progress :percentage="50" :show-text="false" :stroke-width="13">
|
||||
</el-progress>
|
||||
</div>
|
||||
|
||||
<div>50%</div>
|
||||
</div>
|
||||
<div class="dev-status">
|
||||
<div class="status1">编号：2</div>
|
||||
<div class="status2">状态：运行</div>
|
||||
</div>
|
||||
<div class="dev-status">
|
||||
工作时长：2小时
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rbottom-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rbottom-title {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
text-align: left;
|
||||
font-size: 28px;
|
||||
font-family: "华文新魏", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #00fffffe;
|
||||
}
|
||||
|
||||
.rbottom-content {
|
||||
width: 100%;
|
||||
height: 225px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rbottom-bg {
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
background: url('./../images/bottom_border1.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #AEEEFAFE;
|
||||
font-family: "微软雅黑 Bold", "微软雅黑", sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
.dev-name {
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.dev-progress {
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
.ele-progress {
|
||||
width: 80% !important;
|
||||
}
|
||||
|
||||
.dev-status {
|
||||
width: 100%;
|
||||
height: 25%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.status1 {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.status2 {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
112
src/views/MicroExhibition/component/Header.vue
Normal file
112
src/views/MicroExhibition/component/Header.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<!--
|
||||
* @Author: hzz hzz
|
||||
* @Date: 2023-12-05 13:38:58
|
||||
* @LastEditors: hzz hzz
|
||||
* @LastEditTime: 2023-12-05 14:49:17
|
||||
* @FilePath: \screenFront\src\views\MicroExhibition\component\Header.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) 2023 by ${hzz}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="headerbg" :style="prop.wh">
|
||||
<span>{{ prop.title }}</span>
|
||||
<div class="left-tip-type">
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan green"></div>
|
||||
<div class="left-tip-type-item-text">工作</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan yello"></div>
|
||||
<div class="left-tip-type-item-text">待机</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan red"></div>
|
||||
<div class="left-tip-type-item-text">停机</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
|
||||
const prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '标题'
|
||||
},
|
||||
wh: {
|
||||
type: Object,
|
||||
default: {
|
||||
width: '100%',
|
||||
height: '100px'
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.headerbg {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: url('./../images/header.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-family: "华文新魏", sans-serif;
|
||||
}
|
||||
|
||||
.headerbg span {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 40px;
|
||||
color: rgba(0, 255, 255, 0.996078431372549);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.left-tip-type {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 462px;
|
||||
width: 160px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.left-tip-type-item {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.yuan {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #7CFFB2;
|
||||
}
|
||||
|
||||
.yello {
|
||||
background-color: #FDDD60;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #FF6E76;
|
||||
}
|
||||
</style>
|
||||
74
src/views/MicroExhibition/component/ScrollBoard.vue
Normal file
74
src/views/MicroExhibition/component/ScrollBoard.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="ScrollBoard-container">
|
||||
<ZdScrollBoard ref="devList" class="dev-list" :config="config" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import ZdScrollBoard from "@/components/data-view/index.vue";
|
||||
const prop = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: {
|
||||
list:[],
|
||||
rowNum: 3,
|
||||
}
|
||||
}
|
||||
})
|
||||
const devList = ref(null);
|
||||
let config = reactive({
|
||||
header: [
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">序号</span>',
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">设备名称</span>',
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">编号</span>',
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">状态</span>',
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">稼动率</span>',
|
||||
'<span style="color:#AEEEFAFE;font-size:18px;">工作时长</span>',
|
||||
],//, '故障率'
|
||||
headerBGC: 'rgba(0, 11, 18, 1)',
|
||||
oddRowBGC: '#000F1D',
|
||||
evenRowBGC: '#000F1D',
|
||||
wrap: [false, false, false, false, false],
|
||||
columnWidth: [80, 240, 85, 80, 110,145],
|
||||
align: ['center', 'center', 'center', 'center', 'center', 'center'],
|
||||
rowNum: prop.data.rowNum,
|
||||
waitTime: 3000,
|
||||
})
|
||||
const handleData = () => {
|
||||
|
||||
let updateList = prop.data.list.map((items: any) => {
|
||||
return items.map((item: any, index: number) => {
|
||||
if (index == (items.length - 3)) {
|
||||
return statusHtml(status_color[item])
|
||||
}
|
||||
return item
|
||||
})
|
||||
})
|
||||
devList.value.updateRows(updateList,config)
|
||||
}
|
||||
watch(()=>prop.data, (newVal, oldVal) => {
|
||||
|
||||
handleData()
|
||||
},{deep:true}
|
||||
)
|
||||
const status_color = {
|
||||
'0': '#FF6E76',
|
||||
'1': '#FDDD60',
|
||||
'2': '#7CFFB2',
|
||||
'3': '#FDDD60',
|
||||
}
|
||||
let statusHtml = (color) => {
|
||||
return `<div style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;"><div style="width:24px;height:24px;border-radius: 50%;background-color:${color}"></div></div>`
|
||||
// return `<div style="display: inline-block;width:20px;height:20px;border-radius: 50%;background-color:${color}"></div>`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ScrollBoard-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
71
src/views/MicroExhibition/component/StepItem.vue
Normal file
71
src/views/MicroExhibition/component/StepItem.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<!--
|
||||
* @Author: hzz hzz
|
||||
* @Date: 2023-12-06 08:05:31
|
||||
* @LastEditors: hzz hzz
|
||||
* @LastEditTime: 2023-12-06 08:28:40
|
||||
* @FilePath: \screenFront\src\views\MicroExhibition\component\StepItem.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) 2023 by ${hzz}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="stepContainer">
|
||||
<div class="step-top">{{ prop.data.name }}</div>
|
||||
<div class="step-bottom">
|
||||
<div class="step-total">总数：{{ prop.data.total }}台</div>
|
||||
<div class="step-online">在线：{{ prop.data.total }}台</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
const prop = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: {
|
||||
name: '裁剪',
|
||||
total: 0,
|
||||
online: 0,
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stepContainer {
|
||||
width: 170px;
|
||||
height: 88px;
|
||||
background: url('./../images/step_item.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-family: "华文新魏", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.step-top {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
color: #00FFFF;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.step-bottom {
|
||||
width: 100%;
|
||||
height: 51px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.step-online {
|
||||
color: #7CFfB2FE;
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/MicroExhibition/images/border.png
Normal file
BIN
src/views/MicroExhibition/images/border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
src/views/MicroExhibition/images/bottom_border.png
Normal file
BIN
src/views/MicroExhibition/images/bottom_border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/views/MicroExhibition/images/bottom_border1.png
Normal file
BIN
src/views/MicroExhibition/images/bottom_border1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/views/MicroExhibition/images/header.png
Normal file
BIN
src/views/MicroExhibition/images/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/views/MicroExhibition/images/hr.png
Normal file
BIN
src/views/MicroExhibition/images/hr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
src/views/MicroExhibition/images/step_item.png
Normal file
BIN
src/views/MicroExhibition/images/step_item.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
@ -1,179 +1,110 @@
|
||||
<!--
|
||||
* @Author: hzz hzz
|
||||
* @Date: 2023-12-05 13:30:45
|
||||
* @LastEditors: hzz hzz
|
||||
* @LastEditTime: 2023-12-06 15:17:05
|
||||
* @FilePath: \screenFront\src\views\MicroExhibition\index.vue
|
||||
* @Description:
|
||||
*
|
||||
* Copyright (c) 2023 by ${hzz}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备工况物联系统'" :titleTip="[]"
|
||||
:typeFun="['time']" :alarmType="[]"></header2>
|
||||
<Header :title="'富怡服装微工厂物联管理平台'" :wh="{ width: '100%', height: '100px' }"></Header>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="lt">
|
||||
<NewBoder :title="'裁剪设备'">
|
||||
<DevCard :dev_title="dev_caijian_title" :dev_value="store.caijian.value">
|
||||
<BarChart style="width: 100%;height: 100%;" :xData="store.caijian.chart.xData"
|
||||
:seriesData="store.caijian.chart.series"></BarChart>
|
||||
</DevCard>
|
||||
</NewBoder>
|
||||
<div class="ltop">
|
||||
<BoardVue :title="'裁剪设备'"></BoardVue>
|
||||
</div>
|
||||
<div class="lb">
|
||||
<NewBoder :title="'缝中设备'">
|
||||
<BoardBar :data="store.fengzhong.value" :xData="store.fengzhong.chart.xData"
|
||||
:seriesData="store.fengzhong.chart.series"></BoardBar>
|
||||
</NewBoder>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="ct">
|
||||
<div class="top-item">
|
||||
<h2>设备在线</h2>
|
||||
<div class="div_p" style="color: #ff9e5b;font-size: 40px;">
|
||||
<div class="dev-top" style="color: #7CFFB2;">{{ store.devnum.on + store.devnum.wait }}</div>
|
||||
<div class="dev-center"></div>
|
||||
<div class="dev-bottom">{{ store.devnum.all }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<h2>网关状态</h2>
|
||||
<div class="div_p" style="transform: translate(0px, 10px);">
|
||||
<i :class="true
|
||||
? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan on'
|
||||
: 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan off'
|
||||
"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cc">
|
||||
<NewBoder :title="'设备状态总览'">
|
||||
<ringChart :data="ringData"></ringChart>
|
||||
</NewBoder>
|
||||
</div>
|
||||
<div class="cb">
|
||||
<NewBoder :title="'版房设备'">
|
||||
<BoardBar :data="store.banfang.value" :xData="store.banfang.chart.xData"
|
||||
:seriesData="store.banfang.chart.series"></BoardBar>
|
||||
</NewBoder>
|
||||
<div class="lbottom">
|
||||
<BoardVue :title="'缝前设备'">
|
||||
<ScrollBoard :data="fqdata"></ScrollBoard>
|
||||
</BoardVue>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rt">
|
||||
<NewBoder :title="'一次性拖鞋自动生产线'">
|
||||
<DevCard :dev_title="dev_tuoxie_title" :dev_value="store.tuoxie.value">
|
||||
<BarChart style="width: 100%;height: 100%;" :xData="store.tuoxie.chart.xData"
|
||||
:seriesData="store.tuoxie.chart.series"></BarChart>
|
||||
</DevCard>
|
||||
</NewBoder>
|
||||
<div class="rtop">
|
||||
<div class="rtleft">
|
||||
<div class="rtltop">
|
||||
<StepItem v-for="i in 4"></StepItem>
|
||||
</div>
|
||||
<div class="rtlbottom">
|
||||
<video controls loop autoplay="true" width="777">
|
||||
<source src="https://tjgoa.oss-cn-beijing.aliyuncs.com/20230914%E5%BE%AE%E5%B7%A5%E5%8E%82%E5%AE%A3%E4%BC%A0%E8%A7%86%E9%A2%91%E4%BA%8E%E6%89%BF%E5%BF%97.mp4"
|
||||
type="video/mp4" />
|
||||
</video>
|
||||
<!-- <video class="video"
|
||||
src="https://tjgoa.oss-cn-beijing.aliyuncs.com/20230914%E5%BE%AE%E5%B7%A5%E5%8E%82%E5%AE%A3%E4%BC%A0%E8%A7%86%E9%A2%91%E4%BA%8E%E6%89%BF%E5%BF%97.mp4"
|
||||
autoplay></video> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="rtright">
|
||||
<BoardVue :title="'缝中设备'">
|
||||
<ScrollBoard :data="fzdata"></ScrollBoard>
|
||||
</BoardVue>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rb">
|
||||
<NewBoder :title="'座椅面套生产线'">
|
||||
<BoardBar :data="store.zuoyi.value" :xData="store.zuoyi.chart.xData"
|
||||
:seriesData="store.zuoyi.chart.series"></BoardBar>
|
||||
</NewBoder>
|
||||
<div class="rbottom">
|
||||
<BottomBorder></BottomBorder>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-tip-type">
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan green"></div>
|
||||
<div class="left-tip-type-item-text">工作</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan yello"></div>
|
||||
<div class="left-tip-type-item-text">待机</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan red"></div>
|
||||
<div class="left-tip-type-item-text">停机</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-tip-type">
|
||||
<div class="right-tip-type-item blue">
|
||||
<div class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan gatway"></div>
|
||||
<div class="left-tip-type-item-text">在 线</div>
|
||||
</div>
|
||||
<div class="right-tip-type-item err">
|
||||
<div class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan gatway"></div>
|
||||
<div class="left-tip-type-item-text">离 线</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap"></div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import header2 from './components/header2.vue'
|
||||
import NewBoder from './components/NewBoder.vue';
|
||||
import DevCard from "./components/DevCard.vue";
|
||||
import BarChart from './components/BarChart.vue'
|
||||
import ringChart from "./components/ringChart.vue";
|
||||
import BoardBar from "./components/BoardBar.vue";
|
||||
import Header from './component/Header.vue'
|
||||
import BoardVue from './component/Border.vue'
|
||||
import StepItem from './component/StepItem.vue'
|
||||
import BottomBorder from './component/BottomBorder.vue'
|
||||
import ScrollBoard from './component/ScrollBoard.vue'
|
||||
|
||||
import { getTopDevice, getCismaList } from '@/http/cisma'
|
||||
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
|
||||
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed, reactive } from 'vue'
|
||||
import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
|
||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let { t } = useI18n();
|
||||
const store = useMicroExhibitionStore()
|
||||
let ringData = computed(() => {
|
||||
return [
|
||||
{ name: '工作', value: store.devnum.on },
|
||||
{ name: '停机', value: store.devnum.off },
|
||||
{ name: '待机', value: store.devnum.wait },
|
||||
]
|
||||
let fqdata = ref({
|
||||
list: [],
|
||||
rowNum: 3,
|
||||
})
|
||||
let timer = null
|
||||
let dev_caijian_title = ['设备名称', '设备编码','完成率', '稼动率', '状态']
|
||||
let dev_tuoxie_title = ['设备编码','完成率', '稼动率', '状态']
|
||||
let dev_value = [
|
||||
['全自动针梭两用铺布机', '待机', '40层', '1'],
|
||||
['全自动9公分电脑裁床', '待机', '40层', '0'],
|
||||
]
|
||||
let fzdata = ref({
|
||||
list: [],
|
||||
rowNum: 10,
|
||||
})
|
||||
let listdata = reactive([])
|
||||
let list = [
|
||||
[1, '自动缝纫机', 29, 1, '95%', '12min'],
|
||||
[1, '自动缝纫机', 29, 1, '95%', '12min'],
|
||||
[1, '自动缝纫机', 29, 1, '95%', '12min'],
|
||||
[1, '自动缝纫机', 29, 1, '95%', '12min'],
|
||||
[1, '自动缝纫机', 29, 1, '95%', '12min'],]
|
||||
setTimeout(() => {
|
||||
fqdata.value.list.push(...list)
|
||||
fzdata.value.list.push(...[...list, ...list, ...list])
|
||||
}, 1000);
|
||||
|
||||
|
||||
let throttle_timer = null
|
||||
function throttle (fn, delay = 300) {
|
||||
if(throttle_timer == null){
|
||||
throttle_timer = setTimeout(() => {
|
||||
fn()
|
||||
|
||||
clearTimeout(throttle_timer)
|
||||
throttle_timer = null
|
||||
}, delay);
|
||||
}
|
||||
}
|
||||
|
||||
async function getTopDeviceData() {
|
||||
let res = await getTopDevice() as any
|
||||
if (res.code === 200) {
|
||||
store.setbanfang(res.data.版房设备)
|
||||
store.setcaijian(res.data.裁剪设备)
|
||||
store.setfengzhong(res.data.缝中设备)
|
||||
store.settuoxie(res.data.拖鞋自动生产线)
|
||||
store.setzuoyi(res.data.座椅面套生产线)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
async function getCismaListData() {
|
||||
let res = await getCismaList() as any
|
||||
if (res.code === 200) {
|
||||
store.setDevnum(res.data.devnum)
|
||||
}
|
||||
}
|
||||
|
||||
function getWebsocket(val) {
|
||||
try {
|
||||
let data = JSON.parse(val)
|
||||
|
||||
|
||||
if (data.type == 'StateChart') {
|
||||
store.setDevnum(data.msg)
|
||||
}
|
||||
if (data.type == 'WorkingState') {
|
||||
store.changestatus(data.msg)
|
||||
}
|
||||
// if (data.type == 'StateChart') {
|
||||
// store.setDevnum(data.msg)
|
||||
// }
|
||||
// if (data.type == 'WorkingState') {
|
||||
// store.changestatus(data.msg)
|
||||
// }
|
||||
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
@ -185,20 +116,13 @@ function errWebsocket(val) {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getTopDeviceData()
|
||||
getCismaListData()
|
||||
timer = setInterval(()=>{
|
||||
getTopDeviceData()
|
||||
},5000)
|
||||
connectWebsocket(null, null, getWebsocket, errWebsocket)
|
||||
document.getElementById('app').style.backgroundColor = '#0E0E0E'
|
||||
document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer)
|
||||
|
||||
closeWebsocket()
|
||||
document.getElementById('app').style.backgroundColor = '#100c2a'
|
||||
document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -208,7 +132,7 @@ onUnmounted(() => {
|
||||
height: 1080px;
|
||||
width: 1920px;
|
||||
color: #FFFFFF;
|
||||
background-color: #0E0E0E;
|
||||
background-color: rgba(0, 11, 18, 1);
|
||||
position: relative;
|
||||
|
||||
}
|
||||
@ -228,199 +152,89 @@ onUnmounted(() => {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.left,
|
||||
.left {
|
||||
width: 540px;
|
||||
height: 100%;
|
||||
margin-left: 13px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ltop {
|
||||
width: 100%;
|
||||
height: 630px;
|
||||
}
|
||||
|
||||
.lbottom {
|
||||
width: 100%;
|
||||
height: 335px;
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 980px;
|
||||
width: 600px;
|
||||
width: 1330px;
|
||||
height: 100%;
|
||||
margin-right: 13px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 670px;
|
||||
height: 980px;
|
||||
margin: 0 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.lt,
|
||||
.rt {
|
||||
.rtop {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.lb,
|
||||
.rb {
|
||||
width: 100%;
|
||||
height: 530px;
|
||||
}
|
||||
|
||||
.ct {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
height: 715px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cc {
|
||||
.rbottom {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.cb {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.top-item {
|
||||
width: 30%;
|
||||
.rtleft {
|
||||
width: 777px;
|
||||
height: 100%;
|
||||
background-image: url(@/assets/img/u8.png);
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-item .div_p {
|
||||
height: 60%;
|
||||
.rtltop {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rtlbottom {
|
||||
width: 100%;
|
||||
height: 580px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
/* background-image: url('./images/border.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px; */
|
||||
}
|
||||
|
||||
.div_p .div-p-tip {
|
||||
position: absolute;
|
||||
font-size: 1.5rem;
|
||||
top: 10%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
/* color: #fff; */
|
||||
font-size: 18px;
|
||||
line-height: 1.5rem;
|
||||
color: #02C1D7;
|
||||
}
|
||||
|
||||
.on {
|
||||
color: #20AEC5;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
.off {
|
||||
color: #797979;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
.left-tip-type {
|
||||
position: absolute;
|
||||
top: 69px;
|
||||
left: 462px;
|
||||
width: 160px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.left-tip-type-item {
|
||||
width: 33%;
|
||||
.rtlbottom .video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
.yuan {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #7CFFB2;
|
||||
}
|
||||
|
||||
.yello {
|
||||
background-color: #FDDD60;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #FF6E76;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #20AEC5;
|
||||
}
|
||||
|
||||
.err {
|
||||
color: #FF6E76;
|
||||
}
|
||||
|
||||
.right-tip-type {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 1550px;
|
||||
width: 120px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right-tip-type-item {
|
||||
width: 58px;
|
||||
.rtright {
|
||||
width: 540px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gatway {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
|
||||
.wrap {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 582px;
|
||||
width: 537px;
|
||||
border-bottom: 0px solid transparent;
|
||||
border-top: 92px solid #0E1D2F;
|
||||
border-left: 109px solid transparent;
|
||||
border-right: 110px solid transparent;
|
||||
}
|
||||
|
||||
.dev-center {
|
||||
width: 3px;
|
||||
height: 60px;
|
||||
background-image: linear-gradient(to bottom, #2869E8, #00D0FF);
|
||||
background-color: #5067BC;
|
||||
transform: rotate(40deg) translate(7px, -6px);
|
||||
}
|
||||
|
||||
.dev-top {
|
||||
transform: translate(-6px, -10px);
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.dev-bottom {
|
||||
transform: translate(15px, 15px);
|
||||
font-size: 30px;
|
||||
}
|
||||
.left-tip-type-item-text {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
426
src/views/MicroExhibition/indexOld.vue
Normal file
426
src/views/MicroExhibition/indexOld.vue
Normal file
@ -0,0 +1,426 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备工况物联系统'" :titleTip="[]"
|
||||
:typeFun="['time']" :alarmType="[]"></header2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="lt">
|
||||
<NewBoder :title="'裁剪设备'">
|
||||
<DevCard :dev_title="dev_caijian_title" :dev_value="store.caijian.value">
|
||||
<BarChart style="width: 100%;height: 100%;" :xData="store.caijian.chart.xData"
|
||||
:seriesData="store.caijian.chart.series"></BarChart>
|
||||
</DevCard>
|
||||
</NewBoder>
|
||||
</div>
|
||||
<div class="lb">
|
||||
<NewBoder :title="'缝中设备'">
|
||||
<BoardBar :data="store.fengzhong.value" :xData="store.fengzhong.chart.xData"
|
||||
:seriesData="store.fengzhong.chart.series"></BoardBar>
|
||||
</NewBoder>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="ct">
|
||||
<div class="top-item">
|
||||
<h2>设备在线</h2>
|
||||
<div class="div_p" style="color: #ff9e5b;font-size: 40px;">
|
||||
<div class="dev-top" style="color: #7CFFB2;">{{ store.devnum.on + store.devnum.wait }}</div>
|
||||
<div class="dev-center"></div>
|
||||
<div class="dev-bottom">{{ store.devnum.all }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<h2>网关状态</h2>
|
||||
<div class="div_p" style="transform: translate(0px, 10px);">
|
||||
<i :class="true
|
||||
? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan on'
|
||||
: 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan off'
|
||||
"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cc">
|
||||
<NewBoder :title="'设备状态总览'">
|
||||
<ringChart :data="ringData"></ringChart>
|
||||
</NewBoder>
|
||||
</div>
|
||||
<div class="cb">
|
||||
<NewBoder :title="'版房设备'">
|
||||
<BoardBar :data="store.banfang.value" :xData="store.banfang.chart.xData"
|
||||
:seriesData="store.banfang.chart.series"></BoardBar>
|
||||
</NewBoder>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rt">
|
||||
<NewBoder :title="'一次性拖鞋自动生产线'">
|
||||
<DevCard :dev_title="dev_tuoxie_title" :dev_value="store.tuoxie.value">
|
||||
<BarChart style="width: 100%;height: 100%;" :xData="store.tuoxie.chart.xData"
|
||||
:seriesData="store.tuoxie.chart.series"></BarChart>
|
||||
</DevCard>
|
||||
</NewBoder>
|
||||
</div>
|
||||
<div class="rb">
|
||||
<NewBoder :title="'座椅面套生产线'">
|
||||
<BoardBar :data="store.zuoyi.value" :xData="store.zuoyi.chart.xData"
|
||||
:seriesData="store.zuoyi.chart.series"></BoardBar>
|
||||
</NewBoder>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-tip-type">
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan green"></div>
|
||||
<div class="left-tip-type-item-text">工作</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan yello"></div>
|
||||
<div class="left-tip-type-item-text">待机</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<div class="yuan red"></div>
|
||||
<div class="left-tip-type-item-text">停机</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-tip-type">
|
||||
<div class="right-tip-type-item blue">
|
||||
<div class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan gatway"></div>
|
||||
<div class="left-tip-type-item-text">在 线</div>
|
||||
</div>
|
||||
<div class="right-tip-type-item err">
|
||||
<div class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan gatway"></div>
|
||||
<div class="left-tip-type-item-text">离 线</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import header2 from './components/header2.vue'
|
||||
import NewBoder from './components/NewBoder.vue';
|
||||
import DevCard from "./components/DevCard.vue";
|
||||
import BarChart from './components/BarChart.vue'
|
||||
import ringChart from "./components/ringChart.vue";
|
||||
import BoardBar from "./components/BoardBar.vue";
|
||||
|
||||
import { getTopDevice, getCismaList } from '@/http/cisma'
|
||||
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
|
||||
import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
|
||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let { t } = useI18n();
|
||||
const store = useMicroExhibitionStore()
|
||||
let ringData = computed(() => {
|
||||
return [
|
||||
{ name: '工作', value: store.devnum.on },
|
||||
{ name: '停机', value: store.devnum.off },
|
||||
{ name: '待机', value: store.devnum.wait },
|
||||
]
|
||||
})
|
||||
let timer = null
|
||||
let dev_caijian_title = ['设备名称', '设备编码','完成率', '稼动率', '状态']
|
||||
let dev_tuoxie_title = ['设备编码','完成率', '稼动率', '状态']
|
||||
let dev_value = [
|
||||
['全自动针梭两用铺布机', '待机', '40层', '1'],
|
||||
['全自动9公分电脑裁床', '待机', '40层', '0'],
|
||||
]
|
||||
|
||||
|
||||
let throttle_timer = null
|
||||
function throttle (fn, delay = 300) {
|
||||
if(throttle_timer == null){
|
||||
throttle_timer = setTimeout(() => {
|
||||
fn()
|
||||
|
||||
clearTimeout(throttle_timer)
|
||||
throttle_timer = null
|
||||
}, delay);
|
||||
}
|
||||
}
|
||||
|
||||
async function getTopDeviceData() {
|
||||
let res = await getTopDevice() as any
|
||||
if (res.code === 200) {
|
||||
store.setbanfang(res.data.版房设备)
|
||||
store.setcaijian(res.data.裁剪设备)
|
||||
store.setfengzhong(res.data.缝中设备)
|
||||
store.settuoxie(res.data.拖鞋自动生产线)
|
||||
store.setzuoyi(res.data.座椅面套生产线)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
async function getCismaListData() {
|
||||
let res = await getCismaList() as any
|
||||
if (res.code === 200) {
|
||||
store.setDevnum(res.data.devnum)
|
||||
}
|
||||
}
|
||||
|
||||
function getWebsocket(val) {
|
||||
try {
|
||||
let data = JSON.parse(val)
|
||||
|
||||
|
||||
if (data.type == 'StateChart') {
|
||||
store.setDevnum(data.msg)
|
||||
}
|
||||
if (data.type == 'WorkingState') {
|
||||
store.changestatus(data.msg)
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
}
|
||||
function errWebsocket(val) {
|
||||
// console.log(val);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getTopDeviceData()
|
||||
getCismaListData()
|
||||
timer = setInterval(()=>{
|
||||
getTopDeviceData()
|
||||
},5000)
|
||||
connectWebsocket(null, null, getWebsocket, errWebsocket)
|
||||
document.getElementById('app').style.backgroundColor = '#0E0E0E'
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer)
|
||||
|
||||
closeWebsocket()
|
||||
document.getElementById('app').style.backgroundColor = '#100c2a'
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
height: 1080px;
|
||||
width: 1920px;
|
||||
color: #FFFFFF;
|
||||
background-color: #0E0E0E;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 100px;
|
||||
width: 1920px;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 980px;
|
||||
width: 1920px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
height: 980px;
|
||||
width: 600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 670px;
|
||||
height: 980px;
|
||||
margin: 0 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.lt,
|
||||
.rt {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.lb,
|
||||
.rb {
|
||||
width: 100%;
|
||||
height: 530px;
|
||||
}
|
||||
|
||||
.ct {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.cc {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.cb {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.top-item {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background-image: url(@/assets/img/u8.png);
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.top-item .div_p {
|
||||
height: 60%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.div_p .div-p-tip {
|
||||
position: absolute;
|
||||
font-size: 1.5rem;
|
||||
top: 10%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
/* color: #fff; */
|
||||
font-size: 18px;
|
||||
line-height: 1.5rem;
|
||||
color: #02C1D7;
|
||||
}
|
||||
|
||||
.on {
|
||||
color: #20AEC5;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
.off {
|
||||
color: #797979;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
.left-tip-type {
|
||||
position: absolute;
|
||||
top: 69px;
|
||||
left: 462px;
|
||||
width: 160px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.left-tip-type-item {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.yuan {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #7CFFB2;
|
||||
}
|
||||
|
||||
.yello {
|
||||
background-color: #FDDD60;
|
||||
}
|
||||
|
||||
.red {
|
||||
background-color: #FF6E76;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #20AEC5;
|
||||
}
|
||||
|
||||
.err {
|
||||
color: #FF6E76;
|
||||
}
|
||||
|
||||
.right-tip-type {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 1550px;
|
||||
width: 120px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right-tip-type-item {
|
||||
width: 58px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gatway {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
|
||||
.wrap {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 582px;
|
||||
width: 537px;
|
||||
border-bottom: 0px solid transparent;
|
||||
border-top: 92px solid #0E1D2F;
|
||||
border-left: 109px solid transparent;
|
||||
border-right: 110px solid transparent;
|
||||
}
|
||||
|
||||
.dev-center {
|
||||
width: 3px;
|
||||
height: 60px;
|
||||
background-image: linear-gradient(to bottom, #2869E8, #00D0FF);
|
||||
background-color: #5067BC;
|
||||
transform: rotate(40deg) translate(7px, -6px);
|
||||
}
|
||||
|
||||
.dev-top {
|
||||
transform: translate(-6px, -10px);
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.dev-bottom {
|
||||
transform: translate(15px, 15px);
|
||||
font-size: 30px;
|
||||
}
|
||||
.left-tip-type-item-text {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@ -1,24 +1,24 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="box-title">{{t('messages.LegionDevList')}}</div>
|
||||
<div class="box-title">{{ t('messages.LegionDevList') }}</div>
|
||||
<div class="box-body">
|
||||
<dv-scroll-board ref="devList" :config="prop.config" @mouseover="dvMouseover" @mouseend="dvmouseleave"
|
||||
@click="dvClick" :style="{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}" />
|
||||
<el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click" popper-class="tooltip-class"
|
||||
virtual-triggering :virtual-ref="triggerRef" />
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}" />
|
||||
<el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click"
|
||||
popper-class="tooltip-class" virtual-triggering :virtual-ref="triggerRef" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { getCurrentInstance, onMounted, reactive, ref, defineProps } from "vue";
|
||||
import { getCurrentInstance, onMounted, reactive, ref, defineProps, watch } from "vue";
|
||||
import { devListType } from "@/type/InPlantProducts";
|
||||
import { useRouter } from "vue-router"
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let {t} = useI18n();
|
||||
let { t } = useI18n();
|
||||
const prop = defineProps({
|
||||
config: Object,
|
||||
severdata: Array
|
||||
@ -30,7 +30,7 @@ let tipcontent = ref(null)
|
||||
let visible = ref(false)
|
||||
//存储弹窗dom
|
||||
let triggerRef = ref(null)
|
||||
|
||||
let devList = ref()
|
||||
/**
|
||||
* @函数功能: 鼠标移入组件方法
|
||||
* @param {*} value
|
||||
@ -38,13 +38,26 @@ let triggerRef = ref(null)
|
||||
* @函数备注:
|
||||
*/
|
||||
const dvMouseover = (value) => {
|
||||
if (value.toElement && value.toElement.innerHTML&&value.toElement.className == 'ceil') {
|
||||
if (value.toElement && value.toElement.innerHTML && value.toElement.className == 'ceil') {
|
||||
triggerRef.value = value.toElement
|
||||
tipcontent.value = value.toElement.innerText
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
watch(() => prop.config, (newVal, oldVal) => {
|
||||
devList.value.updateRows(newVal.data, {
|
||||
header: [t('messages.SerialNum'), t('messages.productName'), t('messages.model'), t('messages.RackNum'), t('messages.type'), t('messages.InstallPhase'), t('messages.产品状态'), t('messages.AssemblyGroup'), t('messages.electronicGroup'), t('messages.inspector'), t('messages.deliveryDay')],
|
||||
headerBGC: 'rgb(52, 105, 243)',
|
||||
oddRowBGC: '#100c2a',
|
||||
evenRowBGC: '#100c2a',
|
||||
rowNum: 10,
|
||||
columnWidth: [80, 170, 120, 120, 120, 120, 120, 120, 120, 100, 130],
|
||||
align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center']
|
||||
});
|
||||
}, { deep: true, flush: 'post' })
|
||||
|
||||
/**
|
||||
* @函数功能: 鼠标移出组件方法
|
||||
* @出口参数:
|
||||
@ -59,7 +72,7 @@ const dvmouseleave = () => {
|
||||
const dvClick = (value) => {
|
||||
|
||||
if (value.row) {
|
||||
prop.severdata.forEach((res:any) => {
|
||||
prop.severdata.forEach((res: any) => {
|
||||
if (res.index == value.row[0]) {
|
||||
router.push({
|
||||
name: "devItem",
|
||||
@ -108,7 +121,7 @@ const dvClick = (value) => {
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-popper.tooltip-class{
|
||||
.el-popper.tooltip-class {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user