1.首页开发联调

gaoluyang

5 天以前 75784e6ec3f6546650ee92ad69fdd270d1ebd0a7

1.首页开发联调

 src/api/viewIndex.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,45 @@
// é¦–页接口
import request from '@/utils/request'

// æœ¬æœˆåˆåŒé‡‘额
export const getContractAmount = () => {
    return request({
        url: '/sales/ledger/getContractAmount',
        method: 'get'
    })
}
// æœ¬æœˆå¼€ç¥¨é‡‘额
export const getInvoiceAmount = () => {
    return request({
        url: '/invoiceLedger/getInvoiceAmount',
        method: 'get'
    })
}
// æœ¬æœˆå›žæ¬¾é‡‘额
export const getReceiptAmount = () => {
    return request({
        url: '/receiptPayment/getReceiptAmount',
        method: 'get'
    })
}
// å®¢æˆ·åˆåŒé‡‘额TOP5统计
export const getTopFiveList = () => {
    return request({
        url: 'sales/ledger/getTopFiveList',
        method: 'get'
    })
}
// å›žæ¬¾é¥¼çŠ¶å›¾
export const getAmountMouth = () => {
    return request({
        url: 'receiptPayment/getAmountMouth',
        method: 'get'
    })
}
// å›žæ¬¾é¥¼çŠ¶å›¾
export const paymentMonthList = () => {
    return request({
        url: '/purchase/paymentRegistration/paymentMonthList',
        method: 'get'
    })
}

 src/components/Echarts/echarts.vue

@@ -51,15 +51,15 @@
  },
  lineColors: {
    type: Array,
    default: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
    default: () => []
  },
  barColors: {
    type: Array,
    default: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
    default: () => []
  },
  pieColors: {
    type: Array,
    default: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
    default: () => []
  },
  loadingOption: {
    type: Object,
@@ -73,30 +73,34 @@
  }
})

import { watch } from 'vue'

// Refs
const chartRef = ref(null)
let chartInstance = null

// Methods
function generateChart(option) {
  if (option.series && option.series.length > 0) {
    option.series.forEach((s, index) => {
      if (s.type === 'line') {
        s.itemStyle = {
          color: props.lineColors[index] || props.lineColors[0]
        }
        s.lineStyle = {
          color: props.lineColors[index] || props.lineColors[0]
        }
      } else if (s.type === 'bar') {
        s.itemStyle = {
          color: props.barColors[index] || props.barColors[0]
        }
      }
    })
  }
  const copiedOption = JSON.parse(JSON.stringify(option)) // âœ… æ·±æ‹·è´
  
  chartInstance.setOption(option)
  // if (copiedOption.series && copiedOption.series.length > 0) {
  //   copiedOption.series.forEach((s, index) => {
  //     if (s.type === 'line') {
  //       s.itemStyle = {
  //         color: props.lineColors[index] || props.lineColors[0]
  //       }
  //       s.lineStyle = {
  //         color: props.lineColors[index] || props.lineColors[0]
  //       }
  //     } else if (s.type === 'bar') {
  //       s.itemStyle = {
  //         color: props.barColors[index] || props.barColors[0]
  //       }
  //     }
  //   })
  // }
  
  chartInstance.setOption(copiedOption)
}

function renderChart() {
@@ -136,12 +140,13 @@
})

// Watch all reactive props that affect the chart
watchEffect(() => {
  // é¿å…åœ¨ mounted å‰è§¦å‘
  if (chartInstance) {
    renderChart()
  }
}, {
  flush: 'post'
})
watch(
    () => [props.xAxis, props.series],
    () => {
      if (chartInstance) {
        renderChart()
      }
    },
    { deep: true, immediate: true }
)
</script>

 src/views/index.vue

@@ -1,6 +1,6 @@
<template>

  <div class="app-container home">

    <div>

    <div style="display: flex;">

      <div>

        <div class="card-top-left">

          <div class="title">

@@ -9,21 +9,21 @@
          <div class="card-group">

            <div class="info-card">

              <div class="info-message">

                <div class="info-number">6789,000</div>

                <div class="info-number">{{contractAmount}}</div>

                <div class="info-title">合同金额(元)</div>

              </div>

              <img src="@/assets/images/icon1.png" alt="" style="width: 63px;height: 63px">

            </div>

            <div class="info-card1">

              <div class="info-message">

                <div class="info-number">6789,000</div>

                <div class="info-number">{{invoiceAmount}}</div>

                <div class="info-title">开票金额(元)</div>

              </div>

              <img src="@/assets/images/icon2.png" alt="" style="width: 63px;height: 63px">

            </div>

            <div class="info-card2">

              <div class="info-message">

                <div class="info-number">6789,000</div>

                <div class="info-number">{{receiptAmount}}</div>

                <div class="info-title">回款金额(元)</div>

              </div>

              <img src="@/assets/images/icon%203.png" alt="" style="width: 63px;height: 63px">

@@ -46,12 +46,12 @@
                </div>

                <div class="info-message2">

                  <div class="info-message1">

                    <div class="pie-title">本月回款数量</div>

                    <div class="pie-info"><span class="pie-number">8,000</span>元   <span class="pie-number">15.0</span>%</div>

                    <div class="pie-title">本月回款金额</div>

                    <div class="pie-info"><span class="pie-number">{{receiveAmount}}</span>元   <span class="pie-number">{{receiveAmountPercentage}}</span>%</div>

                  </div>

                  <div class="info-message1">

                    <div class="pie-title">应收款金额</div>

                    <div class="pie-info"><span class="pie-number">8,000</span>元   <span class="pie-number">15.0</span>%</div>

                    <div class="pie-info"><span class="pie-number">{{contractAmountMonth}}</span>元</div>

                  </div>

                </div>

              </div>

@@ -63,17 +63,17 @@
                           :options="options"

                           :legend="pieLegend"

                           :chartStyle="chartStyle"

                           :series="materialPieSeries"

                           :tooltip="pieTooltip"></Echarts>

                           :series="materialPieSeries1"

                           :tooltip="pieTooltip1"></Echarts>

                </div>

                <div class="info-message2">

                  <div class="info-message1">

                    <div class="pie-title">本月回款数量</div>

                    <div class="pie-info"><span class="pie-number">8,000</span>元   <span class="pie-number">15.0</span>%</div>

                    <div class="pie-title1">本月付款金额</div>

                    <div class="pie-info"><span class="pie-number1">{{paymentAmount}}</span>元   <span class="pie-number1">{{payableAmountPercentage}}</span>%</div>

                  </div>

                  <div class="info-message1">

                    <div class="pie-title">应收款金额</div>

                    <div class="pie-info"><span class="pie-number">8,000</span>元   <span class="pie-number">15.0</span>%</div>

                    <div class="pie-title1">应付款金额</div>

                    <div class="pie-info"><span class="pie-number1">{{payableAmount}}</span>元</div>

                  </div>

                </div>

              </div>

@@ -81,20 +81,72 @@
          </div>

        </div>

      </div>

      <div></div>

      <div>

        <div class="card-top-right">

          <div class="title">

            <span style="font-weight: bold">客户合同金额TOP5统计</span>

          </div>

          <div>

            <Echarts ref="chart"

                     :chartStyle="chartStyle1"

                     :grid="grid"

                     :legend="barLegend"

                     :series="barSeries"

                     :tooltip="tooltip"

                     :xAxis="xAxis1"

                     :yAxis="yAxis1"

                     style="height: 42vh;"></Echarts>

          </div>

        </div>

      </div>

    </div>

    <div>

    
      <div>

        <div class="card-bottom">

          <div class="title">

            <span style="font-weight: bold">回款、开票近半年走势图</span>

          </div>

          <div>

            <Echarts ref="chart"

                     :chartStyle="chartStyle1"

                     :grid="grid"

                     :legend="barLegend"

                     :series="lineSeries"

                     :tooltip="tooltip"

                     :xAxis="xAxis2"

                     :yAxis="yAxis2"

                     style="height: 27vh;"></Echarts>

          </div>

        </div>

      </div>

    </div>

  </div>

</template>



<script setup name="Index">

const { proxy } = getCurrentInstance()

import * as echarts from 'echarts';

import Echarts from "@/components/Echarts/echarts.vue";

import {

  getAmountMouth,

  getContractAmount,

  getInvoiceAmount,

  getReceiptAmount,

  getTopFiveList, paymentMonthList

} from "@/api/viewIndex.js";



const pieLegend = reactive({

  show: false,

})

const contractAmount = ref(0)

const invoiceAmount = ref(0)

const receiptAmount = ref(0)

const receiveAmount = ref(0)

const contractAmountMonth = ref(0)

const receiveAmountPercentage = ref(0)

const paymentAmount = ref(0)

const payableAmount = ref(0)

const payableAmountPercentage = ref(0)

const options = reactive({

  graphic: {

    type: 'circle',

@@ -103,19 +155,22 @@
    shape: {

      r: '70%' // åœ†å½¢åŠå¾„与饼图外圈相同

    },

    style: {

      fill: 'none',

      stroke: '#ccc', // ç°è‰²è¾¹æ¡†

      lineWidth: 2

    },

    z: -10 // ç¡®ä¿è¾¹æ¡†åœ¨é¥¼å›¾ä¸‹é¢

  }

})

const pieTooltip = reactive({

  trigger: 'item',

  formatter: function (params) {

    // åŠ¨æ€ç”Ÿæˆæç¤ºä¿¡æ¯ï¼ŒåŸºäºŽæ•°æ®é¡¹çš„ name å±žæ€§

    const description = params.name === '本月回款数量' ? '本月回款数量' : '应收款金额';

    const description = params.name === '本月回款金额' ? '本月回款金额' : '应收款金额';

    return `${description} ${formatNumber(params.value)}元 ${params.percent}%`;

  },

  position: 'right'

})

const pieTooltip1 = reactive({

  trigger: 'item',

  formatter: function (params) {

    // åŠ¨æ€ç”Ÿæˆæç¤ºä¿¡æ¯ï¼ŒåŸºäºŽæ•°æ®é¡¹çš„ name å±žæ€§

    const description = params.name === '本月付款金额' ? '本月付款金额' : '应付款金额';

    return `${description} ${formatNumber(params.value)}元 ${params.percent}%`;

  },

  position: 'right'

@@ -137,8 +192,26 @@
     show:false

    },

    data: [

      { value: 0, name: '本月回款数量', itemStyle: { color: '#2D99FF' }  },

      { value: 0, name: '本月回款金额', itemStyle: { color: '#2D99FF' }  },

      { value: 0, name: '应收款金额', itemStyle: { color: '#D4DDFF' } },

    ]

  }

])

const materialPieSeries1 = ref([

  {

    type: 'pie',

    radius: '92%',

    avoidLabelOverlap: false,

    itemStyle: {

      borderColor: '#fff',

      borderWidth: 2

    },

    label: {

     show:false

    },

    data: [

      { value: 0, name: '本月付款金额', itemStyle: { color: '#1EBFAC' }  },

      { value: 0, name: '应付款金额', itemStyle: { color: '#D0EFE1' } },

    ]

  }

])

@@ -146,6 +219,146 @@
  width: '150%',

  height: '120%' // è®¾ç½®å›¾è¡¨å®¹å™¨çš„高度

}

const chartStyle1 = {

  width: '100%',

  height: '100%' // è®¾ç½®å›¾è¡¨å®¹å™¨çš„高度

}

const grid = {

  show: false

}

const tooltip = {

  trigger: 'axis',

  axisPointer: {

    type: 'shadow'

  }

}

const yAxis1 = ref([

  {

    type: 'value',

  }

])

const xAxis1 = ref([

  {

    type: 'category',

    data: []

  }

])

const yAxis2 = ref([

  {

    type: 'value',

  }

])

const xAxis2 = ref([

  {

    type: 'category',

    data: []

  }

])

const barLegend = reactive({})

const barSeries = ref([

    {

      type: 'bar',

      data: [],

      label: {

        show: true

      },

    },

])

const lineSeries = ref([

    {

      type: 'line',

      data: [],

      label: {

        show: true

      },

    },

])

// åˆåŒé‡‘额

const getContractAmountNum = () => {

  getContractAmount().then((res) => {

    contractAmount.value = res.data

  })

}

// å¼€ç¥¨é‡‘额

const getInvoiceAmountNum = () => {

  getInvoiceAmount().then((res) => {

    invoiceAmount.value = res.data

  })

}

// å›žæ¬¾é‡‘额

const getReceiptAmountNum = () => {

  getReceiptAmount().then((res) => {

    receiptAmount.value = res.data

  })

}

// æœˆå›žæ¬¾é‡‘额饼图

const getAmountMouthNum = () => {

  getAmountMouth().then((res) => {

    receiveAmount.value = res.data.receiveAmount

    contractAmountMonth.value = res.data.contractAmount

    const percentage = (receiveAmount.value / contractAmountMonth.value) * 100;

    receiveAmountPercentage.value = percentage.toFixed(2)

    materialPieSeries.value[0].data[0].value = receiveAmount.value

    materialPieSeries.value[0].data[1].value = contractAmountMonth.value

  })

}

// æœˆä»˜æ¬¾é‡‘额饼图

const paymentMonthListNum = () => {

  paymentMonthList().then((res) => {

    paymentAmount.value = res.data.paymentAmount

    payableAmount.value = res.data.payableAmount

    const percentage = (paymentAmount.value / payableAmount.value) * 100;

    payableAmountPercentage.value = percentage.toFixed(2)

    materialPieSeries1.value[0].data[0].value = paymentAmount.value

    materialPieSeries1.value[0].data[1].value = payableAmount.value

  })

}

// å®¢æˆ·

const getTopFiveListNum = async () => {

  const res = await getTopFiveList()

  
  const customerName = []

  const totalAmount = []

  
  res.data.forEach(item => {

    customerName.push(item.customerName)

    totalAmount.push(item.totalAmount)

  })



// âœ… æ­£ç¡®å“åº”式赋值：创建新的 xAxis å’Œ series å¯¹è±¡

  xAxis1.value = [

    {

      type: 'category',

      data: customerName

    }

  ]

  
  barSeries.value = [

    {

      type: 'bar',

      data: totalAmount,

      itemStyle: {

        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

          { offset: 0, color: '#F7D2FF' },

          { offset: 1, color: '#826AF9' }

        ])

      },

      emphasis: {

        itemStyle: {

          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

            { offset: 1, color: '#826AF9' }

          ])

        }

      },

    }

  ]

}

getContractAmountNum()

getInvoiceAmountNum()

getReceiptAmountNum()

getTopFiveListNum()

getAmountMouthNum()

paymentMonthListNum()

</script>



<style scoped>

@@ -154,6 +367,21 @@
  background: #fff;

  height: 24vh;

  width: 56vw;

  margin-bottom: 20px;

}

.card-top-right {

  padding: 16px;

  background: #fff;

  height: 50.6vh;

  width: 28vw;

  margin-bottom: 20px;

  margin-left: 20px;

}

.card-bottom {

  padding: 16px;

  background: #fff;

  height: 34vh;

  width: 85.2vw;

  margin-bottom: 20px;

}

.title {

@@ -261,6 +489,23 @@
  left: 0; /* å®šä½åˆ°å·¦è¾¹ */

  top: 9px; /* åž‚直居中对齐，根据行高调整 */

}

.pie-title1 {

  font-size: 14px;

  line-height: 24px;

  color: #1EBFAC;

  padding-left: 16px;

  position: relative;

}

.pie-title1::before {

  content: '';

  width: 6px; /* è“ç‚¹çš„宽度 */

  height: 6px; /* è“ç‚¹çš„高度 */

  background-color: #1EBFAC; /* è“ç‚¹çš„颜色 */

  border-radius: 50%; /* å°†æ­£æ–¹å½¢å˜ä¸ºåœ†å½¢ */

  position: absolute;

  left: 0; /* å®šä½åˆ°å·¦è¾¹ */

  top: 9px; /* åž‚直居中对齐，根据行高调整 */

}

.pie-info {

  padding-left: 16px;

  font-size: 14px;

@@ -269,11 +514,8 @@
.pie-number {

  color: #2853FD;

}

.info-group {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

.pie-number1 {

  color: #1EBFAC;

}

</style>