diff --git a/src/api/dashboard.js b/src/api/dashboard.js index a6cb750..fa01d51 100644 --- a/src/api/dashboard.js +++ b/src/api/dashboard.js @@ -39,4 +39,12 @@ export function setStopReason(data) { method: 'post', data }); +} + +// 获取设备状态列表 +export function getStatusColor() { + return request({ + url: '/State/DeviceColor', + method: 'get' + }); } \ No newline at end of file diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index c00e68a..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - diff --git a/src/components/ProcessGanttChart.vue b/src/components/ProcessGanttChart.vue index 833532a..660edd5 100644 --- a/src/components/ProcessGanttChart.vue +++ b/src/components/ProcessGanttChart.vue @@ -141,8 +141,9 @@ const formatTime = (timeString) => { const mapDataToTimeline = (data, startTime, endTime) => { return data.map(item => { const beginTime = new Date(item.beginTime); + const currentEndTime = new Date(item.endTime); const adjustedBeginTime = beginTime.getTime() < startTime ? new Date(startTime) : beginTime; - const adjustedEndTime = new Date(item.endTime); + const adjustedEndTime = currentEndTime.getTime() < endTime ? currentEndTime : new Date(endTime); const adjustedDuration = adjustedEndTime.getTime() - adjustedBeginTime.getTime(); return { id: item.id, @@ -159,7 +160,7 @@ const mapDataToTimeline = (data, startTime, endTime) => { formula: item.formula, duration: `${Math.floor(adjustedDuration / 1000)}秒`, itemStyle: { - color: getStatusColor(item.deviceStatus) + color: item.color } }; }); @@ -185,25 +186,6 @@ const updateCurrentInfo = () => { formula.value = currentData.formula || '--' } -// 改变时间范围 -const changeTimeRange = (range) => { - currentRange.value = range; - updateChart(); -} - -// 获取状态颜色 -const getStatusColor = (status) => { - const colors = { - '空闲': '#00E4FF', - '生产': '#47D3BD', - '调配': '#FF00FF', - '定容': '#f3feb0', - 'CIP': '#FFC107', - '停机': '#FF4D4F', - } - return colors[status] || '#00E4FF' -} - // 处理甘特图点击事件 const handleChartClick = (data) => { currentStatus.value = data.deviceStatus diff --git a/src/views/Dashboard/index.vue b/src/views/Dashboard/index.vue index 370516c..87e8823 100644 --- a/src/views/Dashboard/index.vue +++ b/src/views/Dashboard/index.vue @@ -15,7 +15,7 @@ {{ item.name }}：
+ :style="{ width: item.rate + '%', background: filterStatusColor(item.deviceStatus) }"> {{ item.value }}
@@ -34,7 +34,7 @@ {{ item.name }}：
+ :style="{ width: item.rate + '%', background: filterStatusColor(item.deviceStatus) }"> {{ item.value }}
@@ -85,7 +85,7 @@   已碱洗   已酸洗 @@ -95,7 +95,7 @@  清洁状态  无菌状态 @@ -139,19 +139,19 @@
- + +   已碱洗 - +   已酸洗 - +  清洁状态 - +  无菌状态
@@ -164,12 +164,12 @@

果汁无菌罐

- -   已碱洗 +   清洁状态 - -   已酸洗 + +   无菌状态
@@ -198,11 +198,11 @@

动态混合器

- -   已碱洗 + +   清洁状态 - -   已酸洗 + +   无菌状态
@@ -238,11 +238,11 @@

果肉无菌罐

- -   已碱洗 + +   清洁状态 - -   已酸洗 + +   无菌状态
@@ -323,9 +323,10 @@ import moment from 'moment'; import momentTimezone from 'moment-timezone'; import { ref, onMounted, getCurrentInstance, onUnmounted, defineEmits } from 'vue' import { IxChip, IxButton, IxDropdown, IxDropdownItem, IxDropdownHeader, IxDivider, IxTabItem, IxTabs } from '@siemens/ix-vue'; // 引入 Chip 组件 -import { getCurrentReport, getHistoryReport, getGanttData, getStopReason, setStopReason } from '@/api/dashboard.js'; +import { getCurrentReport, getHistoryReport, getGanttData, getStopReason, setStopReason, getStatusColor } from '@/api/dashboard.js'; import ProcessGanttChart from '@/components/ProcessGanttChart.vue' import { useAlarmStore } from '@/stores/alarmStore'; // 引入 alarmStore +import { color } from 'echarts'; const emit = defineEmits(['send-data']); @@ -357,13 +358,7 @@ const juiceTank = ref({})// 果汁无菌罐 const pulpTank = ref({})// 果肉无菌罐 const dynamicMixer = ref({})// 动态混合器 -const statuses = ref([ - { id: 1, label: '已碱洗', color: '#00BEDC' }, - { id: 2, label: '已酸洗', color: '#00FFB9' }, - { id: 3, label: '无菌状态', color: '#6B6B7E' }, - { id: 4, label: '清洁状态', color: '#00BEDC' } -]); - +const statuses = ref([]) const processData = ref([]) // 新增函数，转换时间格式 @@ -424,11 +419,6 @@ const updateAlarmCount = () => { alarmStore.setAlarmCount(alarmCount.value); // 更新 alarmStore 中的报警计数 }; -// 方法 -const removeStatus = (id) => { - statuses.value = statuses.value.filter(status => status.id !== id); -}; - const updateCurrentInfo = (segment) => { id.value = segment.id; currentStatus.value = segment.deviceStatus; @@ -482,17 +472,6 @@ const processDataFromAPI = (apiData) => { return processedData; }; -const getStatusColor = (status) => { - const colors = { - '空闲': '#00E4FF', - '生产': '#47D3BD', - '调配': '#FFA849', - '定容': '#f3feb0', - 'CIP': '#FFC107' - } - return colors[status] || '#00E4FF' -} - const processHistoryDataFromAPI = processDataFromAPI; // 复用 processDataFromAPI 函数 const getDataByName = (data, name) => { @@ -543,6 +522,7 @@ const updateData = (processedData) => { juiceData.value = getDataByName(processedData, "果汁调配"); pulpData.value = getDataByName(processedData, "果肉调配"); uhtData.value = getDataByName(processedData, "果汁杀菌"); + console.log("🚀 ~ updateData ~ uhtData.value:", uhtData.value) pulpUHTData.value = getUHTDataByName(processedData, "果肉杀菌"); juiceTankData.value = getUHTDataByName(processedData, "果汁无菌罐"); pulpTankData.value = getUHTDataByName(processedData, "果肉无菌罐"); @@ -596,7 +576,8 @@ const updateData = (processedData) => { deviceStatus: pulpUHTData.value.data[0].deviceStatus, productFlowRate: pulpUHTData.value.data[0].productFlowRate, mixerStep: pulpUHTData.value.data[0].mixerStep, - temperature: pulpUHTData.value.data[0].temperature + temperature: pulpUHTData.value.data[0].temperature, + cleanStatus: pulpUHTData.value.data[0].cleanStatus }; } // 更新果汁无菌罐数据 @@ -605,7 +586,8 @@ const updateData = (processedData) => { mixerStep: juiceTankData.value.data[0].mixerStep, rate: juiceTankData.value.data[0].liquidLevel === 0 ? 0 : (juiceTankData.value.data[0].liquidLevel / juiceTankData.value.data[0].capacity) * 100, liquidLevel: juiceTankData.value.data[0].liquidLevel, - productFlowRate: juiceTankData.value.data[0].productFlowRate + productFlowRate: juiceTankData.value.data[0].productFlowRate, + cleanStatus: juiceTankData.value.data[0].cleanStatus }; } if (pulpTankData.value.data.length > 0) { @@ -613,7 +595,8 @@ const updateData = (processedData) => { mixerStep: pulpTankData.value.data[0].mixerStep, rate: pulpTankData.value.data[0].liquidLevel === 0 ? 0 : (pulpTankData.value.data[0].liquidLevel / pulpTankData.value.data[0].capacity) * 100, liquidLevel: pulpTankData.value.data[0].liquidLevel, - productFlowRate: pulpTankData.value.data[0].productFlowRate + productFlowRate: pulpTankData.value.data[0].productFlowRate, + cleanStatus: pulpTankData.value.data[0].cleanStatus }; } if (dynamicMixerData.value.data.length > 0) { @@ -623,7 +606,8 @@ const updateData = (processedData) => { liquidLevel: dynamicMixerData.value.data[0].liquidLevel, mixerStep: dynamicMixerData.value.data[0].mixerStep, temperature: dynamicMixerData.value.data[0].temperature, - productFlowRate: dynamicMixerData.value.data[0].productFlowRate + productFlowRate: dynamicMixerData.value.data[0].productFlowRate, + cleanStatus: dynamicMixerData.value.data[0].cleanStatus }; } if (processedData === undefined) showWarningMessage("未查询到主数据！"); @@ -674,7 +658,8 @@ const processGanttDataResponse = (response) => { lineId: item.lineId, stopReason: item.stopReason, blendStatus: item.blendStatus, - capacity: item.capacity + capacity: item.capacity, + color: filterStatusColor(item.deviceStatus) })); processData.value = ganttData; @@ -816,6 +801,28 @@ const fetchStopReason = async () => { } }; +const filterStatusColor = (status) => { + const color = statuses.value.find(item => item.label === status); + return color ? color.color : '#6B6B7E'; +}; + +const fetchStatusColors = async () => { + try { + const response = await getStatusColor(); + if (response.code === 200) { + statuses.value = response.data.map(item => ({ + label: item.name, + color: item.color + })); + console.log("🚀 ~ fetchStatusColors ~ statuses.value:", statuses.value) + } else { + console.error('Error fetching status colors:', response.message); + } + } catch (error) { + console.error('Error fetching status colors:', error); + } +}; + const selectedTab = ref(''); const changeTab = (tabId) => (selectedTab.value = tabId); @@ -826,6 +833,7 @@ onMounted(async () => { await fetchData(); fetchGanttData(); fetchStopReason(); + await fetchStatusColors(); // 调用获取颜色状态数据的函数 sendDataToParent(); const setupAutoUpdate = () => { diff --git a/vite.config.js b/vite.config.js index abcc30b..be303ac 100644 --- a/vite.config.js +++ b/vite.config.js @@ -2,7 +2,7 @@ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ - plugins: [vue()], // 移除 ElementPlus 和 Components 插件 + plugins: [vue()], css: { preprocessorOptions: { scss: {