Skip to content

D
dwsproject
Commit a629d7b2 by nningxx
Options

oee 时间表 修改-1

parent a9d775ec
Showing with 25 additions and 205 deletions
qdry_project/static/src/view/oee_time_sequence_table.html
......@@ -21,32 +21,10 @@
<!-- v-show="performanceShow" -->
<!-- v-loading.body.fullscreen.lock="idle_rate_loading" -->
<!-- 新增：多设备空闲率图表 -->
<!-- 多设备图表的设备选择器 -->
<div class="chart-select-wrapper">
<span class="select-label">设备</span>
<el-select
v-model="selectedMultiDevice"
placeholder="请选择设备"
size="small"
clearable
@change="multiDeviceChange"
class="chart-select"
>
<el-option
v-for="(item,index) in deviceList"
:label="item.name"
:value="item.code"
:key="index"
>
</el-option>
</el-select>
</div>
<div class="multi-utilization-chart glass-effect">
<div class="section-title">
<div class="title-bar"></div>
<span class="title-text"
>[[ selectedMultiDevice ? '设备空闲率概览' : '多设备空闲率对比' ]]</span
>
<span class="title-text">多设备空闲率对比</span>
</div>
<div
id="multiUtilizationChart"
......@@ -75,7 +53,7 @@
</el-option>
</el-select>
</div>
<div class="utilization-chart glass-effect" v-if="selectedDevice">
<div class="utilization-chart glass-effect">
<div class="section-title">
<div class="title-bar"></div>
<span class="title-text">设备空闲率</span>
......@@ -84,25 +62,6 @@
</div>
<!-- 底部状态图 -->
<!-- v-loading.body.fullscreen.lock="chart_loading" -->
<!-- 柱状图的设备选择器 -->
<div class="chart-select-wrapper">
<span class="select-label">设备</span>
<el-select
v-model="selectedBarChartDevice"
placeholder="请选择设备"
size="small"
@change="barChartDeviceChange"
class="chart-select"
>
<el-option
v-for="(item,index) in deviceList"
:label="item.name"
:value="item.code"
:key="index"
>
</el-option>
</el-select>
</div>
<div class="status-chart glass-effect">
<div class="section-title">
<div class="title-bar"></div>
......@@ -195,7 +154,7 @@
windowHeight: window.innerHeight, // 窗口高度
// baseURL: "https://workstation.rokeris.com", // 基地址 https://workstation.rokeris.com
// baseURL: "http://qdry.dws.rokecloud.com",
baseURL: "", //
baseURL: "", // 基地址 https://workstation.rokeris.com
localURL: "https://dws-platform.xbg.rokeris.com/dev-api", // 基地址 https://workstation.rokeris.com
idle_rate_loading: false, // 加载效果
chart_loading: false,
......@@ -211,8 +170,6 @@
plan_time_list: null,
latestDateList: [],
factory_code: "8d8dec6e-0d44-11f0-9692-00163e04c506",
selectedMultiDevice: null, // 新增：多设备图表选中的设备
selectedBarChartDevice: null, // 新增：柱状图选中的设备
};
},
computed: {
......@@ -267,10 +224,7 @@
}
});
});
// 为柱状图设置默认设备
this.selectedBarChartDevice = this.deviceList[0].code;
this.get_plan_time();
this.get_daily_running_time();
console.log("获取到所有已绑定设备数据:", this.deviceList.length, "条");
} else {
const errorMsg = response.data.result
......@@ -285,12 +239,16 @@
},
// 获取日均运行时间统计
get_daily_running_time() {
if (!this.selectedDevice) {
this.pickingOrderList = [];
return;
}
this.idle_rate_loading = true;
axios({
method: "post",
url: this.localURL + "/public/device_efficiency/daily_running_time",
data: {
device_code: this.selectedBarChartDevice,
device_code: this.selectedDevice,
},
headers: { "Content-Type": "application/json" },
})
......@@ -343,8 +301,8 @@
if (this.selectedDevice) {
this.get_series_utilization_rate();
}
// 如果多设备图表已初始化且没有选择设备，则调用多设备接口
if (this.multiUtilizationChart && !this.selectedMultiDevice) {
// 初始化多设备图表
if (this.multiUtilizationChart) {
this.get_series_utilization_rate_top_5();
}
}
......@@ -381,7 +339,12 @@
// 只有在选择了设备时才调用接口
if (this.selectedDevice) {
this.get_series_utilization_rate();
} else {
// 当设备被清空时，清空折线图数据
this.initUtilizationChart([]);
}
// 同时更新柱状图数据
this.get_daily_running_time();
},
// 处理窗口大小变化修改图表大小
handleResize() {
......@@ -460,7 +423,7 @@
symbol: "circle",
symbolSize: 8,
label: {
show: true,
show: data.length > 0,
position: "top",
color: "#FFFFFF",
fontSize: 12,
......@@ -473,7 +436,7 @@
itemStyle: {
color: "#36cfc9",
},
data: data.map((item) => (item > 100 ? 100 : item)),
data: data.length > 0 ? data.map((item) => (item > 100 ? 100 : item)) : [],
},
],
};
......@@ -560,7 +523,7 @@
if (!r) return null;
return r[2];
},
// 新增：初始化多设备空闲率图表
// 初始化多设备空闲率图表
initMultiUtilizationChart() {
setTimeout(() => {
const chartDom = document.getElementById("multiUtilizationChart");
......@@ -574,151 +537,8 @@
}
this.multiUtilizationChart = echarts.init(chartDom);
// 根据selectedMultiDevice来决定显示内容
if (!this.selectedMultiDevice) {
this.showMultiDeviceChart();
} else {
this.showSingleDeviceChart();
}
}, 300);
},
// 新增：显示多设备图表
showMultiDeviceChart() {
// 调用真实的多设备接口
this.get_series_utilization_rate_top_5();
},
// 新增：显示单设备图表
showSingleDeviceChart() {
// 这里复用现有的空闲率接口逻辑
this.get_series_utilization_rate_for_multi();
},
// 新增：为多设备图表获取单设备空闲率数据
get_series_utilization_rate_for_multi() {
axios({
method: "post",
url: this.localURL + "/public/device_efficiency/series_utilization_rate",
data: {
device_code: this.selectedMultiDevice,
plan_time_list: this.plan_time_list,
},
headers: { "Content-Type": "application/json" },
})
.then((res) => {
if (res.data.code == 200) {
this.updateMultiChartWithSingleDevice(res.data.data);
} else {
this.$message.error("多设备图表-设备空闲率获取失败！");
}
})
.catch((err) => {
this.$message.error("多设备图表-设备空闲率捕获到错误！");
});
},
// 新增：用单设备数据更新多设备图表
updateMultiChartWithSingleDevice(data) {
const selectedDeviceInfo = this.deviceList.find(
(device) => device.code === this.selectedMultiDevice
);
const deviceName = selectedDeviceInfo ? selectedDeviceInfo.name : "当前设备";
const option = {
grid: {
left: "3%",
right: "4%",
bottom: "3%",
top: "8%",
containLabel: true,
},
tooltip: {
trigger: "axis",
formatter: "{b} : {c}%",
},
legend: {
show: false,
},
xAxis: {
type: "category",
data: this.latestDateList,
axisLine: {
lineStyle: {
color: "#fff",
},
},
axisLabel: {
color: "#fff",
rotate: this.latestDateList[0].length > 5 ? 30 : 0,
},
},
yAxis: {
type: "value",
min: 0,
max: 100,
interval: 20,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: "rgba(255, 255, 255, 0.1)",
},
},
axisLabel: {
color: "#fff",
formatter: "{value}%",
},
},
series: [
{
name: deviceName,
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 8,
label: {
show: true,
position: "top",
color: "#FFFFFF",
fontSize: 12,
formatter: "{c}%",
},
lineStyle: {
color: "#36cfc9",
width: 3,
},
itemStyle: {
color: "#36cfc9",
},
data: data.map((item) => (item > 100 ? 100 : item)),
},
],
};
// 使用 setOption 的第二个参数 true 来完全替换配置，清除之前的多设备折线
this.multiUtilizationChart.setOption(option, true);
this.multiUtilizationChart.resize();
},
// 新增：更新多设备图表
updateMultiUtilizationChart() {
if (!this.multiUtilizationChart) return;
if (this.selectedMultiDevice) {
this.showSingleDeviceChart();
} else {
this.showMultiDeviceChart();
}
},
// 新增：多设备图表设备选择变化事件
multiDeviceChange(el) {
this.updateMultiUtilizationChart();
},
// 新增：柱状图设备选择变化事件
barChartDeviceChange(el) {
this.get_daily_running_time();
},
// 新增：获取多设备空闲率数据（Top 5）
get_series_utilization_rate_top_5() {
// 构造设备列表参数
......@@ -912,9 +732,9 @@
/* 底部状态图样式 */
.status-chart {
padding: 20px;
padding: 20px 20px 15px 20px;
height: auto;
min-height: 500px;
min-height: 460px;
position: relative;
margin-bottom: 10px;
}
......@@ -930,8 +750,8 @@
width: 100%;
margin: 0 auto;
position: relative;
padding: 10px 40px;
height: 360px;
padding: 10px 40px 5px 40px;
height: 370px;
}
.columns-container {
......@@ -939,7 +759,7 @@
top: 0;
left: 60px;
width: calc(100% - 70px);
height: 320px;
height: 330px;
display: flex;
justify-content: space-between;
padding: 0 10px;
......@@ -1232,9 +1052,10 @@
/* X轴标签样式 */
.x-axis-label {
margin-top: 10px;
font-size: 14px;
font-size: 12px;
text-align: center;
width: 100%;
color: #fff;
}
/* 移除原有X轴容器样式 */
......@@ -1325,4 +1146,3 @@
}
</style>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment