fix: 样式修改 & 点检功能修改
This commit is contained in:
Zhao Zhao Shen
parent
e66293b4dc
commit
8b9813c901
|
|
@ -9,9 +9,9 @@ export function getInspectionCurrent(deviceId, inputTime) {
|
|||
}
|
||||
|
||||
// 获取点检页面整点数值
|
||||
export function getInspectionData(deviceId, inputTime) {
|
||||
export function getInspectionData(deviceId, inputTime, shift) {
|
||||
return request({
|
||||
url: `/Check/sharp?deviceId=${deviceId}&inputTime=${inputTime}`,
|
||||
url: `/Check/sharp?deviceId=${deviceId}&inputTime=${inputTime}&shift=${shift}`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
|
@ -19,7 +19,15 @@ export function getInspectionData(deviceId, inputTime) {
|
|||
// 获取点检页面参数
|
||||
export function getCheckParas(deviceId, inputTime) {
|
||||
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'
|
||||
});
|
||||
}
|
||||
|
|
@ -241,7 +241,7 @@
|
|||
<div class="spacing"></div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">当前步骤：</span>
|
||||
<span class="info-label">果汁配方</span>
|
||||
<span class="info-label">{{ pulpTank.mixerStep }}</span>
|
||||
</div>
|
||||
<div class="juice-item">
|
||||
<span>当前液位：</span>
|
||||
|
|
@ -322,7 +322,7 @@ import ProcessGanttChart from '@/components/ProcessGanttChart.vue'
|
|||
const emit = defineEmits(['send-data']);
|
||||
|
||||
const sendDataToParent = () => {
|
||||
emit('send-data', 'SIEMENS MIS 1.0 前处理界面');
|
||||
emit('send-data', 'SIEMENS MIS 1.0 前处理界面', 'mis-app');
|
||||
};
|
||||
|
||||
// 设置为您期望的时区，比如 "Asia/Shanghai"
|
||||
|
|
@ -815,13 +815,13 @@ onUnmounted(() => {
|
|||
/* 全局样式 */
|
||||
.dashboard-container {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
margin: 0 -1.5rem 0 0 !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #000028;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
width: calc(100% + 1.5rem);
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
font-family: 'Microsoft YaHei', sans-serif;
|
||||
|
|
|
|||
|
|
@ -2,46 +2,44 @@
|
|||
<div class="inspection-container">
|
||||
<div class="header">
|
||||
<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>
|
||||
|
||||
<IxSelect Outline id="triggerId" v-model="shift" label="班次" helperText="选择班次" class="input-spacing">
|
||||
<IxSelectItem icon="sun" label="白班" value="day"></IxSelectItem>
|
||||
<IxSelectItem icon="moon" label="晚班" value="night"></IxSelectItem>
|
||||
<IxSelect Outline id="triggerId" v-model="shift" label="班次" helperText="选择班次" 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">
|
||||
<IxSelectItem icon="sun" label="全部" value="0"></IxSelectItem>
|
||||
<IxSelectItem icon="sun" label="正常" value="1"></IxSelectItem>
|
||||
<IxSelectItem label="报警" value="2"></IxSelectItem>
|
||||
</IxSelect>
|
||||
<IxButton @click="fetchInspectionData" class="input-spacing"> 查询 </IxButton>
|
||||
<IxButton @click="handleSearch" class="input-spacing"> 查询 </IxButton>
|
||||
<IxButton class="input-spacing"> 导出全部 </IxButton>
|
||||
</div>
|
||||
<div class="header_right">
|
||||
<IxButton> 灌注机 </IxButton>
|
||||
<IxButton Outline> 吹瓶机 </IxButton>
|
||||
<IxButton Outline> 果汁杀菌 </IxButton>
|
||||
<IxButton Outline> 果肉杀菌 </IxButton>
|
||||
<span v-for="(item, index) in deviceList" :key="item.id">
|
||||
<IxButton :outline="selectedDeviceId !== item.id" @click="handleDeviceListChange(item.id)">
|
||||
{{ item.name }}
|
||||
</IxButton>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inspection-table">
|
||||
<div class="table-container">
|
||||
<IxEventList>
|
||||
<IxEventListItem class="testbg1 fixed-row">
|
||||
<div class="table-row">
|
||||
<!-- 将表头部分移到 IxEventList 外面 -->
|
||||
<div class="table-row fixed-row">
|
||||
<span class="fixed-width title-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">
|
||||
<IxButton class="custom-button" @click="handleInspection(index)"> 确认 </IxButton>
|
||||
</span>
|
||||
</div>
|
||||
</IxEventListItem>
|
||||
<IxEventListItem class="testbg1 fixed-row">
|
||||
<div class="table-row-1">
|
||||
<div class="table-row-1 fixed-row">
|
||||
<span class="header-row title-width">点检项目</span>
|
||||
<span class="header-row">单位</span>
|
||||
<span class="header-row">参考值</span>
|
||||
|
|
@ -51,7 +49,8 @@
|
|||
{{ hour }}
|
||||
</span>
|
||||
</div>
|
||||
</IxEventListItem>
|
||||
<!-- IxEventList 保持不变 -->
|
||||
<IxEventList>
|
||||
<IxEventListItem v-for="(item, index) in inspectionItems" :key="index" color="color-success"
|
||||
class="testbg">
|
||||
<div class="table-row">
|
||||
|
|
@ -77,7 +76,7 @@ import momentTimezone from 'moment-timezone';
|
|||
import { ref, computed, getCurrentInstance, onMounted, defineEmits, onUnmounted } from 'vue';
|
||||
import { IxDatePicker, IxButton, IxDropdownItem, IxEventList, IxEventListItem, IxSelect, IxSelectItem, IxDateInput } from '@siemens/ix-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']);
|
||||
|
||||
|
|
@ -85,24 +84,26 @@ const emit = defineEmits(['send-data']);
|
|||
const timezone = 'Asia/Shanghai';
|
||||
|
||||
// 全局响应式变量
|
||||
const globalDeviceId = ref(null);
|
||||
const globalTime = ref(moment().tz(timezone).format('YYYY-MM-DD HH:mm'));
|
||||
const isAutoUpdate = ref(true); // 是否自动更新
|
||||
const deviceType = ref(false);
|
||||
|
||||
const sendDataToParent = () => {
|
||||
emit('send-data', '点检界面');
|
||||
emit('send-data', '点检界面', 'other-app');
|
||||
};
|
||||
|
||||
// 获取当前时间的小时数
|
||||
const currentHour = new Date().getHours();
|
||||
|
||||
// 根据当前时间确定默认班次
|
||||
const defaultShift = currentHour >= 7 && currentHour < 19 ? 'day' : 'night';
|
||||
const defaultShift = currentHour >= 7 && currentHour < 19 ? '0' : '1'; // 早班为0，晚班为1
|
||||
|
||||
// 定义响应式变量
|
||||
const shift = ref('day'); // 确保 shift 变量已定义
|
||||
const status = ref('1'); // 确保 status 变量已定义
|
||||
const shift = ref(defaultShift); // 设置默认班次
|
||||
const status = ref('0'); // 确保 status 变量已定义
|
||||
|
||||
// 设备列表
|
||||
const deviceList = ref([]);
|
||||
const selectedDeviceId = ref(null);
|
||||
|
||||
const showForm = ref(false);
|
||||
const selectedItemName = ref('');
|
||||
|
|
@ -121,9 +122,8 @@ const currentDate = formatDate(new Date());
|
|||
// 计算当前班次的时间段
|
||||
const hours = computed(() => {
|
||||
const shiftValue = shift.value;
|
||||
console.log("🚀 ~ hours ~ shiftValue:", shiftValue)
|
||||
const hours = [];
|
||||
if (shiftValue === 'day') {
|
||||
if (shiftValue === '0') {
|
||||
for (let i = 7; i <= 18; i++) {
|
||||
hours.push(`${i < 10 ? '0' : ''}${i}:00`); // 白班 07:00-18:00
|
||||
}
|
||||
|
|
@ -138,10 +138,6 @@ const hours = computed(() => {
|
|||
return hours;
|
||||
});
|
||||
|
||||
const handleShiftClick = (shift) => {
|
||||
state.value.selectedShift = shift;
|
||||
};
|
||||
|
||||
// JSON 数据
|
||||
const data = ref({});
|
||||
|
||||
|
|
@ -174,14 +170,44 @@ const toLowerCaseFirstLetter = (str) => {
|
|||
|
||||
const handleDateChange = (event) => {
|
||||
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 () => {
|
||||
try {
|
||||
const deviceId = 7; // 根据实际情况设置设备ID
|
||||
const inputTime = new Date().toISOString(); // 获取当前时间
|
||||
const response = await getInspectionCurrent(deviceId, inputTime);
|
||||
const params = await getCheckParas(deviceId, inputTime);
|
||||
const deviceId = selectedDeviceId.value; // 根据实际情况设置设备ID
|
||||
const dateValue = selectedDate.value || currentDate;
|
||||
// const inputTime = selectedDate.value; //new Date().toISOString(); // 获取当前时间
|
||||
const response = await getInspectionCurrent(deviceId, dateValue);
|
||||
const params = await getCheckParas(deviceId, dateValue);
|
||||
|
||||
if (response.code === 200) {
|
||||
const currentValues = response.data.data;
|
||||
|
|
@ -192,13 +218,11 @@ const fetchCurrentValues = async () => {
|
|||
|
||||
if (params.code === 200) {
|
||||
const paramData = params.data;
|
||||
console.log("🚀 ~ fetchCurrentValues ~ paramData:", paramData)
|
||||
|
||||
inspectionItems.value.forEach(item => {
|
||||
const param = paramData.find(param => {
|
||||
return toLowerCaseFirstLetter(param.keyname) === item.name;
|
||||
});
|
||||
console.log("🚀 ~ fetchCurrentValues ~ param:", param)
|
||||
|
||||
if (param) {
|
||||
item.label = param.projectDescription;
|
||||
|
|
@ -208,23 +232,20 @@ const fetchCurrentValues = async () => {
|
|||
});
|
||||
}
|
||||
|
||||
console.log("🚀 ~ fetchCurrentValues ~ inspectionItems.value:", inspectionItems.value)
|
||||
} catch (error) {
|
||||
console.error('Error fetching current values:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取点检数据
|
||||
const fetchInspectionData = async () => {
|
||||
try {
|
||||
const deviceId = 7; // globalDeviceId // 根据实际情况设置设备ID
|
||||
const inputTime = new Date().toISOString(); // globalTime; // 获取当前时间
|
||||
const deviceId = selectedDeviceId.value; // 根据实际情况设置设备ID
|
||||
// const inputTime = new Date().toISOString(); // globalTime; // 获取当前时间
|
||||
const shiftValue = shift.value;
|
||||
const statusValue = status.value;
|
||||
const dateValue = selectedDate.value || currentDate;
|
||||
console.log("🚀 ~ fetchInspectionData ~ shift:", shiftValue)
|
||||
console.log("🚀 ~ fetchInspectionData ~ status:", statusValue)
|
||||
console.log("🚀 ~ fetchInspectionData ~ date:", dateValue)
|
||||
const response = await getInspectionData(deviceId, inputTime);
|
||||
const response = await getInspectionData(deviceId, dateValue, shiftValue);
|
||||
if (response.code === 200) {
|
||||
const inspectionData = response.data;
|
||||
const itemsMap = {};
|
||||
|
|
@ -248,15 +269,21 @@ const fetchInspectionData = async () => {
|
|||
});
|
||||
inspectionItems.value = Object.values(itemsMap);
|
||||
}
|
||||
console.log("🚀 ~ fetchInspectionData ~ inspectionItems.value:", inspectionItems.value)
|
||||
} catch (error) {
|
||||
console.error('Error fetching inspection data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 查询接口数据
|
||||
const handleSearch = () => {
|
||||
fetchInspectionData();
|
||||
fetchCurrentValues();
|
||||
};
|
||||
|
||||
let autoUpdateInterval = null;
|
||||
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
await fetchDeviceList();
|
||||
fetchCurrentValues();
|
||||
fetchInspectionData();
|
||||
sendDataToParent();
|
||||
|
|
@ -278,7 +305,7 @@ onMounted(() => {
|
|||
// 监听 update-history 事件
|
||||
window.addEventListener('update-history', (event) => {
|
||||
isAutoUpdate.value = false;
|
||||
globalTime.value = event.detail;
|
||||
selectedDate.value = event.detail;
|
||||
fetchCurrentValues();
|
||||
fetchInspectionData();
|
||||
setupAutoUpdate();
|
||||
|
|
@ -287,7 +314,7 @@ onMounted(() => {
|
|||
// 监听 reset 事件
|
||||
window.addEventListener('reset', (event) => {
|
||||
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();
|
||||
// fetchGanttData();
|
||||
setupAutoUpdate();
|
||||
|
|
@ -303,7 +330,8 @@ onUnmounted(() => {
|
|||
|
||||
<style scoped>
|
||||
.inspection-container {
|
||||
width: 100%;
|
||||
width: calc(100% + 1.5rem);
|
||||
margin: 0 -1.5rem 0 0 !important;
|
||||
height: 100vh;
|
||||
/* 修改为100vh，使其高度铺满整个视口 */
|
||||
background-color: #000028;
|
||||
|
|
@ -369,6 +397,7 @@ onUnmounted(() => {
|
|||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding: 0 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.fixed-width {
|
||||
|
|
@ -383,12 +412,12 @@ onUnmounted(() => {
|
|||
.header-row {
|
||||
display: flex;
|
||||
width: 6.5rem;
|
||||
height: 100%;
|
||||
height: 2.5rem;
|
||||
background-color: #23233C;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1rem;
|
||||
/* 调大表头行字体大小 */
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.title-width {
|
||||
|
|
|
|||
|
|
@ -36,11 +36,11 @@ import {
|
|||
} from '@siemens/ix-vue';
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const appSwitchConfig = {
|
||||
// 无语，或者直接不用这个
|
||||
let appSwitchConfig = {
|
||||
i18nAppSwitch: '切换应用',
|
||||
i18nLoadingApps: '加载应用中...',
|
||||
currentAppId: 'mis-app',
|
||||
currentAppId: '',
|
||||
apps: [
|
||||
{
|
||||
id: 'mis-app',
|
||||
|
|
@ -122,8 +122,9 @@ const updateHistory = (datetime) => {
|
|||
window.dispatchEvent(event);
|
||||
};
|
||||
|
||||
const handleDataFromChild = (data) => {
|
||||
const handleDataFromChild = (data, name) => {
|
||||
appName.value = data;
|
||||
appSwitchConfig.currentAppId = name;
|
||||
};
|
||||
|
||||
const closeDatetimePicker = () => {
|
||||
|
|
@ -280,20 +281,8 @@ ix-application {
|
|||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* :deep(.mainContent .content){
|
||||
padding: 0;
|
||||
} */
|
||||
|
||||
:global(.visible) {
|
||||
--theme-modal--background:#23233C !important;
|
||||
--theme-color-ghost--selected:#23233C !important;
|
||||
}
|
||||
|
||||
:host .AppEntry.Selected {
|
||||
border:none !important;
|
||||
}
|
||||
|
||||
:deep(:host .AppEntry.Selected){
|
||||
border:none !重要;
|
||||
/* --theme-color-ghost--selected:#23233C !important; */
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue