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="tooltipLine"

                     :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>

@@ -190,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' } },

    ]

  }

@@ -208,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' } },

    ]

  }

@@ -264,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 = () => {

@@ -330,7 +311,7 @@
    customerName.push(item.customerName)

    totalAmount.push(item.totalAmount)

  })

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

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

  xAxis1.value = [

    {

      type: 'category',

@@ -369,7 +350,7 @@
    receiptAmount.push(item.receiptAmount)

    invoiceAmount.push(item.invoiceAmount)

  })

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

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

  xAxis2.value = [

    {

      type: 'category',

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

  margin-bottom: 20px;

}



.card-top-right {

  padding: 16px;

  background: #fff;

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

  margin-left: 20px;

}



.card-bottom {

  padding: 16px;

  background: #fff;

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

  margin-bottom: 20px;

}



.title {

  position: relative;

  font-size: 18px;

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

  margin-bottom: 26px;

}



.title::before {

  position: absolute;

  left: 0;

@@ -488,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;

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

  align-items: center;

}



.info-card1 {

  width: 300px;

  height: 126px;

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

  align-items: center;

}



.info-card2 {

  width: 300px;

  height: 126px;

@@ -522,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;

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

  align-items: flex-start;

}



.info-message2 {

  font-weight: bold;

  display: flex;

@@ -542,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;

@@ -568,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;

@@ -585,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>