fix: 点检功能修改
This commit is contained in:
Zhao Zhao Shen
parent
417d28752d
commit
e66293b4dc
|
|
@ -8,9 +8,9 @@
|
|||
"name": "ix-siemens",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@siemens/ix": "^2.5.0",
|
||||
"@siemens/ix": "^2.7.0",
|
||||
"@siemens/ix-icons": "^2.2.0",
|
||||
"@siemens/ix-vue": "^2.5.0",
|
||||
"@siemens/ix-vue": "^2.7.0",
|
||||
"axios": "^1.7.9",
|
||||
"core-js": "^3.8.3",
|
||||
"echarts": "^5.6.0",
|
||||
|
|
@ -2093,15 +2093,14 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/@siemens/ix": {
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/@siemens/ix/-/ix-2.5.0.tgz",
|
||||
"integrity": "sha512-ms3B6rKJEN/VAEn55qoMcc91eK+7v0VRZs3eQGkxLt4nKUKVrhfBMz55Npx7KHug5cA+VIHdSEha5SdH8utd0w==",
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmmirror.com/@siemens/ix/-/ix-2.7.0.tgz",
|
||||
"integrity": "sha512-JyHF4PEAdOdJqvjXPMBDWsOShsa7A6RZkPklrn91lL/h12XnqgBCWrXLQfDd+7U+4wxQYynLMoUkvvtZdVaHSA==",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.6.10",
|
||||
"@stencil/core": "~4.17.0",
|
||||
"@types/luxon": "^3.3.7",
|
||||
"animejs": "~3.2.1",
|
||||
"hyperlist": "^1.0.0",
|
||||
"luxon": "^3.4.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
@ -2123,11 +2122,11 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@siemens/ix-vue": {
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/@siemens/ix-vue/-/ix-vue-2.5.0.tgz",
|
||||
"integrity": "sha512-pApnMwHlIo+mATu5cFjE5V9Wb/mpRLvIjCyvZQAqvR6wDugSSatwKXfZK4jBmoyXJha0n8hPrd+1qiKRhBb8/g==",
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmmirror.com/@siemens/ix-vue/-/ix-vue-2.7.0.tgz",
|
||||
"integrity": "sha512-f1t1Ux1vIdGr1318e3wz24rNxya1sPUgj0AOURWyxN2l4/dKuPJw/Ltb37sZn45U8EMk8fgXxt6SbjNjMBRk5w==",
|
||||
"dependencies": {
|
||||
"@siemens/ix": "~2.5.0"
|
||||
"@siemens/ix": "~2.7.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@siemens/ix-icons": "^2.0.0",
|
||||
|
|
@ -7032,11 +7031,6 @@
|
|||
"node": ">=10.17.0"
|
||||
}
|
||||
},
|
||||
"node_modules/hyperlist": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/hyperlist/-/hyperlist-1.0.0.tgz",
|
||||
"integrity": "sha512-1qAjO29EJW/mPyqY+9wFjruD2YWur1dPsPYmt9RvMX6P+8Cr2UmT75MCWjjK+1/4Jxc3sm/G3Kr8DzGgEDRG+Q=="
|
||||
},
|
||||
"node_modules/iconv-lite": {
|
||||
"version": "0.4.24",
|
||||
"resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@
|
|||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@siemens/ix": "^2.5.0",
|
||||
"@siemens/ix": "^2.7.0",
|
||||
"@siemens/ix-icons": "^2.2.0",
|
||||
"@siemens/ix-vue": "^2.5.0",
|
||||
"@siemens/ix-vue": "^2.7.0",
|
||||
"axios": "^1.7.9",
|
||||
"core-js": "^3.8.3",
|
||||
"echarts": "^5.6.0",
|
||||
|
|
|
|||
|
|
@ -14,4 +14,12 @@ export function getInspectionData(deviceId, inputTime) {
|
|||
url: `/Check/sharp?deviceId=${deviceId}&inputTime=${inputTime}`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
||||
// 获取点检页面参数
|
||||
export function getCheckParas(deviceId, inputTime) {
|
||||
return request({
|
||||
url: `/Check/CheckParas?deviceId=${deviceId}&inputTime=${inputTime}`,
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
|
@ -146,8 +146,10 @@ const mapDataToTimeline = (data, startTime, endTime) => {
|
|||
const adjustedDuration = adjustedEndTime.getTime() - adjustedBeginTime.getTime();
|
||||
return {
|
||||
id: item.id,
|
||||
stopReason: item.stopReason,
|
||||
name: 'Process',
|
||||
stopReason: item.stopReason,
|
||||
blendStatus: item.blendStatus,
|
||||
capacity: item.capacity,
|
||||
value: adjustedDuration,
|
||||
deviceStatus: item.deviceStatus,
|
||||
mixerStep: item.mixerStep,
|
||||
|
|
|
|||
|
|
@ -240,7 +240,7 @@
|
|||
</div>
|
||||
<div class="spacing"></div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">当前配方：</span>
|
||||
<span class="info-label">当前步骤：</span>
|
||||
<span class="info-label">果汁配方</span>
|
||||
</div>
|
||||
<div class="juice-item">
|
||||
|
|
@ -303,8 +303,8 @@
|
|||
<IxButton Outline class="btnStyle"> 开始时间：{{ startTimeFormatted }} </IxButton>
|
||||
<IxButton Outline class="btnStyle"> 结束时间：{{ endTimeFormatted }} </IxButton>
|
||||
<IxButton Outline class="btnStyle"> 持续时长：{{ duration }} </IxButton>
|
||||
<IxButton Outline class="btnStyle"> 调配状态：{{ currentStatus }} </IxButton>
|
||||
<IxButton Outline class="btnStyle"> 罐重：{{ currentStatus }} </IxButton>
|
||||
<IxButton Outline class="btnStyle"> 调配状态：{{ blendStatus }} </IxButton>
|
||||
<IxButton Outline class="btnStyle"> 罐重：{{ capacity }} </IxButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -386,6 +386,8 @@ const duration = ref('');
|
|||
const productFlowRate = ref('');
|
||||
const formula = ref('');
|
||||
const mixerStep = ref(''); // 增加 step 字段
|
||||
const blendStatus = ref('');
|
||||
const capacity = ref('');
|
||||
const currentRange = ref('all'); // 增加 currentRange 响应式变量
|
||||
const ganttChart = ref(null); // 增加 ganttChart 引用
|
||||
|
||||
|
|
@ -418,6 +420,8 @@ const updateCurrentInfo = (segment) => {
|
|||
formula.value = segment.formula;
|
||||
mixerStep.value = segment.mixerStep; // 更新 step 字段
|
||||
selectedReason.value = segment.stopReason || '';
|
||||
blendStatus.value = segment.blendStatus;
|
||||
capacity.value = segment.capacity;
|
||||
};
|
||||
|
||||
const handleSegmentClick = (segment) => {
|
||||
|
|
@ -625,7 +629,9 @@ const processGanttDataResponse = (response) => {
|
|||
productFlowRate: item.productFlowRate,
|
||||
formula: item.formula,
|
||||
lineId: item.lineId,
|
||||
stopReason: item.stopReason
|
||||
stopReason: item.stopReason,
|
||||
blendStatus: item.blendStatus,
|
||||
capacity: item.capacity
|
||||
}));
|
||||
|
||||
processData.value = ganttData;
|
||||
|
|
|
|||
|
|
@ -2,11 +2,21 @@
|
|||
<div class="inspection-container">
|
||||
<div class="header">
|
||||
<div class="header_left">
|
||||
<ix-select v-model="state.selectedShift" :options="shiftOptions" label="label" value="value"></ix-select>
|
||||
<ix-select v-model="state.selectedOption1" :options="state.options1" label="label" value="value"></ix-select>
|
||||
<ix-select v-model="state.selectedOption2" :options="state.options2" label="label" value="value"></ix-select>
|
||||
<IxButton @click="fetchInspectionData"> 查询 </IxButton>
|
||||
<IxButton> 导出全部 </IxButton>
|
||||
<IxDateInput label="日期" name="date" helper-text="选择日期" :value="currentDate" class="input-spacing" @change="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>
|
||||
|
||||
<IxSelect Outline id="statusSelect" v-model="status" label="状态" Placeholder="状态" helperText="选择状态"
|
||||
class="input-spacing">
|
||||
<IxSelectItem icon="sun" label="正常" value="1"></IxSelectItem>
|
||||
<IxSelectItem label="报警" value="2"></IxSelectItem>
|
||||
</IxSelect>
|
||||
<IxButton @click="fetchInspectionData" class="input-spacing"> 查询 </IxButton>
|
||||
<IxButton class="input-spacing"> 导出全部 </IxButton>
|
||||
</div>
|
||||
<div class="header_right">
|
||||
<IxButton> 灌注机 </IxButton>
|
||||
|
|
@ -18,34 +28,36 @@
|
|||
<div class="inspection-table">
|
||||
<div class="table-container">
|
||||
<IxEventList>
|
||||
<IxEventListItem class="testbg1">
|
||||
<IxEventListItem class="testbg1 fixed-row">
|
||||
<div class="table-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">
|
||||
<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">
|
||||
<IxEventListItem class="testbg1 fixed-row">
|
||||
<div class="table-row-1">
|
||||
<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" v-for="hour in hours" :key="hour" :style="{ backgroundColor: '#00FFB9', color: '#000028' }">
|
||||
<span class="header-row" v-for="hour in hours" :key="hour"
|
||||
:style="{ backgroundColor: '#00FFB9', color: '#000028' }">
|
||||
{{ hour }}
|
||||
</span>
|
||||
</div>
|
||||
</IxEventListItem>
|
||||
<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">--</span>
|
||||
<span class="fixed-width">{{ item.reference }}</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">
|
||||
{{ item.data[hour] || '--' }}
|
||||
|
|
@ -55,28 +67,32 @@
|
|||
</IxEventList>
|
||||
</div>
|
||||
</div>
|
||||
<InspectionForm v-if="showForm" :itemName="selectedItemName" @close="showForm.value = false" />
|
||||
<InspectionForm v-if="showForm" :itemName="selectedItemName" @close="showForm = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, getCurrentInstance, onMounted, defineEmits } from 'vue';
|
||||
import { IxDatetimePicker, IxButton, IxDivider, IxDropdown, IxDropdownHeader, IxDropdownItem, IxEventList, IxEventListItem, IxSelect } from '@siemens/ix-vue';
|
||||
import moment from 'moment';
|
||||
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 } from '@/api/inspection';
|
||||
import { color } from 'echarts';
|
||||
import { getInspectionCurrent, getInspectionData, getCheckParas } from '@/api/inspection';
|
||||
|
||||
const emit = defineEmits(['send-data']);
|
||||
|
||||
const sendDataToParent = () => {
|
||||
emit('send-data', '点检界面');
|
||||
};
|
||||
// 设置为您期望的时区，比如 "Asia/Shanghai"
|
||||
const timezone = 'Asia/Shanghai';
|
||||
|
||||
// 定义班次选项
|
||||
const shiftOptions = [
|
||||
{ label: '白班', value: 'day' },
|
||||
{ label: '晚班', value: 'night' }
|
||||
];
|
||||
// 全局响应式变量
|
||||
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', '点检界面');
|
||||
};
|
||||
|
||||
// 获取当前时间的小时数
|
||||
const currentHour = new Date().getHours();
|
||||
|
|
@ -85,30 +101,29 @@ const currentHour = new Date().getHours();
|
|||
const defaultShift = currentHour >= 7 && currentHour < 19 ? 'day' : 'night';
|
||||
|
||||
// 定义响应式变量
|
||||
const state = ref({
|
||||
selectedShift: defaultShift,
|
||||
selectedOption1: null,
|
||||
selectedOption2: null,
|
||||
options1: [
|
||||
{ label: 'Option 1', value: 'option1' },
|
||||
{ label: 'Option 2', value: 'option2' },
|
||||
{ label: 'Option 3', value: 'option3' }
|
||||
],
|
||||
options2: [
|
||||
{ label: 'Choice A', value: 'choiceA' },
|
||||
{ label: 'Choice B', value: 'choiceB' },
|
||||
{ label: 'Choice C', value: 'choiceC' }
|
||||
]
|
||||
});
|
||||
const shift = ref('day'); // 确保 shift 变量已定义
|
||||
const status = ref('1'); // 确保 status 变量已定义
|
||||
|
||||
const showForm = ref(false);
|
||||
const selectedItemName = ref('');
|
||||
const selectedDate = ref(null);
|
||||
|
||||
const formatDate = (date) => {
|
||||
const d = new Date(date);
|
||||
const year = d.getFullYear();
|
||||
const month = (d.getMonth() + 1).toString().padStart(2, '0');
|
||||
const day = d.getDate().toString().padStart(2, '0');
|
||||
return `${year}/${month}/${day}`;
|
||||
};
|
||||
|
||||
const currentDate = formatDate(new Date());
|
||||
|
||||
// 计算当前班次的时间段
|
||||
const hours = computed(() => {
|
||||
const shift = state.value.selectedShift;
|
||||
const shiftValue = shift.value;
|
||||
console.log("🚀 ~ hours ~ shiftValue:", shiftValue)
|
||||
const hours = [];
|
||||
if (shift === 'day') {
|
||||
if (shiftValue === 'day') {
|
||||
for (let i = 7; i <= 18; i++) {
|
||||
hours.push(`${i < 10 ? '0' : ''}${i}:00`); // 白班 07:00-18:00
|
||||
}
|
||||
|
|
@ -123,25 +138,13 @@ const hours = computed(() => {
|
|||
return hours;
|
||||
});
|
||||
|
||||
// JSON 数据
|
||||
const data = {
|
||||
juiceFlow: {},
|
||||
pulpFlow: {},
|
||||
sterile: {},
|
||||
clean: {},
|
||||
test1: {},
|
||||
test2: {},
|
||||
test3: {},
|
||||
test4: {},
|
||||
test5: {},
|
||||
test6: {},
|
||||
test7: {},
|
||||
test8: {},
|
||||
test9: {},
|
||||
test10: {},
|
||||
test11: {},
|
||||
const handleShiftClick = (shift) => {
|
||||
state.value.selectedShift = shift;
|
||||
};
|
||||
|
||||
// JSON 数据
|
||||
const data = ref({});
|
||||
|
||||
const inspectionItems = ref([]);
|
||||
|
||||
// 点检按钮点击事件
|
||||
|
|
@ -153,15 +156,24 @@ const handleInspection = (index) => {
|
|||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const showInfoMessage = (index) => {
|
||||
proxy.$message.info(index + '数据写入成功！');
|
||||
proxy.$message.info(index + '数据写入成功！');
|
||||
};
|
||||
|
||||
const showDangerMessage = (index) => {
|
||||
proxy.$message.danger(index + '数据未成功写入！');
|
||||
proxy.$message.danger(index + '数据未成功写入！');
|
||||
};
|
||||
|
||||
const showWarningMessage = (index) => {
|
||||
proxy.$message.warning(index + '数据写入异常！');
|
||||
proxy.$message.warning(index + '数据写入异常！');
|
||||
};
|
||||
|
||||
const toLowerCaseFirstLetter = (str) => {
|
||||
if (!str) return str;
|
||||
return str.charAt(0).toLowerCase() + str.slice(1);
|
||||
}
|
||||
|
||||
const handleDateChange = (event) => {
|
||||
selectedDate.value = event.target.value;
|
||||
};
|
||||
|
||||
const fetchCurrentValues = async () => {
|
||||
|
|
@ -169,14 +181,34 @@ const fetchCurrentValues = async () => {
|
|||
const deviceId = 7; // 根据实际情况设置设备ID
|
||||
const inputTime = new Date().toISOString(); // 获取当前时间
|
||||
const response = await getInspectionCurrent(deviceId, inputTime);
|
||||
const params = await getCheckParas(deviceId, inputTime);
|
||||
|
||||
if (response.code === 200) {
|
||||
const currentValues = response.data.data;
|
||||
console.log("🚀 ~ fetchCurrentValues ~ currentValues:", currentValues)
|
||||
inspectionItems.value.forEach(item => {
|
||||
item.current = currentValues[item.name] || '--';
|
||||
});
|
||||
console.log("🚀 ~ fetchCurrentValues ~ inspectionItems:", inspectionItems.value)
|
||||
}
|
||||
|
||||
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;
|
||||
item.reference = param.referenceValue;
|
||||
item.unit = param.unit;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
console.log("🚀 ~ fetchCurrentValues ~ inspectionItems.value:", inspectionItems.value)
|
||||
} catch (error) {
|
||||
console.error('Error fetching current values:', error);
|
||||
}
|
||||
|
|
@ -184,23 +216,30 @@ const fetchCurrentValues = async () => {
|
|||
|
||||
const fetchInspectionData = async () => {
|
||||
try {
|
||||
const deviceId = 7; // 根据实际情况设置设备ID
|
||||
const inputTime = new Date().toISOString(); // 获取当前时间
|
||||
const deviceId = 7; // globalDeviceId // 根据实际情况设置设备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);
|
||||
if (response.code === 200) {
|
||||
const inspectionData = response.data;
|
||||
console.log("🚀 ~ fetchInspectionData ~ inspectionData:", inspectionData)
|
||||
const itemsMap = {};
|
||||
inspectionData.forEach(record => {
|
||||
const recordTime = record.recordTime;
|
||||
const data = record.data;
|
||||
for (const [name, value] of Object.entries(data)) {
|
||||
if (value === -1) continue; // 过滤掉值为 -1 的属性
|
||||
if (!itemsMap[name]) {
|
||||
itemsMap[name] = {
|
||||
name,
|
||||
label: name, // 可以根据需要调整label的值
|
||||
reference: 0,
|
||||
current: 0,
|
||||
unit: '', // 添加单位字段
|
||||
data: {}
|
||||
};
|
||||
}
|
||||
|
|
@ -208,27 +247,69 @@ const fetchInspectionData = async () => {
|
|||
}
|
||||
});
|
||||
inspectionItems.value = Object.values(itemsMap);
|
||||
console.log("🚀 ~ fetchInspectionData ~ inspectionItems:", inspectionItems.value)
|
||||
}
|
||||
console.log("🚀 ~ fetchInspectionData ~ inspectionItems.value:", inspectionItems.value)
|
||||
} catch (error) {
|
||||
console.error('Error fetching inspection data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
let autoUpdateInterval = null;
|
||||
|
||||
onMounted(() => {
|
||||
fetchCurrentValues();
|
||||
fetchInspectionData();
|
||||
sendDataToParent();
|
||||
|
||||
const setupAutoUpdate = () => {
|
||||
if (isAutoUpdate.value) {
|
||||
autoUpdateInterval = setInterval(() => {
|
||||
fetchCurrentValues();
|
||||
fetchInspectionData();
|
||||
}, 60000); // 每分钟刷新一次接口
|
||||
} else if (autoUpdateInterval) {
|
||||
clearInterval(autoUpdateInterval);
|
||||
autoUpdateInterval = null;
|
||||
}
|
||||
};
|
||||
|
||||
setupAutoUpdate();
|
||||
|
||||
// 监听 update-history 事件
|
||||
window.addEventListener('update-history', (event) => {
|
||||
isAutoUpdate.value = false;
|
||||
globalTime.value = event.detail;
|
||||
fetchCurrentValues();
|
||||
fetchInspectionData();
|
||||
setupAutoUpdate();
|
||||
});
|
||||
|
||||
// 监听 reset 事件
|
||||
window.addEventListener('reset', (event) => {
|
||||
isAutoUpdate.value = true;
|
||||
globalTime.value = moment().tz(timezone).format('YYYY-MM-DD HH:mm');
|
||||
// fetchData();
|
||||
// fetchGanttData();
|
||||
setupAutoUpdate();
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (autoUpdateInterval) {
|
||||
clearInterval(autoUpdateInterval);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.inspection-container {
|
||||
width: 100%;
|
||||
height: 100vh; /* 修改为100vh，使其高度铺满整个视口 */
|
||||
height: 100vh;
|
||||
/* 修改为100vh，使其高度铺满整个视口 */
|
||||
background-color: #000028;
|
||||
color: white;
|
||||
font-size: 1.2rem; /* 调大全局字体大小 */
|
||||
font-size: 1.2rem;
|
||||
/* 调大全局字体大小 */
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
@ -241,28 +322,36 @@ onMounted(() => {
|
|||
.header_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 70%; /* 设置宽度，确保三个搜索框都能正常显示 */
|
||||
font-size: 1rem; /* 调大左侧头部字体大小 */
|
||||
width: 70%;
|
||||
/* 设置宽度，确保三个搜索框都能正常显示 */
|
||||
font-size: 1rem;
|
||||
/* 调大左侧头部字体大小 */
|
||||
}
|
||||
|
||||
.header_right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px; /* 添加间距 */
|
||||
font-size: 1rem; /* 调大右侧头部字体大小 */
|
||||
gap: 10px;
|
||||
/* 添加间距 */
|
||||
font-size: 1rem;
|
||||
/* 调大右侧头部字体大小 */
|
||||
}
|
||||
|
||||
.inspection-table {
|
||||
width: 100%;
|
||||
height: 90%; /* 修改为90%，使其高度铺满剩余部分 */
|
||||
overflow-x: auto; /* 添加水平滚动条 */
|
||||
height: 90%;
|
||||
/* 修改为90%，使其高度铺满剩余部分 */
|
||||
overflow-x: auto;
|
||||
/* 添加水平滚动条 */
|
||||
}
|
||||
|
||||
.table-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 100%; /* 确保表格宽度至少为容器宽度 */
|
||||
overflow-x: auto; /* 添加水平滚动条 */
|
||||
min-width: 100%;
|
||||
/* 确保表格宽度至少为容器宽度 */
|
||||
overflow-x: auto;
|
||||
/* 添加水平滚动条 */
|
||||
}
|
||||
|
||||
.table-row {
|
||||
|
|
@ -270,7 +359,8 @@ onMounted(() => {
|
|||
justify-content: space-between;
|
||||
/* padding: 10px;
|
||||
border-bottom: 1px solid #ccc; */
|
||||
flex: 1; /* 使每一行铺满 */
|
||||
flex: 1;
|
||||
/* 使每一行铺满 */
|
||||
}
|
||||
|
||||
.table-row-1 {
|
||||
|
|
@ -282,41 +372,76 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.fixed-width {
|
||||
width: 7rem; /* 设置固定宽度 */
|
||||
text-align: center; /* 居中对齐 */
|
||||
font-size: 1rem; /* 调大固定宽度元素字体大小 */
|
||||
width: 6.5rem;
|
||||
/* 设置固定宽度 */
|
||||
text-align: center;
|
||||
/* 居中对齐 */
|
||||
font-size: 1rem;
|
||||
/* 调大固定宽度元素字体大小 */
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: flex;
|
||||
width: 7rem;
|
||||
width: 6.5rem;
|
||||
height: 100%;
|
||||
background-color: #23233C;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1rem; /* 调大表头行字体大小 */
|
||||
font-size: 1rem;
|
||||
/* 调大表头行字体大小 */
|
||||
}
|
||||
|
||||
.title-width {
|
||||
width: 10rem;
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
ix-button {
|
||||
margin: 0.25rem;
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
.testbg {
|
||||
/* 这里是因为它tm组件里的，还用的好像是webcomponent，但是tmd不对外提供修改的东西，好在有个css颜色变量可以修改 */
|
||||
--theme-event-item--background:#23233C;
|
||||
--theme-event-item--background: #23233C;
|
||||
/* --theme-event-item--background--hover: blue; */
|
||||
}
|
||||
.testbg1{
|
||||
--theme-event-item--background:#000028;
|
||||
|
||||
.testbg1 {
|
||||
--theme-event-item--background: #000028;
|
||||
}
|
||||
|
||||
/**如果要改按钮的颜色，那么上面就不要用 :style 改成用 :class 来设置，这个总没问题吧，然后再f12看按钮有哪些颜色变量 */
|
||||
/* 定义按钮颜色的 CSS 类 */
|
||||
.custom-button {
|
||||
--theme-btn-primary--background: #FFA849;
|
||||
--theme-btn-primary--background--hover: #FFA849;
|
||||
}
|
||||
|
||||
.drop-down {
|
||||
width: calc(25% - 1.25rem);
|
||||
background-color: #23233C;
|
||||
}
|
||||
|
||||
:deep(ix-date-input) {
|
||||
--theme-menu--background: #23233C;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.search-label {
|
||||
margin-right: 10px;
|
||||
margin-left: 20px;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.input-spacing {
|
||||
margin-right: 1rem;
|
||||
--theme-color-2: #23233C;
|
||||
}
|
||||
|
||||
.fixed-row {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,11 @@
|
|||
<router-view @update-history="updateHistory" @reset="reset" @send-data="handleDataFromChild"></router-view>
|
||||
</IxContent>
|
||||
|
||||
<!-- 添加 IxDatetimePicker 组件 -->
|
||||
<!-- 添加遮罩层和 IxDatetimePicker 组件 -->
|
||||
<div v-if="showDatetimePicker" class="overlay" @click="closeDatetimePicker"></div>
|
||||
<div v-if="showDatetimePicker" class="datetime-picker-container">
|
||||
<IxDatetimePicker range="false" showSeconds="false" show-time-reference="true" @done="handleDatetimePickerDone" />
|
||||
<button class="close-button" @click="closeDatetimePicker">关闭</button>
|
||||
</div>
|
||||
</IxApplication>
|
||||
</template>
|
||||
|
|
@ -124,6 +126,10 @@ const handleDataFromChild = (data) => {
|
|||
appName.value = data;
|
||||
};
|
||||
|
||||
const closeDatetimePicker = () => {
|
||||
showDatetimePicker.value = false;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
updateTime();
|
||||
const interval = setInterval(() => {
|
||||
|
|
@ -221,14 +227,34 @@ ix-application {
|
|||
/* 让内容区域填充剩余空间 */
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.datetime-picker-container {
|
||||
position: absolute;
|
||||
top: 4rem;
|
||||
/* 确保在头部下方 */
|
||||
right: 1rem;
|
||||
/* 靠右对齐 */
|
||||
z-index: 1000;
|
||||
/* 确保在最上层 */
|
||||
background: #23233C;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
margin-top: 1rem;
|
||||
background: #23233C;
|
||||
color: skyblue;
|
||||
/* border: none; */
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:deep(ix-datetime-picker){
|
||||
|
|
@ -244,7 +270,7 @@ ix-application {
|
|||
}
|
||||
|
||||
.mainContent {
|
||||
padding: 0;
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -254,6 +280,10 @@ ix-application {
|
|||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* :deep(.mainContent .content){
|
||||
padding: 0;
|
||||
} */
|
||||
|
||||
:global(.visible) {
|
||||
--theme-modal--background:#23233C !important;
|
||||
--theme-color-ghost--selected:#23233C !important;
|
||||
|
|
@ -264,6 +294,6 @@ ix-application {
|
|||
}
|
||||
|
||||
:deep(:host .AppEntry.Selected){
|
||||
border:none !important;
|
||||
border:none !重要;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue