wonderzhao
/
cola-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: bug列表修改

This commit is contained in:
Zhao Zhao Shen 2025-03-06 14:21:22 +08:00
parent 69f45097f6
commit 847619bb3e
4 changed files with 87 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/utils/request.js
View File

@ -1,8 +1,8 @@
import axios from 'axios';
const service = axios.create({
baseURL: 'http://192.168.1.199:8080/api', // 办公室测试接口
//baseURL: 'http://39.105.9.124:8090/api', // 家用测试接口
// baseURL: 'http://192.168.1.199:8080/api', // 办公室测试接口
baseURL: 'http://39.105.9.124:8090/api', // 家用测试接口
timeout: 5000, // 请求超时时间
headers: {
"Access-Control-Allow-Origin": "*",

82
src/views/Dashboard/index.vue
View File

@ -10,7 +10,8 @@
</div>
<div class="spacing"></div>
<div v-for="item in progressList" :key="item.name" class="juice-item"
:data-device-id="item?.deviceId" @click="handleBlockClick(item?.deviceId, item.name, false)" >
:data-device-id="item?.deviceId"
@click="handleBlockClick(item?.deviceId, item.name, false)">
<span class="juice-name">{{ item.name }}：</span>
<div class="progress-bar" style="cursor: pointer;">
<div class="progress"
@ -28,7 +29,8 @@
</div>
<div class="spacing"></div>
<div v-for="item in innerProgressList" :key="item.name" class="juice-item"
:data-device-id="item?.deviceId" @click="handleBlockClick(item?.deviceId, item.name, false)">
:data-device-id="item?.deviceId"
@click="handleBlockClick(item?.deviceId, item.name, false)">
<span class="juice-name">{{ item.name }}：</span>
<div class="progress-bar" style="cursor: pointer;">
<div class="progress"
@ -77,28 +79,24 @@
</div>
</div>
<div class="tag-panel">
<IxChip class="left-chip"
:background="processForm_uht.cleanStatus === '已碱洗' ? '#00BEDC' : '#6B6B7E'"
chip-color="#000028"
variant="custom">
<IxChip class="left-chip"
:background="processForm_uht.cleanStatus === '已碱洗' ? '#00BEDC' : '#6B6B7E'"
chip-color="#000028" variant="custom">
&emsp;&nbsp;已碱洗
</IxChip>
<IxChip class="left-chip"
:background="processForm_uht.cleanStatus === '已酸洗' ? '#00FFB9' : '#6B6B7E'"
chip-color="#000028"
variant="custom">
<IxChip class="left-chip"
:background="processForm_uht.cleanStatus === '已酸洗' ? '#00FFB9' : '#6B6B7E'"
chip-color="#000028" variant="custom">
&emsp;&nbsp;已酸洗
</IxChip>
<IxChip class="left-chip"
:background="processForm_uht.cleanStatus === '清洁状态' ? '#00BEDC' : '#6B6B7E'"
chip-color="#000028"
variant="custom">
<IxChip class="left-chip"
:background="processForm_uht.cleanStatus === '清洁状态' ? '#00BEDC' : '#6B6B7E'"
chip-color="#000028" variant="custom">
&emsp;清洁状态
</IxChip>
<IxChip class="left-chip"
:background="processForm_uht.cleanStatus === '无菌状态' ? '#6B6B7E' : '#00BEDC'"
chip-color="#000028"
variant="custom">
<IxChip class="left-chip"
:background="processForm_uht.cleanStatus === '无菌状态' ? '#6B6B7E' : '#00BEDC'"
chip-color="#000028" variant="custom">
&emsp;无菌状态
</IxChip>
</div>
@ -106,7 +104,8 @@
</div>
<div class="block">
<div class="flex-row" :data-device-id="pulpUHTData?.deviceId"
@click="handleBlockClick(pulpUHTData?.deviceId, pulpUHTData.name, true)" style="cursor: pointer;">
@click="handleBlockClick(pulpUHTData?.deviceId, pulpUHTData.name, true)"
style="cursor: pointer;">
<h2 class="juice-title">果肉 UHT</h2>
</div>
<div class="spacing"></div>
@ -187,11 +186,8 @@
</div>
</div>
<div class="info-item" style="padding: 1rem 0 0 0;">
<svg width="15" height="15" viewBox="0 0 15 15" class="arrow">
<polygon points="0,0 15,7.5 0,15" fill="#00FFB9" />
</svg>
<span class="info-label" :style="{ color: '#00FFB9' }">果汁流量：{{ juiceTank.productFlowRate
}}</span>
<span class="info-label" :style="{ color: '#00FFB9' }">▼果汁流量：{{ juiceTank.productFlowRate
}}</span>
</div>
</div>
</div>
@ -233,11 +229,8 @@
</div>
<div class="block">
<div class="info-item" style="padding: 0.5rem 0 0 0;">
<svg width="15" height="15" viewBox="0 0 15 15" class="arrow">
<polygon points="0,0 15,7.5 0,15" fill="#00FFB9" />
</svg>
<span class="info-label" :style="{ color: '#00FFB9' }">果汁流量：{{ pulpTank.productFlowRate
}}</span>
<span class="info-label" :style="{ color: '#00FFB9' }">▲果肉流量：{{ pulpTank.productFlowRate
}}</span>
</div>
<div class="flex-row">
<h2 class="juice-title">果肉无菌罐</h2>
@ -286,8 +279,8 @@
</div>
</div>
<div class="spacing"></div>
<ProcessGanttChart ref="ganttChart" :process-data="formattedProcessData" :current-range="currentRange" :end-time="globalTime"
@segment-click="handleSegmentClick" />
<ProcessGanttChart ref="ganttChart" :process-data="formattedProcessData" :current-range="currentRange"
:end-time="globalTime" @segment-click="handleSegmentClick" />
</div>
</div>
<div class="lower-footer" v-if="deviceType">
@ -298,10 +291,11 @@
<IxButton Outline class="btnStyle"> 流量：{{ productFlowRate }} </IxButton>
<IxButton Outline class="btnStyle"> 配方：{{ formula }} </IxButton>
<IxButton Outline class="btnStyle"> 持续时长：{{ duration }} </IxButton>
<IxButton Outline id="triggerId"> {{ selectedReason ? '停机原因：' + selectedReason : '请选择停机原因 ▲' }} </IxButton>
<IxButton Outline id="triggerId"> {{ selectedReason ? '停机原因：' + selectedReason : '请选择停机原因 ▲' }} </IxButton>
<IxDropdown trigger="triggerId" class="drop-down">
<IxDropdownHeader label="停机原因"></IxDropdownHeader>
<IxDropdownItem v-for="reason in stopReasons" :key="reason" :label="reason" @click="handleReasonChange(id, reason)"></IxDropdownItem>
<IxDropdownItem v-for="reason in stopReasons" :key="reason" :label="reason"
@click="handleReasonChange(id, reason)"></IxDropdownItem>
<IxDivider></IxDivider>
<IxDropdownItem label="其他" @click="handleOtherReasonClick"></IxDropdownItem>
<div v-if="showOtherReasonInput" class="other-reason-input" @click.stop>
@ -332,7 +326,7 @@ import ProcessGanttChart from '@/components/ProcessGanttChart.vue'
const emit = defineEmits(['send-data']);
const sendDataToParent = () => {
emit('send-data', 'SIEMENS MIS 1.0 前处理界面', 'mis-app');
emit('send-data', 'SIEMENS MIS 1.0 前处理界面', 'mis-app');
};
// 设置为您期望的时区，比如 "Asia/Shanghai"
@ -371,7 +365,7 @@ const processData = ref([])
// 新增函数，转换时间格式
const formatTime = (timeString) => {
const momentDate = moment(timeString);
return momentDate.tz(timezone).format('YYYY-MM-DD HH:mm');
return momentDate.tz(timezone).format('YYYY-MM-DD HH:mm');
}
// 新增函数，统一日期格式
@ -420,7 +414,7 @@ const removeStatus = (id) => {
statuses.value = statuses.value.filter(status => status.id !== id);
};
const updateCurrentInfo = (segment) => {
const updateCurrentInfo = (segment) => {
id.value = segment.id;
currentStatus.value = segment.deviceStatus;
startTimeFormatted.value = formatTime(segment.beginTime);
@ -1114,22 +1108,6 @@ onUnmounted(() => {
padding: 0;
}
/* 箭头样式 */
.arrow {
width: 0;
/* 调整高度 */
padding: 0;
}
/* 箭头样式 */
.arrow {
width: 0;
height: 0;
border-left: 0.3125rem solid transparent;
border-right: 0.3125rem solid transparent;
border-top: 0.3125rem solid #00FFB9;
}
.lower-footer {
display: flex;
flex-wrap: wrap;

69
src/views/Inspection/index.vue
View File

@ -3,33 +3,30 @@
<div class="header">
<div class="header_left">
<!-- 日期输入框 -->
<IxDateInput label="日期" name="date" helper-text="选择日期" :value="currentDate" class="input-spacing"
@dateChange="handleDateChange">
<IxDateInput label="日期" name="date" :value="currentDate" class="input-spacing" @dateChange="handleDateChange">
</IxDateInput>
<!-- 班次选择框 -->
<IxSelect Outline id="triggerId" v-model="shift" label="班次" helperText="选择班次" class="input-spacing"
@valueChange="handleShiftChange">
<IxSelect Outline id="triggerId" v-model="shift" label="班次" class="input-spacing" @valueChange="handleShiftChange">
<IxSelectItem icon="sun" label="白班" value="0"></IxSelectItem>
<IxSelectItem icon="moon" label="晚班" value="1"></IxSelectItem>
</IxSelect>
<!-- 状态选择框 -->
<IxSelect Outline id="statusSelect" v-model="status" label="状态" Placeholder="状态" helperText="选择状态"
class="input-spacing">
<IxSelect Outline id="statusSelect" v-model="status" label="状态" Placeholder="状态" class="input-spacing">
<IxSelectItem icon="sun" label="全部" value="0"></IxSelectItem>
<IxSelectItem icon="sun" label="正常" value="1"></IxSelectItem>
<IxSelectItem label="报警" value="2"></IxSelectItem>
</IxSelect>
<!-- 查询按钮 -->
<IxButton @click="handleSearch" class="input-spacing"> 查询 </IxButton>
<IxButton @click="handleSearch" class="input-spacing btn-style"> 查询 </IxButton>
<!-- 导出按钮 -->
<IxButton class="input-spacing" @click="handleExport"> 导出全部 </IxButton>
<IxButton class="input-spacing btn-style" @click="handleExport"> 导出全部 </IxButton>
</div>
<div class="header_right">
<!-- 设备列表按钮 -->
<span v-for="(item, index) in deviceList" :key="item.id">
<IxButton :outline="selectedDeviceId !== item.id" @click="handleDeviceListChange(item.id)">
<IxButton :outline="selectedDeviceId !== item.id" class="btn-style" @click="handleDeviceListChange(item.id)">
{{ item.name }}
</IxButton>
</span>
@ -61,14 +58,15 @@
</div>
<!-- 点检项目列表 -->
<IxEventList>
<IxEventListItem v-for="(item, index) in inspectionItems" :key="index" color="color-success"
class="testbg">
<IxEventListItem v-for="(item, index) in inspectionItems" :key="index" color="color-success" class="testbg">
<div class="table-row">
<span class="fixed-width title-width">{{ item.label }}</span>
<span class="fixed-width">{{ item.unit || '--' }}</span>
<span class="fixed-width">{{ item.reference || '--' }}</span>
<span class="fixed-width">{{ item.current }}</span> <!-- 确保这里绑定的是 item.current -->
<span class="fixed-width" v-for="hour in hours" :key="hour">
<span class="fixed-width" v-for="hour in hours" :key="hour"
:class="{ 'highlight-cell': item.data[hour] < 0.5 }"
@click="item.data[hour] < 0.5 ? handleInspection(hour, index) : null">
{{ item.data[hour] || '--' }}
</span>
</div>
@ -375,24 +373,28 @@ onMounted(async () => {
setupAutoUpdate();
// 监听 update-history 事件
window.addEventListener('update-history', (event) => {
isAutoUpdate.value = false;
selectedDate.value = event.detail;
fetchCurrentValues();
fetchInspectionData();
setupAutoUpdate();
});
// window.addEventListener('update-history', (event) => {
// isAutoUpdate.value = false;
// selectedDate.value = event.detail;
// fetchCurrentValues();
// fetchInspectionData();
// setupAutoUpdate();
// });
// 监听 reset 事件
window.addEventListener('reset', (event) => {
isAutoUpdate.value = true;
selectedDate.value = moment().tz(timezone).format('YYYY-MM-DD HH:mm');
fetchCurrentValues();
fetchInspectionData();
setupAutoUpdate();
});
// window.addEventListener('reset', (event) => {
// isAutoUpdate.value = true;
// selectedDate.value = moment().tz(timezone).format('YYYY-MM-DD HH:mm');
// fetchCurrentValues();
// fetchInspectionData();
// setupAutoUpdate();
// });
});
// 在 onUnmounted 中添加
// onUnmounted(() => {
// window.removeEventListener('update-history', handleHistoryUpdate);
// window.removeEventListener('reset', handleReset);
// });
onUnmounted(() => {
if (autoUpdateInterval) {
clearInterval(autoUpdateInterval);
@ -476,10 +478,14 @@ onUnmounted(() => {
.fixed-width {
width: 6.5rem;
/* 设置固定宽度 */
height: 2.5rem;
text-align: center;
/* 居中对齐 */
font-size: 1rem;
/* 调大固定宽度元素字体大小 */
display: flex;
align-items: center;
justify-content: center;
}
.header-row {
@ -497,8 +503,8 @@ onUnmounted(() => {
width: 15rem;
}
ix-button {
margin: 0.25rem;
.btn-style {
margin: 1.8rem 0.5rem 0 0;
}
.testbg {
@ -546,4 +552,9 @@ ix-button {
background-color: inherit;
z-index: 1;
}
.highlight-cell {
background-color: orange;
cursor: pointer;
}
</style>

28
src/views/layout/vueLayout.vue
View File

@ -2,12 +2,12 @@
<IxApplication :appSwitchConfig="appSwitchConfig" theme="classic-dark">
<IxApplicationHeader :name="appName" :applicationSwitchButton="true">
<!-- 添加实时显示时间 -->
<div class="time-display">{{ currentTime }}</div>
<div v-if="appSwitchConfig.currentAppId === 'mis-app'" class="time-display">{{ currentTime }}</div>
<!-- 确保图标按钮正确显示 -->
<IxIconButton icon="alarm-bell-filled" variant="secondary" ghost></IxIconButton>
<IxIconButton icon="calendar-filled" variant="secondary" ghost @click="toggleDatetimePicker"></IxIconButton>
<IxIconButton icon="alarm-clock-filled" variant="secondary" ghost @click="handleReset"></IxIconButton>
<IxIconButton v-if="appSwitchConfig.currentAppId === 'mis-app'" icon="alarm-bell-filled" variant="secondary" ghost></IxIconButton>
<IxIconButton v-if="appSwitchConfig.currentAppId === 'mis-app'" icon="calendar-filled" variant="secondary" ghost @click="toggleDatetimePicker"></IxIconButton>
<IxIconButton v-if="appSwitchConfig.currentAppId === 'mis-app'" icon="alarm-clock-filled" variant="secondary" ghost @click="handleReset"></IxIconButton>
</IxApplicationHeader>
<IxContent class="mainContent">
@ -42,12 +42,12 @@ import { useRoute } from 'vue-router';
let appSwitchConfig = {
i18nAppSwitch: '切换应用',
i18nLoadingApps: '加载应用中...',
currentAppId: '',
currentAppId: 'mis-app',
apps: [
{
id: 'mis-app',
name: 'MIS 1.0',
iconSrc: '@/assets/genetic-data.svg',
iconSrc: require('@/assets/genetic-data.svg'),
url: '/',
description: '前处理系统',
target: '_self',
@ -55,7 +55,7 @@ let appSwitchConfig = {
{
id: 'other-app',
name: '点检系统',
iconSrc: '@/assets/genetic-data.svg',
iconSrc: require('@/assets/genetic-data.svg'),
url: '/#/inspection',
description: '其他系统描述',
target: '_self',
@ -107,7 +107,6 @@ const handleDatePickerDone = (event) => {
};
const updateHistoryWithTime = (datetime) => {
console.log("🚀 ~ updateHistoryWithTime ~ datetime:", datetime)
// 将 datetime 转换为标准的 YYYY-MM-DD HH:mm:ss 格式
const parsedDate = new Date(datetime.replace(/-/g, '/'));
if (isNaN(parsedDate.getTime())) {
@ -122,7 +121,6 @@ const updateHistoryWithTime = (datetime) => {
const seconds = String(parsedDate.getSeconds()).padStart(2, '0');
const formattedDatetime = `${year}-${month}-${day} ${hours}:${minutes}`;
// 触发主页中的 getHistory 方法
console.log("🚀 ~ updateHistoryWithTime ~ formattedDatetime:", formattedDatetime)
const event = new CustomEvent('update-history', { detail: formattedDatetime });
currentTime.value = formattedDatetime;
@ -131,7 +129,6 @@ const updateHistoryWithTime = (datetime) => {
};
const updateHistoryWithDate = (date) => {
console.log("🚀 ~ updateHistoryWithDate ~ date:", date)
// 将 date 转换为标准的 YYYY-MM-DD 格式
const { from } = date;
const parsedDate = new Date(from);
@ -144,7 +141,6 @@ const updateHistoryWithDate = (date) => {
const day = String(parsedDate.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
// 触发主页中的 getHistory 方法
console.log("🚀 ~ updateHistoryWithDate ~ formattedDate:", formattedDate)
const event = new CustomEvent('update-history', { detail: formattedDate });
currentTime.value = formattedDate;
@ -174,7 +170,7 @@ onMounted(() => {
<style scoped>
ix-application {
width: 100%;
height: 100vh;
/* height: 100vh; */
/* 设置应用高度为视口高度 */
background-color: #000028;
font-family: 'Microsoft YaHei', sans-serif;
@ -308,11 +304,17 @@ ix-application {
background: #000028;
min-height: 100vh;
width: 100%;
overflow-x: auto;
overflow-x: hidden;
}
:global(.visible) {
--theme-modal--background:#23233C !important;
/* --theme-color-ghost--selected:#23233C !重要; */
}
.debug-info {
color: red;
font-size: 1rem;
margin: 0.5rem 1rem;
}
</style>