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 @@ ...@@ -21,32 +21,10 @@
<!-- v-show="performanceShow" --> <!-- v-show="performanceShow" -->
<!-- v-loading.body.fullscreen.lock="idle_rate_loading" --> <!-- 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="multi-utilization-chart glass-effect">
<div class="section-title"> <div class="section-title">
<div class="title-bar"></div> <div class="title-bar"></div>
<span class="title-text" <span class="title-text">多设备空闲率对比</span>
>[[ selectedMultiDevice ? '设备空闲率概览' : '多设备空闲率对比' ]]</span
>
</div> </div>
<div <div
id="multiUtilizationChart" id="multiUtilizationChart"
...@@ -75,7 +53,7 @@ ...@@ -75,7 +53,7 @@
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div class="utilization-chart glass-effect" v-if="selectedDevice"> <div class="utilization-chart glass-effect">
<div class="section-title"> <div class="section-title">
<div class="title-bar"></div> <div class="title-bar"></div>
<span class="title-text">设备空闲率</span> <span class="title-text">设备空闲率</span>
...@@ -84,25 +62,6 @@ ...@@ -84,25 +62,6 @@
</div> </div>
<!-- 底部状态图 --> <!-- 底部状态图 -->
<!-- v-loading.body.fullscreen.lock="chart_loading" --> <!-- 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="status-chart glass-effect">
<div class="section-title"> <div class="section-title">
<div class="title-bar"></div> <div class="title-bar"></div>
...@@ -195,7 +154,7 @@ ...@@ -195,7 +154,7 @@
windowHeight: window.innerHeight, // 窗口高度 windowHeight: window.innerHeight, // 窗口高度
// baseURL: "https://workstation.rokeris.com", // 基地址 https://workstation.rokeris.com // baseURL: "https://workstation.rokeris.com", // 基地址 https://workstation.rokeris.com
// baseURL: "http://qdry.dws.rokecloud.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 localURL: "https://dws-platform.xbg.rokeris.com/dev-api", // 基地址 https://workstation.rokeris.com
idle_rate_loading: false, // 加载效果 idle_rate_loading: false, // 加载效果
chart_loading: false, chart_loading: false,
...@@ -211,8 +170,6 @@ ...@@ -211,8 +170,6 @@
plan_time_list: null, plan_time_list: null,
latestDateList: [], latestDateList: [],
factory_code: "8d8dec6e-0d44-11f0-9692-00163e04c506", factory_code: "8d8dec6e-0d44-11f0-9692-00163e04c506",
selectedMultiDevice: null, // 新增：多设备图表选中的设备
selectedBarChartDevice: null, // 新增：柱状图选中的设备
}; };
}, },
computed: { computed: {
...@@ -267,10 +224,7 @@ ...@@ -267,10 +224,7 @@
} }
}); });
}); });
// 为柱状图设置默认设备
this.selectedBarChartDevice = this.deviceList[0].code;
this.get_plan_time(); this.get_plan_time();
this.get_daily_running_time();
console.log("获取到所有已绑定设备数据:", this.deviceList.length, "条"); console.log("获取到所有已绑定设备数据:", this.deviceList.length, "条");
} else { } else {
const errorMsg = response.data.result const errorMsg = response.data.result
...@@ -285,12 +239,16 @@ ...@@ -285,12 +239,16 @@
}, },
// 获取日均运行时间统计 // 获取日均运行时间统计
get_daily_running_time() { get_daily_running_time() {
if (!this.selectedDevice) {
this.pickingOrderList = [];
return;
}
this.idle_rate_loading = true; this.idle_rate_loading = true;
axios({ axios({
method: "post", method: "post",
url: this.localURL + "/public/device_efficiency/daily_running_time", url: this.localURL + "/public/device_efficiency/daily_running_time",
data: { data: {
device_code: this.selectedBarChartDevice, device_code: this.selectedDevice,
}, },
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
}) })
...@@ -343,8 +301,8 @@ ...@@ -343,8 +301,8 @@
if (this.selectedDevice) { if (this.selectedDevice) {
this.get_series_utilization_rate(); this.get_series_utilization_rate();
} }
// 如果多设备图表已初始化且没有选择设备，则调用多设备接口 // 初始化多设备图表
if (this.multiUtilizationChart && !this.selectedMultiDevice) { if (this.multiUtilizationChart) {
this.get_series_utilization_rate_top_5(); this.get_series_utilization_rate_top_5();
} }
} }
...@@ -381,7 +339,12 @@ ...@@ -381,7 +339,12 @@
// 只有在选择了设备时才调用接口 // 只有在选择了设备时才调用接口
if (this.selectedDevice) { if (this.selectedDevice) {
this.get_series_utilization_rate(); this.get_series_utilization_rate();
} else {
// 当设备被清空时，清空折线图数据
this.initUtilizationChart([]);
} }
// 同时更新柱状图数据
this.get_daily_running_time();
}, },
// 处理窗口大小变化修改图表大小 // 处理窗口大小变化修改图表大小
handleResize() { handleResize() {
...@@ -460,7 +423,7 @@ ...@@ -460,7 +423,7 @@
symbol: "circle", symbol: "circle",
symbolSize: 8, symbolSize: 8,
label: { label: {
show: true, show: data.length > 0,
position: "top", position: "top",
color: "#FFFFFF", color: "#FFFFFF",
fontSize: 12, fontSize: 12,
...@@ -473,7 +436,7 @@ ...@@ -473,7 +436,7 @@
itemStyle: { itemStyle: {
color: "#36cfc9", 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 @@ ...@@ -560,7 +523,7 @@
if (!r) return null; if (!r) return null;
return r[2]; return r[2];
}, },
// 新增：初始化多设备空闲率图表 // 初始化多设备空闲率图表
initMultiUtilizationChart() { initMultiUtilizationChart() {
setTimeout(() => { setTimeout(() => {
const chartDom = document.getElementById("multiUtilizationChart"); const chartDom = document.getElementById("multiUtilizationChart");
...@@ -574,151 +537,8 @@ ...@@ -574,151 +537,8 @@
} }
this.multiUtilizationChart = echarts.init(chartDom); this.multiUtilizationChart = echarts.init(chartDom);
// 根据selectedMultiDevice来决定显示内容
if (!this.selectedMultiDevice) {
this.showMultiDeviceChart();
} else {
this.showSingleDeviceChart();
}
}, 300); }, 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） // 新增：获取多设备空闲率数据（Top 5）
get_series_utilization_rate_top_5() { get_series_utilization_rate_top_5() {
// 构造设备列表参数 // 构造设备列表参数
...@@ -912,9 +732,9 @@ ...@@ -912,9 +732,9 @@
/* 底部状态图样式 */ /* 底部状态图样式 */
.status-chart { .status-chart {
padding: 20px; padding: 20px 20px 15px 20px;
height: auto; height: auto;
min-height: 500px; min-height: 460px;
position: relative; position: relative;
margin-bottom: 10px; margin-bottom: 10px;
} }
...@@ -930,8 +750,8 @@ ...@@ -930,8 +750,8 @@
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
padding: 10px 40px; padding: 10px 40px 5px 40px;
height: 360px; height: 370px;
} }
.columns-container { .columns-container {
...@@ -939,7 +759,7 @@ ...@@ -939,7 +759,7 @@
top: 0; top: 0;
left: 60px; left: 60px;
width: calc(100% - 70px); width: calc(100% - 70px);
height: 320px; height: 330px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 10px; padding: 0 10px;
...@@ -1232,9 +1052,10 @@ ...@@ -1232,9 +1052,10 @@
/* X轴标签样式 */ /* X轴标签样式 */
.x-axis-label { .x-axis-label {
margin-top: 10px; margin-top: 10px;
font-size: 14px; font-size: 12px;
text-align: center; text-align: center;
width: 100%; width: 100%;
color: #fff;
} }
/* 移除原有X轴容器样式 */ /* 移除原有X轴容器样式 */
...@@ -1325,4 +1146,3 @@ ...@@ -1325,4 +1146,3 @@
} }
</style> </style>
</html> </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