fix: 样式修改 & 点检功能修改

This commit is contained in:
Zhao Zhao Shen 2025-03-04 16:33:17 +08:00
parent e66293b4dc
commit 8b9813c901
4 changed files with 116 additions and 90 deletions

View File

@ -9,9 +9,9 @@ export function getInspectionCurrent(deviceId, inputTime) {
} }
// 获取点检页面整点数值 // 获取点检页面整点数值
export function getInspectionData(deviceId, inputTime) { export function getInspectionData(deviceId, inputTime, shift) {
return request({ return request({
url: `/Check/sharp?deviceId=${deviceId}&inputTime=${inputTime}`, url: `/Check/sharp?deviceId=${deviceId}&inputTime=${inputTime}&shift=${shift}`,
method: 'get' method: 'get'
}); });
} }
@ -19,7 +19,15 @@ export function getInspectionData(deviceId, inputTime) {
// 获取点检页面参数 // 获取点检页面参数
export function getCheckParas(deviceId, inputTime) { export function getCheckParas(deviceId, inputTime) {
return request({ return request({
url: `/Check/CheckParas?deviceId=${deviceId}&inputTime=${inputTime}`, url: `/Check/CheckParas?deviceTypeId=${deviceId}&inputTime=${inputTime}`,
method: 'get'
});
}
// 获取设备列表
export function getDeviceList() {
return request({
url: '/Check/deviceList',
method: 'get' method: 'get'
}); });
} }

View File

@ -241,7 +241,7 @@
<div class="spacing"></div> <div class="spacing"></div>
<div class="info-item"> <div class="info-item">
<span class="info-label">当前步骤</span> <span class="info-label">当前步骤</span>
<span class="info-label">果汁配方</span> <span class="info-label">{{ pulpTank.mixerStep }}</span>
</div> </div>
<div class="juice-item"> <div class="juice-item">
<span>当前液位</span> <span>当前液位</span>
@ -322,7 +322,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 前处理界面'); emit('send-data', 'SIEMENS MIS 1.0 前处理界面', 'mis-app');
}; };
// "Asia/Shanghai" // "Asia/Shanghai"
@ -815,13 +815,13 @@ onUnmounted(() => {
/* 全局样式 */ /* 全局样式 */
.dashboard-container { .dashboard-container {
padding: 0 !important; padding: 0 !important;
margin: 0 !important; margin: 0 -1.5rem 0 0 !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background: #000028; background: #000028;
height: 100vh; height: 100vh;
width: 100%; width: calc(100% + 1.5rem);
overflow: hidden; overflow: hidden;
color: white; color: white;
font-family: 'Microsoft YaHei', sans-serif; font-family: 'Microsoft YaHei', sans-serif;

View File

@ -2,46 +2,44 @@
<div class="inspection-container"> <div class="inspection-container">
<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" @change="handleDateChange"> <IxDateInput label="日期" name="date" helper-text="选择日期" :value="currentDate" class="input-spacing" @dateChange="handleDateChange">
</IxDateInput> </IxDateInput>
<IxSelect Outline id="triggerId" v-model="shift" label="班次" helperText="选择班次" class="input-spacing"> <IxSelect Outline id="triggerId" v-model="shift" label="班次" helperText="选择班次" class="input-spacing" @valueChange="handleShiftChange">
<IxSelectItem icon="sun" label="白班" value="day"></IxSelectItem> <IxSelectItem icon="sun" label="白班" value="0"></IxSelectItem>
<IxSelectItem icon="moon" label="晚班" value="night"></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="状态" helperText="选择状态"
class="input-spacing"> class="input-spacing">
<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="fetchInspectionData" class="input-spacing"> 查询 </IxButton> <IxButton @click="handleSearch" class="input-spacing"> 查询 </IxButton>
<IxButton class="input-spacing"> 导出全部 </IxButton> <IxButton class="input-spacing"> 导出全部 </IxButton>
</div> </div>
<div class="header_right"> <div class="header_right">
<IxButton> 灌注机 </IxButton> <span v-for="(item, index) in deviceList" :key="item.id">
<IxButton Outline> 吹瓶机 </IxButton> <IxButton :outline="selectedDeviceId !== item.id" @click="handleDeviceListChange(item.id)">
<IxButton Outline> 果汁杀菌 </IxButton> {{ item.name }}
<IxButton Outline> 果肉杀菌 </IxButton> </IxButton>
</span>
</div> </div>
</div> </div>
<div class="inspection-table"> <div class="inspection-table">
<div class="table-container"> <div class="table-container">
<IxEventList> <!-- 将表头部分移到 IxEventList 外面 -->
<IxEventListItem class="testbg1 fixed-row"> <div class="table-row fixed-row">
<div class="table-row">
<span class="fixed-width title-width"></span> <span class="fixed-width title-width"></span>
<span class="fixed-width"></span> <span class="fixed-width"></span>
<span class="fixed-width"></span> <span class="fixed-width"></span>
<span class="fixed-width"></span> <span class="fixed-width"></span>
<!--这里是你外面包裹了一个span改span的背景就行index是判断哪些变颜色-->
<span class="fixed-width" v-for="(hour, index) in hours" :key="hour"> <span class="fixed-width" v-for="(hour, index) in hours" :key="hour">
<IxButton class="custom-button" @click="handleInspection(index)"> 确认 </IxButton> <IxButton class="custom-button" @click="handleInspection(index)"> 确认 </IxButton>
</span> </span>
</div> </div>
</IxEventListItem> <div class="table-row-1 fixed-row">
<IxEventListItem class="testbg1 fixed-row">
<div class="table-row-1">
<span class="header-row title-width">点检项目</span> <span class="header-row title-width">点检项目</span>
<span class="header-row">单位</span> <span class="header-row">单位</span>
<span class="header-row">参考值</span> <span class="header-row">参考值</span>
@ -51,7 +49,8 @@
{{ hour }} {{ hour }}
</span> </span>
</div> </div>
</IxEventListItem> <!-- 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">
@ -77,7 +76,7 @@ import momentTimezone from 'moment-timezone';
import { ref, computed, getCurrentInstance, onMounted, defineEmits, onUnmounted } from 'vue'; import { ref, computed, getCurrentInstance, onMounted, defineEmits, onUnmounted } from 'vue';
import { IxDatePicker, IxButton, IxDropdownItem, IxEventList, IxEventListItem, IxSelect, IxSelectItem, IxDateInput } from '@siemens/ix-vue'; import { IxDatePicker, IxButton, IxDropdownItem, IxEventList, IxEventListItem, IxSelect, IxSelectItem, IxDateInput } from '@siemens/ix-vue';
import InspectionForm from './InspectionForm.vue'; import InspectionForm from './InspectionForm.vue';
import { getInspectionCurrent, getInspectionData, getCheckParas } from '@/api/inspection'; import { getInspectionCurrent, getInspectionData, getCheckParas, getDeviceList } from '@/api/inspection';
const emit = defineEmits(['send-data']); const emit = defineEmits(['send-data']);
@ -85,24 +84,26 @@ const emit = defineEmits(['send-data']);
const timezone = 'Asia/Shanghai'; const timezone = 'Asia/Shanghai';
// //
const globalDeviceId = ref(null);
const globalTime = ref(moment().tz(timezone).format('YYYY-MM-DD HH:mm')); const globalTime = ref(moment().tz(timezone).format('YYYY-MM-DD HH:mm'));
const isAutoUpdate = ref(true); // const isAutoUpdate = ref(true); //
const deviceType = ref(false);
const sendDataToParent = () => { const sendDataToParent = () => {
emit('send-data', '点检界面'); emit('send-data', '点检界面', 'other-app');
}; };
// //
const currentHour = new Date().getHours(); const currentHour = new Date().getHours();
// //
const defaultShift = currentHour >= 7 && currentHour < 19 ? 'day' : 'night'; const defaultShift = currentHour >= 7 && currentHour < 19 ? '0' : '1'; // 01
// //
const shift = ref('day'); // shift const shift = ref(defaultShift); //
const status = ref('1'); // status const status = ref('0'); // status
//
const deviceList = ref([]);
const selectedDeviceId = ref(null);
const showForm = ref(false); const showForm = ref(false);
const selectedItemName = ref(''); const selectedItemName = ref('');
@ -121,9 +122,8 @@ const currentDate = formatDate(new Date());
// //
const hours = computed(() => { const hours = computed(() => {
const shiftValue = shift.value; const shiftValue = shift.value;
console.log("🚀 ~ hours ~ shiftValue:", shiftValue)
const hours = []; const hours = [];
if (shiftValue === 'day') { if (shiftValue === '0') {
for (let i = 7; i <= 18; i++) { for (let i = 7; i <= 18; i++) {
hours.push(`${i < 10 ? '0' : ''}${i}:00`); // 07:00-18:00 hours.push(`${i < 10 ? '0' : ''}${i}:00`); // 07:00-18:00
} }
@ -138,10 +138,6 @@ const hours = computed(() => {
return hours; return hours;
}); });
const handleShiftClick = (shift) => {
state.value.selectedShift = shift;
};
// JSON // JSON
const data = ref({}); const data = ref({});
@ -174,14 +170,44 @@ const toLowerCaseFirstLetter = (str) => {
const handleDateChange = (event) => { const handleDateChange = (event) => {
selectedDate.value = event.target.value; selectedDate.value = event.target.value;
console.log("🚀 ~ handleDateChange ~ selectedDate.value:", selectedDate.value)
}; };
const handleShiftChange = (event) => {
shift.value = event.detail;
console.log("🚀 ~ handleShiftChange ~ shift.value:", shift.value)
fetchInspectionData();
fetchCurrentValues();
};
//
const handleDeviceListChange = (id) => {
selectedDeviceId.value = id;
fetchInspectionData();
fetchCurrentValues();
};
//
const fetchDeviceList = async () => {
try {
const response = await getDeviceList();
if (response.code === 200) {
deviceList.value = response.data;
selectedDeviceId.value = deviceList.value[2].id; //
}
} catch (error) {
console.error('Error fetching device list:', error);
}
};
//
const fetchCurrentValues = async () => { const fetchCurrentValues = async () => {
try { try {
const deviceId = 7; // ID const deviceId = selectedDeviceId.value; // ID
const inputTime = new Date().toISOString(); // const dateValue = selectedDate.value || currentDate;
const response = await getInspectionCurrent(deviceId, inputTime); // const inputTime = selectedDate.value; //new Date().toISOString(); //
const params = await getCheckParas(deviceId, inputTime); const response = await getInspectionCurrent(deviceId, dateValue);
const params = await getCheckParas(deviceId, dateValue);
if (response.code === 200) { if (response.code === 200) {
const currentValues = response.data.data; const currentValues = response.data.data;
@ -192,13 +218,11 @@ const fetchCurrentValues = async () => {
if (params.code === 200) { if (params.code === 200) {
const paramData = params.data; const paramData = params.data;
console.log("🚀 ~ fetchCurrentValues ~ paramData:", paramData)
inspectionItems.value.forEach(item => { inspectionItems.value.forEach(item => {
const param = paramData.find(param => { const param = paramData.find(param => {
return toLowerCaseFirstLetter(param.keyname) === item.name; return toLowerCaseFirstLetter(param.keyname) === item.name;
}); });
console.log("🚀 ~ fetchCurrentValues ~ param:", param)
if (param) { if (param) {
item.label = param.projectDescription; item.label = param.projectDescription;
@ -208,23 +232,20 @@ const fetchCurrentValues = async () => {
}); });
} }
console.log("🚀 ~ fetchCurrentValues ~ inspectionItems.value:", inspectionItems.value)
} catch (error) { } catch (error) {
console.error('Error fetching current values:', error); console.error('Error fetching current values:', error);
} }
}; };
//
const fetchInspectionData = async () => { const fetchInspectionData = async () => {
try { try {
const deviceId = 7; // globalDeviceId // ID const deviceId = selectedDeviceId.value; // ID
const inputTime = new Date().toISOString(); // globalTime; // // const inputTime = new Date().toISOString(); // globalTime; //
const shiftValue = shift.value; const shiftValue = shift.value;
const statusValue = status.value; const statusValue = status.value;
const dateValue = selectedDate.value || currentDate; const dateValue = selectedDate.value || currentDate;
console.log("🚀 ~ fetchInspectionData ~ shift:", shiftValue) const response = await getInspectionData(deviceId, dateValue, shiftValue);
console.log("🚀 ~ fetchInspectionData ~ status:", statusValue)
console.log("🚀 ~ fetchInspectionData ~ date:", dateValue)
const response = await getInspectionData(deviceId, inputTime);
if (response.code === 200) { if (response.code === 200) {
const inspectionData = response.data; const inspectionData = response.data;
const itemsMap = {}; const itemsMap = {};
@ -248,15 +269,21 @@ const fetchInspectionData = async () => {
}); });
inspectionItems.value = Object.values(itemsMap); inspectionItems.value = Object.values(itemsMap);
} }
console.log("🚀 ~ fetchInspectionData ~ inspectionItems.value:", inspectionItems.value)
} catch (error) { } catch (error) {
console.error('Error fetching inspection data:', error); console.error('Error fetching inspection data:', error);
} }
}; };
//
const handleSearch = () => {
fetchInspectionData();
fetchCurrentValues();
};
let autoUpdateInterval = null; let autoUpdateInterval = null;
onMounted(() => { onMounted(async () => {
await fetchDeviceList();
fetchCurrentValues(); fetchCurrentValues();
fetchInspectionData(); fetchInspectionData();
sendDataToParent(); sendDataToParent();
@ -278,7 +305,7 @@ onMounted(() => {
// update-history // update-history
window.addEventListener('update-history', (event) => { window.addEventListener('update-history', (event) => {
isAutoUpdate.value = false; isAutoUpdate.value = false;
globalTime.value = event.detail; selectedDate.value = event.detail;
fetchCurrentValues(); fetchCurrentValues();
fetchInspectionData(); fetchInspectionData();
setupAutoUpdate(); setupAutoUpdate();
@ -287,7 +314,7 @@ onMounted(() => {
// reset // reset
window.addEventListener('reset', (event) => { window.addEventListener('reset', (event) => {
isAutoUpdate.value = true; isAutoUpdate.value = true;
globalTime.value = moment().tz(timezone).format('YYYY-MM-DD HH:mm'); selectedDate.value = moment().tz(timezone).format('YYYY-MM-DD HH:mm');
// fetchData(); // fetchData();
// fetchGanttData(); // fetchGanttData();
setupAutoUpdate(); setupAutoUpdate();
@ -303,7 +330,8 @@ onUnmounted(() => {
<style scoped> <style scoped>
.inspection-container { .inspection-container {
width: 100%; width: calc(100% + 1.5rem);
margin: 0 -1.5rem 0 0 !important;
height: 100vh; height: 100vh;
/* 修改为100vh使其高度铺满整个视口 */ /* 修改为100vh使其高度铺满整个视口 */
background-color: #000028; background-color: #000028;
@ -369,6 +397,7 @@ onUnmounted(() => {
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
flex: 1; flex: 1;
padding: 0 0 0 0.5rem;
} }
.fixed-width { .fixed-width {
@ -383,12 +412,12 @@ onUnmounted(() => {
.header-row { .header-row {
display: flex; display: flex;
width: 6.5rem; width: 6.5rem;
height: 100%; height: 2.5rem;
background-color: #23233C; background-color: #23233C;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 1rem; font-size: 1rem;
/* 调大表头行字体大小 */ margin: 0 0 0.5rem 0;
} }
.title-width { .title-width {

View File

@ -36,11 +36,11 @@ import {
} from '@siemens/ix-vue'; } from '@siemens/ix-vue';
import { ref, onMounted, onUnmounted, watch } from 'vue'; import { ref, onMounted, onUnmounted, watch } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
//
const appSwitchConfig = { let appSwitchConfig = {
i18nAppSwitch: '切换应用', i18nAppSwitch: '切换应用',
i18nLoadingApps: '加载应用中...', i18nLoadingApps: '加载应用中...',
currentAppId: 'mis-app', currentAppId: '',
apps: [ apps: [
{ {
id: 'mis-app', id: 'mis-app',
@ -122,8 +122,9 @@ const updateHistory = (datetime) => {
window.dispatchEvent(event); window.dispatchEvent(event);
}; };
const handleDataFromChild = (data) => { const handleDataFromChild = (data, name) => {
appName.value = data; appName.value = data;
appSwitchConfig.currentAppId = name;
}; };
const closeDatetimePicker = () => { const closeDatetimePicker = () => {
@ -280,20 +281,8 @@ ix-application {
overflow-x: auto; overflow-x: auto;
} }
/* :deep(.mainContent .content){
padding: 0;
} */
:global(.visible) { :global(.visible) {
--theme-modal--background:#23233C !important; --theme-modal--background:#23233C !important;
--theme-color-ghost--selected:#23233C !important; /* --theme-color-ghost--selected:#23233C !important; */
}
:host .AppEntry.Selected {
border:none !important;
}
:deep(:host .AppEntry.Selected){
border:none !重要;
} }
</style> </style>