From 7c0cf93ddd8a2e653f1da72f2ce94cf3e47ebfc9 Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Sun, 25 Jun 2023 16:53:41 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/reports/components/echartsLine.vue | 100 +++++++++++++++++++
 src/views/reports/outbounds.vue              |  46 +++++++++
 src/views/reports/stocks.vue                 |  46 +++++++++
 3 files changed, 192 insertions(+)
 create mode 100644 src/views/reports/components/echartsLine.vue
 create mode 100644 src/views/reports/outbounds.vue
 create mode 100644 src/views/reports/stocks.vue

diff --git a/src/views/reports/components/echartsLine.vue b/src/views/reports/components/echartsLine.vue
new file mode 100644
index 0000000..9be419a
--- /dev/null
+++ b/src/views/reports/components/echartsLine.vue
@@ -0,0 +1,100 @@
+<template>
+  <div style="width:100%;height:100%" ref="chartsDOM">
+
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts';
+  export default {
+  props:{
+    lineDataX:{
+      type:Array,
+      default:{}
+    },
+    lineDataY:{
+      type:Array,
+      default:{}
+    },
+    rotate:{
+      type:Number,
+      default:0
+    },
+    color:{
+      type:Array,
+      default:()=>{
+        return ['#0077CC','#333']
+      }
+    }
+  },
+    data() {
+      return {
+        myChart: null
+      }
+    },
+    mounted() {
+      this.initEchartsMap()
+    },
+    methods: {
+      initEchartsMap() {
+        this.myChart = echarts.init(this.$refs["chartsDOM"]);
+        var option = {
+          color: [this.color[0]],
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: { // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          grid: {
+            left: '8%',
+            right: '8%',
+            bottom: '8%',
+            top: "8%",
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            data: this.lineDataX,
+            axisTick: {
+              alignWithLabel: true
+            },
+            axisLabel: {
+              show:true,
+              interval: 0,
+              rotate: this.rotate,
+              textStyle: {
+                show: true,
+                color: this.color[1]
+              },
+            }
+          }],
+          yAxis: [{
+            type: 'value',
+            axisLabel: {
+              textStyle: {
+                show: true,
+                color: this.color[1]
+              },
+            }
+          }],
+          series: [{
+            name: '数量',
+            type: 'bar',
+            barWidth: '60%',
+            data: this.lineDataY
+          }]
+        };
+        this.myChart.setOption(option);
+      },
+      resetCharts() {
+        this.myChart.resize()
+      }
+    }
+
+
+  }
+</script>
+
+<style>
+</style>
diff --git a/src/views/reports/outbounds.vue b/src/views/reports/outbounds.vue
new file mode 100644
index 0000000..aadefad
--- /dev/null
+++ b/src/views/reports/outbounds.vue
@@ -0,0 +1,46 @@
+<template>
+  <div style="padding: 0 20px">
+
+    <div ref="lxHeader">
+      <lx-header icon="md-apps" text="出库统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+      </lx-header>
+    </div>
+    <div class="wrap" :style="{'height':mapHeight+'px'}">
+      <echartsLine ref="echartsLine1" :rotate="60" :lineDataX='monthX' :lineDataY='monthY'></echartsLine>
+    </div>
+  </div>
+</template>
+
+<script>
+  import echartsLine from "@/views/reports/components/echartsLine.vue";
+  export default {
+    components: {
+      echartsLine
+    },
+    data(){
+      return{
+        mapHeight:0,
+        monthX: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+        monthY: [5, 6, 7, 8, 9, 10, 12, 5, 6, 7, 8, 9],
+      }
+
+    },
+    created(){
+      this.initHeight()
+    },
+    methods: {
+      initHeight() {
+        let winHeight = document.body.clientHeight
+        this.mapHeight = winHeight - 50 - 20
+        console.log(winHeight)
+      },
+    },
+
+  }
+</script>
+
+<style>
+  .wrap{
+    width:100%;
+  }
+</style>
diff --git a/src/views/reports/stocks.vue b/src/views/reports/stocks.vue
new file mode 100644
index 0000000..c3d71a8
--- /dev/null
+++ b/src/views/reports/stocks.vue
@@ -0,0 +1,46 @@
+<template>
+  <div style="padding: 0 20px">
+
+    <div ref="lxHeader">
+      <lx-header icon="md-apps" text="入库统计" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+      </lx-header>
+    </div>
+    <div class="wrap" :style="{'height':mapHeight+'px'}">
+      <echartsLine ref="echartsLine1" :rotate="60" :lineDataX='monthX' :lineDataY='monthY'></echartsLine>
+    </div>
+  </div>
+</template>
+
+<script>
+  import echartsLine from "@/views/reports/components/echartsLine.vue";
+  export default {
+    components: {
+      echartsLine
+    },
+    data(){
+      return{
+        mapHeight:0,
+        monthX: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
+        monthY: [5, 6, 7, 8, 9, 10, 12, 5, 6, 7, 8, 9],
+      }
+
+    },
+    created(){
+      this.initHeight()
+    },
+    methods: {
+      initHeight() {
+        let winHeight = document.body.clientHeight
+        this.mapHeight = winHeight - 50 - 20
+        console.log(winHeight)
+      },
+    },
+
+  }
+</script>
+
+<style>
+  .wrap{
+    width:100%;
+  }
+</style>