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

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

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

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

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

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

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