From 3a0087aa5e3eed5d9d7a793a17dc01fd1d6df80c Mon Sep 17 00:00:00 2001
From: huang <1532065656@qq.com>
Date: 星期四, 17 四月 2025 17:01:15 +0800
Subject: [PATCH] 看板大屏2修改页面
---
JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/utilization/controller/UtilizationController.java | 10
JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/controller/PlannedAmountController.java | 104 ++++
JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/service/PlannedAmountService.java | 13
JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/service/impl/PlannedAmountImpl.java | 29 +
UI-Project/src/views/KanbanData/kanbanData.vue | 263 ++++++++++
JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/quantity/controller/QuantityController.java | 10
JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/mapper/PlannedAmountMapper.java | 9
JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/entity/PlannedAmount.java | 39 +
JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/yield/controller/YieldController.java | 14
UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue | 853 ++++++++++++++++++++----------------
10 files changed, 944 insertions(+), 400 deletions(-)
diff --git a/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/controller/PlannedAmountController.java b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/controller/PlannedAmountController.java
new file mode 100644
index 0000000..796b69f
--- /dev/null
+++ b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/controller/PlannedAmountController.java
@@ -0,0 +1,104 @@
+package com.mes.plannedAmount.controller;
+
+import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
+import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
+import com.mes.plannedAmount.entity.PlannedAmount;
+import com.mes.plannedAmount.service.PlannedAmountService;
+import com.mes.utils.Result;
+import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiOperation;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.util.StringUtils;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.Calendar;
+import java.util.Date;
+import java.util.List;
+import java.util.Map;
+
+@Api(tags = "璁″垝浜ч噺鎺ュ彛")
+@RestController
+@RequestMapping("/plannedAmount")
+public class PlannedAmountController {
+
+ @Autowired
+ private PlannedAmountService plannedAmountService;
+
+ @ApiOperation("鑾峰彇璁″垝閲忔暟鎹垪琛�")
+ @PostMapping("/listPlanned")
+ @ResponseBody
+ public Result listPlanned(@RequestBody Map<String, Object> params) {
+ Integer page = params.get("page") == null ? 1 : (Integer) params.get("page");
+ Integer pageSize = params.get("pageSize") == null ? 10 : (Integer) params.get("pageSize");
+ String type = (String) params.get("type");
+
+ QueryWrapper<PlannedAmount> queryWrapper = new QueryWrapper<PlannedAmount>().orderByDesc("record_time");
+ if (StringUtils.hasText(type)) {
+ queryWrapper.eq("type", type);
+ }
+
+ Page<PlannedAmount> pageData = plannedAmountService.page(
+ new Page<>(page, pageSize),
+ queryWrapper
+ );
+
+ return Result.build(200, "鏌ヨ鎴愬姛", pageData);
+ }
+
+ @ApiOperation("娣诲姞璁″垝閲�")
+ @PostMapping("/addPlanned")
+ @ResponseBody
+ public Result addPlanned(@RequestBody PlannedAmount value) {
+ value.setCreateTime(new Date());
+ value.setUpdateTime(new Date());
+ boolean success = plannedAmountService.save(value);
+ int count = success ? 1 : 0;
+ String message = count > 0 ? "娣诲姞鎴愬姛锛�" + count : "娣诲姞澶辫触!";
+ return Result.build(200, message, count);
+ }
+
+ @ApiOperation("淇敼璁″垝閲�")
+ @PostMapping("/updatePlanned")
+ @ResponseBody
+ public Result updatePlanned(@RequestBody PlannedAmount value) {
+ value.setUpdateTime(new Date());
+ boolean success = plannedAmountService.updateById(value);
+ int count = success ? 1 : 0;
+ String message = count > 0 ? "淇敼鎴愬姛锛�" + count : "淇敼澶辫触!";
+ return Result.build(200, message, count);
+ }
+
+ @ApiOperation("鍒犻櫎璁″垝閲�")
+ @PostMapping("/deletePlanned")
+ @ResponseBody
+ public Result deletePlanned(@RequestBody PlannedAmount value) {
+ boolean success = plannedAmountService.removeById(value.getId());
+ int count = success ? 1 : 0;
+ String message = count > 0 ? "鍒犻櫎鎴愬姛锛�" + count : "鍒犻櫎澶辫触!";
+ return Result.build(200, message, count);
+ }
+
+ @ApiOperation("鑾峰彇鍥捐〃鏁版嵁")
+ @PostMapping("/chartPlanned")
+ @ResponseBody
+ public Result getChartData(@RequestBody(required = false) Map<String, Object> params) {
+ String type = params != null ? (String) params.get("type") : null;
+ Integer dayCount = params != null && params.get("dayCount") != null ? (Integer) params.get("dayCount") : null;
+
+ QueryWrapper<PlannedAmount> queryWrapper = new QueryWrapper<PlannedAmount>().orderByAsc("record_time");
+ if (StringUtils.hasText(type)) {
+ queryWrapper.eq("type", type);
+ }
+
+ if (dayCount != null && dayCount > 0) {
+ Calendar calendar = Calendar.getInstance();
+ calendar.add(Calendar.DAY_OF_MONTH, -dayCount);
+ Date startDate = calendar.getTime();
+ queryWrapper.ge("record_time", startDate);
+ }
+
+ List<PlannedAmount> data = plannedAmountService.list(queryWrapper);
+
+ return Result.build(200, "鏌ヨ鎴愬姛", data);
+ }
+}
\ No newline at end of file
diff --git a/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/entity/PlannedAmount.java b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/entity/PlannedAmount.java
new file mode 100644
index 0000000..4045e0c
--- /dev/null
+++ b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/entity/PlannedAmount.java
@@ -0,0 +1,39 @@
+package com.mes.plannedAmount.entity;
+
+import com.baomidou.mybatisplus.annotation.IdType;
+import com.baomidou.mybatisplus.annotation.TableId;
+import com.baomidou.mybatisplus.annotation.TableName;
+import com.fasterxml.jackson.annotation.JsonFormat;
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+import lombok.Data;
+
+import java.util.Date;
+
+@Data
+@TableName("planned_amount")
+@ApiModel(value = "PlannedAmount", description = "璁″垝浜ч噺")
+public class PlannedAmount {
+
+ @TableId(type = IdType.AUTO)
+ @ApiModelProperty("ID")
+ private Long id;
+
+ @ApiModelProperty("绫诲瀷")
+ private String type;
+
+ @ApiModelProperty("鏁板��")
+ private Double value;
+
+ @ApiModelProperty("璁板綍鏃堕棿")
+ @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
+ private Date recordTime;
+
+ @ApiModelProperty("鍒涘缓鏃堕棿")
+ @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
+ private Date createTime;
+
+ @ApiModelProperty("鏇存柊鏃堕棿")
+ @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
+ private Date updateTime;
+}
\ No newline at end of file
diff --git a/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/mapper/PlannedAmountMapper.java b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/mapper/PlannedAmountMapper.java
new file mode 100644
index 0000000..8d739c8
--- /dev/null
+++ b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/mapper/PlannedAmountMapper.java
@@ -0,0 +1,9 @@
+package com.mes.plannedAmount.mapper;
+
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+import com.mes.plannedAmount.entity.PlannedAmount;
+import org.apache.ibatis.annotations.Mapper;
+
+@Mapper
+public interface PlannedAmountMapper extends BaseMapper<PlannedAmount> {
+}
\ No newline at end of file
diff --git a/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/service/PlannedAmountService.java b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/service/PlannedAmountService.java
new file mode 100644
index 0000000..3e0f9de
--- /dev/null
+++ b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/service/PlannedAmountService.java
@@ -0,0 +1,13 @@
+package com.mes.plannedAmount.service;
+
+import com.baomidou.mybatisplus.extension.service.IService;
+import com.mes.plannedAmount.entity.PlannedAmount;
+
+public interface PlannedAmountService extends IService<PlannedAmount> {
+
+ /**
+ * 閫氱煡浜ч噺鏁版嵁鏇存柊
+ * @param value 浜ч噺鏁版嵁
+ */
+ void notifyPlannedUpdate(PlannedAmount value);
+}
\ No newline at end of file
diff --git a/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/service/impl/PlannedAmountImpl.java b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/service/impl/PlannedAmountImpl.java
new file mode 100644
index 0000000..bc66678
--- /dev/null
+++ b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/service/impl/PlannedAmountImpl.java
@@ -0,0 +1,29 @@
+package com.mes.plannedAmount.service.impl;
+
+import cn.hutool.json.JSONObject;
+import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import com.mes.plannedAmount.entity.PlannedAmount;
+import com.mes.plannedAmount.mapper.PlannedAmountMapper;
+import com.mes.plannedAmount.service.PlannedAmountService;
+import com.mes.tools.WebSocketServer;
+import org.springframework.stereotype.Service;
+
+import java.util.ArrayList;
+
+@Service
+public class PlannedAmountImpl extends ServiceImpl<PlannedAmountMapper, PlannedAmount> implements PlannedAmountService {
+
+ @Override
+ public void notifyPlannedUpdate(PlannedAmount value) {
+ JSONObject message = new JSONObject();
+ message.set("type", "planned_update");
+ message.set("data", value);
+
+ ArrayList<WebSocketServer> servers = WebSocketServer.sessionMap.get("value");
+ if (servers != null) {
+ for (WebSocketServer server : servers) {
+ server.sendMessage(message.toString());
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/quantity/controller/QuantityController.java b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/quantity/controller/QuantityController.java
index e09dafd..bd227ee 100644
--- a/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/quantity/controller/QuantityController.java
+++ b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/quantity/controller/QuantityController.java
@@ -11,6 +11,7 @@
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
+import java.util.Calendar;
import java.util.Date;
import java.util.List;
import java.util.Map;
@@ -82,12 +83,19 @@
@ResponseBody
public Result getChartData(@RequestBody(required = false) Map<String, Object> params) {
String locationCode = params != null ? (String) params.get("locationCode") : null;
+ Integer dayCount = params != null && params.get("dayCount") != null ? (Integer) params.get("dayCount") : null;
QueryWrapper<Quantity> queryWrapper = new QueryWrapper<Quantity>().orderByAsc("record_time");
if (StringUtils.hasText(locationCode)) {
queryWrapper.eq("location_code", locationCode);
}
- queryWrapper.last("limit 30");
+
+ if (dayCount != null && dayCount > 0) {
+ Calendar calendar = Calendar.getInstance();
+ calendar.add(Calendar.DAY_OF_MONTH, -dayCount);
+ Date startDate = calendar.getTime();
+ queryWrapper.ge("record_time", startDate);
+ }
List<Quantity> data = quantityService.list(queryWrapper);
diff --git a/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/utilization/controller/UtilizationController.java b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/utilization/controller/UtilizationController.java
index 0ccf8e6..aa5aa13 100644
--- a/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/utilization/controller/UtilizationController.java
+++ b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/utilization/controller/UtilizationController.java
@@ -11,6 +11,7 @@
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
+import java.util.Calendar;
import java.util.Date;
import java.util.List;
import java.util.Map;
@@ -82,12 +83,19 @@
@ResponseBody
public Result getChartData(@RequestBody(required = false) Map<String, Object> params) {
String lineNo = params != null ? (String) params.get("lineNo") : null;
+ Integer dayCount = params != null && params.get("dayCount") != null ? (Integer) params.get("dayCount") : null;
QueryWrapper<Utilization> queryWrapper = new QueryWrapper<Utilization>().orderByAsc("record_time");
if (StringUtils.hasText(lineNo)) {
queryWrapper.eq("line_no", lineNo);
}
- queryWrapper.last("limit 30");
+
+ if (dayCount != null && dayCount > 0) {
+ Calendar calendar = Calendar.getInstance();
+ calendar.add(Calendar.DAY_OF_MONTH, -dayCount);
+ Date startDate = calendar.getTime();
+ queryWrapper.ge("record_time", startDate);
+ }
List<Utilization> data = utilizationService.list(queryWrapper);
diff --git a/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/yield/controller/YieldController.java b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/yield/controller/YieldController.java
index 6c19874..935edd1 100644
--- a/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/yield/controller/YieldController.java
+++ b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/yield/controller/YieldController.java
@@ -11,6 +11,7 @@
import org.springframework.web.bind.annotation.*;
import org.springframework.util.StringUtils;
+import java.util.Calendar;
import java.util.Date;
import java.util.List;
import java.util.Map;
@@ -82,12 +83,23 @@
@ResponseBody
public Result getChartData(@RequestBody(required = false) Map<String, Object> params) {
String lineNo = params != null ? (String) params.get("lineNo") : null;
+ Integer dayCount = params != null && params.get("dayCount") != null ? (Integer) params.get("dayCount") : null;
QueryWrapper<Yield> queryWrapper = new QueryWrapper<Yield>().orderByAsc("record_time");
if (StringUtils.hasText(lineNo)) {
queryWrapper.eq("line_no", lineNo);
}
- queryWrapper.last("limit 30");
+
+ // 濡傛灉鎸囧畾浜嗗ぉ鏁帮紝鍒欐煡璇㈡渶杩慛澶╃殑鏁版嵁锛屽惁鍒欐煡璇㈠叏閮ㄦ暟鎹�
+ if (dayCount != null && dayCount > 0) {
+ // 璁＄畻N澶╁墠鐨勬棩鏈�
+ Calendar calendar = Calendar.getInstance();
+ calendar.add(Calendar.DAY_OF_MONTH, -dayCount);
+ Date startDate = calendar.getTime();
+ queryWrapper.ge("record_time", startDate);
+ }
+
+ // 绉婚櫎浜嗗浐瀹歭imit闄愬埗锛屽厑璁歌幏鍙栧叏閮ㄦ暟鎹�
List<Yield> data = yieldService.list(queryWrapper);
diff --git a/UI-Project/src/views/KanbanData/kanbanData.vue b/UI-Project/src/views/KanbanData/kanbanData.vue
index c08aab8..e2db803 100644
--- a/UI-Project/src/views/KanbanData/kanbanData.vue
+++ b/UI-Project/src/views/KanbanData/kanbanData.vue
@@ -8,6 +8,7 @@
loadYieldData()
loadUtilizationData()
loadQuantityData()
+ loadPlannedData()
})
// 鍏抽棴椤甸潰鍋滄瀹氭椂鍣�
@@ -68,8 +69,8 @@
// 鍦ㄥ埗閲�
const locationOptions = [
{ label: '鍗婃垚鍝�', value: '鍗婃垚鍝�' },
- { label: '7014搴撲綅', value: '7014搴撲綅' },
- { label: '7016搴撲綅', value: '7016搴撲綅' }
+ { label: '7014', value: '7014' },
+ { label: '7016', value: '7016' }
]
// 鍦ㄥ埗閲忔暟鎹�
@@ -80,6 +81,15 @@
})
const quantityData = ref([])
const quantityLoading = ref(false)
+
+// 璁″垝浜ч噺鏁版嵁
+const plannedFormData = ref({
+ recordDate: new Date().toISOString().slice(0, 10),
+ type: '',
+ value: null
+})
+const plannedData = ref([])
+const plannedLoading = ref(false)
// 鏃ユ湡鏍煎紡鍖�
const formatDate = (dateStr) => {
@@ -94,9 +104,8 @@
const checkExists = (date, code, data, excludeId = null) => {
return data.some(item => {
const itemDate = item.recordTime ? formatDate(item.recordTime) : item.recordDate;
- return itemDate === date &&
- (item.lineNo === code || item.locationCode === code) &&
- (!excludeId || item.id !== excludeId);
+ const codeMatch = item.lineNo === code || item.locationCode === code || item.type === code;
+ return itemDate === date && codeMatch && (!excludeId || item.id !== excludeId);
});
}
@@ -182,6 +191,34 @@
console.error(error)
} finally {
quantityLoading.value = false
+ }
+}
+
+// 鍔犺浇璁″垝浜ч噺鏁版嵁
+const loadPlannedData = async () => {
+ plannedLoading.value = true
+ try {
+ const res = await request({
+ url: '/deviceInteraction/plannedAmount/listPlanned',
+ method: 'post',
+ data: { page: 1, pageSize: 50 }
+ })
+ if (res.code === 200 && res.data?.records) {
+ plannedData.value = res.data.records.map(item => {
+ const formattedDate = item.recordTime ? formatDate(item.recordTime) : '';
+ return {
+ ...item,
+ recordDate: formattedDate,
+ editing: false,
+ originalData: { ...item, recordDate: formattedDate }
+ };
+ });
+ }
+ } catch (error) {
+ ElMessage.error('璁″垝浜ч噺鏁版嵁鍔犺浇澶辫触')
+ console.error(error)
+ } finally {
+ plannedLoading.value = false
}
}
@@ -284,10 +321,44 @@
}
}
+// 鎻愪氦璁″垝浜ч噺琛ㄥ崟
+const handlePlannedSubmit = async () => {
+ if (!plannedFormData.value.recordDate || !plannedFormData.value.type || plannedFormData.value.value === null) {
+ ElMessage.error('璇峰～鍐欏畬鏁翠俊鎭�')
+ return
+ }
+
+ // 妫�鏌ユ槸鍚﹀瓨鍦ㄧ浉鍚屾棩鏈熷拰绫诲瀷鐨勮褰�
+ if (checkExists(plannedFormData.value.recordDate, plannedFormData.value.type, plannedData.value)) {
+ ElMessage.error('璇ユ棩鏈熷拰绫诲瀷鐨勮褰曞凡瀛樺湪')
+ return
+ }
+
+ try {
+ const recordTimeStr = `${plannedFormData.value.recordDate} 00:00:00`;
+
+ await request({
+ url: '/deviceInteraction/plannedAmount/addPlanned',
+ method: 'post',
+ data: {
+ type: plannedFormData.value.type,
+ value: plannedFormData.value.value,
+ recordTime: recordTimeStr
+ }
+ })
+ ElMessage.success('娣诲姞鎴愬姛')
+ resetPlannedForm()
+ loadPlannedData()
+ } catch (error) {
+ ElMessage.error('娣诲姞澶辫触')
+ console.error(error)
+ }
+}
+
// 閲嶇疆琛ㄥ崟
const resetYieldForm = () => {
yieldFormData.value = {
- recordDate: new Date().toISOString().slice(0, 10),
+ recordDate: yieldFormData.value.recordDate, // 淇濇寔褰撳墠閫夋嫨鐨勬棩鏈�
lineNo: '',
yieldvalue: null
}
@@ -295,7 +366,7 @@
const resetUtilizationForm = () => {
utilizationFormData.value = {
- recordDate: new Date().toISOString().slice(0, 10),
+ recordDate: utilizationFormData.value.recordDate, // 淇濇寔褰撳墠閫夋嫨鐨勬棩鏈�
lineNo: '',
utilizationRate: null
}
@@ -303,7 +374,7 @@
const resetQuantityForm = () => {
quantityFormData.value = {
- recordDate: new Date().toISOString().slice(0, 10),
+ recordDate: quantityFormData.value.recordDate, // 淇濇寔褰撳墠閫夋嫨鐨勬棩鏈�
locationCode: '',
quantity: null
}
@@ -427,6 +498,56 @@
}
}
+// 缂栬緫璁″垝浜ч噺
+const handlePlannedEdit = async (index, row) => {
+ if (!row.editing) {
+ row.editing = true
+ return
+ }
+
+ if (!row.recordDate || !row.type || row.value === null) {
+ ElMessage.error('璇峰～鍐欏畬鏁翠俊鎭�')
+ return
+ }
+
+ // 妫�鏌ユ槸鍚﹀瓨鍦ㄧ浉鍚屾棩鏈熷拰绫诲瀷鐨勮褰曪紙鎺掗櫎褰撳墠璁板綍锛�
+ if (checkExists(row.recordDate, row.type, plannedData.value, row.id)) {
+ ElMessage.error('璇ユ棩鏈熷拰绫诲瀷鐨勮褰曞凡瀛樺湪')
+ return
+ }
+
+ try {
+ const recordTimeStr = `${row.recordDate} 00:00:00`;
+
+ await request({
+ url: '/deviceInteraction/plannedAmount/updatePlanned',
+ method: 'post',
+ data: {
+ id: row.id,
+ type: row.type,
+ value: row.value,
+ recordTime: recordTimeStr
+ }
+ })
+ row.editing = false
+ row.originalData = { ...row }
+ ElMessage.success('淇敼鎴愬姛')
+ loadPlannedData()
+ } catch (error) {
+ ElMessage.error('淇敼澶辫触')
+ console.error(error)
+ }
+}
+
+// 閲嶇疆璁″垝浜ч噺琛ㄥ崟
+const resetPlannedForm = () => {
+ plannedFormData.value = {
+ recordDate: plannedFormData.value.recordDate,
+ type: '',
+ value: null
+ }
+}
+
// 鍙栨秷缂栬緫
const cancelEdit = (row) => {
Object.assign(row, row.originalData)
@@ -459,6 +580,12 @@
method: 'post',
data: { id: id }
})
+ } else if (type === 'planned') {
+ await request({
+ url: '/deviceInteraction/plannedAmount/deletePlanned',
+ method: 'post',
+ data: { id: id }
+ })
}
ElMessage.success('鍒犻櫎鎴愬姛')
@@ -467,6 +594,7 @@
if (type === 'yieldvalue') loadYieldData()
else if (type === 'utilization') loadUtilizationData()
else if (type === 'quantity') loadQuantityData()
+ else if (type === 'planned') loadPlannedData()
} catch (error) {
if (error !== 'cancel') {
@@ -598,8 +726,8 @@
</el-form-item>
<el-form-item label="鐢熶骇绾�">
<el-select v-model="utilizationFormData.lineNo" placeholder="閫夋嫨鐢熶骇绾�" style="width: 180px">
- <el-option label="涓�绾�" value="涓�绾�" />
- <el-option label="浜岀嚎" value="浜岀嚎" />
+ <el-option label="鏍囧噯" value="鏍囧噯" />
+ <el-option label="瀹氬埗" value="瀹氬埗" />
</el-select>
</el-form-item>
<el-form-item label="鍒╃敤鐜�">
@@ -635,8 +763,8 @@
<el-table-column prop="lineNo" label="鐢熶骇绾�" width="180">
<template #default="scope">
<el-select v-if="scope.row.editing" v-model="scope.row.lineNo" style="width: 140px">
- <el-option label="涓�绾�" value="涓�绾�" />
- <el-option label="浜岀嚎" value="浜岀嚎" />
+ <el-option label="鏍囧噯" value="鏍囧噯" />
+ <el-option label="瀹氬埗" value="瀹氬埗" />
</el-select>
<span v-else>{{ scope.row.lineNo }}</span>
</template>
@@ -702,8 +830,8 @@
<el-form-item label="绫诲瀷">
<el-select v-model="quantityFormData.locationCode" placeholder="閫夋嫨绫诲瀷" style="width: 180px">
<el-option label="鍗婃垚鍝�" value="鍗婃垚鍝�" />
- <el-option label="7014搴撲綅" value="7014搴撲綅" />
- <el-option label="7016搴撲綅" value="7016搴撲綅" />
+ <el-option label="7014" value="7014" />
+ <el-option label="7016" value="7016" />
</el-select>
</el-form-item>
<el-form-item label="鏁伴噺">
@@ -739,13 +867,13 @@
<template #default="scope">
<el-select v-if="scope.row.editing" v-model="scope.row.locationCode" style="width: 140px">
<el-option label="鍗婃垚鍝�" value="鍗婃垚鍝�" />
- <el-option label="7014搴撲綅" value="7014搴撲綅" />
- <el-option label="7016搴撲綅" value="7016搴撲綅" />
+ <el-option label="7014" value="7014" />
+ <el-option label="7016" value="7016" />
</el-select>
<span v-else>
{{
scope.row.locationCode === '鍗婃垚鍝�' ? '鍗婃垚鍝�' :
- scope.row.locationCode === '7014搴撲綅' ? '7014搴撲綅' : '7016搴撲綅'
+ scope.row.locationCode === '7014' ? '7014' : '7016'
}}
</span>
</template>
@@ -794,6 +922,107 @@
</el-table-column>
</el-table>
</el-tab-pane>
+
+ <!-- 璁″垝浜ч噺鏍囩椤� -->
+ <el-tab-pane label="璁″垝浜ч噺" name="planned">
+ <el-form :inline="true" :model="plannedFormData" label-width="100px" class="form-container">
+ <el-form-item label="鏃ユ湡">
+ <el-date-picker
+ v-model="plannedFormData.recordDate"
+ type="date"
+ value-format="YYYY-MM-DD"
+ placeholder="閫夋嫨鏃ユ湡"
+ style="width: 180px"
+ />
+ </el-form-item>
+ <el-form-item label="绫诲瀷">
+ <el-select v-model="plannedFormData.type" placeholder="閫夋嫨绫诲瀷" style="width: 180px">
+ <el-option label="骞虫柟" value="骞虫柟" />
+ <el-option label="鐗囨暟" value="鐗囨暟" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鏁板��">
+ <el-input-number
+ v-model="plannedFormData.value"
+ :precision="plannedFormData.type === '骞虫柟' ? 2 : 0"
+ :step="plannedFormData.type === '骞虫柟' ? 0.01 : 1"
+ :min="0"
+ controls-position="right"
+ style="width: 180px"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="handlePlannedSubmit">鎻愪氦</el-button>
+ <el-button @click="resetPlannedForm">閲嶇疆</el-button>
+ </el-form-item>
+ </el-form>
+
+ <el-table :data="plannedData" v-loading="plannedLoading" style="width: 100%">
+ <el-table-column prop="recordDate" label="鏃ユ湡" width="180">
+ <template #default="scope">
+ <el-date-picker
+ v-if="scope.row.editing"
+ v-model="scope.row.recordDate"
+ type="date"
+ value-format="YYYY-MM-DD"
+ style="width: 140px"
+ />
+ <span v-else>{{ scope.row.recordDate }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="type" label="绫诲瀷" width="180">
+ <template #default="scope">
+ <el-select v-if="scope.row.editing" v-model="scope.row.type" style="width: 140px">
+ <el-option label="骞虫柟" value="骞虫柟" />
+ <el-option label="鐗囨暟" value="鐗囨暟" />
+ </el-select>
+ <span v-else>{{ scope.row.type }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="value" label="鏁板��" width="180">
+ <template #default="scope">
+ <el-input-number
+ v-if="scope.row.editing"
+ v-model="scope.row.value"
+ :precision="scope.row.type === '骞虫柟' ? 2 : 0"
+ :step="scope.row.type === '骞虫柟' ? 0.01 : 1"
+ :min="0"
+ controls-position="right"
+ style="width: 140px"
+ />
+ <span v-else>{{ scope.row.value }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" width="200" fixed="right">
+ <template #default="scope">
+ <el-button-group>
+ <el-button
+ size="small"
+ :type="scope.row.editing ? 'success' : 'primary'"
+ @click="handlePlannedEdit(scope.$index, scope.row)"
+ >
+ {{ scope.row.editing ? '淇濆瓨' : '缂栬緫' }}
+ </el-button>
+ <el-button
+ v-if="scope.row.editing"
+ size="small"
+ @click="cancelEdit(scope.row)"
+ >
+ 鍙栨秷
+ </el-button>
+ <el-button
+ v-else
+ size="small"
+ type="danger"
+ @click="handleDelete(scope.$index, plannedData, 'planned')"
+ >
+ 鍒犻櫎
+ </el-button>
+ </el-button-group>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-tab-pane>
</el-tabs>
</el-main>
</el-container>
diff --git a/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue b/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue
index 2e30c32..48fb44a 100644
--- a/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue
+++ b/UI-Project/src/views/KanbanDisplay2/kanbanDisplay2.vue
@@ -4,8 +4,9 @@
import request from '@/utils/request'
const dashboardRef = ref(null)
-const standardWidth = 1920 // 璁捐绋挎爣鍑嗗搴�
-const standardHeight = 1080 // 璁捐绋挎爣鍑嗛珮搴�
+const standardWidth = 2220 // 璁捐绋挎爣鍑嗗搴�
+const standardHeight = 1224 // 璁捐绋挎爣鍑嗛珮搴︼紝
+
// 璁＄畻缂╂斁姣斾緥骞跺簲鐢�
const setScale = () => {
@@ -44,21 +45,22 @@
// 瀛樺偍鎵�鏈夊浘琛ㄥ疄渚�
const charts = []
-// 鑾峰彇鑳借�楁暟鎹�
-const loadEnergyData = async () => {
+
+// 璁″垝閲忔暟鎹�
+const loadPlannedData = async () => {
try {
- const res = await request({
- url: '/deviceInteraction/energy/consumption/chartEnergy',
- method: 'post'
- })
+ const res = await request.post('/deviceInteraction/plannedAmount/chartPlanned', {
+ dayCount: 30 // 纭繚璇锋眰30澶╃殑鏁版嵁
+ });
if (res.code === 200) {
- console.log('鑳借�楁暟鎹姞杞芥垚鍔�')
- // 鏆傛椂涓嶅鐞嗚兘鑰楁暟鎹�
+ plannedData.value = res.data;
+ updateOptionPlanned();
}
} catch (error) {
- console.error('鑾峰彇鑳借�楁暟鎹け璐�:', error)
+ console.error('鑾峰彇璁″垝閲忔暟鎹け璐�:', error);
}
}
+
// 鍗曞皬鏃朵骇閲忔暟鎹�
const loadYieldData = async () => {
@@ -105,10 +107,10 @@
}
}
+const plannedData = ref([]) // 璁″垝閲忔暟鎹�
const yieldData = ref([]) // 鍗曞皬鏃朵骇閲忔暟鎹�
const utilizationData = ref([]) // 鍒╃敤鐜囨暟鎹�
const quantityData = ref([]) // 鍦ㄥ埗閲忔暟鎹�
-
const notCompleteData = ref([]) // 瀹屾暣鏁版嵁闆�
const displayedData = ref([]) // 褰撳墠鏄剧ず鐨勬暟鎹泦
@@ -136,28 +138,277 @@
}
}
+// 鍦� setup 涓畾涔� draw 鏂规硶
+const draw = (name, Option) => {
+ const chart = echarts.init(document.getElementById(name))
+ chart.setOption(Option)
+ charts.push(chart)
+}
-const updateOptionYield = () => {
- // 鎸夋棩鏈熸帓搴忓苟澶勭悊鏁版嵁
- const sortedData = [...yieldData.value].sort((a, b) =>
- new Date(a.recordTime) - new Date(b.recordTime)
- );
-
- // 鐢熸垚鏈�杩�30澶╃殑鏃ユ湡
+// 杈呭姪鍑芥暟锛氱敓鎴愬綋鍓嶆湀浠界殑鏃ユ湡鏁扮粍
+const generateMonthDates = () => {
const today = new Date();
+ const currentYear = today.getFullYear();
+ const currentMonth = today.getMonth();
+
+ // 鑾峰彇褰撴湀鐨勫ぉ鏁�
+ const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
+
+ // 鐢熸垚鏃ユ湡鏁扮粍
const dates = [];
- for (let i = 29; i >= 0; i--) {
- const date = new Date();
- date.setDate(today.getDate() - i);
- // 纭繚骞存湀鏃ユ牸寮忓畬鏁�
- const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+ for (let i = 1; i <= daysInMonth; i++) {
+ const date = new Date(currentYear, currentMonth, i);
+ const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${i}`;
dates.push(formattedDate);
}
- // 鍒嗙涓�绾垮拰浜岀嚎鏁版嵁
- const line1Data = Array(30).fill(0);
- const line2Data = Array(30).fill(0);
+ return { dates, daysInMonth };
+}
+
+const updateOptionPlanned = () => {
+ // 鎸夋棩鏈熸帓搴忓苟澶勭悊鏁版嵁
+ const sortedData = [...plannedData.value].sort((a, b) =>
+ new Date(a.recordTime) - new Date(b.recordTime)
+ );
+ // 鑾峰彇褰撳墠鏃ユ湡
+ const today = new Date();
+ const currentYear = today.getFullYear();
+ const currentMonth = today.getMonth();
+
+ // 鑾峰彇褰撴湀鍚嶇О
+ const monthNames = ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'];
+ const currentMonthName = monthNames[currentMonth];
+
+ // 鑾峰彇褰撴湀鐨勭涓�澶╁拰鏈�鍚庝竴澶�
+ const firstDayOfMonth = new Date(currentYear, currentMonth, 1);
+ const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0);
+
+ // 鐢熸垚褰撴湀鎵�鏈夋棩鏈熺殑鏁扮粍
+ const dates = [];
+ for (let d = new Date(firstDayOfMonth); d <= lastDayOfMonth; d.setDate(d.getDate() + 1)) {
+ dates.push(`${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`);
+ }
+ const daysInMonth = dates.length;
+
+ // 鍒嗙骞虫柟鍜岀墖鏁版暟鎹�
+ const squareData = Array(daysInMonth).fill(0);
+ const pieceData = Array(daysInMonth).fill(0);
+
+ // 鐢ㄤ簬璁＄畻鎬昏
+ let totalSquare = 0;
+ let totalPieces = 0;
+
+ // 鏍规嵁API杩斿洖鐨勬暟鎹粨鏋勮繘琛屽垎缁勫鐞�
+ sortedData.forEach(item => {
+ const date = new Date(item.recordTime);
+ const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+ const dateIndex = dates.indexOf(formattedDate);
+ if (dateIndex !== -1) {
+ // 鏍规嵁type瀛楁鍖哄垎骞虫柟鍜岀墖鏁�
+ if (item.type === '骞虫柟') {
+ squareData[dateIndex] = item.value;
+ totalSquare += item.value || 0;
+ } else if (item.type === '鐗囨暟') {
+ pieceData[dateIndex] = item.value;
+ totalPieces += item.value || 0;
+ }
+ }
+ });
+
+ // 鏇存柊鍙充晶缁熻鏁版嵁
+ const textDay = document.getElementById('textDay');
+ const textprice = document.getElementById('textprice');
+ const textarea = document.getElementById('textarea');
+
+ if (textDay && textprice && textarea) {
+ // 鏍煎紡鍖栨棩鏈熸樉绀�
+ const formatDate = (date) => {
+ return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+ };
+
+ textDay.innerHTML = "鏃ユ湡锛�<br>" + formatDate(firstDayOfMonth) + " - " + formatDate(lastDayOfMonth);
+ textprice.innerHTML = "鐗囨暟锛�" + Math.floor(totalPieces);
+ textarea.innerHTML = "骞虫柟鏁帮細" + Math.floor(totalSquare);
+ }
+
+ // 璁″垝閲忓浘琛ㄩ厤缃�
+ const OptionDayMode = {
+ title: {
+ text: `${currentMonthName}瀹屾垚閲廯,
+ textStyle: {
+ fontSize: 20,
+ fontWeight: 'bold',
+ color: 'white'
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ label: {
+ fontSize: 16,
+ color: 'white'
+ }
+ }
+ },
+ legend: {
+ data: ['骞虫柟', '鐗囨暟'],
+ icon: 'roundRect',
+ // x:'left',
+ // y:'center',
+ // orient: 'vertical',
+ textStyle: {
+ fontSize: 20,
+ fontWeight: 'bold',
+ color: 'white',
+ formatter: function (name) {
+ return '{vertical|' + name.split('').join('\n') + '}';
+ }
+ }
+ },
+ grid: [
+ {
+ left: '3%',
+ right: '3%',
+ top: '15%',
+ height: '35%',
+ containLabel: true
+ },
+ {
+ left: '3%',
+ right: '3%',
+ top: '55%',
+ height: '35%',
+ containLabel: true
+ }
+ ],
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ data: dates,
+ gridIndex: 0,
+ axisLabel: {
+ show: false
+ }
+ },
+ {
+ type: 'category',
+ boundaryGap: false,
+ data: dates,
+ gridIndex: 1,
+ axisLabel: {
+ fontSize: 20,
+ color: 'white',
+ interval: 'auto',
+ formatter: (value, index) => {
+ if (value.includes('-')) {
+ if (index === 0) {
+ //return value.slice(2);
+ }
+ return value.split('-').slice(2).join('-');
+ }
+ return value;
+ }
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ gridIndex: 0,
+ axisLabel: {
+ fontSize: 20,
+ formatter: '{value} ',
+ color: 'white',
+ show: false
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ {
+ type: 'value',
+ gridIndex: 1,
+ axisLabel: {
+ fontSize: 20,
+ formatter: '{value} ',
+ color: 'white',
+ show: false
+ },
+ splitLine: {
+ show: false
+ }
+ }
+ ],
+ series: [
+ {
+ name: '骞虫柟',
+ type: 'line',
+ xAxisIndex: 0,
+ yAxisIndex: 0,
+ lineStyle: {
+ width: 4,
+ color: '#000000'
+ },
+ itemStyle: {
+ color: '#000000'
+ },
+ label: {
+ show: true,
+ fontSize: 20,
+ formatter: (params) => {
+ return params.value ? Math.floor(Number(params.value)) : '0';
+ },
+ color: 'white'
+ },
+ data: squareData
+ },
+ {
+ name: '鐗囨暟',
+ type: 'line',
+ xAxisIndex: 1,
+ yAxisIndex: 1,
+ connectNulls: false,
+ lineStyle: {
+ width: 4,
+ color: 'white'
+ },
+ itemStyle: {
+ color: 'white'
+ },
+ label: {
+ show: true,
+ fontSize: 20,
+ color: 'white'
+ },
+ data: pieceData
+ }
+ ]
+ };
+
+ // 缁樺埗鍥捐〃
+ const chartDom = document.getElementById('drawLineChart_day51');
+ if (chartDom) {
+ const chart = echarts.init(chartDom);
+ chart.setOption(OptionDayMode);
+ charts.push(chart);
+ }
+}
+
+const updateOptionYield = () => {
+ // 鎸夋棩鏈熸帓搴忓苟澶勭悊鏁版嵁
+ const sortedData = [...yieldData.value].sort((a, b) =>
+ new Date(a.recordTime) - new Date(b.recordTime)
+ );
+
+ // 鑾峰彇褰撴湀鏃ユ湡鏁扮粍
+ const { dates, daysInMonth } = generateMonthDates();
+
+ // 鍒嗙涓�绾垮拰浜岀嚎鏁版嵁
+ const line1Data = Array(daysInMonth).fill(0);
+ const line2Data = Array(daysInMonth).fill(0);
+
// 涓烘瘡涓棩鏈熷噯澶囨暟鎹�
sortedData.forEach(item => {
const date = new Date(item.recordTime);
@@ -177,7 +428,7 @@
title: {
text: '鍗曞皬鏃朵骇閲�',
textStyle: {
- fontSize: 25,
+ fontSize: 20,
fontWeight: 'bold',
color: 'white'
}
@@ -190,21 +441,25 @@
},
legend: {
data: ['涓�绾�', '浜岀嚎'],
+ icon: 'roundRect',
+ x: 'left',
+ y: 'center',
+ orient: 'vertical',
textStyle: {
fontSize: 20,
fontWeight: 'bold',
- color: 'white'
+ color: 'white',
}
},
grid: [{
- left: '3%',
- right: '4%',
+ left: '5%',
+ right: '1%',
top: '15%',
- height: '35%',
+ height: '30%',
containLabel: true
}, {
- left: '3%',
- right: '4%',
+ left: '5%',
+ right: '1%',
top: '55%',
height: '35%',
containLabel: true
@@ -227,16 +482,16 @@
axisLabel: {
fontSize: 20,
color: 'white',
- interval: 'auto',
+ interval: 0, // 璁剧疆涓� 0 琛ㄧず鏄剧ず鎵�鏈夋爣绛�
formatter: (value, index) => {
// 濡傛灉鏄棩鏈熸牸寮�
if (value.includes('-')) {
// 瀵圭涓�涓棩鏈熸樉绀哄畬鏁村勾鏈堟棩
if (index === 0) {
- return value; // 杩斿洖瀹屾暣鏃ユ湡 (渚嬪: 2024-03-21)
+ //return value.slice(2); // 杩斿洖瀹屾暣鏃ユ湡 (渚嬪: 2024-03-21)
}
// 鍏朵粬鏃ユ湡鍙樉绀烘湀-鏃�
- return value.split('-').slice(1).join('-'); // (渚嬪: 03-21)
+ return value.split('-').slice(2).join('-'); // (渚嬪: 03-21)
}
return value;
}
@@ -250,11 +505,11 @@
axisLabel: {
fontSize: 20,
color: 'white',
- show:false
+ show: false
},
splitLine: {
show: false // 闅愯棌妯嚎
- }
+ }
},
{
type: 'value',
@@ -262,11 +517,11 @@
axisLabel: {
fontSize: 20,
color: 'white',
- show:false
+ show: false
},
splitLine: {
show: false // 闅愯棌妯嚎
- }
+ }
}
],
series: [
@@ -277,10 +532,10 @@
yAxisIndex: 0,
lineStyle: {
width: 4,
- color: '#91cc75' // 璁剧疆涓�绾块鑹�
+ color: '#000000' // 璁剧疆涓�绾块鑹�
},
itemStyle: {
- color: '#91cc75'
+ color: '#000000'
},
emphasis: {
focus: 'series'
@@ -288,7 +543,7 @@
data: line1Data,
label: {
show: true,
- fontSize: 15,
+ fontSize: 20,
color: 'white'
}
},
@@ -299,10 +554,10 @@
yAxisIndex: 1,
lineStyle: {
width: 4,
- color: '#5470c6' // 璁剧疆浜岀嚎棰滆壊
+ color: 'white' // 璁剧疆浜岀嚎棰滆壊
},
itemStyle: {
- color: '#5470c6'
+ color: 'white'
},
emphasis: {
focus: 'series'
@@ -310,49 +565,44 @@
data: line2Data,
label: {
show: true,
- fontSize: 15,
+ fontSize: 20,
color: 'white'
}
}
]
};
- const chart = echarts.init(document.getElementById('drawLineChart_yield'));
- chart.setOption(OptionYield);
- charts.push(chart);
+ const chartDom = document.getElementById('drawLineChart_yield');
+ if (chartDom) {
+ const chart = echarts.init(chartDom);
+ chart.setOption(OptionYield);
+ charts.push(chart);
+ }
}
const updateOptionUtilization = () => {
// 鎸夋棩鏈熸帓搴忓苟澶勭悊鏁版嵁
- const sortedData = [...utilizationData.value].sort((a, b) =>
+ const sortedData = [...utilizationData.value].sort((a, b) =>
new Date(a.recordTime || a.recordDate) - new Date(b.recordTime || b.recordDate)
);
-
- // 鐢熸垚鏈�杩�30澶╃殑鏃ユ湡
- const today = new Date();
- const dates = [];
- for (let i = 29; i >= 0; i--) {
- const date = new Date();
- date.setDate(today.getDate() - i);
- // 纭繚骞存湀鏃ユ牸寮忓畬鏁�
- const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
- dates.push(formattedDate);
- }
-
- // 鍒嗙涓�绾垮拰浜岀嚎鏁版嵁
- const line1Data = Array(30).fill(0);
- const line2Data = Array(30).fill(0);
-
+
+ // 鑾峰彇褰撴湀鏃ユ湡鏁扮粍
+ const { dates, daysInMonth } = generateMonthDates();
+
+ // 鍒嗙鏍囧噯鍜屽畾鍒舵暟鎹�
+ const line1Data = Array(daysInMonth).fill(0);
+ const line2Data = Array(daysInMonth).fill(0);
+
// 涓烘瘡涓棩鏈熷噯澶囨暟鎹�
sortedData.forEach(item => {
const date = new Date(item.recordTime || item.recordDate);
const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
const dateIndex = dates.indexOf(formattedDate);
if (dateIndex !== -1) {
- if (item.lineNo === '涓�绾�') {
- line1Data[dateIndex] = item.utilizationRate;
- } else if (item.lineNo === '浜岀嚎') {
- line2Data[dateIndex] = item.utilizationRate;
+ if (item.lineNo === '鏍囧噯') {
+ line1Data[dateIndex] = item.utilizationRate || null;
+ } else if (item.lineNo === '瀹氬埗') {
+ line2Data[dateIndex] = item.utilizationRate || null;
}
}
});
@@ -362,7 +612,7 @@
title: {
text: '鍒╃敤鐜�',
textStyle: {
- fontSize: 25,
+ fontSize: 20,
fontWeight: 'bold',
color: 'white'
}
@@ -374,7 +624,11 @@
}
},
legend: {
- data: ['涓�绾�', '浜岀嚎'],
+ data: ['鏍囧噯', '瀹氬埗'],
+ icon: 'roundRect',
+ x: 'left',
+ y: 'center',
+ orient:'vertical',
textStyle: {
fontSize: 20,
fontWeight: 'bold',
@@ -382,14 +636,14 @@
}
},
grid: [{
- left: '3%',
- right: '4%',
+ left: '5%',
+ right: '1%',
top: '15%',
height: '35%',
containLabel: true
}, {
- left: '3%',
- right: '4%',
+ left: '5%',
+ right: '1%',
top: '55%',
height: '35%',
containLabel: true
@@ -412,16 +666,16 @@
axisLabel: {
fontSize: 20,
color: 'white',
- interval: 'auto',
+ interval: 0, // 璁剧疆涓� 0 琛ㄧず鏄剧ず鎵�鏈夋爣绛�
formatter: (value, index) => {
// 濡傛灉鏄棩鏈熸牸寮�
if (value.includes('-')) {
// 瀵圭涓�涓棩鏈熸樉绀哄畬鏁村勾鏈堟棩
if (index === 0) {
- return value; // 杩斿洖瀹屾暣鏃ユ湡 (渚嬪: 2024-03-21)
+ //return value.slice(2); // 杩斿洖瀹屾暣鏃ユ湡 (渚嬪: 2024-03-21)
}
// 鍏朵粬鏃ユ湡鍙樉绀烘湀-鏃�
- return value.split('-').slice(1).join('-'); // (渚嬪: 03-21)
+ return value.split('-').slice(2).join('-'); // (渚嬪: 03-21)
}
return value;
}
@@ -432,42 +686,46 @@
{
type: 'value',
gridIndex: 0,
+ // min: 96, // 璁剧疆鏈�灏忓�间负96%
+ // max: 98,
axisLabel: {
fontSize: 20,
color: 'white',
formatter: '{value}%',
- show:false
+ show: false
},
splitLine: {
show: false // 闅愯棌妯嚎
- }
+ }
},
{
type: 'value',
gridIndex: 1,
+ // min: 96, // 璁剧疆鏈�灏忓�间负96%
+ // max: 98,
axisLabel: {
fontSize: 20,
color: 'white',
formatter: '{value}%',
- show:false
+ show: false
},
splitLine: {
show: false // 闅愯棌妯嚎
- }
+ }
}
],
series: [
{
- name: '涓�绾�',
+ name: '鏍囧噯',
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
lineStyle: {
width: 4,
- color: '#91cc75' // 璁剧疆涓�绾块鑹�
+ color: '#000000'
},
itemStyle: {
- color: '#91cc75'
+ color: '#000000'
},
emphasis: {
focus: 'series'
@@ -475,22 +733,22 @@
data: line1Data,
label: {
show: true,
- fontSize: 15,
+ fontSize: 20,
color: 'white',
formatter: '{c}%'
}
},
{
- name: '浜岀嚎',
+ name: '瀹氬埗',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
lineStyle: {
width: 4,
- color: '#5470c6' // 璁剧疆浜岀嚎棰滆壊
+ color: 'white'
},
itemStyle: {
- color: '#5470c6'
+ color: 'white'
},
emphasis: {
focus: 'series'
@@ -498,41 +756,36 @@
data: line2Data,
label: {
show: true,
- fontSize: 15,
+ fontSize: 20,
color: 'white',
formatter: '{c}%'
}
}
]
};
-
- const chart = echarts.init(document.getElementById('drawLineChart_utilization'));
- chart.setOption(OptionUtilization);
- charts.push(chart);
+
+ const chartDom = document.getElementById('drawLineChart_utilization');
+ if (chartDom) {
+ const chart = echarts.init(chartDom);
+ chart.setOption(OptionUtilization);
+ charts.push(chart);
+ }
}
const updateOptionQuantity = () => {
// 鎸夋棩鏈熸帓搴忓苟澶勭悊鏁版嵁
- const sortedData = [...quantityData.value].sort((a, b) =>
+ const sortedData = [...quantityData.value].sort((a, b) =>
new Date(a.recordTime || a.recordDate) - new Date(b.recordTime || b.recordDate)
);
-
- // 鐢熸垚鏈�杩�30澶╃殑鏃ユ湡
- const today = new Date();
- const dates = [];
- for (let i = 29; i >= 0; i--) {
- const date = new Date();
- date.setDate(today.getDate() - i);
- // 纭繚骞存湀鏃ユ牸寮忓畬鏁�
- const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
- dates.push(formattedDate);
- }
-
+
+ // 鑾峰彇褰撴湀鏃ユ湡鏁扮粍
+ const { dates, daysInMonth } = generateMonthDates();
+
// 鍒嗙鍚勫簱浣嶆暟鎹�
- const semiData = Array(30).fill(0);
- const data7014 = Array(30).fill(0);
- const data7016 = Array(30).fill(0);
-
+ const semiData = Array(daysInMonth).fill(0);
+ const data7014 = Array(daysInMonth).fill(0);
+ const data7016 = Array(daysInMonth).fill(0);
+
// 涓烘瘡涓棩鏈熷噯澶囨暟鎹�
sortedData.forEach(item => {
const date = new Date(item.recordTime || item.recordDate);
@@ -541,9 +794,9 @@
if (dateIndex !== -1) {
if (item.locationCode === '鍗婃垚鍝�') {
semiData[dateIndex] = item.quantity;
- } else if (item.locationCode === '7014搴撲綅') {
+ } else if (item.locationCode === '7014') {
data7014[dateIndex] = item.quantity;
- } else if (item.locationCode === '7016搴撲綅') {
+ } else if (item.locationCode === '7016') {
data7016[dateIndex] = item.quantity;
}
}
@@ -554,7 +807,7 @@
title: {
text: '鍦ㄥ埗閲�',
textStyle: {
- fontSize: 25,
+ fontSize: 20,
fontWeight: 'bold',
color: 'white'
}
@@ -566,7 +819,11 @@
}
},
legend: {
- data: ['鍗婃垚鍝�', '7014搴撲綅', '7016搴撲綅'],
+ data: ['鍗婃垚鍝�', '7014', '7016'],
+ icon: 'roundRect',
+ x: 'left',
+ y: 'center',
+ orient:'vertical',
textStyle: {
fontSize: 20,
fontWeight: 'bold',
@@ -575,22 +832,22 @@
},
grid: [
{
- left: '3%',
- right: '4%',
+ left: '5%',
+ right: '1%',
top: '15%',
height: '20%',
containLabel: true
- },
+ },
{
- left: '3%',
- right: '4%',
+ left: '5%',
+ right: '1%',
top: '45%',
height: '20%',
containLabel: true
},
{
- left: '3%',
- right: '4%',
+ left: '5%',
+ right: '1%',
top: '75%',
height: '25%',
containLabel: true
@@ -631,16 +888,16 @@
axisLabel: {
fontSize: 20,
color: 'white',
- interval: 'auto',
+ interval: 0, // 璁剧疆涓� 0 琛ㄧず鏄剧ず鎵�鏈夋爣绛�
formatter: (value, index) => {
// 濡傛灉鏄棩鏈熸牸寮�
if (value.includes('-')) {
// 瀵圭涓�涓棩鏈熸樉绀哄畬鏁村勾鏈堟棩
if (index === 0) {
- return value; // 杩斿洖瀹屾暣鏃ユ湡 (渚嬪: 2024-03-21)
+ //return value.slice(2); // 杩斿洖瀹屾暣鏃ユ湡 (渚嬪: 2024-03-21)
}
// 鍏朵粬鏃ユ湡鍙樉绀烘湀-鏃�
- return value.split('-').slice(1).join('-'); // (渚嬪: 03-21)
+ return value.split('-').slice(2).join('-'); // (渚嬪: 03-21)
}
return value;
}
@@ -707,21 +964,21 @@
data: semiData,
label: {
show: true,
- fontSize: 14,
+ fontSize: 20,
color: 'white'
}
},
{
- name: '7014搴撲綅',
+ name: '7014',
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
lineStyle: {
width: 4,
- color: 'red' // 璁剧疆棰滆壊
+ color: '#000000' // 璁剧疆棰滆壊
},
itemStyle: {
- color: 'red'
+ color: '#000000'
},
emphasis: {
focus: 'series'
@@ -729,21 +986,21 @@
data: data7014,
label: {
show: true,
- fontSize: 14,
+ fontSize: 20,
color: 'white'
}
},
{
- name: '7016搴撲綅',
+ name: '7016',
type: 'line',
xAxisIndex: 2,
yAxisIndex: 2,
lineStyle: {
width: 4,
- color: '#fac858' // 璁剧疆棰滆壊
+ color: 'white' // 璁剧疆棰滆壊
},
itemStyle: {
- color: '#fac858'
+ color: 'white'
},
emphasis: {
focus: 'series'
@@ -751,36 +1008,44 @@
data: data7016,
label: {
show: true,
- fontSize: 14,
+ fontSize: 20,
color: 'white'
}
}
]
};
-
- const chart = echarts.init(document.getElementById('drawLineChart_quantity'));
- chart.setOption(OptionQuantity);
- charts.push(chart);
+
+ const chartDom = document.getElementById('drawLineChart_quantity');
+ if (chartDom) {
+ const chart = echarts.init(chartDom);
+ chart.setOption(OptionQuantity);
+ charts.push(chart);
+ }
}
onMounted(() => {
setScale()
window.addEventListener('resize', handleResize)
- loadEnergyData();
- loadNotCompleteData();
- loadYieldData();
- loadUtilizationData();
- loadInventoryData();
-
+
+ // 纭繚DOM鍔犺浇瀹屾垚鍚庡啀鍒濆鍖栧浘琛�
+ nextTick(() => {
+ loadNotCompleteData();
+ loadYieldData();
+ loadUtilizationData();
+ loadInventoryData();
+ loadPlannedData();
+ });
+
// 璁剧疆瀹氭椂鍒锋柊
const refreshInterval = setInterval(() => {
loadYieldData();
loadUtilizationData();
loadInventoryData();
+ loadPlannedData();
console.log('鏁版嵁宸插埛鏂�');
- }, 60000); // 姣忓垎閽熷埛鏂颁竴娆�
-
+ }, 30000); // 姣忓垎閽熷埛鏂颁竴娆�
+
onUnmounted(() => {
clearInterval(refreshInterval);
});
@@ -815,11 +1080,10 @@
<div
style="font-weight: 700;font-size: 20px;height: 30px;line-height: 30px;text-align: center;border: 1px solid #ccc;">
鎬昏鍒掗噺-鐗囨暟銆佸钩鏂�</div>
- <div id="textDay" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">鏃ユ湡锛�2023-03-01 -
- 2023-03-01</div>
- <br>
- <div id="textprice" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">鐗囨暟锛�25</div>
- <div id="textarea" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">骞虫柟鏁帮細2999</div>
+ <div id="textDay" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">鏃ユ湡锛�</div>
+ <br>
+ <div id="textprice" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">鐗囨暟锛�</div>
+ <div id="textarea" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">骞虫柟鏁帮細</div>
</div>
</div>
@@ -847,187 +1111,6 @@
<script>
export default {
mounted() {
- const OptionDayMode = {
- title: {
- text: '璁″垝閲忕湅鏉�',
- textStyle: {
- fontSize: 25,
- fontWeight: 'bold',
- color: 'white' // 璁剧疆鏍囬棰滆壊涓虹櫧鑹�
- }
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- label: {
- fontSize: 16,
- color: 'white' // 璁剧疆鎻愮ず妗嗘枃瀛楅鑹蹭负鐧借壊
- }
- }
- },
- legend: {
- textStyle: {
- fontSize: 20,
- fontWeight: 'bold',
- color: 'white' // 璁剧疆鍥句緥鏂囧瓧棰滆壊涓虹櫧鑹�
- }
- },
- toolbox: {
- show: true,
- feature: {
- dataZoom: {
- yAxisIndex: 'none'
- },
- dataView: { readOnly: false },
- magicType: { type: ['line', 'bar'] },
- restore: {},
- saveAsImage: {}
- },
- iconStyle: {
- color: 'white' // 璁剧疆宸ュ叿妗嗗浘鏍囬鑹蹭负鐧借壊
- }
- },
- grid: [
- {
- left: '3%',
- right: '4%',
- top: '15%',
- height: '35%',
- containLabel: true
- },
- {
- left: '3%',
- right: '4%',
- top: '55%',
- height: '35%',
- containLabel: true
- }
- ],
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- data: [],
- gridIndex: 0,
- axisLabel: {
- show: false,
- fontSize: 20,
- color: 'white'
- },
- splitLine: {
- show: false // 闅愯棌妯嚎
- }
- },
- {
- type: 'category',
- boundaryGap: false,
- data: [],
- gridIndex: 1,
- axisLabel: {
- fontSize: 20,
- color: 'white',
- interval: 'auto',
- formatter: (value, index) => {
- // 濡傛灉鏄棩鏈熸牸寮�
- if (value.includes('-')) {
- // 瀵圭涓�涓棩鏈熸樉绀哄畬鏁村勾鏈堟棩
- if (index === 0) {
- return value; // 杩斿洖瀹屾暣鏃ユ湡 (渚嬪: 2024-03-21)
- }
- // 鍏朵粬鏃ユ湡鍙樉绀烘湀-鏃�
- return value.split('-').slice(1).join('-'); // (渚嬪: 03-21)
- }
- return value;
- }
- },
- splitLine: {
- show: false // 闅愯棌妯嚎
- }
- }
- ],
- yAxis: [
- {
- type: 'value',
- gridIndex: 0,
- axisLabel: {
- fontSize: 20,
- formatter: '{value} ',
- color: 'white',
- show: false
- },
- splitLine: {
- show: false // 闅愯棌妯嚎
- },
- nameTextStyle: {
- fontSize: 20,
- color: 'white' // 璁剧疆 y 杞村悕绉伴鑹蹭负鐧借壊
- }
- },
- {
- type: 'value',
- gridIndex: 1,
- axisLabel: {
- fontSize: 20,
- formatter: '{value} ',
- color: 'white',
- show: false
- },
- splitLine: {
- show: false // 闅愯棌妯嚎
- },
- nameTextStyle: {
- fontSize: 20,
- color: 'white' // 璁剧疆 y 杞村悕绉伴鑹蹭负鐧借壊
- }
- }
- ],
- series: [
- {
- name: '骞虫柟',
- type: 'line',
- xAxisIndex: 0,
- yAxisIndex: 0,
- barWidth: '40%',
- barGap: '10%',
- lineStyle: {
- width: 4,
- color: '#91cc75'
- },
- itemStyle: {
- color: '#91cc75'
- },
- label: {
- show: true,
- fontSize: 16,
- formatter: (params) => {
- // 淇濈暀涓や綅灏忔暟
- return params.value ? Number(params.value).toFixed(2) : '0.00';
- },
- color: 'white' // 璁剧疆鏁版嵁鏍囩棰滆壊涓虹櫧鑹�
- }
- },
- {
- name: '鐗囨暟',
- type: 'line',
- xAxisIndex: 1,
- yAxisIndex: 1,
- barWidth: '40%',
- barGap: '10%',
- lineStyle: {
- width: 4,
- color: '#5470c6'
- },
- itemStyle: {
- color: '#5470c6'
- },
- label: {
- show: true,
- fontSize: 16,
- color: 'white' // 璁剧疆鏁版嵁鏍囩棰滆壊涓虹櫧鑹�
- }
- }
- ]
- };
const OptionYear = {
tooltip: {
@@ -1041,10 +1124,12 @@
}
},
legend: {
+ data: ['璁″垝閲�', '涓�绾�', '浜岀嚎'],
+ icon: 'roundRect',
textStyle: {
fontSize: 20,
fontWeight: 'bold',
- color: 'white' // 璁剧疆鍥句緥鏂囧瓧棰滆壊涓虹櫧鑹�
+ color: 'white'
}
},
toolbox: {
@@ -1142,6 +1227,9 @@
type: 'bar',
barWidth: '30%',
barGap: '10%',
+ itemStyle: {
+ color: '#4a86e8'
+ },
label: {
show: true,
fontSize: 16,
@@ -1152,20 +1240,23 @@
}
]
};
+
+
// 璇锋眰褰撴棩浜ч噺
- request.post('/deviceInteraction/primitiveTask/findDailyOutput',
- {
- "dayCount": 1
- }).then((res) => {
- if (res.code == 200) {
- const modeOptions = res.data;
- this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
- // this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
- // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
- } else {
- console.error('璇锋眰褰撴棩浜ч噺鏁版嵁澶辫触:', error);
- }
- });
+ // request.post('/deviceInteraction/primitiveTask/findDailyOutput',
+ // {
+ // "dayCount": 1
+ // }).then((res) => {
+ // if (res.code == 200) {
+ // const modeOptions = res.data;
+ // console.log("鑾峰彇褰撴棩浜ч噺",modeOptions);
+ // this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
+ // // this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
+ // // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
+ // } else {
+ // console.error('璇锋眰褰撴棩浜ч噺鏁版嵁澶辫触:', error);
+ // }
+ // });
//璇锋眰鏃ヤ骇閲�-鏈�
request.post('/deviceInteraction/primitiveTask/findDailyOutput',
@@ -1174,44 +1265,46 @@
}).then((res) => {
if (res.code == 200) {
const modeOptions = res.data;
- //this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
- this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
+ const modeOptions2 = [res.data[res.data.length - 1]];
+ // this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
+ //this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
// this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
+ this.drawDay('drawLineChart_day11', OptionYear, modeOptions2);
} else {
console.error('璇锋眰鏃ヤ骇閲�-鏈堟暟鎹け璐�:', error);
}
});
//璇锋眰璁″垝閲�
- request.post('/deviceInteraction/primitiveTask/findPlannedQuantity',
- {
- "dayCount": 30
- }).then((res) => {
- if (res.code == 200) {
- const modeOptions = res.data;
- this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
- let textDay = document.getElementById('textDay');
- let textprice = document.getElementById('textprice');
- let textarea = document.getElementById('textarea');
+ // request.post('/deviceInteraction/primitiveTask/findPlannedQuantity',
+ // {
+ // "dayCount": 30
+ // }).then((res) => {
+ // if (res.code == 200) {
+ // const modeOptions = res.data;
+ // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
+ // let textDay = document.getElementById('textDay');
+ // let textprice = document.getElementById('textprice');
+ // let textarea = document.getElementById('textarea');
- let y_pingfang = res.data.map(v => { return v.area_sum });
- let y_pianshu = res.data.map(v => { return v.task_quantity_sum });
- let y_pingfang_sum = 0;
- let y_pianshu_sum = 0;
- for (let i = 0; i < y_pingfang.length; i++) {
- y_pingfang_sum += y_pingfang[i];
- }
- for (let i = 0; i < y_pianshu.length; i++) {
- y_pianshu_sum += y_pianshu[i];
- }
+ // let y_pingfang = res.data.map(v => { return v.area_sum });
+ // let y_pianshu = res.data.map(v => { return v.task_quantity_sum });
+ // let y_pingfang_sum = 0;
+ // let y_pianshu_sum = 0;
+ // for (let i = 0; i < y_pingfang.length; i++) {
+ // y_pingfang_sum += y_pingfang[i];
+ // }
+ // for (let i = 0; i < y_pianshu.length; i++) {
+ // y_pianshu_sum += y_pianshu[i];
+ // }
- textDay.innerHTML = "鏃ユ湡锛�" + "<br>" + res.data[0].CreateDate + " - " + res.data[res.data.length - 1].CreateDate;
- textprice.innerHTML = "鐗囨暟锛�" + y_pianshu_sum;
- textarea.innerHTML = "骞虫柟鏁帮細" + Number(y_pingfang_sum).toFixed(2);
- // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
- } else {
- console.error('璇锋眰璁″垝閲�-鏈堟暟鎹け璐�:', error);
- }
- });
+ // textDay.innerHTML = "鏃ユ湡锛�" + "<br>" + res.data[0].CreateDate + " - " + res.data[res.data.length - 1].CreateDate;
+ // textprice.innerHTML = "鐗囨暟锛�" + y_pianshu_sum;
+ // textarea.innerHTML = "骞虫柟鏁帮細" + Number(y_pingfang_sum).toFixed(2);
+ // // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
+ // } else {
+ // console.error('璇锋眰璁″垝閲�-鏈堟暟鎹け璐�:', error);
+ // }
+ // });
},
methods: {
@@ -1280,8 +1373,8 @@
<style scoped>
.dashboard-container {
position: absolute;
- width: 1920px;
- /* 璁捐绋垮搴� */
+ width: 2218px;
+
background: linear-gradient(to bottom, #001f3f, #0074d9d7);
color: white;
overflow: hidden;
--
Gitblit v1.8.0