Merge branch 'dev' of http://114.132.189.42:9002/r/product-inventory-manage...

曹睿

18 小时以前 e03b2546f020327bf9fd414d8869a9ccd2270c2d

 src/views/index.vue

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

            <div class="info-card">

              <div class="info-message">

                <div class="info-number">{{contractAmount}}</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">{{invoiceAmount}}</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">{{receiptAmount}}</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">

@@ -38,20 +38,18 @@
            <div class="card-group">

              <div class="pie-group">

                <div style="margin-right: 80px">

                  <Echarts ref="chart"

                           :legend="pieLegend"

                           :chartStyle="chartStyle"

                           :series="materialPieSeries"

                           :tooltip="pieTooltip"></Echarts>

                  <Echarts ref="chart" :legend="pieLegend" :chartStyle="chartStyle" :series="materialPieSeries"

                    :tooltip="pieTooltip"></Echarts>

                </div>

                <div class="info-message2">

                  <div class="info-message1">

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

                    <div class="pie-info"><span class="pie-number">{{receiveAmount}}</span>元   <span class="pie-number">{{receiveAmountPercentage}}</span>%</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">{{contractAmountMonth}}</span>元</div>

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

                  </div>

                </div>

              </div>

@@ -59,21 +57,18 @@
            <div class="card-group">

              <div class="pie-group">

                <div style="margin-right: 80px">

                  <Echarts ref="chart"

                           :options="options"

                           :legend="pieLegend"

                           :chartStyle="chartStyle"

                           :series="materialPieSeries1"

                           :tooltip="pieTooltip1"></Echarts>

                  <Echarts ref="chart" :options="options" :legend="pieLegend" :chartStyle="chartStyle"

                    :series="materialPieSeries1" :tooltip="pieTooltip1"></Echarts>

                </div>

                <div class="info-message2">

                  <div class="info-message1">

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

                    <div class="pie-info"><span class="pie-number1">{{paymentAmount}}</span>元   <span class="pie-number1">{{payableAmountPercentage}}</span>%</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-title1">应付款金额</div>

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

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

                  </div>

                </div>

              </div>

@@ -87,15 +82,8 @@
            <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>

            <Echarts ref="chart" :chartStyle="chartStyle1" :grid="grid" :legend="barLegend" :series="barSeries"

              :tooltip="tooltip" :xAxis="xAxis1" :yAxis="yAxis1" style="height: 42vh;"></Echarts>

          </div>

        </div>

      </div>

@@ -107,15 +95,8 @@
            <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>

            <Echarts ref="chart" :chartStyle="chartStyle1" :grid="grid" :legend="barLegend" :series="lineSeries"

              :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" style="height: 27vh;"></Echarts>

          </div>

        </div>

      </div>

@@ -128,6 +109,7 @@
import * as echarts from 'echarts';

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

import {

  getAmountHalfYear,

  getAmountMouth,

  getContractAmount,

  getInvoiceAmount,

@@ -189,10 +171,10 @@
      borderWidth: 2

    },

    label: {

     show:false

      show: false

    },

    data: [

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

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

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

    ]

  }

@@ -207,10 +189,10 @@
      borderWidth: 2

    },

    label: {

     show:false

      show: false

    },

    data: [

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

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

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

    ]

  }

@@ -224,13 +206,20 @@
  height: '100%' // 设置图表容器的高度

}

const grid = {

  show: false

  left: '2%', // 增大左侧留白

  right: '10%',

  bottom: '15%',

  top: '10%',

  containLabel: true // 确保包含标签

}

const tooltip = {

  trigger: 'axis',

  axisPointer: {

    type: 'shadow'

  }

}

const tooltipLine = {

  trigger: 'axis',

}

const yAxis1 = ref([

  {

@@ -256,22 +245,22 @@
])

const barLegend = reactive({})

const barSeries = ref([

    {

      type: 'bar',

      data: [],

      label: {

        show: true

      },

  {

    type: 'bar',

    data: [],

    label: {

      show: true

    },

  },

])

const lineSeries = ref([

    {

      type: 'line',

      data: [],

      label: {

        show: true

      },

  {

    type: 'line',

    data: [],

    label: {

      show: true

    },

  },

])

// 合同金额

const getContractAmountNum = () => {

@@ -313,26 +302,22 @@
    materialPieSeries1.value[0].data[1].value = payableAmount.value

  })

}

// 客户

// 客户top5

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 对象

  // 正确响应式赋值：创建新的 xAxis 和 series 对象

  xAxis1.value = [

    {

      type: 'category',

      data: customerName

    }

  ]

  
  barSeries.value = [

    {

      type: 'bar',

@@ -353,12 +338,97 @@
    }

  ]

}

// 线形图

const getAmountHalfYearNum = async () => {

  const res = await getAmountHalfYear()

  console.log(res)

  const monthName = []

  const receiptAmount = []

  const invoiceAmount = []

  res.data.forEach(item => {

    monthName.push(item.month)

    receiptAmount.push(item.receiptAmount)

    invoiceAmount.push(item.invoiceAmount)

  })

  // 正确响应式赋值：创建新的 xAxis 和 series 对象

  xAxis2.value = [

    {

      type: 'category',

      data: monthName

    }

  ]

  lineSeries.value = [

    {

      name: '开票',

      type: 'line',

      data: receiptAmount,

      smooth: true,

      stack: 'Total',

      areaStyle: {

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

          {

            offset: 0,

            color: 'rgba(131, 207, 255, 1)'

          },

          {

            offset: 1,

            color: 'rgba(186, 228, 255, 1)'

          }

        ])

      },

      // 设置小圆点的颜色

      itemStyle: {

        color: '#2D99FF', // 小圆点颜色设置为#2D99FF

        borderColor: '#2D99FF' // 如果需要的话，可以设置边框颜色

      },

      emphasis: {

        focus: 'series'

      },

      lineStyle: {

        width: 0

      },

      showSymbol: false,

    },

    {

      name: '回款',

      type: 'line',

      data: invoiceAmount,

      smooth: true,

      stack: 'Total',

      lineStyle: {

        width: 0

      },

      // 设置小圆点的颜色

      itemStyle: {

        color: '#83CFFF', // 小圆点颜色设置为#83CFFF

        borderColor: '#83CFFF' // 如果需要的话，可以设置边框颜色

      },

      showSymbol: false,

      areaStyle: {

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

          {

            offset: 0,

            color: 'rgba(54, 153, 255, 1)'

          },

          {

            offset: 1,

            color: 'rgba(89, 169, 254, 1)'

          }

        ])

      },

      emphasis: {

        focus: 'series'

      },

    }

  ]

}

getContractAmountNum()

getInvoiceAmountNum()

getReceiptAmountNum()

getTopFiveListNum()

getAmountMouthNum()

paymentMonthListNum()

getAmountHalfYearNum()

</script>



<style scoped>

@@ -369,6 +439,7 @@
  width: 56vw;

  margin-bottom: 20px;

}



.card-top-right {

  padding: 16px;

  background: #fff;

@@ -377,6 +448,7 @@
  margin-bottom: 20px;

  margin-left: 20px;

}



.card-bottom {

  padding: 16px;

  background: #fff;

@@ -384,6 +456,7 @@
  width: 85.2vw;

  margin-bottom: 20px;

}



.title {

  position: relative;

  font-size: 18px;

@@ -392,6 +465,7 @@
  padding-left: 10px;

  margin-bottom: 26px;

}



.title::before {

  position: absolute;

  left: 0;

@@ -399,12 +473,14 @@
  content: '';

  width: 4px;

  height: 18px;

  background-color: #3A7BFA;

  background-color: #002FA7;

  border-radius: 2px;

}



.card-group {

  display: flex;

}



.info-card {

  width: 300px;

  height: 126px;

@@ -414,6 +490,7 @@
  justify-content: space-around;

  align-items: center;

}



.info-card1 {

  width: 300px;

  height: 126px;

@@ -424,6 +501,7 @@
  justify-content: space-around;

  align-items: center;

}



.info-card2 {

  width: 300px;

  height: 126px;

@@ -433,12 +511,14 @@
  justify-content: space-around;

  align-items: center;

}



.info-message {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



.info-message1 {

  font-weight: bold;

  display: flex;

@@ -446,6 +526,7 @@
  justify-content: center;

  align-items: flex-start;

}



.info-message2 {

  font-weight: bold;

  display: flex;

@@ -453,25 +534,30 @@
  align-items: center;

  justify-content: space-around;

}



.info-number {

  font-weight: bold;

  font-size: 32px;

  color: #FFFFFF;

  margin-bottom: 10px;

}



.info-title {

  font-weight: bold;

  font-size: 18px;

  color: #FFFFFF;

}



.pie {

  display: flex;

  flex-direction: row;

  justify-content: space-around;

}



.pie-group {

  display: flex;

}



.pie-title {

  font-size: 14px;

  line-height: 24px;

@@ -479,16 +565,24 @@
  padding-left: 16px;

  position: relative;

}



.pie-title::before {

  content: '';

  width: 6px; /* 蓝点的宽度 */

  height: 6px; /* 蓝点的高度 */

  background-color: #2853FD; /* 蓝点的颜色 */

  border-radius: 50%; /* 将正方形变为圆形 */

  width: 6px;

  /* 蓝点的宽度 */

  height: 6px;

  /* 蓝点的高度 */

  background-color: #2853FD;

  /* 蓝点的颜色 */

  border-radius: 50%;

  /* 将正方形变为圆形 */

  position: absolute;

  left: 0; /* 定位到左边 */

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

  left: 0;

  /* 定位到左边 */

  top: 9px;

  /* 垂直居中对齐，根据行高调整 */

}



.pie-title1 {

  font-size: 14px;

  line-height: 24px;

@@ -496,26 +590,35 @@
  padding-left: 16px;

  position: relative;

}



.pie-title1::before {

  content: '';

  width: 6px; /* 蓝点的宽度 */

  height: 6px; /* 蓝点的高度 */

  background-color: #1EBFAC; /* 蓝点的颜色 */

  border-radius: 50%; /* 将正方形变为圆形 */

  width: 6px;

  /* 蓝点的宽度 */

  height: 6px;

  /* 蓝点的高度 */

  background-color: #1EBFAC;

  /* 蓝点的颜色 */

  border-radius: 50%;

  /* 将正方形变为圆形 */

  position: absolute;

  left: 0; /* 定位到左边 */

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

  left: 0;

  /* 定位到左边 */

  top: 9px;

  /* 垂直居中对齐，根据行高调整 */

}



.pie-info {

  padding-left: 16px;

  font-size: 14px;

  line-height: 24px;

}



.pie-number {

  color: #2853FD;

}



.pie-number1 {

  color: #1EBFAC;

}

</style>