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

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

@ -6,17 +6,17 @@
<div class="block">
<div class="flex-row">
<h2 class="juice-title">果汁调配</h2>
<span class="flow-label">累计流量：{{ totalTrafficJuice }}</span>
<span class="flow-label">累计流量：{{ formatNumberWithCommas(totalTrafficJuice) }}</span>
</div>
<div class="spacing"></div>
<div v-for="item in progressList" :key="item.name" class="juice-item"
: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>
<div class="progress-bar" style="cursor: pointer;">
<div class="progress"
: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>
<img style="padding-left: 1rem;" v-if="item.rate < 10" src="@/assets/alarm.svg" />
@ -25,17 +25,17 @@
<div class="block">
<div class="flex-row">
<h2 class="juice-title">果肉调配</h2>
<span class="flow-label">累计流量：{{ totalTrafficPulp }}</span>
<span class="flow-label">累计流量：{{ formatNumberWithCommas(totalTrafficPulp) }}</span>
</div>
<div class="spacing"></div>
<div v-for="item in innerProgressList" :key="item.name" class="juice-item"
: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>
<div class="progress-bar" style="cursor: pointer;">
<div class="progress"
: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>
<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-row">
<span class="info-label">累计流量：</span>
<span class="info-value">{{ processForm_uht.totalTraffic }}</span>
<span class="info-value">{{ formatNumberWithCommas(processForm_uht.totalTraffic) }}</span>
</div>
<div class="info-row">
<span class="info-label">产品流量：</span>
<span class="info-value">{{ processForm_uht.productFlowRate }}</span>
<span class="info-value">{{ formatNumberWithCommas(processForm_uht.productFlowRate) }}</span>
</div>
<div class="info-row">
<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-row">
<span class="info-label">累计流量：</span>
<span class="info-value">{{ processForm_pulp.totalTraffic }}</span>
<span class="info-value">{{ formatNumberWithCommas(processForm_pulp.totalTraffic) }}</span>
</div>
<div class="info-row">
<span class="info-label">产品流量：</span>
<span class="info-value">{{ processForm_pulp.productFlowRate }}</span>
<span class="info-value">{{ formatNumberWithCommas(processForm_pulp.productFlowRate) }}</span>
</div>
<div class="info-row">
<span class="info-label">平衡温度：</span>
@ -234,12 +234,12 @@
<div class="progress-bar">
<div class="progress"
: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 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>
</div>
</div>
@ -285,18 +285,18 @@
<div class="info-panel">
<div class="info-row">
<span class="info-label">当前液位：</span>
<span class="info-value">{{ dynamicMixer.liquidLevel }}</span>
<span class="info-value">{{ formatNumberWithCommas(dynamicMixer.liquidLevel) }}</span>
</div>
<div class="info-row">
<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 class="block">
<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>
</div>
<div class="flex-row">
@ -334,7 +334,7 @@
<div class="progress-bar">
<div class="progress"
: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>
@ -369,7 +369,7 @@
<IxButton Outline class="btnStyle"> 生产步骤：{{ mixerStep }} </IxButton> <!-- 增加 step 字段显示 -->
<IxButton Outline class="btnStyle"> 开始时间：{{ startTimeFormatted }} </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"> 持续时长：{{ duration }} </IxButton>
<IxButton Outline id="triggerId" :disabled="currentStatus !== '停机'"> {{ selectedReason ? '停机原因：' +
@ -392,7 +392,7 @@
<IxButton Outline class="btnStyle"> 结束时间：{{ endTimeFormatted }} </IxButton>
<IxButton Outline class="btnStyle"> 持续时长：{{ duration }} </IxButton>
<IxButton Outline class="btnStyle"> 调配状态：{{ blendStatus }} </IxButton>
<IxButton Outline class="btnStyle"> 罐重：{{ capacity }} </IxButton>
<IxButton Outline class="btnStyle"> 罐重：{{ formatNumberWithCommas(capacity) }} </IxButton>
</div>
</div>
</template>
@ -540,7 +540,6 @@ const processDataFromAPI = (apiData) => {
data: {
id: item.data.id || 0,
weight: item.data.weight || 0,
capacity: item.data.capacity,
deviceStatus: item.data.deviceStatus || '',
cleanStatus: item.data.cleanStatus || '',
productFlowRate: item.data.productFlowRate || 0,
@ -548,7 +547,9 @@ const processDataFromAPI = (apiData) => {
formula: item.data.formula || '',
mixerStep: item.data.mixerStep || '',
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 || []
};
@ -614,7 +615,7 @@ const updateData = (processedData) => {
// 设置默认值
if (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);
@ -623,6 +624,7 @@ const updateData = (processedData) => {
if (juiceData.value.data.length > 0) {
progressList.value = juiceData.value.data.map(item => ({
name: item.name,
aliasName: item.aliasName,
deviceId: item.deviceId,
deviceStatus: item.deviceStatus,
value: item.weight,
@ -632,6 +634,7 @@ const updateData = (processedData) => {
if (pulpData.value.data.length > 0) {
innerProgressList.value = pulpData.value.data.map(item => ({
name: item.name,
aliasName: item.aliasName,
deviceId: item.deviceId,
deviceStatus: item.deviceStatus,
value: item.weight,

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

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