update
This commit is contained in:
hzz
commit
a8f0deb7aa
@ -160,6 +160,8 @@ let props = defineProps<{
|
|||||||
typeFun: any[];
|
typeFun: any[];
|
||||||
alarmType: any[];
|
alarmType: any[];
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
|
window.document.title = props.title;
|
||||||
const typeObj = reactive({
|
const typeObj = reactive({
|
||||||
comback: false,
|
comback: false,
|
||||||
AbnormalData: false,
|
AbnormalData: false,
|
||||||
@ -541,7 +543,7 @@ h1 {
|
|||||||
}
|
}
|
||||||
.time {
|
.time {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 20rem;
|
width: 350px;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
bottom: 30%;
|
bottom: 30%;
|
||||||
left: 4.2rem;
|
left: 4.2rem;
|
||||||
|
|||||||
@ -295,6 +295,7 @@ export default {
|
|||||||
'进水':'进水',
|
'进水':'进水',
|
||||||
'出水':'出水',
|
'出水':'出水',
|
||||||
'消耗':'消耗',
|
'消耗':'消耗',
|
||||||
|
'储水':'储水',
|
||||||
'用电':'用电',
|
'用电':'用电',
|
||||||
'总体趋势图':'总体趋势图',
|
'总体趋势图':'总体趋势图',
|
||||||
'近一周':'Last Week',
|
'近一周':'Last Week',
|
||||||
|
|||||||
@ -295,6 +295,7 @@ export default {
|
|||||||
'进水':'进水',
|
'进水':'进水',
|
||||||
'出水':'出水',
|
'出水':'出水',
|
||||||
'消耗':'消耗',
|
'消耗':'消耗',
|
||||||
|
'储水':'储水',
|
||||||
'用电':'用电',
|
'用电':'用电',
|
||||||
'总体趋势图':'总体趋势图',
|
'总体趋势图':'总体趋势图',
|
||||||
'近一周':'近一周',
|
'近一周':'近一周',
|
||||||
|
|||||||
@ -269,7 +269,6 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/MicroExhibitionTable",
|
path: "/MicroExhibitionTable",
|
||||||
@ -281,6 +280,16 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
name: "Hazardous",
|
name: "Hazardous",
|
||||||
component: () => import("../views/Hazardous/index.vue"),
|
component: () => import("../views/Hazardous/index.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/stuffCrownBlock",
|
||||||
|
name: "stuffCrownBlock",
|
||||||
|
component: () => import("../views/CrownBlock/stuffCrownBlock/index.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/SewingBift",
|
||||||
|
name: "SewingBift",
|
||||||
|
component: () => import("../views/SewingBift/index.vue"),
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -348,6 +357,7 @@ const router = createRouter({
|
|||||||
routes,
|
routes,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
router.beforeEach(async (to: any, from, next) => {
|
router.beforeEach(async (to: any, from, next) => {
|
||||||
// ...
|
// ...
|
||||||
let address = to.name
|
let address = to.name
|
||||||
@ -380,4 +390,16 @@ router.beforeEach(async (to: any, from, next) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// router.beforeEach(async (to: any, from, next) => {
|
||||||
|
|
||||||
|
// // 返回 false 以取消导航
|
||||||
|
// if (to.path !== "/SewingBift") {
|
||||||
|
|
||||||
|
// return false;
|
||||||
|
// } else {
|
||||||
|
// next();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// })
|
||||||
export default router;
|
export default router;
|
||||||
|
|||||||
@ -72,6 +72,9 @@ export const useSocketStore = defineStore(Names.socketMechanics, {
|
|||||||
"pm10": "7"
|
"pm10": "7"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
pmcq: [
|
||||||
|
{}
|
||||||
|
],
|
||||||
newVerticalNum: [
|
newVerticalNum: [
|
||||||
{
|
{
|
||||||
"type": "TVOC",
|
"type": "TVOC",
|
||||||
|
|||||||
123
src/views/CrownBlock/stuffCrownBlock/index.vue
Normal file
123
src/views/CrownBlock/stuffCrownBlock/index.vue
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
<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="corwn-block ">
|
||||||
|
<div class="content-name">
|
||||||
|
<span class="name">西侧</span>
|
||||||
|
<span class="name">大件车间</span>
|
||||||
|
<span class="name">东侧</span>
|
||||||
|
</div>
|
||||||
|
<div class="block" :style="{right: position + 'px'}"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import {ref, onMounted, onUnmounted} from 'vue'
|
||||||
|
import header2 from '@/components/headerBox/header2.vue'
|
||||||
|
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||||||
|
|
||||||
|
let magn = 0.18;
|
||||||
|
let position = ref(0)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 请求接口
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function getWebsocket(val) {
|
||||||
|
try {
|
||||||
|
let data = JSON.parse(val);
|
||||||
|
|
||||||
|
if (data.type == "ceju") {
|
||||||
|
position.value = data.msg.distance * magn;
|
||||||
|
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function errWebsocket(val) {
|
||||||
|
// console.log(val);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
closeWebsocket();
|
||||||
|
});
|
||||||
|
</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: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.corwn-block {
|
||||||
|
position: relative;
|
||||||
|
width: 1746px;
|
||||||
|
height: 360px;
|
||||||
|
background-color: #666464;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.block {
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
height: 100%;
|
||||||
|
/*背景渐变 */
|
||||||
|
background-image: linear-gradient(to bottom, #c02525, #c14242 40%, #c14242 70%, #c02525 100%);
|
||||||
|
/* 透明度 */
|
||||||
|
opacity: 0.8;
|
||||||
|
top: 0;
|
||||||
|
/* transform: translate(-50%,0); */
|
||||||
|
transition: all 0.5s linear
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-name {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
font-size: 60px;
|
||||||
|
color: #bfa;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -17,10 +17,10 @@
|
|||||||
<div class="img2" :class="prop.config.classArr">
|
<div class="img2" :class="prop.config.classArr">
|
||||||
<img :src="prop.config.image">
|
<img :src="prop.config.image">
|
||||||
</div>
|
</div>
|
||||||
<div class="text2">
|
<!-- <div class="text2">
|
||||||
<div class="text2-l " :class="[prop.config.value == 0?'grey':'green']"></div>
|
<div class="text2-l " :class="[prop.config.value == 0?'grey':'green']"></div>
|
||||||
<div class="text2-r" :class="[prop.config.value == 0?'grey':'green']">{{ prop.config.value == 0?'关闭':'开启' }}</div>
|
<div class="text2-r" :class="[prop.config.value == 0?'grey':'green']">{{ prop.config.value == 0?'关闭':'开启' }}</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div v-if="prop.config.type == 3" class="type3">
|
<div v-if="prop.config.type == 3" class="type3">
|
||||||
<div class="img3">
|
<div class="img3">
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<header2 ref="headerref" :width="'100%'" :height="'150px'" :title="'危废品箱物联检测系统'" :titleTip="titleTip"
|
<header2 ref="headerref" :width="'100%'" :height="'150px'" :title="'危险品柜物联检测系统'" :titleTip="titleTip"
|
||||||
:typeFun="['time']" :alarmType="[]"></header2>
|
:typeFun="['time']" :alarmType="[]"></header2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -94,7 +94,7 @@ const config = reactive({
|
|||||||
type: 1,
|
type: 1,
|
||||||
classArr: [],
|
classArr: [],
|
||||||
value: 0,
|
value: 0,
|
||||||
limit: 80,
|
limit: 120,
|
||||||
unit: '%RH'
|
unit: '%RH'
|
||||||
},
|
},
|
||||||
wendu: {
|
wendu: {
|
||||||
@ -148,7 +148,7 @@ const config = reactive({
|
|||||||
type: 3,
|
type: 3,
|
||||||
classArr: [],
|
classArr: [],
|
||||||
value: 0,
|
value: 0,
|
||||||
limit: 1,
|
limit: 5,
|
||||||
unit: ''
|
unit: ''
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
@ -184,6 +184,10 @@ const getGuoJian24TrendData = async () => {
|
|||||||
config.yanwu.value = data.top.yanwu
|
config.yanwu.value = data.top.yanwu
|
||||||
config.ranqi.value = data.top.ranqi
|
config.ranqi.value = data.top.ranqi
|
||||||
|
|
||||||
|
config.ranqi.limit = data.limit.ranqi
|
||||||
|
config.xielou.limit = data.limit.xielou
|
||||||
|
config.yanwu.limit = data.limit.yanwu
|
||||||
|
|
||||||
calc.math = [
|
calc.math = [
|
||||||
{
|
{
|
||||||
key: '湿度%RH',
|
key: '湿度%RH',
|
||||||
|
|||||||
@ -29,7 +29,7 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="18" class="col-flex"
|
<el-col :span="18" class="col-flex"
|
||||||
style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;">
|
style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;">
|
||||||
<p><span>{{ label.name }} ：</span><span>{{ res.name }}</span></p>
|
<p class="item-name"><span class="item-name-key">{{ label.name }}：</span><span class="item-name-value">{{ res.name }}</span></p>
|
||||||
<p style="margin-top: 10px 0;">
|
<p style="margin-top: 10px 0;">
|
||||||
<span>{{ label.date }}：</span><span>{{ res.date }}</span>
|
<span>{{ label.date }}：</span><span>{{ res.date }}</span>
|
||||||
<span>{{ label.duration }}：</span><span>{{ res.duration }}</span>
|
<span>{{ label.duration }}：</span><span>{{ res.duration }}</span>
|
||||||
@ -49,7 +49,7 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="18" class="col-flex"
|
<el-col :span="18" class="col-flex"
|
||||||
style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;">
|
style="flex-direction: column; font-size: 18px; color: #fff; align-items: flex-start;">
|
||||||
<p><span>{{ label.name }} ：</span><span>{{ res.name }}</span></p>
|
<p class="item-name"><span class="item-name-key">{{ label.name }}：</span><span class="item-name-value">{{ res.name }}</span></p>
|
||||||
<p style="margin-top: 10px 0;">
|
<p style="margin-top: 10px 0;">
|
||||||
<span>{{ label.date }}：</span><span>{{ res.date }}</span>
|
<span>{{ label.date }}：</span><span>{{ res.date }}</span>
|
||||||
<span>{{ label.duration }}：</span><span>{{ res.duration }}</span>
|
<span>{{ label.duration }}：</span><span>{{ res.duration }}</span>
|
||||||
@ -148,7 +148,7 @@ const onSlideChange = (e) => { };
|
|||||||
|
|
||||||
.col-flex {
|
.col-flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -158,5 +158,18 @@ swiper-container {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
display: inline-block !important;
|
display: inline-block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.item-name {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.item-name-key {
|
||||||
|
width: 92px;
|
||||||
|
}
|
||||||
|
.item-name-value {
|
||||||
|
flex: 1;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@ -208,7 +208,7 @@ function setcontentData(val) {
|
|||||||
color: function (params) {
|
color: function (params) {
|
||||||
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
||||||
// console.log(params)
|
// console.log(params)
|
||||||
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc','#4992FF','#7CFFB2','#FDDD60']
|
||||||
// return colors[params.dataIndex];
|
// return colors[params.dataIndex];
|
||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
@ -252,7 +252,7 @@ function setcontentData(val) {
|
|||||||
color: function (params) {
|
color: function (params) {
|
||||||
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
||||||
// console.log(params)
|
// console.log(params)
|
||||||
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc','#4992FF','#7CFFB2','#FDDD60']
|
||||||
// return colors[params.dataIndex];
|
// return colors[params.dataIndex];
|
||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;">
|
<div style="display: flex;justify-content: space-evenly; align-items: center; margin-bottom: 10px;">
|
||||||
<verticalNum ref="verticalNum3" :title="t('messages.flameDetection')"></verticalNum>
|
<!-- <verticalNum ref="verticalNum3" :title="t('messages.flameDetection')"></verticalNum> -->
|
||||||
<verticalNum ref="verticalNum5" :title="t('messages.smokeDetection')"></verticalNum>
|
<verticalNum ref="verticalNum5" :title="t('messages.smokeDetection')"></verticalNum>
|
||||||
<verticalNum ref="verticalNum4" :title="t('messages.noiseDetection')"></verticalNum>
|
<verticalNum ref="verticalNum4" :title="t('messages.noiseDetection')"></verticalNum>
|
||||||
<verticalNum ref="verticalNum6" :title="t('messages.CH2ODetection')"></verticalNum>
|
<verticalNum ref="verticalNum6" :title="t('messages.CH2ODetection')"></verticalNum>
|
||||||
@ -84,7 +84,7 @@ function reset(val: any) {
|
|||||||
const powerBox = (width: any, height: any) => {
|
const powerBox = (width: any, height: any) => {
|
||||||
let a = calcWH(height, width, 1, 24, 0);
|
let a = calcWH(height, width, 1, 24, 0);
|
||||||
//修改高度
|
//修改高度
|
||||||
verticalNum3.value.setchartWH(a.oWidth * 3.42 - 20, a.oHeight - 20)
|
// verticalNum3.value.setchartWH(a.oWidth * 3.42 - 20, a.oHeight - 20)
|
||||||
verticalNum4.value.setchartWH(a.oWidth * 3.42 - 20, a.oHeight - 20)
|
verticalNum4.value.setchartWH(a.oWidth * 3.42 - 20, a.oHeight - 20)
|
||||||
verticalNum5.value.setchartWH(a.oWidth * 3.42 - 20, a.oHeight - 20)
|
verticalNum5.value.setchartWH(a.oWidth * 3.42 - 20, a.oHeight - 20)
|
||||||
verticalNum6.value.setchartWH(a.oWidth * 3.42 - 20, a.oHeight - 20)
|
verticalNum6.value.setchartWH(a.oWidth * 3.42 - 20, a.oHeight - 20)
|
||||||
@ -267,7 +267,7 @@ function setcontentData(val) {
|
|||||||
let noise = val.noise.map((item) => {
|
let noise = val.noise.map((item) => {
|
||||||
return { name: item.name, val: item.data,status:item.status };
|
return { name: item.name, val: item.data,status:item.status };
|
||||||
});
|
});
|
||||||
verticalNum3.value.setData(val.FIRE, 'icon-weibiaoti1', 0, "")
|
// verticalNum3.value.setData(val.FIRE, 'icon-weibiaoti1', 0, "")
|
||||||
verticalNum4.value.setData(noise, 'icon-shengyin', 85, "dB")
|
verticalNum4.value.setData(noise, 'icon-shengyin', 85, "dB")
|
||||||
verticalNum5.value.setData(Smoke, 'icon-yanwubaojingqi', 100, "PPM")
|
verticalNum5.value.setData(Smoke, 'icon-yanwubaojingqi', 100, "PPM")
|
||||||
verticalNum6.value.setData(CH2O, 'icon-app_icons--', 0.08, "mg/m3")
|
verticalNum6.value.setData(CH2O, 'icon-app_icons--', 0.08, "mg/m3")
|
||||||
|
|||||||
@ -206,7 +206,7 @@ function setcontentData(val) {
|
|||||||
color: function (params) {
|
color: function (params) {
|
||||||
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
||||||
// console.log(params)
|
// console.log(params)
|
||||||
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc','#4992FF','#7CFFB2','#FDDD60']
|
||||||
// return colors[params.dataIndex];
|
// return colors[params.dataIndex];
|
||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
@ -249,7 +249,7 @@ function setcontentData(val) {
|
|||||||
color: function (params) {
|
color: function (params) {
|
||||||
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
||||||
// console.log(params)
|
// console.log(params)
|
||||||
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc','#4992FF','#7CFFB2','#FDDD60']
|
||||||
// return colors[params.dataIndex];
|
// return colors[params.dataIndex];
|
||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
|
|||||||
@ -207,7 +207,7 @@ function setcontentData(val) {
|
|||||||
color: function (params) {
|
color: function (params) {
|
||||||
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
||||||
// console.log(params)
|
// console.log(params)
|
||||||
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc','#4992FF','#7CFFB2','#FDDD60']
|
||||||
// return colors[params.dataIndex];
|
// return colors[params.dataIndex];
|
||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
@ -250,7 +250,7 @@ function setcontentData(val) {
|
|||||||
color: function (params) {
|
color: function (params) {
|
||||||
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
||||||
// console.log(params)
|
// console.log(params)
|
||||||
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc','#4992FF','#7CFFB2','#FDDD60']
|
||||||
// return colors[params.dataIndex];
|
// return colors[params.dataIndex];
|
||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
|
|||||||
@ -207,7 +207,7 @@ function setcontentData(val) {
|
|||||||
color: function (params) {
|
color: function (params) {
|
||||||
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
||||||
// console.log(params)
|
// console.log(params)
|
||||||
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc','#4992FF','#7CFFB2','#FDDD60']
|
||||||
// return colors[params.dataIndex];
|
// return colors[params.dataIndex];
|
||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
@ -251,7 +251,7 @@ function setcontentData(val) {
|
|||||||
color: function (params) {
|
color: function (params) {
|
||||||
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
||||||
// console.log(params)
|
// console.log(params)
|
||||||
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc','#4992FF','#7CFFB2','#FDDD60']
|
||||||
// return colors[params.dataIndex];
|
// return colors[params.dataIndex];
|
||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
|
|||||||
@ -207,7 +207,7 @@ function setcontentData(val) {
|
|||||||
color: function (params) {
|
color: function (params) {
|
||||||
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
||||||
// console.log(params)
|
// console.log(params)
|
||||||
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc','#4992FF','#7CFFB2','#FDDD60']
|
||||||
// return colors[params.dataIndex];
|
// return colors[params.dataIndex];
|
||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
@ -251,7 +251,7 @@ function setcontentData(val) {
|
|||||||
color: function (params) {
|
color: function (params) {
|
||||||
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
// 通过返回值的下标一一对应将颜色赋给柱子上，return出去什么颜色就是什么颜色，这里可以写判断
|
||||||
// console.log(params)
|
// console.log(params)
|
||||||
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
let color = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc','#4992FF','#7CFFB2','#FDDD60']
|
||||||
// return colors[params.dataIndex];
|
// return colors[params.dataIndex];
|
||||||
return color[params.dataIndex];
|
return color[params.dataIndex];
|
||||||
}
|
}
|
||||||
|
|||||||
185
src/views/SewingBift/component/swiper.vue
Normal file
185
src/views/SewingBift/component/swiper.vue
Normal file
@ -0,0 +1,185 @@
|
|||||||
|
<!--
|
||||||
|
* @FilePath: \wwwd:\code\screenFront\src\views\MicrofactoryDev\component\swiper.vue
|
||||||
|
* @Author: 王路平
|
||||||
|
* @文件版本: V1.0.0
|
||||||
|
* @Date: 2023-03-10 16:02:29
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||||
|
-->
|
||||||
|
<!--
|
||||||
|
* @FilePath: \daping\src\views\MicrofactoryDev\component\swiper.vue
|
||||||
|
* @Author: 王路平
|
||||||
|
* @文件版本: V1.0.0
|
||||||
|
* @Date: 2023-03-10 16:02:29
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div :style="{ width: boxWH.width, height: boxWH.height }">
|
||||||
|
<div class="boxtop" :key="topkey">
|
||||||
|
<div class="top-item">
|
||||||
|
<div class="div_p" style="color: #3ac541">
|
||||||
|
<i class="iconfont icon-zhengque1 div-p-tip"></i>
|
||||||
|
<h5>{{ devTip.on }} {{t('messages.units')}}</h5>
|
||||||
|
</div>
|
||||||
|
<h2>{{t('messages.DevRunNum')}}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="top-item">
|
||||||
|
<div class="div_p">
|
||||||
|
<i
|
||||||
|
:class="
|
||||||
|
devTip.Status
|
||||||
|
? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan on'
|
||||||
|
: 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan off'
|
||||||
|
"
|
||||||
|
></i>
|
||||||
|
</div>
|
||||||
|
<h2>{{devTip.Status?t('messages.GatewayON'):t('messages.GatewayOff')}}</h2>
|
||||||
|
</div>
|
||||||
|
<div class="top-item">
|
||||||
|
<div class="div_p" style="color: #ff9e5b">
|
||||||
|
<i class="iconfont icon-jinggao div-p-tip"></i>
|
||||||
|
<h5>{{ devTip.off }} {{t('messages.units')}}</h5>
|
||||||
|
</div>
|
||||||
|
<h2>{{t('messages.DevOffNum')}}</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="boxbottom" :key="bottomkey">
|
||||||
|
<swiper-container
|
||||||
|
:slides-per-view="1"
|
||||||
|
:space-between="spaceBetween"
|
||||||
|
effect= "coverflow"
|
||||||
|
:centered-slides="true"
|
||||||
|
:pagination="{
|
||||||
|
hideOnClick: true,
|
||||||
|
}"
|
||||||
|
:autoplay="{
|
||||||
|
delay: 3000,
|
||||||
|
disableOnInteraction:false,
|
||||||
|
}"
|
||||||
|
@progress="onProgress"
|
||||||
|
@slidechange="onSlideChange"
|
||||||
|
>
|
||||||
|
<swiper-slide v-for="res in imageList" :key="res.id">
|
||||||
|
<el-image
|
||||||
|
style="width: 80%; height: 80%"
|
||||||
|
:src="res.image"
|
||||||
|
:fit="'scale-down'"
|
||||||
|
>
|
||||||
|
</el-image>
|
||||||
|
</swiper-slide>
|
||||||
|
</swiper-container>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref } from "vue";
|
||||||
|
import { register } from 'swiper/element/bundle';
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
let {t} = useI18n();
|
||||||
|
register()
|
||||||
|
const spaceBetween = 10;
|
||||||
|
let topkey = ref(0);
|
||||||
|
let bottomkey = ref(0);
|
||||||
|
const devTip = reactive({
|
||||||
|
id: null,
|
||||||
|
Status: null,
|
||||||
|
on: 0,
|
||||||
|
off: 0,
|
||||||
|
});
|
||||||
|
let imageList = reactive(null);
|
||||||
|
const onProgress = (e) => {};
|
||||||
|
|
||||||
|
const onSlideChange = (e) => {};
|
||||||
|
let boxWH = reactive({
|
||||||
|
width: "0px",
|
||||||
|
height: "0px",
|
||||||
|
});
|
||||||
|
function setchartWH(width: any, height: any) {
|
||||||
|
boxWH.height = height + "px";
|
||||||
|
boxWH.width = width + "px";
|
||||||
|
}
|
||||||
|
function changeData(val: any) {
|
||||||
|
devTip.id = val.id;
|
||||||
|
devTip.Status = val.Status;
|
||||||
|
devTip.on = val.on;
|
||||||
|
devTip.off = val.off;
|
||||||
|
topkey.value++;
|
||||||
|
}
|
||||||
|
function changeImagelist(val: any) {
|
||||||
|
let onNull = reactive([]);
|
||||||
|
val.forEach((res) => {
|
||||||
|
if (res.image) {
|
||||||
|
onNull.push(res);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
imageList = onNull;
|
||||||
|
onNull = reactive([]);
|
||||||
|
bottomkey.value++;
|
||||||
|
}
|
||||||
|
defineExpose({
|
||||||
|
setchartWH,
|
||||||
|
changeData,
|
||||||
|
changeImagelist,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import "@/assets/css/iconfont.css";
|
||||||
|
.boxtop {
|
||||||
|
width: 100%;
|
||||||
|
height: 25%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.top-item {
|
||||||
|
width: 30%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url(@/assets/img/u8.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.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%;
|
||||||
|
}
|
||||||
|
.div_p h5 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.on {
|
||||||
|
color: #20AEC5;
|
||||||
|
font-size: 3.5rem;
|
||||||
|
}
|
||||||
|
.off {
|
||||||
|
color: #797979;
|
||||||
|
font-size: 3.5rem;
|
||||||
|
}
|
||||||
|
.boxbottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 75%;
|
||||||
|
/* overflow: hidden; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper, swiper-container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: inline-block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
486
src/views/SewingBift/content/bottom.vue
Normal file
486
src/views/SewingBift/content/bottom.vue
Normal file
@ -0,0 +1,486 @@
|
|||||||
|
<!--
|
||||||
|
* @FilePath: \wwwd:\code\screenFront\src\views\MicrofactoryDev\content\bottom.vue
|
||||||
|
* @Author: 王路平
|
||||||
|
* @文件版本: V1.0.0
|
||||||
|
* @Date: 2023-03-10 10:36:35
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="content-left">
|
||||||
|
<chart
|
||||||
|
:title="presserfoot.title"
|
||||||
|
:option="presserfoot.option"
|
||||||
|
ref="chartref"
|
||||||
|
></chart>
|
||||||
|
<chart
|
||||||
|
:title="Threadtrimming.title"
|
||||||
|
:option="Threadtrimming.option"
|
||||||
|
ref="chartref2"
|
||||||
|
></chart>
|
||||||
|
<chart
|
||||||
|
:title="CropRate.title"
|
||||||
|
:option="CropRate.option"
|
||||||
|
ref="chartref3"
|
||||||
|
></chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref, watch } from "vue";
|
||||||
|
import { calcWH } from "@/components/ts/selfAdaption";
|
||||||
|
import chart from "@/components/assembly/chart.vue";
|
||||||
|
import { useMicrofactoryDevStore } from "@/store/module/MicrofactoryDev";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
let {t} = useI18n();
|
||||||
|
const store = useMicrofactoryDevStore();
|
||||||
|
let props = defineProps<{
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
}>();
|
||||||
|
let chartref = ref(null);
|
||||||
|
let chartref2 = ref(null);
|
||||||
|
let chartref3 = ref(null);
|
||||||
|
let Threadtrimming = reactive({
|
||||||
|
title: "",
|
||||||
|
option: {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "cross",
|
||||||
|
crossStyle: {
|
||||||
|
color: "#999",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
dataView: { show: true, readOnly: false },
|
||||||
|
magicType: { show: true, type: ["line", "bar"] },
|
||||||
|
// restore: {show: true},
|
||||||
|
myreset: {
|
||||||
|
show: true,
|
||||||
|
title: "重置",
|
||||||
|
icon: "path://M300.153441 264.670766L45.877599 355.126598c-14.792777 5.297413-31.084822-2.49878-36.382235-17.291557-5.297413-14.792777 2.49878-31.084822 17.291556-36.382235l254.275842-90.455832c14.792777-5.297413 31.084822 2.49878 36.382236 17.291557 5.297413 14.792777-2.49878 31.184773-17.291557 36.382235z M113.244705 67.966813L64.36857 333.437189c-2.798633 15.392484-17.791313 25.687457-33.183797 22.888824-15.392484-2.798633-25.687457-17.791313-22.888824-33.183797L57.172084 57.67184C59.970717 42.279356 74.963397 31.984383 90.355881 34.882967c15.392484 2.798633 25.687457 17.691362 22.888824 33.083846z M84.958516 744.636408m-24.987799 0a24.987799 24.987799 0 1 0 49.975598 0 24.987799 24.987799 0 1 0-49.975598 0Z M512.749634 0.499756C308.649292 0.499756 132.435334 120.041386 50.275451 292.857003h56.072621C184.409956 148.527477 337.135383 50.475354 512.749634 50.475354c255.075451 0 461.774524 206.699073 461.774524 461.774524s-206.699073 461.774524-461.774524 461.774524c-175.614251 0-328.339678-98.052123-406.401562-242.381649H68.966325v20.989751h-2.998536v2.998536h-3.39834c86.557735 159.821962 255.675159 268.36896 450.180185 268.36896 282.661981 0 511.750122-229.088141 511.750122-511.750122S795.411615 0.499756 512.749634 0.499756z",
|
||||||
|
onclick: (option) => {
|
||||||
|
// console.log(option);
|
||||||
|
changeCuttingLine(store.CuttingLine);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
saveAsImage: { show: true },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(255,255,255,0.9)",
|
||||||
|
},
|
||||||
|
right:'150',
|
||||||
|
data: [t('messages.realityTrimNum'), t('messages.AvgTrimNum'), t('messages.ratio')],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "3%",
|
||||||
|
right: "4%",
|
||||||
|
bottom: "0%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
data: ["暂无数据"],
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
// color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
// interval: 0, //控制X轴刻度全部显示
|
||||||
|
rotate: 45, //倾斜角度
|
||||||
|
},
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
name: "次数",
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value}",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
name: "%",
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value}",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: t('messages.realityTrimNum'),
|
||||||
|
type: "bar",
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
// color: function(params) {
|
||||||
|
// //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
|
||||||
|
// var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
|
||||||
|
// return colorList[params.dataIndex]
|
||||||
|
// }
|
||||||
|
color: "#ca8622",
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: t('messages.AvgTrimNum'),
|
||||||
|
type: "bar",
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: t('messages.ratio'),
|
||||||
|
type: "line",
|
||||||
|
yAxisIndex: 1,
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
let presserfoot = reactive({
|
||||||
|
title: "",
|
||||||
|
option: {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "cross",
|
||||||
|
crossStyle: {
|
||||||
|
color: "#999",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
dataView: { show: true, readOnly: false },
|
||||||
|
magicType: { show: true, type: ["line", "bar"] },
|
||||||
|
myreset: {
|
||||||
|
show: true,
|
||||||
|
title: "重置",
|
||||||
|
icon: "path://M300.153441 264.670766L45.877599 355.126598c-14.792777 5.297413-31.084822-2.49878-36.382235-17.291557-5.297413-14.792777 2.49878-31.084822 17.291556-36.382235l254.275842-90.455832c14.792777-5.297413 31.084822 2.49878 36.382236 17.291557 5.297413 14.792777-2.49878 31.184773-17.291557 36.382235z M113.244705 67.966813L64.36857 333.437189c-2.798633 15.392484-17.791313 25.687457-33.183797 22.888824-15.392484-2.798633-25.687457-17.791313-22.888824-33.183797L57.172084 57.67184C59.970717 42.279356 74.963397 31.984383 90.355881 34.882967c15.392484 2.798633 25.687457 17.691362 22.888824 33.083846z M84.958516 744.636408m-24.987799 0a24.987799 24.987799 0 1 0 49.975598 0 24.987799 24.987799 0 1 0-49.975598 0Z M512.749634 0.499756C308.649292 0.499756 132.435334 120.041386 50.275451 292.857003h56.072621C184.409956 148.527477 337.135383 50.475354 512.749634 50.475354c255.075451 0 461.774524 206.699073 461.774524 461.774524s-206.699073 461.774524-461.774524 461.774524c-175.614251 0-328.339678-98.052123-406.401562-242.381649H68.966325v20.989751h-2.998536v2.998536h-3.39834c86.557735 159.821962 255.675159 268.36896 450.180185 268.36896 282.661981 0 511.750122-229.088141 511.750122-511.750122S795.411615 0.499756 512.749634 0.499756z",
|
||||||
|
onclick: (option) => {
|
||||||
|
// console.log(option);
|
||||||
|
changePresserFoot(store.PresserFoot);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
saveAsImage: { show: true },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(255,255,255,0.9)",
|
||||||
|
},
|
||||||
|
right:'150',
|
||||||
|
data: [t('messages.realityPresserFootLiftNum'), t('messages.AvgPresserFootLiftNum'), t('messages.ratio')],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "3%",
|
||||||
|
right: "4%",
|
||||||
|
bottom: "0%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
data: ["暂无数据"],
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
// color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0, //控制X轴刻度全部显示
|
||||||
|
rotate: 45, //倾斜角度
|
||||||
|
},
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
name: "次数",
|
||||||
|
// min: 1000,
|
||||||
|
// max: 5000,
|
||||||
|
// interval: 1000,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value}",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
name: "%",
|
||||||
|
// min: 0,
|
||||||
|
// max: 100,
|
||||||
|
// interval: 20,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value}",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: t('messages.realityPresserFootLiftNum'),
|
||||||
|
type: "bar",
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
// color: function(params) {
|
||||||
|
// //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
|
||||||
|
// var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
|
||||||
|
// return colorList[params.dataIndex]
|
||||||
|
// }
|
||||||
|
color: "#ca8622",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: t('messages.AvgPresserFootLiftNum'),
|
||||||
|
type: "bar",
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: t('messages.ratio'),
|
||||||
|
type: "line",
|
||||||
|
yAxisIndex: 1,
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
let CropRate = reactive({
|
||||||
|
title: "",
|
||||||
|
option: {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "cross",
|
||||||
|
crossStyle: {
|
||||||
|
color: "#999",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
dataView: { show: true, readOnly: false },
|
||||||
|
magicType: { show: true, type: ["line", "bar"] },
|
||||||
|
myreset: {
|
||||||
|
show: true,
|
||||||
|
title: "重置",
|
||||||
|
icon: "path://M300.153441 264.670766L45.877599 355.126598c-14.792777 5.297413-31.084822-2.49878-36.382235-17.291557-5.297413-14.792777 2.49878-31.084822 17.291556-36.382235l254.275842-90.455832c14.792777-5.297413 31.084822 2.49878 36.382236 17.291557 5.297413 14.792777-2.49878 31.184773-17.291557 36.382235z M113.244705 67.966813L64.36857 333.437189c-2.798633 15.392484-17.791313 25.687457-33.183797 22.888824-15.392484-2.798633-25.687457-17.791313-22.888824-33.183797L57.172084 57.67184C59.970717 42.279356 74.963397 31.984383 90.355881 34.882967c15.392484 2.798633 25.687457 17.691362 22.888824 33.083846z M84.958516 744.636408m-24.987799 0a24.987799 24.987799 0 1 0 49.975598 0 24.987799 24.987799 0 1 0-49.975598 0Z M512.749634 0.499756C308.649292 0.499756 132.435334 120.041386 50.275451 292.857003h56.072621C184.409956 148.527477 337.135383 50.475354 512.749634 50.475354c255.075451 0 461.774524 206.699073 461.774524 461.774524s-206.699073 461.774524-461.774524 461.774524c-175.614251 0-328.339678-98.052123-406.401562-242.381649H68.966325v20.989751h-2.998536v2.998536h-3.39834c86.557735 159.821962 255.675159 268.36896 450.180185 268.36896 282.661981 0 511.750122-229.088141 511.750122-511.750122S795.411615 0.499756 512.749634 0.499756z",
|
||||||
|
onclick: (option) => {
|
||||||
|
// console.log(option);
|
||||||
|
changeActivation(store.Activation);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
saveAsImage: { show: true },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(255,255,255,0.9)",
|
||||||
|
},
|
||||||
|
data: [t('messages.UtilizationRate')],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "3%",
|
||||||
|
right: "4%",
|
||||||
|
bottom: "0%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
data: ["暂无数据"],
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0, //控制X轴刻度全部显示
|
||||||
|
rotate: 45, //倾斜角度
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
// color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
name: "%",
|
||||||
|
axisLabel: {
|
||||||
|
formatter: "{value}",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// type: 'value',
|
||||||
|
// name: '%',
|
||||||
|
// min: 0,
|
||||||
|
// max: 100,
|
||||||
|
// interval: 20,
|
||||||
|
// axisLabel: {
|
||||||
|
// formatter: '{value}'
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: t('messages.UtilizationRate'),
|
||||||
|
type: "bar",
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
// color: function(params) {
|
||||||
|
// //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
|
||||||
|
// var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
|
||||||
|
// return colorList[params.dataIndex]
|
||||||
|
// }
|
||||||
|
color: " #EEEE00",
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
watch(
|
||||||
|
() => props,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
//监听父组件宽高变化，随时重置本组件尺寸
|
||||||
|
reset(newVal);
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true, flush: "post" }
|
||||||
|
);
|
||||||
|
function reset(val: any) {
|
||||||
|
//宽高为0时跳出该方法
|
||||||
|
if (!val.width && !val.height) return;
|
||||||
|
box(val.width, val.height);
|
||||||
|
}
|
||||||
|
const box = (width: any, height: any) => {
|
||||||
|
let a = calcWH(height, width, 1, 3, 0);
|
||||||
|
chartref.value.setchartWH(a.oWidth, a.oHeight);
|
||||||
|
chartref2.value.setchartWH(a.oWidth, a.oHeight);
|
||||||
|
chartref3.value.setchartWH(a.oWidth, a.oHeight);
|
||||||
|
};
|
||||||
|
|
||||||
|
//监听抬压脚
|
||||||
|
watch(
|
||||||
|
() => store.PresserFoot,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
changePresserFoot(newVal);
|
||||||
|
},
|
||||||
|
{ deep: true, flush: "post" }
|
||||||
|
);
|
||||||
|
function changePresserFoot(val: any) {
|
||||||
|
let y = { reality: [], ratio: [], average: [] };
|
||||||
|
let x = [];
|
||||||
|
val.forEach((res) => {
|
||||||
|
x.push(res.name);
|
||||||
|
y.reality.push(res.reality);
|
||||||
|
y.ratio.push(res.ratio);
|
||||||
|
y.average.push(res.average);
|
||||||
|
});
|
||||||
|
presserfoot.option.xAxis[0].data = x;
|
||||||
|
presserfoot.option.series[0].data = y.reality;
|
||||||
|
presserfoot.option.series[1].data = y.average;
|
||||||
|
presserfoot.option.series[2].data = y.ratio;
|
||||||
|
chartref.value.changeData(presserfoot.option);
|
||||||
|
}
|
||||||
|
//监听剪线
|
||||||
|
watch(
|
||||||
|
() => store.CuttingLine,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
changeCuttingLine(newVal);
|
||||||
|
},
|
||||||
|
{ deep: true, flush: "post" }
|
||||||
|
);
|
||||||
|
function changeCuttingLine(val: any) {
|
||||||
|
let y = { reality: [], ratio: [], average: [] };
|
||||||
|
let x = [];
|
||||||
|
val.forEach((res) => {
|
||||||
|
x.push(res.name);
|
||||||
|
y.reality.push(res.reality);
|
||||||
|
y.ratio.push(res.ratio);
|
||||||
|
y.average.push(res.average);
|
||||||
|
});
|
||||||
|
|
||||||
|
Threadtrimming.option.xAxis[0].data = x;
|
||||||
|
Threadtrimming.option.series[0].data = y.reality;
|
||||||
|
Threadtrimming.option.series[1].data = y.average;
|
||||||
|
Threadtrimming.option.series[2].data = y.ratio;
|
||||||
|
chartref2.value.changeData(Threadtrimming.option);
|
||||||
|
}
|
||||||
|
//监听稼动率
|
||||||
|
watch(
|
||||||
|
() => store.Activation,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
changeActivation(newVal);
|
||||||
|
},
|
||||||
|
{ deep: true, flush: "post" }
|
||||||
|
);
|
||||||
|
function changeActivation(val: any) {
|
||||||
|
let y = [];
|
||||||
|
let x = [];
|
||||||
|
val.forEach((res) => {
|
||||||
|
x.push(res.name);
|
||||||
|
y.push(res.activation);
|
||||||
|
});
|
||||||
|
|
||||||
|
CropRate.option.xAxis[0].data = x;
|
||||||
|
CropRate.option.series[0].data = y;
|
||||||
|
chartref3.value.changeData(CropRate.option);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.content-left {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
204
src/views/SewingBift/content/top.vue
Normal file
204
src/views/SewingBift/content/top.vue
Normal file
@ -0,0 +1,204 @@
|
|||||||
|
<!--
|
||||||
|
* @FilePath: \wwwd:\code\screenFront\src\views\MicrofactoryDev\content\top.vue
|
||||||
|
* @Author: 王路平
|
||||||
|
* @文件版本: V1.0.0
|
||||||
|
* @Date: 2023-03-10 10:36:35
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="content-left">
|
||||||
|
<table1 :title="tabledata.title" :data="tabledata" ref="tableref"></table1>
|
||||||
|
<topSwiper ref="swiperref"> </topSwiper>
|
||||||
|
<chart
|
||||||
|
:title="SewingTime.title"
|
||||||
|
:option="SewingTime.option"
|
||||||
|
ref="chartref"
|
||||||
|
></chart>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive, ref, watch } from "vue";
|
||||||
|
import { calcWH } from "@/components/ts/selfAdaption";
|
||||||
|
import chart from "@/components/assembly/chart.vue";
|
||||||
|
import topSwiper from "../component/swiper.vue";
|
||||||
|
import table1 from "@/components/assembly/RotationTable.vue";
|
||||||
|
import { useMicrofactoryDevStore } from "@/store/module/MicrofactoryDev";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
let {t} = useI18n();
|
||||||
|
const store = useMicrofactoryDevStore();
|
||||||
|
let props = defineProps<{
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
}>();
|
||||||
|
let chartref = ref(null);
|
||||||
|
let tableref = ref();
|
||||||
|
let swiperref = ref(null);
|
||||||
|
let tabledata = reactive({
|
||||||
|
title: '设备信息',
|
||||||
|
data: {
|
||||||
|
header: [t('messages.SerialNum'), t('messages.DevName'), t('messages.DevStatus'), `${t('messages.runTime')}(min)`],
|
||||||
|
data: [],
|
||||||
|
headerBGC: "#3469F3",
|
||||||
|
oddRowBGC: "#100C2A",
|
||||||
|
evenRowBGC: "#100C2A",
|
||||||
|
rowNum: 8,
|
||||||
|
waitTime: 3000,
|
||||||
|
carousel: "single",
|
||||||
|
hoverPause: true,
|
||||||
|
align: [
|
||||||
|
"center",
|
||||||
|
"center",
|
||||||
|
"center",
|
||||||
|
"center",
|
||||||
|
"center",
|
||||||
|
"center",
|
||||||
|
"center",
|
||||||
|
"center",
|
||||||
|
"center",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
let SewingTime = reactive({
|
||||||
|
title: "",
|
||||||
|
option: {
|
||||||
|
title: {
|
||||||
|
text: "",
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(255,255,255,0.9)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(255,255,255,0.9)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "3%",
|
||||||
|
right: "4%",
|
||||||
|
bottom: "3%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "value",
|
||||||
|
|
||||||
|
// boundaryGap: [0, 0.01]
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "category",
|
||||||
|
name: "min",
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0, //控制X轴刻度全部显示
|
||||||
|
// rotate: 45, //倾斜角度
|
||||||
|
},
|
||||||
|
data: ["暂无数据"],
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: t('messages.SewingTime'),
|
||||||
|
type: "bar",
|
||||||
|
itemStyle: {
|
||||||
|
// color: function(params) {
|
||||||
|
// //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
|
||||||
|
// var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
|
||||||
|
// return colorList[params.dataIndex]
|
||||||
|
// }
|
||||||
|
color: " #d48265",
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
position: "right",
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(255,255,255,0.9)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
watch(
|
||||||
|
() => props,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
//监听父组件宽高变化，随时重置本组件尺寸
|
||||||
|
reset(newVal);
|
||||||
|
},
|
||||||
|
{ immediate: true, deep: true, flush: "post" }
|
||||||
|
);
|
||||||
|
function reset(val: any) {
|
||||||
|
//宽高为0时跳出该方法
|
||||||
|
if (!val.width && !val.height) return;
|
||||||
|
box(val.width, val.height);
|
||||||
|
}
|
||||||
|
const box = (width: any, height: any) => {
|
||||||
|
let a = calcWH(height, width, 1, 3, 0);
|
||||||
|
chartref.value.setchartWH(a.oWidth, a.oHeight);
|
||||||
|
tableref.value.setchartWH(a.oWidth, a.oHeight);
|
||||||
|
swiperref.value.setchartWH(a.oWidth, a.oHeight);
|
||||||
|
};
|
||||||
|
|
||||||
|
//监听设备列表
|
||||||
|
watch(
|
||||||
|
() => store.devlist,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
changedevlist(newVal);
|
||||||
|
swiperref.value.changeImagelist(newVal);
|
||||||
|
},
|
||||||
|
{ deep: true, flush: "post" }
|
||||||
|
);
|
||||||
|
//修改设备列表
|
||||||
|
function changedevlist(val: any) {
|
||||||
|
let list = [];
|
||||||
|
val.forEach((res, index) => {
|
||||||
|
list.push([
|
||||||
|
index + 1,
|
||||||
|
res.name,
|
||||||
|
JSON.parse(res.deviceStatus) ? t('messages.onLine') : t('messages.offline'),
|
||||||
|
res.runTime,
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
tabledata.data.data = list;
|
||||||
|
tableref.value.changeData(tabledata.data);
|
||||||
|
}
|
||||||
|
//监听微工厂网关状态及在线、离线设备数量
|
||||||
|
watch(
|
||||||
|
() => store.gateway,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
swiperref.value.changeData(newVal);
|
||||||
|
},
|
||||||
|
{ deep: true, flush: "post" }
|
||||||
|
);
|
||||||
|
//监听缝纫时间
|
||||||
|
watch(
|
||||||
|
() => store.SewingTime,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
let y = [];
|
||||||
|
let x = [];
|
||||||
|
newVal.forEach((res) => {
|
||||||
|
y.push(res.name);
|
||||||
|
x.push(res.workTime);
|
||||||
|
});
|
||||||
|
SewingTime.option.yAxis.data = y;
|
||||||
|
SewingTime.option.series[0].data = x;
|
||||||
|
chartref.value.changeData(SewingTime.option);
|
||||||
|
},
|
||||||
|
{ deep: true, flush: "post" }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.content-left {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
259
src/views/SewingBift/index.vue
Normal file
259
src/views/SewingBift/index.vue
Normal file
@ -0,0 +1,259 @@
|
|||||||
|
<!--
|
||||||
|
* @FilePath: \gitscreenFront\src\views\MicrofactoryDev\index.vue
|
||||||
|
* @Author: 王路平
|
||||||
|
* @文件版本: V1.0.0
|
||||||
|
* @Date: 2023-03-10 09:15:58
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div :class="$style['container']">
|
||||||
|
<div class="header">
|
||||||
|
<div class="title">
|
||||||
|
<header2
|
||||||
|
ref="headerref"
|
||||||
|
:width="'100%'"
|
||||||
|
:height="'100px'"
|
||||||
|
:title="'缝纫设备物联监控平台'"
|
||||||
|
:titleTip="''"
|
||||||
|
:typeFun="['time']"
|
||||||
|
:alarmType="['micro']"
|
||||||
|
>
|
||||||
|
</header2>
|
||||||
|
<!-- <div class="left">
|
||||||
|
<dv-decoration-9 style="width: 100px; height: 100px"
|
||||||
|
>66%</dv-decoration-9
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<dv-decoration-11 style="width: 200px; height: 60px"
|
||||||
|
>可用性:80%</dv-decoration-11
|
||||||
|
>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content" ref="Acontent">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<top :width="size.oWidth" :height="size.oHeight"></top>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<bottom :width="size.oWidth" :height="size.oHeight"></bottom>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import header2 from "@/components/headerBox/header2.vue";
|
||||||
|
import { calcWH } from "@/components/ts/selfAdaption";
|
||||||
|
import top from "./content/top.vue";
|
||||||
|
import bottom from "./content/bottom.vue";
|
||||||
|
import { onMounted, onUnmounted, reactive, ref } from "vue";
|
||||||
|
import { getInfoOfMiniatureFactoryData,getStatusCountsOfMiniatureFactoryData,getSewingTimeData,getPresserFootHistogramData,getCuttingLineHistogramData,getActivationData } from "./status/js/result.js";
|
||||||
|
import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
|
||||||
|
import { useMicrofactoryDevStore } from "@/store/module/MicrofactoryDev";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
let {t} = useI18n();
|
||||||
|
const store = useMicrofactoryDevStore();
|
||||||
|
// let titleTip = [
|
||||||
|
// {
|
||||||
|
// color: "rgb(32, 174, 197)",
|
||||||
|
// name: "在线",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// color: "#797979",
|
||||||
|
// name: "离线",
|
||||||
|
// },
|
||||||
|
// ];
|
||||||
|
let Acontent = ref();
|
||||||
|
let headerref=ref()
|
||||||
|
let time = ref(null);
|
||||||
|
function WH(div: HTMLElement) {
|
||||||
|
let a = calcWH(div.offsetHeight, div.offsetWidth, 2, 1, 0);
|
||||||
|
size.oWidth = a.oWidth;
|
||||||
|
size.oHeight = a.oHeight;
|
||||||
|
}
|
||||||
|
let size = reactive({
|
||||||
|
oWidth: 0,
|
||||||
|
oHeight: 0,
|
||||||
|
});
|
||||||
|
function getWebsocket(val) {
|
||||||
|
// headerref.value.HeadergetWebsocket(val)
|
||||||
|
try {
|
||||||
|
let data = JSON.parse(val);
|
||||||
|
//稼动率
|
||||||
|
// if (data.type == "Activation") {
|
||||||
|
// if(!store.Activation) return
|
||||||
|
// store.changedata(data.msg,'Activation')
|
||||||
|
// }
|
||||||
|
// if(data.type=="SewingTime"){
|
||||||
|
// if(!store.SewingTime) return
|
||||||
|
// store.changedata(data.msg,'SewingTime')
|
||||||
|
// }
|
||||||
|
// if(data.type=="PresserFootHistogram"){
|
||||||
|
// if(!store.PresserFoot) return
|
||||||
|
// store.changedata(data.msg,'PresserFoot')
|
||||||
|
// }
|
||||||
|
// if(data.type=="CuttingLineHistogram"){
|
||||||
|
// if(!store.CuttingLine) return
|
||||||
|
// store.changedata(data.msg,'CuttingLine')
|
||||||
|
// }
|
||||||
|
// if(data.type=="StatusCountsOfMiniatureFactory"){
|
||||||
|
// if(!store.SewingTime) return
|
||||||
|
// store.setGateway(data.msg)
|
||||||
|
// }
|
||||||
|
// if(data.type=="InfoOfMiniatureFactory"){
|
||||||
|
// // if(!store.SewingTime) return
|
||||||
|
// store.setDevList(data.msg)
|
||||||
|
// }
|
||||||
|
} catch (err) {}
|
||||||
|
}
|
||||||
|
function errWebsocket(val) {
|
||||||
|
headerref.value?headerref.value.HeadererrWebsocket(val):''
|
||||||
|
// console.log(val);
|
||||||
|
}
|
||||||
|
//获取设备列表数据
|
||||||
|
function getInfoOfMiniatureFactoryDatafun() {
|
||||||
|
let result: any = getInfoOfMiniatureFactoryData;
|
||||||
|
|
||||||
|
if (result.code == 200) {
|
||||||
|
store.setDevList(result.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//获取微工厂网关状态及在线、离线设备数量
|
||||||
|
function getStatusCountsOfMiniatureFactoryDatafun() {
|
||||||
|
let result: any = getStatusCountsOfMiniatureFactoryData;
|
||||||
|
|
||||||
|
if (result.code == 200) {
|
||||||
|
store.setGateway(result.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//微工厂压脚柱状图
|
||||||
|
function getPresserFootHistogramDatafun() {
|
||||||
|
let result: any = getPresserFootHistogramData;
|
||||||
|
|
||||||
|
if (result.code == 200) {
|
||||||
|
store.setPresserFoot(result.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//微工厂剪线柱状图
|
||||||
|
function getCuttingLineHistogramDatafun() {
|
||||||
|
let result: any = getCuttingLineHistogramData;
|
||||||
|
|
||||||
|
if (result.code == 200) {
|
||||||
|
store.setCuttingLine(result.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//微工厂设备缝纫时间
|
||||||
|
function getSewingTimeDatafun() {
|
||||||
|
let result: any = getSewingTimeData;
|
||||||
|
|
||||||
|
if (result.code == 200) {
|
||||||
|
store.setSewingTime(result.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//微工厂稼動率
|
||||||
|
function getActivationDatafun() {
|
||||||
|
let result: any = getActivationData;
|
||||||
|
|
||||||
|
if (result.code == 200) {
|
||||||
|
store.setActivation(result.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
let contentBox = Acontent.value;
|
||||||
|
// let Timedombox=Timedom.value
|
||||||
|
WH(contentBox);
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
if (time.value) {
|
||||||
|
clearTimeout(time.value);
|
||||||
|
time.value = null;
|
||||||
|
}
|
||||||
|
time.value = setTimeout(() => {
|
||||||
|
WH(contentBox);
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
getStatusCountsOfMiniatureFactoryDatafun()
|
||||||
|
getInfoOfMiniatureFactoryDatafun()
|
||||||
|
getSewingTimeDatafun()
|
||||||
|
getPresserFootHistogramDatafun()
|
||||||
|
getCuttingLineHistogramDatafun()
|
||||||
|
getActivationDatafun()
|
||||||
|
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||||||
|
});
|
||||||
|
onUnmounted(() => {
|
||||||
|
closeWebsocket();
|
||||||
|
clearTimeout(time);
|
||||||
|
store.resetData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style module>
|
||||||
|
.container {
|
||||||
|
height: 1080px;
|
||||||
|
width: 1920px;
|
||||||
|
color: #20aec5;
|
||||||
|
background-color: #100c2a;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style scoped>
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.title > h1 {
|
||||||
|
font-size: 30px;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
.title > .left {
|
||||||
|
position: absolute;
|
||||||
|
left: 100px;
|
||||||
|
bottom: 10px;
|
||||||
|
}
|
||||||
|
.title > .right {
|
||||||
|
position: absolute;
|
||||||
|
right: 100px;
|
||||||
|
bottom: 50px;
|
||||||
|
}
|
||||||
|
/* .ov{
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
overflow: hidden;
|
||||||
|
} */
|
||||||
|
.header {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.header p {
|
||||||
|
position: absolute;
|
||||||
|
right: 50px;
|
||||||
|
bottom: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
--header: 100px;
|
||||||
|
height: calc(1080px - var(--header));
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
|
||||||
|
/* --content:calc(100vh - var(--header)) */
|
||||||
|
overflow: hidden !important;
|
||||||
|
-ms-overflow-style: none; /* IE + Edge */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
635
src/views/SewingBift/status/js/result.js
Normal file
635
src/views/SewingBift/status/js/result.js
Normal file
@ -0,0 +1,635 @@
|
|||||||
|
/**
|
||||||
|
* 1
|
||||||
|
*/
|
||||||
|
export const getStatusCountsOfMiniatureFactoryData = {
|
||||||
|
"code": 200,
|
||||||
|
"msg": null,
|
||||||
|
"data": [
|
||||||
|
{
|
||||||
|
"deptId": "12f5d2a0-1593-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "false",
|
||||||
|
"counts": 0,
|
||||||
|
"gatewayStatus": "true"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"deptId": "12f5d2a0-1593-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "true",
|
||||||
|
"counts": 10,
|
||||||
|
"gatewayStatus": "true"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设备信息
|
||||||
|
*/
|
||||||
|
export const getInfoOfMiniatureFactoryData = {
|
||||||
|
"code": 200,
|
||||||
|
"msg": null,
|
||||||
|
"data": [
|
||||||
|
{
|
||||||
|
"id": "0ccacd50-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"label": null,
|
||||||
|
"name": "高速平台式双针双重环缝缝纫机",
|
||||||
|
"belongTo": null,
|
||||||
|
"deviceStatus": "true",
|
||||||
|
"deliveryDate": null,
|
||||||
|
"progress": null,
|
||||||
|
"runTime": 2661.53,
|
||||||
|
"image": "g.png",
|
||||||
|
"speed": 0,
|
||||||
|
"pins": 39499,
|
||||||
|
"model": null,
|
||||||
|
"type": null,
|
||||||
|
"typeName": null,
|
||||||
|
"prtDeliveryDate": null,
|
||||||
|
"realityTime": null,
|
||||||
|
"status": null,
|
||||||
|
"inspector": null,
|
||||||
|
"assemblyGroup": null,
|
||||||
|
"electricGroup": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "26ce8020-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"label": null,
|
||||||
|
"name": "半干机头双针平缝机",
|
||||||
|
"belongTo": null,
|
||||||
|
"deviceStatus": "true",
|
||||||
|
"deliveryDate": null,
|
||||||
|
"progress": null,
|
||||||
|
"runTime": 133.43,
|
||||||
|
"image": "b.png",
|
||||||
|
"speed": 0,
|
||||||
|
"pins": 0,
|
||||||
|
"model": null,
|
||||||
|
"type": null,
|
||||||
|
"typeName": null,
|
||||||
|
"prtDeliveryDate": null,
|
||||||
|
"realityTime": null,
|
||||||
|
"status": null,
|
||||||
|
"inspector": null,
|
||||||
|
"assemblyGroup": null,
|
||||||
|
"electricGroup": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "2fb7b080-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"label": null,
|
||||||
|
"name": "半干式高速包缝机",
|
||||||
|
"belongTo": null,
|
||||||
|
"deviceStatus": "true",
|
||||||
|
"deliveryDate": null,
|
||||||
|
"progress": null,
|
||||||
|
"runTime": 7350.0,
|
||||||
|
"image": "c.png",
|
||||||
|
"speed": 0,
|
||||||
|
"pins": 379066,
|
||||||
|
"model": null,
|
||||||
|
"type": null,
|
||||||
|
"typeName": null,
|
||||||
|
"prtDeliveryDate": null,
|
||||||
|
"realityTime": null,
|
||||||
|
"status": null,
|
||||||
|
"inspector": null,
|
||||||
|
"assemblyGroup": null,
|
||||||
|
"electricGroup": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "3b49e0d0-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"label": null,
|
||||||
|
"name": "电脑数控花样珠边机",
|
||||||
|
"belongTo": null,
|
||||||
|
"deviceStatus": "true",
|
||||||
|
"deliveryDate": null,
|
||||||
|
"progress": null,
|
||||||
|
"runTime": 899.66,
|
||||||
|
"image": "e.png",
|
||||||
|
"speed": 0,
|
||||||
|
"pins": 0,
|
||||||
|
"model": null,
|
||||||
|
"type": null,
|
||||||
|
"typeName": null,
|
||||||
|
"prtDeliveryDate": null,
|
||||||
|
"realityTime": null,
|
||||||
|
"status": null,
|
||||||
|
"inspector": null,
|
||||||
|
"assemblyGroup": null,
|
||||||
|
"electricGroup": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "620e31d0-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"label": null,
|
||||||
|
"name": "小方头式偏平缝绷缝机",
|
||||||
|
"belongTo": null,
|
||||||
|
"deviceStatus": "true",
|
||||||
|
"deliveryDate": null,
|
||||||
|
"progress": null,
|
||||||
|
"runTime": 8160.2,
|
||||||
|
"image": "i.png",
|
||||||
|
"speed": 0,
|
||||||
|
"pins": 410440,
|
||||||
|
"model": null,
|
||||||
|
"type": null,
|
||||||
|
"typeName": null,
|
||||||
|
"prtDeliveryDate": null,
|
||||||
|
"realityTime": null,
|
||||||
|
"status": null,
|
||||||
|
"inspector": null,
|
||||||
|
"assemblyGroup": null,
|
||||||
|
"electricGroup": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "6f495730-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"label": null,
|
||||||
|
"name": "人字缝缝纫机",
|
||||||
|
"belongTo": null,
|
||||||
|
"deviceStatus": "true",
|
||||||
|
"deliveryDate": null,
|
||||||
|
"progress": null,
|
||||||
|
"runTime": 805.54,
|
||||||
|
"image": "h.png",
|
||||||
|
"speed": 0,
|
||||||
|
"pins": 0,
|
||||||
|
"model": null,
|
||||||
|
"type": null,
|
||||||
|
"typeName": null,
|
||||||
|
"prtDeliveryDate": null,
|
||||||
|
"realityTime": null,
|
||||||
|
"status": null,
|
||||||
|
"inspector": null,
|
||||||
|
"assemblyGroup": null,
|
||||||
|
"electricGroup": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "7ca216b0-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"label": null,
|
||||||
|
"name": "暗缝机",
|
||||||
|
"belongTo": null,
|
||||||
|
"deviceStatus": "true",
|
||||||
|
"deliveryDate": null,
|
||||||
|
"progress": null,
|
||||||
|
"runTime": 1089.38,
|
||||||
|
"image": "a.png",
|
||||||
|
"speed": 0,
|
||||||
|
"pins": 30037,
|
||||||
|
"model": null,
|
||||||
|
"type": null,
|
||||||
|
"typeName": null,
|
||||||
|
"prtDeliveryDate": null,
|
||||||
|
"realityTime": null,
|
||||||
|
"status": null,
|
||||||
|
"inspector": null,
|
||||||
|
"assemblyGroup": null,
|
||||||
|
"electricGroup": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "93fc0640-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"label": null,
|
||||||
|
"name": "单针平缝缝纫机1",
|
||||||
|
"belongTo": null,
|
||||||
|
"deviceStatus": "true",
|
||||||
|
"deliveryDate": null,
|
||||||
|
"progress": null,
|
||||||
|
"runTime": 2203.81,
|
||||||
|
"image": "d.png",
|
||||||
|
"speed": 0,
|
||||||
|
"pins": 44497,
|
||||||
|
"model": null,
|
||||||
|
"type": null,
|
||||||
|
"typeName": null,
|
||||||
|
"prtDeliveryDate": null,
|
||||||
|
"realityTime": null,
|
||||||
|
"status": null,
|
||||||
|
"inspector": null,
|
||||||
|
"assemblyGroup": null,
|
||||||
|
"electricGroup": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "9b11f2b0-1591-11ee-b4df-a9653aef169c",
|
||||||
|
"label": null,
|
||||||
|
"name": "单针平缝缝纫机2",
|
||||||
|
"belongTo": null,
|
||||||
|
"deviceStatus": "true",
|
||||||
|
"deliveryDate": null,
|
||||||
|
"progress": null,
|
||||||
|
"runTime": 3089.73,
|
||||||
|
"image": "d.png",
|
||||||
|
"speed": 0,
|
||||||
|
"pins": 122849,
|
||||||
|
"model": null,
|
||||||
|
"type": null,
|
||||||
|
"typeName": null,
|
||||||
|
"prtDeliveryDate": null,
|
||||||
|
"realityTime": null,
|
||||||
|
"status": null,
|
||||||
|
"inspector": null,
|
||||||
|
"assemblyGroup": null,
|
||||||
|
"electricGroup": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "b2a9e030-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"label": null,
|
||||||
|
"name": "高速电子锁眼机",
|
||||||
|
"belongTo": null,
|
||||||
|
"deviceStatus": "true",
|
||||||
|
"deliveryDate": null,
|
||||||
|
"progress": null,
|
||||||
|
"runTime": 1574.59,
|
||||||
|
"image": "f.png",
|
||||||
|
"speed": 0,
|
||||||
|
"pins": 11128,
|
||||||
|
"model": null,
|
||||||
|
"type": null,
|
||||||
|
"typeName": null,
|
||||||
|
"prtDeliveryDate": null,
|
||||||
|
"realityTime": null,
|
||||||
|
"status": null,
|
||||||
|
"inspector": null,
|
||||||
|
"assemblyGroup": null,
|
||||||
|
"electricGroup": null
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 缝纫时间
|
||||||
|
*/
|
||||||
|
export const getSewingTimeData = {
|
||||||
|
"code": 200,
|
||||||
|
"msg": null,
|
||||||
|
"data": [
|
||||||
|
{
|
||||||
|
"deviceId": "620e31d0-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "小方头式偏平缝绷缝机",
|
||||||
|
"firstRunTime": "2023-08-11 09:42:39",
|
||||||
|
"lastStartTime": "2023-10-13 07:56:46",
|
||||||
|
"lastEndTime": "2023-10-13 13:15:46",
|
||||||
|
"usageDate": 52,
|
||||||
|
"runTime": 8160.2,
|
||||||
|
"workTime": 847.74,
|
||||||
|
"in2Count": 0,
|
||||||
|
"in2TodayCount": 0,
|
||||||
|
"in2ClearCount": 0,
|
||||||
|
"in3Count": 115,
|
||||||
|
"in3TodayCount": 113,
|
||||||
|
"in3ClearCount": 0,
|
||||||
|
"in4Count": 410440
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"deviceId": "9b11f2b0-1591-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "单针平缝缝纫机2",
|
||||||
|
"firstRunTime": "2023-07-21 17:51:45",
|
||||||
|
"lastStartTime": "2023-10-13 13:15:50",
|
||||||
|
"lastEndTime": "2023-10-13 13:15:50",
|
||||||
|
"usageDate": 59,
|
||||||
|
"runTime": 3089.73,
|
||||||
|
"workTime": 144.17,
|
||||||
|
"in2Count": 4863,
|
||||||
|
"in2TodayCount": 2147,
|
||||||
|
"in2ClearCount": 0,
|
||||||
|
"in3Count": 287,
|
||||||
|
"in3TodayCount": 369,
|
||||||
|
"in3ClearCount": 0,
|
||||||
|
"in4Count": 122849
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"deviceId": "2fb7b080-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "半干式高速包缝机",
|
||||||
|
"firstRunTime": "2023-07-21 17:51:45",
|
||||||
|
"lastStartTime": "2023-10-10 07:59:25",
|
||||||
|
"lastEndTime": "2023-10-10 11:05:56",
|
||||||
|
"usageDate": 58,
|
||||||
|
"runTime": 3263.84,
|
||||||
|
"workTime": 173.91,
|
||||||
|
"in2Count": 24231,
|
||||||
|
"in2TodayCount": 7008,
|
||||||
|
"in2ClearCount": 9,
|
||||||
|
"in3Count": 2199,
|
||||||
|
"in3TodayCount": 1451,
|
||||||
|
"in3ClearCount": 5,
|
||||||
|
"in4Count": 105683
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"deviceId": "2fb7b080-1592-11ee-b4df-a965fgsf169c",
|
||||||
|
"name": "高速平台式双针双重环缝缝纫机",
|
||||||
|
"firstRunTime": "2023-07-21 17:51:45",
|
||||||
|
"lastStartTime": "2023-10-10 07:59:25",
|
||||||
|
"lastEndTime": "2023-10-10 11:05:56",
|
||||||
|
"usageDate": 58,
|
||||||
|
"runTime": 3263.84,
|
||||||
|
"workTime": 245.32,
|
||||||
|
"in2Count": 24231,
|
||||||
|
"in2TodayCount": 7008,
|
||||||
|
"in2ClearCount": 9,
|
||||||
|
"in3Count": 2199,
|
||||||
|
"in3TodayCount": 1451,
|
||||||
|
"in3ClearCount": 5,
|
||||||
|
"in4Count": 105683
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"deviceId": "2fb7b080-1592-11ee-b4df-a9699aef169c",
|
||||||
|
"name": "半干机头双针平缝机",
|
||||||
|
"firstRunTime": "2023-07-21 17:51:45",
|
||||||
|
"lastStartTime": "2023-10-10 07:59:25",
|
||||||
|
"lastEndTime": "2023-10-10 11:05:56",
|
||||||
|
"usageDate": 58,
|
||||||
|
"runTime": 3263.84,
|
||||||
|
"workTime": 195.32,
|
||||||
|
"in2Count": 24231,
|
||||||
|
"in2TodayCount": 7008,
|
||||||
|
"in2ClearCount": 9,
|
||||||
|
"in3Count": 2199,
|
||||||
|
"in3TodayCount": 1451,
|
||||||
|
"in3ClearCount": 5,
|
||||||
|
"in4Count": 105683
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"deviceId": "2fb7b080-1592-11ee-b4df-a96480ef169c",
|
||||||
|
"name": "电脑数控花样珠边机",
|
||||||
|
"firstRunTime": "2023-07-21 17:51:45",
|
||||||
|
"lastStartTime": "2023-10-10 07:59:25",
|
||||||
|
"lastEndTime": "2023-10-10 11:05:56",
|
||||||
|
"usageDate": 58,
|
||||||
|
"runTime": 3263.84,
|
||||||
|
"workTime": 220.55,
|
||||||
|
"in2Count": 24231,
|
||||||
|
"in2TodayCount": 7008,
|
||||||
|
"in2ClearCount": 9,
|
||||||
|
"in3Count": 2199,
|
||||||
|
"in3TodayCount": 1451,
|
||||||
|
"in3ClearCount": 5,
|
||||||
|
"in4Count": 105683
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"deviceId": "2fb7b080-1592-11ee-aa25-a9653aef169c",
|
||||||
|
"name": "高速电子锁眼机",
|
||||||
|
"firstRunTime": "2023-07-21 17:51:45",
|
||||||
|
"lastStartTime": "2023-10-10 07:59:25",
|
||||||
|
"lastEndTime": "2023-10-10 11:05:56",
|
||||||
|
"usageDate": 58,
|
||||||
|
"runTime": 3263.84,
|
||||||
|
"workTime": 279.84,
|
||||||
|
"in2Count": 24231,
|
||||||
|
"in2TodayCount": 7008,
|
||||||
|
"in2ClearCount": 9,
|
||||||
|
"in3Count": 2199,
|
||||||
|
"in3TodayCount": 1451,
|
||||||
|
"in3ClearCount": 5,
|
||||||
|
"in4Count": 105683
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"deviceId": "2fb7b080-9854-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "人字缝缝纫机",
|
||||||
|
"firstRunTime": "2023-07-21 17:51:45",
|
||||||
|
"lastStartTime": "2023-10-10 07:59:25",
|
||||||
|
"lastEndTime": "2023-10-10 11:05:56",
|
||||||
|
"usageDate": 58,
|
||||||
|
"runTime": 3263.84,
|
||||||
|
"workTime": 152.00,
|
||||||
|
"in2Count": 24231,
|
||||||
|
"in2TodayCount": 7008,
|
||||||
|
"in2ClearCount": 9,
|
||||||
|
"in3Count": 2199,
|
||||||
|
"in3TodayCount": 1451,
|
||||||
|
"in3ClearCount": 5,
|
||||||
|
"in4Count": 105683
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"deviceId": "2fb7b080-1193-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "暗缝机",
|
||||||
|
"firstRunTime": "2023-07-21 17:51:45",
|
||||||
|
"lastStartTime": "2023-10-10 07:59:25",
|
||||||
|
"lastEndTime": "2023-10-10 11:05:56",
|
||||||
|
"usageDate": 58,
|
||||||
|
"runTime": 3263.84,
|
||||||
|
"workTime": 425.98,
|
||||||
|
"in2Count": 24231,
|
||||||
|
"in2TodayCount": 7008,
|
||||||
|
"in2ClearCount": 9,
|
||||||
|
"in3Count": 2199,
|
||||||
|
"in3TodayCount": 1451,
|
||||||
|
"in3ClearCount": 5,
|
||||||
|
"in4Count": 105683
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 压脚
|
||||||
|
*/
|
||||||
|
export const getPresserFootHistogramData = {
|
||||||
|
"code": 200,
|
||||||
|
"msg": null,
|
||||||
|
"data": [
|
||||||
|
{
|
||||||
|
"id": "2fb7b080-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "半干式高速包缝机",
|
||||||
|
"reality": 5283,
|
||||||
|
"average": 2671,
|
||||||
|
"ratio": 198
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "93fc0640-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "单针平缝缝纫机",
|
||||||
|
"reality": 4414,
|
||||||
|
"average": 3233,
|
||||||
|
"ratio": 136
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "9b11f2b0-1591-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "单针平缝缝纫机2",
|
||||||
|
"reality": 3147,
|
||||||
|
"average": 2982,
|
||||||
|
"ratio": 105
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "0ccacd50-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "高速平台式双针双重环缝缝纫机",
|
||||||
|
"reality": 4126,
|
||||||
|
"average": 4223,
|
||||||
|
"ratio": 98
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "26ce8020-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "半干机头双针平缝机",
|
||||||
|
"reality": 1283,
|
||||||
|
"average": 951,
|
||||||
|
"ratio": 134
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "3b49e0d0-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "电脑数控花样珠边机",
|
||||||
|
"reality": 4974,
|
||||||
|
"average": 3429,
|
||||||
|
"ratio": 145
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "b2a9e030-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "高速电子锁眼机",
|
||||||
|
"reality": 2140,
|
||||||
|
"average": 1145,
|
||||||
|
"ratio": 186
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "620e31d0-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "小方头式偏平缝绷缝机",
|
||||||
|
"reality": 5008,
|
||||||
|
"average": 3417,
|
||||||
|
"ratio": 147
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "6f495730-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "人字缝缝纫机",
|
||||||
|
"reality": 3511,
|
||||||
|
"average": 2111,
|
||||||
|
"ratio": 166
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "7ca216b0-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "暗缝机",
|
||||||
|
"reality": 2103,
|
||||||
|
"average": 1551,
|
||||||
|
"ratio": 136
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 剪线
|
||||||
|
*/
|
||||||
|
export const getCuttingLineHistogramData = {
|
||||||
|
"code": 200,
|
||||||
|
"msg": null,
|
||||||
|
"data": [
|
||||||
|
{
|
||||||
|
"id": "620e31d0-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "小方头式偏平缝绷缝机",
|
||||||
|
"reality": 113,
|
||||||
|
"average": 52,
|
||||||
|
"ratio": 217
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "9b11f2b0-1591-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "单针平缝缝纫机2",
|
||||||
|
"reality": 369,
|
||||||
|
"average": 114,
|
||||||
|
"ratio": 323
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "93fc0640-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "单针平缝缝纫机1",
|
||||||
|
"reality": 625,
|
||||||
|
"average": 325,
|
||||||
|
"ratio": 192
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "0ccacd50-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "高速平台式双针双重环缝缝纫机",
|
||||||
|
"reality": 445,
|
||||||
|
"average": 207,
|
||||||
|
"ratio": 215
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "2fb7b080-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "半干式高速包缝机",
|
||||||
|
"reality": 263,
|
||||||
|
"average": 93,
|
||||||
|
"ratio": 283
|
||||||
|
},//-----
|
||||||
|
{
|
||||||
|
"id": "9b11f2b0-1591-11ee-b4df-a9653avf169c",
|
||||||
|
"name": "半干机头双针平缝机",
|
||||||
|
"reality": 369,
|
||||||
|
"average": 104,
|
||||||
|
"ratio": 355
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "93fc0640-1592-11ee-b4df-a9698lef169c",
|
||||||
|
"name": "电脑数控花样珠边机",
|
||||||
|
"reality": 541,
|
||||||
|
"average": 205,
|
||||||
|
"ratio": 264
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "0ccacd50-1592-11ee-b4df-a9653aef4561",
|
||||||
|
"name": "高速电子锁眼机",
|
||||||
|
"reality": 445,
|
||||||
|
"average": 237,
|
||||||
|
"ratio": 188
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "2fb7b080-1592-11ee-b4df-a965465769c",
|
||||||
|
"name": "人字缝缝纫机",
|
||||||
|
"reality": 263,
|
||||||
|
"average": 153,
|
||||||
|
"ratio": 172
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "2fb7qa80-1592-11ee-b4df-a965465769c",
|
||||||
|
"name": "暗缝机",
|
||||||
|
"reality": 263,
|
||||||
|
"average": 123,
|
||||||
|
"ratio": 214
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 稼动率
|
||||||
|
*/
|
||||||
|
export const getActivationData = {
|
||||||
|
"code": 200,
|
||||||
|
"msg": null,
|
||||||
|
"data": [
|
||||||
|
{
|
||||||
|
"id": "2fb7b080-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "半干式高速包缝机",
|
||||||
|
"activation": 8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "620e31d0-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "小方头式偏平缝绷缝机",
|
||||||
|
"activation": 10
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "7ca216b0-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "暗缝机",
|
||||||
|
"activation": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "93fc0640-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "单针平缝缝纫机",
|
||||||
|
"activation": 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "9b11f2b0-1591-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "单针平缝缝纫机2",
|
||||||
|
"activation": 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "0ccacd50-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "高速平台式双针双重环缝缝纫机",
|
||||||
|
"activation": 4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "26ce8020-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "半干机头双针平缝机",
|
||||||
|
"activation": 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "3b49e0d0-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "电脑数控花样珠边机",
|
||||||
|
"activation": 5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "b2a9e030-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "高速电子锁眼机",
|
||||||
|
"activation": 2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "6f495730-1592-11ee-b4df-a9653aef169c",
|
||||||
|
"name": "人字缝缝纫机",
|
||||||
|
"activation": 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
@ -13,6 +13,9 @@
|
|||||||
<verticalNumLoop @click="gotoTrendChart(item.value, item.unit)" :title="item.title" :icon="item.icon"
|
<verticalNumLoop @click="gotoTrendChart(item.value, item.unit)" :title="item.title" :icon="item.icon"
|
||||||
:limit="item.limit" :unit="item.unit" :value="item.value"></verticalNumLoop>
|
:limit="item.limit" :unit="item.unit" :value="item.value"></verticalNumLoop>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <div class="top-box-item" @click="gotoTrendChart(store.pmcq, 'μg/m3',{PM25:75,PM10:150})">
|
||||||
|
<pm :pm10limit="150" :pm25limit="75"></pm>
|
||||||
|
</div> -->
|
||||||
<div class="top-box-item" @click="gotoTrendChart(store.pm, 'μg/m3',{PM25:75,PM10:150})">
|
<div class="top-box-item" @click="gotoTrendChart(store.pm, 'μg/m3',{PM25:75,PM10:150})">
|
||||||
<pm :pm10limit="150" :pm25limit="75"></pm>
|
<pm :pm10limit="150" :pm25limit="75"></pm>
|
||||||
</div>
|
</div>
|
||||||
@ -224,8 +227,8 @@ watch(() => store.humiture, (newVal, oldVal) => {
|
|||||||
let pmindex = ref(0);
|
let pmindex = ref(0);
|
||||||
|
|
||||||
async function getPmData() {
|
async function getPmData() {
|
||||||
let resulttwo: any = await getPmtwoData({ deptIds: '6,7,9,10,11' })
|
let resulttwo: any = await getPmtwoData({ deptIds: '6,7,9,10,11,23' })
|
||||||
let resultten: any = await getPmtenData({ deptIds: '6,7,9,10,11' })
|
let resultten: any = await getPmtenData({ deptIds: '6,7,9,10,11,23' })
|
||||||
let data = {}
|
let data = {}
|
||||||
if (resulttwo) {
|
if (resulttwo) {
|
||||||
resulttwo.data.forEach(ele => {
|
resulttwo.data.forEach(ele => {
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
<!-- <div class="topTip">
|
<!-- <div class="topTip">
|
||||||
<toptip ref="toptip1"></toptip>
|
<toptip ref="toptip1"></toptip>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div style="display: flex;">
|
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||||
<div
|
<div
|
||||||
style="width: 20%; height: 250px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-evenly;"
|
style="width: 20%; height: 250px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-evenly;"
|
||||||
v-for="item in store.newVerticalNum">
|
v-for="item in store.newVerticalNum">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user