微工厂大屏更新，未完成
This commit is contained in:
hzz
parent
167ff82757
commit
01b53f3c4d
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": {
|
||||||
|
|||||||
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>
|
||||||
|
|
||||||
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>
|
||||||
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/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 |
@ -1,114 +1,52 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: hzz hzz
|
||||||
|
* @Date: 2023-12-05 13:30:45
|
||||||
|
* @LastEditors: hzz hzz
|
||||||
|
* @LastEditTime: 2023-12-05 16:54:15
|
||||||
|
* @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="'缝前设备'"></BoardVue>
|
||||||
<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>
|
</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"></div>
|
||||||
<BarChart style="width: 100%;height: 100%;" :xData="store.tuoxie.chart.xData"
|
<div class="rtlbottom"></div>
|
||||||
:seriesData="store.tuoxie.chart.series"></BarChart>
|
</div>
|
||||||
</DevCard>
|
<div class="rtright">
|
||||||
</NewBoder>
|
<BoardVue :title="'缝中设备'"></BoardVue>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="rb">
|
<div class="rbottom">
|
||||||
<NewBoder :title="'座椅面套生产线'">
|
右下
|
||||||
<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 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 { 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"
|
||||||
@ -116,64 +54,27 @@ 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(() => {
|
|
||||||
return [
|
|
||||||
{ name: '工作', value: store.devnum.on },
|
|
||||||
{ name: '停机', value: store.devnum.off },
|
|
||||||
{ name: '待机', value: store.devnum.wait },
|
|
||||||
]
|
|
||||||
})
|
|
||||||
let timer = null
|
let timer = null
|
||||||
let dev_caijian_title = ['设备名称', '设备编码','完成率', '稼动率', '状态']
|
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) {
|
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 +86,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 +102,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,111 +122,52 @@ 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-tip-type-item {
|
.rbottom {
|
||||||
width: 33%;
|
width: 100%;
|
||||||
|
height: 250px;
|
||||||
|
background: #bfe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rtleft {
|
||||||
|
width: 777px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -340,87 +175,26 @@ h2 {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.yuan {
|
.rtltop {
|
||||||
width: 24px;
|
width: 100%;
|
||||||
height: 24px;
|
height: 120px;
|
||||||
border-radius: 50%;
|
background: #bff;
|
||||||
|
}
|
||||||
|
.rtlbottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 580px;
|
||||||
|
background: #bf1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.green {
|
.rtright {
|
||||||
background-color: #7CFFB2;
|
width: 540px;
|
||||||
}
|
|
||||||
|
|
||||||
.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>
|
||||||
Loading…
Reference in New Issue
Block a user