大屏初始化

src/assets/scss/index.scss

@@ -128,7 +128,7 @@
       //下方区域的布局
       .content-box {
         display: grid;
-        grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
+        grid-template-columns:  4fr 4fr 4fr ;
       }
 
       // 底部数据

src/constant/index.ts

@@ -4,8 +4,8 @@ import { ModuleInfo } from './index.d'
 export const WEEK = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
 
 // 主题名称与副标题名称
-export const title = '大数据可视化平台'
-export const subtitle = ['数据分析1', '数据分析2', 'vue-big-screen']
+export const title = '欧康立体仓可视化平台'
+export const subtitle = ['库位分析', '任务', '托盘']
 
 export const moduleInfo: ModuleInfo = [
   // 中间的几个模块

src/views/bottomRight/chart/draw.tsx

@@ -1,365 +1,165 @@
 import { defineComponent, watch, ref } from 'vue';
-// 声明类型
+
 const PropsType = {
   cdata: {
     type: Object,
     require: true
   }
-} as const
+} as const;
 
-// 定义主体
 export default defineComponent({
   props: PropsType,
   setup(props) {
-    // 定义 ref
-    const chartRef = ref()
-    // 定义颜色
+    const chartRef = ref();
+    
+    // 颜色配置
     const colorList = {
-      linearYtoG: {
+      inColor: {
         type: "linear",
         x: 0,
         y: 0,
         x2: 1,
-        y2: 1,
+        y2: 0,
         colorStops: [
-          {
-            offset: 0,
-            color: "#f5b44d"
-          },
-          {
-            offset: 1,
-            color: "#28f8de"
-          }
+          { offset: 0, color: "#1c98e8" },
+          { offset: 1, color: "#28f8de" }
         ]
       },
-      linearGtoB: {
+      outColor: {
         type: "linear",
         x: 0,
         y: 0,
         x2: 1,
         y2: 0,
         colorStops: [
-          {
-            offset: 0,
-            color: "#43dfa2"
-          },
-          {
-            offset: 1,
-            color: "#28f8de"
-          }
+          { offset: 0, color: "#ff7c7c" },
+          { offset: 1, color: "#ffb96e" }
         ]
       },
-      linearBtoG: {
+      inArea: {
         type: "linear",
         x: 0,
         y: 0,
-        x2: 1,
-        y2: 0,
+        x2: 0,
+        y2: 1,
         colorStops: [
-          {
-            offset: 0,
-            color: "#1c98e8"
-          },
-          {
-            offset: 1,
-            color: "#28f8de"
-          }
+          { offset: 0, color: "rgba(35,184,210,.2)" },
+          { offset: 1, color: "rgba(35,184,210,0)" }
         ]
       },
-      areaBtoG: {
+      outArea: {
         type: "linear",
         x: 0,
         y: 0,
         x2: 0,
         y2: 1,
         colorStops: [
-          {
-            offset: 0,
-            color: "rgba(35,184,210,.2)"
-          },
-          {
-            offset: 1,
-            color: "rgba(35,184,210,0)"
-          }
+          { offset: 0, color: "rgba(255,124,124,.2)" },
+          { offset: 1, color: "rgba(255,185,110,0)" }
         ]
       }
-    }
-    // 配置项
-    let options ={}
+    };
+    
+    let options = {};
 
-    // 监听
     watch(
       () => props.cdata,
-      (val: any) => {
+      (val) => {
         options = {
           title: {
-            text: "",
+            text: "每日出入库趋势",
             textStyle: {
               color: "#D3D6DD",
               fontSize: 24,
               fontWeight: "normal"
             },
-            subtext: val.year + "/" + val.weekCategory[6],
-            subtextStyle: {
-              color: "#fff",
-              fontSize: 16
-            },
-            top: 50,
-            left: 80
-          },
-          legend: {
-            top: 120,
-            left: 80,
-            orient: "vertical",
-            itemGap: 15,
-            itemWidth: 12,
-            itemHeight: 12,
-            data: ["平均指标", "我的指标"],
-            textStyle: {
-              color: "#fff",
-              fontSize: 14
-            }
+            left: 'center'
           },
           tooltip: {
-            trigger: "item"
+            trigger: 'axis',
+            formatter: function(params) {
+              let result = params[0].name + '<br/>';
+              params.forEach(item => {
+                const type = item.seriesIndex === 0 ? '入库' : '出库';
+                result += `${item.marker} ${type}: ${item.value}<br/>`;
+              });
+              return result;
+            }
           },
-          radar: {
-            center: ["68%", "27%"],
-            radius: "40%",
-            name: {
-              color: "#fff"
-            },
-            splitNumber: 8,
-            axisLine: {
-              lineStyle: {
-                color: colorList.linearYtoG,
-                opacity: 0.6
-              }
-            },
-            splitLine: {
-              lineStyle: {
-                color: colorList.linearYtoG,
-                opacity: 0.6
-              }
-            },
-            splitArea: {
-              areaStyle: {
-                color: "#fff",
-                opacity: 0.1,
-                shadowBlur: 25,
-                shadowColor: "#000",
-                shadowOffsetX: 0,
-                shadowOffsetY: 5
-              }
-            },
-            indicator: [
-              {
-                name: "服务态度",
-                max: val.maxData
-              },
-              {
-                name: "产品质量",
-                max: 10
-              },
-              {
-                name: "任务效率",
-                max: 12
-              },
-              {
-                name: "售后保障",
-                max: 3.5
-              }
-            ]
+          legend: {
+            data: ['入库', '出库'],
+            right: 20,
+            top: 10,
+            textStyle: { color: '#fff' }
           },
           grid: {
-            left: 90,
-            right: 80,
-            bottom: '15%',
-            top: "50%"
+            left: 50,
+            right: 50,
+            bottom: 50,
+            top: 100,
+            containLabel: true
           },
           xAxis: {
             type: "category",
-            position: "bottom",
-            axisLine: true,
-            axisLabel: {
-              color: "rgba(255,255,255,.8)",
-              fontSize: 12
-            },
+            axisLine: { lineStyle: { color: "rgba(255,255,255,.5)" } },
+            axisLabel: { color: "rgba(255,255,255,.8)", fontSize: 12 },
             data: val.weekCategory
           },
-          // 下方Y轴
           yAxis: {
-            name: "工单",
-            nameLocation: "end",
-            nameGap: 24,
-            nameTextStyle: {
-              color: "rgba(255,255,255,.5)",
-              fontSize: 14
-            },
+            type: "value",
+            name: "数量",
+            nameTextStyle: { color: "rgba(255,255,255,.5)", fontSize: 14 },
             max: val.maxData,
-            splitNumber: 4,
-
-            axisLine: {
-              lineStyle: {
-                opacity: 0
-              }
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: "#fff",
-                opacity: 0.1
-              }
-            },
-            axisLabel: {
-              color: "rgba(255,255,255,.8)",
-              fontSize: 12
-            }
+            splitLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
+            axisLabel: { color: "rgba(255,255,255,.8)", fontSize: 12 }
           },
           series: [
             {
-              name: "",
-              type: "radar",
-              symbolSize: 0,
-              data: [
-                {
-                  value: val.radarDataAvg[6],
-                  name: "平均指标",
-                  itemStyle: {
-                    normal: {
-                      color: "#f8d351"
-                    }
-                  },
-                  lineStyle: {
-                    normal: {
-                      opacity: 0
-                    }
-                  },
-                  areaStyle: {
-                    normal: {
-                      color: "#f8d351",
-                      shadowBlur: 25,
-                      shadowColor: "rgba(248,211,81,.3)",
-                      shadowOffsetX: 0,
-                      shadowOffsetY: -10,
-                      opacity: 1
-                    }
-                  }
-                },
-                {
-                  value: val.radarData[6],
-                  name: "我的指标",
-                  itemStyle: {
-                    normal: {
-                      color: "#43dfa2"
-                    }
-                  },
-                  lineStyle: {
-                    normal: {
-                      opacity: 0
-                    }
-                  },
-                  areaStyle: {
-                    normal: {
-                      color: colorList.linearGtoB,
-                      shadowBlur: 15,
-                      shadowColor: "rgba(0,0,0,.2)",
-                      shadowOffsetX: 0,
-                      shadowOffsetY: 5,
-                      opacity: 0.8
-                    }
-                  }
-                }
-              ]
-            },
-            {
-              name: "",
+              name: "入库",
               type: "line",
               smooth: true,
-              symbol: "emptyCircle",
+              symbol: "circle",
               symbolSize: 8,
-              itemStyle: {
-                normal: {
-                  color: "#fff"
-                }
-              },
-              lineStyle: {
-                normal: {
-                  color: colorList.linearBtoG,
-                  width: 3
-                }
-              },
-              areaStyle: {
-                normal: {
-                  color: colorList.areaBtoG
-                }
-              },
-              data: val.weekLineData,
-              lineSmooth: true,
+              itemStyle: { color: "#fff" },
+              lineStyle: { color: colorList.inColor, width: 3 },
+              areaStyle: { color: colorList.inArea },
+              data: val.dayInData,
               markLine: {
                 silent: true,
-                data: [
-                  {
-                    type: "average",
-                    name: "平均值"
-                  }
-                ],
-                precision: 0,
-                label: {
-                  normal: {
-                    formatter: "平均值: \n {c}"
-                  }
-                },
-                lineStyle: {
-                  normal: {
-                    color: "rgba(248,211,81,.7)"
-                  }
-                }
-              },
-              tooltip: {
-                position: "top",
-                formatter: "{c} m",
-                backgroundColor: "rgba(28,152,232,.2)",
-                padding: 6
+                lineStyle: { color: "rgba(248,211,81,.7)", width: 1 },
+                data: [{ type: "average", name: "平均值" }]
               }
             },
             {
-              name: "占位背景",
-              type: "bar",
-              itemStyle: {
-                normal: {
-                  show: true,
-                  color: "#000",
-                  opacity: 0
-                }
-              },
-              silent: true,
-              barWidth: "50%",
-              data: val.weekMaxData,
-              animation: false
+              name: "出库",
+              type: "line",
+              smooth: true,
+              symbol: "circle",
+              symbolSize: 8,
+              itemStyle: { color: "#fff" },
+              lineStyle: { color: colorList.outColor, width: 3 },
+              areaStyle: { color: colorList.outArea },
+              data: val.dayOutData,
+              markLine: {
+                silent: true,
+                lineStyle: { color: "rgba(248,211,81,.7)", width: 1 },
+                data: [{ type: "average", name: "平均值" }]
+              }
             }
           ]
-        }
-        // 手动触发更新
+        };
+        
         if (chartRef.value) {
-          // 通过初始化参数打入数据
-          chartRef.value.initChart(options)
+          chartRef.value.initChart(options);
         }
       },
-      {
-        immediate: true,
-        deep: true
-      }
-    )
+      { immediate: true, deep: true }
+    );
 
     return () => {
-      const height = "480px"
-      const width = "100%"
-
       return <div>
-        <echart ref={chartRef} height={height} width={width} />
-      </div>
-    }
+        <echart ref={chartRef} height="500px" width="100%" />
+      </div>;
+    };
   }
-})
-
+});

src/views/bottomRight/chart/index.tsx

@@ -1,89 +1,93 @@
 import { defineComponent, reactive, onMounted, ref, onUnmounted } from 'vue';
-import Draw from './draw'
+import Draw from './draw';
 
 export default defineComponent({
   components: {
     Draw
   },
   setup() {
-    const drawTiming = ref(0)
+    const drawTiming = ref(0);
     const cdata = reactive({
       year: null,
       weekCategory: [],
-      radarData: [],
-      radarDataAvg: [],
-      maxData: 12000,
-      weekMaxData: [],
-      weekLineData: []
-    })
+      dayInData: [],  // 新增：入库数据
+      dayOutData: [], // 新增：出库数据
+      maxData: 60,    // 调整最大值为60，根据数据范围
+    });
 
-    // methods
-    const setData = () => {
-      // 清空轮询数据
-      cdata.weekCategory = [];
-      cdata.weekMaxData = [];
-      cdata.weekLineData = [];
-      cdata.radarData = [];
-      cdata.radarDataAvg = [];
-
-      const dateBase = new Date();
-      cdata.year = dateBase.getFullYear();
-      // 周数据
-      for (let i = 0; i < 7; i++) {
-        // 日期
-        const date = new Date();
-        cdata.weekCategory.unshift([date.getMonth() + 1, date.getDate() - i].join("/"));
-
-        // 折线图数据
-        cdata.weekMaxData.push(cdata.maxData);
-        const distance = Math.round(Math.random() * 11000 + 500);
-        cdata.weekLineData.push(distance);
+    // 获取后端数据
+    const fetchData = async () => {
+      try {
+        const token = localStorage.getItem('token') || 'PDA1'; // 从localStorage获取token
+        const headers = new Headers({
+          Accept: "application/json, text/plain, */*",
+          token: token,
+        });
 
-        // 雷达图数据
-        // 我的指标
-        const averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
-        const maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
-        const hour = +(distance / 1000 / averageSpeed).toFixed(1);
-        const radarDayData = [distance, averageSpeed, maxSpeed, hour];
-        cdata.radarData.unshift(radarDayData);
-
-        // 平均指标
-        const distanceAvg = Math.round(Math.random() * 8000 + 4000);
-        const averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
-        const maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
-        const hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
-        const radarDayDataAvg = [
-          distanceAvg,
-          averageSpeedAvg,
-          maxSpeedAvg,
-          hourAvg
-        ];
-        cdata.radarDataAvg.unshift(radarDayDataAvg);
+        const url = "http://192.168.31.105:8008/reportcenter/bigScreen/day/";
+        const response = await fetch(url, {
+          method: "GET",
+          headers: headers,
+        });
+        
+        if (!response.ok) throw new Error('网络响应异常');
+        const data = await response.json();
+        
+        // 处理数据
+        processData(data.results);
+      } catch (error) {
+        console.error('获取数据失败:', error);
       }
+    };
 
-    }
+    // 处理数据
+    const processData = (results) => {
+      // 清空数据
+      cdata.weekCategory = [];
+      cdata.dayInData = [];
+      cdata.dayOutData = [];
+      
+      // 按日期排序 (修复类型错误)
+      const sortedData = [...results].sort((a, b) => {
+        const dateA = new Date(a.day).getTime();
+        const dateB = new Date(b.day).getTime();
+        return dateA - dateB;
+      });
+      
+      // 提取数据
+      sortedData.forEach(item => {
+        cdata.weekCategory.push(item.day);
+        cdata.dayInData.push(parseFloat(item.day_in));
+        cdata.dayOutData.push(parseFloat(item.day_out));
+      });
+      
+      // 计算最大值
+      const allValues = [...cdata.dayInData, ...cdata.dayOutData];
+      const maxValue = Math.max(...allValues);
+      cdata.maxData = maxValue > 0 ? maxValue * 1.2 : 60; // 增加20%余量
+    };
 
-    // 定时函数
+    // 定时更新数据
     const drawTimingFn = () => {
-      setData();
+      fetchData();
       drawTiming.value = setInterval(() => {
-        setData();
-      }, 6000);
-    }
+        fetchData();
+      }, 60000); // 每分钟更新一次
+    };
 
     // 生命周期
     onMounted(() => {
-      drawTimingFn()
-    })
+      drawTimingFn();
+    });
 
     onUnmounted(() => {
-      clearInterval(drawTiming.value)
-    })
+      clearInterval(drawTiming.value);
+    });
 
     return () => {
       return <div>
         <Draw cdata={cdata} />
-      </div>
-    }
+      </div>;
+    };
   }
-})
+});

src/views/center/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="center">
+  <!-- <div class="center">
     <div class="up">
       <div
         class="bg-color-black item"
@@ -40,7 +40,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </div> -->
 </template>
 
 <script>

src/views/centerLeft1/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="centreLeft1">
-    <div class="bg-color-black">
+    <!-- <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
         <span>
           <i class="iconfont icon-tongji4" />
@@ -13,7 +13,7 @@
       <div class="d-flex jc-center">
         <chart />
       </div>
-      <!-- 4个主要的数据 -->
+      
       <div class="bottom-data">
         <div
           class="item-box mt-2"
@@ -30,7 +30,7 @@
           </p>
         </div>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 

src/views/centerRight2/index.vue

@@ -10,47 +10,131 @@
         </div>
       </div>
       <div class="d-flex mt-1 jc-center body-box">
-        <dv-scroll-board class="dv-scr-board" :config="config" />
+        <dv-scroll-board
+          ref="scrollBoard"
+          class="dv-scr-board"
+          :config="config"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { defineComponent, reactive } from 'vue'
-export default defineComponent({
-  setup() {
-    const config = reactive({
-      header: ['组件', '分支', '覆盖率'],
-      data: [
-        ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
-        ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
-        ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
-        ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
-        ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
-        ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
-        ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
-        ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
-        ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
-        ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
-      ],
-      rowNum: 7, //表格行数
-      headerHeight: 35,
-      headerBGC: '#0f1325', //表头
-      oddRowBGC: '#0f1325', //奇数行
-      evenRowBGC: '#171c33', //偶数行
-      index: true,
-      columnWidth: [50],
-      align: ['center']
-    })
-    return { config }
-  }
-})
+
+export default {
+  data() {
+    return {
+      config: {
+        header: ["托盘号","批次号", "起始位置", "终止位置", "任务状态"],
+        data: [
+          ["数据加载中..."," ", " ", " ", " "],
+          [" ", " ", " ", " "," "],
+          [" ", " ", " ", " "," "],
+          [" ", " ", " ", " "," "],
+          [" ", " ", " ", " "," "],
+          [" ", " ", " ", " "," "],
+          [" ", " ", " ", " "," "],
+
+        ],
+        rowNum: 7,
+        headerHeight: 35,
+        headerBGC: "#0f1325",
+        oddRowBGC: "#0f1325",
+        evenRowBGC: "#171c33",
+        index: true,
+        columnWidth: [5,75,150],
+        align: ["center", "center", "center", "center", "center"],
+      },
+      intervalId: null,
+      token: "PDA1",
+    };
+  },
+  mounted() {
+    this.fetchData();
+    // 每分钟刷新一次数据
+    this.intervalId = setInterval(this.fetchData, 60000);
+  },
+  beforeUnmount() {
+    // 清除定时器
+    clearInterval(this.intervalId);
+  },
+  methods: {
+    async fetchData() {
+      try {
+        const headers = new Headers({
+          Accept: "application/json, text/plain, */*",
+          token: this.token,
+        });
+
+        const url = "http://192.168.31.105:8008/container/wcs_task/";
+        // const url = "http://192.168.18.200:8008/container/wcs_task/";
+        const response = await fetch(url, {
+          method: "GET",
+          headers: headers,
+        });
+
+        if (!response.ok) {
+          throw new Error(
+            `网络错误: ${response.status} ${response.statusText}`
+          );
+        }
+
+        const jsonData = await response.json();
+        console.log("数据获取成功:", jsonData);
+
+        const tableData = jsonData.results.map((item) => [
+          item.container,
+          item.batch_code,
+          item.current_location,
+          item.target_location,
+          item.message,
+        ]);
+        // 应用平台主题色
+        const statusColors = {
+          进行中: "#ffb638", // 橘黄色
+          任务已完成: "#2ed47a", // 绿色
+          等待出库: "#3c9aff", // 蓝色
+        };
+
+        while (tableData.length < 7) {
+          tableData.push(["-", "-", "-", "-", "-"]);
+        }
+        const formattedData = tableData.map((row) => {
+          const status = row[4];
+          return [
+            `<span style="color: #fff">${row[0]}</span>`,
+            `<span style="color: #c0e4ff">${row[1]}</span>`,
+            `<span style="color: #c0e4ff">${row[2]}</span>`,
+            `<span style="color: #c0e4ff">${row[3]}</span>`,
+            `<span style="color: ${
+              statusColors[status] || "#fff"
+            }; font-weight: 500">${status}</span>`,
+          ];
+        });
+        this.config.data =
+          tableData.length > 0 ? formattedData : [["暂无数据", "", "", ""]];
+        console.log("数据处理成功:", this.config.data);
+
+        this.$refs["scrollBoard"].updateRows(this.config.data);
+      } catch (error) {
+        console.error("数据获取失败:", error);
+        const errorMessage = `加载失败: ${error.message}`;
+        this.config.data = [
+          [errorMessage, "", "", ""],
+          ["请检查网络连接", "", "", ""],
+          ["或服务地址是否正确", "", "", ""],
+          ["Token: " + this.token, "", "", ""],
+        ];
+      }
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 $box-height: 410px;
-$box-width: 300px;
+$box-width: 100%;
 .centerRight2 {
   padding: 16px;
   padding-top: 20px;
@@ -68,7 +152,7 @@ $box-width: 300px;
     border-radius: 10px;
     overflow: hidden;
     .dv-scr-board {
-      width: 270px;
+      width: 98%;
       height: 340px;
     }
   }

src/views/index/index.vue

@@ -57,19 +57,19 @@
                 <center-left1 />
               </dv-border-box-12>
             </div>
-            <div>
+            <!-- <div>
               <dv-border-box-12>
                 <center-left2 />
               </dv-border-box-12>
-            </div>
+            </div> -->
             <!-- 中间 -->
             <div>
               <center />
             </div>
             <!-- 中间 -->
-            <div>
+            <!-- <div>
               <center-right1 />
-            </div>
+            </div> -->
             <div>
               <dv-border-box-13>
                 <center-right2 />

vue.config.js

@@ -1,5 +1,12 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
   transpileDependencies: true,
-  lintOnSave: false
+  lintOnSave: false,  // 👈 注意这里需要加逗号
+
+  // 新增开发服务器配置
+  devServer: {
+    port: 3000,       // 👈 固定端口号为 3000
+    open: true,       // 是否自动打开浏览器（可选）
+    
+  }
 })