bick_back/src/views/statistics/index.vue

<template>
  <div class="page">
    <div class="area-options">
      <span style="margin-right: .625rem;">切换运营区</span>
      <el-select v-model="areaId" placeholder="请选择运营区" clearable @change="handleAreaChange" size="medium">
        <el-option v-for="item in areaOptions" :key="item.areaId" :label="item.areaName"
          :value="item.areaId"></el-option>
      </el-select>
    </div>
    <div class="top_box">
      <div class="tops_left">
        <div class="left_top">
          <div class="left_top_left">
            <div class="txt">余额</div>
            <div class="txt1" style="margin-top: 1.33rem;">{{StatisticsInfo.balance}}</div>
          </div>
          <div class="left_top_right">
            <img src="https://lxnapi.ccttiot.com/bike/img/static/u97bA2ZACCPZRdxICy1g" alt="">
          </div>
        </div>
        <div class="txt_li" style="margin-top: 0.33rem;">已提现：{{StatisticsInfo.withdraw}}</div>
        <div class="txt_li" style="margin-top: 1.17rem;">待结算金额：{{StatisticsInfo.settlementAmount}}</div>
        <div class="bot_btn" @click="topage()">提现</div>
      </div>
      <div class="tops_right">
        <div class="tops_right_top">
          <!-- 应收 -->
          <div class="top_cont">
            <div class="cont_left">
              <div class="cont_left_top">今日营收</div>
              <div class="cont_left_cent">{{StatisticsInfo.todayIncome}}</div>
              <div class="cont_left_bot">总营收：{{StatisticsInfo.totalIncome}}</div>
            </div>
            <div class="cont_right">
              <img src=" https://lxnapi.ccttiot.com/bike/img/static/usXmq54bfhrZiw7uPNlq" alt="" style="width: 4.5rem;height: 4.5rem;">
            </div>
          </div>
          <!-- 订单数 -->
          <div class="top_cont">
            <div class="cont_left">
              <div class="cont_left_top">今日订单数</div>
              <div class="cont_left_cent">{{StatisticsInfo.todayOrderCount}}</div>
              <div class="cont_left_bot">总订单数：{{StatisticsInfo.totalOrderCount}}</div>
            </div>
            <div class="cont_right">
              <img src="https://lxnapi.ccttiot.com/bike/img/static/ut2C20sHoYYfYRPeAA98" alt="">
            </div>
          </div>
          <!-- 今日订单金额 -->
          <div class="top_cont">
            <div class="cont_left">
              <div class="cont_left_top">今日订单金额</div>
              <div class="cont_left_cent">{{StatisticsInfo.todayOrderFee}}</div>
              <div class="cont_left_bot">总订单金额：{{StatisticsInfo.totalOrderFee}}</div>
            </div>
            <div class="cont_right">
              <img src="https://lxnapi.ccttiot.com/bike/img/static/uXBNkOdtF7dtD3w9XGEi" alt="" >
            </div>
          </div>
          <!-- 代付款订单数 -->
          <div class="top_cont">
            <div class="cont_left">
              <div class="cont_left_top">付款订单数</div>
              <div class="cont_left_cent">{{StatisticsInfo.unpaidOrderCount}}</div>
              <div class="cont_left_bot">待付款订单金额：{{StatisticsInfo.unpaidOrderFee}}</div>
            </div>
            <div class="cont_right">
              <img src="https://lxnapi.ccttiot.com/bike/img/static/uoHknV3fcQXweSPhfoOA" alt="" style="width: 4.5rem;height:4.5rem;">
            </div>
          </div>
        </div>
        <div class="tops_right_bot">
          <!-- 还车待审核 -->
          <div class="tops_right_bot_cont">
            <div class="tops_right_bot_cont_left">
              <div class="tit">还车待审核订单</div>
              <div class="txt">{{StatisticsInfo.returnOrderCount}}</div>
            </div>
            <div class="tops_right_bot_cont_right">
              <img src="https://lxnapi.ccttiot.com/bike/img/static/u62zTL6AjOvYLENgVHGF" alt="">
            </div>
          </div>
          <!-- 还车待审核 -->
          <div class="tops_right_bot_cont">
            <div class="tops_right_bot_cont_left">
              <div class="tit">骑行中的订单</div>
              <div class="txt">{{StatisticsInfo.ridingOrder}}</div>
            </div>
            <div class="tops_right_bot_cont_right">
              <img src="https://lxnapi.ccttiot.com/bike/img/static/uFyc6DIDXlp386JSqAOY" alt="">
            </div>
          </div>
          <!-- 还车待审核 -->
          <div class="tops_right_bot_cont">
            <div class="tops_right_bot_cont_left">
              <div class="tit">今日退款金额</div>
              <div class="txt">{{StatisticsInfo.todayRefundFee}}</div>
            </div>
            <div class="tops_right_bot_cont_right">
              <img src="https://lxnapi.ccttiot.com/bike/img/static/uBygxYBgvflSl9847t12" alt="">
            </div>
          </div>
          <!-- 还车待审核 -->
          <div class="tops_right_bot_cont">
            <div class="tops_right_bot_cont_left">
              <div class="tit">待审核故障</div>
              <div class="txt">{{StatisticsInfo.faultOrderCount}}</div>
            </div>
            <div class="tops_right_bot_cont_right">
              <img src="https://lxnapi.ccttiot.com/bike/img/static/uiaGJviCF6Bp7j3QVVsU" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cont_box">
      <div class="echart_box">
        <div class="tit"> 营收统计</div>
        <div class="echarts_cont">
          <div id="myChart" style="width: 100%;height: 19.17rem;"></div>
        </div>
      </div>
      <div class="car_info_box">
        <!-- <div class="tit">车辆统计</div> -->
        <div class="tit" style="margin-top: 1rem;font-weight: 700;">仓库中的车辆: {{StatisticsInfo.vehicleVo.inStashNum}}</div>
        <div class="tit" style="margin-top: 1.5rem;font-weight: 700;">投放中：{{StatisticsInfo.vehicleVo.inOperation}} <span style="color: #ccc;">(含离线 {{StatisticsInfo.vehicleVo.offlineNum}})</span></div>
        <!-- <div class="info_li">
          <div class="info_cont">
            <div class="info_cont_top">
              <img src="https://lxnapi.ccttiot.com/bike/img/static/uwDG51FnJQGuEXLn2SYQ" alt="" style="height: 1rem;">车辆总数（辆）
            </div>
            <div class="info_cont_txt">
              {{StatisticsInfo.vehicleVo.allNum}}
            </div>
          </div>
          <div class="info_cont">
            <div class="info_cont_top">
              <img src="https://lxnapi.ccttiot.com/bike/img/static/uUSztvtXXdRtxHzQVWgH" alt="">投放中（辆）
            </div>
            <div class="info_cont_txt">
              {{StatisticsInfo.vehicleVo.inOperation}}
            </div>
          </div>
          <div class="info_cont">
            <div class="info_cont_top">
              <img src="https://lxnapi.ccttiot.com/bike/img/static/uxx6Ajx0ne7Ho6LH8Bfg" alt="">禁用中（辆）
            </div>
            <div class="info_cont_txt">
              {{StatisticsInfo.vehicleVo.disabledNum}}
            </div>
          </div>
        </div> -->
        <div class="info_li">
          <div class="info_cont">
            <div class="info_cont_top">
              <img src="https://lxnapi.ccttiot.com/bike/img/static/uHMz8QKu5gM27BvYmwqS" alt="">待租（辆）
            </div>
            <div class="info_cont_txt">
              {{StatisticsInfo.vehicleVo.normalNum}}
            </div>
          </div>
          <div class="info_cont">
            <div class="info_cont_top">
              <img src="https://lxnapi.ccttiot.com/bike/img/static/uXQ75ZwqEV0kErjs9Jvt" alt="">预约中（辆）
            </div>
            <div class="info_cont_txt">
              {{StatisticsInfo.vehicleVo.inAppointmentNum}}
            </div>
          </div>
          <div class="info_cont">
            <div class="info_cont_top">
              <img src="https://lxnapi.ccttiot.com/bike/img/static/uUAe2gRT4blxwsIKs0id" alt="">骑行中（辆）
            </div>
            <div class="info_cont_txt">
              {{StatisticsInfo.vehicleVo.ridingNum}}
            </div>
          </div>
        </div>
        <div class="info_li">
          <div class="info_cont">
            <div class="info_cont_top">
              <img src="https://lxnapi.ccttiot.com/bike/img/static/uvfMxL94fPWnZ1RTVTyx" alt="">临时锁车（辆）
            </div>
            <div class="info_cont_txt">
              {{StatisticsInfo.vehicleVo.temporarilyLockNum}}
            </div>
          </div>
          <div class="info_cont">
            <div class="info_cont_top">
              <img src="https://lxnapi.ccttiot.com/bike/img/static/uxx6Ajx0ne7Ho6LH8Bfg" alt="">禁用中（辆）
            </div>
            <div class="info_cont_txt">
              {{StatisticsInfo.vehicleVo.disabledNum}}
            </div>
          </div>
          <div class="info_cont">
            <div class="info_cont_top">
              <img src="https://lxnapi.ccttiot.com/bike/img/static/uwDG51FnJQGuEXLn2SYQ" alt="" style="height: 1rem;">车辆总数（辆）
            </div>
            <div class="info_cont_txt">
              {{StatisticsInfo.vehicleVo.allNum}}
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="bot_box">
      <div class="tit">运维状态</div>
      <div class="cont_box">
       
        <div class="cont_li">
          <div class="cont_li_top">
            <img src="https://lxnapi.ccttiot.com/bike/img/static/uDOL2U9faZ5ku81NTPnU" alt="">换电工单
          </div>
          <div class="cont_li_bot">
            {{StatisticsInfo.operationVo.replacementOrderCount}}
          </div>
        </div>
        <div class="cont_li">
          <div class="cont_li_top">
            <img src="https://lxnapi.ccttiot.com/bike/img/static/uuCZPQA3uCAJsAqca8Bv" alt="">调度工单
          </div>
          <div class="cont_li_bot">
            {{StatisticsInfo.operationVo.dispatchCount}}
          </div>
        </div>
        <div class="cont_li">
          <div class="cont_li_top">
            <img src="https://lxnapi.ccttiot.com/bike/img/static/uwGblBABW5uKSVzW4FjE" alt="">维修工单
          </div>
          <div class="cont_li_bot">
            {{StatisticsInfo.operationVo.repairCount}}
          </div>
        </div>
        <div class="cont_li">
          <div class="cont_li_top">
            <img src="https://lxnapi.ccttiot.com/bike/img/static/uDOL2U9faZ5ku81NTPnU" alt="">已完成换电
          </div>
          <div class="cont_li_bot">
            {{StatisticsInfo.operationVo.completedReplacementOrderCount}}
          </div>
        </div>
        <div class="cont_li">
          <div class="cont_li_top">
            <img src="https://lxnapi.ccttiot.com/bike/img/static/uuCZPQA3uCAJsAqca8Bv" alt="">已完成调度
          </div>
          <div class="cont_li_bot">
            {{StatisticsInfo.operationVo.completedDispatchCount}}
          </div>
        </div>
        <div class="cont_li">
          <div class="cont_li_top">
            <img src="https://lxnapi.ccttiot.com/bike/img/static/uwGblBABW5uKSVzW4FjE" alt="">已完成维修
          </div>
          <div class="cont_li_bot">
            {{StatisticsInfo.operationVo.completedRepairCount}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getArealist, getStatistics, optionselect as getAreaOptionselect } from '@/api/system/area'
// import { getStatistics } from '@/api/system/area'
import * as echarts from 'echarts';
export default {
  name: "Index",
  data() {
    return {
      areaOptions: [],
      areaId: null,
      StatisticsInfo: {}
    };
  },
  created() {
    
   
  },
  mounted() {
    this.getAreaOptions();
   
  },
  methods: {
    handleAreaChange(newAreaId) {
      console.log('newAreaId:', newAreaId);
      this.areaId = newAreaId;
      // this.getAreaList(this.areaId);
      this.getAreastatistics()
    },
    topage(){
      this.$router.push('/finance/withdraw');

    },
    getAreaOptions() {
      getArealist().then(response => {
        
        this.areaOptions = response.data;
        this.areaId= this.areaOptions[0].areaId
        this.getAreastatistics()
        console.log("areaOptions", this.areaOptions);
      });
    },
    getAreastatistics() {
      getStatistics(this.areaId).then(response => {
        this.StatisticsInfo = response.data;
        this.StatisticsInfo.incomeVoList.reverse();
        setTimeout(() => {
          this.drawLine()
        }, 1000);
       
        console.log("areaOptions", this.areaOptions);
      });
    },
    drawLine() {
      let myChart = echarts.init(document.getElementById("myChart"));
      // 设置图表的配置项和数据
      myChart.setOption({
        grid: {
          left: 60,
          right: 50,
          top: 10,
          bottom: 20,
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['营收', '订单']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.StatisticsInfo.incomeVoList.map(item => item.day)
        },
        yAxis: [
          {
            type: 'value',
            name: '营收',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#5470C6'
              }
            },
            axisLabel: {
              formatter: '{value} 元'
            }
          },
          {
            type: 'value',
            name: '订单',
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#91CC75'
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '营收',
            type: 'line',
            data:this.StatisticsInfo.incomeVoList.map(item => item.income),
            yAxisIndex: 0,
            itemStyle: {
              color: '#5470C6'
            },
            smooth: true
          },
          {
            name: '订单',
            type: 'line',
            data: this.StatisticsInfo.incomeVoList.map(item => item.orderNum),
            yAxisIndex: 1,
            itemStyle: {
              color: '#91CC75'
            },
            smooth: true
          }
        ]
      });
    }

  }
};
</script>

<style scoped lang="scss">
.page {
  padding: 1.92rem;
  background: #F7F8FA;
  width: 100%;
  // height: 100vh;
  display: flex;
  flex-direction: column;

  .area-options {
    width: 100%;
    font-weight: 700;
    font-size: 1.5rem;
    color: #3D3D3D;
    display: flex;
    flex-direction: row;
    margin-bottom: 1rem;
  }

  ::v-deep .el-select .el-input__inner {
    font-size: 1.2rem; // 调整此处以修改文字大小
  }

  ::v-deep .el-option {
    font-size: 1.2rem; // 调整此处以修改下拉选项的文字大小
  }

  .bot_box {
    margin-bottom: 2rem;
    padding: 1.08rem;
    margin-top: 1.33rem;
    width: 100%;
    height: 12.42rem;
    background: #FFFFFF;
    border-radius: 0rem 0rem 0rem 0rem;

    .tit {
      width: 100%;
      font-weight: 500;
      font-size: 1.33rem;
      color: #1D252F;
    }

    .cont_box {
      width: 100%;
      height: 5.67rem;

      .cont_li {
        width: 16.6%;
        height: 5.67rem;
        border-right: 1px solid #D8D8D8;

        .cont_li_top {
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: center;

          img {
            margin-right: 0.83rem;
            width: 1.29rem;
            height: 1.13rem;
          }

          font-weight: 700;
          font-size: 1.33rem;
          color: #3D3D3D;

        }

        .cont_li_bot {
          margin-top: 1.17rem;
          width: 100%;
          text-align: center;
          font-weight: 500;
          font-size: 1.67rem;
          color: #3D3D3D;
        }

      }
    }
  }

  .cont_box {
    width: 100%;
    margin-top: 1.33rem;
    display: flex;
    flex-wrap: nowrap;

    .echart_box {
      padding: 1.08rem;
      margin-right: 1.17rem;
      width: 60%;
      height: 23.17rem;
      background: #FFFFFF;
      border-radius: 0rem 0rem 0rem 0rem;
      .echarts_cont{
        width: 100%;
      }
      .tit {
        font-weight: 500;
        font-size: 1.33rem;
        color: #1D252F;
      }
    }

    .car_info_box {

      padding: 0.75rem 1.67rem;
      width: 39%;
      height: 23.17rem;
      background: #FFFFFF;
      border-radius: 0rem 0rem 0rem 0rem;

      .tit {
        font-weight: 500;
        font-size: 1.33rem;
        color: #1D252F;
      }

      .info_li {
       
        margin-top: 1.25rem;
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        // height: 30%;
        .info_cont {
          width: 33%;
          margin-top: 1rem;
          .info_cont_top {
            img {
              width: 1.33rem;
              height: 1.33rem;
              margin-right: 0.58rem;
            }

            display: flex;
            flex-wrap: nowrap;
            // justify-content: center;
            align-items: center;
            width: 100%;
            font-weight: 500;
            font-size: 1.33rem;
            color: #757575;
          }

          .info_cont_txt {
            margin-top: 0.53rem;
            width: 100%;
            // text-align: center;
            font-weight: 500;
            font-size: 2rem;
            color: #3D3D3D;
          }
        }
      }
    }
  }

  .top_box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .tops_left {
      padding: 1.33rem 2.08rem 1.08rem 1.83rem;
      background: #FFFFFF;
      margin-right: 1rem;
      flex: 1;
      display: flex;
      max-width: 30rem;
      flex-direction: column;

      .left_top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 1rem;

        .left_top_left {
          .txt {
            font-weight: 500;
            font-size: 1.5rem;
            color: #1D252F;
          }

          .txt1 {
            font-weight: 500;
            font-size: 2rem;
            color: #1D2129;
          }
        }

        .left_top_right {
          width: 5.83rem;
          height: 6.5rem;

          img {
            width: 5.83rem;
            height: 6.5rem;
          }
        }
      }

      .txt_li {
        font-weight: 400;
        font-size: 1.17rem;
        color: #1D2129;
        margin-top: 0.5rem;
      }

      .bot_btn {
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 3.33rem;
        background: #A6A6E7;
        border-radius: 0.42rem;
        font-weight: 700;
        font-size: 1.33rem;
        color: #FFFFFF;
      }
    }

    .tops_right {
      display: flex;
      flex-direction: column;
      flex: 2;

      .tops_right_top {
        display: flex;
        margin-bottom: 1rem;

        .top_cont {
          display: flex;
          justify-content: space-between;
          padding: 1.33rem;
          background: #FFFFFF;
          border-radius: 0.25rem;
          flex: 1;
          margin-right: 1rem;

          &:last-child {
            margin-right: 0;
          }

          .cont_right {
            width: 5rem;
            height: 5rem;

            img {
              width: 3.93rem;
              height: 4.37rem;
            }
          }

          .cont_left {
            display: flex;
            flex-direction: column;
            justify-content: center;

            .cont_left_top {
              font-weight: 700;
              font-size: 1.33rem;
              color: #1D252F;
            }

            .cont_left_cent {
              margin-top: 1.33rem;
              font-weight: 700;
              font-size: 2rem;
              color: #1D2129;
            }

            .cont_left_bot {
              margin-top: 0.5rem;
              font-weight: 400;
              font-size: 1.17rem;
              color: #1D2129;
            }
          }
        }
      }

      .tops_right_bot {
        display: flex;

        .tops_right_bot_cont {
          display: flex;
          justify-content: space-between;
          padding: 1.33rem;
          background: #FFFFFF;
          border-radius: 0.25rem;
          flex: 1;
          margin-right: 1rem;

          &:last-child {
            margin-right: 0;
          }

          .tops_right_bot_cont_left {
            .tit {
              font-weight: 700;
              font-size: 1.33rem;
              color: #1D252F;
            }

            .txt {
              margin-top: 0.5rem;
              font-weight:500;
              font-size: 2rem;
              color: #1D2129;
            }
          }

          .tops_right_bot_cont_right {
            width: 4.5rem;
            height: 4.5rem;

            img {
              width: 4.5rem;
              height: 4.5rem;
            }
          }
        }
      }
    }
  }
}
</style>