feat: 状态颜色从后端接口获取
This commit is contained in:
Zhao Zhao Shen
parent
3e1848ffe4
commit
5493068847
|
|
@ -39,4 +39,12 @@ export function setStopReason(data) {
|
|||
method: 'post',
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
// 获取设备状态列表
|
||||
export function getStatusColor() {
|
||||
return request({
|
||||
url: '/State/DeviceColor',
|
||||
method: 'get'
|
||||
});
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
  已碱洗
|
||||
</IxChip>
|
||||
<IxChip class="left-chip"
|
||||
:background="processForm_uht.cleanStatus === '已酸洗' ? '#00FFB9' : '#6B6B7E'"
|
||||
:background="processForm_uht.cleanStatus === '已酸洗' ? '#00BEDC' : '#6B6B7E'"
|
||||
chip-color="#000028" variant="custom">
|
||||
  已酸洗
|
||||
</IxChip>
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
 清洁状态
|
||||
</IxChip>
|
||||
<IxChip class="left-chip"
|
||||
:background="processForm_uht.cleanStatus === '无菌状态' ? '#6B6B7E' : '#00BEDC'"
|
||||
:background="processForm_uht.cleanStatus === '无菌状态' ? '#00BEDC' : '#6B6B7E'"
|
||||
chip-color="#000028" variant="custom">
|
||||
 无菌状态
|
||||
</IxChip>
|
||||
|
|
@ -139,19 +139,19 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="tag-panel">
|
||||
<el-tag effect="dark" round>
|
||||
<!-- <el-tag effect="dark" round>
|
||||
已碱洗
|
||||
</el-tag>
|
||||
<IxChip class="left-chip" background="#00BEDC" chip-color="#000028" variant="custom">
|
||||
</el-tag> -->
|
||||
<IxChip class="left-chip" :background="processForm_pulp.cleanStatus === '已碱洗' ? '#00FFB9' : '#6B6B7E'" chip-color="#000028" variant="custom">
|
||||
  已碱洗
|
||||
</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">
|
||||
  已酸洗
|
||||
</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">
|
||||
 清洁状态
|
||||
</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">
|
||||
 无菌状态
|
||||
</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' }">
|
||||
  已碱洗
|
||||
  清洁状态
|
||||
</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">
|
||||
  无菌状态
|
||||
</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">
|
||||
  清洁状态
|
||||
</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">
|
||||
  无菌状态
|
||||
</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">
|
||||
  清洁状态
|
||||
</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">
|
||||
  无菌状态
|
||||
</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([
|
||||
{ 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 = () => {
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue