看板提交

src/views/bottomLeft/chart/draw.tsx

@@ -21,6 +21,9 @@ export default defineComponent({
     watch(
       () => props.cdata,
       (val: any) => {
+        // 计算合适的间隔，根据数据长度动态调整
+        const interval = Math.floor(val.category.length / 15) || 0;
+        
         options = {
           tooltip: {
             show: true,
@@ -40,7 +43,7 @@ export default defineComponent({
             x: "8%",
             width: "88%",
             top: "5%",
-            bottom: '7%'
+            bottom: '17%'
           },
           xAxis: {
             data: val.category,
@@ -51,6 +54,14 @@ export default defineComponent({
             },
             axisTick: {
               show: false
+            },
+            // 添加轴标签配置
+            axisLabel: {
+              interval: interval, // 设置间隔
+              rotate: 30, // 如果标签太长可以旋转
+              textStyle: {
+                fontSize: 10 // 调整字体大小
+              }
             }
           },
           yAxis: [
@@ -80,22 +91,7 @@ export default defineComponent({
           ],
           series: [
             {
-              name: "贯通率",
-              type: "line",
-              smooth: true,
-              showAllSymbol: true,
-              symbol: "emptyCircle",
-              symbolSize: 8,
-              yAxisIndex: 1,
-              itemStyle: {
-                normal: {
-                  color: "#F02FC2"
-                }
-              },
-              data: val.rateData
-            },
-            {
-              name: "已贯通",
+              name: "在库数目",
               type: "bar",
               barWidth: 10,
               itemStyle: {
@@ -108,24 +104,6 @@ export default defineComponent({
                 }
               },
               data: val.barData
-            },
-            {
-              name: "计划贯通",
-              type: "bar",
-              barGap: "-100%",
-              barWidth: 10,
-              itemStyle: {
-                normal: {
-                  barBorderRadius: 5,
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    { offset: 0, color: "rgba(156,107,211,0.8)" },
-                    { offset: 0.2, color: "rgba(156,107,211,0.5)" },
-                    { offset: 1, color: "rgba(156,107,211,0.2)" }
-                  ])
-                }
-              },
-              z: -12,
-              data: val.lineData
             }
           ]
         }
@@ -150,5 +128,4 @@ export default defineComponent({
       </div>
     }
   }
-})
-
+})

src/views/bottomLeft/chart/index.tsx

@@ -7,117 +7,57 @@ export default defineComponent({
   },
   setup() {
     const cdata = reactive({
-      category: [
-        "市区",
-        "万州",
-        "江北",
-        "南岸",
-        "北碚",
-        "綦南",
-        "长寿",
-        "永川",
-        "璧山",
-        "江津",
-        "城口",
-        "大足",
-        "垫江",
-        "丰都",
-        "奉节",
-        "合川",
-        "江津区",
-        "开州",
-        "南川",
-        "彭水",
-        "黔江",
-        "石柱",
-        "铜梁",
-        "潼南",
-        "巫山",
-        "巫溪",
-        "武隆",
-        "秀山",
-        "酉阳",
-        "云阳",
-        "忠县",
-        "川东",
-        "检修"
-      ],
-      lineData: [
-        18092,
-        20728,
-        24045,
-        28348,
-        32808,
-        36097,
-        39867,
-        44715,
-        48444,
-        50415,
-        56061,
-        62677,
-        59521,
-        67560,
-        18092,
-        20728,
-        24045,
-        28348,
-        32808,
-        36097,
-        39867,
-        44715,
-        48444,
-        50415,
-        36097,
-        39867,
-        44715,
-        48444,
-        50415,
-        50061,
-        32677,
-        49521,
-        32808
-      ],
-      barData: [
-        4600,
-        5000,
-        5500,
-        6500,
-        7500,
-        8500,
-        9900,
-        12500,
-        14000,
-        21500,
-        23200,
-        24450,
-        25250,
-        33300,
-        4600,
-        5000,
-        5500,
-        6500,
-        7500,
-        8500,
-        9900,
-        22500,
-        14000,
-        21500,
-        8500,
-        9900,
-        12500,
-        14000,
-        21500,
-        23200,
-        24450,
-        25250,
-        7500
-      ],
-      rateData: []
+      category: [], // 商品描述
+      lineData: [], // 总需求量
+      barData: [],  // 总数量
+      rateData: []  // 比率数据
     })
 
-    // methods
-    const setData = () => {
-      for (let i = 0; i < cdata.barData.length - 1; i++) {
+    // 获取后端数据
+    const fetchData = async () => {
+      try {
+        const token = localStorage.getItem('token') || 'PDA1'; // 从localStorage获取token
+        const headers = new Headers({
+          Accept: "application/json, text/plain, */*",
+          token: token,
+        });
+
+        const url = "http://192.168.31.105:8008/bound/batch/count/";
+        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.category = [];
+      cdata.lineData = [];
+      cdata.barData = [];
+      cdata.rateData = [];
+
+      // 填充新数据
+      results.forEach(item => {
+        cdata.category.push(item.goods_desc);
+        cdata.lineData.push(parseFloat(item.total_demanded_quantity));
+        cdata.barData.push(parseFloat(item.total_quantity));
+      });
+      console.log('cdata.category:', cdata.category);
+      console.log('cdata.lineData:', cdata.lineData);
+      console.log('cdata.barData:', cdata.barData);
+
+      // 计算比率
+      for (let i = 0; i < cdata.barData.length; i++) {
         const rate = cdata.barData[i] / cdata.lineData[i];
         cdata.rateData.push(rate.toFixed(2));
       }
@@ -125,7 +65,7 @@ export default defineComponent({
 
     // 生命周期
     onMounted(() => {
-      setData()
+      fetchData();
     })
 
     return () => {

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,125 +1,175 @@
 <template>
-  <div class="centreLeft1">
-    <!-- <div class="bg-color-black">
+  <div class="centerRight2">
+    <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
         <span>
-          <i class="iconfont icon-tongji4" />
+          <i class="iconfont icon-vector" />
         </span>
         <div class="d-flex">
-          <span class="fs-xl text mx-2">任务通过率</span>
-          <dv-decoration-3 class="dv-dec-3" />
+          <span class="fs-xl text mx-2">物料操作日志</span>
         </div>
       </div>
-      <div class="d-flex jc-center">
-        <chart />
+      <div class="d-flex mt-1 jc-center body-box">
+        <dv-scroll-board
+          ref="scrollBoard"
+          class="dv-scr-board"
+          :config="config"
+        />
       </div>
-      
-      <div class="bottom-data">
-        <div
-          class="item-box mt-2"
-          v-for="(item, index) in numberData"
-          :key="index"
-        >
-          <div class="d-flex jc-end">
-            <i class="iconfont" :class="[iconFont[index]]" />
-            <dv-digital-flop class="dv-digital-flop" :config="item.config" />
-          </div>
-          <p>
-            <span> {{ item.text }} </span>
-            <span class="colorYellow">(件)</span>
-          </p>
-        </div>
-      </div>
-    </div> -->
+    </div>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted,  reactive } from 'vue'
-import Chart from './chart/index'
-export default defineComponent({
-  components: {
-    Chart
-  },
-  setup() {
-    // 下层数据
-    const dataArr = [
-      {
-        number: 150,
-        text: '今日构建总量'
-      },
-      {
-        number: 144,
-        text: '总共完成数量'
-      },
-      {
-        number: 361,
-        text: '正在编译数量'
+<script>
+
+export default {
+  data() {
+    return {
+      config: {
+        header: ["操作类型", "操作时间", "批号", "存货名称", "变更数目"],
+        data: [
+          ["数据加载中...", " ", " ", " ", " "],
+          [" ", " ", " ", " ", " "],
+          [" ", " ", " ", " ", " "],
+          [" ", " ", " ", " ", " "],
+          [" ", " ", " ", " ", " "],
+          [" ", " ", " ", " ", " "],
+          [" ", " ", " ", " ", " "],
+        ],
+        rowNum: 7,
+        headerHeight: 35,
+        headerBGC: "#0f1325",
+        oddRowBGC: "#0f1325",
+        evenRowBGC: "#171c33",
+        index: true,
+        columnWidth: [10, 80, 150, 140, 100],
+        align: ["center", "center", "center", "center", "center"],
       },
-      {
-        number: 571,
-        text: '未通过数量'
+      intervalId: null,
+      token: "PDA1",
+      typeMap: {
+        create: '批次入库',
+        out: '批次出库',
+        delete: '批次删除',
+        update: '批次更新',
+        cancel_out: '取消出库'
       }
-    ]
-    // 对应图标
-    const iconFont = [
-      'icon-diagnose',
-      'icon-monitoring',
-      'icon-cloudupload',
-      'icon-clouddownload'
-    ]
-    const numberData = reactive([])
-    let intervalInstance = null
-    onMounted(() => {
-      setData()
-      changeTiming()
-    })
+    };
+  },
+  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 setData = () => {
-      dataArr.forEach(e => {
-        numberData.push({
-          config: {
-            number: [e.number],
-            toFixed: 1,
-            content: '{nt}',
-            style: {
-              fontSize: 24
-            }
-          },
-          text: e.text
-        })
-      })
-    }
+        const url = "http://192.168.31.105:8008/reportcenter/batchLog/";
+        const response = await fetch(url, {
+          method: "GET",
+          headers: headers,
+        });
 
-    const changeTiming = () => {
-      intervalInstance = setInterval(() => {
-        changeNumber()
-      }, 2000)
-    }
-    const changeNumber = () => {
-      numberData.forEach((item, index) => {
-        item.config.number[0] += ++index
-        item.config = { ...item.config }
-      })
-    }
-    onUnmounted(() => {
-      clearInterval(intervalInstance)   
-    })
+        if (!response.ok) {
+          throw new Error(
+            `网络错误: ${response.status} ${response.statusText}`
+          );
+        }
 
-    return { numberData, iconFont}
-  }
-})
+        const jsonData = await response.json();
+        console.log("数据获取成功:", jsonData);
+
+        const tableData = jsonData.results.map((item) => {
+          // 确定变更数量和符号
+          let quantity = "0.000";
+          let sign = "";
+          
+          if (item.log_type === 'create') {
+            quantity = `+${item.goods_in_qty}`;
+          } else if (item.log_type === 'out' || item.log_type === 'cancel_out') {
+            quantity = `-${item.goods_out_qty}`;
+          }
+          
+          // 处理取消出库的特殊情况
+          if (item.log_type === 'cancel_out') {
+            sign = "+";
+            quantity = `${Math.abs(parseFloat(item.goods_out_qty)).toFixed(3)}`;
+          }
+          
+          return [
+            this.typeMap[item.log_type] || item.log_type,
+            item.create_time,
+            item.batch_code,
+            item.goods_desc,
+            quantity
+          ];
+        });
+        
+        // 应用平台主题色
+        const typeColors = {
+          '批次入库': "#2ed47a", // 绿色
+          '批次出库': "#006b6b", // 红色
+          '取消出库': "#3c9aff", // 蓝色
+          '批次删除': "#ffb638", // 橘黄色
+          '批次更新': "#a3a1fb", // 紫色
+        };
+
+        while (tableData.length < 7) {
+          tableData.push(["-", "-", "-", "-", "-"]);
+        }
+        
+        const formattedData = tableData.map((row) => {
+          const type = row[0];
+          const quantity = row[4];
+          const isPositive = quantity.startsWith('+');
+          
+          return [
+            `<span style="color: ${typeColors[type] || "#fff"}">${type}</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: ${isPositive ? '#2ed47a' : '#ff6b6b'}">${quantity}</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-width: 300px;
 $box-height: 410px;
-
-.centreLeft1 {
+$box-width: 100%;
+.centerRight2 {
   padding: 16px;
+  padding-top: 20px;
   height: $box-height;
   width: $box-width;
-  border-radius: 10px;
+  border-radius: 5px;
   .bg-color-black {
     height: $box-height - 30px;
     border-radius: 10px;
@@ -127,38 +177,12 @@ $box-height: 410px;
   .text {
     color: #c3cbde;
   }
-  .dv-dec-3 {
-    position: relative;
-    width: 100px;
-    height: 20px;
-    top: -3px;
-  }
-
-  .bottom-data {
-    .item-box {
-      & > div {
-        padding-right: 5px;
-      }
-      font-size: 14px;
-      float: right;
-      position: relative;
-      width: 50%;
-      color: #d3d6dd;
-      .dv-digital-flop {
-        width: 120px;
-        height: 30px;
-      }
-      i {
-        font-size: 20px;
-        line-height: 30px;
-        margin-left: 20px;
-      }
-      .colorYellow {
-        color: yellowgreen;
-      }
-      p {
-        text-align: center;
-      }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 98%;
+      height: 340px;
     }
   }
 }