|
|
|
@ -1,6 +1,7 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="bg">
|
|
|
|
|
<div class="bg1"></div>
|
|
|
|
|
<div class="title1">白坯车间生产监控看板</div>
|
|
|
|
|
<div class="subTitle" style="left: 27%">成型区</div>
|
|
|
|
|
<div class="subTitle" style="left: 48.9%;">烘房区</div>
|
|
|
|
@ -14,6 +15,7 @@
|
|
|
|
|
<div v-if="isRun.includes(1)">
|
|
|
|
|
<div class="arrow" style="top: 34%;left: 22.1%;transform: rotate(15deg);"></div>
|
|
|
|
|
<div class="arrow" style="top: 39.6%;left: 21.3%;transform: rotate(15deg);"></div>
|
|
|
|
|
<div class="arrow" style="top: 33.6%;left: 15%;transform: rotate(15deg)"></div>
|
|
|
|
|
<div class="arrow" style="top: 39.6%;left: 14.1%;transform: rotate(15deg);"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="isRun.includes(2)">
|
|
|
|
@ -24,9 +26,9 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="isRun.includes(3)">
|
|
|
|
|
<div class="arrow" style="top: 36.3%;left: 68.2%;transform: rotate(348deg);"></div>
|
|
|
|
|
<div class="arrow" style="top: 36.6%;left: 74.2%;transform: rotate(348deg);"></div>
|
|
|
|
|
<div class="arrow" style="top: 36.6%;left: 74.5%;transform: rotate(348deg);"></div>
|
|
|
|
|
<div class="arrow1" style="top: 42%;left: 68.7%;transform: rotate(348deg);"></div>
|
|
|
|
|
<div class="arrow1" style="top: 41.7%;left: 74.8%;transform: rotate(348deg);"></div>
|
|
|
|
|
<div class="arrow1" style="top: 41.7%;left: 75%;transform: rotate(348deg);"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="isRun.includes(4)">
|
|
|
|
|
<div class="arrow" style="top: 54.9%;left: 70.1%;transform: rotate(348deg);"></div>
|
|
|
|
@ -64,38 +66,55 @@
|
|
|
|
|
<div class="box" style="top: 64.3%;left: 85.3%;"></div>
|
|
|
|
|
<div class="box" style="top: 70.6%;left: 85.3%;"></div>
|
|
|
|
|
|
|
|
|
|
<div v-for="(i,k) in hfData" :class="i.isProd? 'hf1':'hf'" :style="`top: ${i.top}%;`">烘房{{ k + 1 }} (产量:10车)
|
|
|
|
|
<div v-if="i.isProd" class="inProd">
|
|
|
|
|
<div v-for="(i,k) in hfData" :class="hfLocation[k].isProd? 'hf1':'hf'"
|
|
|
|
|
:style="`top: ${hfLocation[k].top}%;`">
|
|
|
|
|
<span>
|
|
|
|
|
烘房{{ k + 1 }} (产量:{{ i.quantity }}车)
|
|
|
|
|
</span>
|
|
|
|
|
<div v-if="hfLocation[k].isProd" class="inProd">
|
|
|
|
|
<svg t="1723106843182" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
p-id="1501">
|
|
|
|
|
<path
|
|
|
|
|
d="M148.361503 873.076215a33.27639 33.27639 0 0 1 0.204778-47.150084 33.583556 33.583556 0 0 1 47.354862 0.204778A444.316592 444.316592 0 0 0 511.944454 957.291078c104.436669 0 203.293143-35.938501 280.852728-99.317224l35.580139-32.81564a33.583556 33.583556 0 0 1 47.303668 1.791806 33.27639 33.27639 0 0 1-1.791806 47.09889l-37.064778 34.146695A511.176537 511.176537 0 0 1 511.944454 1023.99744a511.43251 511.43251 0 0 1-363.582951-150.921225z m863.49671-248.497838a33.481167 33.481167 0 0 1-65.426501-14.385639 443.139119 443.139119 0 0 0-299.129144-518.394954A33.327584 33.327584 0 1 1 667.575568 28.265477a509.58951 509.58951 0 0 1 344.180256 596.3129zM275.374922 138.640701a443.036731 443.036731 0 0 0-198.788032 467.456481 33.481167 33.481167 0 0 1-65.52889 13.771306A509.999065 509.999065 0 0 1 279.624061 59.596478C328.821923 31.439533 431.415591-4.191801 507.336954 0.620477c8.549472-1.689417 17.96925 0 25.597223 5.938555 6.4505 5.119445 9.982917 12.081889 11.109194 20.273001 0.255972 2.713306-0.409556 5.221833-1.023889 8.037528a22.832723 22.832723 0 0 1-7.781555 12.133083L341.262173 263.759926a28.208139 28.208139 0 0 1-29.999945 6.91125 30.204723 30.204723 0 0 1-20.836139-23.703028l-15.051167-108.378641z m-4.965861 785.322793c-2.969278-0.46075-7.269611 31.740556-34.402668 17.918056-48.225168-24.624528-138.225003-97.781391-174.93142-168.736892a31.331001 31.331001 0 0 1-8.037528-24.931695c1.023889-8.191111 5.221833-14.846389 11.62114-19.965834 2.201361-1.638222 4.658695-2.354944 7.423194-3.276444a22.832723 22.832723 0 0 1 14.385639 0.409555l285.7162 54.675668c10.392472 1.945389 18.839556 10.750834 21.399278 22.116a30.204723 30.204723 0 0 1-9.573361 30.102334l-113.651669 91.689252z m716.671041-436.688619c1.126278 2.815694 30.921445-10.085306 33.020417 20.273 3.737195 54.061334-12.542639 168.890475-54.522084 236.825504a31.331001 31.331001 0 0 1-17.201334 19.812251 29.999945 29.999945 0 0 1-23.139889 0.307167c-2.559722-1.023889-4.402722-2.815694-6.655278-4.709889a22.832723 22.832723 0 0 1-7.013639-12.54264l-100.341113-273.071171a28.208139 28.208139 0 0 1 7.986333-29.692779 30.204723 30.204723 0 0 1 30.716668-7.320805l137.149919 50.170556z"
|
|
|
|
|
fill="#fff" p-id="1502">
|
|
|
|
|
d="M148.361503 873.076215a33.27639 33.27639 0 0 1 0.204778-47.150084 33.583556 33.583556 0 0 1 47.354862 0.204778A444.316592 444.316592 0 0 0 511.944454 957.291078c104.436669 0 203.293143-35.938501 280.852728-99.317224l35.580139-32.81564a33.583556 33.583556 0 0 1 47.303668 1.791806 33.27639 33.27639 0 0 1-1.791806 47.09889l-37.064778 34.146695A511.176537 511.176537 0 0 1 511.944454 1023.99744a511.43251 511.43251 0 0 1-363.582951-150.921225z m863.49671-248.497838a33.481167 33.481167 0 0 1-65.426501-14.385639 443.139119 443.139119 0 0 0-299.129144-518.394954A33.327584 33.327584 0 1 1 667.575568 28.265477a509.58951 509.58951 0 0 1 344.180256 596.3129zM275.374922 138.640701a443.036731 443.036731 0 0 0-198.788032 467.456481 33.481167 33.481167 0 0 1-65.52889 13.771306A509.999065 509.999065 0 0 1 279.624061 59.596478C328.821923 31.439533 431.415591-4.191801 507.336954 0.620477c8.549472-1.689417 17.96925 0 25.597223 5.938555 6.4505 5.119445 9.982917 12.081889 11.109194 20.273001 0.255972 2.713306-0.409556 5.221833-1.023889 8.037528a22.832723 22.832723 0 0 1-7.781555 12.133083L341.262173 263.759926a28.208139 28.208139 0 0 1-29.999945 6.91125 30.204723 30.204723 0 0 1-20.836139-23.703028l-15.051167-108.378641z m-4.965861 785.322793c-2.969278-0.46075-7.269611 31.740556-34.402668 17.918056-48.225168-24.624528-138.225003-97.781391-174.93142-168.736892a31.331001 31.331001 0 0 1-8.037528-24.931695c1.023889-8.191111 5.221833-14.846389 11.62114-19.965834 2.201361-1.638222 4.658695-2.354944 7.423194-3.276444a22.832723 22.832723 0 0 1 14.385639 0.409555l285.7162 54.675668c10.392472 1.945389 18.839556 10.750834 21.399278 22.116a30.204723 30.204723 0 0 1-9.573361 30.102334l-113.651669 91.689252z m716.671041-436.688619c1.126278 2.815694 30.921445-10.085306 33.020417 20.273 3.737195 54.061334-12.542639 168.890475-54.522084 236.825504a31.331001 31.331001 0 0 1-17.201334 19.812251 29.999945 29.999945 0 0 1-23.139889 0.307167c-2.559722-1.023889-4.402722-2.815694-6.655278-4.709889a22.832723 22.832723 0 0 1-7.013639-12.54264l-100.341113-273.071171a28.208139 28.208139 0 0 1 7.986333-29.692779 30.204723 30.204723 0 0 1 30.716668-7.320805l137.149919 50.170556z"
|
|
|
|
|
fill="#fff" p-id="1502">
|
|
|
|
|
</path>
|
|
|
|
|
</svg>
|
|
|
|
|
生产中
|
|
|
|
|
</div>
|
|
|
|
|
<div class="infoModel">
|
|
|
|
|
<div class="title">设备名称</div>
|
|
|
|
|
<div class="infoModel" :style="`display:${loopIndex === k?'inline-block':''}`">
|
|
|
|
|
<div class="title">{{ i.equName }}</div>
|
|
|
|
|
<div class="equipmentOutput"><span style="color: #fff9">设备产量:</span> 10</div>
|
|
|
|
|
<div class="equipmentInfo"><span style="color: #fff9">设备信息:</span> 10</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="equipment" v-for="i in equipmentData" :style="`top: ${i.top}%;left: ${i.left}%;`">
|
|
|
|
|
<div :class="i.isRight?`equipmentName1`:`equipmentName`"><span>设备名称</span></div>
|
|
|
|
|
<div class="equipment" v-for="(i,k) in equipmentData"
|
|
|
|
|
:style="`top: ${equipmentLocation[k].top}%;left: ${equipmentLocation[k].left}%;`">
|
|
|
|
|
<div :class="equipmentLocation[k].isRight?`equipmentName1`:`equipmentName`"
|
|
|
|
|
:style="`display:${loopIndex === 18+k?'inline-block':''}`">
|
|
|
|
|
<div class="title">{{ i.equName }}</div>
|
|
|
|
|
<div class="equipmentOutput"><span style="color: #fff9">设备产量:</span> 10</div>
|
|
|
|
|
<div class="equipmentInfo"><span style="color: #fff9">设备信息:</span> 10</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div :class="i.isRun ? 'ring':'ring1'" :style="`top:${i.top}%;left:${i.left}%`" v-for="i in ringLocation"></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div :class="`${i.isGoods? 'agv2':'agv1'}`" v-for="i in agvData"
|
|
|
|
|
:style="`${getLocation(i.x,i.y)}transform: rotate(45deg);`"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
import * as TWEEN from '@tweenjs/tween.js'
|
|
|
|
|
import {getHourProductionList} from "../../api/board/cs2";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
hfData: [
|
|
|
|
|
loopIndex: 0,
|
|
|
|
|
hfLocation: [
|
|
|
|
|
{
|
|
|
|
|
top: 27.5,
|
|
|
|
|
isProd: false
|
|
|
|
@ -129,11 +148,11 @@ export default {
|
|
|
|
|
isProd: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 45.3,
|
|
|
|
|
top: 45.5,
|
|
|
|
|
isProd: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 48.9,
|
|
|
|
|
top: 49.1,
|
|
|
|
|
isProd: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
@ -149,51 +168,246 @@ export default {
|
|
|
|
|
isProd: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 60.7,
|
|
|
|
|
top: 60.8,
|
|
|
|
|
isProd: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 62.7,
|
|
|
|
|
top: 62.9,
|
|
|
|
|
isProd: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 65,
|
|
|
|
|
isProd: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 67.1,
|
|
|
|
|
isProd: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 69.4,
|
|
|
|
|
isProd: false
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
ringLocation: [
|
|
|
|
|
{
|
|
|
|
|
top: 72,
|
|
|
|
|
left: 9.9,
|
|
|
|
|
isRun: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 62.5,
|
|
|
|
|
left: 11.5,
|
|
|
|
|
isRun: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 44.5,
|
|
|
|
|
left: 14.7,
|
|
|
|
|
isRun: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 37.5,
|
|
|
|
|
left: 16,
|
|
|
|
|
isRun: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 71.5,
|
|
|
|
|
left: 18,
|
|
|
|
|
isRun: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 62.5,
|
|
|
|
|
left: 19.5,
|
|
|
|
|
isRun: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 44.5,
|
|
|
|
|
left: 22,
|
|
|
|
|
isRun: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 37.5,
|
|
|
|
|
left: 23,
|
|
|
|
|
isRun: true
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
isRun: [1, 2, 3, 4],
|
|
|
|
|
equipmentData: [
|
|
|
|
|
equipmentLocation: [
|
|
|
|
|
{
|
|
|
|
|
top: 25.5,
|
|
|
|
|
left: 8.4,
|
|
|
|
|
top: 63.5,
|
|
|
|
|
left: 6.4,
|
|
|
|
|
isRight: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 50,
|
|
|
|
|
left: 5.5,
|
|
|
|
|
top: 54,
|
|
|
|
|
left: 8,
|
|
|
|
|
isRight: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 29,
|
|
|
|
|
left: 62.5,
|
|
|
|
|
top: 36,
|
|
|
|
|
left: 11,
|
|
|
|
|
isRight: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 49,
|
|
|
|
|
left: 64,
|
|
|
|
|
top: 29,
|
|
|
|
|
left: 12,
|
|
|
|
|
isRight: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 63,
|
|
|
|
|
left: 14.5,
|
|
|
|
|
isRight: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 54,
|
|
|
|
|
left: 16,
|
|
|
|
|
isRight: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 36,
|
|
|
|
|
left: 18,
|
|
|
|
|
isRight: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 29,
|
|
|
|
|
left: 19,
|
|
|
|
|
isRight: true
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
hfData: [],
|
|
|
|
|
equipmentData: [],
|
|
|
|
|
agvData: [
|
|
|
|
|
{
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 0,
|
|
|
|
|
isGoods: false,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
x: 0,
|
|
|
|
|
y: 1,
|
|
|
|
|
isGoods: true,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
x: 1,
|
|
|
|
|
y: 0,
|
|
|
|
|
isGoods: false,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
x: 1,
|
|
|
|
|
y: 1,
|
|
|
|
|
isGoods: true,
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {},
|
|
|
|
|
methods: {
|
|
|
|
|
getLocation(x, y) {
|
|
|
|
|
let a = (66 + (90 - 66) * y) * x
|
|
|
|
|
let b = 12 * y
|
|
|
|
|
let xLocation = 16 - b + a
|
|
|
|
|
let yLocation = 22 + (84 - 22) * y
|
|
|
|
|
return ` left: ${xLocation}%;top: ${yLocation}%;`
|
|
|
|
|
},
|
|
|
|
|
getData() {
|
|
|
|
|
getHourProductionList().then(e => {
|
|
|
|
|
let hfArr = []
|
|
|
|
|
let equipmentArr = []
|
|
|
|
|
for (let i = 0; i < 18; i++) {
|
|
|
|
|
hfArr.push(e.filter(v => v.equName.includes('烘房')).filter(v => v.equCode === `H${i + 1}`)?.[0])
|
|
|
|
|
}
|
|
|
|
|
for (let i = 0; i < 8; i++) {
|
|
|
|
|
equipmentArr.push(e.filter(v => v.equName.includes('成型机')).filter(v => v.equCode === `C${i + 1}`)?.[0])
|
|
|
|
|
}
|
|
|
|
|
this.hfData = hfArr
|
|
|
|
|
this.equipmentData = equipmentArr
|
|
|
|
|
console.log(equipmentArr)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getData()
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
this.loopIndex = (this.loopIndex + 1) % 26
|
|
|
|
|
}, 1000 * 5)
|
|
|
|
|
let agv = [
|
|
|
|
|
{
|
|
|
|
|
top: 22,
|
|
|
|
|
left: 16
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 22,
|
|
|
|
|
left: 82
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 84,
|
|
|
|
|
left: 4
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 84,
|
|
|
|
|
left: 94
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
width: 12,
|
|
|
|
|
height: 62
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
width1: 66,
|
|
|
|
|
width2: 90
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
let cs = [
|
|
|
|
|
[0, 0],
|
|
|
|
|
[10, 10],
|
|
|
|
|
[20, 20],
|
|
|
|
|
[30, 30],
|
|
|
|
|
[40, 40],
|
|
|
|
|
[50, 50],
|
|
|
|
|
[60, 60],
|
|
|
|
|
[70, 70],
|
|
|
|
|
[80, 80],
|
|
|
|
|
[90, 90],
|
|
|
|
|
[100, 100],
|
|
|
|
|
]
|
|
|
|
|
let time = 10 * 1000
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
this.agvData.forEach(e => {
|
|
|
|
|
new TWEEN.Tween(e).to({x: Math.random(), y: Math.random()}, time).start()
|
|
|
|
|
})
|
|
|
|
|
}, time)
|
|
|
|
|
|
|
|
|
|
function animate() {
|
|
|
|
|
requestAnimationFrame(animate)
|
|
|
|
|
TWEEN.update()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
animate()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
.agv1, .agv2 {
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 2vw;
|
|
|
|
|
height: 1.24vw;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agv1 {
|
|
|
|
|
background-image: url("~@/assets/board/agv1.png");
|
|
|
|
|
top: 30%;
|
|
|
|
|
left: 30%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.agv2 {
|
|
|
|
|
background-image: url("~@/assets/board/agv2.png");
|
|
|
|
|
top: 40%;
|
|
|
|
|
left: 40%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bg {
|
|
|
|
|
background-image: url("~@/assets/board/车间监控系统 - 04.jpg");
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background-image: url("~@/assets/board/bg.jpg");
|
|
|
|
|
//background-image: url("~@/assets/board/车间监控系统 - 04-2.jpg");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
position: absolute;
|
|
|
|
@ -201,6 +415,17 @@ export default {
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bg1 {
|
|
|
|
|
background-image: url("~@/assets/board/车间监控系统 - 04.png");
|
|
|
|
|
background-size: 101.9% 102.2%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
top: 9.3%;
|
|
|
|
|
left: -0.8%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title1 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 1%;
|
|
|
|
@ -330,9 +555,9 @@ export default {
|
|
|
|
|
line-height: 1vh;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&:hover .infoModel {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
//&:hover .infoModel {
|
|
|
|
|
// display: inline-block;
|
|
|
|
|
//}
|
|
|
|
|
|
|
|
|
|
.infoModel {
|
|
|
|
|
position: absolute;
|
|
|
|
@ -357,7 +582,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 7%;
|
|
|
|
|
top: 10%;
|
|
|
|
|
left: 7%;
|
|
|
|
|
font-size: 1vw;
|
|
|
|
|
letter-spacing: 3px;
|
|
|
|
@ -413,22 +638,39 @@ export default {
|
|
|
|
|
|
|
|
|
|
.equipment {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 25%;
|
|
|
|
|
height: 35%;
|
|
|
|
|
width: 9%;
|
|
|
|
|
height: 10%;
|
|
|
|
|
|
|
|
|
|
&:hover .equipmentName, &:hover .equipmentName1 {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
//&:hover .equipmentName, &:hover .equipmentName1 {
|
|
|
|
|
// display: inline-block;
|
|
|
|
|
//}
|
|
|
|
|
|
|
|
|
|
.equipmentName, .equipmentName1 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 12.7vw;
|
|
|
|
|
height: 4.4vh;
|
|
|
|
|
width: 14.1vw;
|
|
|
|
|
height: 14.7vh;
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
.equipmentOutput {
|
|
|
|
|
color: #fff;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 45%;
|
|
|
|
|
font-size: 0.9vw;
|
|
|
|
|
letter-spacing: 3px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equipmentInfo {
|
|
|
|
|
color: #fff;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 70%;
|
|
|
|
|
font-size: 0.9vw;
|
|
|
|
|
letter-spacing: 3px;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 5%;
|
|
|
|
|
line-height: 4.4vh;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 0.9vw;
|
|
|
|
@ -442,7 +684,7 @@ export default {
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-image: url("~@/assets/board/弹窗2-名称.png");
|
|
|
|
|
background-image: url("~@/assets/board/弹窗1-设备信息.png");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
@ -450,14 +692,38 @@ export default {
|
|
|
|
|
|
|
|
|
|
.equipmentName {
|
|
|
|
|
top: 4%;
|
|
|
|
|
left: -37%;
|
|
|
|
|
left: -92%;
|
|
|
|
|
|
|
|
|
|
.equipmentOutput {
|
|
|
|
|
left: 7%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equipmentInfo {
|
|
|
|
|
left: 7%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
left: 5%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equipmentName1 {
|
|
|
|
|
top: 9%;
|
|
|
|
|
left: 73%;
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
|
|
|
|
|
.equipmentOutput {
|
|
|
|
|
text-align: right;
|
|
|
|
|
left: 25%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.equipmentInfo {
|
|
|
|
|
text-align: right;
|
|
|
|
|
left: 25%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
text-align: right;
|
|
|
|
|
right: 5%;
|
|
|
|
|
}
|
|
|
|
@ -468,5 +734,32 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.ring, .ring1 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 10px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
border-radius: 50%; /* 使边框形成一个圆形 */
|
|
|
|
|
box-sizing: border-box; /* 防止宽度和高度包含边框 */
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
width: 50%;
|
|
|
|
|
height: 50%;
|
|
|
|
|
background: #fff0; /* 背景色为白色,形成内部空心的效果 */
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ring{
|
|
|
|
|
border: 1px solid #90EE90; /* 设置边框为黑色,宽度为5px */
|
|
|
|
|
box-shadow: 0 0 3px 3px #90EE9099;
|
|
|
|
|
}
|
|
|
|
|
.ring1{
|
|
|
|
|
border: 1px solid #ff603b; /* 设置边框为黑色,宽度为5px */
|
|
|
|
|
box-shadow: 0 0 3px 3px #ff603b99;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|