|
|
@@ -37,7 +37,6 @@
|
|
|
</div>
|
|
|
<div class="d-flex aside-width">
|
|
|
<div class="react-right bg-color-r mr-3">
|
|
|
- <!-- <span class="text ">设备运行分析</span>-->
|
|
|
<span class="text" @click="fullScreen" ref="fullScreen">全屏</span>
|
|
|
<span class="text" @click="exitFullScreen" ref="exitFullScreen" style="display: none">退出全屏</span>
|
|
|
</div>
|
|
|
@@ -52,7 +51,7 @@
|
|
|
<el-dropdown-item ><router-link to="package"> 包装车间 </router-link></el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
- <el-select v-model="linecode" class="dropdown" @change ="handleBlur" style="width: 150px">
|
|
|
+ <el-select v-model="linecode" class="dropdown" @change ="handleLineChange" style="width: 150px">
|
|
|
<el-option
|
|
|
v-for="item in linedata"
|
|
|
:key="item.LI_CODE"
|
|
|
@@ -62,6 +61,9 @@
|
|
|
</el-select>
|
|
|
<span class="text"> </span>
|
|
|
<span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
|
|
|
+<!-- <span class="text" style="margin-left: 20px; color: #ffeb3b;">
|
|
|
+ {{ currentLineIndex + 1 }}/{{ linedata.length }} ({{ countdown }}s)
|
|
|
+ </span>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -143,13 +145,19 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
timing: null,
|
|
|
+ lineTimer: null, // 新增:产线切换定时器
|
|
|
loading: true,
|
|
|
dateDay: null,
|
|
|
dateYear: null,
|
|
|
dateWeek: null,
|
|
|
weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
|
|
decorationColor: ['#568aea', '#000000'],
|
|
|
- isShow: false
|
|
|
+ isShow: false,
|
|
|
+ linedata: [], // 产线数据
|
|
|
+ linecode: '', // 当前选中的产线
|
|
|
+ currentLineIndex: 0, // 当前产线索引
|
|
|
+ countdown: 60, // 倒计时
|
|
|
+ countdownTimer: null // 倒计时定时器
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
@@ -171,6 +179,8 @@ export default {
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
clearInterval(this.timing)
|
|
|
+ clearInterval(this.lineTimer) // 清除产线切换定时器
|
|
|
+ clearInterval(this.countdownTimer) // 清除倒计时定时器
|
|
|
clearInterval(this.intervalId)
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -184,41 +194,107 @@ export default {
|
|
|
cancelLoading() {
|
|
|
setTimeout(() => {
|
|
|
this.loading = false
|
|
|
- }, 5000)
|
|
|
+ }, 2000)
|
|
|
},
|
|
|
- handleBlur(val) {
|
|
|
- sessionStorage.setItem('li_code', val);
|
|
|
- this.$cookie.set("SMT_LI_CODE", val, {
|
|
|
- expires: 30,
|
|
|
- });
|
|
|
- location.reload();
|
|
|
+ handleLineChange(val) {
|
|
|
+ this.switchToLine(val);
|
|
|
},
|
|
|
+
|
|
|
+ // 切换到指定产线
|
|
|
+ switchToLine(lineCode) {
|
|
|
+ const index = this.linedata.findIndex(item => item.LI_CODE === lineCode);
|
|
|
+ if (index !== -1) {
|
|
|
+ this.currentLineIndex = index;
|
|
|
+ this.linecode = lineCode;
|
|
|
+ sessionStorage.setItem('li_code', lineCode);
|
|
|
+ this.$cookie.set("SMT_LI_CODE", lineCode, {
|
|
|
+ expires: 30,
|
|
|
+ });
|
|
|
+
|
|
|
+ // 重新加载页面数据
|
|
|
+ location.reload();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 切换到下一产线
|
|
|
+ switchToNextLine() {
|
|
|
+ if (this.linedata.length === 0) return;
|
|
|
+ this.currentLineIndex = (this.currentLineIndex + 1) % this.linedata.length;
|
|
|
+ const nextLine = this.linedata[this.currentLineIndex];
|
|
|
+ this.switchToLine(nextLine.LI_CODE);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 启动产线自动切换
|
|
|
+ startLineAutoSwitch() {
|
|
|
+ // 先清除之前的定时器
|
|
|
+ if (this.lineTimer) {
|
|
|
+ clearInterval(this.lineTimer);
|
|
|
+ }
|
|
|
+ if (this.countdownTimer) {
|
|
|
+ clearInterval(this.countdownTimer);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 重置倒计时
|
|
|
+ this.countdown = 60;
|
|
|
+
|
|
|
+ // 启动倒计时
|
|
|
+ this.countdownTimer = setInterval(() => {
|
|
|
+ this.countdown--;
|
|
|
+ if (this.countdown <= 0) {
|
|
|
+ this.countdown = 60; // 重置倒计时
|
|
|
+ this.switchToNextLine();
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+ // 启动产线切换定时器(备用,确保切换)
|
|
|
+ this.lineTimer = setInterval(() => {
|
|
|
+ this.switchToNextLine();
|
|
|
+ }, 60000); // 60秒
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取产线数据
|
|
|
getLines() {
|
|
|
this.$http.get("kanban/getLinesByWorkCenter.action?wccode=100").then(
|
|
|
(res) => {
|
|
|
if (res.data.linedata) {
|
|
|
const data = res.data.linedata;
|
|
|
+ this.linedata = data;
|
|
|
+
|
|
|
+ // 确定当前产线
|
|
|
+ let targetLineCode = '';
|
|
|
if (this.$cookie.get("SMT_LI_CODE") && data.some(item => item.LI_CODE === this.$cookie.get("SMT_LI_CODE"))) {
|
|
|
- sessionStorage.setItem('li_code', this.$cookie.get("SMT_LI_CODE"));
|
|
|
+ targetLineCode = this.$cookie.get("SMT_LI_CODE");
|
|
|
} else {
|
|
|
- sessionStorage.setItem('li_code', data[0].LI_CODE);
|
|
|
+ targetLineCode = data[0].LI_CODE;
|
|
|
this.$cookie.set("SMT_LI_CODE", data[0].LI_CODE, {
|
|
|
expires: 30,
|
|
|
});
|
|
|
}
|
|
|
- this.linedata = data;
|
|
|
+
|
|
|
+ // 设置当前索引
|
|
|
+ const index = data.findIndex(item => item.LI_CODE === targetLineCode);
|
|
|
+ this.currentLineIndex = index !== -1 ? index : 0;
|
|
|
+
|
|
|
+ sessionStorage.setItem('li_code', targetLineCode);
|
|
|
+ this.linecode = targetLineCode;
|
|
|
+
|
|
|
+ // 数据加载完成后启动自动切换
|
|
|
+ setTimeout(() => {
|
|
|
+ this.startLineAutoSwitch();
|
|
|
+ }, 1000);
|
|
|
} else {
|
|
|
sessionStorage.setItem('li_code', '');
|
|
|
+ this.linedata = [];
|
|
|
+ this.linecode = '';
|
|
|
}
|
|
|
- this.linecode = sessionStorage.getItem("li_code");
|
|
|
}, (result) => {
|
|
|
- console.error(result)
|
|
|
+ console.error(result);
|
|
|
+ this.linedata = [];
|
|
|
+ this.linecode = '';
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -230,8 +306,6 @@ export default {
|
|
|
transform: skewX(45deg);
|
|
|
|
|
|
::v-deep .el-select-dropdown {
|
|
|
- /* // 若不将下拉框的背景颜色设置为:transparent,那么做不出来半透明的效果;
|
|
|
- // 因为其最终的显示为:下拉框有一个背景颜色且下拉框的字体有一个背景颜色,重叠后的效果展示; */
|
|
|
border: 1px solid #0f1325;
|
|
|
background: #04308D !important;
|
|
|
}
|
|
|
@@ -269,4 +343,13 @@ export default {
|
|
|
background-color: rgba(0, 225, 219, 0.690196078431373);
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+
|
|
|
+// 添加倒计时样式
|
|
|
+.text {
|
|
|
+ &.countdown {
|
|
|
+ color: #ffeb3b;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|