分析图表

src/components/FinancialModule/DataAnalysis/components/corporationChart.vue

+<template>
+  <div style="margin-bottom: 20px; ">
+    <div class="echartsBox">
+      <div class="titleBox text-center row" style="margin-bottom: 5px;">
+        <h3>公司统计</h3>
+        <div style="margin-left: 20px;">
+          <el-tag size="small" effect="dark"
+          style="margin-right: 5px;cursor: pointer;"
+          :type="Current==item.ID?'danger':'info'" v-for="(item,index) in types"
+          @click="Current=item.ID,BranchChart()">{{item.Name}}</el-tag>
+
+        </div>
+      </div>
+      <div style="background: #fff;">
+        <div id="BranchAnalysisChart"
+        :style="{width: '', height: '520px'}"></div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  props:['StatisticalData'],
+  data() {
+    return {
+      MonthList: [],//月份列表
+      BranchAnalysisData: [],
+      colorList:['#089bab','#FFA171','#72b8ff','#ff9cc6','#7b78ff','#28cc90','#ee8fff','#5cf2ff','#ff9a00','#4fc4f7','#738eff','#b0edff',
+      '#E43939','#F79A2C','#FFF60B','#3DD948','#39CAE4','#2C31F1','#7A39E4','#E65FC1','#D0B478','#000000','#BABABA',],
+      types:[
+        {Name: '收入',ID:1},
+        {Name: '收入占比 %',ID:2},
+        {Name: '毛利',ID:3},
+        {Name: '毛利率 %',ID:4},
+        {Name: '实际利润',ID:5},
+        {Name: '实际利率 %',ID:6},
+      ],
+      Current: 1,
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    BranchChart(){
+      let that = this
+      let titles = this.BranchAnalysisData.map(x=>{return x.Name})
+      let datas = []
+
+
+      let chartDom = document.getElementById('BranchAnalysisChart');
+      let myChart = this.$echarts.init(chartDom);
+      let option;
+
+      option = {
+          color:that.colorList,
+          tooltip: {
+            backgroundColor:'transparent',
+            trigger: 'axis',
+            axisPointer: {
+                type: 'none',
+                label: {
+                    // backgroundColor: '#6a7985'
+                }
+            },
+            position: function (point, params, dom, rect, size) {
+                return [point[0]-50, point[1]-dom.offsetHeight];
+            },
+            formatter: function(params) {
+                  var res = `<div style="background:${params.color};position:relative;padding:6px 10px;border-radius:8px;">
+                    ${params.seriesName}:${params.data}
+                    <div style="position: absolute;bottom: -8px;left: 35%;width:0;
+                      height:0;
+                      border-left:8px solid transparent;
+                      border-right:8px solid transparent;
+                      border-top:8px solid ${params.color};">
+                    </div>
+                  <div>`
+                return res;
+              }
+          },
+          legend: {
+            x:'left',
+            y:'bottom',
+            type:'scroll',
+            icon: "circle",
+            padding:  [5, 30, 20, 30] ,
+            type:'scroll',
+            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+          },
+          grid: {
+            left: 15, // 默认10%，给24就挺合适的。
+            top: 30, // 默认60
+            right: 15, // 默认10%
+            bottom: 70, // 默认60
+            containLabel: true
+          },
+          toolbox: {
+            feature: {
+              saveAsImage: {}
+            }
+          },
+          xAxis : [
+              {
+                type : 'category',
+                boundaryGap: false,
+                data :this.MonthList,
+                axisLine: {
+                  lineStyle: {
+                    // 设置x轴颜色
+                    color: "transparent"
+                  }
+                },
+                axisLabel: {
+                  textStyle: {
+                    color: "#333333"
+                  }
+                },
+
+              }
+          ],
+          yAxis : [
+              {
+                type : 'value',
+                axisLine: {
+                  lineStyle: {
+                    // 设置x轴颜色
+                    color: "transparent",
+                    width: 1,
+                  }
+                },
+                axisLabel: {
+                  textStyle: {
+                    color: "#969696"
+                  }
+                },
+                splitLine:{
+                show:true,
+                  lineStyle:{
+                      // type:'dashed'
+                      color:'#EEEEEE',
+                    }
+                }
+              }
+          ],
+          series: [
+            {
+              name: 'Email',
+              type: 'line',
+              stack: 'Total',
+              data: [120, 132, 101, 134, 90, 230, 210]
+            },
+            {
+              name: 'Union Ads',
+              type: 'line',
+              stack: 'Total',
+              data: [220, 182, 191, 234, 290, 330, 310]
+            },
+            {
+              name: 'Video Ads',
+              type: 'line',
+              stack: 'Total',
+              data: [150, 232, 201, 154, 190, 330, 410]
+            },
+            {
+              name: 'Direct',
+              type: 'line',
+              stack: 'Total',
+              data: [320, 332, 301, 334, 390, 330, 320]
+            },
+            {
+              name: 'Search Engine',
+              type: 'line',
+              stack: 'Total',
+              data: [820, 932, 901, 934, 1290, 1330, 1320]
+            }
+          ]
+      };
+      myChart.setOption(option,true)
+    }
+  },
+  watch: {
+    StatisticalData:{
+      handler(n,o){
+        this.MonthList = n.MonthList//月份列表
+        this.BranchAnalysisData = n.BranchAnalysisData
+        this.BranchChart()
+      },
+      deep: true,
+      immediate: false,
+    }
+  },
+}
+</script>
+
+<style scoped>
+/deep/.LineAnalysisDataBJ tr td:nth-child(1n){
+  background: #F5F7FA;
+}
+/deep/.LineAnalysisDataBJ tr td:nth-child(2n){
+  background: #fff;
+}
+/deep/.LineAnalysisDataBJ tr th{
+  background: #F5F7FA;
+}
+/deep/.el-table.LineAnalysisDataBJ tr:first-child th:first-child{
+  background: #F5F7FA;
+}
+/deep/.el-table.LineAnalysisDataBJ tr:nth-child(2) th:nth-child(1n){
+  /* background: #fff; */
+}
+/deep/.el-table.LineAnalysisDataBJ tr:nth-child(2) th:nth-child(2n){
+  background: #F5F7FA;
+}
+/deep/.el-table.LineAnalysisDataBJ tr:first-child th{
+  background: #fff;
+}
+/deep/.el-table.LineAnalysisDataBJ2 tr:first-child th:nth-child(1n){
+  background: #F5F7FA;
+}
+/deep/.el-table.LineAnalysisDataBJ2 tr:first-child th:nth-child(2n){
+  background: #fff;
+}
+/deep/.el-table.LineAnalysisDataBJ tr th{
+  height: 20px;
+  line-height: 20px;
+  padding: 5px 0;
+}
+/deep/.el-table.LineAnalysisDataBJ2 tr th{
+  height: 20px;
+  line-height: 20px;
+  padding: 5px 0;
+}
+/deep/.el-table.LineAnalysisDataBJ tr td{
+  height: 20px;
+  line-height: 20px;
+  padding: 5px 0;
+}
+/deep/.el-table.LineAnalysisDataBJ2 tr td{
+  height: 20px;
+  line-height: 20px;
+  padding: 5px 0;
+}
+.titleBox{
+  padding: 0 5px 5px 5px;
+}
+.row{
+  display: flex;
+}
+.echartsBox{
+  width: 100%;
+}
+</style>

src/components/FinancialModule/DataAnalysis/components/packetChart.vue

+<template>
+  <div style="margin-bottom: 20px;">
+    <h3 class="text-center" style="margin-bottom: 5px;">出境日本线（已出团）</h3>
+
+    <h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">日本小包团（已出团）</h3>
+
+    <h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">日本常规团（已出团）</h3>
+
+    <h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">常规团毛利率分析（已出团）</h3>
+
+    <h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">常规团实际利率分析（已出团）</h3>
+
+    <h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">常规团房费分析（已出团）</h3>
+
+  </div>
+</template>
+
+<script>
+export default {
+  props:['StatisticalData'],
+  data() {
+    return {
+      MonthList: [],//月份列表
+      JapanAllData: [],
+      JapanXBData: [],
+      JapanSPData: [],
+      MaoLiAnalysisData: [],
+      SJLLAnalysisData: [],
+      RoomAnalysisData: [],
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+
+  },
+  watch: {
+    StatisticalData:{
+      handler(n,o){
+        this.MonthList = n.MonthList//月份列表
+        this.JapanAllData = n.JapanAllData
+        this.JapanXBData = n.JapanXBData
+        this.JapanSPData = n.JapanSPData
+        this.MaoLiAnalysisData = n.MaoLiAnalysisData
+        this.SJLLAnalysisData = n.SJLLAnalysisData
+        this.RoomAnalysisData = n.RoomAnalysisData
+      },
+      deep: true,
+      immediate: false,
+    }
+  },
+}
+</script>
+
+<style scoped>
+/deep/.LineAnalysisDataBJ3 tr th{
+  background: #F5F7FA;
+}
+/deep/.el-table.LineAnalysisDataBJ tr:first-child th{
+  background: #fff !important;
+}
+/deep/.el-table.LineAnalysisDataBJ tr:first-child th:first-child{
+  background: #F5F7FA !important;
+}
+/deep/.el-table.LineAnalysisDataBJ tr:nth-child(2) th:first-child{
+  background: #F5F7FA;
+}
+/deep/.el-table.LineAnalysisDataBJ tr td:first-child{
+  background: #F5F7FA !important;
+}
+/deep/.el-table.LineAnalysisDataBJ tr th{
+  height: 20px;
+  line-height: 20px;
+  padding: 5px 0;
+}
+/deep/.el-table.LineAnalysisDataBJ2 tr th{
+  height: 20px;
+  line-height: 20px;
+  padding: 5px 0;
+}
+/deep/.el-table.LineAnalysisDataBJ3 tr th{
+  height: 20px;
+  line-height: 20px;
+  padding: 5px 0;
+}
+/deep/.el-table.LineAnalysisDataBJ tr td{
+  height: 20px;
+  line-height: 20px;
+  padding: 5px 0;
+}
+/deep/.el-table.LineAnalysisDataBJ2 tr td{
+  height: 20px;
+  line-height: 20px;
+  padding: 5px 0;
+}
+/deep/.el-table.LineAnalysisDataBJ3 tr td{
+  height: 20px;
+  line-height: 20px;
+  padding: 5px 0;
+}
+</style>

src/components/FinancialModule/DataAnalysis/index.vue

@@ -130,6 +130,7 @@ export default {
   components: {Lines,Corporations,Packets},
   data() {
     return {
+      coinGetShow: false,
       loading: false,
       activeName: 1,
       msg:{
@@ -212,7 +213,7 @@ export default {
               this.coinGetShow = true
               this.msg.StandardCurrencyId = -1
             }
-            this.getPageList();
+            this.getStatement();
         }
       })
     },

src/router/config.js

@@ -4545,6 +4545,14 @@ export default {
                 title: '团队营收数据分析'
               },
             },
+            { //财务 团队营收数据分析图表
+              path: '/DataAnalysisChart',
+              name: 'DataAnalysisChart',
+              component: resolve => require(['@/components/FinancialModule/DataAnalysis/indexChart'], resolve),
+              meta: {
+                title: '团队营收数据分析图表'
+              },
+            },
             { //金蝶对接 金蝶币种
               path: '/KingdeeCurrency',
               name: 'KingdeeCurrency',