You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1012 lines
27 KiB
Vue
1012 lines
27 KiB
Vue
<template>
|
|
<div>
|
|
<div class="bg">
|
|
<div class="title1">黑蚊香车间生产监控看板</div>
|
|
|
|
<!-- 新增横向滚动标题 -->
|
|
<div class="scroll-title-container">
|
|
<div class="scroll-title-content">
|
|
{{ scrollText }} <!-- Vue数据绑定 -->
|
|
<!-- 如需静态文字可直接写在这里 -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="floorNum floorNum1">1F</div>
|
|
<div class="floorNum floorNum2">2F</div>
|
|
<div class="floorNum floorNum3">3F</div>
|
|
<div class="floorNum floorNum4" @click="$router.push('/cs2')">4F</div>
|
|
<div class="floorNum floorNum5">5F</div>
|
|
<div class="floorNum floorNum6">6F</div>
|
|
<div class="output" v-for="i in outputData" :style="`left:${i.left}%`"><span>{{i.no}}</span></div>
|
|
<div v-for="i in equipmentData" class="equipment" :style="`left: ${i.left}%`">
|
|
<div :class="i.isRight?'equipmentName1':'equipmentName'"><span>设备名称</span></div>
|
|
</div>
|
|
|
|
<div class="arrows" v-for="i in arrowData" v-if="false">
|
|
<div class="oneAnR" :style="`left:${i.left-3}%`">
|
|
<div class="oneAn">
|
|
<div class="wx" :style="`top: -1%;left:49.5%`"></div>
|
|
<div class="arrow" :style="`top: 7%;left:49.5%`"></div>
|
|
<div class="wx" :style="`top: 29%;left:49.5%`"></div>
|
|
<div class="arrow" :style="`top: 37%;left:49.5%`"></div>
|
|
<div class="wx" :style="`top: 59%;left:49.5%`"></div>
|
|
<div class="arrow" :style="`top: 67%;left:49.5%`"></div>
|
|
<div class="wx" :style="`top: 89%;left:49.5%`"></div>
|
|
</div>
|
|
</div>
|
|
<div class="twoAnR" :style="`left:${i.left-3}%`">
|
|
<div class="twoAn">
|
|
<div class="wxh" :style="`top: -0.9%;left:49%`"></div>
|
|
<div class="arrow" :style="`top: 6%;left:49%`"></div>
|
|
<div class="wxh" :style="`top: 15.2%;left:49%`"></div>
|
|
<div class="arrow" :style="`top: 22.1%;left:49%`"></div>
|
|
<div class="wxh" :style="`top: 31.3%;left:49%`"></div>
|
|
<div class="arrow" :style="`top:38.2%;left:49%`"></div>
|
|
<div class="wxh" :style="`top: 47.4%;left:49%`"></div>
|
|
<div class="arrow" :style="`top: 54.3%;left:49%`"></div>
|
|
<div class="wxh" :style="`top: 63.5%;left:49%`"></div>
|
|
<div class="arrow" :style="`top: 70.4%;left:49%`"></div>
|
|
<div class="wxh" :style="`top: 79.6%;left:49%`"></div>
|
|
<div class="arrow" :style="`top: 86.5%;left:49%`"></div>
|
|
<div class="wxh" :style="`top: 95.7%;left:49%`"></div>
|
|
</div>
|
|
</div>
|
|
<div class="box" :style="`top: 74.5%;left:${i.left}%`"></div>
|
|
<div class="box" :style="`top: 78.8%;left:${i.left}%`"></div>
|
|
</div>
|
|
|
|
<div class="arrows1" v-if="isRun.includes(1)">
|
|
<div class="arrow" :style="`top: 38.5%;left: 35.2%;transform: rotate(0)`"></div>
|
|
<div class="arrow" :style="`top: 42%;left: 35%;transform: rotate(0deg)`"></div>
|
|
<div class="arrow" :style="`top: 48%;left: 34.5%;transform: rotate(0)`"></div>
|
|
<div class="arrow" :style="`top: 52%;left: 34.2%;transform: rotate(0)`"></div>
|
|
<div class="arrow" :style="`top: 57%;left: 34%;transform: rotate(0)`"></div>
|
|
<div class="arrow" :style="`top: 62%;left: 33.8%;transform: rotate(0)`"></div>
|
|
<div class="arrow" :style="`top: 66%;left: 33.1%;transform: rotate(0deg);`"></div>
|
|
</div>
|
|
|
|
<div class="arrows1" v-if="isRun.includes(2)">
|
|
<div class="arrow" :style="`top: 38.5%;left: 39.2%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 42%;left: 39%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 48%;left: 39.2%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 52%;left: 39.2%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 57%;left: 39%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 62%;left: 38.7%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 66%;left: 39%;transform: rotate(0deg);`"></div>
|
|
</div>
|
|
|
|
<div class="arrows1" v-if="isRun.includes(3)">
|
|
<div class="arrow" :style="`top: 38.5%;left: 46.2%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 42%;left: 46.3%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 48%;left: 46.2%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 52%;left: 45.8%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 57%;left: 45.8%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 62%;left: 45.9%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 66%;left: 45.4%;transform: rotate(0deg);`"></div>
|
|
</div>
|
|
|
|
<div class="arrows1" v-if="isRun.includes(4)">
|
|
<div class="arrow" :style="`top: 38.5%;left: 50.5%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 42%;left: 50.5%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 48%;left: 50.9%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 52%;left: 51.1%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 57%;left: 51.1%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 62%;left: 51.2%;transform: rotate(0deg);`"></div>
|
|
<div class="arrow" :style="`top: 66%;left: 51.7%;transform: rotate(0deg);`"></div>
|
|
</div>
|
|
|
|
<div class="arrows1" v-if="isRun.includes(5)">
|
|
<div class="arrow" :style="`top: 38.5%;left: 57.2%;transform: rotate(358deg);`"></div>
|
|
<div class="arrow" :style="`top: 42%;left: 57.5%;transform: rotate(358deg);`"></div>
|
|
<div class="arrow" :style="`top: 48%;left: 57.5%;transform: rotate(358deg);`"></div>
|
|
<div class="arrow" :style="`top: 52%;left: 57.5%;transform: rotate(358deg);`"></div>
|
|
<div class="arrow" :style="`top: 57%;left: 57.8%;transform: rotate(358deg);`"></div>
|
|
<div class="arrow" :style="`top: 62%;left: 58%;transform: rotate(358deg);`"></div>
|
|
<div class="arrow" :style="`top: 66%;left: 57.7%;transform: rotate(358deg);`"></div>
|
|
</div>
|
|
|
|
<div class="arrows1" v-if="isRun.includes(6)">
|
|
<div class="arrow" :style="`top: 38.5%;left: 61.2%;transform: rotate(355deg);`"></div>
|
|
<div class="arrow" :style="`top: 42%;left: 61.5%;transform: rotate(355deg);`"></div>
|
|
<div class="arrow" :style="`top: 48%;left: 62.2%;transform: rotate(355deg);`"></div>
|
|
<div class="arrow" :style="`top: 52%;left: 62.5%;transform: rotate(355deg);`"></div>
|
|
<div class="arrow" :style="`top: 57%;left: 62.8%;transform: rotate(355deg);`"></div>
|
|
<div class="arrow" :style="`top: 62%;left: 63.1%;transform: rotate(355deg);`"></div>
|
|
<div class="arrow" :style="`top: 66%;left: 63.9%;transform: rotate(355deg);`"></div>
|
|
</div>
|
|
|
|
<div class="arrows1" v-if="isRun.includes(7)">
|
|
<div class="arrow" :style="`top: 38.5%;l;left: 68%;transform: rotate(350deg);`"></div>
|
|
<div class="arrow" :style="`top: 42%;left: 68.5%;transform: rotate(350deg);`"></div>
|
|
<div class="arrow" :style="`top: 48%;left: 68.8%;transform: rotate(350deg);`"></div>
|
|
<div class="arrow" :style="`top: 52%;left: 69%;transform: rotate(350deg);`"></div>
|
|
<div class="arrow" :style="`top: 57%;left: 69.5%;transform: rotate(350deg);`"></div>
|
|
<div class="arrow" :style="`top: 62%;left: 70%;transform: rotate(350deg);`"></div>
|
|
<div class="arrow" :style="`top: 66%;left: 70%;transform: rotate(350deg);`"></div>
|
|
</div>
|
|
|
|
<div class="arrows1" v-if="isRun.includes(8)">
|
|
<div class="arrow" :style="`top: 38.5%;left: 72.2%;transform: rotate(345deg);`"></div>
|
|
<div class="arrow" :style="`top: 42%;left: 72.7%;transform: rotate(345deg);`"></div>
|
|
<div class="arrow" :style="`top: 48%;left: 73.5%;transform: rotate(345deg);`"></div>
|
|
<div class="arrow" :style="`top: 52%;left: 74.1%;transform: rotate(345deg);`"></div>
|
|
<div class="arrow" :style="`top: 57%;left: 74.8%;transform: rotate(345deg);`"></div>
|
|
<div class="arrow" :style="`top: 62%;left: 75.3%;transform: rotate(345deg);`"></div>
|
|
<div class="arrow" :style="`top: 66%;left: 76.1%;transform: rotate(345deg);`"></div>
|
|
</div>
|
|
|
|
|
|
<div class="bottomArrows" v-for="(i,k) in 9">
|
|
<div class="arrow" :style="`top: 72.5%;left: ${31.9 + 5.2*k}%;`"></div>
|
|
</div>
|
|
<div class="bottomArrows" v-for="(i,k) in 5">
|
|
<div class="arrow" :style="`top: 73.7%;left: ${50.5 - 5.2*k}%;`"></div>
|
|
</div>
|
|
<!-- <div class="fixed-table-container">-->
|
|
<!-- <el-table ref="autoScrollTable" :data="tableData" style="width: 80%" height="200" class="transparent-table">-->
|
|
<!-- <el-table-column prop="time" label="时间" width="120"></el-table-column>-->
|
|
<!-- <el-table-column prop="device" label="设备" width="120"></el-table-column>-->
|
|
<!-- </el-table>-->
|
|
<!-- </div>-->
|
|
|
|
<div v-for="i in infoData " class="info"
|
|
:style="`width: ${i.width}%; height: ${i.height}%;top: ${i.top}%;left: ${i.left}%;transform: rotate(${i.rotate}deg);
|
|
background: ${i.alpha};border-radius: ${i.radius}%; `">
|
|
<div :class="i.isRight?'infoModel':'infoModel'" :style="`transform: rotate(${360 -i.rotate}deg);`">
|
|
<div class="title">{{ i.equipmentName }}</div>
|
|
<div style="color: #fff;
|
|
position: absolute;
|
|
top: 65%;
|
|
font-size: 0.6vw;
|
|
letter-spacing: 3px;
|
|
left: 7%;"><span style="color: #fff9">产品:</span> <span>{{ i.productName }}</span></div>
|
|
<div style="color: #fff;
|
|
position: absolute;
|
|
top: 90%;
|
|
font-size: 0.6vw;
|
|
letter-spacing: 3px;
|
|
left: 7%;"><span style="color: #fff9">产量:</span> <span>{{ i.quantityFeedback }}</span></div>
|
|
<div style="color: #fff;
|
|
position: absolute;
|
|
top: 110%;
|
|
font-size: 0.6vw;
|
|
letter-spacing: 3px;
|
|
left: 7%;"><span style="color: #fff9">订单号:</span> <span>{{ i.workorderCodeSap }}</span></div>
|
|
<div style="color: #fff;
|
|
position: absolute;
|
|
top: 130%;
|
|
font-size: 0.6vw;
|
|
letter-spacing: 3px;
|
|
left: 7%;"><span style="color: #fff9">工单日期:</span> <span>{{ i.productDate }}</span></div>
|
|
<div style="color: #fff;
|
|
position: absolute;
|
|
top: 155%;
|
|
font-size: 0.6vw;
|
|
letter-spacing: 3px;
|
|
left: 7%;"><span style="color: #fff9">组长:</span> <span>{{ i.teamLeaderNames }}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
import {getDailyReportNew} from "../../api/mes/reportWork";
|
|
import moment from 'moment';
|
|
import { getCsRepairlist } from "@/api/device/faultReport";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
url:"ws://localhost:9208/websocket/message",
|
|
message: "",
|
|
text_content: "",
|
|
scrollText: "",
|
|
repairOrders:[],
|
|
ws: null,
|
|
timer: null,
|
|
// 查询参数
|
|
queryParams: {
|
|
timeArray: [],
|
|
productDateStart: null,
|
|
productDateEnd: null,
|
|
sapName: null,
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
workCenter: null,
|
|
factoryCode: null
|
|
},
|
|
scrollInterval: null,
|
|
isRun: [1, 2, 3, 4, 5, 6, 7, 8,9],
|
|
infoData: [
|
|
{
|
|
top: 31,
|
|
left: 13.6,
|
|
rotate: 14,
|
|
width: 2,
|
|
height:40,
|
|
radius:20,
|
|
isRight: false,
|
|
alpha:'transparent',
|
|
equipmentName: "包装线11"
|
|
},
|
|
{
|
|
top: 31,
|
|
left: 20.3,
|
|
rotate: 14,
|
|
width: 2,
|
|
height:40,
|
|
radius:20,
|
|
isRight: false,
|
|
alpha:'transparent',
|
|
equipmentName: "包装线10"
|
|
},
|
|
{
|
|
top: 31,
|
|
left: 24.3,
|
|
rotate: 10,
|
|
width: 2,
|
|
height:40,
|
|
radius:20,
|
|
isRight: false,
|
|
alpha:'transparent',
|
|
equipmentName: "包装线09"
|
|
},
|
|
{
|
|
top: 31,
|
|
left: 33.7,
|
|
rotate: 7,
|
|
width: 2,
|
|
height:40,
|
|
radius:20,
|
|
isRight: false,
|
|
alpha:'transparent',
|
|
equipmentName: "包装线08"
|
|
},
|
|
{
|
|
top: 31,
|
|
left: 38.5,
|
|
rotate: 3,
|
|
width: 2,
|
|
height:40,
|
|
isRight: true,
|
|
alpha:'transparent',
|
|
equipmentName: "包装线07"
|
|
},
|
|
{
|
|
top: 31,
|
|
left: 45.1,
|
|
rotate: 2,
|
|
width: 2,
|
|
height:40,
|
|
isRight: false,
|
|
alpha:'transparent',
|
|
equipmentName: "包装线06"
|
|
},
|
|
{
|
|
top: 31,
|
|
left: 50.5,
|
|
rotate: 358,
|
|
width: 2,
|
|
height:40,
|
|
isRight: true,
|
|
alpha:'transparent',
|
|
equipmentName: "包装线05"
|
|
},
|
|
{
|
|
top: 31,
|
|
left: 56.8,
|
|
rotate: 357,
|
|
width: 2,
|
|
height:40,
|
|
isRight: false,
|
|
alpha:'transparent',
|
|
equipmentName: "包装线04"
|
|
},
|
|
{
|
|
top: 31,
|
|
left: 61.5,
|
|
rotate: 354,
|
|
width: 2,
|
|
height:40,
|
|
isRight: true,
|
|
alpha:'transparent',
|
|
equipmentName: "包装线03"
|
|
},
|
|
{
|
|
top: 31,
|
|
left: 68.1,
|
|
rotate: 351,
|
|
width: 2,
|
|
height:40,
|
|
isRight: false,
|
|
alpha:'transparent',
|
|
equipmentName: "包装线02"
|
|
},
|
|
{
|
|
top: 31,
|
|
left: 72.9,
|
|
rotate: 348,
|
|
width: 2,
|
|
height:40,
|
|
isRight: false,
|
|
alpha:'transparent',
|
|
equipmentName: "包装线01"
|
|
},
|
|
],
|
|
equipmentData: [
|
|
],
|
|
outputData: [
|
|
{
|
|
left: 13.6,
|
|
no:"XL11"
|
|
},
|
|
{
|
|
left: 20.3,
|
|
no:"XL10"
|
|
},
|
|
{
|
|
left: 25.3,
|
|
no:"XL09"
|
|
},
|
|
{
|
|
left: 33.3,
|
|
no:"XL08"
|
|
},
|
|
{
|
|
left: 37.7,
|
|
no:"XL07"
|
|
},
|
|
{
|
|
left: 43.9,
|
|
no:"XL06"
|
|
},
|
|
{
|
|
left: 48.5,
|
|
no:"XL05"
|
|
},
|
|
{
|
|
left: 54.5,
|
|
no:"XL04"
|
|
},
|
|
{
|
|
left: 59,
|
|
no:"XL03"
|
|
},
|
|
{
|
|
left: 65,
|
|
no:"XL02"
|
|
},
|
|
{
|
|
left: 69.5,
|
|
no:"XL01"
|
|
},
|
|
],
|
|
arrowData: [
|
|
{
|
|
left: 17.93,
|
|
},
|
|
{
|
|
left: 25.23,
|
|
},
|
|
{
|
|
left: 39.8,
|
|
},
|
|
{
|
|
left: 47.13,
|
|
},
|
|
{
|
|
left: 61.13,
|
|
},
|
|
{
|
|
left: 68.43,
|
|
},
|
|
{
|
|
left: 83.03,
|
|
},
|
|
{
|
|
left: 90.33,
|
|
},
|
|
]
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.getDate();
|
|
this.timer = setInterval(() => {
|
|
this.getlistFaultReport();
|
|
}, 10000);
|
|
this.startAutoScroll();
|
|
},
|
|
|
|
methods: {
|
|
Fungetdate(num) {
|
|
var dd = new Date();
|
|
dd.setDate(dd.getDate() + num);
|
|
var y = dd.getFullYear();
|
|
var m = dd.getMonth() + 1; //获取当前月份的日期
|
|
var d = dd.getDate();
|
|
return y + "-" + m + "-" + d;
|
|
},
|
|
getDate() {
|
|
let start = this.Fungetdate(0);
|
|
let end = this.Fungetdate(1);
|
|
|
|
this.queryParams.timeArray.push(start, end);
|
|
this.getData();
|
|
},
|
|
getData() {
|
|
if(this.queryParams.timeArray.length>0){
|
|
this.queryParams.productDateStart = moment(this.queryParams.timeArray[0]).format('YYYY-MM-DD');
|
|
this.queryParams.productDateEnd = moment(this.queryParams.timeArray[1]).format('YYYY-MM-DD');
|
|
}
|
|
getDailyReportNew(this.queryParams).then(e => {
|
|
// 假设接口返回的数据在 e.rows 中，且为数组格式
|
|
if (e.rows && Array.isArray(e.rows)) {
|
|
// 创建以 equipmentName 为键的映射表
|
|
const rowMap = e.rows.reduce((map, row) => {
|
|
map[row.equipmentName] = row; // 假设 equipmentName 唯一
|
|
return map;
|
|
}, {});
|
|
|
|
// 更新 infoData
|
|
this.infoData = this.infoData.map(infoItem => {
|
|
const matchedRow = rowMap[infoItem.equipmentName];
|
|
return {
|
|
...infoItem,
|
|
productName: matchedRow?.productName || null ,// 匹配成功则注入 productName
|
|
teamLeaderNames: matchedRow?.teamLeaderNames || null,
|
|
prodType: matchedRow?.prodType || null,
|
|
quantityFeedback: matchedRow?.quantityFeedback || null,
|
|
productDate: matchedRow?.productDate || null,
|
|
workorderCodeSap: matchedRow?.workorderCodeSap || null,
|
|
sapCode:matchedRow?.sapCode || null,
|
|
};
|
|
});
|
|
}
|
|
}).catch(error => {
|
|
console.error("获取数据失败:", error);
|
|
});
|
|
},
|
|
startAutoScroll() {
|
|
const tableBody = this.$refs.autoScrollTable.$el.querySelector('.el-table__body-wrapper')
|
|
let scrollTop = 0
|
|
|
|
this.scrollInterval = setInterval(() => {
|
|
if (tableBody) {
|
|
// 每次滚动1像素
|
|
scrollTop += 1
|
|
|
|
// 判断是否滚动到底部
|
|
if (scrollTop >= tableBody.scrollHeight - tableBody.clientHeight) {
|
|
scrollTop = 0 // 重置到顶部实现循环滚动
|
|
}
|
|
|
|
tableBody.scrollTop = scrollTop
|
|
}
|
|
}, 3000) // 调整时间间隔控制滚动速度
|
|
},
|
|
stopAutoScroll() {
|
|
clearInterval(this.scrollInterval)
|
|
},
|
|
|
|
//设备故障信息
|
|
getlistFaultReport(){
|
|
const _this = this;
|
|
const param ={
|
|
pageNum: 1,
|
|
pageSize: 20
|
|
}
|
|
getCsRepairlist(param).then((response) => {
|
|
if (response?.length) {
|
|
// 更新响应式数据
|
|
this.repairOrders = response.map(item => ({
|
|
...item,
|
|
}))
|
|
const descList = response.map(item =>
|
|
`${item.params?.equipmentName || '未知'} ${item.params?.auxiliaryequipmentName || '未知'} ${item.orderDesc || '无故障描述'}`
|
|
);
|
|
this.scrollText = descList.join('★★★★★★★★'); // 用两个全角空格分隔
|
|
|
|
// 提取所有有效的设备名称
|
|
const activeEquipmentNames = new Set(
|
|
response.map(item => item.params?.equipmentName)
|
|
.filter(name => name)
|
|
);
|
|
|
|
// 更新infoData的高亮状态
|
|
this.infoData.forEach((item, index) => {
|
|
if (activeEquipmentNames.has(item.equipmentName)) {
|
|
// 响应式设置alpha
|
|
this.infoData[index].alpha = '#CB4C4C80';
|
|
} else {
|
|
// 移除alpha属性
|
|
this.infoData[index].alpha = 'transparent';
|
|
}
|
|
});
|
|
}else {
|
|
this.scrollText = "";
|
|
this.infoData.forEach((item, index) => {
|
|
this.infoData[index].alpha = 'transparent';
|
|
});
|
|
}
|
|
|
|
})
|
|
},
|
|
|
|
},
|
|
created(){
|
|
|
|
},
|
|
|
|
|
|
beforeDestroy() {
|
|
this.stopAutoScroll()
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
|
|
|
|
.bg {
|
|
background-image: url("~@/assets/board/车间监控系统 - 02 - 2.jpg");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.title1 {
|
|
position: absolute;
|
|
top: 1%;
|
|
left: 50%;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1vw;
|
|
font-size: 2.1vw;
|
|
color: #ffffff;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
|
|
.floorNum {
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
top: 96.2%;
|
|
width: 4.6%;
|
|
height: 2.4%;
|
|
color: #fff6;
|
|
text-align: center;
|
|
line-height: 2.4vh;
|
|
font-size: 1.5vh;
|
|
}
|
|
|
|
.floorNum1 {
|
|
background-image: url("~@/assets/board/楼层-左背景.png");
|
|
left: 35.5%;
|
|
}
|
|
|
|
.floorNum2 {
|
|
background-image: url("~@/assets/board/楼层-左背景 选中.png");
|
|
left: 39.9%;
|
|
color: #fff;
|
|
}
|
|
|
|
.floorNum3 {
|
|
background-image: url("~@/assets/board/楼层-左背景.png");
|
|
left: 44.3%;
|
|
}
|
|
|
|
.floorNum4 {
|
|
background-image: url("~@/assets/board/楼层-右背景.png");
|
|
left: 51%;
|
|
}
|
|
|
|
.floorNum5 {
|
|
background-image: url("~@/assets/board/楼层-右背景.png");
|
|
left: 55.4%;
|
|
}
|
|
|
|
.floorNum6 {
|
|
background-image: url("~@/assets/board/楼层-右背景.png");
|
|
left: 59.8%;
|
|
}
|
|
|
|
@keyframes example {
|
|
from {
|
|
bottom: 7%
|
|
}
|
|
to {
|
|
bottom: -30%
|
|
}
|
|
}
|
|
|
|
@keyframes example1 {
|
|
from {
|
|
bottom: 0%;
|
|
}
|
|
to {
|
|
bottom: -18.5%
|
|
}
|
|
}
|
|
|
|
.arrows {
|
|
.oneAnR {
|
|
position: absolute;
|
|
width: 6%;
|
|
height: 10.5%;
|
|
top: 25.6%;
|
|
left: 15%;
|
|
overflow: hidden;
|
|
|
|
.oneAn {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 13vh;
|
|
bottom: 7%;
|
|
animation-name: example;
|
|
animation-duration: 4s;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
}
|
|
|
|
.twoAnR {
|
|
position: absolute;
|
|
width: 6%;
|
|
height: 34.5%;
|
|
top: 37.5%;
|
|
left: 15%;
|
|
overflow: hidden;
|
|
|
|
.twoAn {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 40vh;
|
|
bottom: 0;
|
|
animation-name: example1;
|
|
animation-duration: 4s;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
}
|
|
|
|
.arrow, .wx, .wxh, .box {
|
|
position: absolute;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 0.5vw;
|
|
}
|
|
|
|
.wxh {
|
|
width: 0.6vw;
|
|
}
|
|
|
|
.arrow {
|
|
background-image: url("~@/assets/board/箭头 下2.png");
|
|
height: 2.5vh;
|
|
}
|
|
|
|
.wx {
|
|
background-image: url("~@/assets/board/蚊香1.png");
|
|
height: 0.5vw;
|
|
}
|
|
|
|
.wxh {
|
|
background-image: url("~@/assets/board/蚊香盒.png");
|
|
height: 0.6vw;
|
|
}
|
|
|
|
.box {
|
|
background-image: url("~@/assets/board/箱子.png");
|
|
transform: translateX(-0.15vw);
|
|
width: 0.82%;
|
|
height: 0.82vw;
|
|
}
|
|
}
|
|
|
|
|
|
.output {
|
|
background-image: url("~@/assets/board/弹窗3-产量2.png");
|
|
position: absolute;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 4.3%;
|
|
height: 3.1%;
|
|
top: 27%;
|
|
|
|
span {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 2.4vh;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 2.4vh;
|
|
font-size: 0.7vw;
|
|
}
|
|
}
|
|
|
|
|
|
.info {
|
|
position: absolute;
|
|
width: 4%;
|
|
height: 50%;
|
|
|
|
|
|
&:hover .infoModel, &:hover .infoModel1 {
|
|
display: inline-block;
|
|
}
|
|
|
|
.infoModel, .infoModel1 {
|
|
position: absolute;
|
|
top: 0%;
|
|
left: -700%;
|
|
width: 14.1vw;
|
|
height: 14.7vh;
|
|
color: #fff;
|
|
display: none;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 180%;
|
|
background-image: url("~@/assets/board/弹窗1-设备信息.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.title {
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 15%;
|
|
font-size: 0.8vw;
|
|
letter-spacing: 3px;
|
|
|
|
/* 高度自适应方案 */
|
|
min-height: 60px; /* 设置最小高度保障基础显示 */
|
|
line-height: 1.5; /* 行高增加到字号的1.5倍 */
|
|
overflow: visible; /* 解除内容截断限制 */
|
|
display: inline-flex; /* 启用弹性布局 */
|
|
align-items: flex-start; /* 顶部对齐防止偏移 */
|
|
|
|
/* 换行增强配置 */
|
|
overflow-wrap: break-word;
|
|
word-break: break-word; /* 优化为更自然的换词策略 */
|
|
max-width: 120px;
|
|
white-space: pre-wrap; /* 保留空格换行符 */
|
|
}
|
|
|
|
.equipmentOutput {
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 45%;
|
|
font-size: 0.6vw;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
.equipmentInfo {
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 70%;
|
|
font-size: 0.8vw;
|
|
letter-spacing: 3px;
|
|
}
|
|
.equipmentInfo2 {
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 70%;
|
|
font-size: 0.6vw;
|
|
letter-spacing: 3px;
|
|
}
|
|
.equipmentInfo3 {
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 95%;
|
|
font-size: 0.6vw;
|
|
letter-spacing: 3px;
|
|
}
|
|
}
|
|
|
|
.infoModel {
|
|
|
|
.title {
|
|
left: 7%;
|
|
}
|
|
|
|
.equipmentOutput {
|
|
left: 7%;
|
|
}
|
|
|
|
.equipmentInfo {
|
|
left: 7%;
|
|
}
|
|
.equipmentInfo2 {
|
|
left: 7%;
|
|
}
|
|
.equipmentInfo3 {
|
|
left: 7%;
|
|
}
|
|
}
|
|
|
|
.infoModel1 {
|
|
left: 60%;
|
|
|
|
.title {
|
|
right: 7%;
|
|
}
|
|
|
|
.equipmentOutput {
|
|
left: 25%;
|
|
}
|
|
|
|
.equipmentInfo {
|
|
left: 25%;
|
|
}
|
|
|
|
&::before {
|
|
transform-style: preserve-3d;
|
|
transform: rotateY(180deg)
|
|
}
|
|
}
|
|
}
|
|
|
|
.equipment {
|
|
position: absolute;
|
|
top: 72%;
|
|
width: 4%;
|
|
height: 6%;
|
|
|
|
&:hover .equipmentName, &:hover .equipmentName1 {
|
|
display: inline-block;
|
|
}
|
|
|
|
.equipmentName, .equipmentName1 {
|
|
position: absolute;
|
|
width: 12.7vw;
|
|
height: 4.4vh;
|
|
display: none;
|
|
|
|
span {
|
|
position: absolute;
|
|
line-height: 4.4vh;
|
|
color: #fff;
|
|
font-size: 1vw;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url("~@/assets/board/弹窗2-名称.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
.equipmentName {
|
|
top: -10%;
|
|
left: -255%;
|
|
|
|
span {
|
|
left: 5%;
|
|
}
|
|
}
|
|
|
|
.equipmentName1 {
|
|
top: -10%;
|
|
left: 45%;
|
|
|
|
span {
|
|
right: 5%;
|
|
}
|
|
|
|
&::before {
|
|
|
|
transform-style: preserve-3d;
|
|
transform: rotateY(180deg)
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@keyframes arrowAn1 {
|
|
from {
|
|
top: -100%;
|
|
}
|
|
to {
|
|
top: 100%;
|
|
}
|
|
}
|
|
|
|
.arrows1 {
|
|
.arrow {
|
|
position: absolute;
|
|
width: 0.5vw;
|
|
height: 2.5vh;
|
|
overflow: hidden;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-image: url("~@/assets/board/箭头 下2.png");
|
|
animation-name: arrowAn1;
|
|
animation-duration: 2s;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottomArrows {
|
|
.arrow {
|
|
position: absolute;
|
|
width: 0.5vw;
|
|
height: 2.5vh;
|
|
overflow: hidden;
|
|
transform: rotate(90deg);
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-image: url("~@/assets/board/箭头 下2.png");
|
|
animation-name: arrowAn1;
|
|
animation-duration: 2s;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
}
|
|
}
|
|
/* 新增样式 */
|
|
.scroll-title-container {
|
|
top:10%;
|
|
width: 100%;
|
|
height: 30px;
|
|
background: rgba(0, 128, 255, 0.1);
|
|
overflow: hidden;
|
|
position: relative;
|
|
margin: 10px 0;
|
|
border: none !important;
|
|
}
|
|
|
|
.scroll-title-content {
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
animation: scroll 15s linear infinite; /* 将15s改为30s使速度减半 */
|
|
font-size: 18px;
|
|
color: #00f7ff;
|
|
line-height: 30px;
|
|
text-shadow: 0 0 5px rgba(0, 247, 255, 0.5);
|
|
}
|
|
|
|
@keyframes scroll {
|
|
0% {
|
|
transform: translateX(100%);
|
|
}
|
|
100% {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
</style>
|