财务2.8 暂存

src/components/echart/baseOptions.js

@@ -1,3 +1,58 @@
-export const baseOptions={
-  
+export const baseOptions=()=>{
+  return {
+    title: {
+      text:'默认图表',
+      textStyle:{
+        fontSize:20,
+        fontWeight:500
+      },
+      left:'center'
+    },
+    legend:{
+      icon:'circle',
+      left:'center',
+      top:40,
+      textStyle:{
+        fontSize:14
+      },
+      itemStyle:{},
+      itemGap:34,
+      itemWidth:12
+    },
+    tooltip:{
+      textStyle:{
+        align:'left'
+      },
+      trigger:'axis'
+    },
+    grid:{
+      top:120,
+      bottom:60
+    },
+    color: ['#FF903E', '#FBE947'],
+    xAxis:{
+      type: 'category',
+      axisLabel: {
+        color: '#999', //更改坐标轴文字颜色
+        fontSize: 14, //更改坐标轴文字大小
+      }
+    },
+    yAxis: [{
+      name:'万元',
+      type: 'value',
+      nameGap:20,
+      splitNumber:10,
+      alignTicks:true,
+      nameTextStyle:{
+        align:'right',
+        color:'#999'
+      },
+      axisLabel:{
+        color:'#999',
+        formatter:(value)=>{
+          return Math.round(value*10)/100000
+        }
+      }
+    }]
+  }
 }

src/components/echart/index.vue

@@ -1,7 +1,7 @@
 <script setup>
   import * as echarts from 'echarts/core';
   // 引入柱状图图表，图表后缀都为 Chart
-  import { BarChart } from 'echarts/charts';
+  import { BarChart,LineChart } from 'echarts/charts';
   // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
   import {
     TitleComponent,
@@ -13,8 +13,7 @@
   // 标签自动布局、全局过渡动画等特性
   import { LabelLayout, UniversalTransition } from 'echarts/features';
   // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
-  import { CanvasRenderer } from 'echarts/renderers';
-
+  import { SVGRenderer } from 'echarts/renderers';
 
   // 注册必须的组件
   echarts.use([
@@ -24,9 +23,10 @@
     DatasetComponent,
     LegendComponent,
     BarChart,
+    LineChart,
     LabelLayout,
     UniversalTransition,
-    CanvasRenderer
+    SVGRenderer
   ]);
 
   const chartProp=defineProps({
@@ -39,73 +39,7 @@
       default:''
     }
   })
-  watch(()=>chartProp.options,(newVal)=>{
-    console.log(newVal,'newVal');
-  },{deep:true})
   
-  const defaultOptions=reactive({
-    title: {
-      text:'开票到款统计图',
-      textStyle:{
-        fontSize:20,
-        fontWeight:500
-      },
-      left:'center'
-    },
-    legend:{
-      icon:'circle',
-      left:'center',
-      top:40,
-      textStyle:{
-        fontSize:14
-      },
-      itemGap:34,
-      itemWidth:12
-    },
-    tooltip:{
-      textStyle:{
-        align:'left'
-      }
-    },
-    grid:{
-      top:120
-    },
-    color: ['#FF903E', '#FBE947'],
-    xAxis:{
-      type: 'category',
-      data:dateData,
-      axisLabel: {
-        color: '#999', //更改坐标轴文字颜色
-        fontSize: 14, //更改坐标轴文字大小
-      },
-    },
-    yAxis: {
-      name:'万元',
-      type: 'value',
-      nameGap:20,
-      splitNumber:10,
-      nameTextStyle:{
-        align:'right',
-        color:'#999'
-      },
-      axisLabel:{
-        color:'#999',
-        formatter:(value)=>{
-          return Math.round(value*10)/100000
-        }
-      }
-    },
-    series:[{
-      data: invoiceData,
-      type: 'bar',
-      name:'开票金额'
-    },
-    {
-      data: placementData,
-      type: 'bar',
-      name:'到款金额'
-    }]
-  })
 
   const barChartRef = ref(null)
   let barChart = null
@@ -114,13 +48,20 @@
     barChart.resize();
   }
 
-    const chartDraw=(invoiceData,placementData,dateData)=>{
-    console.log(barChartRef.value);
-    barChart = echarts.init(barChartRef.value)
-    barChart.setOption(defaultOptions)
-    window.addEventListener('resize', resizeChart);
+  const chartDraw=(option)=>{
+    nextTick(()=>{
+      barChart = echarts.init(barChartRef.value)
+      barChart.setOption(option)
+      window.addEventListener('resize', resizeChart);
+    })
   }
 
+  watch(()=>chartProp.options,(newVal)=>{
+    console.log(newVal,'newVal');
+    if(!newVal.series) return 
+    chartDraw(newVal)
+  },{deep:true})
+
   onUnmounted(()=>{
     barChart?.dispose()
     window.removeEventListener('resize', resizeChart);
@@ -128,7 +69,7 @@
 </script>
 
 <template>
-    <div ref="barChartRef"></div>
+    <div ref="barChartRef" style="height: 100%;"></div>
 </template>
   
 <style lang="scss" scoped>

src/styles/main.scss

@@ -85,6 +85,7 @@ div::-webkit-scrollbar-corner {
   border: 1px solid $themeColor;
   font-size: 16px;
   width: 130px;
+  cursor: pointer;
 }
 // 主题按钮 - 大
 .main-button-large{

src/views/dashboard/index.vue

@@ -3,11 +3,12 @@
   import {getStatistic} from '@/api/dashboard'
   import chart from '@/components/echart/index.vue'
   import {useRouter} from 'vue-router'
-
+  import {baseOptions} from '@/components/echart/baseOptions'
   
   const router = useRouter()
-
-
+  const basicOptions=baseOptions()
+  const chartOptions=ref()
+  
   const paymentNavigator=()=>{
     // 去往商品到款统计页面
     router.push('/financialStatistics/commodityPayment')
@@ -15,15 +16,22 @@
 
   const getChartData=()=>{
     getStatistic().then(res=>{
-      nextTick(()=>{
-        chartDraw(res.data.ContractMoney || [],res.data.ArrivalMoney || [],res.data.Date || [])
-      })
+      let invoiceData=res.data.Date.map((item,index)=> [item,res.data.ContractMoney[index]])
+      let paymentData=res.data.Date.map((item,index)=> [item,res.data.ArrivalMoney[index]])
+      basicOptions.title.text = '开票到款统计图'
+      basicOptions.series=[
+        {data: invoiceData,
+        type: 'bar',
+        name:'开票金额'},
+        {data: paymentData,
+        type: 'bar',
+        name:'到款金额'}
+      ]
+      chartOptions.value=basicOptions
     })
   }
 
-  onMounted(()=>{
-    getChartData()
-  })
+  getChartData()
 
 
 </script>
@@ -40,7 +48,7 @@
       </div>
 
       <div class="bar-chart">
-        <chart />
+        <chart :options="chartOptions"/>
       </div>
     </div>
 </template>

src/views/financialStatistics/businessIncome.vue

@@ -0,0 +1,195 @@
+<script setup>
+  import {downloadByFlow} from '@/utils/common-methods'
+  import {getSellerList} from '@/api/crm'
+
+  import chart from '@/components/echart/index.vue'
+  import {baseOptions} from '@/components/echart/baseOptions'
+
+  const basicOptions=baseOptions()
+
+
+  const dimensionArray=[{label:'月度',tag:1},{label:'季度',tag:2},{label:'半年度',tag:3},{label:'年度',tag:4},{label:'月度累计',tag:5}]
+  const customerTypeArray=[{label:'全部',value:-1},{label:'新客户',value:1},{label:'老客户',value:0}]
+  const sellerArray=ref(null)
+
+  const searchParams=reactive({
+    dimension:1,
+    customerType:-1,
+    start_date:'',
+    end_date:'',
+    sellerIds:''
+  })
+  const chartOptions=ref(null)
+  
+  const invoiceTime=ref(null)
+  watch(invoiceTime,(value)=>{
+    if(!value){
+      searchParams.start_date=searchParams.end_date = ''
+    }else{
+      searchParams.start_date = value[0]
+      searchParams.end_date=value[1]
+    }
+    getList()
+  })
+
+  const sellersCheckList=ref(null)
+  watch(sellersCheckList,(value)=>{
+    if(!value){
+      searchParams.sellerIds = ''
+    }else{
+      searchParams.sellerIds = value.join(',')
+    }
+    getList()
+  })
+
+  const getSellerData=()=>{
+    getSellerList().then(res=>{
+      sellerArray.value = res.data?.all_list || []
+    })
+  }
+
+  const getList=()=>{
+    console.log(searchParams);
+    setChartOptions()
+  }
+  const setChartOptions=()=>{
+    nextTick(()=>{
+      basicOptions.title.text = "业务收入金额统计图"
+      basicOptions.title.textStyle.color='#333333'
+      // x轴配置
+      basicOptions.xAxis.axisLabel.align='center' 
+      basicOptions.xAxis.axisLabel.rotate=45
+      basicOptions.xAxis.axisLabel.margin=27
+      // Y轴配置
+      basicOptions.yAxis[0].splitLine={
+        lineStyle:{
+          type:'dashed'
+        }
+      }
+      basicOptions.yAxis[0].splitNumber=8
+      basicOptions.yAxis.push({
+        alignTicks:true,
+        axisLabel:{
+          color:'#999'
+        },
+        splitLine:{
+          show:false
+        },
+        splitNumber:8
+      })
+       
+      // 数据配置
+      basicOptions.series=[
+        {
+          data: [['2020/01',100],['2020/02',345],['2020/03',100],['2020/04',345],['2020/05',100],['2020/06',345],['2020/07',100],['2020/08',345],
+          ['2020/09',100],['2020/10',345],['2020/11',100],['2020/12',345],['2021/01',100],['2021/02',345],
+          ['2021/03',100],['2021/04',345],['2021/05',100],['2021/06',345],['2021/07',100],['2021/08',345],
+          ['2021/09',100],['2021/10',345],['2021/11',100],['2021/12',345],['2022/01',100],['2022/02',345],
+          ['2022/03',100],['2022/04',345],['2022/05',100],['2022/06',345],['2022/07',100],['2022/08',345],
+          ['2022/09',100],['2022/10',345],['2022/11',100],['2022/12',345],['2023/01',100],['2023/02',345],['2023/03',100],['2023/04',345],['2023/05',100]],
+          type: 'bar',
+          name:'业务收入金额'
+        },
+        {
+          data: [['2020/01',0.5],['2020/02',-0.3],['2020/03',0.5],['2020/04',-0.3],['2020/05',0.5],['2020/06',-0.3],['2020/07',0.5],['2020/08',-0.3],
+          ['2020/09',0.5],['2020/10',-0.3],['2020/11',0.5],['2020/12',-0.3],['2021/01',0.5],['2021/02',-0.3],
+          ['2021/03',0.5],['2021/04',-0.3],['2021/05',0.5],['2021/06',-0.3],['2021/07',0.5],['2021/08',-0.3],
+          ['2021/09',0.5],['2021/10',-0.3],['2021/11',0.5],['2021/12',-0.3],['2022/01',0.5],
+          ['2022/02',-0.3],['2022/03',0.5],['2022/04',-0.3],['2022/05',0.5],['2022/06',-0.3],['2022/07',-0.3],['2022/08',0.5],
+          ['2022/09',-0.3],['2022/10',0.5],['2022/11',-0.3],['2022/12',0.5],['2023/01',-0.3],['2023/02',0.5],['2023/03',-0.3],['2023/04',0.5],['2023/05',-0.3]],
+          type: 'line',
+          lineStyle:{
+            width:5
+          },
+          yAxisIndex:1,
+          name:'同比值',
+          symbolSize:5,
+        }
+      ]
+      chartOptions.value=basicOptions
+      // console.log(chartOptions.value);
+    })
+  }
+
+  const exportData=()=>{
+    console.log(searchParams);
+    downloadByFlow(null,'xlxs','业务收入金额统计')
+  }
+
+  getSellerData()
+  getList()
+
+</script>
+
+<template>
+    <div class="business-income-container" id="business-income-container">
+      <div class="business-income-top">
+        <div class="business-income-search-zone">
+          <el-radio-group v-model="searchParams.dimension" size="large" @change="getList"
+          style="margin: 0 30px 8px 0;">
+            <el-radio-button v-for="item in dimensionArray" :key="item.tag" class="dimension-radio"
+            :label="item.tag" >{{ item.label }}</el-radio-button>
+          </el-radio-group>
+          <el-radio-group v-model="searchParams.customerType" size="large" @change="getList"
+          style="margin: 0 30px 8px 0;">
+            <el-radio-button v-for="item in customerTypeArray" :key="item.value" class="dimension-radio"
+            :label="item.value" >{{ item.label }}</el-radio-button>
+          </el-radio-group>
+          <el-date-picker v-model="invoiceTime" type="monthrange"
+          start-placeholder="开始日期" end-placeholder="结束日期" style="max-width: 238px;margin:0 30px 8px 0;"
+          value-format="YYYY-MM-DD"></el-date-picker>
+          <el-cascader :options="sellerArray" v-model="sellersCheckList" clearable placeholder="请选择销售"
+          collapse-tags :show-all-levels="false" collapse-tags-tooltip key="seller" filterable 
+          style="max-width: 238px;margin:0 30px 8px 0;"
+          :props="{multiple:true,label:'seller_name',value:'seller_id',children:'child',emitPath:false}" ></el-cascader>
+        </div>
+        <el-button @click="exportData" type="primary" size="large" style="width: 118px;">导出数据</el-button>
+      </div>
+      <div class="business-income-chart">
+        <chart :options="chartOptions" style="width: 75%;height: 80%;"/>
+      </div>
+    </div>
+</template>
+  
+<style lang="scss" scoped>
+  .business-income-container{
+    min-height: calc(100vh - 120px);
+    box-sizing: border-box;
+    .business-income-top{
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 20px;
+      .business-income-search-zone{
+        display: flex;
+        flex-wrap: wrap;
+      }
+    }
+    .business-income-chart{
+      border: 1px solid #DCDFE6;
+      background-color: white;
+      height: calc(100vh - 190px);
+      padding: 20px 30px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+  }
+</style>
+<style lang="scss">
+  #business-income-container{
+    .dimension-radio{
+      span{
+        display: inline-block;
+        color: $hitTextColorTwo;
+        padding: 12px 12px;
+      }
+    }
+    .is-active{
+      span{
+        color:white
+      }
+    }
+  }
+</style>