diff --git a/.env.development b/.env.development index d74f104..0346afc 100644 --- a/.env.development +++ b/.env.development @@ -6,7 +6,7 @@ ENV = 'development' # 共享电动车管理系统/开发环境 # VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api' -VUE_APP_BASE_API = 'http://localhost:8080' +VUE_APP_BASE_API = 'http://192.168.2.189:8080' # 路由懒加载 VUE_CLI_BABEL_TRANSPILE_MODULES = true diff --git a/src/api/system/area.js b/src/api/system/area.js index f019fe1..b4e1dec 100644 --- a/src/api/system/area.js +++ b/src/api/system/area.js @@ -16,7 +16,12 @@ export function getArea(areaId) { method: 'get' }) } - +export function getStatistics(areaId) { + return request({ + url: '/index/statistics?areaId=' + areaId, + method: 'get' + }) +} // 新增运营区 export function addArea(data) { return request({ diff --git a/src/main.js b/src/main.js index 5f5b981..55cc2df 100644 --- a/src/main.js +++ b/src/main.js @@ -4,6 +4,8 @@ import Cookies from 'js-cookie' import Element from 'element-ui' import './assets/styles/element-variables.scss' +// import * as echarts from 'echarts' +// Vue.prototype.$echarts = echarts; import '@/assets/styles/index.scss' // global css import '@/assets/styles/ruoyi.scss' // ruoyi css diff --git a/src/views/statistics/index.vue b/src/views/statistics/index.vue index 1fafa69..a457185 100644 --- a/src/views/statistics/index.vue +++ b/src/views/statistics/index.vue @@ -1,97 +1,713 @@ <template> - <div class="app-container home"> - 1111111111111111111 + <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">提现</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: 65rem;height: 19.17rem;"></div> + </div> + </div> + <div class="car_info_box"> + <div class="tit">车辆统计</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/uAKVUuosyqvFJx5Ynjbp" alt="">离线(辆) + </div> + <div class="info_cont_txt"> + {{StatisticsInfo.vehicleVo.offlineNum}} + </div> + </div> + <div class="info_cont"> + <div class="info_cont_top"> + <img src="https://lxnapi.ccttiot.com/bike/img/static/uAoVo6LxxZ4PthTHZtiH" alt="">仓库中(辆) + </div> + <div class="info_cont_txt"> + {{StatisticsInfo.vehicleVo.inStashNum}} + </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/uTicws9tIsCpsqj8buxT" 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/uTicws9tIsCpsqj8buxT" 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/uTicws9tIsCpsqj8buxT" 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/uTicws9tIsCpsqj8buxT" 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/uTicws9tIsCpsqj8buxT" 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/uTicws9tIsCpsqj8buxT" alt="">已完成维修 + </div> + <div class="cont_li_bot"> + {{StatisticsInfo.operationVo.completedRepairCount}} + </div> + </div> + </div> + </div> </div> </template> <script> -import { getBalance } from '@/api/system/dept' - +import { listArea, 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 { - // 版本号 - version: "3.8.7", - balance: null, - userName: null + areaOptions: [], + areaId: 14, + StatisticsInfo: {} }; }, created() { - this.userName = this.$store.state.user.name; - getBalance().then(response => { - this.balance = response.data; - }); + this.getAreaOptions(); + + }, + mounted() { + this.getAreastatistics() }, methods: { - goTarget(href) { - window.open(href, "_blank"); + handleAreaChange(newAreaId) { + console.log('newAreaId:', newAreaId); + this.areaId = newAreaId; + // this.getAreaList(this.areaId); + this.getAreastatistics() + }, + getAreaOptions() { + getAreaOptionselect().then(response => { + this.areaOptions = response.data; + console.log("areaOptions", this.areaOptions); + }); + }, + getAreastatistics() { + getStatistics(this.areaId).then(response => { + this.StatisticsInfo = response.data; + this.StatisticsInfo.incomeVoList.reverse(); + setTimeout(() => { + this.drawLine() + }, 800); + + console.log("areaOptions", this.areaOptions); + }); + }, + drawLine() { + let myChart = echarts.init(document.getElementById("myChart")); + // 设置图表的配置项和数据 + myChart.setOption({ + grid: { + left: 50, + 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} K' + } + }, + { + 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"> -.home { - blockquote { - padding: 10px 20px; - margin: 0 0 20px; - font-size: 17.5px; - border-left: 5px solid #eee; - } - hr { - margin-top: 20px; - margin-bottom: 20px; - border: 0; - border-top: 1px solid #eee; - } - .col-item { - margin-bottom: 20px; +.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; } - ul { - padding: 0; - margin: 0; + ::v-deep .el-select .el-input__inner { + font-size: 1.2rem; // 调整此处以修改文字大小 } - font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - color: #676a6c; - overflow-x: hidden; - - ul { - list-style-type: none; + ::v-deep .el-option { + font-size: 1.2rem; // 调整此处以修改下拉选项的文字大小 } - h4 { - margin-top: 0px; - } + .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; - h2 { - margin-top: 10px; - font-size: 26px; - font-weight: 100; - } + .tit { + width: 100%; + font-weight: 500; + font-size: 1.33rem; + color: #1D252F; + } - p { - margin-top: 10px; + .cont_box { + width: 100%; + height: 5.67rem; - b { - font-weight: 700; + .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; + } + + } } } - .update-log { - ol { - display: block; - list-style-type: decimal; - margin-block-start: 1em; - margin-block-end: 1em; - margin-inline-start: 0; - margin-inline-end: 0; - padding-inline-start: 40px; + .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; + + .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%; + + .info_cont { + width: 33%; + + .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.33rem; + 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: 500; + font-size: 1.33rem; + color: #1D252F; + } + + .txt { + 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> -