修改看板大屏页面

huang

2025-03-21 f14a5a16f225386c6db72a84352854fa5d4bc141

修改看板大屏页面

 JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/mechanicalMonitor/controller/MechanicalMonitorController.java

@@ -16,7 +16,7 @@

@Api(tags = "设备状态监控")
@RestController
@RequestMapping("/deviceInteraction/mechanicalMonitor")
@RequestMapping("/mechanicalMonitor")
public class MechanicalMonitorController {

    @Autowired

 UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue

@@ -1,5 +1,52 @@
<!--  空白页  -->
<template>
  <div class="dashboard-container">
    <div style="font-weight: 800;font-size: 30px;height: 70px;line-height: 70px;border: 1px solid #ccc;text-align: center;">
      JOOMO配套工厂镜片车间生产看板
    </div>

    <div style="width:100% ;height: 880px;">
      <div style="width:100% ;height: 33.3%;border: 1px solid #ccc;">
        <div id="drawLineChart_day11" style="height: 100%;width: 30%;border: 1px solid #ccc;float: left;">日单达成率-片数</div>
        <div id="drawLineChart_day12" style="height: 100%;width: 30%;max-height: 260px;border: 1px solid #ccc;float: left;">
          <!-- 表格内容详情 -->
          <div style="font-weight: 700;font-size: 20px;height: 30px;line-height: 30px;border: 1px solid #ccc;text-align: center;">当日未完成量</div>
          <el-table
            :data="notCompleteData" stripe
            height="260px"
            :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <!-- <el-table-column type="selection" min-width="30" /> -->
            <el-table-column prop="scanId" :label="$t('glassInfo.scanId')" />
            <el-table-column prop="notComplete" :label="$t('glassInfo.notCompleteCount')" />
            <el-table-column prop="area_sum" :label="$t('glassInfo.notCompleteArea')" :formatter="(row) => {
              // 保留两位小数
              return row.area_sum ? Number(row.area_sum).toFixed(2) : '0.00';
            }" />
          </el-table>
        </div>
        <div id="drawLineChart_day71" style="height: 100%;width: 40%;border: 1px solid #ccc;float: left;">能耗管理-按天显示（手输）
        </div>
      </div>
      <div style="width:100% ;height: 33.3%;border: 1px solid #ccc;">
        <div id="drawLineChart_day31" style="height: 100%;width: 100%;border: 1px solid #ccc;">两线生产对比-片数</div>
      </div>
      <div style="width:100% ;height: 33.3%;border: 1px solid #ccc;">
        <div id="drawLineChart_day51" style="height: 100%;width: 80%;border: 1px solid #ccc;float: left;">计划量-片数、平方</div>
        <div id="drawLineChart_day91" style="height: 100%;width: 20%;float: left;">
          <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="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>
      </div>
    </div>

    <!-- <div style="width:33% ;height: 880px;border: 1px solid #ccc;">
      <div id="drawLineChart_day1" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
      <div id="drawLineChart_day2" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
    </div> -->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
@@ -27,14 +74,12 @@

// 获取未完成数据
const loadNotCompleteData = async () => {

  request.post('/deviceInteraction/primitiveTask/findDayNotCompleteOutput',
      {
        "dayCount": 2
      }).then((res) => {
        if (res.code == 200) {
          notCompleteData.value = res.data;
          
          console.log("未完成"+res.data+"1");
        } else {
          console.error('请求当日产量数据失败:', error);
@@ -45,6 +90,11 @@
const draw = (name, Option) => {
  var myChart = echarts.init(document.getElementById(name));
  myChart.setOption(Option);

  // 添加窗口大小变化的监听
  window.addEventListener('resize', () => {
    myChart.resize();
  });
}

const drawDay = (name, Option) => {
@@ -67,41 +117,86 @@

  const energyoption = {
    title: {
      text: '能耗管理'
      text: '能耗管理',
      textStyle: {
        fontSize: 25,
        fontWeight: 'bold',
        color: 'white' // 设置标题颜色为白色
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
          backgroundColor: '#6a7985',
          fontSize: 16,  // 提示框文字大小
          color: 'white' // 设置提示框文字颜色为白色
        }
      }
    },
    legend: {
      data: ['能耗值']
      data: ['能耗值'],
      textStyle: {
        fontSize: 25,
        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%',
      bottom: '3%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: sortedData.map(item => item.recordDate)
        data: sortedData.map(item => item.recordDate),
        axisLabel: {
          fontSize: 20,
          interval: 'auto',    // 自动计算间隔
          margin: 15,          // 与轴线的距离
          formatter: (value) => {
            // 只显示月-日
            const date = new Date(value);
            return `${date.getMonth() + 1}-${date.getDate()}`;
          },
          color: 'white' // 设置 x 轴标签颜色为白色
        },
        nameTextStyle: {
          fontSize: 20,
          color: 'white' // 设置 x 轴名称颜色为白色
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
        type: 'value',
        axisLabel: {
          fontSize: 20,   // y 轴标签文字大小
          color: 'white' // 设置 y 轴标签颜色为白色
        },
        nameTextStyle: {
          fontSize: 20,   // 坐标轴名称文字大小
          color: 'white' // 设置 y 轴名称颜色为白色
        }
      }
    ],
    series: [
@@ -111,7 +206,10 @@
        areaStyle: {},
        label: {
          show: true,
          position: 'top'
          position: 'top',
          fontSize: 16,  // 数据标签文字大小
          formatter: '{c}',
          color: 'white' // 设置数据标签颜色为白色
        },
        data: sortedData.map(item => item.energyValue)
      }
@@ -131,12 +229,29 @@
  mounted() {
    const OptionDayMode = {
      title: {
        text: '计划量看板'
        text: '计划量看板',
        textStyle: {
          fontSize: 25,
          fontWeight: 'bold',
          color: 'white' // 设置标题颜色为白色
        }
      },
      tooltip: {
        trigger: 'axis'
        trigger: 'axis',
        axisPointer: {
          label: {
            fontSize: 16,
            color: 'white' // 设置提示框文字颜色为白色
          }
        }
      },
      legend: {},
      legend: {
        textStyle: {
          fontSize: 20,
          fontWeight: 'bold',
          color: 'white' // 设置图例文字颜色为白色
        }
      },
      toolbox: {
        show: true,
        feature: {
@@ -147,61 +262,79 @@
          magicType: { type: ['line', 'bar'] },
          restore: {},
          saveAsImage: {}
        },
        iconStyle: {
          color: 'white' // 设置工具框图标颜色为白色
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        axisLabel: {
          fontSize: 20,
          interval: 'auto',
          margin: 15,
          formatter: (value, index) => {
            // 如果是日期格式
            if (value.includes('-')) {
              // 对第一个日期显示完整年月日
              if (index === 0) {
                return value;  // 返回完整日期 (例如: 2024-03-21)
              }
              // 其他日期只显示月-日
              return value.split('-').slice(1).join('-');  // (例如: 03-21)
            }
            return value;
          },
          color: 'white' // 设置 x 轴标签颜色为白色
        },
        nameTextStyle: {
          fontSize: 20,
          color: 'white' // 设置 x 轴名称颜色为白色
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value} '
          fontSize: 20,
          formatter: '{value} ',
          color: 'white' // 设置 y 轴标签颜色为白色
        },
        nameTextStyle: {
          fontSize: 20,
          color: 'white' // 设置 y 轴名称颜色为白色
        }
      },
      series: [
        {
          name: '平方',
          type: 'line',
          data: [10.3, 11.9, 13.9, 19, 12.8, 12, 9],
          markPoint: {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ]
          label: {
            show: true,
            fontSize: 16,
            formatter: (params) => {
              // 保留两位小数
              return params.value ? Number(params.value).toFixed(2) : '0.00';
          },
          markLine: {
            data: [{ type: 'average', name: 'Avg' }]
          }
            color: 'white' // 设置数据标签颜色为白色
          },
          lineStyle: {
            color: 'blue'
          },
        },
        {
          name: '片数',
          type: 'line',
          data: [1, -2, 2, 5, 3, 2, 0],
          markPoint: {
            data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
          },
          markLine: {
            data: [
              { type: 'average', name: 'Avg' },
              [
                {
                  symbol: 'none',
                  x: '90%',
                  yAxis: 'max'
                },
                {
                  symbol: 'circle',
                  label: {
                    position: 'start',
                    formatter: 'Max'
                  },
                  type: 'max',
                  name: '最高点'
                }
              ]
            ]
            show: true,
            fontSize: 16,
            color: 'white' // 设置数据标签颜色为白色
          }
        }
      ]
@@ -210,10 +343,20 @@
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
          type: 'shadow',
          label: {
            fontSize: 16,
            color: 'white' // 设置提示框文字颜色为白色
          }
        }
      },
      legend: {},
      legend: {
        textStyle: {
          fontSize: 20,
          fontWeight: 'bold',
          color: 'white' // 设置图例文字颜色为白色
        }
      },
      toolbox: {
        show: true,
        feature: {
@@ -224,50 +367,78 @@
          magicType: { type: ['line', 'bar'] },
          restore: {},
          saveAsImage: {}
        },
        iconStyle: {
          color: 'white' // 设置工具框图标颜色为白色
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          axisLabel: {
            fontSize: 20,
            interval: 'auto',
            margin: 15,
            formatter: (value, index) => {
              // 如果是日期格式
              if (value.includes('-')) {
                // 对第一个日期显示完整年月日
                if (index === 0) {
                  return value;  // 返回完整日期 (例如: 2024-03-21)
                }
                // 其他日期只显示月-日
                return value.split('-').slice(1).join('-');  // (例如: 03-21)
              }
              return value;
            },
            color: 'white' // 设置 x 轴标签颜色为白色
          },
          nameTextStyle: {
            fontSize: 20,
            color: 'white' // 设置 x 轴名称颜色为白色
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
          type: 'value',
          axisLabel: {
            fontSize: 20,
            color: 'white' // 设置 y 轴标签颜色为白色
          },
          nameTextStyle: {
            fontSize: 20,
            color: 'white' // 设置 y 轴名称颜色为白色
          }
        }
      ],
      series: [
        {
          name: '计划量',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          label: {
            show: true,
            formatter: (params) => params.value + '片'
          },
          data: [1000, 1000, 1000, 1000, 1000, 1000, 1000]
            fontSize: 16,
            formatter: (params) => params.value + '片',
            color: 'white' // 设置数据标签颜色为白色
          }
        },
        {
          name: '一线',
          type: 'bar',
          stack: 'Search Engine',
          emphasis: {
            focus: 'series'
          },
          label: {
            show: true,
            formatter: (params) => params.value + '片'
            fontSize: 16,
            formatter: (params) => params.value + '片',
            color: 'white' // 设置数据标签颜色为白色
          },
          data: [400, 450, 500, 490, 460, 380, 210]
        },
        {
          name: '二线',
@@ -275,12 +446,10 @@
          stack: 'Search Engine',
          label: {
            show: true,
            formatter: (params) => params.value + '片'
            fontSize: 16,
            formatter: (params) => params.value + '片',
            color: 'white' // 设置数据标签颜色为白色
          },
          emphasis: {
            focus: 'series'
          },
          data: [500, 400, 300, 400, 400, 290, 700]
        }
      ]
    };
@@ -338,7 +507,7 @@
        
          textDay.innerHTML="日期："+res.data[0].CreateDate +  "-" +res.data[res.data.length-1].CreateDate;
          textprice.innerHTML="片数："+y_pianshu_sum;
          textarea.innerHTML="平方数："+y_pingfang_sum;
          textarea.innerHTML = "平方数：" + Number(y_pingfang_sum).toFixed(2);
          // this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
        } else {
          console.error('请求计划量-月数据失败:', error);
@@ -382,52 +551,30 @@
}
</script>

<template>
  <div>
    <div style="font-weight: 800;font-size: 30px;height: 70px;line-height: 70px;border: 1px solid #ccc;text-align: center;">
      JOOMO镜片制造中心驾驶舱
    </div>

    <div style="width:100% ;height: 880px;">
      <div style="width:100% ;height: 33.3%;border: 1px solid #ccc;">
        <div id="drawLineChart_day11" style="height: 100%;width: 20%;border: 1px solid #ccc;float: left;">日单达成率-片数</div>
        <div id="drawLineChart_day12" style="height: 100%;width: 30%;max-height: 260px;border: 1px solid #ccc;float: left;">
          <!-- 表格内容详情 -->
          <div style="font-weight: 700;font-size: 20px;height: 30px;line-height: 30px;border: 1px solid #ccc;text-align: center;">当日未完成量</div>
          <el-table :data="notCompleteData" stripe
            height="260px"
            :header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <!-- <el-table-column type="selection" min-width="30" /> -->
            <el-table-column prop="scanId" :label="$t('glassInfo.scanId')" />
            <el-table-column prop="notComplete" :label="$t('glassInfo.notCompleteCount')" />
            <el-table-column prop="area_sum" :label="$t('glassInfo.notCompleteArea')" />
          </el-table>
        </div>
        <div id="drawLineChart_day71" style="height: 100%;width: 50%;border: 1px solid #ccc;float: left;">能耗管理-按天显示（手输）
        </div>
      </div>
      <div style="width:100% ;height: 33.3%;border: 1px solid #ccc;">
        <div id="drawLineChart_day31" style="height: 100%;width: 100%;border: 1px solid #ccc;">两线生产对比-片数</div>
      </div>
      <div style="width:100% ;height: 33.3%;border: 1px solid #ccc;">
        <div id="drawLineChart_day51" style="height: 100%;width: 80%;border: 1px solid #ccc;float: left;">计划量-片数、平方</div>
        <div id="drawLineChart_day91" style="height: 100%;width: 20%;float: left;">
          <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="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>
      </div>
    </div>

    <!-- <div style="width:33% ;height: 880px;border: 1px solid #ccc;">
      <div id="drawLineChart_day1" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
      <div id="drawLineChart_day2" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
    </div> -->
  </div>
</template>
<style scoped>

.dashboard-container {
  /* background-image: url('https://img.shetu66.com/2023/04/10/1681118607295673.jpg'); */
  background: linear-gradient(to bottom, #001f3f, #0074d9d7); /*上半部分蓝黑色，下半部分浅蓝色 */
  color: white; /* 设置整体文字颜色为白色 */
}

:deep(.el-table__header th) {
  background: #052c52!important; 
  color: white!important;
  font-size: large;
}
:deep(.el-table) {
  background: #0b3d6f; 
  color: white;
}
:deep(.el-table__body tr) {
  background: #0b3d6f; 
  color: rgb(7, 161, 185);
  font-size: large;
}

/*0b3d6f*/
.float {
  float: left;
}
@@ -441,4 +588,17 @@
.chart {
  height: 400px;
}

/* 设置表格文字颜色为白色 */
.el-table {
  color: white;
}

.el-table thead th {
  color: white;
}

.el-table tbody td {
  color: white;
}
</style>

 UI-Project/src/views/MechanicalMonitor/mechanicalMonitor.vue

@@ -1,45 +1,25 @@
<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';
import axios from 'axios';
import request from '@/utils/request';

const devices = ref([]);
const ws = ref(null);
const activeTab = ref('line1');

const initWebSocket = () => {
    const wsUrl = `ws://${window.location.host}/api/talk/mechanicalMonitor`;
    ws.value = new WebSocket(wsUrl);
    
    ws.value.onmessage = (event) => {
        const data = JSON.parse(event.data);
        if (data.type === 'status_change') {
            updateDeviceStatus(data.data);
const getMechanicalStatus = () => {
    return request({
        url: '/deviceInteraction/mechanicalMonitor/getMechanicalStatus',
        method: 'post',
        headers: {
            'Content-Type': 'application/json'
        }
    };
    
    ws.value.onclose = () => {
        console.log('WebSocket连接关闭');
        setTimeout(initWebSocket, 5000);
    };
};

const updateDeviceStatus = (newStatus) => {
    const device = devices.value.find(d => d.deviceId === newStatus.deviceId);
    if (device) {
        Object.assign(device, {
            ...newStatus,
            showAlarmInfo: device.showAlarmInfo,
            alarmTime: newStatus.alarmTime ? new Date(newStatus.alarmTime).toLocaleString() : null,
            disconnectTime: newStatus.disconnectTime ? new Date(newStatus.disconnectTime).toLocaleString() : null
        });
    }
};

const fetchDeviceStatus = async () => {
    try {
        const response = await axios.post('/api/deviceInteraction/mechanicalMonitor/getMechanicalStatus');
        if (response.data.code === 200) {
            const statusData = response.data.data.mechanicalStatus;
        const response = await getMechanicalStatus();
        if (response.code === 200) {
            const statusData = response.data.mechanicalStatus;
            devices.value = statusData.map(device => ({
                ...device,
                showAlarmInfo: false,
@@ -48,7 +28,7 @@
            }));
        }
    } catch (error) {
        console.error('获取设备状态失败:', error);
        console.error('获取设备状态失败:', error.message || error);
    }
};

@@ -84,21 +64,17 @@

onMounted(() => {
    fetchDeviceStatus();
    initWebSocket();
});
    const timer = setInterval(fetchDeviceStatus, 30000);

onUnmounted(() => {
    if (ws.value) {
        ws.value.close();
    }
        clearInterval(timer);
    });
});
</script>

<template>
    <div class="monitoring-container">
        <h1>九牧设备连接及故障报警监控</h1>
        
        <!-- 添加标签切换组件 -->
        <div class="tab-container">
            <div 
                class="tab-item" 
@@ -116,11 +92,22 @@
            </div>
        </div>

        <!-- 修改生产线显示逻辑 -->
        <!-- 添加调试信息 -->
        <div v-if="devices.length === 0">暂无设备数据</div>
        <div v-else>
            <p>总设备数量: {{ devices.length }}</p>
            <p>一线设备数量: {{ groupedDevices.line1.length }}</p>
            <p>二线设备数量: {{ groupedDevices.line2.length }}</p>
        </div>

        <!-- 一线设备 -->
        <div v-show="activeTab === 'line1'" class="line-section">
            <h2 class="line-title">一线</h2>
            <div class="device-grid">
                <div v-for="device in groupedDevices.line1" :key="device.id" class="device-panel" @click="toggleAlarmInfo(device)">
                <div v-for="device in groupedDevices.line1" 
                     :key="device.deviceId" 
                     class="device-panel" 
                     @click="toggleAlarmInfo(device)">
                    <div class="device-image">
                        <img :src="deviceIcon(device)" alt="设备图标">
                        <p v-if="device.status === 1" class="status-text normal-status">正常</p>
@@ -148,6 +135,7 @@
            </div>
        </div>

        <!-- 二线设备 -->
        <div v-show="activeTab === 'line2'" class="line-section">
            <h2 class="line-title">二线</h2>
            <div class="device-grid">
@@ -186,7 +174,7 @@
.monitoring-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
    max-width: 1200px;
    max-width: 1600px;
    margin: 0 auto;
    margin-bottom: 60px;
}
@@ -212,7 +200,7 @@

.device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}