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

曹睿

21 小时以前 e03b2546f020327bf9fd414d8869a9ccd2270c2d

 src/views/index.vue

@@ -38,16 +38,14 @@
            <div class="card-group">

              <div class="pie-group">

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

                  <Echarts ref="chart"

                           :legend="pieLegend"

                           :chartStyle="chartStyle"

                           :series="materialPieSeries"

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

@@ -59,17 +57,14 @@
            <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>

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

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