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",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
||||||
|
"@iamzzg/data-view": "^2.10.0",
|
||||||
"@jiaminghi/data-view": "^2.10.0",
|
"@jiaminghi/data-view": "^2.10.0",
|
||||||
"@tweenjs/tween.js": "^19.0.0",
|
"@tweenjs/tween.js": "^19.0.0",
|
||||||
"axios": "^1.3.2",
|
"axios": "^1.3.2",
|
||||||
@ -1785,6 +1786,15 @@
|
|||||||
"@hapi/hoek": "^9.0.0"
|
"@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": {
|
"node_modules/@intlify/core-base": {
|
||||||
"version": "9.2.2",
|
"version": "9.2.2",
|
||||||
"resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.2.2.tgz",
|
"resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.2.2.tgz",
|
||||||
@ -4050,9 +4060,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/caniuse-lite": {
|
"node_modules/caniuse-lite": {
|
||||||
"version": "1.0.30001449",
|
"version": "1.0.30001532",
|
||||||
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001449.tgz",
|
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001532.tgz",
|
||||||
"integrity": "sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw==",
|
"integrity": "sha512-FbDFnNat3nMnrROzqrsg314zhqN5LGQ1kyyMk2opcrwGbVGpHRhgCWtAgD5YJUqNAiQ+dklreil/c3Qf1dfCTw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/case-sensitive-paths-webpack-plugin": {
|
"node_modules/case-sensitive-paths-webpack-plugin": {
|
||||||
@ -13390,6 +13400,15 @@
|
|||||||
"@hapi/hoek": "^9.0.0"
|
"@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": {
|
"@intlify/core-base": {
|
||||||
"version": "9.2.2",
|
"version": "9.2.2",
|
||||||
"resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.2.2.tgz",
|
"resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-9.2.2.tgz",
|
||||||
@ -15280,9 +15299,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"caniuse-lite": {
|
"caniuse-lite": {
|
||||||
"version": "1.0.30001449",
|
"version": "1.0.30001532",
|
||||||
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001449.tgz",
|
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001532.tgz",
|
||||||
"integrity": "sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw==",
|
"integrity": "sha512-FbDFnNat3nMnrROzqrsg314zhqN5LGQ1kyyMk2opcrwGbVGpHRhgCWtAgD5YJUqNAiQ+dklreil/c3Qf1dfCTw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"case-sensitive-paths-webpack-plugin": {
|
"case-sensitive-paths-webpack-plugin": {
|
||||||
|
|||||||
@ -8,6 +8,7 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
||||||
|
"@iamzzg/data-view": "^2.10.0",
|
||||||
"@jiaminghi/data-view": "^2.10.0",
|
"@jiaminghi/data-view": "^2.10.0",
|
||||||
"@tweenjs/tween.js": "^19.0.0",
|
"@tweenjs/tween.js": "^19.0.0",
|
||||||
"axios": "^1.3.2",
|
"axios": "^1.3.2",
|
||||||
|
|||||||
@ -18,7 +18,7 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
|||||||
import echarts from '@/utils/echarts'
|
import echarts from '@/utils/echarts'
|
||||||
import {createPinia} from 'pinia'
|
import {createPinia} from 'pinia'
|
||||||
// import DataV, { setClassNamePrefix } from '@dataview/datav-vue3';
|
// 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 './registerServiceWorker'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import i18n from './locales'
|
import i18n from './locales'
|
||||||
|
|||||||
@ -24,7 +24,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, ref, watch } from "vue";
|
import { reactive, ref, watch,onMounted } from "vue";
|
||||||
import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
|
import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
|
||||||
import { useRoute,useRouter } from "vue-router";
|
import { useRoute,useRouter } from "vue-router";
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
@ -43,11 +43,9 @@ watch(
|
|||||||
|
|
||||||
//动态更新echarts
|
//动态更新echarts
|
||||||
if(newVal.devInfo.progress){
|
if(newVal.devInfo.progress){
|
||||||
|
|
||||||
|
|
||||||
config.value=JSON.parse(newVal.devInfo.progress)
|
config.value=JSON.parse(newVal.devInfo.progress)
|
||||||
}
|
}
|
||||||
progress.value.updateRows(config)
|
progress.value.mergeConfig()
|
||||||
|
|
||||||
},
|
},
|
||||||
{ deep: true, flush: "post" }
|
{ deep: true, flush: "post" }
|
||||||
@ -55,11 +53,11 @@ watch(
|
|||||||
let comeBackFun=()=>{
|
let comeBackFun=()=>{
|
||||||
router.go(-1)
|
router.go(-1)
|
||||||
}
|
}
|
||||||
let config = {
|
let config = reactive({
|
||||||
value: 0,
|
value: 0,
|
||||||
colors: ["#01c4f9", "#c135ff"],
|
colors: ["#01c4f9", "#c135ff"],
|
||||||
borderWidth: 3,
|
borderWidth: 3,
|
||||||
}
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@ -58,7 +58,34 @@ let refborder2 = ref();
|
|||||||
|
|
||||||
const router = useRouter();
|
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 severdata = reactive([]); //暂存
|
||||||
//弹窗显示与隐藏
|
//弹窗显示与隐藏
|
||||||
let visible = ref(false);
|
let visible = ref(false);
|
||||||
@ -72,6 +99,7 @@ const devlistSize = reactive({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const setData = (val: any) => {
|
const setData = (val: any) => {
|
||||||
|
|
||||||
let data = [];
|
let data = [];
|
||||||
val.forEach((res) => {
|
val.forEach((res) => {
|
||||||
data.push([
|
data.push([
|
||||||
@ -84,33 +112,7 @@ const setData = (val: any) => {
|
|||||||
res.deliveryDate,
|
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.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;
|
severdata = val;
|
||||||
devList.value.updateRows(listdata.data, {
|
devList.value.updateRows(listdata.data, {
|
||||||
headerBGC: "#00BAFF",
|
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>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备工况物联系统'" :titleTip="[]"
|
<Header :title="'富怡服装微工厂物联管理平台'" :wh="{ width: '100%', height: '100px' }"></Header>
|
||||||
:typeFun="['time']" :alarmType="[]"></header2>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="lt">
|
<div class="ltop">
|
||||||
<NewBoder :title="'裁剪设备'">
|
<BoardVue :title="'裁剪设备'"></BoardVue>
|
||||||
<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>
|
||||||
<div class="lb">
|
<div class="lbottom">
|
||||||
<NewBoder :title="'缝中设备'">
|
<BoardVue :title="'缝前设备'">
|
||||||
<BoardBar :data="store.fengzhong.value" :xData="store.fengzhong.chart.xData"
|
<ScrollBoard :data="fqdata"></ScrollBoard>
|
||||||
:seriesData="store.fengzhong.chart.series"></BoardBar>
|
</BoardVue>
|
||||||
</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>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="rt">
|
<div class="rtop">
|
||||||
<NewBoder :title="'一次性拖鞋自动生产线'">
|
<div class="rtleft">
|
||||||
<DevCard :dev_title="dev_tuoxie_title" :dev_value="store.tuoxie.value">
|
<div class="rtltop">
|
||||||
<BarChart style="width: 100%;height: 100%;" :xData="store.tuoxie.chart.xData"
|
<StepItem v-for="i in 4"></StepItem>
|
||||||
:seriesData="store.tuoxie.chart.series"></BarChart>
|
</div>
|
||||||
</DevCard>
|
<div class="rtlbottom">
|
||||||
</NewBoder>
|
<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>
|
||||||
<div class="rb">
|
<div class="rbottom">
|
||||||
<NewBoder :title="'座椅面套生产线'">
|
<BottomBorder></BottomBorder>
|
||||||
<BoardBar :data="store.zuoyi.value" :xData="store.zuoyi.chart.xData"
|
|
||||||
:seriesData="store.zuoyi.chart.series"></BoardBar>
|
|
||||||
</NewBoder>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang='ts'>
|
<script setup lang='ts'>
|
||||||
import header2 from './components/header2.vue'
|
import Header from './component/Header.vue'
|
||||||
import NewBoder from './components/NewBoder.vue';
|
import BoardVue from './component/Border.vue'
|
||||||
import DevCard from "./components/DevCard.vue";
|
import StepItem from './component/StepItem.vue'
|
||||||
import BarChart from './components/BarChart.vue'
|
import BottomBorder from './component/BottomBorder.vue'
|
||||||
import ringChart from "./components/ringChart.vue";
|
import ScrollBoard from './component/ScrollBoard.vue'
|
||||||
import BoardBar from "./components/BoardBar.vue";
|
|
||||||
|
|
||||||
import { getTopDevice, getCismaList } from '@/http/cisma'
|
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed, reactive } from 'vue'
|
||||||
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
|
|
||||||
import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
|
import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
|
||||||
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
|
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
|
||||||
|
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
let { t } = useI18n();
|
let { t } = useI18n();
|
||||||
const store = useMicroExhibitionStore()
|
const store = useMicroExhibitionStore()
|
||||||
let ringData = computed(() => {
|
let fqdata = ref({
|
||||||
return [
|
list: [],
|
||||||
{ name: '工作', value: store.devnum.on },
|
rowNum: 3,
|
||||||
{ name: '停机', value: store.devnum.off },
|
|
||||||
{ name: '待机', value: store.devnum.wait },
|
|
||||||
]
|
|
||||||
})
|
})
|
||||||
let timer = null
|
let fzdata = ref({
|
||||||
let dev_caijian_title = ['设备名称', '设备编码','完成率', '稼动率', '状态']
|
list: [],
|
||||||
let dev_tuoxie_title = ['设备编码','完成率', '稼动率', '状态']
|
rowNum: 10,
|
||||||
let dev_value = [
|
})
|
||||||
['全自动针梭两用铺布机', '待机', '40层', '1'],
|
let listdata = reactive([])
|
||||||
['全自动9公分电脑裁床', '待机', '40层', '0'],
|
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) {
|
function getWebsocket(val) {
|
||||||
try {
|
try {
|
||||||
let data = JSON.parse(val)
|
let data = JSON.parse(val)
|
||||||
|
|
||||||
|
|
||||||
if (data.type == 'StateChart') {
|
// if (data.type == 'StateChart') {
|
||||||
store.setDevnum(data.msg)
|
// store.setDevnum(data.msg)
|
||||||
}
|
// }
|
||||||
if (data.type == 'WorkingState') {
|
// if (data.type == 'WorkingState') {
|
||||||
store.changestatus(data.msg)
|
// store.changestatus(data.msg)
|
||||||
}
|
// }
|
||||||
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.log(err);
|
console.log(err);
|
||||||
@ -185,20 +116,13 @@ function errWebsocket(val) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getTopDeviceData()
|
|
||||||
getCismaListData()
|
|
||||||
timer = setInterval(()=>{
|
|
||||||
getTopDeviceData()
|
|
||||||
},5000)
|
|
||||||
connectWebsocket(null, null, getWebsocket, errWebsocket)
|
connectWebsocket(null, null, getWebsocket, errWebsocket)
|
||||||
document.getElementById('app').style.backgroundColor = '#0E0E0E'
|
document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
|
||||||
})
|
})
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
clearInterval(timer)
|
|
||||||
|
|
||||||
closeWebsocket()
|
closeWebsocket()
|
||||||
document.getElementById('app').style.backgroundColor = '#100c2a'
|
document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -208,7 +132,7 @@ onUnmounted(() => {
|
|||||||
height: 1080px;
|
height: 1080px;
|
||||||
width: 1920px;
|
width: 1920px;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
background-color: #0E0E0E;
|
background-color: rgba(0, 11, 18, 1);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -228,199 +152,89 @@ onUnmounted(() => {
|
|||||||
box-sizing: border-box;
|
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 {
|
.right {
|
||||||
height: 980px;
|
width: 1330px;
|
||||||
width: 600px;
|
height: 100%;
|
||||||
|
margin-right: 13px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.center {
|
.rtop {
|
||||||
width: 670px;
|
|
||||||
height: 980px;
|
|
||||||
margin: 0 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lt,
|
|
||||||
.rt {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 450px;
|
height: 715px;
|
||||||
}
|
|
||||||
|
|
||||||
.lb,
|
|
||||||
.rb {
|
|
||||||
width: 100%;
|
|
||||||
height: 530px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ct {
|
|
||||||
width: 100%;
|
|
||||||
height: 110px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-around;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cc {
|
.rbottom {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 350px;
|
height: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cb {
|
.rtleft {
|
||||||
width: 100%;
|
width: 777px;
|
||||||
height: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-item {
|
|
||||||
width: 30%;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-image: url(@/assets/img/u8.png);
|
display: flex;
|
||||||
background-size: 100% 100%;
|
flex-direction: column;
|
||||||
box-sizing: border-box;
|
justify-content: space-between;
|
||||||
padding: 5px;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-item .div_p {
|
.rtltop {
|
||||||
height: 60%;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 120px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtlbottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 580px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: 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 {
|
.rtlbottom .video {
|
||||||
position: absolute;
|
width: 100%;
|
||||||
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%;
|
height: 100%;
|
||||||
display: flex;
|
object-fit: fill;
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.yuan {
|
.rtright {
|
||||||
width: 24px;
|
width: 540px;
|
||||||
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%;
|
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>
|
</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>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="box-title">{{t('messages.LegionDevList')}}</div>
|
<div class="box-title">{{ t('messages.LegionDevList') }}</div>
|
||||||
<div class="box-body">
|
<div class="box-body">
|
||||||
<dv-scroll-board ref="devList" :config="prop.config" @mouseover="dvMouseover" @mouseend="dvmouseleave"
|
<dv-scroll-board ref="devList" :config="prop.config" @mouseover="dvMouseover" @mouseend="dvmouseleave"
|
||||||
@click="dvClick" :style="{
|
@click="dvClick" :style="{
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: '100%',
|
height: '100%',
|
||||||
}" />
|
}" />
|
||||||
<el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click" popper-class="tooltip-class"
|
<el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click"
|
||||||
virtual-triggering :virtual-ref="triggerRef" />
|
popper-class="tooltip-class" virtual-triggering :virtual-ref="triggerRef" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang='ts'>
|
<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 { devListType } from "@/type/InPlantProducts";
|
||||||
import { useRouter } from "vue-router"
|
import { useRouter } from "vue-router"
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
let {t} = useI18n();
|
let { t } = useI18n();
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
config: Object,
|
config: Object,
|
||||||
severdata: Array
|
severdata: Array
|
||||||
@ -30,7 +30,7 @@ let tipcontent = ref(null)
|
|||||||
let visible = ref(false)
|
let visible = ref(false)
|
||||||
//存储弹窗dom
|
//存储弹窗dom
|
||||||
let triggerRef = ref(null)
|
let triggerRef = ref(null)
|
||||||
|
let devList = ref()
|
||||||
/**
|
/**
|
||||||
* @函数功能: 鼠标移入组件方法
|
* @函数功能: 鼠标移入组件方法
|
||||||
* @param {*} value
|
* @param {*} value
|
||||||
@ -38,13 +38,26 @@ let triggerRef = ref(null)
|
|||||||
* @函数备注:
|
* @函数备注:
|
||||||
*/
|
*/
|
||||||
const dvMouseover = (value) => {
|
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
|
triggerRef.value = value.toElement
|
||||||
tipcontent.value = value.toElement.innerText
|
tipcontent.value = value.toElement.innerText
|
||||||
visible.value = true
|
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) => {
|
const dvClick = (value) => {
|
||||||
|
|
||||||
if (value.row) {
|
if (value.row) {
|
||||||
prop.severdata.forEach((res:any) => {
|
prop.severdata.forEach((res: any) => {
|
||||||
if (res.index == value.row[0]) {
|
if (res.index == value.row[0]) {
|
||||||
router.push({
|
router.push({
|
||||||
name: "devItem",
|
name: "devItem",
|
||||||
@ -108,7 +121,7 @@ const dvClick = (value) => {
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style>
|
<style>
|
||||||
.el-popper.tooltip-class{
|
.el-popper.tooltip-class {
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user