看板大屏2修改页面

huang

2025-04-17 3a0087aa5e3eed5d9d7a793a17dc01fd1d6df80c

看板大屏2修改页面

 JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/controller/PlannedAmountController.java

New file
@@ -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);
    }
} 

 JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/entity/PlannedAmount.java

New file
@@ -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;
} 

 JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/mapper/PlannedAmountMapper.java

New file
@@ -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> {
} 

 JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/service/PlannedAmountService.java

New file
@@ -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);
}

 JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/plannedAmount/service/impl/PlannedAmountImpl.java

New file
@@ -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());
            }
        }
    }
} 

 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);
        

 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);
        

 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");
        
        // 如果指定了天数，则查询最近N天的数据，否则查询全部数据
        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);
        }
        
        // 移除了固定limit限制，允许获取全部数据
        
        List<Yield> data = yieldService.list(queryWrapper);
        

 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>

 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,6 +138,263 @@
  }
}

// 在 setup 中定义 draw 方法
const draw = (name, Option) => {
  const chart = echarts.init(document.getElementById(name))
  chart.setOption(Option)
  charts.push(chart)
}

// 辅助函数：生成当前月份的日期数组
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 = 1; i <= daysInMonth; i++) {
    const date = new Date(currentYear, currentMonth, i);
    const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${i}`;
    dates.push(formattedDate);
  }
  
  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 = () => {
  // 按日期排序并处理数据
@@ -143,20 +402,12 @@
    new Date(a.recordTime) - new Date(b.recordTime)
  );
  
  // 生成最近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 line1Data = Array(30).fill(0);
  const line2Data = Array(30).fill(0);
  const line1Data = Array(daysInMonth).fill(0);
  const line2Data = Array(daysInMonth).fill(0);
  
  // 为每个日期准备数据
  sortedData.forEach(item => {
@@ -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;
          }
@@ -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,16 +565,19 @@
        data: line2Data,
        label: {
          show: true,
          fontSize: 15,
          fontSize: 20,
          color: 'white'
        }
      }
    ]
  };

  const chart = echarts.init(document.getElementById('drawLineChart_yield'));
  const chartDom = document.getElementById('drawLineChart_yield');
  if (chartDom) {
    const chart = echarts.init(chartDom);
  chart.setOption(OptionYield);
  charts.push(chart);
  }
}

const updateOptionUtilization = () => {
@@ -328,20 +586,12 @@
    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 line1Data = Array(30).fill(0);
  const line2Data = Array(30).fill(0);
  // 分离标准和定制数据
  const line1Data = Array(daysInMonth).fill(0); 
  const line2Data = Array(daysInMonth).fill(0); 
  
  // 为每个日期准备数据
  sortedData.forEach(item => {
@@ -349,10 +599,10 @@
    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,6 +686,8 @@
      {
        type: 'value',
        gridIndex: 0,
        // min: 96, // 设置最小值为96%
        // max: 98,
        axisLabel: {
          fontSize: 20,
          color: 'white',
@@ -445,6 +701,8 @@
      {
        type: 'value',
        gridIndex: 1,
        // min: 96, // 设置最小值为96%
        // max: 98,
        axisLabel: {
          fontSize: 20,
          color: 'white',
@@ -458,16 +716,16 @@
    ],
    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,7 +756,7 @@
        data: line2Data,
        label: {
          show: true,
          fontSize: 15,
          fontSize: 20,
          color: 'white',
          formatter: '{c}%'
        }
@@ -506,9 +764,12 @@
    ]
  };
  
  const chart = echarts.init(document.getElementById('drawLineChart_utilization'));
  const chartDom = document.getElementById('drawLineChart_utilization');
  if (chartDom) {
    const chart = echarts.init(chartDom);
  chart.setOption(OptionUtilization);
  charts.push(chart);
  }
}

const updateOptionQuantity = () => {
@@ -517,21 +778,13 @@
    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 => {
@@ -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,35 +1008,43 @@
        data: data7016,
        label: {
          show: true,
          fontSize: 14,
          fontSize: 20,
          color: 'white'
        }
      }
    ]
  };
  
  const chart = echarts.init(document.getElementById('drawLineChart_quantity'));
  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();

  // 确保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>
              <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;">片数：25</div>
              <div id="textarea" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">平方数：2999</div>
              <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;
          const modeOptions2 = [res.data[res.data.length - 1]];
          //this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
          this.drawDay('drawLineChart_day31', 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');

          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);
    // request.post('/deviceInteraction/primitiveTask/findPlannedQuantity',
    //   {
    //     "dayCount": 30
    //   }).then((res) => {
    //     if (res.code == 200) {
    //       const modeOptions = res.data;
          // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
        } else {
          console.error('请求计划量-月数据失败:', error);
        }
      });
    //       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];
    //       }

    //       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;