wonderzhao
/
cola-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 增加千分位显示

This commit is contained in:
Zhao Zhao Shen 2025-03-12 11:30:18 +08:00
parent c835e38d82
commit 0ca3e6ddfb
2 changed files with 43 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/views/Dashboard/index.vue
View File

@ -6,17 +6,17 @@
<div class="block"> <div class="block">
<div class="flex-row"> <div class="flex-row">
<h2 class="juice-title">果汁调配</h2> <h2 class="juice-title">果汁调配</h2>
<span class="flow-label">累计流量：{{ totalTrafficJuice }}</span> <span class="flow-label">累计流量：{{ formatNumberWithCommas(totalTrafficJuice) }}</span>
</div> </div>
<div class="spacing"></div> <div class="spacing"></div>
<div v-for="item in progressList" :key="item.name" class="juice-item" <div v-for="item in progressList" :key="item.name" class="juice-item"
:data-device-id="item?.deviceId" :data-device-id="item?.deviceId"
@click="handleBlockClick(item?.deviceId, item.name, false)"> @click="handleBlockClick(item?.deviceId, item.aliasName, false)">
<span class="juice-name">{{ item.name }}：</span> <span class="juice-name">{{ item.name }}：</span>
<div class="progress-bar" style="cursor: pointer;"> <div class="progress-bar" style="cursor: pointer;">
<div class="progress" <div class="progress"
:style="{ width: item.rate + '%', background: filterStatusColor(item.deviceStatus) }"> :style="{ width: item.rate + '%', background: filterStatusColor(item.deviceStatus) }">
<span class="progress-text">{{ item.value }}</span> <span class="progress-text">{{ formatNumberWithCommas(item.value) }}</span>
</div> </div>
</div> </div>
<img style="padding-left: 1rem;" v-if="item.rate < 10" src="@/assets/alarm.svg" /> <img style="padding-left: 1rem;" v-if="item.rate < 10" src="@/assets/alarm.svg" />
@ -25,17 +25,17 @@
<div class="block"> <div class="block">
<div class="flex-row"> <div class="flex-row">
<h2 class="juice-title">果肉调配</h2> <h2 class="juice-title">果肉调配</h2>
<span class="flow-label">累计流量：{{ totalTrafficPulp }}</span> <span class="flow-label">累计流量：{{ formatNumberWithCommas(totalTrafficPulp) }}</span>
</div> </div>
<div class="spacing"></div> <div class="spacing"></div>
<div v-for="item in innerProgressList" :key="item.name" class="juice-item" <div v-for="item in innerProgressList" :key="item.name" class="juice-item"
:data-device-id="item?.deviceId" :data-device-id="item?.deviceId"
@click="handleBlockClick(item?.deviceId, item.name, false)"> @click="handleBlockClick(item?.deviceId, item.aliasName, false)">
<span class="juice-name">{{ item.name }}：</span> <span class="juice-name">{{ item.name }}：</span>
<div class="progress-bar" style="cursor: pointer;"> <div class="progress-bar" style="cursor: pointer;">
<div class="progress" <div class="progress"
:style="{ width: item.rate + '%', background: filterStatusColor(item.deviceStatus) }"> :style="{ width: item.rate + '%', background: filterStatusColor(item.deviceStatus) }">
<span class="progress-text">{{ item.value }}</span> <span class="progress-text">{{ formatNumberWithCommas(item.value) }}</span>
</div> </div>
</div> </div>
<img style="padding-left: 1rem;" v-if="item.rate > 90" src="@/assets/alarm.svg" /> <img style="padding-left: 1rem;" v-if="item.rate > 90" src="@/assets/alarm.svg" />
@ -67,11 +67,11 @@
<div class="info-panel" style="display: flex; justify-content: space-between;width: 25%"> <div class="info-panel" style="display: flex; justify-content: space-between;width: 25%">
<div class="info-row"> <div class="info-row">
<span class="info-label">累计流量：</span> <span class="info-label">累计流量：</span>
<span class="info-value">{{ processForm_uht.totalTraffic }}</span> <span class="info-value">{{ formatNumberWithCommas(processForm_uht.totalTraffic) }}</span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="info-label">产品流量：</span> <span class="info-label">产品流量：</span>
<span class="info-value">{{ processForm_uht.productFlowRate }}</span> <span class="info-value">{{ formatNumberWithCommas(processForm_uht.productFlowRate) }}</span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="info-label">平衡温度：</span> <span class="info-label">平衡温度：</span>
@ -147,11 +147,11 @@
<div class="info-panel" style="display: flex; justify-content: space-between;width: 25%;"> <div class="info-panel" style="display: flex; justify-content: space-between;width: 25%;">
<div class="info-row"> <div class="info-row">
<span class="info-label">累计流量：</span> <span class="info-label">累计流量：</span>
<span class="info-value">{{ processForm_pulp.totalTraffic }}</span> <span class="info-value">{{ formatNumberWithCommas(processForm_pulp.totalTraffic) }}</span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="info-label">产品流量：</span> <span class="info-label">产品流量：</span>
<span class="info-value">{{ processForm_pulp.productFlowRate }}</span> <span class="info-value">{{ formatNumberWithCommas(processForm_pulp.productFlowRate) }}</span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="info-label">平衡温度：</span> <span class="info-label">平衡温度：</span>
@ -234,12 +234,12 @@
<div class="progress-bar"> <div class="progress-bar">
<div class="progress" <div class="progress"
:style="{ width: juiceTank.rate + '%', background: juiceTank.rate > 70 ? '#00D2A0' : juiceTank.rate > 50 ? '#FF9000' : juiceTank.rate > 30 ? '#FFD732' : '#FF0000' }"> :style="{ width: juiceTank.rate + '%', background: juiceTank.rate > 70 ? '#00D2A0' : juiceTank.rate > 50 ? '#FF9000' : juiceTank.rate > 30 ? '#FFD732' : '#FF0000' }">
<span class="progress-text">{{ juiceTank.liquidLevel }}</span> <span class="progress-text">{{ formatNumberWithCommas(juiceTank.liquidLevel) }}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="info-item" style="padding: 1rem 0 0 0;"> <div class="info-item" style="padding: 1rem 0 0 0;">
<span class="info-label" :style="{ color: '#00FFB9' }">▼果汁流量：{{ juiceTank.productFlowRate <span class="info-label" :style="{ color: '#00FFB9' }">▼果汁流量：{{ formatNumberWithCommas(juiceTank.productFlowRate)
}}</span> }}</span>
</div> </div>
</div> </div>
@ -285,18 +285,18 @@
<div class="info-panel"> <div class="info-panel">
<div class="info-row"> <div class="info-row">
<span class="info-label">当前液位：</span> <span class="info-label">当前液位：</span>
<span class="info-value">{{ dynamicMixer.liquidLevel }}</span> <span class="info-value">{{ formatNumberWithCommas(dynamicMixer.liquidLevel) }}</span>
</div> </div>
<div class="info-row"> <div class="info-row">
<span class="info-label">当前流量：</span> <span class="info-label">当前流量：</span>
<span class="info-value">{{ dynamicMixer.productFlowRate }}</span> <span class="info-value">{{ formatNumberWithCommas(dynamicMixer.productFlowRate) }}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="block"> <div class="block">
<div class="info-item" style="padding: 0.5rem 0 0 0;"> <div class="info-item" style="padding: 0.5rem 0 0 0;">
<span class="info-label" :style="{ color: '#00FFB9' }">▲果肉流量：{{ pulpTank.productFlowRate <span class="info-label" :style="{ color: '#00FFB9' }">▲果肉流量：{{ formatNumberWithCommas(pulpTank.productFlowRate)
}}</span> }}</span>
</div> </div>
<div class="flex-row"> <div class="flex-row">
@ -334,7 +334,7 @@
<div class="progress-bar"> <div class="progress-bar">
<div class="progress" <div class="progress"
:style="{ width: pulpTank.rate + '%', background: pulpTank.rate > 70 ? '#00D2A0' : pulpTank.rate > 50 ? '#FF9000' : pulpTank.rate > 30 ? '#FFD732' : '#FF0000' }"> :style="{ width: pulpTank.rate + '%', background: pulpTank.rate > 70 ? '#00D2A0' : pulpTank.rate > 50 ? '#FF9000' : pulpTank.rate > 30 ? '#FFD732' : '#FF0000' }">
<span class="progress-text">{{ pulpTank.liquidLevel }}</span> <span class="progress-text">{{ formatNumberWithCommas(pulpTank.liquidLevel) }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -369,7 +369,7 @@
<IxButton Outline class="btnStyle"> 生产步骤：{{ mixerStep }} </IxButton> <!-- 增加 step 字段显示 --> <IxButton Outline class="btnStyle"> 生产步骤：{{ mixerStep }} </IxButton> <!-- 增加 step 字段显示 -->
<IxButton Outline class="btnStyle"> 开始时间：{{ startTimeFormatted }} </IxButton> <IxButton Outline class="btnStyle"> 开始时间：{{ startTimeFormatted }} </IxButton>
<IxButton Outline class="btnStyle"> 结束时间：{{ endTimeFormatted }} </IxButton> <IxButton Outline class="btnStyle"> 结束时间：{{ endTimeFormatted }} </IxButton>
<IxButton Outline class="btnStyle"> 流量：{{ productFlowRate }} </IxButton> <IxButton Outline class="btnStyle"> 流量：{{ formatNumberWithCommas(productFlowRate) }} </IxButton>
<IxButton Outline class="btnStyle"> 配方：{{ formula }} </IxButton> <IxButton Outline class="btnStyle"> 配方：{{ formula }} </IxButton>
<IxButton Outline class="btnStyle"> 持续时长：{{ duration }} </IxButton> <IxButton Outline class="btnStyle"> 持续时长：{{ duration }} </IxButton>
<IxButton Outline id="triggerId" :disabled="currentStatus !== '停机'"> {{ selectedReason ? '停机原因：' + <IxButton Outline id="triggerId" :disabled="currentStatus !== '停机'"> {{ selectedReason ? '停机原因：' +
@ -392,7 +392,7 @@
<IxButton Outline class="btnStyle"> 结束时间：{{ endTimeFormatted }} </IxButton> <IxButton Outline class="btnStyle"> 结束时间：{{ endTimeFormatted }} </IxButton>
<IxButton Outline class="btnStyle"> 持续时长：{{ duration }} </IxButton> <IxButton Outline class="btnStyle"> 持续时长：{{ duration }} </IxButton>
<IxButton Outline class="btnStyle"> 调配状态：{{ blendStatus }} </IxButton> <IxButton Outline class="btnStyle"> 调配状态：{{ blendStatus }} </IxButton>
<IxButton Outline class="btnStyle"> 罐重：{{ capacity }} </IxButton> <IxButton Outline class="btnStyle"> 罐重：{{ formatNumberWithCommas(capacity) }} </IxButton>
</div> </div>
</div> </div>
</template> </template>
@ -539,8 +539,7 @@ const processDataFromAPI = (apiData) => {
recordTime: item.recordTime, recordTime: item.recordTime,
data: { data: {
id: item.data.id || 0, id: item.data.id || 0,
weight: item.data.weight || 0, weight: item.data.weight || 0,
capacity: item.data.capacity,
deviceStatus: item.data.deviceStatus || '', deviceStatus: item.data.deviceStatus || '',
cleanStatus: item.data.cleanStatus || '', cleanStatus: item.data.cleanStatus || '',
productFlowRate: item.data.productFlowRate || 0, productFlowRate: item.data.productFlowRate || 0,
@ -548,7 +547,9 @@ const processDataFromAPI = (apiData) => {
formula: item.data.formula || '', formula: item.data.formula || '',
mixerStep: item.data.mixerStep || '', mixerStep: item.data.mixerStep || '',
temperature: item.data.temperature || 0, temperature: item.data.temperature || 0,
liquidLevel: item.data.liquidLevel || 0 liquidLevel: item.data.liquidLevel || 0,
capacity: item.data.capacity,
aliasName: item.data.aliasName || '',
}, },
statusList: item.statusList || [] statusList: item.statusList || []
}; };
@ -614,7 +615,7 @@ const updateData = (processedData) => {
// 设置默认值 // 设置默认值
if (juiceData.value.deviceId) { if (juiceData.value.deviceId) {
globalDeviceId.value = juiceData.value.deviceId; globalDeviceId.value = juiceData.value.deviceId;
currentTitle.value = juiceData.value.data[0].name; currentTitle.value = juiceData.value.data[0].aliasName;
} }
// 累计流量 // 累计流量
totalTrafficJuice.value = juiceData.value.totalTraffic.toFixed(2); totalTrafficJuice.value = juiceData.value.totalTraffic.toFixed(2);
@ -623,6 +624,7 @@ const updateData = (processedData) => {
if (juiceData.value.data.length > 0) { if (juiceData.value.data.length > 0) {
progressList.value = juiceData.value.data.map(item => ({ progressList.value = juiceData.value.data.map(item => ({
name: item.name, name: item.name,
aliasName: item.aliasName,
deviceId: item.deviceId, deviceId: item.deviceId,
deviceStatus: item.deviceStatus, deviceStatus: item.deviceStatus,
value: item.weight, value: item.weight,
@ -632,6 +634,7 @@ const updateData = (processedData) => {
if (pulpData.value.data.length > 0) { if (pulpData.value.data.length > 0) {
innerProgressList.value = pulpData.value.data.map(item => ({ innerProgressList.value = pulpData.value.data.map(item => ({
name: item.name, name: item.name,
aliasName: item.aliasName,
deviceId: item.deviceId, deviceId: item.deviceId,
deviceStatus: item.deviceStatus, deviceStatus: item.deviceStatus,
value: item.weight, value: item.weight,

29
src/views/Inspection/index.vue
View File

@ -26,7 +26,7 @@
<div class="header_right"> <div class="header_right">
<!-- 设备列表按钮 --> <!-- 设备列表按钮 -->
<span v-for="(item, index) in deviceList" :key="item.id"> <span v-for="(item, index) in deviceList" :key="item.id">
<IxButton :outline="selectedDeviceId !== item.id" class="btn-style" @click="handleDeviceListChange(item.id)"> <IxButton :outline="selectedDeviceTypeId !== item.id" class="btn-style" @click="handleDeviceListChange(item.id)">
{{ item.name }} {{ item.name }}
</IxButton> </IxButton>
</span> </span>
@ -52,7 +52,7 @@
<span class="header-row">参考值</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" <span class="header-row" v-for="hour in hours" :key="hour"
:style="{ backgroundColor: getDeviceNameById(selectedDeviceId) === '灌注机' ? '#00FFB9' : '#00E4FF', color: '#000028' }"> :style="{ backgroundColor: getDeviceNameById(selectedDeviceTypeId) === '灌注机' ? '#00FFB9' : '#00E4FF', color: '#000028' }">
{{ hour }} {{ hour }}
</span> </span>
</div> </div>
@ -119,7 +119,7 @@ const status = ref('0'); // 确保 status 变量已定义
// 设备列表 // 设备列表
const deviceList = ref([]); const deviceList = ref([]);
const selectedDeviceId = ref(null); const selectedDeviceTypeId = ref(null);
const showForm = ref(false); const showForm = ref(false);
const selectedItemName = ref(''); const selectedItemName = ref('');
@ -168,7 +168,7 @@ const confirmedTimes = ref({});
// 点检状态 // 点检状态
const hourCheckStatus = ref({}); const hourCheckStatus = ref({});
const hourCheckTime = ref({}); const hourCheckTime = ref({});
const alarmId = ref({}); const alarmId = ref({}); // 改为双层结构：{ [deviceId: string]: { [recordTime: string]: number } }
const hourCheckValid = ref({}); const hourCheckValid = ref({});
const formatTime = (time) => { const formatTime = (time) => {
@ -272,7 +272,7 @@ const handleShiftChange = (event) => {
// 切换设备 // 切换设备
const handleDeviceListChange = (id) => { const handleDeviceListChange = (id) => {
selectedDeviceId.value = id; selectedDeviceTypeId.value = id;
fetchInspectionData(); fetchInspectionData();
fetchCurrentValues(); fetchCurrentValues();
}; };
@ -283,7 +283,7 @@ const fetchDeviceList = async () => {
const response = await getDeviceList(); const response = await getDeviceList();
if (response.code === 200) { if (response.code === 200) {
deviceList.value = response.data; deviceList.value = response.data;
selectedDeviceId.value = deviceList.value[0].id; // 默认选中第一个设备 selectedDeviceTypeId.value = deviceList.value[0].id; // 默认选中第一个设备
} else { } else {
showWarningMessage('获取设备列表失败！'); showWarningMessage('获取设备列表失败！');
} }
@ -295,7 +295,7 @@ const fetchDeviceList = async () => {
// 获取当前值、参考值、单位等信息 // 获取当前值、参考值、单位等信息
const fetchCurrentValues = async () => { const fetchCurrentValues = async () => {
try { try {
const deviceId = selectedDeviceId.value; // 根据实际情况设置设备ID const deviceId = selectedDeviceTypeId.value; // 根据实际情况设置设备ID
const dateValue = selectedDate.value || currentDate; const dateValue = selectedDate.value || currentDate;
const response = await getInspectionCurrent(deviceId, dateValue); const response = await getInspectionCurrent(deviceId, dateValue);
const params = await getCheckParas(deviceId, dateValue); const params = await getCheckParas(deviceId, dateValue);
@ -335,19 +335,26 @@ const fetchCurrentValues = async () => {
// 获取点检数据 // 获取点检数据
const fetchInspectionData = async () => { const fetchInspectionData = async () => {
try { try {
const deviceId = selectedDeviceId.value; // 根据实际情况设置设备ID const deviceTypeId = selectedDeviceTypeId.value; // 根据实际情况设置设备ID
const shiftValue = shift.value; const shiftValue = shift.value;
const dateValue = selectedDate.value || currentDate; const dateValue = selectedDate.value || currentDate;
const response = await getInspectionData(deviceId, dateValue, shiftValue); const response = await getInspectionData(deviceTypeId, dateValue, shiftValue);
if (response.data) { if (response.data) {
const inspectionData = response.data; const inspectionData = response.data;
const itemsMap = {}; const itemsMap = {};
inspectionData.forEach(record => { inspectionData.forEach(record => {
console.log("🚀 ~ fetchInspectionData ~ record:", record)
const recordTime = record.recordTime; const recordTime = record.recordTime;
const data = record.data; const data = record.data;
const deviceId = record.deviceId;
hourCheckStatus.value[recordTime] = record.hourCheckStatus; hourCheckStatus.value[recordTime] = record.hourCheckStatus;
hourCheckTime.value[recordTime] = formatTime(record.hourCheckTime); hourCheckTime.value[recordTime] = formatTime(record.hourCheckTime);
alarmId.value[recordTime] = record.alarmId;
if (!alarmId.value[deviceId]) {
alarmId.value[deviceId] = {} // 初始化设备ID对应的存储空间
}
alarmId.value[deviceId][recordTime] = record.alarmId;
hourCheckValid.value[recordTime] = record.hourCheckValid; hourCheckValid.value[recordTime] = record.hourCheckValid;
for (const [name, valueObj] of Object.entries(data)) { for (const [name, valueObj] of Object.entries(data)) {
@ -398,7 +405,7 @@ const handleExport = () => {
} }
showInfoMessage('导出全部'); showInfoMessage('导出全部');
exportExcel(selectedDeviceId.value, selectedDate.value || currentDate, shift.value) exportExcel(selectedDeviceTypeId.value, selectedDate.value || currentDate, shift.value)
.then((response) => { .then((response) => {
if (response) { if (response) {
// 有数据的处理 // 有数据的处理