1.首页开发联调

gaoluyang

6 天以前 75784e6ec3f6546650ee92ad69fdd270d1ebd0a7

 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>