Yangwl
/
lanju-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

黑蚊香车间生产监控看板2F线体开工展示调整

Browse Source 
Signed-off-by: Yangwl <1726150332@qq.com>
master
Yangwl 3 months ago
parent e88eed5c47
commit 8b742b8936
1 changed files with 70 additions and 47 deletions
Show Stats Download Patch File Download Diff File

117
src/views/cs/index.vue
Unescape Escape View File

@ -22,40 +22,9 @@
<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="arrows1" v-if="isRun.includes('XL01')">
<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>
@ -65,7 +34,7 @@
<div class="arrow" :style="`top: 66%;left: 33.1%;transform: rotate(0deg);`"></div>
</div>
<div class="arrows1" v-if="isRun.includes(2)">
<div class="arrows1" v-if="isRun.includes('XL02')">
<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>
@ -75,7 +44,7 @@
<div class="arrow" :style="`top: 66%;left: 39%;transform: rotate(0deg);`"></div>
</div>
<div class="arrows1" v-if="isRun.includes(3)">
<div class="arrows1" v-if="isRun.includes('XL03')">
<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>
@ -85,7 +54,7 @@
<div class="arrow" :style="`top: 66%;left: 45.4%;transform: rotate(0deg);`"></div>
</div>
<div class="arrows1" v-if="isRun.includes(4)">
<div class="arrows1" v-if="isRun.includes('XL04')">
<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>
@ -95,7 +64,7 @@
<div class="arrow" :style="`top: 66%;left: 51.7%;transform: rotate(0deg);`"></div>
</div>
<div class="arrows1" v-if="isRun.includes(5)">
<div class="arrows1" v-if="isRun.includes('XL05')">
<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>
@ -105,7 +74,7 @@
<div class="arrow" :style="`top: 66%;left: 57.7%;transform: rotate(358deg);`"></div>
</div>
<div class="arrows1" v-if="isRun.includes(6)">
<div class="arrows1" v-if="isRun.includes('XL06')">
<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>
@ -115,7 +84,7 @@
<div class="arrow" :style="`top: 66%;left: 63.9%;transform: rotate(355deg);`"></div>
</div>
<div class="arrows1" v-if="isRun.includes(7)">
<div class="arrows1" v-if="isRun.includes('XL07')">
<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>
@ -125,7 +94,7 @@
<div class="arrow" :style="`top: 66%;left: 70%;transform: rotate(350deg);`"></div>
</div>
<div class="arrows1" v-if="isRun.includes(8)">
<div class="arrows1" v-if="isRun.includes('XL08')">
<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>
@ -135,19 +104,45 @@
<div class="arrow" :style="`top: 66%;left: 76.1%;transform: rotate(345deg);`"></div>
</div>
<div class="arrows1" v-if="isRun.includes('XL09')">
<div class="arrow" :style="`top: 38.5%;left: 26.0%;transform: rotate(10deg);`"></div>
<div class="arrow" :style="`top: 42%;left: 25.7%;transform: rotate(10deg);`"></div>
<div class="arrow" :style="`top: 48%;left: 25.3%;transform: rotate(10deg);`"></div>
<div class="arrow" :style="`top: 52%;left: 25.1%;transform: rotate(10deg);`"></div>
<div class="arrow" :style="`top: 57%;left: 24.8%;transform: rotate(10deg);`"></div>
<div class="arrow" :style="`top: 62%;left: 24.2%;transform: rotate(10deg);`"></div>
<div class="arrow" :style="`top: 66%;left: 23.8%;transform: rotate(10deg);`"></div>
</div>
<div class="arrows1" v-if="isRun.includes('XL10')">
<div class="arrow" :style="`top: 38.5%;left: 22.5%;transform: rotate(12deg);`"></div>
<div class="arrow" :style="`top: 42%;left: 22.2%;transform: rotate(12deg);`"></div>
<div class="arrow" :style="`top: 48%;left: 21.5%;transform: rotate(12deg);`"></div>
<div class="arrow" :style="`top: 52%;left: 21%;transform: rotate(12deg);`"></div>
<div class="arrow" :style="`top: 57%;left: 20.5%;transform: rotate(12deg);`"></div>
<div class="arrow" :style="`top: 62%;left: 19.8%;transform: rotate(12deg);`"></div>
</div>
<div class="arrows1" v-if="isRun.includes('XL11')">
<div class="arrow" :style="`top: 38.5%;left: 15.6%;transform: rotate(13deg);`"></div>
<div class="arrow" :style="`top: 42%;left: 15.1%;transform: rotate(13deg);`"></div>
<div class="arrow" :style="`top: 48%;left: 14.5%;transform: rotate(13deg);`"></div>
<div class="arrow" :style="`top: 52%;left: 14.0%;transform: rotate(13deg);`"></div>
<div class="arrow" :style="`top: 57%;left: 13.5%;transform: rotate(13deg);`"></div>
<div class="arrow" :style="`top: 62%;left: 12.8%;transform: rotate(13deg);`"></div>
<div class="arrow" :style="`top: 66%;left: 12.5%;transform: rotate(13deg);`"></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 class="bottomArrowsLeft" v-for="(i,k) in 3">
<div class="arrow" :style="`top: 72.5%;left: ${13 + 5.2*k}%;`"></div>
</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);
@ -217,7 +212,7 @@ export default {
factoryCode: null
},
scrollInterval: null,
isRun: [1, 2, 3, 4, 5, 6, 7, 8,9],
isRun: [],
infoData: [
{
top: 31,
@ -443,6 +438,7 @@ export default {
getDailyReportNew(this.queryParams).then(e => {
// 假设接口返回的数据在 e.rows 中，且为数组格式
if (e.rows && Array.isArray(e.rows)) {
this.isRun = e.rows.map(row => row.equipmentCode).filter(code => code); // 过滤掉undefined/null值
// 创建以 equipmentName 为键的映射表
const rowMap = e.rows.reduce((map, row) => {
map[row.equipmentName] = row; // 假设 equipmentName 唯一
@ -977,6 +973,33 @@ export default {
}
}
}
.bottomArrowsLeft {
.arrow {
position: absolute;
width: 0.5vw;
height: 2.5vh;
overflow: hidden;
transform: rotate(270deg);
&::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%;

Write Preview
Loading…
Cancel
Save