fix:禅道357 洁净车间（洗）页面调整
This commit is contained in:
parent
d423cee74c
commit
f3ff8c5942
|
|
@ -5,80 +5,16 @@
|
||||||
<div class="timer">{{ currentDay }} {{ currentTime }}</div>
|
<div class="timer">{{ currentDay }} {{ currentTime }}</div>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-main>
|
<el-main>
|
||||||
<el-row style="margin-bottom: 1vh;">
|
|
||||||
<el-col :span="3" class="numBlock">
|
|
||||||
<dv-border-box-12>
|
|
||||||
<div class="numBlock_title">本月产量</div>
|
|
||||||
<div class="numBlock_value">123</div>
|
|
||||||
</dv-border-box-12>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="3" class="numBlock">
|
|
||||||
<dv-border-box-12>
|
|
||||||
<div class="numBlock_title">今日产量</div>
|
|
||||||
<div class="numBlock_value">123</div>
|
|
||||||
</dv-border-box-12>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="3" class="numBlock">
|
|
||||||
<dv-border-box-12>
|
|
||||||
<div class="numBlock_title">今日工序报工量</div>
|
|
||||||
<div class="numBlock_value">123</div>
|
|
||||||
</dv-border-box-12>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="3" class="numBlock">
|
|
||||||
<dv-border-box-12>
|
|
||||||
<div class="numBlock_title">在产产品数</div>
|
|
||||||
<div class="numBlock_value">123</div>
|
|
||||||
</dv-border-box-12>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="3" class="numBlock">
|
|
||||||
<dv-border-box-12>
|
|
||||||
<div class="numBlock_title">本月完工工单</div>
|
|
||||||
<div class="numBlock_value">123</div>
|
|
||||||
</dv-border-box-12>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="3" class="numBlock">
|
|
||||||
<dv-border-box-12>
|
|
||||||
<div class="numBlock_title">本月计划产量</div>
|
|
||||||
<div class="numBlock_value">123</div>
|
|
||||||
</dv-border-box-12>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="3" class="numBlock">
|
|
||||||
<dv-border-box-12>
|
|
||||||
<div class="numBlock_title">本月产量</div>
|
|
||||||
<div class="numBlock_value">123</div>
|
|
||||||
</dv-border-box-12>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="3" class="numBlock">
|
|
||||||
<dv-border-box-12>
|
|
||||||
<div class="numBlock_title">本月产量</div>
|
|
||||||
<div class="numBlock_value">123</div>
|
|
||||||
</dv-border-box-12>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div class="leftBlock">
|
<div class="leftBlock">
|
||||||
<el-row style="margin-bottom: 1vh;">
|
<div style="height: 50vh;position: relative;">
|
||||||
<el-col :span="12" class="numBlock">
|
|
||||||
<dv-border-box-12>
|
|
||||||
<div class="numBlock_title">在制工序数</div>
|
|
||||||
<div class="numBlock_value">123</div>
|
|
||||||
</dv-border-box-12>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="numBlock">
|
|
||||||
<dv-border-box-12>
|
|
||||||
<div class="numBlock_title">今日完成工序</div>
|
|
||||||
<div class="numBlock_value">123</div>
|
|
||||||
</dv-border-box-12>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<div style="height: 34vh;position: relative;">
|
|
||||||
<dv-border-box-1>
|
<dv-border-box-1>
|
||||||
<div class="chartBlockTitle">车间各工段生产产品数</div>
|
<div class="chartBlockTitle">车间各工段生产产品数</div>
|
||||||
<dv-capsule-chart :config="config_left1" class="leftChartBlock1"/>
|
<dv-capsule-chart :config="config_left1" class="leftChartBlock1"/>
|
||||||
</dv-border-box-1>
|
</dv-border-box-1>
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 34vh;">
|
<div style="height: 40vh;">
|
||||||
<dv-border-box-1>
|
<dv-border-box-1>
|
||||||
<div class="chartBlockTitle">产品占比</div>
|
<div class="chartBlockTitle">产品占比</div>
|
||||||
<dv-active-ring-chart :config="config_left2" class="leftChartBlock2"/>
|
<dv-active-ring-chart :config="config_left2" class="leftChartBlock2"/>
|
||||||
|
|
@ -87,6 +23,32 @@
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="6" class="numBlock">
|
||||||
|
<dv-border-box-12>
|
||||||
|
<div class="numBlock_title">今日工序报工量</div>
|
||||||
|
<div class="numBlock_value">123</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6" class="numBlock">
|
||||||
|
<dv-border-box-12>
|
||||||
|
<div class="numBlock_title">在产产品数</div>
|
||||||
|
<div class="numBlock_value">123</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6" class="numBlock">
|
||||||
|
<dv-border-box-12>
|
||||||
|
<div class="numBlock_title">本月完工工单</div>
|
||||||
|
<div class="numBlock_value">123</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6" class="numBlock">
|
||||||
|
<dv-border-box-12>
|
||||||
|
<div class="numBlock_title">本月计划产量</div>
|
||||||
|
<div class="numBlock_value">123</div>
|
||||||
|
</dv-border-box-12>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
<div class="middleBlock">
|
<div class="middleBlock">
|
||||||
<div style="height: 38vh;">
|
<div style="height: 38vh;">
|
||||||
<dv-border-box-1>
|
<dv-border-box-1>
|
||||||
|
|
@ -94,38 +56,80 @@
|
||||||
<dv-scroll-board :config="config_middle_top" class="middleTableBlock1"/>
|
<dv-scroll-board :config="config_middle_top" class="middleTableBlock1"/>
|
||||||
</dv-border-box-1>
|
</dv-border-box-1>
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 41vh;">
|
<div style="height: 41vh;" class="eq-panel">
|
||||||
<dv-border-box-1>
|
<dv-border-box-1>
|
||||||
<div class="chartBlockTitle">设备列表</div>
|
<div class="eq-inner">
|
||||||
<dv-scroll-board :config="config_middle_bottom" class="middleTableBlock2"/>
|
<div class="eq-header">
|
||||||
|
<div class="eq-title">
|
||||||
|
<span class="eq-title-bar"></span>
|
||||||
|
<span class="eq-title-icon">⚡</span>
|
||||||
|
拉丝设备集群 · 实时状态
|
||||||
|
</div>
|
||||||
|
<div class="eq-online-badge">在线 {{ onlineCount }}/{{ equipmentList.length }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="eq-grid" ref="eqGrid">
|
||||||
|
<div
|
||||||
|
v-for="(item, idx) in scrollItems"
|
||||||
|
:key="idx"
|
||||||
|
class="eq-card"
|
||||||
|
:class="item.isRunning ? 'eq-card--run' : 'eq-card--stop'"
|
||||||
|
>
|
||||||
|
<div class="eq-card-name">{{ item.name }}</div>
|
||||||
|
<div class="eq-card-center">
|
||||||
|
<span class="eq-dot" :class="item.isRunning ? 'eq-dot--green' : 'eq-dot--red'"></span>
|
||||||
|
<span class="eq-card-state" :class="item.isRunning ? 'state-run' : 'state-stop'">
|
||||||
|
{{ item.running_state_text }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="eq-card-sub">{{ item.isRunning ? item.number : '待机中' }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="eq-footer">
|
||||||
|
<span class="eq-foot-item">
|
||||||
|
<span class="eq-dot eq-dot--green eq-dot--sm"></span>运行中 · {{ onlineCount }}台
|
||||||
|
</span>
|
||||||
|
<span class="eq-foot-item">
|
||||||
|
<span class="eq-dot eq-dot--red eq-dot--sm"></span>停机/维护 · {{ equipmentList.length - onlineCount }}台
|
||||||
|
</span>
|
||||||
|
<span class="eq-foot-update">⏱ last update: {{ lastUpdateText }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</dv-border-box-1>
|
</dv-border-box-1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div class="rightBlock">
|
<div class="rightBlock">
|
||||||
<el-row style="margin-bottom: 1vh;">
|
<div style="height: 55vh;" class="perf-panel">
|
||||||
<el-col :span="12" class="numBlock">
|
|
||||||
<dv-border-box-12>
|
|
||||||
<div class="numBlock_title">在制工单数</div>
|
|
||||||
<div class="numBlock_value">123</div>
|
|
||||||
</dv-border-box-12>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="12" class="numBlock">
|
|
||||||
<dv-border-box-12>
|
|
||||||
<div class="numBlock_title">本月交付数</div>
|
|
||||||
<div class="numBlock_value">123</div>
|
|
||||||
</dv-border-box-12>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<div style="height: 34vh;">
|
|
||||||
<dv-border-box-1>
|
<dv-border-box-1>
|
||||||
<div class="chartBlockTitle">每个人日产量</div>
|
<div class="perf-inner">
|
||||||
<dv-scroll-board :config="config_right_top" style="height: 27.5vh;width: 90%;left: 5%;"/>
|
<div class="perf-header">
|
||||||
<!-- <scEcharts :option="chartOption1" style="height: 27.5vh;width: 90%;left: 5%;"/> -->
|
<div class="perf-title">
|
||||||
|
<span class="perf-title-bar"></span>
|
||||||
|
<span class="perf-title-icon">👥</span>
|
||||||
|
人员日产量 TOP5
|
||||||
|
</div>
|
||||||
|
<div class="perf-unit">单位: 件</div>
|
||||||
|
</div>
|
||||||
|
<div class="perf-list" ref="perfList">
|
||||||
|
<div class="perf-row" v-for="(item, idx) in scrollPerfItems" :key="idx">
|
||||||
|
<div class="perf-avatar">{{ item.操作人 ? item.操作人.charAt(0) : '?' }}</div>
|
||||||
|
<div class="perf-name">{{ item.操作人 }}</div>
|
||||||
|
<div class="perf-count">
|
||||||
|
<span class="perf-num">{{ item.生产数 }}</span>
|
||||||
|
<span class="perf-unit-sm">件</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="perf-footer">
|
||||||
|
平均效率 {{ avgEfficiency }}%
|
||||||
|
<span class="perf-lightning">⚡</span>
|
||||||
|
标兵: {{ topPerson }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</dv-border-box-1>
|
</dv-border-box-1>
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 34vh;">
|
<div style="height: 35vh;">
|
||||||
<dv-border-box-1>
|
<dv-border-box-1>
|
||||||
<div class="chartBlockTitle">车间整体产品统计</div>
|
<div class="chartBlockTitle">车间整体产品统计</div>
|
||||||
<scEcharts :option="chartOption2" style="height: 27.5vh;width: 90%;left: 5%;"/>
|
<scEcharts :option="chartOption2" style="height: 27.5vh;width: 90%;left: 5%;"/>
|
||||||
|
|
@ -414,22 +418,12 @@ export default {
|
||||||
header: ['任务编号', '产出产品', '任务量', '合格数'],
|
header: ['任务编号', '产出产品', '任务量', '合格数'],
|
||||||
data: []
|
data: []
|
||||||
},
|
},
|
||||||
config_middle_bottom:{
|
equipmentList: [],
|
||||||
rowNum:10,
|
lastUpdateSeconds: 0,
|
||||||
headerBGC: 'rgba(0,0,0,0)',
|
lastUpdateInterval: null,
|
||||||
oddRowBGC: 'rgba(0,0,0,0)',
|
scrollTimer: null,
|
||||||
evenRowBGC: 'rgba(0,0,0,0)',
|
performanceList: [],
|
||||||
header: ['设备名称','设备位号','设备状态','运行状态','所在工段'],
|
perfScrollTimer: null,
|
||||||
data: []
|
|
||||||
},
|
|
||||||
config_right_top:{
|
|
||||||
rowNum:10,
|
|
||||||
headerBGC: 'rgba(47,102,107,.34)',
|
|
||||||
oddRowBGC: 'rgba(0,0,0,0)',
|
|
||||||
evenRowBGC: 'rgba(0,0,0,0)',
|
|
||||||
header: ['工段','姓名','生产数','合格数','不合格数'],
|
|
||||||
data: []
|
|
||||||
},
|
|
||||||
currentTime: "",
|
currentTime: "",
|
||||||
currentDay: "",
|
currentDay: "",
|
||||||
today: "",
|
today: "",
|
||||||
|
|
@ -439,6 +433,43 @@ export default {
|
||||||
mgroups:['洗棒','捆棒','拉单丝','捆一次棒','一次复丝','捆二次棒','二次复丝'],
|
mgroups:['洗棒','捆棒','拉单丝','捆一次棒','一次复丝','捆二次棒','二次复丝'],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
onlineCount() {
|
||||||
|
return this.equipmentList.filter(e => e.isRunning).length;
|
||||||
|
},
|
||||||
|
lastUpdateText() {
|
||||||
|
return this.lastUpdateSeconds > 0 ? `${this.lastUpdateSeconds}s前` : '刚刚';
|
||||||
|
},
|
||||||
|
// 渲染两份，用于无缝滚动
|
||||||
|
scrollItems() {
|
||||||
|
if (this.equipmentList.length === 0) return [];
|
||||||
|
return [...this.equipmentList, ...this.equipmentList];
|
||||||
|
},
|
||||||
|
// 全员按生产数降序排列
|
||||||
|
sortedPerfList() {
|
||||||
|
return [...this.performanceList]
|
||||||
|
.sort((a, b) => Number(b.生产数) - Number(a.生产数));
|
||||||
|
},
|
||||||
|
// 渲染两份，用于无缝滚动
|
||||||
|
scrollPerfItems() {
|
||||||
|
if (!this.sortedPerfList.length) return [];
|
||||||
|
return [...this.sortedPerfList, ...this.sortedPerfList];
|
||||||
|
},
|
||||||
|
// 平均效率 = 合格数之和 / 生产数之和
|
||||||
|
avgEfficiency() {
|
||||||
|
if (!this.performanceList.length) return 0;
|
||||||
|
const totalProd = this.performanceList.reduce((s, i) => s + Number(i.生产数 || 0), 0);
|
||||||
|
const totalOk = this.performanceList.reduce((s, i) => s + Number(i.合格数 || 0), 0);
|
||||||
|
if (!totalProd) return 0;
|
||||||
|
return Math.round(totalOk / totalProd * 100);
|
||||||
|
},
|
||||||
|
// 标兵 = 生产数最多的人
|
||||||
|
topPerson() {
|
||||||
|
if (!this.performanceList.length) return '-';
|
||||||
|
return [...this.performanceList]
|
||||||
|
.sort((a, b) => Number(b.生产数) - Number(a.生产数))[0]?.操作人 || '-';
|
||||||
|
},
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
let that = this;
|
let that = this;
|
||||||
//洗棒、捆棒、拉丝 ：洗棒、捆棒、拉单丝、捆一次棒、一次复丝、捆二次棒、二次复丝
|
//洗棒、捆棒、拉丝 ：洗棒、捆棒、拉单丝、捆一次棒、一次复丝、捆二次棒、二次复丝
|
||||||
|
|
@ -447,6 +478,7 @@ export default {
|
||||||
this.showTime();
|
this.showTime();
|
||||||
}, 1000);
|
}, 1000);
|
||||||
that.mgroupsforEach();
|
that.mgroupsforEach();
|
||||||
|
that.getEquipment();
|
||||||
that.getMgroups();
|
that.getMgroups();
|
||||||
//每个人日生产量：个人绩效
|
//每个人日生产量：个人绩效
|
||||||
that.getEveryoneCount();
|
that.getEveryoneCount();
|
||||||
|
|
@ -505,7 +537,6 @@ export default {
|
||||||
mgroupsforEach(){
|
mgroupsforEach(){
|
||||||
let that = this;
|
let that = this;
|
||||||
that.mgroups.forEach((item)=>{
|
that.mgroups.forEach((item)=>{
|
||||||
that.getEquipment(item);
|
|
||||||
that.getMtask1(item);
|
that.getMtask1(item);
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
@ -546,46 +577,78 @@ export default {
|
||||||
//车间设备列表
|
//车间设备列表
|
||||||
getEquipment() {
|
getEquipment() {
|
||||||
let that = this;
|
let that = this;
|
||||||
let params = {page: 0, belong_dept__name:'拉丝排板班组',
|
let params = { page: 0, belong_dept__name: '拉丝排板班组' };
|
||||||
// query: " { id, name, number, model, state ,mgroup_name }"
|
that.equipmentList = [];
|
||||||
};
|
clearInterval(that.lastUpdateInterval);
|
||||||
that.config_middle_bottom.data = [];
|
that.lastUpdateSeconds = 0;
|
||||||
that.$API.em.equipment.list.req(params).then((res) => {
|
that.$API.em.equipment.list.req(params).then((res) => {
|
||||||
if (res.length > 0) {
|
if (res.length > 0) {
|
||||||
res.forEach((item) => {
|
res.forEach((item) => {
|
||||||
let arr = [];
|
that.equipmentList.push({
|
||||||
let state_ = that.state_[item.state];
|
id: item.id,
|
||||||
let running_state_ = runningStateEnum[item.running_state]?.text;
|
name: item.name,
|
||||||
arr[0] = item.name;
|
number: item.number,
|
||||||
arr[1] = item.number;
|
running_state_text: runningStateEnum[item.running_state]?.text || '未知',
|
||||||
arr[2] = state_;
|
mgroup_name: item.mgroup_name,
|
||||||
arr[3] = running_state_;
|
isRunning: item.running_state == 10,
|
||||||
arr[4] = item.mgroup_name;
|
});
|
||||||
that.config_middle_bottom.data.push(arr);
|
});
|
||||||
})
|
|
||||||
}
|
}
|
||||||
})
|
that.lastUpdateSeconds = 0;
|
||||||
|
that.lastUpdateInterval = setInterval(() => {
|
||||||
|
that.lastUpdateSeconds++;
|
||||||
|
}, 1000);
|
||||||
|
that.$nextTick(() => { that.startAutoScroll(); });
|
||||||
|
});
|
||||||
|
},
|
||||||
|
startPerfScroll() {
|
||||||
|
const that = this;
|
||||||
|
clearInterval(this.perfScrollTimer);
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const el = that.$refs.perfList;
|
||||||
|
if (!el) return;
|
||||||
|
const halfHeight = el.scrollHeight / 2;
|
||||||
|
if (halfHeight <= el.clientHeight + 1) return;
|
||||||
|
that.perfScrollTimer = setInterval(() => {
|
||||||
|
el.scrollTop += 1;
|
||||||
|
if (el.scrollTop >= halfHeight) {
|
||||||
|
el.scrollTop = 0;
|
||||||
|
}
|
||||||
|
}, 40);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
startAutoScroll() {
|
||||||
|
const that = this;
|
||||||
|
clearInterval(this.scrollTimer);
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const el = that.$refs.eqGrid;
|
||||||
|
if (!el) return;
|
||||||
|
// scrollItems 已是两倍，halfHeight 即一份的高度
|
||||||
|
const halfHeight = el.scrollHeight / 2;
|
||||||
|
// 一份内容就能装下，无需滚动
|
||||||
|
if (halfHeight <= el.clientHeight + 1) return;
|
||||||
|
that.scrollTimer = setInterval(() => {
|
||||||
|
el.scrollTop += 1;
|
||||||
|
// 滚完第一份时瞬间归零，视觉无缝
|
||||||
|
if (el.scrollTop >= halfHeight) {
|
||||||
|
el.scrollTop = 0;
|
||||||
|
}
|
||||||
|
}, 40);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
//每个人日产量
|
//每个人日产量
|
||||||
getEveryoneCount(){
|
getEveryoneCount(){
|
||||||
let that = this;
|
let that = this;
|
||||||
that.config_right_top.data = [];
|
that.performanceList = [];
|
||||||
let date = that.$TOOL.dateFormat(new Date(), "yyyy-MM-dd");
|
let date = that.$TOOL.dateFormat(new Date(), "yyyy-MM-dd");
|
||||||
let params = {
|
let params = {
|
||||||
query: {start_date:date,end_date:date,dept_name:that.deptName},
|
query: {start_date:date,end_date:date,dept_name:that.deptName},
|
||||||
};
|
};
|
||||||
this.$API.bi.dataset.exec.req("performance", params).then((res) => {
|
this.$API.bi.dataset.exec.req("performance", params).then((res) => {
|
||||||
if(res.data2.ds0.length > 0){
|
if(res.data2.ds0.length > 0){
|
||||||
res.data2.ds0.forEach((item)=>{
|
that.performanceList = res.data2.ds0;
|
||||||
let arr = [];
|
|
||||||
arr[0] = item.工段;
|
|
||||||
arr[1] = item.操作人;
|
|
||||||
arr[2] = item.生产数;
|
|
||||||
arr[3] = item.合格数;
|
|
||||||
arr[4] = item.不合格数;
|
|
||||||
that.config_right_top.data.push(arr);
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
that.$nextTick(() => { that.startPerfScroll(); });
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
//车间整体产品统计
|
//车间整体产品统计
|
||||||
|
|
@ -692,14 +755,14 @@ export default {
|
||||||
}
|
}
|
||||||
.leftChartBlock1{
|
.leftChartBlock1{
|
||||||
width: 90%;
|
width: 90%;
|
||||||
height: 28vh;
|
height: 43vh;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
left: 5%;
|
left: 5%;
|
||||||
border-radius: 3vh;
|
border-radius: 3vh;
|
||||||
}
|
}
|
||||||
.leftChartBlock2{
|
.leftChartBlock2{
|
||||||
width:100%;
|
width:100%;
|
||||||
height: 28vh;
|
height: 35vh;
|
||||||
}
|
}
|
||||||
.middleTableBlock1{
|
.middleTableBlock1{
|
||||||
width:94%;
|
width:94%;
|
||||||
|
|
@ -725,4 +788,264 @@ export default {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
border-bottom: 1px solid rgb(83 198 243);
|
border-bottom: 1px solid rgb(83 198 243);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ===== 设备卡片面板 ===== */
|
||||||
|
.eq-panel { position: relative; }
|
||||||
|
|
||||||
|
/* dv-border-box-1 内层弹性布局，严格撑满边框内部 */
|
||||||
|
.eq-inner {
|
||||||
|
position: absolute;
|
||||||
|
inset: 2.5%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eq-header {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 1.2vh;
|
||||||
|
height: 4vh;
|
||||||
|
border-bottom: 1px solid rgba(83, 198, 243, 0.25);
|
||||||
|
}
|
||||||
|
.eq-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4vh;
|
||||||
|
font-size: 1.5vh;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #e0f4ff;
|
||||||
|
}
|
||||||
|
.eq-title-bar {
|
||||||
|
display: inline-block;
|
||||||
|
width: 3px;
|
||||||
|
height: 1.6vh;
|
||||||
|
background: #00b4ff;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
.eq-title-icon { font-style: normal; color: #ff9d3e; font-size: 1.4vh; }
|
||||||
|
.eq-online-badge { font-size: 1.2vh; color: rgba(180, 230, 255, 0.7); }
|
||||||
|
|
||||||
|
/* 卡片网格 — flex:1 填充剩余空间，overflow hidden 由 JS 控制滚动 */
|
||||||
|
.eq-grid {
|
||||||
|
flex: 1;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
align-content: start;
|
||||||
|
gap: 0.5vh;
|
||||||
|
padding: 0.5vh 0.8vh;
|
||||||
|
overflow: hidden; /* JS 滚动，隐藏滚动条 */
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eq-card {
|
||||||
|
background: rgba(8, 25, 45, 0.85);
|
||||||
|
border-radius: 0.8vh;
|
||||||
|
border: 1px solid rgba(40, 80, 120, 0.5);
|
||||||
|
padding: 0.4vh 0.3vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.3vh;
|
||||||
|
}
|
||||||
|
.eq-card--run {
|
||||||
|
border-color: rgba(0, 200, 100, 0.35);
|
||||||
|
box-shadow: inset 0 0 8px rgba(0, 200, 100, 0.06);
|
||||||
|
}
|
||||||
|
.eq-card--stop {
|
||||||
|
border-color: rgba(80, 90, 110, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eq-card-name {
|
||||||
|
font-size: 1.05vh;
|
||||||
|
color: rgba(180, 220, 255, 0.9);
|
||||||
|
background: rgba(0, 55, 100, 0.55);
|
||||||
|
padding: 0.1vh 0.6vh;
|
||||||
|
border-radius: 0.4vh;
|
||||||
|
border: 1px solid rgba(80, 160, 220, 0.3);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: 95%;
|
||||||
|
}
|
||||||
|
.eq-card-center {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5vh;
|
||||||
|
}
|
||||||
|
.eq-card-state {
|
||||||
|
font-size: 1.5vh;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.state-run { color: #00e676; }
|
||||||
|
.state-stop { color: #ff5252; }
|
||||||
|
|
||||||
|
.eq-card-sub {
|
||||||
|
font-size: 0.9vh;
|
||||||
|
color: rgba(140, 195, 225, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 指示点 */
|
||||||
|
.eq-dot {
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 1.1vh;
|
||||||
|
height: 1.1vh;
|
||||||
|
}
|
||||||
|
.eq-dot--green {
|
||||||
|
background: #00e676;
|
||||||
|
box-shadow: 0 0 5px #00e676, 0 0 12px rgba(0, 230, 118, 0.5);
|
||||||
|
animation: pulse-green 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.eq-dot--red {
|
||||||
|
background: #ff5252;
|
||||||
|
box-shadow: 0 0 5px #ff5252, 0 0 10px rgba(255, 82, 82, 0.45);
|
||||||
|
}
|
||||||
|
.eq-dot--sm { width: 0.8vh; height: 0.8vh; }
|
||||||
|
|
||||||
|
@keyframes pulse-green {
|
||||||
|
0%, 100% { box-shadow: 0 0 4px #00e676, 0 0 10px rgba(0,230,118,0.4); }
|
||||||
|
50% { box-shadow: 0 0 8px #00e676, 0 0 18px rgba(0,230,118,0.75); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底栏 */
|
||||||
|
.eq-footer {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 1.2vh;
|
||||||
|
height: 3.5vh;
|
||||||
|
border-top: 1px solid rgba(83, 198, 243, 0.2);
|
||||||
|
gap: 2vh;
|
||||||
|
}
|
||||||
|
.eq-foot-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5vh;
|
||||||
|
font-size: 1.1vh;
|
||||||
|
color: rgba(180, 220, 255, 0.8);
|
||||||
|
}
|
||||||
|
.eq-foot-update {
|
||||||
|
margin-left: auto;
|
||||||
|
font-size: 1.05vh;
|
||||||
|
color: rgba(120, 175, 215, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 人员日产量 TOP5 ===== */
|
||||||
|
.perf-panel { position: relative; }
|
||||||
|
|
||||||
|
.perf-inner {
|
||||||
|
position: absolute;
|
||||||
|
inset: 2.5%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.perf-header {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 4vh;
|
||||||
|
padding: 0 1vh;
|
||||||
|
border-bottom: 1px solid rgba(83, 198, 243, 0.2);
|
||||||
|
}
|
||||||
|
.perf-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5vh;
|
||||||
|
font-size: 1.5vh;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #e0f4ff;
|
||||||
|
}
|
||||||
|
.perf-title-bar {
|
||||||
|
display: inline-block;
|
||||||
|
width: 3px;
|
||||||
|
height: 1.8vh;
|
||||||
|
background: #00b4ff;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.perf-title-icon { font-style: normal; font-size: 1.4vh; }
|
||||||
|
.perf-unit { font-size: 1.2vh; color: rgba(180, 220, 255, 0.55); }
|
||||||
|
|
||||||
|
/* 列表区 */
|
||||||
|
.perf-list {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden; /* JS 控制滚动，隐藏滚动条 */
|
||||||
|
padding: 0 1vh;
|
||||||
|
}
|
||||||
|
.perf-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.2vh;
|
||||||
|
height: 5.2vh; /* 固定行高，保证无缝滚动节奏一致 */
|
||||||
|
border-bottom: 1px solid rgba(83, 198, 243, 0.12);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 头像圆圈 */
|
||||||
|
.perf-avatar {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 3.6vh;
|
||||||
|
height: 3.6vh;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, #1a6fa8 0%, #0d4a7a 100%);
|
||||||
|
border: 1.5px solid rgba(100, 180, 255, 0.5);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 1.5vh;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #b8e0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.perf-name {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 1.6vh;
|
||||||
|
color: rgba(210, 235, 255, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.perf-count {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.3vh;
|
||||||
|
}
|
||||||
|
.perf-num {
|
||||||
|
font-size: 2.4vh;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #c8ff50;
|
||||||
|
font-family: "myfont", "Microsoft Yahei";
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
.perf-unit-sm {
|
||||||
|
font-size: 1.1vh;
|
||||||
|
color: rgba(180, 220, 160, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部标兵栏 */
|
||||||
|
.perf-footer {
|
||||||
|
flex-shrink: 0;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.6vh;
|
||||||
|
background: rgba(15, 40, 65, 0.8);
|
||||||
|
border-radius: 2vh;
|
||||||
|
font-size: 1.35vh;
|
||||||
|
color: rgba(200, 230, 255, 0.85);
|
||||||
|
border: 1px solid rgba(60, 120, 180, 0.3);
|
||||||
|
margin-top: 0.5vh;
|
||||||
|
}
|
||||||
|
.perf-lightning {
|
||||||
|
font-style: normal;
|
||||||
|
color: #ff9d3e;
|
||||||
|
font-size: 1.4vh;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue