feat: 状态颜色从后端接口获取

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'
+    });
 }

src/components/HelloWorld.vue

@@ -1,52 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script setup>
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

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

src/views/Dashboard/index.vue

@@ -15,7 +15,7 @@
                             <span class="juice-name">{{ item.name }}：</span>
                             <div class="progress-bar" style="cursor: pointer;">
                                 <div class="progress"
-                                    :style="{ width: item.rate + '%', background: getStatusColor(item.deviceStatus) }">
+                                    :style="{ width: item.rate + '%', background: filterStatusColor(item.deviceStatus) }">
                                     <span class="progress-text">{{ item.value }}</span>
                                 </div>
                             </div>
@@ -34,7 +34,7 @@
                             <span class="juice-name">{{ item.name }}：</span>
                             <div class="progress-bar" style="cursor: pointer;">
                                 <div class="progress"
-                                    :style="{ width: item.rate + '%', background: getStatusColor(item.deviceStatus) }">
+                                    :style="{ width: item.rate + '%', background: filterStatusColor(item.deviceStatus) }">
                                     <span class="progress-text">{{ item.value }}</span>
                                 </div>
                             </div>
@@ -85,7 +85,7 @@
                                     &emsp;&nbsp;已碱洗
                                 </IxChip>
                                 <IxChip class="left-chip"
-                                    :background="processForm_uht.cleanStatus === '已酸洗' ? '#00FFB9' : '#6B6B7E'"
+                                    :background="processForm_uht.cleanStatus === '已酸洗' ? '#00BEDC' : '#6B6B7E'"
                                     chip-color="#000028" variant="custom">
                                     &emsp;&nbsp;已酸洗
                                 </IxChip>
@@ -95,7 +95,7 @@
                                     &emsp;清洁状态
                                 </IxChip>
                                 <IxChip class="left-chip"
-                                    :background="processForm_uht.cleanStatus === '无菌状态' ? '#6B6B7E' : '#00BEDC'"
+                                    :background="processForm_uht.cleanStatus === '无菌状态' ? '#00BEDC' : '#6B6B7E'"
                                     chip-color="#000028" variant="custom">
                                     &emsp;无菌状态
                                 </IxChip>
@@ -139,19 +139,19 @@
                                 </div>
                             </div>
                             <div class="tag-panel">
-                                <el-tag effect="dark" round>
+                                <!-- <el-tag effect="dark" round>
                                     已碱洗
-                                </el-tag>
+                                </el-tag> -->
-                                <IxChip class="left-chip" background="#00BEDC" chip-color="#000028" variant="custom">
+                                <IxChip class="left-chip" :background="processForm_pulp.cleanStatus === '已碱洗' ? '#00FFB9' : '#6B6B7E'" chip-color="#000028" variant="custom">
                                     &emsp;&nbsp;已碱洗
                                 </IxChip>
-                                <IxChip class="left-chip" background="#00FFB9" chip-color="#000028" variant="custom">
+                                <IxChip class="left-chip" :background="processForm_pulp.cleanStatus === '已酸洗' ? '#00FFB9' : '#6B6B7E'" chip-color="#000028" variant="custom">
                                     &emsp;&nbsp;已酸洗
                                 </IxChip>
-                                <IxChip class="left-chip" background="#00BEDC" chip-color="#000028" variant="custom">
+                                <IxChip class="left-chip" :background="processForm_pulp.cleanStatus === '清洁状态' ? '#00FFB9' : '#6B6B7E'" chip-color="#000028" variant="custom">
                                     &emsp;清洁状态
                                 </IxChip>
-                                <IxChip class="left-chip" background="#6B6B7E" chip-color="#000028" variant="custom">
+                                <IxChip class="left-chip" :background="processForm_pulp.cleanStatus === '无菌状态' ? '#00FFB9' : '#6B6B7E'" chip-color="#000028" variant="custom">
                                     &emsp;无菌状态
                                 </IxChip>
                             </div>
@@ -164,12 +164,12 @@
                     <div class="flex-row">
                         <h2 class="juice-title">果汁无菌罐</h2>
                         <div class="tag-panel-2">
-                            <IxChip class="right-chip" background="#00BEDC" chip-color="#000028" variant="custom"
+                            <IxChip class="right-chip" :background="juiceTank.cleanStatus === '清洁状态' ? '#00FFB9' : '#6B6B7E'" chip-color="#000028" variant="custom"
                                 :style="{ cursor: 'default' }">
-                                &emsp;&nbsp;已碱洗
+                                &emsp;&nbsp;清洁状态
                             </IxChip>
-                            <IxChip class="right-chip" background="#00FFB9" chip-color="#000028" variant="custom">
+                            <IxChip class="right-chip" :background="juiceTank.cleanStatus === '无菌状态' ? '#00FFB9' : '#6B6B7E'" chip-color="#000028" variant="custom">
-                                &emsp;&nbsp;已酸洗
+                                &emsp;&nbsp;无菌状态
                             </IxChip>
                         </div>
                     </div>
@@ -198,11 +198,11 @@
                     <div class="flex-row">
                         <h2 class="juice-title">动态混合器</h2>
                         <div class="tag-panel-2">
-                            <IxChip class="right-chip" background="#00BEDC" chip-color="#000028" variant="custom">
+                            <IxChip class="right-chip" :background="dynamicMixer.cleanStatus === '清洁状态' ? '#00FFB9' : '#6B6B7E'" chip-color="#000028" variant="custom">
-                                &emsp;&nbsp;已碱洗
+                                &emsp;&nbsp;清洁状态
                             </IxChip>
-                            <IxChip class="right-chip" background="#00FFB9" chip-color="#000028" variant="custom">
+                            <IxChip class="right-chip" :background="dynamicMixer.cleanStatus === '无菌状态' ? '#00FFB9' : '#6B6B7E'"  chip-color="#000028" variant="custom">
-                                &emsp;&nbsp;已酸洗
+                                &emsp;&nbsp;无菌状态
                             </IxChip>
                         </div>
                     </div>
@@ -238,11 +238,11 @@
                     <div class="flex-row">
                         <h2 class="juice-title">果肉无菌罐</h2>
                         <div class="tag-panel-2">
-                            <IxChip class="right-chip" background="#00BEDC" chip-color="#000028" variant="custom">
+                            <IxChip class="right-chip" :background="pulpTank.cleanStatus === '清洁状态' ? '#00FFB9' : '#6B6B7E'"  chip-color="#000028" variant="custom">
-                                &emsp;&nbsp;已碱洗
+                                &emsp;&nbsp;清洁状态
                             </IxChip>
-                            <IxChip class="right-chip" background="#00FFB9" chip-color="#000028" variant="custom">
+                            <IxChip class="right-chip" :background="pulpTank.cleanStatus === '无菌状态' ? '#00FFB9' : '#6B6B7E'"   chip-color="#000028" variant="custom">
-                                &emsp;&nbsp;已酸洗
+                                &emsp;&nbsp;无菌状态
                             </IxChip>
                         </div>
                     </div>
@@ -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([
+const statuses = ref([])
-    { id: 1, label: '已碱洗', color: '#00BEDC' },
-    { id: 2, label: '已酸洗', color: '#00FFB9' },
-    { id: 3, label: '无菌状态', color: '#6B6B7E' },
-    { id: 4, label: '清洁状态', color: '#00BEDC' }
-]);
-
 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 = () => {

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: {